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 缁勪欢閲嶆瀯

---

馃搵 浠诲姟姒傝堪

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

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

---

鉁?瀹屾垚浠诲姟

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

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锛?
        鈫?瀵规帴
鍚庣<E98D9A> 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>寔

鏍稿績绫诲瀷锛?

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>鐞嗗拰鍔犺浇鐘舵€?

鏍稿績閫昏緫锛?

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`

鍏抽敭鍙樻洿锛?

<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	寰<EFBFBD>皟
Sidebar.tsx	169	鏇存柊闆嗘垚
README.md	394	閲嶅啓
鎬昏<EFBFBD>	968	6 鏂囦欢

---

馃幆 鏍稿績鎴愭灉

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

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

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

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

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

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

---

馃攧 鏋舵瀯瀵规瘮

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

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

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

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

// 鉁?鐪熷疄鐨勭粍浠?
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. *绠€鍗曚紭浜庡<EFBFBD>鏉?

   • 鉂?涓嶈<E6B693>杩囧害浣跨敤楂樼骇鐗规€?
   • 鉁?閫夋嫨鏈€绠€鍗曠殑鍙<E6AE91><E98D99>鏂规<E98F82>

3. *绫诲瀷瀹夊叏寰堥噸瑕?

   • 鉁?TypeScript 甯<>姪鍙戠幇浜嗗緢澶氶敊璇?
   • 鉁?Linter 纭<>繚浠ｇ爜璐ㄩ噺

---

馃殌 涓嬩竴姝?

鍚庣<EFBFBD> API 寮€鍙?

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

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": [...]
  }
}

绔<EFBFBD>埌绔<EFBFBD>祴璇?

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>褰?

---

鉁?楠岃瘉娓呭崟

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

---

馃帀 鎬荤粨

*Day 5 閲嶆瀯瀹屾垚锛?

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

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

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

---

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