From c58ad64352f7cbe5272338a8bb326175ffa9ef0b Mon Sep 17 00:00:00 2001
From: DrSmoothl <1787882683@qq.com>
Date: Tue, 17 Feb 2026 17:46:40 +0800
Subject: [PATCH] feat(dashboard): integrate DynamicConfigForm for ChatSection
 POC
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Register ChatSectionHook as 'replace' mode field hook
- Replace ChatSection rendering with DynamicConfigForm
- Use hardcoded minimal schema (POC - API integration pending)
- Preserve all existing state management and auto-save logic
- TypeScript compilation: ✓ PASSED

Complete Task 11 (Wave 3)
Ref: WebUI config visualization refactor plan
---
 dashboard/src/routes/config/bot.tsx | 31 ++++++++++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/dashboard/src/routes/config/bot.tsx b/dashboard/src/routes/config/bot.tsx
index ece9c37d..0deac66a 100644
--- a/dashboard/src/routes/config/bot.tsx
+++ b/dashboard/src/routes/config/bot.tsx
@@ -69,6 +69,11 @@ import { useAutoSave, useConfigAutoSave } from './bot/hooks'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { Button } from '@/components/ui/button'
 
+// 导入动态表单和 Hook 系统
+import { DynamicConfigForm } from '@/components/dynamic-form'
+import { fieldHooks } from '@/lib/field-hooks'
+import { ChatSectionHook } from '@/routes/config/bot/hooks'
+
 // ==================== 常量定义 ====================
 /** Toast 显示前的延迟时间 (毫秒) */
 const TOAST_DISPLAY_DELAY = 500
@@ -308,6 +313,13 @@ function BotConfigPageContent() {
     loadConfig()
   }, [loadConfig])
 
+  useEffect(() => {
+    fieldHooks.register('chat', ChatSectionHook, 'replace')
+    return () => {
+      fieldHooks.unregister('chat')
+    }
+  }, [])
+
   // 使用模块化的 useAutoSave hook
   const { triggerAutoSave, cancelPendingAutoSave } = useAutoSave(
     initialLoadRef.current,
@@ -652,7 +664,24 @@ function BotConfigPageContent() {
 
         {/* 聊天配置 */}
         <TabsContent value="chat" className="space-y-4">
-          {chatConfig && <ChatSection config={chatConfig} onChange={setChatConfig} />}
+          {chatConfig && (
+            <DynamicConfigForm
+              schema={{
+                className: 'ChatConfig',
+                classDoc: '聊天配置',
+                fields: [],
+                nested: {},
+              }}
+              values={{ chat: chatConfig }}
+              onChange={(field, value) => {
+                if (field === 'chat') {
+                  setChatConfig(value as ChatConfig)
+                  setHasUnsavedChanges(true)
+                }
+              }}
+              hooks={fieldHooks}
+            />
+          )}
         </TabsContent>
 
         {/* 表达配置 */}