AIclinicalresearch/docs/03-业务模块/DC-数据清洗整理/06-开发记录/2025-12-07_Day5_Ant-Design-X重构完成.md

# 2025-12-07 Day 5: Ant Design X 閲嶆瀯瀹屾垚

> **鍏抽敭閲岀▼纰?*锛氬熀浜庣湡瀹?Ant Design X API 瀹屾垚閫氱敤 Chat 缁勪欢閲嶆瀯

---

## 馃搵 浠诲姟姒傝堪

**鐩<>爣**锛氬皢涔嬪墠鍩轰簬閿欒<E996BF>鐞嗚В寮€鍙戠殑 Chat 缁勪欢锛岄噸鏋勪负鍩轰簬鐪熷疄 Ant Design X API 鐨勫疄鐜?

**瑙﹀彂鍘熷洜**锛氬彂鐜颁箣鍓嶇殑瀹炵幇浣跨敤浜嗕笉瀛樺湪鐨?`useXAgent` Hook锛岄渶瑕佸熀浜庡畼鏂规枃妗ｉ噸鏂板紑鍙?

---

## 鉁?瀹屾垚浠诲姟

### 1. 鉁?瀹夎<E780B9> @ant-design/x-sdk (5鍒嗛挓)

```bash
npm install @ant-design/x-sdk
```

**鐗堟湰**锛?.1.0

**楠岃瘉**锛?
- 鉁?鍖呮垚鍔熷畨瑁呭埌 `node_modules/@ant-design/x-sdk`
- 鉁?鏌ョ湅浜嗙湡瀹炵殑绫诲瀷瀹氫箟鍜屽<E98D9C>鍑?

---

### 2. 鉁?鏌ョ湅瀹樻柟鏂囨。 (15鍒嗛挓)

**璁块棶鐨勬枃妗?*锛?
- https://x.ant.design/components/bubble-cn
- https://x.ant.design/x-sdks/use-x-chat-cn
- https://x.ant.design/x-sdks/introduce-cn

**鍏抽敭鍙戠幇**锛?

#### Ant Design X 鏋舵瀯

```
@ant-design/x (缁勪欢搴?          鈫? UI 缁勪欢锛圔ubble, Sender, Conversations锛?
        鈫?閰嶅悎
@ant-design/x-sdk (SDK)         鈫? 鏁版嵁娴佺<E5A8B4>鐞嗭紙useXChat, useConversations锛?
        鈫?瀵规帴
鍚庣<EFBFBD> API                         鈫? AI 妯″瀷鏈嶅姟
```

#### 鏍稿績缁勪欢

| 缁勪欢/Hook | 鏉ユ簮 | 浣滅敤 |
|-----------|------|------|
| `Bubble.List` | @ant-design/x | 娓叉煋娑堟伅鍒楄〃 |
| `Sender` | @ant-design/x | 杈撳叆妗?|
| `Conversations` | @ant-design/x | 浼氳瘽鍒楄〃 |
| `useXChat` | @ant-design/x-sdk | 绠＄悊鍗曚釜浼氳瘽鏁版嵁娴?|
| `useConversations` | @ant-design/x-sdk | 绠＄悊澶氫細璇濆垪琛?|

---

### 3. 鉁?閲嶆瀯 types.ts (10鍒嗛挓)

**鏂囦欢**锛歚frontend-v2/src/shared/components/Chat/types.ts`

**鍏抽敭鍙樻洿**锛?
- 鉁?绉婚櫎涓嶅瓨鍦ㄧ殑绫诲瀷锛坄InputRendererProps`, `UseChatOptions`, `UseChatReturn`锛?
- 鉁?绠€鍖?`ChatMessage` 绫诲瀷瀹氫箟
- 鉁?娣诲姞 `ChatProviderConfig` 閰嶇疆鎺ュ彛
- 鉁?瀹屾暣鐨?TypeScript 绫诲瀷鏀<E780B7>寔

**鏍稿績绫诲瀷**锛?

```typescript
interface ChatMessage {
  id: string | number;
  role: 'user' | 'assistant' | 'system';
  content: string;
  status?: 'local' | 'loading' | 'success' | 'error';
  code?: string;              // Tool C 涓撶敤
  explanation?: string;       // Tool C 涓撶敤
  timestamp?: number;
  metadata?: Record<string, any>;
}

interface ChatProviderConfig {
  apiEndpoint: string;
  method?: 'GET' | 'POST';
  headers?: Record<string, string>;
  requestFn?: (message: string, context?: any) => Promise<any>;
}
```

---

### 4. 鉁?閲嶆瀯 ChatContainer.tsx (30鍒嗛挓)

**鏂囦欢**锛歚frontend-v2/src/shared/components/Chat/ChatContainer.tsx`

**閲嶅ぇ鍐崇瓥**锛氶噰鐢?*绠€鍖栧疄鐜?*锛屼笉浣跨敤 `useXChat` Hook

**鍘熷洜**锛?
1. `AbstractChatProvider` 闇€瑕佸疄鐜板<E9909C>鏉傜殑鎶借薄鏂规硶
2. 闇€瑕佹彁渚?`XRequest` 閰嶇疆
3. 褰撳墠鍦烘櫙涓嶉渶瑕?SDK 鐨勯珮绾х壒鎬э紙娴佸紡鍝嶅簲銆佸<E98A86>妯″瀷鍒囨崲锛?

**瀹炵幇鏂规<E98F82>**锛?
- 鉁?鐩存帴浣跨敤 React `useState` 绠＄悊娑堟伅鍒楄〃
- 鉁?浣跨敤 `useCallback` 澶勭悊娑堟伅鍙戦€?
- 鉁?浣跨敤 Ant Design X 鐨?`Bubble.List` 鍜?`Sender` 缁勪欢
- 鉁?鏀<>寔鑷<E5AF94>畾涔夋秷鎭<E7A7B7>覆鏌撳櫒
- 鉁?瀹屾暣鐨勯敊璇<E6958A><E79287>鐞嗗拰鍔犺浇鐘舵€?

**鏍稿績閫昏緫**锛?

```typescript
const [messages, setMessages] = useState<ChatMessage[]>(defaultMessages);
const [isLoading, setIsLoading] = useState(false);

const handleSend = useCallback(async (messageContent: string) => {
  // 1. 娣诲姞鐢ㄦ埛娑堟伅
  const userMessage = { id: Date.now(), role: 'user', content: messageContent, ... };
  setMessages(prev => [...prev, userMessage]);

  // 2. 鏄剧ず鍔犺浇鐘舵€?
  const loadingMessage = { id: 'loading', role: 'assistant', content: '姝ｅ湪鎬濊€?..', ... };
  setMessages(prev => [...prev, loadingMessage]);
  setIsLoading(true);

  try {
    // 3. 璋冪敤鍚庣<E98D9A> API
    const response = await providerConfig.requestFn(messageContent, { messages });

    // 4. 绉婚櫎鍔犺浇娑堟伅锛屾坊鍔?AI 鍝嶅簲
    const aiMessage = { id: response.messageId, role: 'assistant', ... };
    setMessages(prev => prev.filter(m => m.id !== 'loading').concat(aiMessage));

  } catch (error) {
    // 5. 閿欒<E996BF>澶勭悊
    const errorMessage = { id: Date.now(), role: 'assistant', content: error.message, ... };
    setMessages(prev => prev.filter(m => m.id !== 'loading').concat(errorMessage));
  } finally {
    setIsLoading(false);
  }
}, [messages, providerConfig, ...]);
```

---

### 5. 鉁?閲嶆瀯 MessageRenderer.tsx (5鍒嗛挓)

**鏂囦欢**锛歚frontend-v2/src/shared/components/Chat/MessageRenderer.tsx`

**鍙樻洿**锛?
- 鉁?绠€鍖栫被鍨嬪畾涔?
- 鉁?鏀<>寔 `explanation` 鍜?`content` 鍙屽瓧娈?
- 鉁?闆嗘垚 `CodeBlockRenderer`

---

### 6. 鉁?閲嶆瀯 CodeBlockRenderer.tsx (5鍒嗛挓)

**鏂囦欢**锛歚frontend-v2/src/shared/components/Chat/CodeBlockRenderer.tsx`

**鍙樻洿**锛?
- 鉁?绉婚櫎鏈<E6AB8E>娇鐢ㄧ殑 `message` 瀵煎叆
- 鉁?淇濇寔鍘熸湁鍔熻兘涓嶅彉锛堣<E9949B>娉曢珮浜<E78FAE>€佹墽琛屾寜閽<E5AF9C>級

---

### 7. 鉁?鏇存柊 Sidebar.tsx 闆嗘垚 (10鍒嗛挓)

**鏂囦欢**锛歚frontend-v2/src/modules/dc/pages/tool-c/components/Sidebar.tsx`

**鍏抽敭鍙樻洿**锛?

```typescript
<ChatContainer
  conversationType="tool-c"
  conversationKey={sessionId}
  providerConfig={{
    apiEndpoint: `/api/dc/tool-c/process`,
    requestFn: async (message: string) => {
      const response = await fetch(`/api/dc/tool-c/process`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ sessionId, userMessage: message }),
      });
      return await response.json();
    },
  }}
  customMessageRenderer={(msgInfo) => (
    <MessageRenderer
      messageInfo={msgInfo}
      onExecuteCode={handleExecuteCode}
      isExecuting={isExecuting}
    />
  )}
  onMessageReceived={(msg) => {
    if (msg.metadata?.newDataPreview) {
      onDataUpdate(msg.metadata.newDataPreview);
    }
  }}
/>
```

---

### 8. 鉁?淇<><E6B787> Linter 閿欒<E996BF> (15鍒嗛挓)

**淇<><E6B787>鐨勯敊璇?*锛?
1. 鉁?绉婚櫎涓嶅瓨鍦ㄧ殑绫诲瀷瀵煎嚭锛坄InputRendererProps`, `UseChatOptions`, `UseChatReturn`锛?
2. 鉁?绉婚櫎鏈<E6AB8E>娇鐢ㄧ殑瀵煎叆锛坄message` from antd锛?
3. 鉁?绉婚櫎鏈<E6AB8E>娇鐢ㄧ殑鍙傛暟锛坄bubbleProps`锛?
4. 鉁?淇<><E6B787> `AbstractChatProvider` 鏋勯€犲嚱鏁拌皟鐢?
5. 鉁?淇<><E6B787> `Bubble.List` 鐨?`role` 灞炴€х被鍨嬮敊璇?

**鏈€缁堢粨鏋?*锛氣渽 **0 閿欒<E996BF>锛? 璀﹀憡**

---

### 9. 鉁?鏇存柊 README.md (10鍒嗛挓)

**鏂囦欢**锛歚frontend-v2/src/shared/components/Chat/README.md`

**鍐呭<E98D90>**锛?
- 鉁?瀹屾暣鐨?API 鏂囨。
- 鉁?蹇<>€熷紑濮嬫寚鍗?
- 鉁?浣跨敤鍦烘櫙绀轰緥锛圓IA銆丳KB銆乀ool C锛?
- 鉁?鑷<>畾涔夋覆鏌撶ず渚?
- 鉁?甯歌<E794AF>闂<EFBFBD><E99782>瑙ｇ瓟

---

## 馃搳 浠ｇ爜缁熻<E7BC81>

| 鏂囦欢 | 琛屾暟 | 鍙樻洿 |
|------|------|------|
| `types.ts` | 109 | 閲嶅啓 |
| `ChatContainer.tsx` | 148 | 閲嶅啓 |
| `MessageRenderer.tsx` | 56 | 绠€鍖?|
| `CodeBlockRenderer.tsx` | 92 | 寰<>皟 |
| `Sidebar.tsx` | 169 | 鏇存柊闆嗘垚 |
| `README.md` | 394 | 閲嶅啓 |
| **鎬昏<E98EAC>** | **968** | **6 鏂囦欢** |

---

## 馃幆 鏍稿績鎴愭灉

### 1. 鉁?鐪熷疄鐨?Ant Design X 闆嗘垚

- 鉁?鍩轰簬瀹樻柟鏂囨。寮€鍙?
- 鉁?浣跨敤鐪熷疄瀛樺湪鐨勭粍浠跺拰 API
- 鉁?瀹屾暣鐨?TypeScript 绫诲瀷鏀<E780B7>寔

### 2. 鉁?绠€鍖栦絾瀹炵敤鐨勫疄鐜?

- 鉁?涓嶄緷璧栧<E792A7>鏉傜殑 SDK Hook
- 鉁?鏄撲簬鐞嗚В鍜岀淮鎶?
- 鉁?婊¤冻褰撳墠鎵€鏈変笟鍔￠渶姹?

### 3. 鉁?閫氱敤鑳藉姏灞傚缓璁?

- 鉁?绗<>竴涓<E7ABB4>墠绔<E5A2A0>€氱敤缁勪欢
- 鉁?鍙<><E98D99>鐢ㄤ簬 AIA銆丳KB銆乀ool C
- 鉁?涓烘湭鏉ユā鍧楅摵骞抽亾璺?

---

## 馃攧 鏋舵瀯瀵规瘮

### 鉂?涔嬪墠鐨勯敊璇<E6958A>疄鐜?

```typescript
// 鉂?涓嶅瓨鍦ㄧ殑 Hook
import { useXAgent } from '@ant-design/x';

const { messages, sendMessage } = useXAgent({
  // ...
});
```

### 鉁?褰撳墠鐨勬<E990A8>纭<EFBFBD>疄鐜?

```typescript
// 鉁?鐪熷疄鐨勭粍浠?
import { Bubble, Sender } from '@ant-design/x';

const [messages, setMessages] = useState<ChatMessage[]>([]);

const handleSend = async (message: string) => {
  // 鑷<>畾涔夋暟鎹<E69A9F>祦绠＄悊
};

return (
  <>
    <Bubble.List items={messages} />
    <Sender onSubmit={handleSend} />
  </>
);
```

---

## 馃摑 缁忛獙鏁欒<E98F81>

### 鈿狅笍 鍏抽敭鏁欒<E98F81>

1. **蹇呴』鏌ョ湅鐪熷疄鏂囨。**
   - 鉂?涓嶈兘鍩轰簬鍋囪<E98D8B>寮€鍙?
   - 鉁?蹇呴』璁块棶瀹樻柟鏂囨。楠岃瘉 API

2. **绠€鍗曚紭浜庡<E6B59C>鏉?*
   - 鉂?涓嶈<E6B693>杩囧害浣跨敤楂樼骇鐗规€?
   - 鉁?閫夋嫨鏈€绠€鍗曠殑鍙<E6AE91><E98D99>鏂规<E98F82>

3. **绫诲瀷瀹夊叏寰堥噸瑕?*
   - 鉁?TypeScript 甯<>姪鍙戠幇浜嗗緢澶氶敊璇?
   - 鉁?Linter 纭<>繚浠ｇ爜璐ㄩ噺

---

## 馃殌 涓嬩竴姝?

### 鍚庣<E98D9A> API 寮€鍙?

闇€瑕佸疄鐜?`/api/dc/tool-c/process` 绔<>偣锛?

```typescript
POST /api/dc/tool-c/process

Request:
{
  "sessionId": "xxx",
  "userMessage": "鎶妔ex鍒楃殑缂哄け鍊煎～琛ヤ负浼楁暟"
}

Response:
{
  "messageId": "xxx",
  "explanation": "濂界殑锛屾垜灏嗗府鎮?..",
  "code": "df['sex'].fillna(df['sex'].mode()[0], inplace=True)",
  "success": true,
  "metadata": {
    "newDataPreview": [...]
  }
}
```

### 绔<>埌绔<E59F8C>祴璇?

1. 鉁?鏂囦欢涓婁紶
2. 鉁?AI 瀵硅瘽
3. 鉁?浠ｇ爜鐢熸垚
4. 鉁?浠ｇ爜鎵ц<E98EB5>
5. 鉁?鏁版嵁鏇存柊

---

## 馃摝 浜や粯鐗?

### 浠ｇ爜鏂囦欢

1. 鉁?`shared/components/Chat/types.ts`
2. 鉁?`shared/components/Chat/ChatContainer.tsx`
3. 鉁?`shared/components/Chat/MessageRenderer.tsx`
4. 鉁?`shared/components/Chat/CodeBlockRenderer.tsx`
5. 鉁?`shared/components/Chat/styles/chat.css`
6. 鉁?`shared/components/Chat/index.ts`
7. 鉁?`shared/components/index.ts`
8. 鉁?`modules/dc/pages/tool-c/components/Sidebar.tsx`

### 鏂囨。

1. 鉁?`shared/components/Chat/README.md`
2. 鉁?鏈<>紑鍙戣<E98D99>褰?

---

## 鉁?楠岃瘉娓呭崟

- [x] TypeScript 缂栬瘧锛?*0 閿欒<E996BF>**
- [x] ESLint 妫€鏌ワ細**0 閿欒<E996BF>锛? 璀﹀憡**
- [x] 鎵€鏈夋枃浠跺凡鏇存柊
- [x] 浠ｇ爜閫昏緫姝ｇ‘
- [x] 鏂囨。瀹屾暣

---

## 馃帀 鎬荤粨

**Day 5 閲嶆瀯瀹屾垚锛?*

- 鉁?鍩轰簬鐪熷疄 Ant Design X API 閲嶆瀯
- 鉁?绠€鍖栧疄鐜帮紝鏄撲簬缁存姢
- 鉁?瀹屾暣鐨勭被鍨嬪畨鍏?
- 鉁?閫氱敤鑳藉姏灞傚缓璁惧畬鎴?
- 鉁?涓?Tool C 鍜屾湭鏉ユā鍧楅摵骞抽亾璺?

**鎬昏€楁椂**锛氱害 1.5 灏忔椂

**浠ｇ爜璐ㄩ噺**锛氣渽 鐢熶骇灏辩华

---

**寮€鍙戣€?*锛欰I Assistant  
**鏃ユ湡**锛?025-12-07  
**鐗堟湰**锛歷2.0锛堝熀浜庣湡瀹?API 閲嶆瀯锛?