Merge origin/develop_web into feature/20251219_yjp

- Resolved conflict in web/src/components/RbModal/index.tsx
- Combined className and maskClosable properties

web/src/views/ApiKeyManagement/components/ApiKeyDetailModal.tsx

@@ -0,0 +1,102 @@
+import { forwardRef, useImperativeHandle, useState } from 'react';
+import { Switch, Button, Tooltip } from 'antd';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import type { ApiKey, ApiKeyModalRef } from '../types';
+import RbModal from '@/components/RbModal'
+import { getApiKey  } from '@/api/apiKey';
+import { formatDateTime } from '@/utils/format'
+import Tag from '@/components/Tag'
+import { maskApiKeys } from '@/utils/apiKeyReplacer';
+
+const ApiKeyDetailModal = forwardRef<ApiKeyModalRef, { handleCopy: (content: string) => void }>(({ handleCopy }, ref) => {
+  const { t } = useTranslation();
+  const [visible, setVisible] = useState(false);
+  const [data, setData] = useState<ApiKey>({} as ApiKey)
+
+  // 封装取消方法，添加关闭弹窗逻辑
+  const handleClose = () => {
+    setVisible(false);
+  };
+
+  const handleOpen = (apiKey?: ApiKey) => {
+    if (apiKey?.id) {
+      getApiKey(apiKey.id)
+        .then((res) => {
+          setVisible(true);
+          setData(res as ApiKey)
+        })
+    }
+  };
+
+  // 暴露给父组件的方法
+  useImperativeHandle(ref, () => ({
+    handleOpen,
+    handleClose
+  }));
+
+  return (
+    <RbModal
+      title={t('apiKey.viewDetail')}
+      open={visible}
+      onCancel={handleClose}
+    >
+      <div className="rb:text-[#5B6167] rb:font-medium rb:leading-5 rb:mb-4">{t('apiKey.baseInfo')}</div>
+      {['id', 'name', 'is_expired', 'created_at'].map((key, index) => (
+        <div key={key} className={clsx("rb:flex rb:justify-between rb:gap-5 rb:font-regular rb:text-[14px]", {
+          'rb:mt-3': index !== 0
+        })}>
+          <span className="rb:text-[#5B6167]">{t(`apiKey.${key}`)}</span>
+          <span className="rb:text-right rb:flex-1 rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap">
+            { key === 'created_at'
+              ? formatDateTime(data[key], 'YYYY-MM-DD HH:mm:ss')
+              : key === 'is_expired'
+                ? <Tag color={data[key] ? 'error' : 'processing'}>{data[key] ? t('apiKey.inactive') : t('apiKey.active')}</Tag>
+                : <Tooltip title={String(data[key as keyof ApiKey])}>{String(data[key as keyof ApiKey])}</Tooltip>
+            }
+          </span>
+        </div>
+      ))}
+
+      <div className="rb:flex rb:items-center rb:justify-between rb:text-[#5B6167] rb:mt-5 rb:p-[8px_16px] rb:bg-[#FFFFFF] rb:border rb:border-[#DFE4ED] rb:rounded-lg rb:leading-5">
+        {maskApiKeys(data.api_key)}
+
+        <Button className="rb:px-2! rb:h-7! rb:group" onClick={() => handleCopy(data.api_key)}>
+          <div
+            className="rb:w-4 rb:h-4 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/copy.svg')] rb:group-hover:bg-[url('@/assets/images/copy_active.svg')]"
+          ></div>
+          {t('common.copy')}
+        </Button>
+      </div>
+
+      <div className="rb:text-[#5B6167] rb:font-medium rb:leading-5 rb:my-4">{t('apiKey.permissionInfo')}</div>
+
+      <div className="rb:flex rb:justify-between rb:gap-5 rb:font-regular rb:text-[14px] rb:mt-3">
+        <span className="rb:text-[#5B6167]">{t(`apiKey.memoryEngine`)}</span>
+        <span>
+          <Switch checked={data.scopes?.includes('memory')} disabled />
+        </span>
+      </div>
+      <div className="rb:flex rb:justify-between rb:gap-5 rb:font-regular rb:text-[14px] rb:mt-3">
+        <span className="rb:text-[#5B6167]">{t(`apiKey.knowledgeBase`)}</span>
+        <span>
+          <Switch checked={data.scopes?.includes('rag')} disabled />
+        </span>
+      </div>
+
+      {/* 高级设置 */}
+      {data.expires_at && <>
+        <div className="rb:text-[#5B6167] rb:font-medium rb:leading-5 rb:my-4">{t('apiKey.advancedSettings')}</div>
+
+        <div className="rb:flex rb:justify-between rb:gap-5 rb:font-regular rb:text-[14px] rb:mt-3">
+          <span className="rb:text-[#5B6167]">{t(`apiKey.expires_at`)}</span>
+          <span>
+            {data.expires_at ? formatDateTime(data.expires_at as number, 'YYYY-MM-DD HH:mm:ss') : '-'}
+          </span>
+          </div>
+      </>}
+    </RbModal>
+  );
+});
+
+export default ApiKeyDetailModal;

web/src/views/ApiKeyManagement/components/ApiKeyModal.tsx

@@ -0,0 +1,153 @@
+import { forwardRef, useImperativeHandle, useState } from 'react';
+import { Form, Input, Switch, App, DatePicker } from 'antd';
+import { useTranslation } from 'react-i18next';
+import type { ApiKey, ApiKeyModalRef } from '../types';
+import RbModal from '@/components/RbModal'
+import dayjs from 'dayjs'
+import { createApiKey, updateApiKey  } from '@/api/apiKey';
+
+const FormItem = Form.Item;
+
+interface CreateModalProps {
+  refresh: () => void;
+}
+
+const ApiKeyModal = forwardRef<ApiKeyModalRef, CreateModalProps>(({
+  refresh,
+}, ref) => {
+  const { t } = useTranslation();
+  const { message } = App.useApp();
+  const [visible, setVisible] = useState(false);
+  const [form] = Form.useForm<ApiKey>();
+  const [loading, setLoading] = useState(false);
+  const [editVo, setEditVo] = useState<ApiKey | null>(null);
+
+  // 封装取消方法，添加关闭弹窗逻辑
+  const handleClose = () => {
+    setVisible(false);
+    form.resetFields();
+    setLoading(false);
+    setEditVo(null);
+  };
+
+  const handleOpen = (apiKey?: ApiKey) => {
+    if (apiKey?.id) {
+      const { scopes = [], expires_at } = apiKey
+      // 编辑模式，填充表单
+      form.setFieldsValue({
+        name: apiKey.name,
+        description: apiKey.description,
+        memory: scopes.includes('memory'),
+        rag: scopes.includes('rag'),
+        expires_at: expires_at ? dayjs(expires_at) : undefined
+      });
+      setEditVo(apiKey);
+    }
+    setVisible(true);
+  };
+
+  // 封装保存方法，添加提交逻辑
+  const handleSave = async () => {
+    form.validateFields()
+      .then((values) => {
+        const { memory, rag, expires_at, ...rest } = values
+        let scopes = []
+
+        if (memory) {
+          scopes.push('memory')
+        }
+        if (rag) {
+          scopes.push('rag')
+        }
+        // 准备新的/更新的API Key数据
+        const apiKeyData = {
+          ...rest,
+          scopes,
+          expires_at: expires_at ? dayjs(expires_at.valueOf()).endOf('day').valueOf() : null,
+          type: 'service'
+        };
+        setLoading(true)
+        const req = editVo?.id ? updateApiKey(editVo.id, apiKeyData as ApiKey) : createApiKey(apiKeyData as ApiKey)
+        
+        req.then(() => {
+            refresh();
+            handleClose();
+            message.success(t(editVo ? 'common.updateSuccess' : 'common.createSuccess'));
+          })
+          .finally(() => setLoading(false))
+      })
+  }
+
+  // 暴露给父组件的方法
+  useImperativeHandle(ref, () => ({
+    handleOpen,
+    handleClose
+  }));
+
+  return (
+    <RbModal
+      title={editVo ? t('apiKey.updateApiKey') : t('apiKey.createApiKey')}
+      open={visible}
+      onCancel={handleClose}
+      okText={t('common.save')}
+      onOk={handleSave}
+      confirmLoading={loading}
+    >
+      <Form
+        form={form}
+        layout="vertical"
+      >
+        <div className="rb:text-[#5B6167] rb:font-medium rb:leading-5 rb:mb-4">{t('apiKey.baseInfo')}</div>
+        <FormItem
+          name="name"
+          label={t('apiKey.name')}
+          rules={[{ required: true, message: t('common.pleaseEnter') }]}
+        >
+          <Input placeholder={t('common.enter')} />
+        </FormItem>
+        
+        <FormItem
+          name="description"
+          label={t('apiKey.description')}
+        >
+          <Input.TextArea placeholder={t('common.pleaseEnter')} rows={3} />
+        </FormItem>
+
+        <div className="rb:text-[#5B6167] rb:font-medium rb:leading-5 rb:mb-4">{t('apiKey.permissionInfo')}</div>
+
+        <FormItem
+          name="memory"
+          label={t('apiKey.memoryEngine')}
+          layout="horizontal"
+          valuePropName="checked"
+        >
+          <Switch />
+        </FormItem>
+
+        <FormItem
+          name="rag"
+          label={t('apiKey.knowledgeBase')}
+          layout="horizontal"
+          valuePropName="checked"
+        >
+          <Switch />
+        </FormItem>
+
+        {/* 高级设置 */}
+        <div className="rb:text-[#5B6167] rb:font-medium rb:leading-5 rb:mb-4">{t('apiKey.advancedSettings')}</div>
+
+        <FormItem
+          name="expires_at"
+          label={t('apiKey.expires_at')}
+        >
+          <DatePicker
+            className="rb:w-full"
+            disabledDate={(current) => current && current < dayjs().subtract(1, 'day').endOf('day')}
+          />
+        </FormItem>
+      </Form>
+    </RbModal>
+  );
+});
+
+export default ApiKeyModal;

web/src/views/ApiKeyManagement/index.tsx

@@ -0,0 +1,125 @@
+import React, { useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, App, Space } from 'antd';
+import clsx from 'clsx';
+import { DeleteOutlined, EditOutlined, EyeOutlined } from '@ant-design/icons';
+import type { ApiKey, ApiKeyModalRef } from './types';
+import ApiKeyModal from './components/ApiKeyModal';
+import ApiKeyDetailModal from './components/ApiKeyDetailModal';
+import RbCard from '@/components/RbCard/Card'
+import { getApiKeyListUrl, deleteApiKey } from '@/api/apiKey';
+import PageScrollList, { type PageScrollListRef } from '@/components/PageScrollList'
+import { formatDateTime } from '@/utils/format';
+import Tag from '@/components/Tag'
+import copy from 'copy-to-clipboard'
+import { maskApiKeys } from '@/utils/apiKeyReplacer';
+
+const ApiKeyManagement: React.FC = () => {
+  const { t } = useTranslation();
+  const { modal, message } = App.useApp();
+  const apiKeyModalRef = useRef<ApiKeyModalRef>(null);
+  const apiKeyDetailModalRef = useRef<ApiKeyModalRef>(null)
+  const scrollListRef = useRef<PageScrollListRef>(null)
+
+  const refresh = () => {
+    scrollListRef.current?.refresh();
+  }
+  
+  const handleEdit = (item?: ApiKey) => {
+    apiKeyModalRef.current?.handleOpen(item);
+  }
+  const handleView = (item: ApiKey) => {
+    apiKeyDetailModalRef.current?.handleOpen(item);
+  }
+  const handleDelete = (item: ApiKey) => {
+    modal.confirm({
+      title: t('common.confirmDeleteDesc', { name: item.name }),
+      okText: t('common.delete'),
+      okType: 'danger',
+      onOk: () => {
+      deleteApiKey(item.id)
+        .then(() => {
+          refresh();
+          message.success(t('common.deleteSuccess'))
+        })
+      }
+    })
+  }
+  const handleCopy = (content: string) => {
+    copy(content)
+    message.success(t('common.copySuccess'))
+  }
+  return (
+    <>
+      <div className="rb:flex rb:justify-end rb:mb-3 rb:p-4">
+        <Button type="primary" onClick={() => handleEdit()}>
+          {t('apiKey.createApiKey')}
+        </Button>
+      </div>
+
+      <PageScrollList
+        ref={scrollListRef}
+        url={getApiKeyListUrl}
+        query={{ is_active: true, type: 'service' }}
+        column={2}
+        renderItem={(item: Record<string, unknown>) => {
+          let apiKeyItem = item as unknown as ApiKey
+          return (
+            <RbCard 
+              title={apiKeyItem.name}
+          >
+            {['id', 'is_expired', 'created_at'].map((key, index) => (
+              <div key={key} className={clsx("rb:flex rb:justify-between rb:gap-5 rb:font-regular rb:text-[14px]", {
+                'rb:mt-3': index !== 0
+              })}>
+                <span className="rb:text-[#5B6167] rb:w-20">{t(`apiKey.${key}`)}</span>
+                <span className="rb:flex-1 rb:text-left rb:py-px rb:rounded rb:font-medium">
+                  { key === 'created_at'
+                    ? formatDateTime(apiKeyItem[key], 'YYYY-MM-DD HH:mm:ss')
+                    : key === 'is_expired'
+                      ? <Tag color={apiKeyItem[key] ? 'error' : 'processing'}>{apiKeyItem[key] ? t('apiKey.inactive') : t('apiKey.active')}</Tag>
+                    : String(apiKeyItem[key as keyof ApiKey])
+                  }
+                </span>
+              </div>
+            ))}
+
+            <div className="rb:flex rb:items-center rb:justify-between rb:text-[#5B6167] rb:mt-5 rb:p-[8px_16px] rb:bg-[#FFFFFF] rb:border rb:border-[#DFE4ED] rb:rounded-lg rb:leading-5">
+              {maskApiKeys(apiKeyItem.api_key)}
+              
+              <Button className="rb:px-2! rb:h-7! rb:group" onClick={() => handleCopy(apiKeyItem.api_key)}>
+                <div 
+                  className="rb:w-4 rb:h-4 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/copy.svg')] rb:group-hover:bg-[url('@/assets/images/copy_active.svg')]" 
+                ></div>
+                {t('common.copy')}
+              </Button>
+            </div>
+
+            <Space className="rb:pt-2 rb:min-h-6.25">
+              {apiKeyItem.scopes?.includes('memory') && <Tag>{t('apiKey.memoryEngine')}</Tag>}
+              {apiKeyItem.scopes?.includes('rag') && <Tag color="success">{t('apiKey.knowledgeBase')}</Tag>}
+            </Space>
+
+            <div className="rb:mt-5 rb:flex rb:justify-end rb:gap-2.5">
+              <Button icon={<EyeOutlined />} onClick={() => handleView(apiKeyItem)}></Button>
+              <Button icon={<EditOutlined />} onClick={() => handleEdit(apiKeyItem)}></Button>
+              <Button icon={<DeleteOutlined />} onClick={() => handleDelete(apiKeyItem)}></Button>
+            </div>
+            </RbCard>
+          );
+        }}
+      />
+
+      <ApiKeyModal
+        ref={apiKeyModalRef}
+        refresh={refresh}
+      />
+      <ApiKeyDetailModal
+        ref={apiKeyDetailModalRef}
+        handleCopy={handleCopy}
+      />
+    </>
+  );
+};
+
+export default ApiKeyManagement;

web/src/views/ApiKeyManagement/types.ts

@@ -0,0 +1,40 @@
+import type { Dayjs } from 'dayjs'
+import { maskApiKeys } from '@/utils/apiKeyReplacer'
+
+export interface ApiKey {
+  id: string;
+  name: string;
+  description?: string;
+  type: 'agent' | 'multi_agent' | 'workflow' | 'service';
+  scopes?: string[]; // 'memory' | 'rag' | 'app'
+
+  api_key: string;
+  is_active: boolean;
+  is_expired: boolean;
+  created_at: number;
+  expires_at?: number | Dayjs;
+  memory?: boolean;
+  rag?: boolean;
+
+
+  updated_at: string;
+  qps_limit?: number;
+  daily_request_limit?: number;
+
+  rate_limit?: number;
+  total_requests: number;
+  quota_used: number;
+  quota_limit: number;
+}
+
+export interface ApiKeyModalRef {
+  handleOpen: (apiKey?: ApiKey) => void;
+  handleClose: () => void;
+}
+
+/**
+ * 获取掩码后的API密钥
+ */
+export const getMaskedApiKey = (apiKey: string): string => {
+  return maskApiKeys(apiKey)
+}

web/src/views/ApplicationConfig/Agent.tsx

@@ -239,6 +239,7 @@ const Agent = forwardRef<AgentRef>((_props, ref) => {
         return [
           ...(prev || []).map(item => ({
             ...item,
+            conversation_id: undefined,
             list: []
           })),
           newChatItem

web/src/views/ApplicationConfig/Api.tsx

@@ -1,153 +1,194 @@
-import { type FC, useState } from 'react';
+import { type FC, useState, useRef, useEffect } from 'react';
+import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
-import { Button, Space, App
-  // Slider, Input, 
-  // Form, 
-  // Checkbox
-} from 'antd';
+import { Button, Space, App, Statistic, Row, Col } from 'antd';
 import copy from 'copy-to-clipboard'
 
 import Card from './components/Card';
-// import qpsRestrictions from '@/assets/images/application/qpsRestrictions.svg'
-// import dailyAdjustmentDosage from '@/assets/images/application/dailyAdjustmentDosage.svg'
-// import tokenCap from '@/assets/images/application/tokenCap.svg'
+import type { Application } from '@/views/ApplicationManagement/types'
+import type { ApiKeyModalRef, ApiKeyConfigModalRef } from './types'
+import type { ApiKey } from '@/views/ApiKeyManagement/types'
+import ApiKeyModal from './components/ApiKeyModal';
+import ApiKeyConfigModal from './components/ApiKeyConfigModal';
+import Tag from '@/components/Tag'
+import { getApiKeyList, getApiKeyStats, deleteApiKey } from '@/api/apiKey';
+import { maskApiKeys } from '@/utils/apiKeyReplacer'
 
-// const limitList = [
-//   { key: 'qpsRestrictions', value: '10', icon: qpsRestrictions, unit: ' times/second' },
-//   { key: 'dailyAdjustmentDosage', value: '1000', icon: dailyAdjustmentDosage, unit: ' times/day' },
-//   { key: 'tokenCap', value: '10', icon: tokenCap, unit: 'M Tokens/day' },
-// ]
-// const sdkList = ['pythonSDK', 'nodejsSDK', 'goSDK', 'curlExample']
-
-const Api: FC<{apiKeyList?: string[]}> = ({apiKeyList = []}) => {
+const Api: FC<{ application: Application | null }> = ({ application }) => {
   const { t } = useTranslation();
-  const [activeMethods, setActiveMethod] = useState(['GET']);
-  const { message } = App.useApp()
-  // const [form] = Form.useForm();
+  const activeMethods = ['GET'];
+  const { message, modal } = App.useApp()
   const copyContent = window.location.origin + '/v1/chat'
+  const apiKeyModalRef = useRef<ApiKeyModalRef>(null);
+  const apiKeyConfigModalRef = useRef<ApiKeyConfigModalRef>(null);
+  const [apiKeyList, setApiKeyList] = useState<ApiKey[]>([])
 
   const handleCopy = (content: string) => {
     copy(content)
     message.success(t('common.copySuccess'))
   }
-  return (
-    <div className="rb:w-[1000px] rb:mt-[20px] rb:pb-[20px] rb:mx-auto">
-      {/* <Form form={form} layout="vertical"> */}
-        <Space size={20} direction="vertical" style={{width: '100%'}}>
-          <Card title={t('application.endpointConfiguration')}>
-            <div className="rb:p-[20px_20px_24px_20px] rb:bg-[#F0F3F8] rb:border rb:border-[#DFE4ED] rb:rounded-[8px]">
-              <Space size={8}>
-                {['GET', 'POST', 'PUT', 'DELETE'].map((method) => (
-                  <Button key={method} type={activeMethods.includes(method) ? 'primary' : 'default'} onClick={() => setActiveMethod(prev => activeMethods.includes(method) ? prev.filter(m => m !== method) : [...prev, method])}>
-                    {method}
-                  </Button>
-                ))}
-              </Space>
 
-              <div className="rb:flex rb:items-center rb:justify-between rb:text-[#5B6167] rb:mt-[20px] rb:p-[20px_16px] rb:bg-[#FFFFFF] rb:border rb:border-[#DFE4ED] rb:rounded-[8px] rb:leading-[20px]">
-                {copyContent}
-                
-                <Button className="rb:px-[8px]! rb:h-[28px]! rb:group" onClick={() => handleCopy(copyContent)}>
+  useEffect(() => {
+    getApiList()
+  }, [])
+  const getApiList = () => {
+    if (!application) {
+      return
+    }
+    setApiKeyList([])
+    getApiKeyList({
+      type: application.type,
+      is_active: true,
+      resource_id: application.id,
+      page: 1,
+      pagesize: 10,
+    }).then(res => {
+      const response = res as { items: ApiKey[] }
+      const list = response.items ?? []
+      getAllStats([...list])
+    })
+  }
+  const getAllStats = (list: ApiKey[]) => {
+   const allList: ApiKey[] = []
+   list.forEach(async item => {
+      await getApiKeyStats(item.id)
+        .then(res => {
+          const response = res as { requests_today: number; total_requests: number; quota_limit: number; quota_used: number; }
+          allList.push({
+            ...item,
+            ...response,
+          })
+          setApiKeyList(prev => [...prev, {
+            ...item,
+            ...response,
+          }])
+        })
+    })
+
+  }
+  const handleAdd = () => {
+    apiKeyModalRef.current?.handleOpen()
+  }
+  const handleEdit = (vo: ApiKey) => {
+    apiKeyConfigModalRef.current?.handleOpen(vo)
+  }
+  const handleDelete = (vo: ApiKey) => {
+      modal.confirm({
+        title: t('common.confirmDeleteDesc', { name: vo.name }),
+        content: t('application.apiKeyDeleteContent'),
+        okText: t('common.delete'),
+        okType: 'danger',
+        onOk: () => {
+          deleteApiKey(vo.id)
+            .then(() => {
+              getApiList();
+              message.success(t('common.deleteSuccess'))
+            })
+        }
+      })
+  }
+
+  // 计算total_requests总数
+  const totalRequests = apiKeyList.reduce((total, item) => total + item.total_requests, 0);
+  return (
+    <div className="rb:w-250 rb:mt-5 rb:pb-5 rb:mx-auto">
+      <Space size={20} direction="vertical" style={{width: '100%'}}>
+        <Card 
+          title={t('application.endpointConfiguration')}
+        >
+          <div className="rb:text-[#5B6167] rb:text-[12px] rb:mb-2">{t('application.endpointConfigurationSubTitle')}</div>
+          <div className="rb:p-[20px_20px_24px_20px] rb:bg-[#F0F3F8] rb:border rb:border-[#DFE4ED] rb:rounded-lg">
+            <Space size={8}>
+              {['GET', 'POST', 'PUT', 'DELETE'].map((method) => (
+                <div key={method} className={clsx("rb:w-20 rb:h-7 rb:leading-7 rb:text-center rb:rounded-md rb:text-regular", {
+                  'rb:bg-[#155EEF] rb:text-white': activeMethods.includes(method),
+                  'rb:bg-white': !activeMethods.includes(method),
+                })}>
+                  {method}
+                </div>
+              ))}
+            </Space>
+
+            <div className="rb:flex rb:items-center rb:justify-between rb:text-[#5B6167] rb:mt-5 rb:p-[20px_16px] rb:bg-[#FFFFFF] rb:border rb:border-[#DFE4ED] rb:rounded-lg rb:leading-5">
+              {copyContent}
+              
+              <Button className="rb:px-2! rb:h-7! rb:group" onClick={() => handleCopy(copyContent)}>
+                <div 
+                  className="rb:w-4 rb:h-4 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/copy.svg')] rb:group-hover:bg-[url('@/assets/images/copy_active.svg')]" 
+                ></div>
+                {t('common.copy')}
+              </Button>
+            </div>
+          </div>
+        </Card>
+        <Card
+          title={t('application.apiKeys')}
+          extra={
+            <Button style={{padding: '0 8px', height: '24px'}} onClick={handleAdd}>+ {t('application.addApiKey')}</Button>
+          }
+        >
+          <div className="rb:text-[#5B6167] rb:text-[12px] rb:mb-2">{t('application.apiKeySubTitle')}</div>
+          {/* 总览数据 */}
+          <Row>
+            <Col span={6}>
+              <Statistic title={t('application.apiKeyTotal')} value={apiKeyList.length} />
+            </Col>
+            <Col span={6}>
+              <Statistic title={t('application.apiKeyRequestTotal')} value={totalRequests} />
+            </Col>
+          </Row>
+          {/* API Key 列表 */}
+          {apiKeyList.sort((a, b) => b.created_at - a.created_at).map(item => (
+            <div key={item.id} className="rb:mt-4 rb:p-[10px_12px] rb:bg-[#F0F3F8] rb:border rb:border-[#DFE4ED] rb:rounded-lg">
+              <div className="rb:flex rb:items-center rb:justify-between">
+                <div className="rb:flex rb:items-center rb:max-w-[calc(100%-92px)]">
+                  <div className="rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap rb:flex-1">{item.name}</div>
+                  <Tag className="rb:ml-2">ID: {item.id}</Tag>
+                </div>
+                <Space>
                   <div 
-                    className="rb:w-[16px] rb:h-[16px] rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/copy.svg')] rb:group-hover:bg-[url('@/assets/images/copy_active.svg')]" 
+                    className="rb:w-6 rb:h-6 rb:cursor-pointer rb:bg-[url('@/assets/images/editBorder.svg')] rb:hover:bg-[url('@/assets/images/editBg.svg')]" 
+                    onClick={() => handleEdit(item)}
+                  ></div>
+                  <div 
+                    className="rb:w-6 rb:h-6 rb:cursor-pointer rb:bg-[url('@/assets/images/deleteBorder.svg')] rb:hover:bg-[url('@/assets/images/deleteBg.svg')]" 
+                    onClick={() => handleDelete(item)}
+                  ></div>
+                </Space>
+              </div>
+              <div className="rb:mb-3 rb:flex rb:items-center rb:justify-between rb:text-[#5B6167] rb:mt-5 rb:p-[8px_16px] rb:bg-[#FFFFFF] rb:border rb:border-[#DFE4ED] rb:rounded-lg rb:leading-5">
+                {maskApiKeys(item.api_key)}
+                
+                <Button className="rb:px-2! rb:h-7! rb:group" onClick={() => handleCopy(item.api_key)}>
+                  <div 
+                    className="rb:w-4 rb:h-4 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/copy.svg')] rb:group-hover:bg-[url('@/assets/images/copy_active.svg')]" 
                   ></div>
                   {t('common.copy')}
                 </Button>
               </div>
+ 
+              <Row gutter={12}>
+                <Col span={8}>
+                  <Statistic valueStyle={{ fontSize: '18px' }} title={t('application.apiKeyRequestTotal')} value={item.total_requests} />
+                </Col>
+                <Col span={8}>
+                  <Statistic valueStyle={{ fontSize: '18px' }} title={t('application.qpsLimit')} value={item.rate_limit} />
+                </Col>
+              </Row>
             </div>
-          </Card>
-          <Card
-            title={t('application.authenticationMethod')}
-            // extra={
-            //   <Button style={{padding: '0 8px', height: '24px'}} onClick={handleAdd}>+ {t('application.addApiKey')}</Button>
-            // }
-          >
-            <div className="rb:p-[10px_20px] rb:bg-[#F0F3F8] rb:border rb:border-[#DFE4ED] rb:rounded-[8px] rb:font-medium rb:text-center">
-              {t('application.apiKeyTitle')}
-              <p className="rb:mt-[6px] rb:text-[#5B6167] rb:text-[12px] rb:font-regular">{t('application.apiKeyDesc')}</p>
-            </div>
-            {apiKeyList.map((item, index) => (
-              <div key={index} className="rb:flex rb:items-center rb:justify-between rb:text-[#5B6167] rb:mt-[20px] rb:p-[12px_16px] rb:bg-[#FFFFFF] rb:border rb:border-[#DFE4ED] rb:rounded-[8px] rb:leading-[20px]">
-                {item}
+          ))}
+        </Card>
+      </Space>
 
-                <Space>
-                  <Button className="rb:px-[8px]! rb:h-[28px]! rb:group" onClick={() => handleCopy(item)}>
-                    <div 
-                      className="rb:w-[16px] rb:h-[16px] rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/copy.svg')] rb:group-hover:bg-[url('@/assets/images/copy_active.svg')]" 
-                    ></div>
-                    {t('common.copy')}
-                  </Button>
-                  {/* <div 
-                    className="rb:w-[24px] rb:h-[24px] rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/delete.svg')] rb:hover:bg-[url('@/assets/images/delete_hover.svg')]" 
-                    onClick={() => handleDelete(index)}
-                  ></div> */}
-                </Space>
-              </div>
-            ))}
-          </Card>
-          {/* <Card title={t('application.requestResponseExample')}>
-            <div className="rb:mb-[12px] rb:flex rb:items-center rb:justify-between rb:text-[#5B6167] rb:font-regular">
-              {t('application.requestExample')}
-              <Button>{t('application.downloadPostmanCollection')}</Button>
-            </div>
-            <div className="rb:p-[16px_20px] rb:bg-[#F0F3F8] rb:rounded-[8px] rb:text-[#5B6167] rb:leading-[18px]">
-              curl -X POST  https://api.example.com/v1/agent/execute  \ -H "Authorization: Bearer YOUR_API_KEY" \ -H "Content-Type: application/json" \ -d 
-            </div>
-
-            <div className="rb:mb-[12px] rb:mt-[24px] rb:flex rb:items-center rb:justify-between rb:text-[#5B6167] rb:font-regular">
-              {t('application.responseExample')}
-            </div>
-            <div className="rb:p-[16px_20px] rb:bg-[#F0F3F8] rb:rounded-[8px] rb:text-[#5B6167] rb:leading-[18px]">
-              curl -X POST  https://api.example.com/v1/agent/execute  \ -H "Authorization: Bearer YOUR_API_KEY" \ -H "Content-Type: application/json" \ -d 
-            </div>
-          </Card>
-          <Card title={t('application.rateLimitingStrategy')}>
-            <div className="rb:grid rb:grid-cols-3 rb:gap-[18px]">
-              {limitList.map(item => (
-                <div key={item.key} className="rb:border rb:border-[#DFE4ED] rb:bg-[#FBFDFF] rb:rounded-[8px] rb:p-[16px_20px]">
-                  <div className="rb:flex rb:justify-between">
-                    <div className="rb:leading-[20px]">
-                      {t(`application.${item.key}`)}
-                      <div className="rb:text-[14px] rb:font-medium rb:text-[#155EEF] rb:mt-[8px]">{item.value}{item.unit}</div>
-                    </div>
-                    <img src={item.icon} className="rb:w-[24px] rb:h-[24px]" />
-                  </div>
-                  <Slider style={{ margin: '24px 0 0 0' }} value={item.value} />
-                </div>
-              ))}
-            </div>
-          </Card>
-          <Card title={t('application.sdkDownload')}>
-            <div className="rb:grid rb:grid-cols-4 rb:gap-[16px]">
-              {sdkList.map(item => (
-                <div key={item} className="rb:border rb:border-[#DFE4ED] rb:bg-[#FBFDFF] rb:rounded-[8px] rb:p-[24px_20px] rb:text-center">
-                  {t(`application.${item}`)}
-                </div>
-              ))}
-            </div>
-          </Card>
-          <Card title={t('application.advancedSettings')}>
-            <Form.Item 
-              name="WebhookReturnsTimeout"
-              label={<>{t('application.WebhookReturnsTimeout')}<span className="rb:text-[#5B6167] rb:text-[12px] rb:font-regular"> ({t('application.WebhookReturnsTimeoutDesc')})</span></>}
-            >
-              <Input disabled />
-            </Form.Item>
-            <Form.Item 
-              name="whitelistIP"
-              label={<>{t('application.whitelistIP')}<span className="rb:text-[#5B6167] rb:text-[12px] rb:font-regular"> ({t('application.whitelistIPDesc')})</span></>}
-            >
-              <Input.TextArea rows={4} />
-            </Form.Item>
-            <Form.Item 
-              name="whitelistIP"
-              className="rb:mb-[0]!"
-            >
-              <Checkbox>{t('application.publicAPIDocumentation')}</Checkbox>
-            </Form.Item>
-          </Card> */}
-        </Space>
-      {/* </Form> */}
+      <ApiKeyModal
+        ref={apiKeyModalRef}
+        application={application}
+        refresh={getApiList}
+      />
+      <ApiKeyConfigModal
+        ref={apiKeyConfigModalRef}
+        refresh={getApiList}
+      />
     </div>
   );
 }

web/src/views/ApplicationConfig/Cluster.tsx

@@ -1,4 +1,4 @@
-import { type FC, useEffect, useState, useRef, type Key } from 'react'
+import { type FC, useEffect, useState, useRef, forwardRef, useImperativeHandle, type Key } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useParams } from 'react-router-dom';
 import Card from './components/Card'
@@ -11,17 +11,19 @@ import type {
   Config,
   SubAgentModalRef,
   ChatData,
-  SubAgentItem
+  SubAgentItem,
+  ClusterRef
 } from './types'
 import Chat from './components/Chat'
 import RbCard from '@/components/RbCard/Card'
 import SubAgentModal from './components/SubAgentModal'
 import Empty from '@/components/Empty'
+import type { Application } from '@/views/ApplicationManagement/types'
 
 
 const tagColors = ['processing', 'warning', 'default']
 const MAX_LENGTH = 5;
-const Cluster: FC<{application: SubAgentItem}> = ({application}) => {
+const Cluster = forwardRef<ClusterRef, { application: Application }>(({application}, ref) => {
   const { t } = useTranslation()
   const { message } = App.useApp()
   const [form] = Form.useForm()
@@ -113,6 +115,9 @@ const Cluster: FC<{application: SubAgentItem}> = ({application}) => {
       form.setFieldsValue({ master_agent_name: option.children })
     }
   }
+  useImperativeHandle(ref, () => ({
+    handleSave
+  }))
 
   return (
     <Row className="rb:h-[calc(100vh-64px)]">
@@ -199,7 +204,7 @@ const Cluster: FC<{application: SubAgentItem}> = ({application}) => {
             chatList={chatList}
             updateChatList={setChatList}
             handleSave={handleSave}
-            source="cluster"
+            source="multi_agent"
           />
         </RbCard>
       </Col>
@@ -210,6 +215,6 @@ const Cluster: FC<{application: SubAgentItem}> = ({application}) => {
       />
     </Row>
   )
-}
+})
 
 export default Cluster

web/src/views/ApplicationConfig/components/ApiKeyConfigModal.tsx

@@ -0,0 +1,131 @@
+import { forwardRef, useImperativeHandle, useState } from 'react';
+import { Form, Slider } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+import type {  ApiKeyConfigModalRef } from '../types'
+import RbModal from '@/components/RbModal'
+import { updateApiKey } from '@/api/apiKey';
+import type { ApiKey } from '@/views/ApiKeyManagement/types'
+
+interface ApiKeyConfigModalProps {
+  refresh: () => void;
+}
+const ApiKeyConfigModal = forwardRef<ApiKeyConfigModalRef, ApiKeyConfigModalProps>(({
+  refresh
+}, ref) => {
+  const { t } = useTranslation();
+  const [visible, setVisible] = useState(false);
+  const [form] = Form.useForm<ApiKey>();
+  const [loading, setLoading] = useState(false)
+  const values = Form.useWatch<ApiKey>([], form)
+  const [editVo, setEditVo] = useState<ApiKey | null>(null)
+
+  // 封装取消方法，添加关闭弹窗逻辑
+  const handleClose = () => {
+    form.resetFields();
+    setLoading(false)
+    setEditVo(null)
+    setVisible(false);
+  };
+
+  const handleOpen = (apiKey: ApiKey) => {
+    setVisible(true);
+    setEditVo(apiKey)
+    form.setFieldsValue({
+      daily_request_limit: apiKey.daily_request_limit,
+      rate_limit: apiKey.rate_limit
+    });
+  };
+  // 封装保存方法，添加提交逻辑
+  const handleSave = () => {
+    if (!editVo?.id) return
+    form.validateFields()
+      .then((values) => {
+        updateApiKey(editVo.id, {
+          ...editVo,
+          ...values
+        })
+        handleClose()
+        setTimeout(() => {
+          refresh()
+        }, 50)
+      })
+  }
+
+  // 暴露给父组件的方法
+  useImperativeHandle(ref, () => ({
+    handleOpen,
+    handleClose
+  }));
+
+  return (
+    <RbModal
+      title={t('application.apiLimitConfig')}
+      open={visible}
+      onCancel={handleClose}
+      okText={t('common.save')}
+      onOk={handleSave}
+      confirmLoading={loading}
+    >
+      <Form
+        form={form}
+        layout="vertical"
+        className="rb:px-2.5!"
+        scrollToFirstError={{ behavior: 'instant', block: 'end', focus: true }}
+      >
+        {/* QPS 限制（每秒请求数） */}
+        <>
+          <div className="rb:text-[14px] rb:font-medium rb:leading-5 rb:mb-2">
+            {t(`application.qpsLimit`)}({t('application.qpsLimitTip')})
+          </div>
+          <div className="rb:text-[12px] rb:text-[#5B6167] rb:leading-4 rb:mb-2">
+            {t('application.qpsLimitDesc')}
+          </div>
+          <div className="rb:pl-2">
+            <Form.Item
+              name="rate_limit"
+            >
+              <Slider 
+                style={{ margin: '0' }} 
+                min={1} 
+                max={100} 
+                step={1}
+              />
+            </Form.Item>
+            <div className="rb:flex rb:items-center rb:justify-between rb:text-[#5B6167] rb:leading-5 rb:-mt-6.5">
+              1
+              <span>{t('application.currentValue')}: {values?.rate_limit}{t('application.qpsLimitUnit')}</span>
+            </div>
+          </div>
+        </>
+        {/* 日调用量限制 */}
+        <>
+          <div className="rb:text-[14px] rb:font-medium rb:leading-5 rb:mt-6 rb:mb-2">
+            {t(`application.dailyUsageLimit`)}
+          </div>
+          <div className="rb:text-[12px] rb:text-[#5B6167] rb:leading-4 rb:mb-2">
+            {t('application.dailyUsageLimitDesc')}
+          </div>
+          <div className="rb:pl-2">
+            <Form.Item
+              name="daily_request_limit"
+            >
+              <Slider 
+                style={{ margin: '0' }} 
+                min={100} 
+                max={100000} 
+                step={100}
+              />
+            </Form.Item>
+            <div className="rb:flex rb:items-center rb:justify-between rb:text-[#5B6167] rb:leading-5 rb:-mt-6.5">
+              100
+              <span>{t('application.currentValue')}: {values?.daily_request_limit}{t('application.dailyUsageLimitUnit')}</span>
+            </div>
+          </div>
+        </>
+      </Form>
+    </RbModal>
+  );
+});
+
+export default ApiKeyConfigModal;

web/src/views/ApplicationConfig/components/ApiKeyModal.tsx

@@ -0,0 +1,104 @@
+import { forwardRef, useImperativeHandle, useState } from 'react';
+import { Form, Input, App } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+import type { Application } from '@/views/ApplicationManagement/types'
+import type { ApiKeyModalRef } from '../types'
+import { createApiKey  } from '@/api/apiKey';
+import RbModal from '@/components/RbModal'
+
+const FormItem = Form.Item;
+
+interface ApiKeyModalProps {
+  refresh: () => void;
+  application?: Application | null;
+}
+
+const ApiKeyModal = forwardRef<ApiKeyModalRef, ApiKeyModalProps>(({
+  refresh,
+  application
+}, ref) => {
+  const { t } = useTranslation();
+  const { message } = App.useApp();
+  const [visible, setVisible] = useState(false);
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false)
+
+  // 封装取消方法，添加关闭弹窗逻辑
+  const handleClose = () => {
+    setVisible(false);
+    form.resetFields();
+    setLoading(false)
+  };
+
+  const handleOpen = () => {
+    setVisible(true);
+      form.resetFields();
+  };
+  // 封装保存方法，添加提交逻辑
+  const handleSave = () => {
+    if (!application) return
+    form.validateFields()
+      .then((values) => {
+        setLoading(true)
+        createApiKey({
+          ...values,
+          type: application.type,
+          resource_id: application.id,
+          scopes: ['app']
+        })
+        .then(() => {
+          handleClose()
+          refresh()
+          message.success(t('common.createSuccess'))
+        })
+        .finally(() => {
+          setLoading(false)
+        })
+      })
+  }
+
+  // 暴露给父组件的方法
+  useImperativeHandle(ref, () => ({
+    handleOpen,
+    handleClose
+  }));
+
+  return (
+    <RbModal
+      title={t('application.addApiKey')}
+      open={visible}
+      onCancel={handleClose}
+      okText={t('common.create')}
+      onOk={handleSave}
+      confirmLoading={loading}
+    >
+      <Form
+        form={form}
+        layout="vertical"
+        scrollToFirstError={{ behavior: 'instant', block: 'end', focus: true }}
+      >
+        {/* Key 名称 */}
+        <FormItem
+          name="name"
+          label={t('application.apiKeyName')}
+          rules={[
+            { required: true, message: t('common.pleaseEnter') },
+            { pattern: /^[a-zA-Z_][a-zA-Z0-9_]*$/, message: t('application.invalidVariableName') },
+          ]}
+        >
+          <Input placeholder={t('application.apiKeyNamePlaceholder')} />
+        </FormItem>
+        {/* 描述 */}
+        <FormItem
+          name="description"
+          label={t('application.description')}
+        >
+          <Input.TextArea placeholder={t('application.apiKeyDescPlaceholder')} />
+        </FormItem>
+      </Form>
+    </RbModal>
+  );
+});
+
+export default ApiKeyModal;

web/src/views/ApplicationConfig/components/Chat.tsx

@@ -1,46 +1,125 @@
-import { type FC, useRef, useEffect, useState } from 'react';
+import { type FC, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import clsx from 'clsx'
 import { Input, Form } from 'antd'
-import ChatIcon from '@/assets/images/application/chat.svg'
+import ChatIcon from '@/assets/images/application/chat.png'
 import ChatSendIcon from '@/assets/images/application/chatSend.svg'
-import DebuggingEmpty from '@/assets/images/application/debuggingEmpty.svg'
-import type { ChatItem, ChatData, Config } from '../types'
+import DebuggingEmpty from '@/assets/images/application/debuggingEmpty.png'
+import type { ChatData, Config } from '../types'
 import { runCompare, draftRun } from '@/api/application'
 import Empty from '@/components/Empty'
-import Markdown from '@/components/Markdown'
+import ChatContent from '@/components/Chat/ChatContent'
+import type { ChatItem } from '@/components/Chat/types'
+import { type SSEMessage } from '@/utils/stream'
 
 interface ChatProps {
   chatList: ChatData[];
   data: Config;
-  updateChatList: (list: ChatData[]) => void;
+  updateChatList: React.Dispatch<React.SetStateAction<ChatData[]>>;
   handleSave: (flag?: boolean) => Promise<any>;
-  source?: 'cluster' | 'agent';
+  source?: 'multi_agent' | 'agent';
 }
 const Chat: FC<ChatProps> = ({ chatList, data, updateChatList, handleSave, source = 'agent' }) => {
   const { t } = useTranslation();
   const [form] = Form.useForm<{ message: string }>()
-  const scrollContainerRefs = useRef<(HTMLDivElement | null)[]>([])
   const [loading, setLoading] = useState(false)
-  const [isCluster, setIsCluster] = useState(source === 'cluster')
+  const [isCluster, setIsCluster] = useState(source === 'multi_agent')
   const [conversationId, setConversationId] = useState<string | null>(null)
   const [compareLoading, setCompareLoading] = useState(false)
-  
-  // 当聊天列表更新时，自动滚动到底部
+
   useEffect(() => {
-    // 延迟一下，确保DOM已经更新
-    setTimeout(() => {
-      scrollContainerRefs.current.forEach(container => {
-        if (container) {
-          container.scrollTop = container.scrollHeight;
-        }
-      });
-    }, 0);
-  }, [chatList]);
-  useEffect(() => {
-    setIsCluster(source === 'cluster')
+    setIsCluster(source === 'multi_agent')
   }, [source])
 
+  const addUserMessage = (message: string) => {
+    const newUserMessage: ChatItem = {
+      role: 'user',
+      content: message,
+      created_at: Date.now(),
+    };
+    updateChatList(prev => prev.map(item => ({
+      ...item,
+      list: [...(item.list || []), newUserMessage]
+    })))
+  }
+  const addAssistantMessage = () => {
+    const assistantMessage: ChatItem = {
+      role: 'assistant',
+      content: '',
+      created_at: Date.now(),
+    };
+    
+    if (isCluster) {
+      updateChatList(prev => prev.map(item => ({
+        ...item,
+        list: [...(item.list || []), assistantMessage]
+      })))
+    } else {
+      const assistantMessages: Record<string, ChatItem> = {}
+      chatList.forEach(item => {
+        assistantMessages[item.model_config_id as string] = assistantMessage
+      })
+      updateChatList(prev => prev.map(item => ({
+        ...item,
+        list: [...(item.list || []), assistantMessages[item.model_config_id as string]]
+      })))
+    }
+  }
+  const updateAssistantMessage = (content?: string, model_config_id?: string, conversation_id?: string) => {
+    if (!content || !model_config_id) return
+    updateChatList(prev => {
+      const targetIndex = prev.findIndex(item => item.model_config_id === model_config_id);
+      if (targetIndex !== -1) {
+        const modelChatList = [...prev]
+        const curModelChat = modelChatList[targetIndex]
+        const curChatMsgList = curModelChat.list || []
+        const lastMsg = curChatMsgList[curChatMsgList.length - 1]
+        if (lastMsg.role === 'assistant') {
+          modelChatList[targetIndex] = {
+            ...modelChatList[targetIndex],
+            conversation_id: conversation_id,
+            list: [
+              ...curChatMsgList.slice(0, curChatMsgList.length - 1),
+              {
+                ...lastMsg,
+                content: lastMsg.content + content
+              }
+            ]
+          }
+        }
+        return [...modelChatList]
+      }
+      return prev;
+    })
+  }
+  const updateErrorAssistantMessage  = (message_length: number, model_config_id?: string) => {
+    if (message_length > 0 || !model_config_id) return
+
+    updateChatList(prev => {
+      const targetIndex = prev.findIndex(item => item.model_config_id === model_config_id);
+      if (targetIndex > -1) {
+        const modelChatList = [...prev]
+        const curModelChat = modelChatList[targetIndex]
+        const curChatMsgList = curModelChat.list || []
+        const lastMsg = curChatMsgList[curChatMsgList.length - 1]
+        if (lastMsg.role === 'assistant') {
+          modelChatList[targetIndex] = {
+            ...modelChatList[targetIndex],
+            list: [
+              ...curChatMsgList.slice(0, curChatMsgList.length - 1),
+              {
+                ...lastMsg,
+                content: null
+              }
+            ]
+          }
+        }
+        return [...modelChatList]
+      }
+
+      return prev
+    })
+  }
   const handleSend = () => {
     if (loading) return
     setLoading(true)
@@ -48,182 +127,47 @@ const Chat: FC<ChatProps> = ({ chatList, data, updateChatList, handleSave, sourc
     handleSave(false)
       .then(() => {
         const message = form.getFieldValue('message')
-        if (!message || message.trim() === '') return
-        const newUserMessage: ChatItem = {
-          role: 'question',
-          content: message,
-          time: Date.now(),
-        };
-        updateChatList((prev: ChatData[]) => {
-          return prev.map(item => ({
-            ...item,
-            list: [
-              ...(item.list || []),
-              newUserMessage
-            ]
-          }))
-        })
+        if (!message?.trim()) return
+        
+        addUserMessage(message)
         form.setFieldsValue({ message: undefined })
-        // 添加空的助手消息用于流式更新
-        const assistantMessages: Record<string, ChatItem> = {};
-        if (isCluster) {
-          const assistantMessage: ChatItem = {
-            role: 'answer',
-            content: '',
-            time: Date.now(),
-          };
-          assistantMessages['cluster'] = assistantMessage;
-          updateChatList((prev: ChatData[]) => prev.map(item => ({
-            ...item,
-            list: [...(item.list || []), assistantMessage]
-          })))
-        } else {
-          chatList.forEach(item => {
-            const assistantMessage: ChatItem = {
-              role: 'answer',
-              content: '',
-              time: Date.now(),
-            };
-            assistantMessages[item.model_config_id] = assistantMessage;
-          });
-          updateChatList((prev: ChatData[]) => prev.map(item => ({
-            ...item,
-            list: [...(item.list || []), assistantMessages[item.model_config_id]]
-          })))
-        }
+        addAssistantMessage()
 
-        const handleStreamMessage = (data: string) => {
+        const handleStreamMessage = (data: SSEMessage[]) => {
           setCompareLoading(false)
-          try {
-            const lines = data.split('\n');
-            let currentEvent = '';
-            
-            for (let i = 0; i < lines.length; i++) {
-              const line = lines[i].trim();
-              
-              if (line.startsWith('event:')) {
-                currentEvent = line.substring(6).trim();
-              } else if (line.startsWith('data:') && (!isCluster && currentEvent === 'model_message')) {
-                const jsonData = line.substring(5).trim();
-                const parsed = JSON.parse(jsonData);
-                
-                if (parsed.content && parsed.model_config_id) {
-                  const targetIndex = chatList.findIndex(item => item.model_config_id === parsed.model_config_id);
-                  if (targetIndex !== -1) {
-                    updateChatList((prev: ChatData[]) => prev.map((item, index) => {
-                      if (index === targetIndex) {
-                        return {
-                          ...item,
-                          conversation_id: parsed.conversation_id,
-                          list: item.list?.map((msg, msgIndex) => {
-                            if (msgIndex === item.list!.length - 1 && msg.role === 'answer') {
-                              return { ...msg, content: msg.content + parsed.content };
-                            }
-                            return msg;
-                          }) || []
-                        };
-                      }
-                      return item;
-                    }))
-                  }
-                }
-              } else if (line.startsWith('data:') && (isCluster && currentEvent === 'message')) {
-                const jsonData = line.substring(5).trim();
-                const parsed = JSON.parse(jsonData);
-                if (parsed.content) {
-                  updateChatList((prev: ChatData[]) => prev.map((item, index) => {
-                    if (index === 0) {
-                      return {
-                        ...item,
-                        list: item.list?.map((msg, msgIndex) => {
-                          if (msgIndex === item.list!.length - 1 && msg.role === 'answer') {
-                            return { ...msg, content: (msg.content || '') + parsed.content };
-                          }
-                          return msg;
-                        }) || []
-                      };
-                    }
-                    return item;
-                  }))
-                }
-                if (parsed.conversation_id) {
-                  setConversationId(parsed.conversation_id);
-                }
-              } else if (line.startsWith('data:') && (!isCluster && currentEvent === 'model_end')) {
-                const jsonData = line.substring(5).trim();
-                const parsed = JSON.parse(jsonData);
-                
-                if (parsed.message_length === 0 && parsed.model_config_id) {
-                  const targetIndex = chatList.findIndex(item => item.model_config_id === parsed.model_config_id);
-                  if (targetIndex !== -1) {
-                    updateChatList((prev: ChatData[]) => prev.map((item, index) => {
-                      if (index === targetIndex) {
-                        return {
-                          ...item,
-                          list: item.list?.map((msg, msgIndex) => {
-                            if (msgIndex === item.list!.length - 1 && msg.role === 'answer') {
-                              return { ...msg, content: null };
-                            }
-                            return msg;
-                          }) || []
-                        };
-                      }
-                      return item;
-                    }))
-                  }
-                }
-              } else if (line.startsWith('data:') && (isCluster && currentEvent === 'model_end')) {
-                const jsonData = line.substring(5).trim();
-                const parsed = JSON.parse(jsonData);
-                if (parsed.message_length === 0) {
-                  updateChatList((prev: ChatData[]) => prev.map((item, index) => {
-                    if (index === 0) {
-                      return {
-                        ...item,
-                        list: item.list?.map((msg, msgIndex) => {
-                          if (msgIndex === item.list!.length - 1 && msg.role === 'answer') {
-                            return { ...msg, content: null };
-                          }
-                          return msg;
-                        }) || []
-                      };
-                    }
-                    return item;
-                  }))
-                }
 
-                if (parsed.conversation_id) {
-                  setConversationId(parsed.conversation_id);
-                }
-              } else if (currentEvent === 'compare_end') {
+          data.map(item => {
+            const { model_config_id, conversation_id, content, message_length } = item.data as { model_config_id: string; conversation_id: string; content: string; message_length: number };
+
+            switch(item.event) {
+              case 'model_message':
+                updateAssistantMessage(content, model_config_id, conversation_id)
+                break;
+              case 'model_end':
+                updateErrorAssistantMessage(message_length, model_config_id)
+                break;
+              case 'compare_end':
                 setLoading(false);
-              }
+                break;
             }
-          } catch (e) {
-            console.error('Parse stream data error:', e);
-          }
+          })
         };
 
         setTimeout(() => {
-          if (isCluster) {
-            draftRun(data.app_id, { message, conversation_id: conversationId, stream: true }, handleStreamMessage)
-              .finally(() => setLoading(false))
-          } else {
-            runCompare(data.app_id, {
-                message,
-                models: chatList.map(item => ({
-                  model_config_id: item.model_config_id,
-                  label: item.label,
-                  model_parameters: item.model_parameters,
-                  conversation_id: item.conversation_id
-                })),
-                variables: {},
-                "parallel": true,
-                "stream": true,
-                "timeout": 60,
-              }, handleStreamMessage)
-              .finally(() => setLoading(false));
-          }
+          runCompare(data.app_id, {
+            message,
+            models: chatList.map(item => ({
+              model_config_id: item.model_config_id,
+              label: item.label,
+              model_parameters: item.model_parameters,
+              conversation_id: item.conversation_id
+            })),
+            variables: {},
+            "parallel": true,
+            "stream": true,
+            "timeout": 60,
+          }, handleStreamMessage)
+            .finally(() => setLoading(false));
         }, 0)
       })
       .catch(() => {
@@ -231,6 +175,136 @@ const Chat: FC<ChatProps> = ({ chatList, data, updateChatList, handleSave, sourc
         setCompareLoading(false)
       })
   }
+
+  const addClusterAssistantMessage = () => {
+    const assistantMessage: ChatItem = {
+      role: 'assistant',
+      content: '',
+      created_at: Date.now(),
+    };
+    updateChatList(prev => prev.map(item => ({
+      ...item,
+      list: [...(item.list || []), assistantMessage]
+    })))
+  }
+  const updateClusterAssistantMessage = (content?: string) => {
+    if (!content) return
+    updateChatList(prev => {
+      const modelChatList = [...prev]
+      const curModelChat = modelChatList[0]
+      const curChatMsgList = curModelChat.list || []
+      const lastMsg = curChatMsgList[curChatMsgList.length - 1]
+      if (lastMsg.role === 'assistant') {
+        modelChatList[0] = {
+          ...modelChatList[0],
+          list: [
+            ...curChatMsgList.slice(0, curChatMsgList.length - 1),
+            {
+              ...lastMsg,
+              content: lastMsg.content + content
+            }
+          ]
+        }
+      }
+      return [...modelChatList]
+    })
+    updateChatList((prev: ChatData[]) => prev.map((item, index) => {
+      if (index === 0) {
+        return {
+          ...item,
+          list: item.list?.map((msg, msgIndex) => {
+            if (msgIndex === item.list!.length - 1 && msg.role === 'assistant') {
+              return { ...msg, content: (msg.content || '') + content };
+            }
+            return msg;
+          }) || []
+        };
+      }
+      return item;
+    }))
+  }
+  const updateClusterErrorAssistantMessage  = (message_length: number) => {
+    if (message_length > 0) return
+
+    updateChatList(prev => {
+      const modelChatList = [...prev]
+      const curModelChat = modelChatList[0]
+      const curChatMsgList = curModelChat.list || []
+      const lastMsg = curChatMsgList[curChatMsgList.length - 1]
+      if (lastMsg.role === 'assistant') {
+        modelChatList[0] = {
+          ...modelChatList[0],
+          list: [
+            ...curChatMsgList.slice(0, curChatMsgList.length - 1),
+            {
+              ...lastMsg,
+              content: null
+            }
+          ]
+        }
+      }
+      return [...modelChatList]
+    })
+  }
+  const handleClusterSend = () => {
+    if (loading) return
+    setLoading(true)
+    setCompareLoading(true)
+    handleSave(false)
+      .then(() => {
+        const message = form.getFieldValue('message')
+        if (!message || message.trim() === '') return
+        addUserMessage(message)
+        form.setFieldsValue({ message: undefined })
+        addClusterAssistantMessage()
+
+        const handleStreamMessage = (data: SSEMessage[]) => {
+          setCompareLoading(false)
+
+          data.map(item => {
+            const { conversation_id, content, message_length } = item.data as { conversation_id: string, content: string, message_length: number };
+
+            switch(item.event) {
+              case 'start':
+                if (conversation_id && conversationId !== conversation_id) {
+                  setConversationId(conversation_id);
+                }
+                break
+              case 'message':
+                updateClusterAssistantMessage(content)
+                if (conversation_id && conversationId !== conversation_id) {
+                  setConversationId(conversation_id);
+                }
+                break;
+              case 'model_end':
+                updateClusterErrorAssistantMessage(message_length)
+                break;
+              case 'compare_end':
+                setLoading(false);
+                break;
+            }
+          })
+        };
+
+        setTimeout(() => {
+            draftRun(
+              data.app_id,
+              { 
+                message, 
+                conversation_id: conversationId, 
+                stream: true 
+              }, 
+              handleStreamMessage
+            )
+              .finally(() => setLoading(false))
+        }, 0)
+      })
+      .catch(() => {
+        setLoading(false)
+        setCompareLoading(false)
+      })
+  }
+
   const handleDelete = (index: number) => {
     updateChatList(chatList.filter((_, voIndex) => voIndex !== index))
   }
@@ -240,6 +314,7 @@ const Chat: FC<ChatProps> = ({ chatList, data, updateChatList, handleSave, sourc
       {chatList.length === 0
         ? <Empty 
           url={DebuggingEmpty} 
+          size={[300, 200]}
           title={t('application.debuggingEmpty')} 
           subTitle={t('application.debuggingEmptyDesc')} 
           className="rb:h-full"
@@ -257,69 +332,55 @@ const Chat: FC<ChatProps> = ({ chatList, data, updateChatList, handleSave, sourc
                 <div className={clsx(
                   "rb:grid rb:bg-[#F0F3F8] rb:text-center rb:flex-[0_0_auto]",
                   {
-                    'rb:rounded-tr-[12px]': index === chatList.length - 1,
-                    'rb:rounded-tl-[12px]': index === 0,
+                    'rb:rounded-tr-xl': index === chatList.length - 1,
+                    'rb:rounded-tl-xl': index === 0,
                   }
                 )}>
                   <div className='rb:relative rb:p-[10px_12px] rb:overflow-hidden'>
                     <div className="rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap rb:w-[calc(100%-24px)]">{chat.label}</div>
                     <div 
-                      className="rb:w-[16px] rb:h-[16px] rb:cursor-pointer rb:absolute rb:top-[12px] rb:right-[12px] rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/close.svg')] rb:hover:bg-[url('@/assets/images/close_hover.svg')]" 
+                      className="rb:w-4 rb:h-4 rb:cursor-pointer rb:absolute rb:top-3 rb:right-3 rb:bg-cover rb:bg-[url('@/assets/images/close.svg')] rb:hover:bg-[url('@/assets/images/close_hover.svg')]" 
                       onClick={() => handleDelete(index)}
                     ></div>
                   </div>
                 </div>
               }
-              {!chat.list || chat.list.length === 0
-                ? <Empty url={ChatIcon} title={t('application.chatEmpty')} className="rb:h-full" />
-                : (
-                  <div ref={el => scrollContainerRefs.current[index] = el} className={clsx(`rb:relative rb:overflow-y-auto rb:overflow-x-hidden`, {
-                    'rb:h-[calc(100vh-186px)]': isCluster,
-                    'rb:h-[calc(100vh-286px)]': !isCluster,
-                  })}>
-                    {chat.list?.map((vo, voIndex) => {
-                      if (compareLoading && voIndex === chat.list?.length - 1) {
-                        return null
-                      }
-                      return (
-                        <div key={voIndex} className={clsx("rb:relative rb:mt-[24px]", {
-                          'rb:right-[16px] rb:text-right': vo.role === 'question',
-                          'rb:left-[16px] rb:text-left': vo.role !== 'question',
-                        })}>
-                          <div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-[16px] rb:font-regular">{vo.role === 'question' ? 'You' : chat.label}</div>
-                          <div className={clsx('rb:border rb:text-left rb:rounded-[8px] rb:mt-[6px] rb:leading-[18px] rb:p-[10px_12px_2px_12px] rb:inline-block', {
-                            'rb:border-[rgba(255,93,52,0.30)] rb:bg-[rgba(255,93,52,0.08)] rb:text-[#FF5D34]': vo.role !== 'question' && vo.content === null,
-                            'rb:bg-[rgba(21,94,239,0.08)] rb:border-[rgba(21,94,239,0.30)]': vo.role === 'question' && vo.content,
-                            'rb:bg-[#ffffff] rb:border-[rgba(235,235,235,1)]': vo.role !== 'question' && (vo.content || vo.content === ''),
-                            'rb:max-w-[400px]': chatList.length === 1,
-                            'rb:max-w-[260px]': chatList.length === 2,
-                            'rb:max-w-[150px]': chatList.length === 3,
-                            'rb:max-w-[108px]': chatList.length === 4,
-                          })}>
-                            <Markdown content={vo.content === null ? t('application.ReplyException') : vo.content} />
-                          </div>
-                        </div>
-                      )
-                    })}
-                  </div>
-                )
-              }
+              <ChatContent
+                classNames={{
+                  'rb:mx-[16px] rb:pt-[24px]': true,
+                  'rb:h-[calc(100vh-186px)]': isCluster,
+                  'rb:h-[calc(100vh-286px)]': !isCluster,
+                }} 
+                contentClassNames={{
+                  'rb:max-w-[400px]!': chatList.length === 1,
+                  'rb:max-w-[260px]!': chatList.length === 2,
+                  'rb:max-w-[150px]!': chatList.length === 3,
+                  'rb:max-w-[108px]!': chatList.length === 4,
+                }}
+                empty={<Empty url={ChatIcon} title={t('application.chatEmpty')} isNeedSubTitle={false} size={[240, 200]} className="rb:h-full" />}
+                data={chat.list || []}
+                streamLoading={compareLoading}
+                labelPosition="top"
+                labelFormat={(item) => item.role === 'user' ? 'You' : chat.label}
+                errorDesc={t('application.ReplyException')}
+              />
+              
             </div>
           ))}
         </div>
-        <div className="rb:flex rb:items-center rb:gap-[10px] rb:p-[16px]">
+        <div className="rb:flex rb:items-center rb:gap-2.5 rb:p-4">
           <Form form={form} style={{width: 'calc(100% - 54px)'}}>
-            <Form.Item name="message" className="rb:mb-[0]!">
+            <Form.Item name="message" className="rb:mb-0!">
               <Input 
-                className="rb:h-[44px] rb:shadow-[0px_2px_8px_0px_rgba(33,35,50,0.1)]" 
+                className="rb:h-11 rb:shadow-[0px_2px_8px_0px_rgba(33,35,50,0.1)]" 
                 placeholder={t('application.chatPlaceholder')}
-                onPressEnter={handleSend}
+                onPressEnter={isCluster ? handleClusterSend : handleSend}
               />
             </Form.Item>
           </Form>
-          <img src={ChatSendIcon} className={clsx("rb:w-[44px] rb:h-[44px] rb:cursor-pointer", {
+          <img src={ChatSendIcon} className={clsx("rb:w-11 rb:h-11 rb:cursor-pointer", {
             'rb:opacity-50': loading,
-          })} onClick={handleSend} />
+          })} onClick={isCluster ? handleClusterSend : handleSend} />
         </div>
       </>
       }

web/src/views/ApplicationConfig/components/ConfigHeader.tsx

@@ -1,6 +1,6 @@
-import { type FC, useRef } from 'react';
+import { type FC, useEffect, useRef } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
-import { Layout, Tabs, Dropdown } from 'antd';
+import { Layout, Tabs, Dropdown, Button } from 'antd';
 import type { MenuProps } from 'antd';
 import { useTranslation } from 'react-i18next';
 import styles from '../index.module.css'
@@ -11,7 +11,7 @@ import exportIcon from '@/assets/images/export_hover.svg'
 import deleteIcon from '@/assets/images/delete_hover.svg'
 import type { Application, ApplicationModalRef } from '@/views/ApplicationManagement/types';
 import ApplicationModal from '@/views/ApplicationManagement/components/ApplicationModal'
-import type { CopyModalRef } from '../types'
+import type { CopyModalRef, WorkflowRef } from '../types'
 import { deleteApplication } from '@/api/application'
 import CopyModal from './CopyModal'
 
@@ -29,8 +29,12 @@ interface ConfigHeaderProps {
   activeTab: string;
   handleChangeTab: (key: string) => void;
   refresh: () => void;
+  workflowRef: React.RefObject<WorkflowRef>
 }
-const ConfigHeader: FC<ConfigHeaderProps> = ({ application, activeTab, handleChangeTab, refresh }) => {
+const ConfigHeader: FC<ConfigHeaderProps> = ({ 
+  application, activeTab, handleChangeTab, refresh,
+  workflowRef
+}) => {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const { id } = useParams();
@@ -46,7 +50,7 @@ const ConfigHeader: FC<ConfigHeaderProps> = ({ application, activeTab, handleCha
   const formatMenuItems = () => {
     const items =  ['edit', 'copy', 'delete'].map(key => ({
       key,
-      icon: <img src={menuIcons[key]} className="rb:w-[16px] rb:h-[16px] rb:mr-[8px]" />,
+      icon: <img src={menuIcons[key]} className="rb:w-4 rb:h-4 rb:mr-2" />,
       label: t(`common.${key}`),
     }))
     return {
@@ -85,12 +89,23 @@ const ConfigHeader: FC<ConfigHeaderProps> = ({ application, activeTab, handleCha
   const goToApplication = () => {
     navigate('/application', { replace: true })
   }
-
+  const save = () => {
+    workflowRef.current?.handleSave()
+  }
+  const run = () => {
+    workflowRef.current?.handleSave(false)
+      .then(() => {
+        workflowRef.current?.handleRun()
+      })
+  }
+  const clear = () => {
+    workflowRef?.current?.graphRef?.current?.clearCells()
+  }
   return (
     <>
-      <Header className="rb:w-full rb:h-[64px] rb:grid rb:grid-cols-3 rb:p-[16px_16px_16px_24px]! rb:border-b rb:border-[#EAECEE] rb:leading-[32px]">
-        <div className="rb:h-[32px] rb:flex rb:items-center rb:font-medium">
-          <div className="rb:w-[32px] rb:h-[32px] rb:rounded-[8px] rb:mr-[13px] rb:bg-[#155eef] rb:flex rb:items-center rb:justify-center rb:text-[24px] rb:text-[#ffffff]">
+      <Header className="rb:w-full rb:h-16 rb:grid rb:grid-cols-3 rb:p-[16px_16px_16px_24px]! rb:border-b rb:border-[#EAECEE] rb:leading-8">
+        <div className="rb:h-8 rb:flex rb:items-center rb:font-medium">
+          <div className="rb:w-8 rb:h-8 rb:rounded-lg rb:mr-3.25 rb:bg-[#155eef] rb:flex rb:items-center rb:justify-center rb:text-[24px] rb:text-[#ffffff]">
             {application?.name[0]}
           </div>
           
@@ -101,7 +116,7 @@ const ConfigHeader: FC<ConfigHeaderProps> = ({ application, activeTab, handleCha
             placement="bottomRight"
           >
             <div 
-              className="rb:w-[20px] rb:h-[20px] rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/edit.svg')] rb:hover:bg-[url('@/assets/images/edit_hover.svg')]" 
+              className="rb:w-5 rb:h-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/edit.svg')] rb:hover:bg-[url('@/assets/images/edit_hover.svg')]" 
             ></div>
           </Dropdown>
         </div>
@@ -114,10 +129,19 @@ const ConfigHeader: FC<ConfigHeaderProps> = ({ application, activeTab, handleCha
             className={styles.tabs}
           />
         </div>
-        <div className="rb:h-[32px] rb:flex rb:items-center rb:justify-end rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:cursor-pointer" onClick={goToApplication}>
-          <img src={logoutIcon} className="rb:mr-[8px]" />
+        {application?.type === 'workflow'
+        ? <div className="rb:h-8 rb:flex rb:items-center rb:justify-end rb:gap-2.5">
+            <Button onClick={clear}>{t('workflow.clear')}</Button>
+            <Button onClick={run}>{t('workflow.run')}</Button>
+            <Button type="primary" onClick={save}>{t('workflow.save')}</Button>
+            {/* <Button type="primary">{t('workflow.export')}</Button> */}
+            <img src={logoutIcon} className="rb:w-4 rb:h-4 rb:cursor-pointer" onClick={goToApplication} />
+          </div>
+        : <div className="rb:h-8 rb:flex rb:items-center rb:justify-end rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:cursor-pointer" onClick={goToApplication}>
+          <img src={logoutIcon} className="rb:mr-2 rb:w-4 rb:h-4" />
           {t('application.returnToApplicationList')}
         </div>
+        }
       </Header>
       <ApplicationModal
         ref={applicationModalRef}

web/src/views/ApplicationConfig/components/ModelByProvider.tsx

@@ -1,43 +0,0 @@
-import { useEffect, useState, type FC } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Cascader } from 'antd'
-import type { CascaderProps } from 'antd';
-import { getModelProviderList } from '@/api/models'
-
-interface Option {
-  value?: string | number | null;
-  label: React.ReactNode;
-  children?: Option[];
-  isLeaf?: boolean;
-}
-const CustomSelect: FC<CascaderProps> = () => {
-  const { t } = useTranslation();
-  const [options, setOptions] = useState<Option[]>([]); 
-  useEffect(() => {
-    getProviderList()
-  }, []);
-
-  const getProviderList = () => {
-    getModelProviderList().then(res => {
-      const response = res as string[]
-      setOptions(response.map((key: string) => ({
-        value: key,
-        label: t(`model.${key}`),
-        children: [],
-        isLeaf: false,
-      })))
-    })
-  }
-  const loadData = (selectedOptions: Option[]) => {
-    const targetOption = selectedOptions[selectedOptions.length - 1];
-    console.log(targetOption)
-  }
-  return (
-    <Cascader 
-      options={options} 
-      loadData={loadData}
-      changeOnSelect 
-    />
-  );
-}
-export default CustomSelect;

web/src/views/ApplicationConfig/index.tsx

@@ -1,19 +1,20 @@
 import React, { useEffect, useState, useRef } from 'react';
 import { useParams } from 'react-router-dom';
 import ConfigHeader from './components/ConfigHeader'
-import type { AgentRef } from './types'
+import type { AgentRef, ClusterRef, WorkflowRef } from './types'
 import type { Application } from '@/views/ApplicationManagement/types'
 import Agent from './Agent'
 import Api from './Api'
 import ReleasePage from './ReleasePage'
 import Cluster from './Cluster'
 import { getApplication } from '@/api/application'
-import { randomString } from '@/utils/common'
+import Workflow from '@/views/Workflow';
 
-const apiKeyList = [`app-${randomString(24, false)}`]
 const ApplicationConfig: React.FC = () => {
   const { id } = useParams();
   const agentRef = useRef<AgentRef>(null)
+  const clusterRef = useRef<ClusterRef>(null)
+  const workflowRef = useRef<WorkflowRef>(null)
   const [application, setApplication] = useState<Application | null>(null);
   const [activeTab, setActiveTab] = useState('arrangement');
 
@@ -23,6 +24,16 @@ const ApplicationConfig: React.FC = () => {
         .then(() => {
             setActiveTab(key)
         })
+    } else if (activeTab === 'arrangement' && application?.type === 'multi_agent' && clusterRef.current) {
+      clusterRef.current.handleSave(false)
+        .then(() => {
+          setActiveTab(key)
+        })
+    } else if (activeTab === 'arrangement' && application?.type === 'workflow' && workflowRef.current) {
+      workflowRef.current.handleSave(false)
+        .then(() => {
+          setActiveTab(key)
+        })
     } else {
       setActiveTab(key)
     }
@@ -49,10 +60,12 @@ const ApplicationConfig: React.FC = () => {
         handleChangeTab={handleChangeTab}
         application={application as Application}
         refresh={getApplicationInfo}
+        workflowRef={workflowRef}
       />
       {activeTab === 'arrangement' && application?.type === 'agent' && <Agent ref={agentRef} />}
-      {activeTab === 'arrangement' && application?.type === 'multi_agent' && <Cluster application={application as Application} />}
-      {activeTab === 'api' && <Api apiKeyList={apiKeyList} />}
+      {activeTab === 'arrangement' && application?.type === 'multi_agent' && <Cluster ref={clusterRef} application={application as Application} />}
+      {activeTab === 'arrangement' && application?.type === 'workflow' && <Workflow ref={workflowRef} />}
+      {activeTab === 'api' && <Api application={application} />}
       {activeTab === 'release' && <ReleasePage data={application as Application} refresh={getApplicationInfo} />}
     </>
   );

web/src/views/ApplicationConfig/types.ts

@@ -1,4 +1,7 @@
 import type { KnowledgeBaseListItem } from '@/views/KnowledgeBase/types'
+import type { ChatItem } from '@/components/Chat/types'
+import type { GraphRef } from '@/views/Workflow/types';
+import type { ApiKey } from '@/views/ApiKeyManagement/types'
 
 export interface ModelConfig {
   label?: string;
@@ -115,6 +118,14 @@ export interface ApplicationModalData {
 export interface AgentRef {
   handleSave: (flag?: boolean) => Promise<any>;
 }
+export interface ClusterRef {
+  handleSave: (flag?: boolean) => Promise<any>;
+}
+export interface WorkflowRef {
+  handleSave: (flag?: boolean) => Promise<any>;
+  handleRun: () => void;
+  graphRef: GraphRef
+}
 export interface ApplicationModalRef {
   handleOpen: (application?: Config) => void;
 }
@@ -139,11 +150,6 @@ export interface ApiExtensionModalData {
 export interface ApiExtensionModalRef {
   handleOpen: () => void;
 }
-export interface ChatItem { 
-  role: 'answer' | 'question'; 
-  content?: string; 
-  time: number; 
-}
 export interface ChatData {
   label?: string;
   model_config_id?: string;
@@ -191,4 +197,10 @@ export interface SubAgentItem {
 }
 export interface SubAgentModalRef {
   handleOpen: (agent?: SubAgentItem) => void;
+}
+export interface ApiKeyModalRef {
+  handleOpen: () => void;
+}
+export interface ApiKeyConfigModalRef {
+  handleOpen: (apiKey: ApiKey) => void;
 }

web/src/views/ApplicationManagement/components/ApplicationModal.tsx

@@ -69,7 +69,7 @@ const ApplicationModal = forwardRef<ApplicationModalRef, ApplicationModalProps>(
         const response = editVo?.id ? updateApplication(editVo.id, {
           ...editVo,
           ...values,
-        } as Application) : addApplication(values as Application)
+        }) : addApplication(values)
         response.then(() => {
           refresh()
           handleClose()
@@ -127,7 +127,6 @@ const ApplicationModal = forwardRef<ApplicationModalRef, ApplicationModalProps>(
               label: t(`application.${type}`),
               labelDesc: t(`application.${type}Desc`),
               icon: typeIcons[type],
-              disabled: editVo?.id || type === 'workflow'
             }))}
           />
         </FormItem>

web/src/views/ApplicationManagement/types.ts

@@ -7,7 +7,7 @@ export interface Application {
   description?: string;
   icon?: string;
   icon_type?: string;
-  type: string;
+  type: 'agent' | 'multi_agent' | 'workflow';
   visibility: string;
   status: string;
   tags: string[];

web/src/views/Conversation/index.tsx

@@ -2,16 +2,24 @@ import { type FC, useState, useEffect, useRef } from 'react'
 import { useParams, useLocation } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import InfiniteScroll from 'react-infinite-scroll-component';
-import { Flex, Skeleton } from 'antd'
+import { Flex, Skeleton, Form } from 'antd'
 import clsx from 'clsx'
-import Chat, { type ChatItem } from '@/views/MemoryConversation/components/Chat'
 import AnalysisEmptyIcon from '@/assets/images/conversation/analysisEmpty.svg'
 import { getConversationHistory, sendConversation, getConversationDetail, getShareToken } from '@/api/application'
-import type { HistoryItem } from './types'
+import type { HistoryItem, QueryParams } from './types'
 import Empty from '@/components/Empty'
 import { formatDateTime } from '@/utils/format';
 import { randomString } from '@/utils/common'
 import BgImg from '@/assets/images/conversation/bg.png'
+import Chat from '@/components/Chat'
+import type { ChatItem } from '@/components/Chat/types'
+import ButtonCheckbox from '@/components/ButtonCheckbox'
+import MemoryFunctionIcon from '@/assets/images/conversation/memoryFunction.svg'
+import OnlineIcon from '@/assets/images/conversation/online.svg'
+import OnlineCheckedIcon from '@/assets/images/conversation/onlineChecked.svg'
+import MemoryFunctionCheckedIcon from '@/assets/images/conversation/memoryFunctionChecked.svg'
+import dayjs from 'dayjs'
+import { type SSEMessage } from '@/utils/stream'
 
 const Conversation: FC = () => {
   const { t } = useTranslation()
@@ -20,13 +28,8 @@ const Conversation: FC = () => {
   const searchParams = new URLSearchParams(location.search)
   const userId = searchParams.get('user_id')
   const [loading, setLoading] = useState(false)
-  const [chatLoading, setChatLoading] = useState(false)
-  const [query, setQuery] = useState<{
-    message?: string;
-    web_search?: boolean;
-    memory?: boolean;
-    conversation_id?: string;
-  }>({})
+  const [streamLoading, setStreamLoading] = useState(false)
+  const [message, setMessage] = useState<string>('')
   const [conversation_id, setConversationId] = useState<string | null>(null)
   const [historyList, setHistoryList] = useState<HistoryItem[]>([])
   const [groupHistoryList, setGroupHistoryList] = useState<Record<string, HistoryItem[]>>({})
@@ -36,14 +39,18 @@ const Conversation: FC = () => {
   const [hasMore, setHasMore] = useState(true);
   const scrollRef = useRef<HTMLDivElement>(null);
   const [shareToken, setShareToken] = useState<string | null>(localStorage.getItem(`shareToken_${token}`))
+
+  const [form] = Form.useForm<QueryParams>()
+  const queryValues = Form.useWatch<QueryParams>([], form)
   useEffect(() => {
     const shareToken = localStorage.getItem(`shareToken_${token}`)
     setShareToken(shareToken)
     if (shareToken && shareToken !== '') return
     getShareToken(token as string, userId || randomString(12, false))
       .then(res => {
-        localStorage.setItem(`shareToken_${token}`, res?.access_token || '')
-        setShareToken(res?.access_token || '')
+        const response = res as { access_token: string  } || {}
+        localStorage.setItem(`shareToken_${token}`, response.access_token ?? '')
+        setShareToken(response.access_token ?? '')
       })
   }, [token])
 
@@ -73,7 +80,7 @@ const Conversation: FC = () => {
     setPageLoading(true);
     getConversationHistory(token, { page: flag ? 1 : page, pagesize: 20 })
       .then(res => {
-        const response = res as { items: HistoryItem[], page: { hasnext: boolean } }
+        const response = res as { items: HistoryItem[], page: { hasnext: boolean; page: number; pagesize: number; total: number } }
         const results = response?.items || []
         let list = []
         if (flag) {
@@ -101,7 +108,7 @@ const Conversation: FC = () => {
       setConversationId(id)
     }
     if (!id) {
-      setQuery({})
+      setMessage('')
     }
   }
   useEffect(() => {
@@ -116,72 +123,81 @@ const Conversation: FC = () => {
     }
   }, [conversation_id])
 
+  const addUserMessage = (message: string = '') => {
+    const newUserMessage: ChatItem = {
+      conversation_id,
+      role: 'user',
+      content: message,
+      created_at: Date.now()
+    };
+    setChatList(prev => [...prev, newUserMessage])
+  }
+  const addAssistantMessage = () => {
+    const newAssistantMessage: ChatItem = {
+      created_at: Date.now(),
+      role: 'assistant',
+      content: '',
+    }
+    setChatList(prev => [...prev, newAssistantMessage])
+  }
+  const updateAssistantMessage = (content: string = '') => {
+    if (!content) return
+    if (streamLoading) {
+      setStreamLoading(false)
+    }
+
+    setChatList(prev => {
+      const lastList = [...prev]
+      const lastIndex = lastList.length - 1
+      const lastMsg = lastList[lastIndex]
+      if (lastMsg?.role === 'assistant') {
+        return [
+          ...lastList.slice(0, lastList.length - 1),
+          {
+            ...lastMsg,
+            content: lastMsg.content + content
+          }
+        ]
+      }
+      return prev
+    })
+  }
+
   const handleSend = () => {
     if (!token || !shareToken) {
       return
     }
-    // 添加必需的id和conversation_id属性
-    const newUserMessage: ChatItem = {
-      conversation_id,
-      role: 'user',
-      content: query?.message || '',
-      created_at: Date.now()
-    };
-    setChatList(prev => [...prev, newUserMessage])
-    
     setLoading(true)
-    setChatLoading(true)
-    setChatList(prev => [...prev, {
-      created_at: Date.now(),
-      role: 'assistant',
-      content: '',
-    }])
-    let currentConversationId: string | null = null
-    const handleStreamMessage = (data: string) => {
-      setChatLoading(false)
-      try {
-        const lines = data.split('\n');
-        let currentEvent = '';
+    setStreamLoading(true)
+    addUserMessage(message)
+    addAssistantMessage()
 
-        
-        for (let i = 0; i < lines.length; i++) {
-          const line = lines[i].trim();
-          
-          if (line.startsWith('event:')) {
-            currentEvent = line.substring(6).trim();
-          } else if (line.startsWith('data:') && currentEvent === 'message') {
-            const jsonData = line.substring(5).trim();
-            const parsed = JSON.parse(jsonData);
-            
-            if (parsed.content) {
-              setChatList(prev => prev.map((msg, msgIndex) => {
-                if (msgIndex === prev!.length - 1 && msg.role === 'assistant') {
-                  return { ...msg, content: msg.content + parsed.content };
-                }
-                return msg;
-              }))
-            }
-          } else if (line.startsWith('data:') && currentEvent === 'start') {
-            const jsonData = line.substring(5).trim();
-            const parsed = JSON.parse(jsonData);
-            currentConversationId = parsed.conversation_id
-          } else if (currentEvent === 'end') {
-            setLoading(false);
+    let currentConversationId: string | null = null
+    const handleStreamMessage = (data: SSEMessage[]) => {
+      data.forEach((item) => {
+        switch(item.event) {
+          case 'start':
+            const { conversation_id: newId } = item.data as { conversation_id: string  }
+            currentConversationId = newId
+            break
+          case 'message':
+            const { content } = item.data as { content: string  }
+            updateAssistantMessage(content)
+            break
+          case 'end':
+            setLoading(false)
             if (currentConversationId && currentConversationId !== conversation_id) {
               setConversationId(currentConversationId)
-              getHistory(true)
             }
-          }
+            getHistory(true)
+            break
         }
-      } catch (e) {
-        console.error('Parse stream data error:', e);
-      }
+      })
     };
     
-    sendConversation(token as string, {
-      message: query?.message || '',
-      web_search: query?.web_search || false,
-      memory: query?.memory || false,
+    sendConversation({
+      ...queryValues,
+      message: message || '',
       stream: true,
       conversation_id: conversation_id || null,
     }, handleStreamMessage, shareToken)
@@ -192,12 +208,12 @@ const Conversation: FC = () => {
 
   return (
     <Flex className="rb:w-full rb:p-[-16px]!">
-      <div className="rb:w-[345px] rb:h-[100vh] rb:overflow-hidden rb:border-r rb:border-[#EAECEE] rb:p-[12px]">
-        <div className="rb:group rb:flex rb:items-center rb:justify-center rb:font-regular rb:cursor-pointer rb:mb-[20px] rb:border rb:border-[#DFE4ED] rb:hover:border-[#155EEF] rb:hover:text-[#155EEF] rb:rounded-[8px] rb:py-[10px]"
+      <div className="rb:w-[345px] rb:h-screen rb:overflow-hidden rb:border-r rb:border-[#EAECEE] rb:p-3">
+        <div className="rb:group rb:flex rb:items-center rb:justify-center rb:font-regular rb:cursor-pointer rb:mb-5 rb:border rb:border-[#DFE4ED] rb:hover:border-[#155EEF] rb:hover:text-[#155EEF] rb:rounded-lg rb:py-2.5"
           onClick={() => handleChangeHistory(null)}
         >
           <div 
-            className="rb:w-[20px] rb:h-[20px] rb:cursor-pointer rb:mr-[8px] rb:bg-cover rb:bg-[url('@/assets/images/conversation/conversation.svg')] rb:group-hover:bg-[url('@/assets/images/conversation/conversation_hover.svg')]" 
+            className="rb:w-5 rb:h-5 rb:cursor-pointer rb:mr-2 rb:bg-cover rb:bg-[url('@/assets/images/conversation/conversation.svg')] rb:group-hover:bg-[url('@/assets/images/conversation/conversation_hover.svg')]" 
           ></div>
           {t('memoryConversation.startANewConversation')}
         </div>
@@ -216,11 +232,11 @@ const Conversation: FC = () => {
               scrollableTarget="scrollableDiv"
             >
               {Object.entries(groupHistoryList).map(([date, items]) => (
-                <div key={date} className="rb:mt-[24px] rb:first:mt-0">
-                  <div className="rb:leading-[20px] rb:text-[#5B6167] rb:mb-[8px] rb:pl-[4px] rb:font-regular">{date.replace(/\u200e|\u200f/g, '')}</div>
+                <div key={date} className="rb:mt-6 rb:first:mt-0">
+                  <div className="rb:leading-5 rb:text-[#5B6167] rb:mb-2 rb:pl-1 rb:font-regular">{date.replace(/\u200e|\u200f/g, '')}</div>
                   {items.map(item => (
-                    <div key={item.updated_at} className="rb:mb-[12px]">
-                      <div className={clsx("rb:p-[8px_13px] rb:rounded-[8px] rb:leading-[20px] rb:cursor-pointer rb:hover:bg-[#F0F3F8]", {
+                    <div key={item.updated_at} className="rb:mb-3">
+                      <div className={clsx("rb:p-[8px_13px] rb:rounded-lg rb:leading-5 rb:cursor-pointer rb:hover:bg-[#F0F3F8]", {
                           'rb:bg-[#FFFFFF] rb:shadow-[0px_2px_4px_0px_rgba(0,0,0,0.15)] rb:font-medium rb:hover:bg-[#FFFFFF]!': item.id === conversation_id,
                         })}
                         onClick={() => handleChangeHistory(item.id)}
@@ -237,18 +253,38 @@ const Conversation: FC = () => {
         <img src={BgImg} className="rb:absolute rb:bottom-0 rb:left-0 rb:w-[345px]" />
       </div>
 
-      <div className="rb:relative rb:h-[100vh] rb:px-[16px] rb:flex-[1_1_auto]">
+      <div className="rb:relative rb:h-screen rb:px-4 rb:flex-[1_1_auto]">
         <Chat
-          source="conversation"
-          empty={
-            <Empty url={AnalysisEmptyIcon} subTitle={t('memoryConversation.emptyDesc')} />
-          }
-          query={query}
+          empty={<Empty url={AnalysisEmptyIcon} className="rb:h-full" subTitle={t('memoryConversation.emptyDesc')} />}
+          contentClassName="rb:h-[calc(100%-152px)]"
           data={chatList}
+          streamLoading={streamLoading}
           loading={loading}
-          onChange={setQuery}
+          onChange={setMessage}
           onSend={handleSend}
-        />
+          labelFormat={(item) => dayjs(item.created_at).locale('en').format('MMMM D, YYYY [at] h:mm A')}
+        >
+          <Form form={form}>
+            <Flex gap={8}>
+              <Form.Item name="web_search" valuePropName="checked" className="rb:mb-0!">
+                <ButtonCheckbox
+                  icon={OnlineIcon}
+                  checkedIcon={OnlineCheckedIcon}
+                >
+                  {t(`memoryConversation.web_search`)}
+                </ButtonCheckbox>
+              </Form.Item>
+              <Form.Item name="memory" valuePropName="checked" className="rb:mb-0!">
+                <ButtonCheckbox
+                  icon={MemoryFunctionIcon}
+                  checkedIcon={MemoryFunctionCheckedIcon}
+                >
+                  {t(`memoryConversation.memory`)}
+                </ButtonCheckbox>
+              </Form.Item>
+            </Flex>
+          </Form>
+        </Chat>
       </div>
     </Flex>
   )

web/src/views/Conversation/types.ts

@@ -10,4 +10,12 @@ export interface HistoryItem {
   is_active: boolean;
   created_at: number;
   updated_at: number;
+}
+
+export interface QueryParams {
+  message?: string;
+  web_search?: boolean;
+  memory?: boolean;
+  stream: boolean;
+  conversation_id?: string | null;
 }

web/src/views/EmotionEngine/index.tsx

@@ -0,0 +1,252 @@
+import React, { useState, useEffect } from 'react';
+import { Row, Col, Form, Slider, Button, Alert, message, Switch, Space } from 'antd';
+import { useParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import RbCard from '@/components/RbCard/Card';
+import strategyImpactSimulator from '@/assets/images/memory/strategyImpactSimulator.svg'
+import { getMemoryEmotionConfig, updateMemoryEmotionConfig } from '@/api/memory'
+import type { ConfigForm } from './types'
+import CustomSelect from '@/components/CustomSelect';
+import { getModelListUrl } from '@/api/models'
+import Tag from '@/components/Tag'
+
+const configList = [
+  {
+    key: 'emotion_enabled',
+    type: 'switch',
+  },
+  {
+    key: 'emotion_model_id',
+    type: 'customSelect',
+    url: getModelListUrl,
+    params: { type: 'chat,llm', page: 1, pagesize: 100 }, // chat,llm
+  },
+  {
+    key: 'emotion_min_intensity',
+    type: 'slider',
+    min: 0,
+    max: 1,
+    step: 0.05
+  },
+  {
+    key: 'emotion_extract_keywords',
+    type: 'switch',
+    hasSubTitle: true
+  },
+  {
+    key: 'emotion_enable_subject',
+    type: 'switch',
+    hasSubTitle: true
+  },
+]
+
+const EmotionEngine: React.FC = () => {
+  const { t } = useTranslation();
+  const { id } = useParams();
+  const [configData, setConfigData] = useState<ConfigForm>({} as ConfigForm);
+  const [form] = Form.useForm<ConfigForm>();
+  const [messageApi, contextHolder] = message.useMessage();
+  const [loading, setLoading] = useState(false)
+
+  const values = Form.useWatch([], form);
+
+  useEffect(() => {
+    getConfigData()
+  }, [id])
+
+  const getConfigData = () => {
+    if (!id) {
+      return
+    }
+    getMemoryEmotionConfig(id)
+      .then((res) => {
+        const response = res as ConfigForm
+        const initialValues = {
+          ...response,
+        }
+        setConfigData(initialValues);
+        form.setFieldsValue(initialValues);
+      })
+      .catch(() => {
+        console.error('Failed to load data');
+      })
+  }
+  const handleReset = () => {
+    form.setFieldsValue(configData);
+  }
+  const handleSave = () => {
+    if (!id) {
+      return
+    }
+    setLoading(true)
+    updateMemoryEmotionConfig({
+      ...values,
+      config_id: id
+    })
+      .then(() => {
+        messageApi.success(t('common.saveSuccess'))
+        setConfigData({...(values || {})})
+      })
+      .finally(() => {
+        setLoading(false)
+      })
+  }
+
+  return (
+    <Row gutter={[16, 16]}>
+      <Col span={12}>
+        <RbCard 
+          title={
+            <div className="rb:flex rb:items-center">
+              <img src={strategyImpactSimulator} className="rb:w-5 rb:h-5 rb:mr-2" />
+              {t('emotionEngine.emotionEngineConfig')}
+            </div>
+          }
+        >
+          <Form 
+            form={form}
+            layout="vertical"
+            initialValues={{
+              offset: 0,
+              lambda_time: 0.03,
+              lambda_mem: 0.03,
+            }}
+          >
+            {configList.map(config => {
+              if (config.type === 'slider') {
+                return (
+                  <div key={config.key} className=" rb:mb-6">
+                    <div className="rb:text-[14px] rb:font-medium rb:leading-5 rb:mb-2">
+                      {t(`emotionEngine.${config.key}`)}
+                    </div>
+                    <div className="rb:mt-1 rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-4 ">
+                      {t(`emotionEngine.${config.key}_desc`)}
+                    </div>
+                    <Form.Item
+                      name={config.key}
+                    >
+                      <Slider
+                        disabled={!values?.emotion_enabled && config.key !== 'emotion_enabled'}
+                        tooltip={{ open: false }} max={config.max} min={config.min} step={config.step} style={{ margin: '0' }} />
+                    </Form.Item>
+                    <div className="rb:flex rb:text-[12px] rb:items-center rb:justify-between rb:text-[#5B6167] rb:leading-5 rb:-mt-6.5">
+
+                      <>{t('emotionEngine.currentValue')}: {values?.[config.key as keyof ConfigForm] || 0}</>
+                    </div>
+                  </div>
+                )
+              }
+              if (config.type === 'customSelect') {
+                return (
+                  <div key={config.key}>
+                    <div className="rb:text-[14px] rb:font-medium rb:leading-5 rb:mb-2">
+                      {t(`emotionEngine.${config.key}`)}
+                    </div>
+                    <Form.Item
+                      name={config.key}
+                      extra={t(`emotionEngine.${config.key}_desc`)}
+                    >
+                      <CustomSelect
+                        url={config.url as string}
+                        params={config.params}
+                        valueKey='id'
+                        labelKey='name'
+                        hasAll={false}
+                        disabled={!values?.emotion_enabled && config.key !== 'emotion_enabled'}
+                      />
+                    </Form.Item>
+                  </div>
+                )
+              }
+
+              return (
+                <div className="rb:flex rb:items-center rb:justify-between rb:mb-6">
+                  <div>
+                    <span className="rb:text-[14px] rb:font-medium rb:leading-5">{t(`emotionEngine.${config.key}`)}</span>
+                    {config.hasSubTitle && <div className="rb:mt-1 rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-4">{t(`emotionEngine.${config.key}_subTitle`)}</div>}
+                    <div className="rb:mt-1 rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-4">{t(`emotionEngine.${config.key}_desc`)}</div>
+                  </div>
+                  <Form.Item
+                    name={config.key}
+                    valuePropName="checked"
+                    className="rb:ml-2 rb:mb-0!"
+                  >
+                    <Switch
+                      disabled={!values?.emotion_enabled && config.key !== 'emotion_enabled'} />
+                  </Form.Item>
+                </div>
+              )
+            })}
+            <Row gutter={16} className="rb:mt-3">
+              <Col span={12}>
+                <Button block onClick={handleReset}>{t('common.reset')}</Button>
+              </Col>
+              <Col span={12}>
+                <Button type="primary" loading={loading} block onClick={handleSave}>{t('common.save')}</Button>
+              </Col>
+            </Row>
+          </Form>
+        </RbCard>
+      </Col>
+      <Col span={12}>
+        <RbCard
+          title={t('emotionEngine.emotion_min_intensity_description')}
+        >
+          <div className="rb:font-medium">{t('emotionEngine.question')}</div>
+          <div className="rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-4 rb:mt-2">{t('emotionEngine.answer')}</div>
+          <div className="rb:font-medium rb:mt-4 rb:mb-2">{t('emotionEngine.differentTitle')}</div>
+
+          <Space size={16} direction="vertical" className="rb:w-full">
+            {['low', 'middle', 'high'].map((key, index) => (
+              <Alert
+                key={key} 
+                type={(['warning', 'info', 'success'] as const)[index] as 'warning' | 'info' | 'success'}
+                message={
+                  <div>
+                    <div className="rb:w-full rb:font-medium rb:flex rb:justify-between">
+                      {t(`emotionEngine.${key}_title`)}
+                      <Tag color={(['warning', 'processing', 'success'] as const)[index] as 'warning' | 'processing' | 'success'}>{t(`emotionEngine.${key}_tag`)}</Tag>
+                    </div>
+                    <Space size={8} direction="vertical" className="rb:w-full rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-4">
+                      <div><span className="rb:font-medium">{t('emotionEngine.advantage')}: </span>{t(`emotionEngine.${key}_advantage`)}</div>
+                      <div><span className="rb:font-medium">{t('emotionEngine.shortcoming')}: </span>{t(`emotionEngine.${key}_shortcoming`)}</div>
+                      <div><span className="rb:font-medium">{t('emotionEngine.scene')}: </span>{t(`emotionEngine.${key}_scene`)}</div>
+                    </Space>
+                  </div>
+                }
+              />
+            ))}
+          </Space>
+
+          <div className="rb:font-medium rb:mt-6 rb:mb-3">{t('emotionEngine.configSuggest')}</div>
+          <Space size={12} direction="vertical" className="rb:w-full">
+            {['first', 'customer_service', 'data_analysis', 'risk_warning'].map(key => (
+              <div className="rb:bg-[#F0F3F8] rb:px-3 rb:py-2.5 rb:rounded-md rb:text-[12px]">{t(`emotionEngine.${key}`)}: {t(`emotionEngine.${key}_desc`)}</div>
+            ))}
+          </Space>
+
+          <div className="rb:font-medium rb:mt-6 rb:mb-3">{t('emotionEngine.actual_case')}</div>
+          <Space size={12} direction="vertical" className="rb:w-full rb:bg-[#F0F3F8] rb:px-3 rb:py-2.5 rb:rounded-md">
+            <div className="rb:bg-white rb:px-3 rb:py-2.5 rb:rounded-md">
+              <span className="rb:font-medium">{t('emotionEngine.user_input')}: </span>
+              {t('emotionEngine.user_input_message')}
+            </div>
+            {['neutral_emotion', 'minor_dissatisfaction', 'expect_improvement'].map((key, index) => (
+              <div className="rb:flex rb:items-center rb:justify-between rb:bg-white rb:px-3 rb:py-2.5 rb:rounded-md">
+                <div className="rb:w-[50%] rb:flex rb:items-center rb:justify-between rb:text-[12px]">
+                  {t(`emotionEngine.${key}`)}
+                  <span>{t('emotionEngine.confidence')}: {key === 'neutral_emotion' ? 0.85 : key === 'minor_dissatisfaction' ? 0.45 : 0.32}</span>
+                </div>
+                
+                <Tag color={(['success', 'warning', 'processing'] as const)[index] as 'warning' | 'processing' | 'success'}>{t(`emotionEngine.${key}_tag`)}</Tag>
+              </div>
+            ))}
+            </Space>
+        </RbCard>
+      </Col>
+      {contextHolder}
+    </Row>
+  );
+};
+
+export default EmotionEngine;

web/src/views/EmotionEngine/types.ts

@@ -0,0 +1,48 @@
+// 标签表单数据类型
+export interface TagFormData {
+  tagName: string;
+  type: string;
+  color: string;
+  description?: string;
+  applicableScope?: string[];
+  semanticExpansion?: string;
+  isActive?: boolean;
+  // 扩展字段用于区分编辑和新增操作
+  isEditing?: boolean;
+  tagId?: string;
+}
+
+// 记忆总览数据类型
+export interface MemoryOverviewRecord {
+  id: number;
+  memoryID: string,
+  contentSummary: string;
+  type: string;
+  createTime: string;
+  lastCallTime: string;
+  retentionDegree: string;
+  status: string;
+}
+// 定义组件暴露的方法接口
+export interface MemoryOverviewFormRef {
+  handleOpen: (memoryOverview?: MemoryOverviewRecord | null) => void;
+}
+
+// 遗忘曲线数据类型
+export interface CurveRecord {
+  memoryID: string;
+  type: string;
+  currentRetentionRate: string;
+  finallyActivated: string;
+  expectedForgettingTime: string;
+  reinforcementCount: string;
+}
+
+export interface ConfigForm {
+  config_id: number | string;
+  emotion_enabled: boolean;
+  emotion_model_id: string;
+  emotion_extract_keywords: boolean;
+  emotion_min_intensity: number;
+  emotion_enable_subject: boolean;
+}

web/src/views/MemberManagement/components/MemberModal.tsx

@@ -132,7 +132,7 @@ const MemberModal = forwardRef<MemberModalRef, MemberModalProps>(({
           label={t('member.email')}
           rules={[{ required: true, message: t('common.pleaseEnter') }]}
         >
-          <Input placeholder={t('common.inputPlaceholder', { title: t('member.email') })} disabled={!!editingUser} />
+          <Input placeholder={t('common.enterPlaceholder', { title: t('member.email') })} disabled={!!editingUser} />
         </FormItem>
         
         <FormItem

web/src/views/MemoryConversation/components/Chat.tsx

@@ -1,82 +0,0 @@
-import { type FC, type ReactNode, useEffect, useRef, useState } from 'react'
-import { Flex } from 'antd'
-import clsx from 'clsx'
-import ChatInput from './ChatInput'
-import type { TestParams } from '../index'
-import dayjs from 'dayjs'
-import Markdown from '@/components/Markdown'
-
-interface ChatProps {
-  empty?: ReactNode;
-  data: ChatItem[];
-  query?: TestParams;
-  onChange: (query: TestParams) => void;
-  onSend: () => void;
-  loading: boolean;
-  source?: 'conversation' | 'memory';
-}
-export interface ChatItem {
-  id?: string;
-  conversation_id?: string | null;
-  role?: 'user' | 'assistant';
-  content?: string;
-  message?: string;
-  created_at?: number | string;
-  meta_data?: Record<string, string | number>[];
-}
-
-const Chat: FC<ChatProps> = ({ empty, data, query, onChange, onSend, loading, source = 'memory' }) => {
-  const scrollContainerRefs = useRef<(HTMLDivElement | null)>(null)
-  const [isMemory, setIsMemory] = useState<boolean>(source === 'memory')
-
-  useEffect(() => {
-    setIsMemory(source === 'memory')
-  }, [source])
-  useEffect(() => {
-    setTimeout(() => {
-      if (scrollContainerRefs.current) {
-        scrollContainerRefs.current.scrollTop = scrollContainerRefs.current.scrollHeight;
-      }
-    }, 0);
-  }, [data])
-  
-  return (
-    <div className="rb:h-full rb:relative rb:pt-[8px]">
-      {data.length === 0 ? (
-        <Flex vertical justify="space-between" className="rb:h-full rb:w-full rb:relative">
-          {/* Empty */}
-          <div className="rb:h-[calc(100%-144px)] rb:overflow-y-auto rb:overflow-x-hidden rb:flex rb:items-center rb:justify-center">
-            {empty}
-          </div>
-
-          <ChatInput source={source} query={query} onChange={onChange} onSend={onSend} loading={loading} />
-        </Flex>
-      )
-      : (
-        <div ref={scrollContainerRefs} className={clsx("rb:relative rb:overflow-y-auto", {
-          'rb:h-[calc(100%-152px)]': !isMemory,
-          'rb:h-[calc(100vh-362px)]': isMemory
-        })}>
-          {data.map((item, index) => (
-            <div key={index} className={clsx("rb:relative", {
-              'rb:mt-[24px]': index !== 0,
-              'rb:right-[0] rb:text-right': item.role === 'user',
-              'rb:left-[0] rb:text-left': item.role === 'assistant',
-            })}>
-              <div className={clsx('rb:border rb:text-left rb:rounded-[8px] rb:mt-[6px] rb:leading-[18px] rb:p-[10px_12px_2px_12px] rb:inline-block rb:max-w-[400px]', {
-                'rb:bg-[rgba(21,94,239,0.08)] rb:border-[rgba(21,94,239,0.30)]': item.role === 'user',
-                'rb:bg-[#FFFFFF] rb:border-[#EBEBEB]': item.role === 'assistant',
-              })}>
-                <Markdown content={item.content || ''} />
-              </div>
-              <div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-[16px] rb:font-regular">{dayjs(item.created_at).locale('en').format('MMMM D, YYYY [at] h:mm A')}</div>
-            </div>
-          ))}
-        </div>
-      )}
-
-      <ChatInput source={source} query={query} onChange={onChange} onSend={onSend} loading={loading} />
-    </div>
-  )
-}
-export default Chat

web/src/views/MemoryConversation/components/ChatInput.tsx

@@ -1,143 +0,0 @@
-import { type FC, useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Flex, Input, Form } from 'antd'
-import MemoryFunctionIcon from '@/assets/images/conversation/memoryFunction.svg'
-import OnlineIcon from '@/assets/images/conversation/online.svg'
-import DeepThinkingIcon from '@/assets/images/conversation/deepThinking.svg'
-import SendIcon from '@/assets/images/conversation/send.svg'
-import SendDisabledIcon from '@/assets/images/conversation/sendDisabled.svg'
-import ButtonCheckbox from '@/components/ButtonCheckbox'
-import DeepThinkingCheckedIcon from '@/assets/images/conversation/deepThinkingChecked.svg'
-import OnlineCheckedIcon from '@/assets/images/conversation/onlineChecked.svg'
-import MemoryFunctionCheckedIcon from '@/assets/images/conversation/memoryFunctionChecked.svg'
-import LoadingIcon from '@/assets/images/conversation/loading.svg'
-import type { TestParams } from '../index'
-
-interface ChatInputProps {
-  query?: TestParams;
-  onChange: (query: TestParams) => void;
-  onSend: () => void;
-  loading: boolean;
-  source: 'conversation' | 'memory';
-}
-const searchSwitchList = [
-  {
-    icon: DeepThinkingIcon,
-    checkedIcon: DeepThinkingCheckedIcon,
-    value: '0',
-    label: 'deepThinking' // 深度思考
-  },
-  {
-    icon: MemoryFunctionIcon,
-    checkedIcon: MemoryFunctionCheckedIcon,
-    value: '1',
-    label: 'normalReply' // 普通回复
-  },
-  {
-    icon: OnlineIcon,
-    checkedIcon: OnlineCheckedIcon,
-    value: '2',
-    label: 'quickReply' // 快速回复
-  },
-]
-
-const ChatInput: FC<ChatInputProps> = ({ source,query, onChange, onSend, loading }) => {
-  const [form] = Form.useForm()
-  const { t } = useTranslation();
-  const values = Form.useWatch([], form);
-  const [search_switch, setSearchSwitch] = useState('0')
-
-  useEffect(() => {
-    if (onChange) {
-      onChange({...values, search_switch})
-    }
-  }, [values, search_switch, onChange])
-  useEffect(() => {
-    if (!query?.message) {
-      form.setFieldsValue({
-        message: undefined,
-      })
-    }
-  }, [form, query?.message])
-  useEffect(() => {
-    if (loading) {
-      form.setFieldsValue({
-        message: undefined,
-      })
-    }
-  }, [loading])
-
-  const handleChange = (value: string) => {
-    form.setFieldsValue({
-      search_switch: value,
-    })
-    setSearchSwitch(value)
-  }
-
-  return (
-    <Form form={form} layout="vertical" className="rb:absolute rb:bottom-[12px] rb:left-0 rb:right-0">
-      <Flex vertical justify="space-between" className="rb:border rb:border-[#DFE4ED] rb:rounded-[12px] rb:min-h-[120px]">
-        <Form.Item name="message" className="rb:mb-[0]!">
-          <Input.TextArea
-            className="rb:m-[10px_12px_10px_12px]! rb:p-[0]! rb:w-[calc(100%-24px)]! rb:flex-[1_1_auto]"
-            // rows={4}
-            variant="borderless"
-            autoSize={{ minRows: 2, maxRows: 2 }}
-            onChange={(e) => onChange({ ...query, message: e.target.value })}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter' && !e.shiftKey && e.target.value?.trim() !== '' && !loading) {
-                e.preventDefault();
-                onSend();
-              }
-            }}
-          />
-        </Form.Item>
-
-        <Flex align="center" justify="space-between" className="rb:m-[0_10px_10px_10px]!">
-          {source === 'memory' &&
-            <Flex gap={8}>
-              {searchSwitchList.map(item => (
-                <ButtonCheckbox
-                  key={item.value}
-                  icon={item.icon}
-                  checkedIcon={item.checkedIcon}
-                  checked={search_switch === item.value}
-                  onChange={() => handleChange(item.value)}
-                >
-                  {t(`memoryConversation.${item.label}`)}
-                </ButtonCheckbox>
-              ))}
-            </Flex>
-          }
-          {source === 'conversation' &&
-            <Flex gap={8}>
-              <Form.Item name="web_search" valuePropName="checked" className="rb:mb-[0]!">
-                <ButtonCheckbox
-                  icon={OnlineIcon}
-                  checkedIcon={OnlineCheckedIcon}
-                >
-                  {t(`memoryConversation.web_search`)}
-                </ButtonCheckbox>
-              </Form.Item>
-              <Form.Item name="memory" valuePropName="checked" className="rb:mb-[0]!">
-                <ButtonCheckbox
-                  icon={MemoryFunctionIcon}
-                  checkedIcon={MemoryFunctionCheckedIcon}
-                >
-                  {t(`memoryConversation.memory`)}
-                </ButtonCheckbox>
-              </Form.Item>
-            </Flex>
-          }
-          {loading ? <img src={LoadingIcon} className="rb:w-[22px] rb:h-[22px] rb:cursor-pointer" />:
-            !values || !values?.message || values?.message?.trim() === '' ?
-            <img src={SendDisabledIcon} className="rb:w-[22px] rb:h-[22px] rb:cursor-pointer" />
-            : <img src={SendIcon} className="rb:w-[22px] rb:h-[22px] rb:cursor-pointer" onClick={onSend} />
-          }
-        </Flex>
-      </Flex>
-    </Form>
-  )
-}
-
-export default ChatInput

web/src/views/MemoryConversation/index.tsx

@@ -1,16 +1,48 @@
 import { type FC, type ReactNode, useState, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Col, Row, App, Skeleton, Space, Select } from 'antd'
+import { Col, Row, App, Skeleton, Space, Select, Flex } from 'antd'
 import clsx from 'clsx'
 
 import ConversationEmptyIcon from '@/assets/images/conversation/conversationEmpty.svg'
-import AnalysisEmptyIcon from '@/assets/images/conversation/analysisEmpty.svg'
+import AnalysisEmptyIcon from '@/assets/images/conversation/analysisEmpty.png'
 import Card from './components/Card'
-import Chat from './components/Chat'
 import { readService, getUserMemoryList } from '@/api/memory'
 import Empty from '@/components/Empty'
 import Markdown from '@/components/Markdown'
 import type { Data } from '@/views/UserMemory/types'
+import Chat from '@/components/Chat'
+import MemoryFunctionIcon from '@/assets/images/conversation/memoryFunction.svg'
+import OnlineIcon from '@/assets/images/conversation/online.svg'
+import DeepThinkingIcon from '@/assets/images/conversation/deepThinking.svg'
+import ButtonCheckbox from '@/components/ButtonCheckbox'
+import DeepThinkingCheckedIcon from '@/assets/images/conversation/deepThinkingChecked.svg'
+import OnlineCheckedIcon from '@/assets/images/conversation/onlineChecked.svg'
+import MemoryFunctionCheckedIcon from '@/assets/images/conversation/memoryFunctionChecked.svg'
+import type { ChatItem } from '@/components/Chat/types'
+import dayjs from 'dayjs'
+import type { AnyObject } from 'antd/es/_util/type';
+
+
+const searchSwitchList = [
+  {
+    icon: DeepThinkingIcon,
+    checkedIcon: DeepThinkingCheckedIcon,
+    value: '0',
+    label: 'deepThinking' // 深度思考
+  },
+  {
+    icon: MemoryFunctionIcon,
+    checkedIcon: MemoryFunctionCheckedIcon,
+    value: '1',
+    label: 'normalReply' // 普通回复
+  },
+  {
+    icon: OnlineIcon,
+    checkedIcon: OnlineCheckedIcon,
+    value: '2',
+    label: 'quickReply' // 快速回复
+  },
+]
 
 export interface TestParams {
   group_id: string;
@@ -30,8 +62,8 @@ interface DataItem {
 export interface LogItem {
   type: string;
   title: string;
-  data?: DataItem[] | Record<string, string>;
-  raw_results?: string;
+  data?: DataItem[] | AnyObject;
+  raw_results?: string | AnyObject;
   summary?: string;
   query?: string;
   reason?: string;
@@ -41,7 +73,7 @@ export interface LogItem {
 }
 
 const ContentWrapper: FC<{ children: ReactNode }> = ({ children }) => (
-  <div className="rb:p-[12px] rb:bg-[#F6F8FC] rb:border rb:border-[#DFE4ED] rb:rounded-[8px]">
+  <div className="rb:p-3 rb:bg-[#F6F8FC] rb:border rb:border-[#DFE4ED] rb:rounded-lg">
     {children}
   </div>
 )
@@ -49,17 +81,13 @@ const ContentWrapper: FC<{ children: ReactNode }> = ({ children }) => (
 const MemoryConversation: FC = () => {
   const { t } = useTranslation()
   const { message } = App.useApp();
-  const [query, setQuery] = useState<TestParams>({
-    group_id: '',
-    message: '',
-    search_switch: '0',
-    history: [],
-  })
   const [userId, setUserId] = useState<string>()
   const [loading, setLoading] = useState<boolean>(false)
-  const [chatData, setChatData] = useState<{ content: string; created_at: string | number; role: string }[]>([])
+  const [chatData, setChatData] = useState<ChatItem[]>([])
   const [logs, setLogs] = useState<LogItem[]>([])
   const [userList, setUserList] = useState<Data[]>([])
+  const [search_switch, setSearchSwitch] = useState('0')
+  const [msg, setMsg] = useState<string>('')
 
   useEffect(() => {
     getUserMemoryList().then(res => {
@@ -75,11 +103,12 @@ const MemoryConversation: FC = () => {
       message.warning(t('common.inputPlaceholder', { title: t('memoryConversation.userID') }))
       return
     }
-    setChatData(prev => [...prev, { content: query.message || '', created_at: new Date().getTime(), role: 'user' }])
+    setChatData(prev => [...prev, { content: msg, created_at: new Date().getTime(), role: 'user' }])
     setLoading(true)
     readService({
-      ...query,
+      message: msg,
       group_id: userId,
+      search_switch: search_switch,
       history: [],
     })
       .then(res => {
@@ -92,6 +121,10 @@ const MemoryConversation: FC = () => {
       })
   }
 
+  const handleChange = (value: string) => {
+    setSearchSwitch(value)
+  }
+
   return (
     <>
       <Row gutter={16}>
@@ -101,7 +134,7 @@ const MemoryConversation: FC = () => {
               value: item.end_user?.id,
               label: item?.name,
             }))}
-            filterOption={(inputValue, option) => option.label?.toLowerCase().indexOf(inputValue.toLowerCase()) !== -1}
+            filterOption={(inputValue, option) => option?.label?.toLowerCase().indexOf(inputValue.toLowerCase()) !== -1}
             showSearch={true}
             // filterOption={(inputValue, option) => option.label?.toLowerCase().indexOf(inputValue.toLowerCase()) !== -1}
             placeholder={t('memoryConversation.searchPlaceholder')}
@@ -118,14 +151,29 @@ const MemoryConversation: FC = () => {
           >
             <Chat
               empty={
-                <Empty url={ConversationEmptyIcon} size={[140, 100]} title={t('memoryConversation.conversationContentEmpty')} />
+                <Empty url={ConversationEmptyIcon} className="rb:h-full" size={[140, 100]} title={t('memoryConversation.conversationContentEmpty')} />
               }
+              contentClassName='rb:h-[calc(100vh-362px)]'
               data={chatData}
-              query={query}
-              onChange={setQuery}
+              onChange={setMsg}
               onSend={handleSend}
               loading={loading}
-            />
+              labelFormat={(item) => dayjs(item.created_at).locale('en').format('MMMM D, YYYY [at] h:mm A')}
+            >
+              <Flex gap={8}>
+                {searchSwitchList.map(item => (
+                  <ButtonCheckbox
+                    key={item.value}
+                    icon={item.icon}
+                    checkedIcon={item.checkedIcon}
+                    checked={search_switch === item.value}
+                    onChange={() => handleChange(item.value)}
+                  >
+                    {t(`memoryConversation.${item.label}`)}
+                  </ButtonCheckbox>
+                ))}
+              </Flex>
+            </Chat>
           </Card>
         </Col>
         <Col span={12}>
@@ -139,13 +187,16 @@ const MemoryConversation: FC = () => {
               <Empty 
                 url={AnalysisEmptyIcon}
                 className="rb:h-full"
+                title={t('memoryConversation.memoryConversationAnalysisEmpty')}
+                subTitle={t('memoryConversation.memoryConversationAnalysisEmptySubTitle')}
+                size={[270, 170]}
               />
             : <Space size={12} direction="vertical" style={{width: '100%'}}>
                 {logs.map((log, logIndex) => (
                   <div key={logIndex}
                     className={clsx(
-                      `rb:p-[16px_24px] rb:rounded-[8px]`,
-                      'rb:border-[1px] rb:border-[#DFE4ED]',
+                      `rb:p-[16px_24px] rb:rounded-lg`,
+                      'rb:border rb:border-[#DFE4ED]',
                       {
                         'rb:shadow-[inset_4px_0px_0px_0px_#155EEF]': logIndex % 3 === 0,
                         'rb:shadow-[inset_4px_0px_0px_0px_#369F21]': logIndex % 3 === 1,
@@ -153,14 +204,14 @@ const MemoryConversation: FC = () => {
                       }
                     )}
                   >
-                    <div className="rb:text-[16px] rb:font-medium rb:leading-[22px] rb:mb-[24px]">{log.title}</div>
+                    <div className="rb:text-[16px] rb:font-medium rb:leading-[22px] rb:mb-6">{log.title}</div>
                     {log.type === 'problem_split' && Array.isArray(log.data) && log.data.length > 0 
                       ? <Space size={12} direction="vertical" style={{width: '100%'}}>
                         {log.data.map(vo => (
                           <ContentWrapper key={vo.id}>
                             <>
                               <div className="rb:font-medium rb:text-[#212332]">{vo.id}. {vo.question}</div>
-                              <div className="rb:mt-[8px] rb:text-[12px] rb:text-[#5B6167]">{vo.reason}</div>
+                              <div className="rb:mt-2 rb:text-[12px] rb:text-[#5B6167]">{vo.reason}</div>
                             </>
                           </ContentWrapper>
                         ))}
@@ -172,7 +223,7 @@ const MemoryConversation: FC = () => {
                             <>
                               <div className="rb:font-medium rb:text-[#212332]">{key}</div>
                               {(log.data as Record<string, string[]>)[key].map((item, index) => (
-                                <div key={index} className="rb:mt-[8px] rb:text-[#5B6167] rb:text-[12px]">{item}</div>
+                                <div key={index} className="rb:mt-2 rb:text-[#5B6167] rb:text-[12px]">{item}</div>
                               ))}
                             </>
                           </ContentWrapper>
@@ -180,15 +231,15 @@ const MemoryConversation: FC = () => {
                       </Space>
                       : log.type === 'search_result' && log.raw_results
                       ? <ContentWrapper>
-                        <div className="rb:font-medium rb:text-[#212332] rb:mb-[8px]">{log.query}</div>
-                          <div className='rb:mt-[8px] rb:text-[12px] rb:text-[#5B6167]'>
+                        <div className="rb:font-medium rb:text-[#212332] rb:mb-2">{log.query}</div>
+                          <div className='rb:mt-2 rb:text-[12px] rb:text-[#5B6167]'>
                             {typeof log.raw_results === 'string'
                               ? <Markdown content={log.raw_results} />
                               : <>
-                                {log.raw_results.reranked_results?.statements.length > 0 && log.raw_results.reranked_results?.statements.map((item, index) => (
+                                {log.raw_results.reranked_results?.statements.length > 0 && log.raw_results.reranked_results?.statements.map((item: { statement: string }, index: number) => (
                                   <div key={index}>{item.statement}</div>
                                 ))}
-                                {log.raw_results.reranked_results?.summaries.length > 0 && log.raw_results.reranked_results?.summaries.map((item, index) => (
+                                {log.raw_results.reranked_results?.summaries.length > 0 && log.raw_results.reranked_results?.summaries.map((item: { content: string }, index: number) => (
                                   <div key={index}>{item.content}</div>
                                 ))}
                               </> 
@@ -200,26 +251,26 @@ const MemoryConversation: FC = () => {
                       : log.type === 'verification'
                       ? <ContentWrapper>
                         <div className="rb:font-medium rb:text-[#212332]">{log.query}</div>
-                        <div className="rb:mt-[8px] rb:text-[12px] rb:text-[#5B6167]">{log.reason}</div>
-                        <div className="rb:mt-[8px] rb:text-[12px] rb:text-[#5B6167]">{log.result}</div>
+                        <div className="rb:mt-2 rb:text-[12px] rb:text-[#5B6167]">{log.reason}</div>
+                        <div className="rb:mt-2 rb:text-[12px] rb:text-[#5B6167]">{log.result}</div>
                       </ContentWrapper>
                       : log.type === 'output_type'
                       ? <ContentWrapper>
-                        <div className="rb:font-medium rb:text-[#212332] rb:mb-[8px]">{log.query}</div>
+                        <div className="rb:font-medium rb:text-[#212332] rb:mb-2">{log.query}</div>
                         <div className="rb:text-[12px] rb:text-[#5B6167]">{log.summary}</div>
                       </ContentWrapper>
                       : log.type === 'input_summary' && log.raw_results
                       ? <ContentWrapper>
-                          <div className="rb:font-medium rb:text-[#212332] rb:mb-[8px]">{log.query}</div>
-                          <div className="rb:font-medium rb:text-[12px] rb:text-[#5B6167] rb:mb-[8px]">{log.summary}</div>
-                          <div className='rb:mt-[8px] rb:text-[12px] rb:text-[#5B6167]'>
+                          <div className="rb:font-medium rb:text-[#212332] rb:mb-2">{log.query}</div>
+                          <div className="rb:font-medium rb:text-[12px] rb:text-[#5B6167] rb:mb-2">{log.summary}</div>
+                          <div className='rb:mt-2 rb:text-[12px] rb:text-[#5B6167]'>
                             {typeof log.raw_results === 'string'
                               ? <Markdown content={log.raw_results} />
                               : <>
-                                {log.raw_results.reranked_results?.statements.length > 0 && log.raw_results.reranked_results?.statements.map((item, index) => (
+                                {log.raw_results.reranked_results?.statements.length > 0 && log.raw_results.reranked_results?.statements.map((item: { statement: string; } , index: number) => (
                                   <div key={index}>{item.statement}</div>
                                 ))}
-                                {log.raw_results.reranked_results?.summaries.length > 0 && log.raw_results.reranked_results?.summaries.map((item, index) => (
+                                {log.raw_results.reranked_results?.summaries.length > 0 && log.raw_results.reranked_results?.summaries.map((item: { content: string; }, index: number) => (
                                   <div key={index}>{item.content}</div>
                                 ))}
                               </> 

web/src/views/MemoryExtractionEngine/components/Card.tsx

@@ -12,6 +12,7 @@ interface CardProps {
   expanded?: boolean;
   handleExpand?: (type: string) => void;
   className?: string;
+  headerClassName?: string;
   bodyClassName?: string;
 }
 
@@ -23,6 +24,7 @@ const Card: FC<CardProps> = ({
   expanded,
   handleExpand,
   className,
+  headerClassName,
   bodyClassName,
 }) => {
   const { t } = useTranslation()
@@ -37,12 +39,13 @@ const Card: FC<CardProps> = ({
           onClick={() => handleExpand(type)}
         >
           {expanded ? t('common.foldUp') : t('common.expanded')}
-          <img src={down} className={clsx("rb:w-[16px] rb:h-[16px] rb:ml-[4px]", {
+          <img src={down} className={clsx("rb:w-4 rb:h-4 rb:ml-1", {
             'rb:rotate-180': !expanded,
           })} />
         </div>
       )}
       className={className}
+      headerClassName={headerClassName}
       bodyClassName={bodyClassName}
     >
       {(expanded || !(type && handleExpand)) && children}

web/src/views/MemoryExtractionEngine/components/Result.tsx

@@ -0,0 +1,426 @@
+import { type FC, useState } from 'react'
+import { useParams } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+import { Space, Button, Progress } from 'antd'
+import { ExclamationCircleFilled, CheckCircleFilled, ClockCircleOutlined, LoadingOutlined } from '@ant-design/icons'
+import clsx from 'clsx'
+import Card from './Card'
+import RbCard from '@/components/RbCard/Card'
+import RbAlert from '@/components/RbAlert'
+import type { TestResult } from '../types'
+import { pilotRunMemoryExtractionConfig } from '@/api/memory'
+import { type SSEMessage } from '@/utils/stream'
+import Tag, { type TagProps } from '@/components/Tag'
+import Markdown from '@/components/Markdown'
+import { groupDataByType } from '../constant'
+import type { AnyObject } from 'antd/es/_util/type';
+
+const resultObj = {
+  extractTheNumberOfEntities: 'entities.extracted_count',
+  numberOfEntityDisambiguation: 'disambiguation.block_count',
+  memoryFragments: 'memory.chunks',
+  numberOfRelationalTriples: 'triplets.count'
+}
+interface ResultProps {
+  loading: boolean;
+  handleSave: () => void;
+}
+interface ModuleItem {
+  status: 'pending' | 'processing' | 'completed' | 'failed';
+  data: any[],
+  result: any,
+  start_at?: number;
+  end_at?: number;
+}
+const tagColors: {
+  [key: string]:  TagProps['color']
+} = {
+  pending: 'default',
+  processing: 'processing',
+  completed: 'success',
+  failed: 'error'
+}
+const initObj = {
+  data: [],
+  status: 'pending',
+  result: null
+}
+
+const Result: FC<ResultProps> = ({ loading, handleSave }) => {
+  const { t } = useTranslation();
+  const { id } = useParams()
+  const [runLoading, setRunLoading] = useState(false)
+  const [testResult, setTestResult] = useState<TestResult>({} as TestResult)
+
+  const [textPreprocessing, setTextPreprocessing] = useState<ModuleItem>(initObj as ModuleItem)
+  const [knowledgeExtraction, setKnowledgeExtraction] = useState<ModuleItem>(initObj as ModuleItem)
+  const [creatingNodesEdges, setCreatingNodesEdges] = useState<ModuleItem>(initObj as ModuleItem)
+  const [deduplication, setDeduplication] = useState<ModuleItem>(initObj as ModuleItem)
+
+  const handleRun = () => {
+    if(!id) return
+    setTextPreprocessing({...initObj} as ModuleItem)
+    setKnowledgeExtraction({...initObj} as ModuleItem)
+    setCreatingNodesEdges({...initObj} as ModuleItem)
+    setDeduplication({...initObj} as ModuleItem)
+    setTestResult({} as TestResult)
+    const handleStreamMessage = (list: SSEMessage[]) => {
+    
+      list.forEach((data: AnyObject) => {
+        switch(data.event) {
+          case 'text_preprocessing': // 开始预处理文本
+            setTextPreprocessing(prev => ({
+              ...prev,
+              status: 'processing',
+              start_at: data.data.time
+            }))
+            break
+          case 'text_preprocessing_result': // 预处理文本分块中
+            setTextPreprocessing(prev => ({
+              ...prev,
+              data: [...prev.data, data.data?.data]
+            }))
+            break
+          case 'text_preprocessing_complete': // 预处理文本完成
+            setTextPreprocessing(prev => ({
+              ...prev,
+              result: data.data?.data,
+              status: 'completed',
+              end_at: data.data.time
+            }))
+            break
+          case 'knowledge_extraction': // 开始知识抽取
+            setKnowledgeExtraction(prev => ({
+              ...prev,
+              status: 'processing',
+              start_at: data.data.time
+            }))
+            break
+          case 'knowledge_extraction_result': // 知识抽取中
+            setKnowledgeExtraction(prev => ({
+              ...prev,
+              data: [...prev.data, data.data?.data]
+            }))
+            break
+          case 'knowledge_extraction_complete': // 知识抽取完成
+            setKnowledgeExtraction(prev => ({
+              ...prev,
+              result: data.data?.data,
+              status: 'completed',
+              end_at: data.data.time
+            }))
+            break
+          case 'creating_nodes_edges': // 开始创建节点和边
+            setCreatingNodesEdges(prev => ({
+              ...prev,
+              status: 'processing',
+              start_at: data.data.time
+            }))
+            break
+          case 'creating_nodes_edges_result': // 创建节点和边中
+            setCreatingNodesEdges(prev => ({
+              ...prev,
+              data: [...prev.data, data.data?.data]
+            }))
+            break
+          case 'creating_nodes_edges_complete': // 创建节点和边完成
+            setCreatingNodesEdges(prev => ({
+              ...prev,
+              result: data.data?.data,
+              status: 'completed',
+              end_at: data.data.time
+            }))
+            break
+          case 'deduplication': // 开始去重消歧
+            setDeduplication(prev => ({
+              ...prev,
+              status: 'processing',
+              start_at: data.data.time
+            }))
+            break
+          case 'dedup_disambiguation_result': // 去重消歧中
+            setDeduplication(prev => ({
+              ...prev,
+              data: [...prev.data, data.data.data]
+            }))
+            break
+          case 'dedup_disambiguation_complete': // 去重消歧完成
+            setDeduplication(prev => ({
+              ...prev,
+              result: data.data?.data,
+              status: 'completed',
+              end_at: data.data.time
+            }))
+            break
+          case 'generating_results': // 开始生成结果
+            break
+          case 'result': // 结果
+            setTestResult(data.data?.extracted_result)
+            break
+        }
+      })
+    }
+    setRunLoading(true)
+    pilotRunMemoryExtractionConfig({
+      config_id: id,
+      dialogue_text: t('memoryExtractionEngine.exampleText'),
+    }, handleStreamMessage)
+    .finally(() => {
+      setRunLoading(false)
+    })
+  }
+  const completedNum = [textPreprocessing, knowledgeExtraction, creatingNodesEdges, deduplication].filter(item => item.status === 'completed').length
+  const deduplicationData = groupDataByType(deduplication.data, 'result_type')
+
+  const formatTag = (status: string) => {
+    return (
+      <Tag color={tagColors[status]}>
+        {status === 'pending' && <ClockCircleOutlined className="rb:mr-1" />}
+        {status === 'processing' && <LoadingOutlined spin className="rb:mr-1" />}
+        {t(`memoryExtractionEngine.status.${status}`)}
+      </Tag>
+    )
+  }
+  const formatTime = (data: ModuleItem, color?: string) => {
+    if (typeof data.end_at === 'number' && typeof data.start_at === 'number') {
+      return <div className={`rb:mt-3 rb:text-[${color ?? '#155EEF'}]`}>{t('memoryExtractionEngine.time')}{data.end_at - data.start_at}ms</div>
+    }
+    return null
+  }
+  const lowercaseFirst = (str: string) => str.charAt(0).toLowerCase() + str.slice(1)
+  return (
+    <Card
+      title={t('memoryExtractionEngine.exampleMemoryExtractionResults')}
+      subTitle={t('memoryExtractionEngine.exampleMemoryExtractionResultsSubTitle')}
+      className="rb:min-h-[calc(100vh-330px)]!"
+      headerClassName="rb:pb-0! rb:pt-4!"
+      bodyClassName="rb:min-h-[calc(100vh-388px)] rb:p-[16px_20px]!"
+    >
+      <div className="rb:min-h-[calc(100vh-480px)] rb:overflow-y-auto">
+        {runLoading
+          ? <>
+            <RbAlert color="blue" icon={<ExclamationCircleFilled />} className="rb:mb-3.5">
+              {t('memoryExtractionEngine.processing')}
+            </RbAlert>
+            {/* 整体进度 */}
+            <div className="rb:mb-2">
+              <div className="rb:flex rb:items-center rb:justify-between rb:text-[12px] rb:leading-4 rb:font-regular">
+                {t('memoryExtractionEngine.overallProgress')}
+                <span className="rb:text-[#155eef]">{`${completedNum}/4`}</span>
+              </div>
+              <Progress percent={completedNum * 100/4} showInfo={false} />
+            </div>
+          </>
+          : !testResult || Object.keys(testResult).length === 0
+          ? <RbAlert color="orange" icon={<ExclamationCircleFilled />} className="rb:mb-3.5">
+            {t('memoryExtractionEngine.warning')}
+          </RbAlert>
+          : <RbAlert color="green" icon={<ExclamationCircleFilled />} className="rb:mb-3.5">
+              {t('memoryExtractionEngine.success')}
+            </RbAlert>
+        }
+        <Space size={16} direction="vertical" style={{ width: '100%' }}>
+          {/* 文本预处理 */}
+          <RbCard
+            title={t(`memoryExtractionEngine.text_preprocessing`)}
+            extra={formatTag(textPreprocessing.status)}
+            headerType="borderL"
+            headerClassName="rb:before:bg-[#155EEF]!"
+          >
+            {textPreprocessing.data.map((vo, index) => (
+              <div key={index} className="rb:mb-3 rb:text-[12px] rb:text-[#5B6167] rb:leading-4 rb:font-regular">
+                <Markdown content={'-' + t('memoryExtractionEngine.fragment') + vo.chunk_index + ': ' + (vo.content.startsWith('\n') ? vo.content : '\n' + vo.content)} />
+              </div>
+            ))}
+            {formatTime(textPreprocessing)}
+            {textPreprocessing.result &&
+              <RbAlert color="blue" icon={<CheckCircleFilled />} className="rb:mt-3">
+                {t('memoryExtractionEngine.text_preprocessing_desc', { count: textPreprocessing.result.total_chunks })}, 
+                {t('memoryExtractionEngine.chunkerStrategy')}: {t(`memoryExtractionEngine.${lowercaseFirst(textPreprocessing.result.chunker_strategy)}`)}
+              </RbAlert>
+            }
+          </RbCard>
+          {/* 知识抽取 */}
+          <RbCard
+            title={t(`memoryExtractionEngine.knowledge_extraction`)}
+            extra={formatTag(knowledgeExtraction.status)}
+            headerType="borderL"
+            headerClassName="rb:before:bg-[#155EEF]!"
+          >
+            {knowledgeExtraction.data.map(vo => 
+              <div key={vo.statement_index} className="rb:mb-3 rb:text-[12px] rb:text-[#5B6167] rb:leading-4 rb:font-regular">{vo.statement}</div>
+            )}
+            {formatTime(knowledgeExtraction)}
+            {knowledgeExtraction.result && <RbAlert color="blue" icon={<CheckCircleFilled />} className="rb:mt-3">
+              {t('memoryExtractionEngine.knowledge_extraction_desc', {
+                entities: knowledgeExtraction.result.entities_count,
+                statements: knowledgeExtraction.result.statements_count,
+                temporal_ranges_count: knowledgeExtraction.result.temporal_ranges_count,
+                triplets: knowledgeExtraction.result.triplets_count
+              })}
+            </RbAlert>}
+          </RbCard>
+          {/* 创建实体关系 */}
+          <RbCard
+            title={t(`memoryExtractionEngine.creating_nodes_edges`)}
+            extra={formatTag(creatingNodesEdges.status)}
+            headerType="borderL"
+            headerClassName="rb:before:bg-[#9C6FFF]!"
+          >
+            {creatingNodesEdges.data?.map((vo, index) => (
+              <div key={index} className="rb:mb-3 rb:text-[12px] rb:text-[#5B6167] rb:leading-4 rb:font-regular">
+                {vo?.result_type === 'entity_nodes_creation'
+                  ? <>{vo.type_display_name}: {vo.entity_names.join(', ')}</>
+                  : <>{vo?.relationship_text}</>
+                }
+              </div>
+            ))}
+            {formatTime(creatingNodesEdges, '#9C6FFF')}
+            {creatingNodesEdges.result && <RbAlert color="blue" icon={<CheckCircleFilled />} className="rb:mt-3">
+              {t('memoryExtractionEngine.creating_nodes_edges_desc', {num: creatingNodesEdges.result.entity_entity_edges_count})}
+            </RbAlert>}
+          </RbCard>
+          {/* 去重消歧 */}
+          <RbCard
+            title={t(`memoryExtractionEngine.deduplication`)}
+            extra={formatTag(deduplication.status)}
+            headerType="borderL"
+            headerClassName="rb:before:bg-[#9C6FFF]!"
+          >
+            {Object.keys(deduplicationData).length > 0 && Object.keys(deduplicationData).map(key => {
+              return deduplicationData[key].map((vo, index) => (
+                <div key={index} className="rb:mb-3 rb:text-[12px] rb:text-[#5B6167] rb:leading-4 rb:font-regular">
+                  {vo.message}
+                </div>
+              ))
+            })}
+            {formatTime(deduplication, '#9C6FFF')}
+            {deduplication.result && <RbAlert color="blue" icon={<CheckCircleFilled />} className="rb:mt-3">
+              {t('memoryExtractionEngine.deduplication_desc', { count: deduplication.result.summary.total_merges })}<br />
+            </RbAlert>}
+          </RbCard>
+
+          {testResult && Object.keys(testResult).length > 0 && resultObj && Object.keys(resultObj).length > 0 &&
+            <RbCard>
+              <div className="rb:grid rb:grid-cols-2 rb:gap-[40px_57px]">
+                {Object.keys(resultObj).map((key, index) => {
+                  const keys = (resultObj as Record<string, string>)[key].split('.')
+                  return (
+                  <div key={index}>
+                    <div className="rb:text-[24px] rb:leading-[30px] rb:font-extrabold">{(testResult?.[keys[0] as keyof TestResult] as any)?.[keys[1]]}</div>
+                    <div className="rb:text-[12px] rb:text-[#5B6167] rb:leading-4 rb:font-regular">{t(`memoryExtractionEngine.${key}`)}</div>
+                    <div className="rb:mt-1 rb:text-[12px] rb:text-[#369F21] rb:leading-3.5 rb:font-regular">
+                      {}
+                      {key === 'extractTheNumberOfEntities' && testResult.dedup
+                        ? t(`memoryExtractionEngine.${key}Desc`, {
+                          num: testResult.dedup.total_merged_count,
+                          exact: testResult.dedup.breakdown.exact,
+                          fuzzy: testResult.dedup.breakdown.fuzzy,
+                          llm: testResult.dedup.breakdown.llm,
+                        })
+                        : key === 'numberOfEntityDisambiguation' && testResult.disambiguation
+                        ? t(`memoryExtractionEngine.${key}Desc`, { num: testResult.disambiguation.effects?.length, block_count: testResult.disambiguation.block_count })
+                        : key === 'numberOfRelationalTriples' && testResult.triplets
+                        ? t(`memoryExtractionEngine.${key}Desc`, { num: testResult.triplets.count })
+                        :t(`memoryExtractionEngine.${key}Desc`)
+                      }
+                    </div>
+                  </div>
+                )})}
+              </div>
+            </RbCard>
+          }
+          
+          {testResult?.dedup?.impact && testResult.dedup.impact?.length > 0 &&
+            <RbCard
+              title={t('memoryExtractionEngine.entityDeduplicationImpact')}
+              headerType="borderL"
+              headerClassName="rb:before:bg-[#155EEF]!"
+            >
+              <div className="rb:text-[12px] rb:text-[#5B6167] rb:font-medium rb:leading-4">{t('memoryExtractionEngine.identifyDuplicates')}</div>
+              {testResult.dedup.impact.map((item, index) => (
+                <div key={index} className="rb:pl-2 rb:mt-2 rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-4">
+                  -{t('memoryExtractionEngine.identifyDuplicatesDesc', { ...item })}
+                </div>
+              ))}
+
+              <RbAlert color="blue" icon={<CheckCircleFilled />} className="rb:mt-3">
+                {t('memoryExtractionEngine.entityDeduplicationImpactDesc', { count: testResult.dedup.impact.length })}
+              </RbAlert>
+            </RbCard>
+          }
+          
+          {testResult?.disambiguation && testResult.disambiguation?.effects?.length > 0 &&
+            <RbCard
+              title={t('memoryExtractionEngine.theEffectOfEntityDisambiguationLLMDriven')}
+              headerType="borderL"
+              headerClassName="rb:before:bg-[#155EEF]!"
+            >
+              {testResult.disambiguation.effects.map((item, index) => (
+                <div key={index} className={clsx("rb:text-[12px] rb:text-[#5B6167] rb:leading-4", {
+                  'rb:mt-4': index > 0,
+                })}>
+                  <div className="rb:font-medium rb:mb-2">Disagreement Case {index +1}:</div>
+                  -{item.left.name}({item.left.type}) vs {item.right.name}({item.right.type}) → <span className="rb:text-[#369F21]">{item.result}</span>
+                </div>
+              ))}
+
+              <RbAlert color="blue" icon={<CheckCircleFilled />} className="rb:mt-3">
+                {t('memoryExtractionEngine.entityDeduplicationImpactDesc', { count: testResult.dedup.impact.length })}
+              </RbAlert>
+            </RbCard>
+          }
+          
+          {testResult?.core_entities && testResult?.core_entities.length > 0 &&
+            <RbCard
+              title={t('memoryExtractionEngine.coreEntitiesAfterDedup')}
+              headerType="borderL"
+              headerClassName="rb:before:bg-[#369F21]!"
+            >
+              <div className="rb:grid rb:grid-cols-2 rb:gap-6">
+                {testResult.core_entities.map((item, idx) => (
+                  <div key={idx} className="rb:text-[12px]">
+                    <div className="rb:text-[#369F21] rb:font-medium">{item.type}({item.count})</div>
+
+                    <div>
+                      {item.entities.map((entity, index) => (
+                        <div key={index} className="rb:text-[#5B6167] rb:font-regular rb:leading-4">
+                          -{entity}
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </RbCard>
+          }
+          
+          {testResult?.triplet_samples && testResult?.triplet_samples.length > 0 &&
+            <RbCard
+              title={t('memoryExtractionEngine.extractRelationalTriples')}
+              headerType="borderL"
+              headerClassName="rb:before:bg-[#9C6FFF]!"
+            >
+              <Space size={8} direction="vertical" className="rb:w-full">
+                {testResult.triplet_samples.map((item, index) => (
+                  <div key={index} className="rb:text-[12px]">
+                    -({item.subject}, <span className="rb:text-[#9C6FFF] rb:font-medium">{item.predicate}</span>, {item.object})
+                  </div>
+                ))}
+              </Space>
+              <RbAlert color="purple" icon={<CheckCircleFilled />} className="rb:mt-3">
+                {t('memoryExtractionEngine.extractRelationalTriplesDesc', { count: testResult.triplet_samples.length })}
+              </RbAlert>
+            </RbCard>
+          }
+        </Space>
+      </div>
+
+      <div className="rb:grid rb:grid-cols-2 rb:gap-4 rb:mt-5">
+        <Button block loading={loading} onClick={handleSave}>{t('common.save')}</Button>
+        <Button block type="primary" loading={runLoading} onClick={handleRun}>{t('memoryExtractionEngine.debug')}</Button>
+      </div>
+    </Card>
+  )
+}
+export default Result

web/src/views/MemoryExtractionEngine/index.tsx

@@ -1,18 +1,16 @@
 import { type FC, useState, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useParams } from 'react-router-dom'
-import { Row, Col, Space, Switch, Select, InputNumber, Slider, Button, App, Skeleton, Form } from 'antd'
-import { ExclamationCircleFilled, CheckCircleFilled } from '@ant-design/icons'
+import { Row, Col, Space, Switch, Select, InputNumber, Slider, App, Form } from 'antd'
 import clsx from 'clsx'
 import Card from './components/Card'
-import RbCard from '@/components/RbCard/Card'
-import RbAlert from '@/components/RbAlert'
-import Empty from '@/components/Empty'
-import type { ConfigForm, ConfigVo, Variable, TestResult } from './types'
-import { getMemoryExtractionConfig, updateMemoryExtractionConfig, pilotRunMemoryExtractionConfig } from '@/api/memory'
+import type { ConfigForm, Variable } from './types'
+import { getMemoryExtractionConfig, updateMemoryExtractionConfig } from '@/api/memory'
 import Markdown from '@/components/Markdown'
 import { getModelList } from '@/api/models';
 import type { Model } from '@/views/ModelManagement/types'
+import { configList } from './constant'
+import Result from './components/Result'
 
 const keys = [
   // 'example', 
@@ -20,229 +18,16 @@ const keys = [
   'arrangementLayerModule'
 ]
 
-const configList: ConfigVo[] = [
-  {
-    type: 'storageLayerModule',
-    data: [
-      {
-        title: 'entityDeduplicationDisambiguation',
-        list: [
-          {
-            label: 'enableLlmDedupBlockwise',
-            variableName: 'enable_llm_dedup_blockwise',
-            control: 'button', // switch
-            type: 'tinyint',
-          },
-          {
-            label: 'enableLlmDisambiguation',
-            variableName: 'enable_llm_disambiguation',
-            control: 'button',
-            type: 'tinyint',
-          },
-          {
-            label: 'tNameStrict',
-            control: 'slider',
-            variableName: 't_name_strict',
-            type: 'decimal',
-          },
-          {
-            label: 'tTypeStrict',
-            control: 'slider',
-            variableName: 't_type_strict',
-            type: 'decimal',
-          },
-          {
-            label: 'tOverall',
-            control: 'slider',
-            variableName: 't_overall',
-            type: 'decimal',
-          },
-        ]
-      },
-      // 语义锚点标注
-      {
-        title: 'semanticAnchorAnnotationModule',
-        list: [
-          // 句子提取颗粒度
-          {
-            label: 'statementGranularity',
-            variableName: 'statement_granularity',
-            control: 'slider',
-            type: 'decimal',
-            max: 3,
-            min: 1,
-            step: 1,
-            meaning: 'statementGranularityDesc',
-          },
-          // 是否包含对话上下文
-          {
-            label: 'includeDialogueContext',
-            variableName: 'include_dialogue_context',
-            control: 'button', // switch
-            type: 'tinyint',
-            meaning: 'includeDialogueContextDesc'
-          },
-          // 上下文文字上限
-          {
-            label: 'maxDialogueContextChars',
-            variableName: 'max_context',
-            control: 'inputNumber',
-            min: 100,
-            type: 'decimal',
-            meaning: 'maxDialogueContextCharsDesc',
-          },
-        ]
-      },
-    ]
-  },
-  {
-    type: 'arrangementLayerModule',
-    data: [
-      {
-        title: 'queryMode',
-        list: [
-          {
-            label: 'deepRetrieval',
-            variableName: 'deep_retrieval',
-            control: 'button',
-            type: 'tinyint',
-            meaning: 'deepRetrievalMeaning',
-          },
-        ]
-      },
-      {
-        title: 'dataPreprocessing',
-        list: [
-          {
-            label: 'chunkerStrategy',
-            variableName: 'chunker_strategy',
-            control: 'select',
-            type: 'enum',
-            options: [
-              { label: 'recursiveChunker', value: 'RecursiveChunker' }, // 递归分块
-              { label: 'tokenChunker', value: 'TokenChunker' }, // token 分块
-              { label: 'semanticChunker', value: 'SemanticChunker' }, // 语义分块
-              { label: 'neuralChunker', value: 'NeuralChunker' }, // 神经网络分块
-              { label: 'hybridChunker', value: 'HybridChunker' }, // 混合分块
-              { label: 'llmChunker', value: 'LLMChunker' }, // LLM 分块
-              { label: 'sentenceChunker', value: 'SentenceChunker' }, // 句子分块
-              { label: 'lateChunker', value: 'LateChunker' }, // 延迟分块
-            ],
-            meaning: 'chunkerStrategyDesc',
-          },
-        ]
-      },
-      // 智能语义剪枝
-      {
-        title: 'intelligentSemanticPruning',
-        list: [
-          // 智能语义剪枝功能
-          {
-            label: 'intelligentSemanticPruningFunction',
-            variableName: 'pruning_enabled',
-            control: 'button',
-            type: 'tinyint',
-            meaning: 'intelligentSemanticPruningFunctionDesc',
-          },
-          // 智能语义剪枝场景
-          {
-            label: 'intelligentSemanticPruningScene',
-            variableName: 'pruning_scene',
-            control: 'select',
-            type: 'enum',
-            options: [
-              { label: 'education', value: 'education' },
-              { label: 'online_service', value: 'online_service' },
-              { label: 'outbound', value: 'outbound' },
-            ],
-            meaning: 'intelligentSemanticPruningSceneDesc',
-          },
-          // 智能语义剪枝阈值
-          {
-            label: 'intelligentSemanticPruningThreshold',
-            control: 'slider',
-            variableName: 'pruning_threshold',
-            type: 'decimal',
-            max: 0.9,
-            min: 0,
-            step: 0.1,
-            meaning: 'intelligentSemanticPruningThresholdDesc',
-          },
-        ]
-      },
-      // 自我反思引擎
-      {
-        title: 'selfReflexionEngine',
-        list: [
-          // 是否启用反思引擎
-          {
-            label: 'enableSelfReflexion',
-            variableName: 'enable_self_reflexion',
-            control: 'button',
-            type: 'tinyint',
-          },
-          // 迭代周期
-          {
-            label: 'iterationPeriod',
-            variableName: 'iteration_period',
-            control: 'select',
-            type: 'enum',
-            options: [
-              { label: 'oneHour', value: '1' },
-              { label: 'threeHours', value: '3' },
-              { label: 'sixHours', value: '6' },
-              { label: 'twelveHours', value: '12' },
-              { label: 'daily', value: '24' },
-            ],
-            meaning: 'iterationPeriodDesc',
-          },
-          // 反思范围
-          {
-            label: 'reflexionRange',
-            variableName: 'reflexion_range',
-            control: 'select',
-            type: 'enum',
-            options: [
-              { label: 'retrieval', value: 'retrieval' },
-              { label: 'database', value: 'database' },
-            ],
-            meaning: 'reflexionRangeDesc',
-          },
-          // 反思基线
-          {
-            label: 'reflectOnTheBaseline',
-            variableName: 'baseline',
-            control: 'select',
-            type: 'enum',
-            options: [
-              { label: 'basedOnTime', value: 'TIME' },
-              { label: 'basedOnFacts', value: 'FACT' },
-              { label: 'basedOnFactsAndTime', value: 'TIME-FACT' },
-            ],
-          },
-        ]
-      },
-    ]
-  }
-]
-
-const resultObj = {
-  extractTheNumberOfEntities: 'entities.extracted_count',
-  numberOfEntityDisambiguation: 'disambiguation.block_count',
-  memoryFragments: 'memory.chunks',
-  numberOfRelationalTriples: 'triplets.count'
-}
-
 const ConfigDesc: FC<{ config: Variable, className?: string }> = ({config, className}) => {
   const { t } = useTranslation();
   return (
     <div className={className}>
-      <Space size={8} className={clsx("rb:mt-[4px] rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-[16px] ")}>
+      <Space size={8} className={clsx("rb:mt-1 rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-4 ")}>
         {config.variableName && <span className="rb:font-regular">{t('memoryExtractionEngine.variableName')}: {config.variableName}</span>}
         {config.control && <span className="rb:font-regular">{t('memoryExtractionEngine.control')}: {t(`memoryExtractionEngine.${config.control}`)}</span>}
         {config.type && <span className="rb:font-regular">{t('memoryExtractionEngine.type')}: {config.type}</span>}
       </Space>
-      {config.meaning && <div className={clsx("rb:mt-[4px] rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-[16px] ")}>{t('memoryExtractionEngine.Meaning')}: {t(`memoryExtractionEngine.${config.meaning}`)}</div>}
+      {config.meaning && <div className={clsx("rb:mt-1 rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-4 ")}>{t('memoryExtractionEngine.Meaning')}: {t(`memoryExtractionEngine.${config.meaning}`)}</div>}
     </div>
   )
 }
@@ -253,12 +38,9 @@ const MemoryExtractionEngine: FC = () => {
   const [expandedKeys, setExpandedKeys] = useState<string[]>(keys)
   const [form] = Form.useForm<ConfigForm>()
   const [modelForm] = Form.useForm()
-  // const [data, setData] = useState<ConfigForm>()
   const modelValues = Form.useWatch([], modelForm)
   const values = Form.useWatch<ConfigForm>([], form)
-  const [testResult, setTestResult] = useState<TestResult | null>(null)
   const [loading, setLoading] = useState(false)
-  const [runLoading, setRunLoading] = useState(false)
   const [iterationPeriodDisabled, setIterationPeriodDisabled] = useState(false)
   const [modelList, setModelList] = useState<Model[]>([])
 
@@ -305,8 +87,6 @@ const MemoryExtractionEngine: FC = () => {
     if (id) {
       getConfig()
       getModels()
-      const lastResult = localStorage.getItem(`${id}_testResult`)
-      setTestResult(lastResult ? JSON.parse(lastResult) : null)
     }
   }, [id])
 
@@ -332,35 +112,11 @@ const MemoryExtractionEngine: FC = () => {
       setLoading(false)
     })
   }
-  const handleRun = () => {
-    if (!id) {
-      return
-    }
-    setRunLoading(true)
-    updateMemoryExtractionConfig({
-      ...values,
-      ...modelValues,
-      config_id: id,
-    }).then(() => {
-      pilotRunMemoryExtractionConfig({
-        config_id: id,
-        dialogue_text: t('memoryExtractionEngine.exampleText'),
-      }).then((res) => {
-        message.success(t('common.testSuccess'))
-        const response = res as { extracted_result: TestResult }
-        setTestResult(response.extracted_result || {})
-        localStorage.setItem(`${id}_testResult`, JSON.stringify(response.extracted_result || {}))
-      })
-      .finally(() => {
-        setRunLoading(false)
-      })
-    })
-  }
 
   return (
     <>
-      <div className="rb:text-[24px] rb:font-semibold rb:leading-[32px] rb:mb-[8px]">{t('memoryExtractionEngine.title')}</div>
-      <div className="rb:text-[#5B6167] rb:leading-[20px] rb:mb-[24px]">{t('memoryExtractionEngine.subTitle')}</div>
+      <div className="rb:text-[24px] rb:font-semibold rb:leading-8 rb:mb-2">{t('memoryExtractionEngine.title')}</div>
+      <div className="rb:text-[#5B6167] rb:leading-5 rb:mb-6">{t('memoryExtractionEngine.subTitle')}</div>
 
       <Row gutter={[16, 16]}>
         <Col span={12}>
@@ -388,12 +144,12 @@ const MemoryExtractionEngine: FC = () => {
         handleExpand={handleExpand}
       >
         {expandedKeys.includes('example') &&
-          <div className="rb:text-[14px] rb:text-[#5B6167] rb:font-regular rb:leading-[20px]">
+          <div className="rb:text-[14px] rb:text-[#5B6167] rb:font-regular rb:leading-5">
             <Markdown content={t('memoryExtractionEngine.exampleText')} />
           </div>
         }
       </Card>
-      <Row gutter={[16, 16]} className="rb:mt-[16px]">
+      <Row gutter={[16, 16]} className="rb:mt-4">
         <Col span={14}>
           <Form
             form={form}
@@ -412,8 +168,8 @@ const MemoryExtractionEngine: FC = () => {
                       <div 
                         key={vo.title} 
                         className={clsx(
-                          `rb:p-[16px_24px] rb:rounded-[8px]`,
-                          'rb:border-[1px] rb:border-[#DFE4ED]',
+                          `rb:p-[16px_24px] rb:rounded-lg`,
+                          'rb:border rb:border-[#DFE4ED]',
                           {
                             'rb:shadow-[inset_4px_0px_0px_0px_#155EEF]': index % 2 === 0,
                             'rb:shadow-[inset_4px_0px_0px_0px_#369F21]': index % 2 !== 0,
@@ -421,20 +177,20 @@ const MemoryExtractionEngine: FC = () => {
                         )}
                       >
                         <div className="rb:text-[16px] rb:font-medium rb:leading-[22px]">{t(`memoryExtractionEngine.${vo.title}`)}</div>
-                        <div className="rb:mt-[4px] rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-[16px]">{t(`memoryExtractionEngine.${vo.title}SubTitle`)}</div>
+                        <div className="rb:mt-1 rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-4">{t(`memoryExtractionEngine.${vo.title}SubTitle`)}</div>
 
                         {vo.list.map(config => (
                           <div key={config.label}>
                             {config.control === 'button' &&
-                              <div className="rb:flex rb:items-center rb:justify-between rb:mt-[24px]">
+                              <div className="rb:flex rb:items-center rb:justify-between rb:mt-6">
                                 <div>
-                                  <span className="rb:text-[14px] rb:font-medium rb:leading-[20px]">-{t(`memoryExtractionEngine.${config.label}`)}</span>
-                                  <ConfigDesc config={config} className="rb:ml-[8px]" />
+                                  <span className="rb:text-[14px] rb:font-medium rb:leading-5">-{t(`memoryExtractionEngine.${config.label}`)}</span>
+                                  <ConfigDesc config={config} className="rb:ml-2" />
                                 </div>
                                 <Form.Item
                                   name={config.variableName}
                                   valuePropName="checked"
-                                  className="rb:ml-[8px] rb:mb-[0px]!"
+                                  className="rb:ml-2 rb:mb-0!"
                                 >
                                   <Switch />
                                 </Form.Item>
@@ -442,10 +198,10 @@ const MemoryExtractionEngine: FC = () => {
                             }
                             {config.control === 'select' &&
                               <>
-                                <div className="rb:text-[14px] rb:font-medium rb:leading-[20px] rb:mt-[24px] rb:mb-[8px]">
+                                <div className="rb:text-[14px] rb:font-medium rb:leading-5 rb:mt-6 rb:mb-2">
                                   -{t(`memoryExtractionEngine.${config.label}`)}
                                 </div>
-                                <div className="rb:pl-[8px]">
+                                <div className="rb:pl-2">
                                   <Form.Item
                                     name={config.variableName}
                                   >
@@ -454,17 +210,17 @@ const MemoryExtractionEngine: FC = () => {
                                       options={config.options ? config.options.map(item => ({ ...item, label: t(`memoryExtractionEngine.${item.label}`) })) : []}
                                     />
                                   </Form.Item>
-                                  <ConfigDesc config={config} className="rb:mt-[-16px]!" />
+                                  <ConfigDesc config={config} className="rb:-mt-4!" />
                                 </div>
                               </>
                             }
                             {config.control === 'slider' &&
                               <>
-                                <div className="rb:text-[14px] rb:font-medium rb:leading-[20px] rb:mt-[24px] rb:mb-[8px]">
+                                <div className="rb:text-[14px] rb:font-medium rb:leading-5 rb:mt-6 rb:mb-2">
                                   -{t(`memoryExtractionEngine.${config.label}`)}
                                 </div>
-                                <div className="rb:pl-[8px]">
-                                  <ConfigDesc config={config} className="rb:mb-[10px]" />
+                                <div className="rb:pl-2">
+                                  <ConfigDesc config={config} className="rb:mb-2.5" />
                                   <Form.Item
                                     name={config.variableName}
                                   >
@@ -475,7 +231,7 @@ const MemoryExtractionEngine: FC = () => {
                                       step={config.step || 0.01}
                                     />
                                   </Form.Item>
-                                  <div className="rb:flex rb:items-center rb:justify-between rb:text-[#5B6167] rb:leading-[20px] rb:mt-[-26px]">
+                                  <div className="rb:flex rb:items-center rb:justify-between rb:text-[#5B6167] rb:leading-5 rb:mt-[-26px]">
                                     {config.min || 0}
                                     <span>{t('memoryExtractionEngine.CurrentValue')}: {values?.[config.variableName as keyof ConfigForm]}</span>
                                   </div>
@@ -484,16 +240,16 @@ const MemoryExtractionEngine: FC = () => {
                             }
                             {config.control === 'inputNumber' &&
                               <>
-                                <div className="rb:text-[14px] rb:font-medium rb:leading-[20px] rb:mt-[24px] rb:mb-[8px]">
+                                <div className="rb:text-[14px] rb:font-medium rb:leading-5 rb:mt-6 rb:mb-2">
                                   -{t(`memoryExtractionEngine.${config.label}`)}
                                 </div>
-                                <div className="rb:pl-[8px]">
+                                <div className="rb:pl-2">
                                   <Form.Item
                                     name={config.variableName}
                                   >
                                     <InputNumber min={config.min || 0} style={{ width: '100%' }} placeholder={t('common.pleaseEnter')} />
                                   </Form.Item>
-                                  <ConfigDesc config={config} className="rb:mt-[-16px]!" />
+                                  <ConfigDesc config={config} className="rb:-mt-4!" />
                                 </div>
                               </>
                             }
@@ -508,148 +264,10 @@ const MemoryExtractionEngine: FC = () => {
           </Form>
         </Col>
         <Col span={10}>
-          <Card
-            title={t('memoryExtractionEngine.exampleMemoryExtractionResults')}
-            subTitle={t('memoryExtractionEngine.exampleMemoryExtractionResultsSubTitle')}
-            className="rb:min-h-[calc(100vh-330px)]!"
-            bodyClassName="rb:min-h-[calc(100vh-388px)]"
-          >
-            <div 
-            className="rb:min-h-[calc(100vh-480px)] rb:overflow-y-auto"
-            >
-              {testResult && Object.keys(testResult).length > 0
-                ? <>
-                  <RbAlert color="orange" icon={<ExclamationCircleFilled />} className="rb:mb-[14px]">
-                    {t('memoryExtractionEngine.warning')}
-                  </RbAlert>
-
-                  <Space size={16} direction="vertical" style={{ width: '100%' }}>
-                    {resultObj && Object.keys(resultObj).length > 0 &&
-                      <RbCard>
-                        <div className="rb:grid rb:grid-cols-2 rb:gap-[40px_57px]">
-                          {Object.keys(resultObj).map(key => {
-                            const keys = (resultObj as Record<string, string>)[key].split('.')
-                            return (
-                            <div key={key}>
-                              <div className="rb:text-[24px] rb:leading-[30px] rb:font-extrabold">{testResult?.[keys[0] as keyof TestResult]?.[keys[1]]}</div>
-                              <div className="rb:text-[12px] rb:text-[#5B6167] rb:leading-[16px] rb:font-regular">{t(`memoryExtractionEngine.${key}`)}</div>
-                              <div className="rb:mt-[4px] rb:text-[12px] rb:text-[#369F21] rb:leading-[14px] rb:font-regular">
-                                {}
-                                {key === 'extractTheNumberOfEntities'
-                                  ? t(`memoryExtractionEngine.${key}Desc`, {
-                                    num: testResult.dedup.total_merged_count,
-                                    exact: testResult.dedup.breakdown.exact,
-                                    fuzzy: testResult.dedup.breakdown.fuzzy,
-                                    llm: testResult.dedup.breakdown.llm,
-                                  })
-                                  : key === 'numberOfEntityDisambiguation'
-                                  ? t(`memoryExtractionEngine.${key}Desc`, { num: testResult.disambiguation.effects?.length, block_count: testResult.disambiguation.block_count })
-                                  : key === 'numberOfRelationalTriples'
-                                  ? t(`memoryExtractionEngine.${key}Desc`, { num: testResult.triplets.count })
-                                  :t(`memoryExtractionEngine.${key}Desc`)
-                                }
-                              </div>
-                            </div>
-                          )})}
-                        </div>
-                      </RbCard>
-                    }
-                    
-                    {testResult?.dedup?.impact && testResult.dedup.impact?.length > 0 &&
-                      <RbCard
-                        title={t('memoryExtractionEngine.entityDeduplicationImpact')}
-                        headerType="borderL"
-                        headerClassName="rb:before:bg-[#155EEF]!"
-                      >
-                        <div className="rb:text-[12px] rb:text-[#5B6167] rb:font-medium rb:leading-[16px]">{t('memoryExtractionEngine.identifyDuplicates')}</div>
-                        {testResult.dedup.impact.map((item, index) => (
-                          <div key={index} className="rb:pl-[8px] rb:mt-[8px] rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-[16px]">
-                            -{t('memoryExtractionEngine.identifyDuplicatesDesc', { ...item })}
-                          </div>
-                        ))}
-
-                        <RbAlert color="blue" icon={<CheckCircleFilled />} className="rb:mt-[12px]">
-                          {t('memoryExtractionEngine.entityDeduplicationImpactDesc', { count: testResult.dedup.impact.length })}
-                        </RbAlert>
-                      </RbCard>
-                    }
-                    
-                    {testResult?.disambiguation && testResult.disambiguation?.effects?.length > 0 &&
-                      <RbCard
-                        title={t('memoryExtractionEngine.theEffectOfEntityDisambiguationLLMDriven')}
-                        headerType="borderL"
-                        headerClassName="rb:before:bg-[#155EEF]!"
-                      >
-                        {testResult.disambiguation.effects.map((item, index) => (
-                          <div key={index} className={clsx("rb:text-[12px] rb:text-[#5B6167] rb:leading-[16px]", {
-                            'rb:mt-[16px]': index > 0,
-                          })}>
-                            <div className="rb:font-medium rb:mb-[8px]">Disagreement Case {index +1}:</div>
-                            -{item.left.name}({item.left.type}) vs {item.right.name}({item.right.type}) → <span className="rb:text-[#369F21]">{item.result}</span>
-                          </div>
-                        ))}
-
-                        <RbAlert color="blue" icon={<CheckCircleFilled />} className="rb:mt-[12px]">
-                          {t('memoryExtractionEngine.entityDeduplicationImpactDesc', { count: testResult.dedup.impact.length })}
-                        </RbAlert>
-                      </RbCard>
-                    }
-                    
-                    {testResult?.core_entities && testResult?.core_entities.length > 0 &&
-                      <RbCard
-                        title={t('memoryExtractionEngine.coreEntitiesAfterDedup')}
-                        headerType="borderL"
-                        headerClassName="rb:before:bg-[#369F21]!"
-                      >
-                        <div className="rb:grid rb:grid-cols-2 rb:gap-[24px]">
-                          {testResult.core_entities.map(item => (
-                            <div key={item.type} className="rb:text-[12px]">
-                              <div className="rb:text-[#369F21] rb:font-medium">{item.type}({item.count})</div>
-
-                              <div>
-                                {item.entities.map((entity, index) => (
-                                  <div key={index} className="rb:text-[#5B6167] rb:font-regular rb:leading-[16px]">
-                                    -{entity}
-                                  </div>
-                                ))}
-                              </div>
-                            </div>
-                          ))}
-                        </div>
-                      </RbCard>
-                    }
-                    
-                    {testResult?.triplet_samples && testResult?.triplet_samples.length > 0 &&
-                      <RbCard
-                        title={t('memoryExtractionEngine.extractRelationalTriples')}
-                        headerType="borderL"
-                        headerClassName="rb:before:bg-[#9C6FFF]!"
-                      >
-                        <Space size={8} direction="vertical" className="rb:w-full">
-                          {testResult.triplet_samples.map((item, index) => (
-                            <div key={index} className="rb:text-[12px]">
-                              -({item.subject}, <span className="rb:text-[#9C6FFF] rb:font-medium">{item.predicate}</span>, {item.object})
-                            </div>
-                          ))}
-                        </Space>
-                        <RbAlert color="purple" icon={<CheckCircleFilled />} className="rb:mt-[12px]">
-                          {t('memoryExtractionEngine.extractRelationalTriplesDesc', { count: testResult.triplet_samples.length })}
-                        </RbAlert>
-                      </RbCard>
-                    }
-                  </Space>
-                </>
-                : loading
-                ? <Skeleton />
-                : <Empty className="rb:h-full" />
-              }
-            </div>
-
-            <div className="rb:grid rb:grid-cols-2 rb:gap-[16px] rb:mt-[20px]">
-              <Button block loading={loading} onClick={handleSave}>{t('common.save')}</Button>
-              <Button block type="primary" loading={runLoading} onClick={handleRun}>{t('memoryExtractionEngine.debug')}</Button>
-            </div>
-          </Card>
+          <Result
+            loading={loading}
+            handleSave={handleSave}
+          />
         </Col>
       </Row>
     </>

web/src/views/MemoryManagement/index.tsx

@@ -1,11 +1,11 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { List, Button, Space, App } from 'antd';
+import { List, Button, Space, App, Tooltip } from 'antd';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import MemoryForm from './components/MemoryForm';
 import type { Memory, MemoryFormRef } from '@/views/MemoryManagement/types'
 import RbCard from '@/components/RbCard/Card'
-import StatusTag from '@/components/StatusTag'
+// import StatusTag from '@/components/StatusTag'
 import { getMemoryConfigList, deleteMemoryConfig } from '@/api/memory'
 import BodyWrapper from '@/components/Empty/BodyWrapper'
 import { formatDateTime } from '@/utils/format';
@@ -67,12 +67,18 @@ const MemoryManagement: React.FC = () => {
       case 'forgottenEngine':
         navigate(`/forgetting-engine/${id}`)
         break
+      case 'emotionEngine':
+        navigate(`/emotion-engine/${id}`)
+        break;
+      case 'reflectionEngine':
+        navigate(`/reflection-engine/${id}`)
+        break;
     }
   }
 
   return (
     <>
-      <div className="rb:text-right rb:mb-[16px]">
+      <div className="rb:text-right rb:mb-4">
         <Button type="primary" onClick={() => handleEdit()}>
           {t('memory.createConfiguration')}
         </Button>
@@ -80,7 +86,7 @@ const MemoryManagement: React.FC = () => {
       
       <BodyWrapper loading={loading} empty={data.length === 0}>
         <List
-          grid={{ gutter: 16, column: 3 }}
+          grid={{ gutter: 16, column: 2 }}
           loading={loading}
           dataSource={data}
           renderItem={(item) => (
@@ -88,32 +94,37 @@ const MemoryManagement: React.FC = () => {
               <RbCard 
                 title={item.config_name}
               >
-                <div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-[17px] rb:font-regular rb:mt-[-4px]">{item.config_desc}</div>
-                {['memoryExtractionEngine', 'forgottenEngine'].map((key) => (
-                  <div key={key} className="rb:group rb:cursor-pointer rb:bg-[#F0F3F8] rb:h-[40px] rb:rounded-[6px] rb:flex rb:items-center rb:justify-between rb:p-[0_8px_0_12px] rb:mt-[12px] rb:text-[#5B6167] rb:font-medium"
-                    onClick={() => handleClick(item.config_id, key)}
-                  >
-                    {t(`memory.${key}`)}
-                    <span className='rb:flex rb:items-center rb:justify-end'>
-                      {/* <StatusTag status={item[key] === 'active' ? 'success' : 'error'} text={item[key] === 'active' ? t('memory.active') : t('memory.inactive')} /> */}
-                      <div 
-                        className="rb:w-[16px] rb:h-[16px] rb:ml-[-3px] rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/memory/arrow_right.svg')] rb:group-hover:bg-[url('@/assets/images/memory/arrow_right_hover.svg')]" 
-                      ></div>
-                    </span>
-                  </div>
-                ))}
-                <div className={clsx("rb:mt-[16px] rb:text-[12px] rb:leading-[16px] rb:font-regular rb:text-[#5B6167] rb:flex rb:items-center", {
+                <Tooltip title={item.config_desc}>
+                  <div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4.25 rb:font-regular rb:-mt-1 rb:wrap-break-word rb:line-clamp-1">{item.config_desc}</div>
+                </Tooltip>
+
+                <div className="rb:grid rb:grid-cols-2 rb:gap-4 rb:mt-3">
+                  {['memoryExtractionEngine', 'forgottenEngine', 'emotionEngine', 'reflectionEngine'].map((key) => (
+                    <div key={key} className="rb:group rb:cursor-pointer rb:bg-[#F0F3F8] rb:h-10 rb:rounded-md rb:flex rb:items-center rb:justify-between rb:p-[0_8px_0_12px] rb:mt-3 rb:text-[#5B6167] rb:font-medium"
+                      onClick={() => handleClick(item.config_id, key)}
+                    >
+                      {t(`memory.${key}`)}
+                      <span className='rb:flex rb:items-center rb:justify-end'>
+                        {/* <StatusTag status={item[key] === 'active' ? 'success' : 'error'} text={item[key] === 'active' ? t('memory.active') : t('memory.inactive')} /> */}
+                        <div 
+                          className="rb:w-4 rb:h-4 rb:-ml-0.75 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/memory/arrow_right.svg')] rb:group-hover:bg-[url('@/assets/images/memory/arrow_right_hover.svg')]" 
+                        ></div>
+                      </span>
+                    </div>
+                  ))}
+                </div>
+                <div className={clsx("rb:mt-4 rb:text-[12px] rb:leading-4 rb:font-regular rb:text-[#5B6167] rb:flex rb:items-center", {
                   'rb:justify-between': item.updated_at,
                   'rb:justify-end': !item.updated_at
                 })}>
                   {formatDateTime(item.updated_at, 'YYYY-MM-DD HH:mm:ss')}
                   <Space size={16}>
                     <div 
-                      className="rb:w-[20px] rb:h-[20px] rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/edit.svg')] rb:hover:bg-[url('@/assets/images/edit_hover.svg')]" 
+                      className="rb:w-5 rb:h-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/edit.svg')] rb:hover:bg-[url('@/assets/images/edit_hover.svg')]" 
                       onClick={() => handleEdit(item)}
                     ></div>
                     <div 
-                      className="rb:w-[20px] rb:h-[20px] rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/delete.svg')] rb:hover:bg-[url('@/assets/images/delete_hover.svg')]" 
+                      className="rb:w-5 rb:h-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/delete.svg')] rb:hover:bg-[url('@/assets/images/delete_hover.svg')]" 
                       onClick={() => handleDelete(item)}
                     ></div>
                   </Space>

web/src/views/ModelManagement/components/ConfigModal.tsx

@@ -123,7 +123,7 @@ const ConfigModal = forwardRef<ConfigModalRef, ConfigModalProps>(({
               <CustomSelect
                 url={modelTypeUrl}
                 hasAll={false}
-                format={(items) => items.map((item) => ({ label: item, value: item }))}
+                format={(items) => items.map((item) => ({ label: t(`model.${item}`), value: item }))}
               />
             </Form.Item>
           </>
@@ -138,10 +138,9 @@ const ConfigModal = forwardRef<ConfigModalRef, ConfigModalProps>(({
           <CustomSelect
             url={modelProviderUrl}
             hasAll={false}
-            format={(items) => items.map((item) => ({ label: item, value: item }))}
+            format={(items) => items.map((item) => ({ label: t(`model.${item}`), value: item }))}
           />
         </Form.Item>
-        {/* TODO:改成模型名称 */}
         <Form.Item
           name="model_name"
           label={t('model.modelName')}

web/src/views/NoPermission/index.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next';
-import noPermission from '@/assets/images/empty/noPermission.svg';
+import noPermission from '@/assets/images/empty/noPermission.png';
 import Empty from '@/components/Empty';
 
 const NoPermission = () => {  
@@ -8,6 +8,7 @@ const NoPermission = () => {
   return (
     <Empty
       url={noPermission}
+      size={[240, 240]}
       title={t('empty.noPermission')}
       subTitle={t('empty.noPermissionDesc')}
       className="rb:h-[calc(100vh-84px)]"

web/src/views/NotFound/index.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next';
-import notFoundImg from '@/assets/images/empty/404.svg';
+import notFoundImg from '@/assets/images/empty/404.png';
 import Empty from '@/components/Empty';
 
 const NotFound = () => {
@@ -8,6 +8,7 @@ const NotFound = () => {
   return (
     <Empty
       url={notFoundImg}
+      size={[328, 146]}
       title={t('empty.notFound')}
       subTitle={t('empty.notFoundDesc')}
       className="rb:h-[calc(100vh-84px)]"

web/src/views/SelfReflectionEngine/index.tsx

@@ -0,0 +1,341 @@
+import React, { useState, useEffect } from 'react';
+import { Row, Col, Form, App, Button, Switch, Space, Select } from 'antd';
+import { useParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import RbCard from '@/components/RbCard/Card';
+import strategyImpactSimulator from '@/assets/images/memory/strategyImpactSimulator.svg'
+import { getMemoryReflectionConfig, updateMemoryReflectionConfig, pilotRunMemoryReflectionConfig } from '@/api/memory'
+import type { ConfigForm, Result, ReflexionData, MemoryVerify, QualityAssessment } from './types'
+import CustomSelect from '@/components/CustomSelect';
+import { getModelListUrl } from '@/api/models'
+import Tag from '@/components/Tag'
+
+const configList = [
+  // 启用反思引擎
+  {
+    key: 'reflection_enabled',
+    type: 'switch',
+  },
+  // 反思模型
+  {
+    key: 'reflection_model_id',
+    type: 'customSelect',
+    url: getModelListUrl,
+    params: { type: 'chat,llm', page: 1, pagesize: 100 }, // chat,llm
+  },
+  // 迭代周期
+  {
+    key: 'reflection_period_in_hours',
+    type: 'select',
+    options: [
+      { label: 'oneHour', value: '1' },
+      { label: 'threeHours', value: '3' },
+      { label: 'sixHours', value: '6' },
+      { label: 'twelveHours', value: '12' },
+      { label: 'daily', value: '24' },
+    ],
+  },
+  // 反思范围
+  {
+    key: 'reflexion_range',
+    type: 'select',
+    hiddenDesc: true,
+    options: [
+      { label: 'partial', value: 'partial' },
+      { label: 'all', value: 'all' },
+    ],
+  },
+  // 反思基线
+  {
+    key: 'baseline',
+    type: 'select',
+    hiddenDesc: true,
+    options: [
+      { label: 'TIME', value: 'TIME' },
+      { label: 'FACT', value: 'FACT' },
+      { label: 'HYBRID', value: 'HYBRID' },
+    ],
+  },
+  // 质量评估
+  {
+    key: 'quality_assessment',
+    type: 'switch',
+  },
+  // 质量评估
+  {
+    key: 'memory_verify',
+    type: 'switch',
+  },
+]
+
+const SelfReflectionEngine: React.FC = () => {
+  const { t } = useTranslation();
+  const { id } = useParams();
+  const [configData, setConfigData] = useState<ConfigForm>({} as ConfigForm);
+  const [form] = Form.useForm<ConfigForm>();
+  const { message } = App.useApp();
+  const [loading, setLoading] = useState(false)
+  const [runLoading, setRunLoading] = useState(false)
+  const [result, setResult] = useState<Result | null>(null)
+
+  const values = Form.useWatch([], form);
+
+  useEffect(() => {
+    getConfigData()
+  }, [id])
+
+  const getConfigData = () => {
+    if (!id) {
+      return
+    }
+    getMemoryReflectionConfig(id)
+      .then((res) => {
+        const response = res as ConfigForm
+        const initialValues = {
+          ...response,
+        }
+        console.log('initialValues', initialValues)
+        setConfigData(initialValues);
+        form.setFieldsValue(initialValues);
+      })
+      .catch(() => {
+        console.error('Failed to load data');
+      })
+  }
+  const handleReset = () => {
+    form.setFieldsValue(configData);
+  }
+  const handleSave = () => {
+    if (!id) {
+      return
+    }
+    setLoading(true)
+    updateMemoryReflectionConfig({
+      ...values,
+      config_id: id
+    })
+      .then(() => {
+        message.success(t('common.saveSuccess'))
+        setConfigData({...(values || {})})
+      })
+      .finally(() => {
+        setLoading(false)
+      })
+  }
+  const handleRun = () => {
+    if (!id) {
+      return
+    }
+    setRunLoading(true)
+    updateMemoryReflectionConfig({
+      ...values,
+      config_id: id
+    })
+      .then(() => {
+        pilotRunMemoryReflectionConfig({
+          config_id: id,
+          dialogue_text: t('reflectionEngine.exampleText')
+        })
+          .then((res) => {
+            setResult(res as Result)
+          })
+          .finally(() => {
+            setRunLoading(false)
+          })
+      })
+      .finally(() => {
+        setLoading(false)
+      })
+  }
+
+  return (
+    <Row gutter={[16, 16]}>
+      <Col span={12}>
+        <RbCard 
+          title={
+            <div className="rb:flex rb:items-center">
+              <img src={strategyImpactSimulator} className="rb:w-5 rb:h-5 rb:mr-2" />
+              {t('reflectionEngine.reflectionEngineConfig')}
+            </div>
+          }
+        >
+          <Form 
+            form={form}
+            layout="vertical"
+            initialValues={{
+              offset: 0,
+              lambda_time: 0.03,
+              lambda_mem: 0.03,
+            }}
+          >
+            {configList.map(config => {
+              if (config.type === 'customSelect') {
+                return (
+                  <div key={config.key}>
+                    <div className="rb:text-[14px] rb:font-medium rb:leading-5 rb:mb-2">
+                      {t(`reflectionEngine.${config.key}`)}
+                    </div>
+                    <Form.Item
+                      name={config.key}
+                      extra={t(`reflectionEngine.${config.key}_desc`)}
+                    >
+                      <CustomSelect
+                        url={config.url as string}
+                        params={config.params}
+                        valueKey='id'
+                        labelKey='name'
+                        hasAll={false}
+                        placeholder={t('common.pleaseSelect')}
+                        disabled={!values?.reflection_enabled && config.key !== 'reflection_enabled'}
+                      />
+                    </Form.Item>
+                  </div>
+                )
+              }
+              if (config.type === 'select') {
+                return (
+                  <div key={config.key}>
+                    <div className="rb:text-[14px] rb:font-medium rb:leading-5 rb:mb-2">
+                      {t(`reflectionEngine.${config.key}`)}
+                    </div>
+                    <Form.Item
+                      name={config.key}
+                      extra={t(`reflectionEngine.${config.key}_desc`)}
+                    >
+                      <Select
+                        options={config.options?.map(vo => ({
+                          ...vo,
+                          label: t(`reflectionEngine.${vo.label}`),
+                        }))}
+                        placeholder={t('common.pleaseSelect')}
+                        disabled={!values?.reflection_enabled && config.key !== 'reflection_enabled'}
+                      />
+                    </Form.Item>
+                  </div>
+                )
+              }
+
+              return (
+                <div className="rb:flex rb:items-center rb:justify-between rb:mb-6">
+                  <div>
+                    <span className="rb:text-[14px] rb:font-medium rb:leading-5">{t(`reflectionEngine.${config.key}`)}</span>
+                    {(config as any).hasSubTitle && <div className="rb:mt-1 rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-4">{t(`reflectionEngine.${config.key}_subTitle`)}</div>}
+                    <div className="rb:mt-1 rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-4">{t(`reflectionEngine.${config.key}_desc`)}</div>
+                  </div>
+                  <Form.Item
+                    name={config.key}
+                    valuePropName="checked"
+                    className="rb:ml-2 rb:mb-0!"
+                  >
+                    <Switch
+                      disabled={!values?.reflection_enabled && config.key !== 'reflection_enabled'} />
+                  </Form.Item>
+                </div>
+              )
+            })}
+            <Row gutter={16} className="rb:mt-3">
+              <Col span={12}>
+                <Button block onClick={handleReset}>{t('common.reset')}</Button>
+              </Col>
+              <Col span={12}>
+                <Button type="primary" loading={loading} block onClick={handleSave}>{t('common.save')}</Button>
+              </Col>
+            </Row>
+          </Form>
+        </RbCard>
+      </Col>
+      <Col span={12}>
+        <Space size={16} direction="vertical" className="rb:w-full">
+          <RbCard
+            title={t('memoryExtractionEngine.example')}
+          >
+            <div className="rb:text-[14px] rb:text-[#5B6167] rb:font-regular rb:leading-5 rb:mb-6">
+              {t('reflectionEngine.exampleText')}
+            </div>
+
+            <Button type="primary" block loading={runLoading} onClick={handleRun}>{t('reflectionEngine.run')}</Button>
+          </RbCard>
+          {result && <>
+            <RbCard
+              title={t('reflectionEngine.runTitle')}
+            >
+              <div 
+                className="rb:flex rb:gap-4 rb:justify-start rb:text-[#5B6167] rb:text-[14px] rb:leading-5 rb:mb-3"
+              >
+                <div className="rb:whitespace-nowrap rb:w-45 rb:font-medium">{t(`reflectionEngine.baseline`)}</div>
+                <div className='rb:flex-inline rb:text-left rb:py-px rb:rounded rb:text-[#5B6167] rb:flex-1'>
+                  {result.baseline}
+                </div>
+              </div>
+            </RbCard>
+            <RbCard
+              title={t('reflectionEngine.conflictDetection')}
+            >
+              <Space size={12} direction="vertical" className="rb:w-full">
+                {result.reflexion_data.map((item, index) => (
+                  <div key={index} className="rb:bg-[#F0F3F8] rb:px-3 rb:py-2.5 rb:rounded-md rb:text-[12px]">
+                    {['reason', 'solution'].map(key => (
+                      <div
+                        key={key}
+                        className="rb:flex rb:gap-4 rb:justify-start rb:text-[14px] rb:leading-5 rb:mb-3"
+                      >
+                        <div className="rb:whitespace-nowrap rb:w-45 rb:font-medium">{t(`reflectionEngine.${key}`)}</div>
+                        <div className='rb:flex-inline rb:text-left rb:py-px rb:rounded rb:text-[#5B6167] rb:flex-1'>
+                          {item[key as keyof ReflexionData]}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                ))}
+              </Space>
+            </RbCard>
+            <RbCard
+              title={t('reflectionEngine.qualityAssessment')}
+            >
+              {result.quality_assessments.map((item, index) => (
+                <div key={index} className="rb:bg-[#F0F3F8] rb:px-3 rb:py-2.5 rb:rounded-md rb:text-[12px]">
+                  {['score', 'summary'].map(key => (
+                    <div
+                      key={key}
+                      className="rb:flex rb:gap-4 rb:justify-start rb:text-[14px] rb:leading-5 rb:mb-3"
+                    >
+                      <div className="rb:whitespace-nowrap rb:w-45 rb:font-medium">{t(`reflectionEngine.qualityAssessmentObj.${key}`)}</div>
+                      <div className='rb:flex-inline rb:text-left rb:py-px rb:rounded rb:text-[#5B6167] rb:flex-1'>
+                        {item[key as keyof QualityAssessment]}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ))}
+            </RbCard>
+            <RbCard
+              title={t('reflectionEngine.privacyAudit')}
+            >
+              {result.memory_verifies.map((item, index) => (
+                <div key={index} className="rb:bg-[#F0F3F8] rb:px-3 rb:py-2.5 rb:rounded-md rb:text-[12px]">
+                  {['has_privacy', 'privacy_types', 'summary'].map(key => (
+                    <div
+                      key={key}
+                      className="rb:flex rb:gap-4 rb:justify-start rb:text-[14px] rb:leading-5 rb:mb-3"
+                    >
+                      <div className="rb:whitespace-nowrap rb:w-45 rb:font-medium">{t(`reflectionEngine.privacyAuditObj.${key}`)}</div>
+                      <div className='rb:flex-inline rb:text-left rb:py-px rb:rounded rb:text-[#5B6167] rb:flex-1'>
+                        {key === 'has_privacy'
+                          ? <Tag color={item[key as keyof MemoryVerify] ? 'success' : 'error'}>{t(`reflectionEngine.privacyAuditObj.${item[key as keyof MemoryVerify]}`)}</Tag>
+                          : key === 'privacy_types' ? (item[key as keyof MemoryVerify] as string[]).join('、')
+                          : item[key as keyof MemoryVerify]
+                        }
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ))}
+            </RbCard>
+          </>}
+        </Space>
+      </Col>
+    </Row>
+  );
+};
+
+export default SelfReflectionEngine;

web/src/views/SelfReflectionEngine/types.ts

@@ -0,0 +1,72 @@
+// 标签表单数据类型
+export interface TagFormData {
+  tagName: string;
+  type: string;
+  color: string;
+  description?: string;
+  applicableScope?: string[];
+  semanticExpansion?: string;
+  isActive?: boolean;
+  // 扩展字段用于区分编辑和新增操作
+  isEditing?: boolean;
+  tagId?: string;
+}
+
+// 记忆总览数据类型
+export interface MemoryOverviewRecord {
+  id: number;
+  memoryID: string,
+  contentSummary: string;
+  type: string;
+  createTime: string;
+  lastCallTime: string;
+  retentionDegree: string;
+  status: string;
+}
+// 定义组件暴露的方法接口
+export interface MemoryOverviewFormRef {
+  handleOpen: (memoryOverview?: MemoryOverviewRecord | null) => void;
+}
+
+// 遗忘曲线数据类型
+export interface CurveRecord {
+  memoryID: string;
+  type: string;
+  currentRetentionRate: string;
+  finallyActivated: string;
+  expectedForgettingTime: string;
+  reinforcementCount: string;
+}
+
+export interface ConfigForm {
+  config_id: number | string;
+  reflection_enabled: boolean;
+  reflection_period_in_hours: string;
+  reflexion_range: string;
+  baseline: string;
+  reflection_model_id: string;
+  memory_verify: boolean;
+  quality_assessment: boolean;
+}
+
+export interface QualityAssessment {
+  score: number;
+  summary: string;
+}
+export interface MemoryVerify {
+  has_privacy: boolean;
+  privacy_types: string[];
+  summary: string;
+}
+export interface ReflexionData {
+  reason: string;
+  solution: string;
+}
+
+export interface Result {
+  baseline: string;
+  source_data: string;
+  quality_assessments: QualityAssessment[];
+  memory_verifies: MemoryVerify[];
+  reflexion_data: ReflexionData[]
+}

web/src/views/UserMemory/types.ts

@@ -7,16 +7,17 @@ export interface Data {
     other_address: string;
     created_at: string;
     updated_at: string;
-    },
-    memory_num: {
-      total: number;
-      counts: {
-        dialogue: number;
-        chunk: number;
-        statement: number;
-        entity: number;
-      }
+  },
+  memory_num: {
+    total: number;
+    counts: {
+      dialogue: number;
+      chunk: number;
+      statement: number;
+      entity: number;
     }
+  },
+  name?: string;
 }
 export interface ConfigModalData {
   llm: string;

web/src/views/UserMemoryDetail/Neo4j.tsx

@@ -18,6 +18,11 @@ import RelationshipNetwork from './components/RelationshipNetwork'
 import MemoryInsight from './components/MemoryInsight'
 import Empty from '@/components/Empty'
 
+import WordCloud from './components/WordCloud'
+import EmotionTags from './components/EmotionTags'
+import Health from './components/Health'
+import Suggestions from './components/Suggestions'
+
 const tagColors = ['21, 94, 239', '156, 111, 255', '255, 93, 52', '54, 159, 33']
 
 interface TitleProps {
@@ -102,77 +107,85 @@ const Neo4j: FC = () => {
 
   const name = loading.detail ? '' : data?.name && data?.name !== '' ? data.name : id
   return (
-    <Row gutter={[16, 16]} className="rb:pb-[24px]">
+    <Row gutter={[16, 16]} className="rb:pb-6">
       <Col span={8}>
-        <RbCard>
-          <div className="rb:flex rb:items-center">
-            <div className="rb:flex-[0_0_auto] rb:w-[80px] rb:h-[80px] rb:text-center rb:font-semibold rb:text-[28px] rb:leading-[80px] rb:rounded-[8px] rb:text-[#FBFDFF] rb:bg-[#155EEF]">{name?.[0]}</div>
-            <div className="rb:text-[24px] rb:font-semibold rb:leading-[32px] rb:ml-[16px]">
-              {name}<br/>
-              <div className="rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-[16px] rb:mt-[8px]">{data?.tags?.join(' | ')}</div>
-            </div>
-          </div>
 
-          <div className="rb:flex rb:gap-[8px] rb:mb-[8px] rb:flex-wrap rb:mt-[25px]">
-            {data?.hot_tags?.map((tag, tagIndex) => (
-              <span key={tag} className="rb:rounded-[11px] rb:p-[0_8px] rb:leading-[22px] rb:border"
-                style={{
-                  backgroundColor: `rgba(${tagColors[tagIndex % tagColors.length]}, 0.08)`,
-                  borderColor: `rgba(${tagColors[tagIndex % tagColors.length]}, 0.3)`,
-                  color: `rgba(${tagColors[tagIndex % tagColors.length]}, 1)`,
-                }}
-              >
-                {tag.name}({tag.frequency})
-              </span>
-            ))}
-          </div>
+        <Row gutter={[16, 16]}>
+          <Col span={24}>
+            <RbCard>
+              <div className="rb:flex rb:items-center">
+                <div className="rb:flex-[0_0_auto] rb:w-[80px] rb:h-[80px] rb:text-center rb:font-semibold rb:text-[28px] rb:leading-[80px] rb:rounded-[8px] rb:text-[#FBFDFF] rb:bg-[#155EEF]">{name?.[0]}</div>
+                <div className="rb:text-[24px] rb:font-semibold rb:leading-[32px] rb:ml-[16px]">
+                  {name}<br/>
+                  <div className="rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-[16px] rb:mt-[8px]">{data?.tags?.join(' | ')}</div>
+                </div>
+              </div>
 
-          {/* 记忆总量 */}
-          <div className="rb:font-regular rb:text-[12px] rb:text-[#5B6167] rb:leading-[16px] rb:mb-[25px]">
-            {t('userMemory.totalNumOfMemories')}
-            <div className="rb:font-extrabold rb:text-[24px] rb:text-[#212332] rb:leading-[30px] rb:mt-[8px]">{memory || 0}</div>
-          </div>
+              <div className="rb:flex rb:gap-[8px] rb:mb-[8px] rb:flex-wrap rb:mt-[25px]">
+                {data?.hot_tags?.map((tag, tagIndex) => (
+                  <span key={tag} className="rb:rounded-[11px] rb:p-[0_8px] rb:leading-[22px] rb:border"
+                    style={{
+                      backgroundColor: `rgba(${tagColors[tagIndex % tagColors.length]}, 0.08)`,
+                      borderColor: `rgba(${tagColors[tagIndex % tagColors.length]}, 0.3)`,
+                      color: `rgba(${tagColors[tagIndex % tagColors.length]}, 1)`,
+                    }}
+                  >
+                    {tag.name}({tag.frequency})
+                  </span>
+                ))}
+              </div>
 
-          {/* 关于我 */}
-          <>
-            <Title
-              type="aboutUs"
-              title={t('userMemory.aboutMe')}
-              icon={aboutUs}
-              t={t}
-              expanded={expanded.includes('aboutUs')}
-              onClick={handleTitleClick}
-            />
-            {expanded.includes('aboutUs') && (
+              {/* 记忆总量 */}
+              <div className="rb:font-regular rb:text-[12px] rb:text-[#5B6167] rb:leading-[16px] rb:mb-[25px]">
+                {t('userMemory.totalNumOfMemories')}
+                <div className="rb:font-extrabold rb:text-[24px] rb:text-[#212332] rb:leading-[30px] rb:mt-[8px]">{memory || 0}</div>
+              </div>
+
+              {/* 关于我 */}
               <>
-                {loading.summary
-                  ? <Skeleton className="rb:mt-[16px]" />
-                  : summary 
-                  ? <div className="rb:font-regular rb:leading-[22px] rb:pt-[16px]">
-                    {summary || '-'}
-                  </div>
-                  : <Empty size={88} className="rb:mt-[48px] rb:mb-[81px]" />
-                }
+                <Title
+                  type="aboutUs"
+                  title={t('userMemory.aboutMe')}
+                  icon={aboutUs}
+                  t={t}
+                  expanded={expanded.includes('aboutUs')}
+                  onClick={handleTitleClick}
+                />
+                {expanded.includes('aboutUs') && (
+                  <>
+                    {loading.summary
+                      ? <Skeleton className="rb:mt-[16px]" />
+                      : summary 
+                      ? <div className="rb:font-regular rb:leading-[22px] rb:pt-[16px]">
+                        {summary || '-'}
+                      </div>
+                      : <Empty size={88} className="rb:mt-[48px] rb:mb-[81px]" />
+                    }
+                  </>
+                )}
               </>
-            )}
-          </>
 
-          {/* 兴趣分布 */}
-          <>
-            <Title
-              type="interestDistribution"
-              title={t('userMemory.interestDistribution')}
-              icon={interestDistribution}
-              t={t}
-              expanded={expanded.includes('interestDistribution')}
-              onClick={handleTitleClick}
-            />
+              {/* 兴趣分布 */}
+              <>
+                <Title
+                  type="interestDistribution"
+                  title={t('userMemory.interestDistribution')}
+                  icon={interestDistribution}
+                  t={t}
+                  expanded={expanded.includes('interestDistribution')}
+                  onClick={handleTitleClick}
+                />
 
-            {expanded.includes('interestDistribution') && (
-              <PieCard />
-            )}
-          </>
-        </RbCard>
+                {expanded.includes('interestDistribution') && (
+                  <PieCard />
+                )}
+              </>
+            </RbCard>
+          </Col>
+          <Col span={24}>
+            <EmotionTags />
+          </Col>
+        </Row>
       </Col>
       <Col span={16}>
         <Row gutter={[16, 16]}>
@@ -182,6 +195,15 @@ const Neo4j: FC = () => {
           </Col>
           {/* 关系网络 + 记忆详情 */}
           <RelationshipNetwork />
+          <Col span={12}>
+            <WordCloud />
+          </Col>
+          <Col span={12}>
+            <Health />
+          </Col>
+          <Col span={24}>
+            <Suggestions />
+          </Col>
         </Row>
       </Col>
     </Row>

web/src/views/UserMemoryDetail/components/EmotionTags.tsx

@@ -0,0 +1,111 @@
+import { type FC, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useParams } from 'react-router-dom'
+
+import Empty from '@/components/Empty'
+import RbCard from '@/components/RbCard/Card'
+import { getWordCloud } from '@/api/memory'
+
+interface TagList {
+  keywords: Array<{ keyword: string; frequency: number; emotion_type: string; avg_intensity: number; }>;
+  total_keywords: number;
+}
+const EmotionTags: FC = () => {
+  const { t } = useTranslation()
+  const { id } = useParams()
+  const [tagList, setTagList] = useState<TagList | null>(null)
+
+  useEffect(() => {
+    getEmotionTagData()
+  }, [id])
+
+  const getEmotionTagData = () => {
+    if (!id) {
+      return
+    }
+    getWordCloud(id)
+      .then((res) => {
+        setTagList(res as TagList)
+      })
+  }
+
+  const [visibleCount, setVisibleCount] = useState(0)
+
+  useEffect(() => {
+    if (!tagList || tagList?.keywords.length === 0) return
+    
+    const timer = setInterval(() => {
+      setVisibleCount(prev => {
+        if (prev >= tagList?.keywords.length) {
+          clearInterval(timer)
+          return prev
+        }
+        return prev + 1
+      })
+    }, 200)
+
+    return () => clearInterval(timer)
+  }, [tagList?.keywords.length])
+
+  const getEmotionColor = (emotionType: string) => {
+    const colors: Record<string, string> = {
+      joy: '#52c41a',
+      anger: '#ff4d4f', 
+      sadness: '#1890ff',
+      fear: '#fa8c16',
+      neutral: '#8c8c8c',
+      surprise: '#722ed1'
+    }
+    return colors[emotionType] || '#8c8c8c'
+  }
+
+  const emotionStats = tagList?.keywords.reduce((acc, item) => {
+    acc[item.emotion_type] = (acc[item.emotion_type] || 0) + item.frequency
+    return acc
+  }, {} as Record<string, number>) ?? {}
+
+  return (
+    <RbCard
+      title={t('emotionDetail.emotionTags')}
+      headerType="borderless"
+      headerClassName="rb:text-[18px]! rb:leading-[24px]"
+      bodyClassName='rb:p-0! rb:relative'
+    >
+      {tagList
+        ? <>
+          <div className="rb:flex rb:flex-wrap rb:items-center rb:gap-6 rb:text-sm rb:mt-3 rb:p-3 rb:bg-[#F0F3F8]">
+            {Object.entries(emotionStats).map(([type, count]) => {
+              console.log(type)
+              return (
+                <div key={type} className="rb:flex rb:items-center rb:gap-2">
+                  <div className="rb:w-3 rb:h-3 rb:rounded-full" style={{ backgroundColor: getEmotionColor(type) }}></div>
+                  <span className="rb:text-gray-600">{t(`emotionDetail.${type || 'neutral'}`)} ({count}个)</span>
+                </div>
+              )
+            })}
+          </div>
+          <div className="rb:mt-6 rb:flex rb:items-center rb:flex-wrap rb:gap-3 rb:mb-3 rb:px-6">
+            {tagList.keywords.slice(0, visibleCount).map((item, index) => (
+              <div
+                key={index}
+                className="rb:flex rb:items-center rb:justify-center rb:animate-fadeIn rb:px-4 rb:py-2 rb:rounded-full rb:text-white rb:font-medium"
+                style={{
+                  backgroundColor: getEmotionColor(item.emotion_type),
+                  fontSize: `${12 + item.avg_intensity * 8}px`,
+                  animationDelay: `${index * 200}ms`,
+                  height: `${20 + item.avg_intensity * 20}px`,
+                  transition: 'all 0.3s ease-in-out'
+                }}
+              >
+                {item.keyword}
+              </div>
+            ))}
+          </div>
+        </>
+        : <Empty />
+      }
+    </RbCard>
+  )
+}
+
+export default EmotionTags

web/src/views/UserMemoryDetail/components/Health.tsx

@@ -0,0 +1,100 @@
+import { type FC, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useParams } from 'react-router-dom'
+import { Progress } from 'antd'
+
+import Empty from '@/components/Empty'
+import RbCard from '@/components/RbCard/Card'
+import { getEmotionHealth } from '@/api/memory'
+interface Health {
+  health_score: number;
+  level: string;
+  dimensions: {
+    positivity_rate: {
+      score: number;
+      positive_count: number;
+      negative_count: number;
+      neutral_count: number;
+    };
+    stability: {
+      score: number;
+      std_deviation: number;
+    };
+    resilience: {
+      score: number;
+      recovery_rate: number;
+    };
+  };
+  emotion_distribution: {
+    joy: number;
+    sadness: number;
+    anger: number;
+    fear: number;
+    surprise: number;
+    neutral: number;
+  };
+  time_range: string;
+}
+const Health: FC = () => {
+  const { t } = useTranslation()
+  const { id } = useParams()
+  const [health, setHealth] = useState<Health | null>(null)
+
+  useEffect(() => {
+    getWordCloudData()
+  }, [id])
+
+  const getWordCloudData = () => {
+    if (!id) {
+      return
+    }
+    getEmotionHealth(id)
+      .then((res) => {
+        setHealth(res as Health)
+      })
+  }
+
+  return (
+    <RbCard
+      title={t('emotionDetail.health')}
+      headerType="borderless"
+      headerClassName="rb:text-[18px]! rb:leading-[24px]"
+      height="100%"
+    >
+      {health
+        ? <>
+          <div className="rb:flex rb:justify-center rb:items-center">
+            <Progress
+              size={250}
+              type="circle"
+              strokeColor={{
+                '0%': '#108ee9',
+                '100%': '#87d068',
+              }}
+              percent={health.health_score}
+              format={(percent) => `${percent}(${health.level})`}
+            />
+          </div>
+
+          {health.dimensions && <>
+            <div className="rb:flex rb:items-center rb:justify-between rb:mt-6">
+              <div className="rb:w-40 rb:mr-3">{t('emotionDetail.positivity_rate')}</div> 
+              <Progress className="rb:w-[calc(100%-180px)]" percent={health.dimensions.positivity_rate.score} />
+            </div>
+            <div className="rb:flex rb:items-center rb:gap-3 rb:mt-3">
+              <div className="rb:w-40 rb:mr-3">{t('emotionDetail.stability')}</div>
+              <Progress className="rb:w-[calc(100%-180px)]" percent={health.dimensions.stability.score} />
+            </div>
+            <div className="rb:flex rb:items-center rb:gap-3 rb:mt-3">
+              <div className="rb:w-40 rb:mr-3">{t('emotionDetail.resilience')}</div> 
+              <Progress className="rb:w-[calc(100%-180px)]" percent={health.dimensions.resilience.score} />
+            </div>
+          </>}
+        </>
+        : <Empty />
+      }
+    </RbCard>
+  )
+}
+
+export default Health

web/src/views/UserMemoryDetail/components/RelationshipNetwork.tsx

@@ -1,4 +1,4 @@
-import React, { type FC, useEffect, useState, useRef } from 'react'
+import React, { type FC, useEffect, useState, useRef, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useParams } from 'react-router-dom'
 import { Col } from 'antd'
@@ -29,13 +29,9 @@ const RelationshipNetwork:FC = () => {
   const [categories, setCategories] = useState<{ name: string }[]>([])
   const [selectedNode, setSelectedNode] = useState<Node | null>(null)
 
-  useEffect(() => {
-    if (!id) return
-    getEdgeData()
-  }, [id])
 
   // 关系网络
-  const getEdgeData = () => {
+  const getEdgeData = useCallback(() => {
     if (!id) return
     setSelectedNode(null)
     getMemorySearchEdges(id).then((res) => {
@@ -45,20 +41,20 @@ const RelationshipNetwork:FC = () => {
       const categories: { name: string }[] = []
       
       list.forEach(item => {
-        if (item.edge) {
+        if (item.edge && item.edge.target_id && item.edge.source_id) {
           links.push({
             ...item.edge,
-            target: item.edge?.target_id,
-            source: item.edge?.source_id,
+            target: item.edge.target_id,
+            source: item.edge.source_id,
           })
         }
         if (item.sourceNode) {
           nodes.push(item.sourceNode)
-          categories.push({name: item.sourceNode.entity_type})
+          categories.push({name: item.sourceNode.entity_type || 'Unknown'})
         }
         if (item.targetNode) {
           nodes.push(item.targetNode)
-          categories.push({name: item.targetNode.entity_type})
+          categories.push({name: item.targetNode.entity_type || 'Unknown'})
         }
       })
       
@@ -76,14 +72,58 @@ const RelationshipNetwork:FC = () => {
       setLinks(uniqueLinks)
       setCategories(uniqueCategories)
 
+      // Calculate node frequency based on appearance in links
+      const nodeFrequency = new Map<string, number>()
+      
+      // Count each node's appearance in links (both as source and target)
+      uniqueLinks.forEach(link => {
+        // Increment source node frequency (only if source exists and is a string)
+        if (typeof link.source === 'string') {
+          nodeFrequency.set(link.source, (nodeFrequency.get(link.source) || 0) + 1)
+        }
+        // Increment target node frequency (only if target exists and is a string)  
+        if (typeof link.target === 'string') {
+          nodeFrequency.set(link.target, (nodeFrequency.get(link.target) || 0) + 1)
+        }
+      })
+
+      // Set minimum frequency to 1 for nodes not in any links
+      uniqueNodes.forEach(node => {
+        if (node.id && typeof node.id === 'string') {
+          if (!nodeFrequency.has(node.id)) {
+            nodeFrequency.set(node.id, 1)
+          }
+        }
+      })
+
       uniqueNodes.map(item => {
-        const index = uniqueCategories.findIndex((n) => n.name === item.entity_type)
+        const index = uniqueCategories.findIndex((n) => n.name === (item.entity_type || 'Unknown'))
         item.category = index
-        item.symbolSize = index < 10 ? 5 : index <100 ? 8 : 10
+        
+        // Get frequency for the node, ensuring id is a string
+        const frequency = (item.id && typeof item.id === 'string') ? (nodeFrequency.get(item.id) || 1) : 1
+        
+        // Set symbolSize based on frequency
+        // Adjust these thresholds based on expected frequency ranges
+        if (frequency <= 1) {
+          item.symbolSize = 5
+        } else if (frequency <= 10) {
+          item.symbolSize = 10
+        } else if (frequency <= 15) {
+          item.symbolSize = 15
+        } else if (frequency <= 20) {
+          item.symbolSize = 25
+        } else {
+          item.symbolSize = 35
+        }
       })
       setNodes(uniqueNodes)
     })
-  }
+  }, [id])
+  useEffect(() => {
+    if (!id) return
+    getEdgeData()
+  }, [id])
   
   useEffect(() => {
     const handleResize = () => {
@@ -95,7 +135,7 @@ const RelationshipNetwork:FC = () => {
         });
       }
     }
-    
+
     const resizeObserver = new ResizeObserver(handleResize)
     const chartElement = chartRef.current?.getEchartsInstance().getDom().parentElement
     if (chartElement) {
@@ -106,6 +146,8 @@ const RelationshipNetwork:FC = () => {
       resizeObserver.disconnect()
     }
   }, [nodes])
+
+  console.log('nodes', nodes)
   return (
     <>
       {/* 关系网络 */}
@@ -175,12 +217,10 @@ const RelationshipNetwork:FC = () => {
                     if (params.dataType === 'node') {
                       // 处理节点点击事件
                       console.log('Node clicked:', params.data);
-                      setSelectedNode(params.data)
-                      if (selectedNode?.id === params.data.id) {
-                        setSelectedNode(null)
-                      } else {
-                        setSelectedNode(params.data)
-                      }
+                      // 使用函数式更新避免状态依赖问题
+                      setSelectedNode(prevSelected => 
+                        prevSelected?.id === params.data.id ? null : params.data
+                      )
                     }
                   }
                 }}

web/src/views/UserMemoryDetail/components/Suggestions.tsx

@@ -0,0 +1,63 @@
+import { type FC, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useParams } from 'react-router-dom'
+
+import Empty from '@/components/Empty'
+import RbCard from '@/components/RbCard/Card'
+import { getEmotionSuggestions } from '@/api/memory'
+import RbAlert from '@/components/RbAlert'
+
+
+interface Suggestions {
+  health_summary: string;
+  suggestions: Array<{
+    type: string;
+    title: string;
+    content: string;
+    priority: string;
+    actionable_steps: string[];
+  }>;
+}
+const Suggestions: FC = () => {
+  const { t } = useTranslation()
+  const { id } = useParams()
+  const [suggestions, setSuggestions] = useState<Suggestions | null>(null)
+
+  useEffect(() => {
+    getSuggestionData()
+  }, [id])
+
+  const getSuggestionData = () => {
+    if (!id) {
+      return
+    }
+    getEmotionSuggestions(id)
+      .then((res) => {
+        setSuggestions(res as Suggestions)
+      })
+  }
+
+  return (
+    <RbCard
+      title={t('emotionDetail.suggestions')}
+      headerType="borderless"
+      headerClassName="rb:text-[18px]! rb:leading-[24px]"
+    >
+      {suggestions
+        ? <>
+          <RbAlert className="rb:mb-3">{suggestions.health_summary}</RbAlert>
+          {suggestions.suggestions.map((item, index) => (
+            <div key={index} className="rb:mb-3">
+              <div className="rb:font-medium">{index + 1}. {item.title}</div>
+              <div className="rb:text-[12px] rb:text-[#5B6167] rb:mt-1 rb:mb-2">{item.content}</div>
+              {item.actionable_steps.map((vo, idx) => <div key={idx} className="rb:ml-6 rb:text-[12px] rb:text-[#5B6167] rb:mt-1">- {vo}</div>)}
+            </div>
+          ))}
+        </>
+        : <Empty />
+      }
+    </RbCard>
+  )
+}
+
+export default Suggestions

web/src/views/UserMemoryDetail/components/WordCloud.tsx

@@ -0,0 +1,131 @@
+import { type FC, useEffect, useState, useMemo, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useParams } from 'react-router-dom'
+import ReactEcharts from 'echarts-for-react'
+import { Progress } from 'antd'
+
+import Empty from '@/components/Empty'
+import RbCard from '@/components/RbCard/Card'
+import { getEmotionTags } from '@/api/memory'
+
+interface WordCloud {
+  tags: Array<{
+    emotion_type: string;
+    count: number;
+    percentage: number;
+    avg_intensity: number;
+  }>;
+  total_count: number;
+}
+const WordCloud: FC = () => {
+  const { t } = useTranslation()
+  const { id } = useParams()
+  const chartRef = useRef<ReactEcharts>(null);
+  const resizeScheduledRef = useRef(false)
+  const [wordCloud, setWordCloud] = useState<WordCloud | null>(null)
+
+  useEffect(() => {
+    getWordCloudData()
+  }, [id])
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (chartRef.current && !resizeScheduledRef.current) {
+        resizeScheduledRef.current = true
+        requestAnimationFrame(() => {
+          chartRef.current?.getEchartsInstance().resize();
+          resizeScheduledRef.current = false
+        });
+      }
+    }
+
+    const resizeObserver = new ResizeObserver(handleResize)
+    const chartElement = chartRef.current?.getEchartsInstance().getDom().parentElement
+    if (chartElement) {
+      resizeObserver.observe(chartElement)
+    }
+
+    return () => {
+      resizeObserver.disconnect()
+    }
+  }, [wordCloud])
+
+  const getWordCloudData = () => {
+    if (!id) {
+      return
+    }
+    getEmotionTags(id)
+      .then((res) => {
+        setWordCloud(res as WordCloud)
+      })
+  }
+  const radarOption = useMemo(() => {
+    if (!wordCloud?.tags.length) return {}
+    
+    // 将avg_intensity转换为1-100范围
+    const radarData = wordCloud.tags.map(item => ({
+      name: item.emotion_type,
+      value: Math.round(item.avg_intensity * 100),
+      count: item.count,
+      percentage: item.percentage
+    }))
+    
+    return {
+      tooltip: {
+        trigger: 'item',
+        formatter: (params: any) => {
+          const dataIndex = params.dataIndex
+          const item = radarData[dataIndex]
+          return `${item.name}<br/>${item.percentage.toFixed(1)}%`
+        }
+      },
+      radar: {
+        indicator: radarData.map(item => ({
+          name: t(`emotionDetail.${item.name}`),
+          max: 100,
+          min: 1
+        }))
+      },
+      series: [{
+        type: 'radar',
+        name: 'Emotion Intensity',
+        data: [{
+          value: radarData.map(item => item.value),
+          name: 'Emotion Intensity'
+        }]
+      }]
+    }
+  }, [wordCloud])
+
+  return (
+    <RbCard
+      title={t('emotionDetail.wordCloud')}
+      headerType="borderless"
+      headerClassName="rb:text-[18px]! rb:leading-[24px]"
+      height="100%"
+    >
+      {wordCloud
+        ? <div className="rb:flex rb:h-100">
+          <ReactEcharts ref={chartRef} option={radarOption} style={{ width: '50%', height: '100%' }} />
+          <div className="rb:w-[50%] rb:pl-4 rb:flex rb:flex-col rb:justify-center">
+            <div className="rb:text-[18px] rb:font-medium rb:mb-4">样本数：{wordCloud.total_count}</div>
+            <div className="rb:space-y-3">
+              {wordCloud.tags.map(item => (
+                <div key={item.emotion_type}>
+                  <div className="rb:flex rb:items-center rb:justify-between rb:font-medium">
+                    {t(`emotionDetail.${item.emotion_type}`)}
+                    <div className="rb:text-[12px] rb:text-[#5B6167] rb:font-regular">{item.count}{t('emotionDetail.pieces')}</div>
+                  </div>
+                  <Progress size="small" percent={item.percentage} />
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+        : <Empty />
+      }
+    </RbCard>
+  )
+}
+
+export default WordCloud

web/src/views/UserMemoryDetail/pages/EmotionDetail.tsx

@@ -0,0 +1,29 @@
+import { type FC } from 'react'
+import { Row, Col } from 'antd';
+
+import WordCloud from '../components/WordCloud'
+import EmotionTags from '../components/EmotionTags'
+import Health from '../components/Health'
+import Suggestions from '../components/Suggestions'
+
+
+const EmotionDetail: FC = () => {
+  return (
+    <Row gutter={[16, 16]}>
+      <Col span={12}>
+        <WordCloud />
+      </Col>
+      <Col span={12}>
+        <EmotionTags />
+      </Col>
+      <Col span={12}>
+        <Health />
+      </Col>
+      <Col span={12}>
+        <Suggestions />
+      </Col>
+    </Row>
+  )
+}
+
+export default EmotionDetail

web/src/views/Workflow/components/CanvasToolbar.tsx

@@ -0,0 +1,203 @@
+import type { FC } from 'react';
+import { Select, Button } from 'antd';
+import { Node } from '@antv/x6';
+import type { GraphRef } from '../types'
+
+interface CanvasToolbarProps {
+  miniMapRef: React.RefObject<HTMLDivElement>;
+  graphRef: GraphRef;
+  isHandMode: boolean;
+  setIsHandMode: React.Dispatch<React.SetStateAction<boolean>>;
+  zoomLevel: number;
+  canUndo: boolean;
+  canRedo: boolean;
+  onUndo: () => void;
+  onRedo: () => void;
+}
+
+const CanvasToolbar: FC<CanvasToolbarProps> = ({
+  miniMapRef,
+  graphRef,
+  isHandMode,
+  setIsHandMode,
+  zoomLevel,
+  canUndo,
+  canRedo,
+  onUndo,
+  onRedo,
+}) => {
+  // 整理布局函数
+  const handleLayout = () => {
+    if (!graphRef.current) return;
+    const nodes = graphRef.current.getNodes();
+    const edges = graphRef.current.getEdges();
+    
+    // 如果没有连线，使用垂直布局避免节点重叠
+     if (edges.length === 0) {
+       nodes.forEach((node, index) => {
+         const nodeData = node.getData();
+         const isSpecialNode = nodeData?.isGroup || nodeData?.type === 'condition';
+         const nodeHeight = isSpecialNode ? 220 : 50;
+         const xPosition = 100;
+         const yPosition = index * (nodeHeight + 100) + 100;
+         node.setPosition(xPosition, yPosition);
+       });
+       return;
+     }
+    
+    // 简单的树布局算法
+    const nodeMap = new Map<string, Node>();
+    const children = new Map<string, string[]>();
+    const roots: string[] = [];
+    
+    // 初始化节点映射
+    nodes.forEach(node => {
+      nodeMap.set(node.id, node);
+      children.set(node.id, []);
+    });
+    
+    // 构建父子关系
+    edges.forEach(edge => {
+      const sourceId = edge.getSourceCellId();
+      const targetId = edge.getTargetCellId();
+      if (sourceId && targetId) {
+        children.get(sourceId)?.push(targetId);
+      }
+    });
+    
+    // 找到根节点
+    const hasParent = new Set<string>();
+    edges.forEach(edge => {
+      const targetId = edge.getTargetCellId();
+      if (targetId) hasParent.add(targetId);
+    });
+    
+    nodes.forEach(node => {
+      if (!hasParent.has(node.id)) {
+        roots.push(node.id);
+      }
+    });
+    
+    // 布局参数
+    const levelWidths: number[] = [];
+    const baseNodeSpacing = 120;
+    let currentY = 100;
+    
+    // 计算每层的最大宽度
+    const calculateLevelWidths = (nodeId: string, level: number) => {
+      const node = nodeMap.get(nodeId);
+      if (!node) return;
+      
+      const nodeData = node.getData();
+      const isSpecialNode = nodeData?.isGroup || nodeData?.type === 'condition';
+      const nodeWidth = isSpecialNode ? 400 : 160;
+      const gap = isSpecialNode ? 150 : 100;
+      
+      levelWidths[level] = Math.max(levelWidths[level] || 0, nodeWidth + gap);
+      
+      const childIds = children.get(nodeId) || [];
+      childIds.forEach((childId: string) => calculateLevelWidths(childId, level + 1));
+    };
+    
+    roots.forEach(rootId => calculateLevelWidths(rootId, 0));
+    
+    // 递归布局函数
+    const layoutNode = (nodeId: string, level: number, parentY: number): number => {
+      const node = nodeMap.get(nodeId);
+      if (!node) return parentY;
+      
+      const nodeData = node.getData();
+      const isSpecialNode = nodeData?.isGroup || nodeData?.type === 'condition';
+      const nodeHeight = isSpecialNode ? 220 : 50;
+      const verticalGap = isSpecialNode ? 80 : 40;
+      const spacing = baseNodeSpacing + nodeHeight + verticalGap;
+      
+      const xPosition = levelWidths.slice(0, level).reduce((sum, width) => sum + width, 100);
+      
+      const childIds = children.get(nodeId) || [];
+      
+      if (childIds.length === 0) {
+        // 叶子节点
+        node.setPosition(xPosition, currentY);
+        currentY += spacing;
+        return currentY - spacing;
+      } else {
+        // 非叶子节点，先布局子节点
+        const childPositions: number[] = [];
+        childIds.forEach((childId: string) => {
+          const childY = layoutNode(childId, level + 1, currentY);
+          childPositions.push(childY);
+        });
+        
+        // 父节点居中，确保有足够间隙
+        const minY = Math.min(...childPositions);
+        const maxY = Math.max(...childPositions);
+        const centerY = (minY + maxY) / 2;
+        node.setPosition(xPosition, centerY);
+        return centerY;
+      }
+    };
+    
+    // 布局所有根节点
+    roots.forEach(rootId => {
+      layoutNode(rootId, 0, currentY);
+      currentY += 300; // 不同树之间的间距
+    });
+  };
+
+  return (
+    <>
+      {/* 小地图 */}
+      <div ref={miniMapRef} className="rb:absolute rb:bottom-17 rb:left-5 rb:z-1000"></div>
+      {/* 缩放控制按钮 */}
+      <div className="rb:absolute rb:bottom-5 rb:left-5 rb:flex rb:flex-row rb:gap-2 rb:z-1000">
+        <Button 
+          type={isHandMode ? 'primary' : 'default'}
+          onClick={() => {
+            const newHandMode = !isHandMode;
+            setIsHandMode(newHandMode);
+            if (newHandMode) {
+              graphRef.current?.enablePanning();
+            } else {
+              graphRef.current?.disablePanning();
+            }
+          }}
+        >
+          {isHandMode ? '✋' : '👆'}
+        </Button>
+        <Button onClick={() => graphRef.current?.zoom(0.1)}>+</Button>
+        <Select
+          value={Math.round(zoomLevel * 100)}
+          onChange={(value: number | string) => {
+            if (value === 'fit') {
+              graphRef.current?.zoomToFit({ padding: 20 });
+            } else {
+              graphRef.current?.zoomTo((value as number) / 100);
+            }
+          }}
+          labelRender={(props) => {
+            console.log('props', props)
+            return `${props.value}%`
+          }}
+          className="rb:w-20"
+          options={[
+            { label: '25%', value: 25 },
+            { label: '50%', value: 50 },
+            { label: '75%', value: 75 },
+            { label: '100%', value: 100 },
+            { label: '125%', value: 125 },
+            { label: '150%', value: 150 },
+            { label: '200%', value: 200 },
+            { label: '自适应', value: 'fit' },
+          ]}
+        />
+        <Button onClick={() => graphRef.current?.zoom(-0.1)}>-</Button>
+        <Button disabled={!canUndo} onClick={onUndo}>撤销</Button>
+        <Button disabled={!canRedo} onClick={onRedo}>重做</Button>
+        <Button onClick={handleLayout}>整理</Button>
+      </div>
+    </>
+  );
+};
+
+export default CanvasToolbar;

web/src/views/Workflow/components/Chat/Chat.tsx

@@ -0,0 +1,189 @@
+import { forwardRef, useImperativeHandle, useState, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import clsx from 'clsx'
+import { Input, Form, App } from 'antd'
+import { Space, Button } from 'antd'
+
+import ChatIcon from '@/assets/images/application/chat.png'
+import RbDrawer from '@/components/RbDrawer';
+import VariableConfigModal from './VariableConfigModal'
+import { draftRun } from '@/api/application';
+import Empty from '@/components/Empty'
+import ChatContent from '@/components/Chat/ChatContent'
+import type { ChatItem } from '@/components/Chat/types'
+import ChatSendIcon from '@/assets/images/application/chatSend.svg'
+import dayjs from 'dayjs'
+import type { ChatRef, VariableEditModalRef, StartVariableItem, GraphRef } from '../../types'
+import { type SSEMessage } from '@/utils/stream'
+
+const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef }>(({ appId, graphRef }, ref) => {
+  const { t } = useTranslation()
+  const { message: messageApi } = App.useApp()
+  const [form] = Form.useForm<{ message: string }>()
+  const variableConfigModalRef = useRef<VariableEditModalRef>(null)
+  const [open, setOpen] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [chatList, setChatList] = useState<ChatItem[]>([])
+  const [variables, setVariables] = useState<StartVariableItem[]>([])
+  const [streamLoading, setStreamLoading] = useState(false)
+
+  const handleOpen = () => {
+    setOpen(true)
+    getVariables()
+  }
+  const getVariables = () => {
+    const nodes = graphRef.current?.getNodes()
+    const list = nodes?.map(node => node.getData()) || []
+    const startNodes = list.filter(vo => vo.type === 'start')
+    if (startNodes.length) {
+      const curVariables = startNodes[0].config.variables?.defaultValue
+
+      const initialValue: Record<string, any> = {}
+
+      curVariables.forEach((vo: StartVariableItem) => {
+        if (vo.default) {
+          initialValue[vo.name] = vo.default
+        }
+      })
+      setVariables(curVariables)
+      form.setFieldsValue(initialValue)
+    }
+  }
+  const handleClose = () => {
+    setOpen(false)
+    setChatList([])
+  }
+  const handleEditVariables = () => {
+    variableConfigModalRef.current?.handleOpen()
+  }
+  const handleSave = (values: StartVariableItem[]) => {
+    setVariables([...values])
+  }
+  const handleClusterSend = () => {
+    if (loading || !appId) return
+    let isCanSend = true
+    const params: Record<string, any> = {}
+    if (variables.length > 0) {
+      const needRequired: string[] = []
+      variables.forEach(vo => {
+        params[vo.name] = vo.value ?? vo.defaultValue
+
+        if (vo.required && (params[vo.name] === null || params[vo.name] === undefined || params[vo.name] === '')) {
+          isCanSend = false
+          needRequired.push(vo.name)
+        }
+      })
+
+      if (needRequired.length) {
+        messageApi.error(`${needRequired.join(',')} ${t('workflow.variableRequired')}`)
+      }
+    }
+    if (!isCanSend) {
+      return
+    }
+
+    setLoading(true)
+    const message = form.getFieldValue('message')
+    setChatList(prev => [...prev, {
+      role: 'user',
+      content: message,
+      created_at: Date.now(),
+    }])
+    setChatList(prev => [...prev, {
+      role: 'assistant',
+      content: message,
+      created_at: Date.now(),
+    }])
+
+    const handleStreamMessage = (data: SSEMessage[]) => {
+      setStreamLoading(false)
+
+      data.map(item => {
+        const { chunk } = item.data as { chunk: string; };
+
+        switch(item.event) {
+          case 'message':
+            setChatList(prev => {
+              const lastChat = { ...prev[prev.length - 1] }
+              lastChat.content = lastChat.content + chunk
+
+              return [
+                ...prev.slice(0, prev.length - 1),
+                lastChat
+              ]
+            })
+            break
+          case 'workflow_end':
+            setStreamLoading(false);
+            break;
+        }
+      })
+    };
+    form.setFieldValue('message', undefined)
+    draftRun(appId, {
+      message: message,
+      variables: params,
+      stream: true
+    }, handleStreamMessage)
+      .finally(() => {
+        setLoading(false)
+      })
+  }
+  // 暴露给父组件的方法
+  useImperativeHandle(ref, () => ({
+    handleOpen,
+    handleClose
+  }));
+
+  return (
+    <RbDrawer
+      title={<div className="rb:flex rb:items-center rb:gap-2.5">
+        {t('workflow.run')}
+        {variables.length > 0 && <Space>
+          <Button size="small" onClick={handleEditVariables}>变量</Button>
+        </Space>}
+      </div>}
+      classNames={{
+        body: 'rb:p-0!'
+      }}
+      open={open}
+      onClose={handleClose}
+    >
+      <ChatContent
+        classNames={{
+          'rb:mx-[16px] rb:pt-[24px] rb:h-[calc(100%-76px)]': true,
+          
+        }}
+        contentClassNames="rb:max-w-[400px]!'"
+        empty={<Empty url={ChatIcon} title={t('application.chatEmpty')} isNeedSubTitle={false} size={[240, 200]} className="rb:h-full" />}
+        data={chatList}
+        streamLoading={streamLoading}
+        labelPosition="bottom"
+        labelFormat={(item) => dayjs(item.created_at).locale('en').format('MMMM D, YYYY [at] h:mm A')}
+        errorDesc={t('application.ReplyException')}
+      />
+      <div className="rb:flex rb:items-center rb:gap-2.5 rb:p-4">
+        <Form form={form} style={{width: 'calc(100% - 54px)'}}>
+          <Form.Item name="message" className="rb:mb-0!">
+            <Input 
+              className="rb:h-11 rb:shadow-[0px_2px_8px_0px_rgba(33,35,50,0.1)]" 
+              placeholder={t('application.chatPlaceholder')}
+              onPressEnter={handleClusterSend}
+            />
+          </Form.Item>
+        </Form>
+        <img src={ChatSendIcon} className={clsx("rb:w-11 rb:h-11 rb:cursor-pointer", {
+          'rb:opacity-50': loading,
+        })} onClick={handleClusterSend} />
+      </div>
+
+      <VariableConfigModal
+        ref={variableConfigModalRef}
+        refresh={handleSave}
+        variables={variables}
+      />
+    </RbDrawer>
+  )
+})
+
+export default Chat

web/src/views/Workflow/components/Chat/VariableConfigModal.tsx

@@ -0,0 +1,98 @@
+import { forwardRef, useImperativeHandle, useState } from 'react';
+import { Form, Input, InputNumber, Checkbox } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+import type { StartVariableItem, VariableEditModalRef } from '../../types'
+import RbModal from '@/components/RbModal'
+
+interface VariableEditModalProps {
+  refresh: (values: StartVariableItem[]) => void;
+  variables: StartVariableItem[]
+}
+
+const VariableConfigModal = forwardRef<VariableEditModalRef, VariableEditModalProps>(({
+  refresh,
+  variables
+}, ref) => {
+  const { t } = useTranslation();
+  const [visible, setVisible] = useState(false);
+  const [form] = Form.useForm<{variables: StartVariableItem[]}>();
+  const [loading, setLoading] = useState(false)
+
+  // 封装取消方法，添加关闭弹窗逻辑
+  const handleClose = () => {
+    setVisible(false);
+    form.resetFields();
+    setLoading(false)
+  };
+
+  const handleOpen = () => {
+
+    setVisible(true);
+  };
+  // 封装保存方法，添加提交逻辑
+  const handleSave = () => {
+    form.validateFields().then((values) => {
+      refresh([
+        ...(values?.variables ?? []),
+      ])
+      handleClose()
+    })
+  }
+
+  // 暴露给父组件的方法
+  useImperativeHandle(ref, () => ({
+    handleOpen,
+    handleClose
+  }));
+
+  return (
+    <RbModal
+      title={t('workflow.variableConfig')}
+      open={visible}
+      onCancel={handleClose}
+      okText={t('common.save')}
+      onOk={handleSave}
+      confirmLoading={loading}
+    >
+      <Form
+        form={form}
+        layout="horizontal"
+        scrollToFirstError={{ behavior: 'instant', block: 'end', focus: true }}
+        initialValues={{ variables: variables }}
+      >
+        <Form.List name="variables">
+          {(fields) => (
+            <>
+              {fields.map(({ name }, index) => {
+                const field = variables[index]
+                return (
+                  <Form.Item
+                    key={name}
+                    name={[name, 'value']}
+                    label={field.type === 'boolean' ? undefined : `${field.name}·${field.description}`}
+                    rules={[
+                      { required: field.required, message: field.type === 'boolean' ? t('common.pleaseSelect') : t('common.pleaseEnter') },
+                    ]}
+                  >
+                    {
+                      field.type === 'string' && <Input placeholder={t('common.pleaseEnter')} />
+                    }
+                    {
+                      field.type === 'number' && <InputNumber placeholder={t('common.pleaseEnter')} style={{ width: '100%' }} />
+                    }
+                    {
+                      field.type === 'boolean' && <Checkbox>{`${field.name}·${field.description}`}</Checkbox>
+                    }
+                  </Form.Item>
+                )
+              })}
+            </>
+          )}
+        </Form.List>
+      </Form>
+    </RbModal>
+  );
+});
+
+export default VariableConfigModal;

web/src/views/Workflow/components/NodeLibrary.tsx

@@ -0,0 +1,48 @@
+import { type FC } from 'react';
+import { useTranslation } from 'react-i18next'
+import { Card, Space } from 'antd'
+
+import { nodeLibrary } from '../constant';
+
+const NodeLibrary: FC = () => {
+  const { t } = useTranslation()
+
+  console.log('nodeLibrary', nodeLibrary)
+
+  return (
+    <div className="rb:w-80 rb:fixed rb:h-screen rb:left-0 rb:py-5 rb:px-5.5 rb:overflow-y-auto">
+      <Space size={12} direction="vertical" className="rb:w-full">
+        {nodeLibrary.map(category => (
+          <Card
+            key={category.category}
+            type="inner"
+            title={t(`workflow.${category.category}`)}
+            classNames={{
+              body: "rb:p-[10px]!",
+              header: "rb:bg-[#F6F8FC]!"
+            }}
+          >
+            <Space size={8} direction="vertical" className="rb:w-full">
+              {category.nodes.map((node, nodeIndex) => (
+                <div
+                  key={nodeIndex}
+                  className="rb:bg-white rb:rounded-lg rb:p-2 rb:border rb:border-[#DFE4ED] rb:cursor-pointer rb:flex rb:items-center rb:gap-2 rb:hover:border-[#155EEF] rb:hover:shadow-[0px_2px_4px_0px_rgba(33,35,50,0.15)]"
+                  draggable
+                  onDragStart={(e) => {
+                    e.dataTransfer.setData('application/reactflow', node.type);
+                    e.dataTransfer.setData('application/json', JSON.stringify(node));
+                  }}
+                >
+                  <img src={node.icon} className="rb:w-5 rb:h-5" />
+                  <span className="rb:font-medium rb:text-[12px]">{t(`workflow.${node.type}`)}</span>
+                </div>
+              ))}
+            </Space>
+          </Card>
+        ))}
+      </Space>
+    </div>
+  );
+};
+
+export default NodeLibrary;

web/src/views/Workflow/components/Nodes/AddNode.tsx

@@ -0,0 +1,19 @@
+import clsx from 'clsx';
+import type { ReactShapeConfig } from '@antv/x6-react-shape';
+
+const AddNode: ReactShapeConfig['component'] = ({ node }) => {
+  const data = node?.getData() || {}
+
+  return (
+    <div className={clsx('rb:group rb:relative rb:h-10 rb:w-30 rb:border rb:rounded-xl rb:flex rb:items-center rb:justify-center rb:text-[12px] rb:p-1 rb:box-border', {
+      'rb:border-orange-500 rb:border-[3px] rb:bg-white rb:text-gray-700': data.isSelected,
+      'rb:border-[#d1d5db] rb:bg-white rb:text-[#374151]': !data.isSelected
+    })}>
+      <span className="rb:overflow-hidden rb:whitespace-nowrap rb:text-ellipsis">
+        {data.icon} {data.label}
+      </span>
+    </div>
+  );
+};
+
+export default AddNode;

web/src/views/Workflow/components/Nodes/ConditionNode.tsx

@@ -0,0 +1,155 @@
+import React from 'react';
+import clsx from 'clsx';
+import { Button } from 'antd'
+import type { ReactShapeConfig } from '@antv/x6-react-shape';
+
+const ConditionNode: ReactShapeConfig['component'] = ({ node }) => {
+  const data = node?.getData() || {};
+
+  const addPort = (e: React.MouseEvent) => {
+    if (!node || !node.addPort) return;
+    e.stopPropagation();
+    
+    const currentPorts = node.getPorts();
+    const totalPorts = currentPorts.length;
+    
+    // 如果没有端口，添加第一个端口和ELSE端口
+    if (totalPorts === 0) {
+      // 添加第一个ELIF端口
+      node.addPort({
+        id: 'elif_1',
+        group: 'right',
+        attrs: {
+          text: {
+            text: 'ELIF 1',
+          },
+        },
+      });
+      // 添加ELSE端口
+      node.addPort({
+        id: 'else',
+        group: 'right',
+        attrs: {
+          text: {
+            text: 'ELSE',
+          },
+        },
+      });
+      return;
+    }
+    
+    // 如果只有一个端口，确保它是ELSE，然后在之前添加ELIF
+    if (totalPorts === 1) {
+      const existingPort = currentPorts[0];
+      
+      // 如果现有端口不是ELSE，先移除它
+      if (node.removePort && existingPort.id !== 'else') {
+        node.removePort(existingPort.id as string);
+        
+        // 添加ELIF端口
+        node.addPort({
+          id: 'elif_1',
+          group: 'right',
+          attrs: {
+            text: {
+              text: 'ELIF 1',
+            },
+          },
+        });
+      }
+      
+      // 添加或确保存在ELSE端口
+      if (existingPort.id !== 'else') {
+        node.addPort({
+          id: 'else',
+          group: 'right',
+          attrs: {
+            text: {
+              text: 'ELSE',
+            },
+          },
+        });
+      }
+      return;
+    }
+    
+    // 获取最后一个端口，确保它是ELSE
+    let lastPort = currentPorts[totalPorts - 1];
+    
+    // 如果最后一个端口不是ELSE，先移除它
+    if (node.removePort && lastPort.id !== 'else') {
+      node.removePort(lastPort.id as string);
+      
+      // 添加ELSE端口作为最后一个
+      node.addPort({
+        id: 'else',
+        group: 'right',
+        attrs: {
+          text: {
+            text: 'ELSE',
+          },
+        },
+      });
+      
+      // 更新currentPorts和totalPorts
+      const updatedPorts = node.getPorts();
+      const updatedTotal = updatedPorts.length;
+      lastPort = updatedPorts[updatedTotal - 1];
+    }
+    
+    // 计算新的ELIF端口数量（最后一个是ELSE，不算在内）
+    const elifCount = totalPorts - 1;
+    const newElifCount = elifCount + 1;
+    
+    // 如果有removePort方法，先移除最后一个端口(ELSE)，添加新的ELIF端口，再添加回ELSE端口
+    if (node.removePort) {
+      // 移除最后一个端口(ELSE)
+      node.removePort(lastPort.id as string);
+      
+      // 添加新的ELIF端口在倒数第二个位置
+      node.addPort({
+        id: `elif_${newElifCount}`,
+        group: 'right',
+        attrs: {
+          text: {
+            text: `ELIF ${newElifCount}`,
+          },
+        },
+      });
+      
+      // 添加回ELSE端口
+      node.addPort({
+        id: 'else',
+        group: 'right',
+        attrs: {
+          text: {
+            text: 'ELSE',
+          },
+        },
+      });
+    }
+  };
+
+  // const removeElif = (e: React.MouseEvent) => {
+  //   e.stopPropagation();
+  // };
+
+  return (
+    <div className={clsx(`rb:border rb:rounded-[12px] rb:relative rb:min-w-[200px] rb:min-h-[120px] rb:p-2`, {
+      'rb:border-orange-500 rb:border-[3px] rb:bg-orange-50 rb:text-gray-700': data.isSelected,
+      'rb:border-[#d1d5db] rb:bg-[#FFFFFF] rb:text-[#374151]': !data.isSelected
+    })}>
+
+      <Button onClick={addPort}>+ 添加 ELIF</Button>
+      {/* 标题区域 */}
+      <div className="rb:absolute rb:-top-3 rb:left-2 rb:bg-blue-500 rb:rounded-2xl rb:px-3 rb:py-1 rb:flex rb:items-center rb:gap-1.5 rb:text-white rb:text-xs rb:font-bold rb:z-10">
+        <div className="rb:w-4 rb:h-4 rb:bg-white rb:rounded rb:flex rb:items-center rb:justify-center rb:text-blue-500 rb:text-[10px]">
+          🔀
+        </div>
+        条件分支
+      </div>
+    </div>
+  );
+};
+
+export default ConditionNode;

web/src/views/Workflow/components/Nodes/GroupStartNode.tsx

@@ -0,0 +1,19 @@
+import clsx from 'clsx';
+import type { ReactShapeConfig } from '@antv/x6-react-shape';
+
+const GroupStartNode: ReactShapeConfig['component'] = ({ node }) => {
+  const data = node?.getData() || {}
+
+  return (
+    <div className={clsx('rb:group rb:relative rb:h-10 rb:w-20 rb:border rb:rounded-xl rb:flex rb:items-center rb:justify-center rb:text-[12px] rb:p-1 rb:box-border', {
+      'rb:border-orange-500 rb:border-[3px] rb:bg-white rb:text-gray-700': data.isSelected,
+      'rb:border-[#d1d5db] rb:bg-white rb:text-[#374151]': !data.isSelected
+    })}>
+      <span className="rb:overflow-hidden rb:whitespace-nowrap rb:text-ellipsis">
+        {data.icon} {data.label}
+      </span>
+    </div>
+  );
+};
+
+export default GroupStartNode;

web/src/views/Workflow/components/Nodes/IterationNode.tsx

@@ -0,0 +1,98 @@
+import { useEffect } from 'react';
+import clsx from 'clsx';
+import { Dropdown } from 'antd';
+import { SmallDashOutlined } from '@ant-design/icons';
+import type { ReactShapeConfig } from '@antv/x6-react-shape';
+import { graphNodeLibrary } from '../../constant';
+
+interface NodeData {
+  isSelected?: boolean;
+  type?: string;
+  label?: string;
+  icon?: string;
+  parentId?: string;
+  isGroup?: boolean;
+}
+
+const IterationNode: ReactShapeConfig['component'] = ({ node, graph }) => {
+  const data = node.getData() as NodeData;
+
+  useEffect(() => {
+    initNodes()
+  }, [])
+
+  const initNodes = () => {
+    // 添加默认子节点
+    const parentBBox = node.getBBox();
+    const centerX = parentBBox.x + 24; // 默认节点宽度的一半
+    const centerY = parentBBox.y + 50; // 默认节点高度的一半
+    
+    const childNode1 = graph.addNode({
+      ...graphNodeLibrary.groupStart,
+      x: centerX,
+      y: centerY,
+      data: {
+        type: 'default',
+        label: '开始',
+        // icon: '📌',
+        parentId: node.id,
+        isDefault: true // 标记为默认节点，不可删除
+      },
+    });
+    const childNode2 = graph.addNode({
+      ...graphNodeLibrary.addStart,
+      x: centerX + 150,
+      y: centerY,
+      data: {
+        type: 'default',
+        label: '添加节点',
+        icon: '+',
+        parentId: node.id,
+      },
+    });
+    node.addChild(childNode1)
+    node.addChild(childNode2)
+  }
+  
+  return (
+    <div className={clsx('rb:group rb:border-2 rb:border-dashed rb:rounded-xl rb:relative rb:min-w-75 rb:min-h-50 rb:p-4', {
+      'rb:border-orange-500 rb:border-[3px] rb:bg-white rb:text-gray-700': data?.isSelected,
+      'rb:border-[#d1d5db] rb:bg-white rb:text-[#374151]': !data?.isSelected
+    })}>
+      {/* 标题区域 */}
+      <div className="rb:absolute rb:-top-3 rb:left-4 rb:bg-[#10b981] rb:rounded-[20px] rb:p-[8px_16px] rb:flex rb:items-center rb:gap-2 rb:text-white rb:text-[14px] rb:font-bold rb:z-10">
+        <div className="rb:w-5 rb:h-5 rb:bg-[#FFFFFF] rb:rounded-sm rb:flex rb:items-center rb:justify-center rb:text-[12px] rb:text-[#10b981]">
+          🔁
+        </div>
+        迭代
+      </div>
+      <Dropdown
+        menu={{items: [
+          {
+            key: '1',
+            label: '删除',
+          },
+          {
+            key: '2',
+            label: '复制',
+          },
+          {
+            key: '3',
+            label: '删除',
+          }
+        ]}}
+      >
+        <SmallDashOutlined 
+          className={clsx("rb:cursor-pointer rb:right-1 rb:top-1 rb:invisible rb:absolute rb:group-hover:visible", {
+            'rb:visible': data.isSelected
+          })}
+        />
+      </Dropdown>
+      
+      {/* 画布内容区域 */}
+      <div className="rb:mt-6 rb:min-h-37.5 rb:w-full rb:bg-[radial-gradient(circle,#e5e7eb_1px,transparent_1px)] rb:bg-size-[12px_12px]"></div>
+    </div>
+  );
+};
+
+export default IterationNode;

web/src/views/Workflow/components/Nodes/LoopNode.tsx

@@ -0,0 +1,98 @@
+import { useEffect } from 'react';
+import clsx from 'clsx';
+import { Dropdown } from 'antd';
+import { SmallDashOutlined } from '@ant-design/icons';
+import type { ReactShapeConfig } from '@antv/x6-react-shape';
+import { graphNodeLibrary } from '../../constant';
+
+interface NodeData {
+  isSelected?: boolean;
+  type?: string;
+  label?: string;
+  icon?: string;
+  parentId?: string;
+  isGroup?: boolean;
+}
+
+const LoopNode: ReactShapeConfig['component'] = ({ node, graph }) => {
+  const data = node.getData() as NodeData;
+
+  useEffect(() => {
+    initNodes()
+  }, [])
+
+  const initNodes = () => {
+    // 添加默认子节点
+    const parentBBox = node.getBBox();
+    const centerX = parentBBox.x + 24; // 默认节点宽度的一半
+    const centerY = parentBBox.y + 50; // 默认节点高度的一半
+    
+    const childNode1 = graph.addNode({
+      ...graphNodeLibrary.groupStart,
+      x: centerX,
+      y: centerY,
+      data: {
+        type: 'default',
+        label: '开始',
+        // icon: '📌',
+        parentId: node.id,
+        isDefault: true // 标记为默认节点，不可删除
+      },
+    });
+    const childNode2 = graph.addNode({
+      ...graphNodeLibrary.addStart,
+      x: centerX + 150,
+      y: centerY,
+      data: {
+        type: 'default',
+        label: '添加节点',
+        icon: '+',
+        parentId: node.id,
+      },
+    });
+    node.addChild(childNode1)
+    node.addChild(childNode2)
+  }
+  
+  return (
+    <div className={clsx('rb:group rb:border-2 rb:border-dashed rb:rounded-[12px] rb:relative rb:min-w-[300px] rb:min-h-[200px] rb:p-4', {
+      'rb:border-orange-500 rb:border-[3px] rb:bg-white rb:text-gray-700': data?.isSelected,
+      'rb:border-[#d1d5db] rb:bg-white rb:text-[#374151]': !data?.isSelected
+    })}>
+      {/* 标题区域 */}
+      <div className="rb:absolute rb:-top-3 rb:left-4 rb:bg-[#10b981] rb:rounded-[20px] rb:p-[8px_16px] rb:flex rb:items-center rb:gap-2 rb:text-white rb:text-[14px] rb:font-bold rb:z-10">
+        <div className="rb:w-5 rb:h-5 rb:bg-[#FFFFFF] rb:rounded-sm rb:flex rb:items-center rb:justify-center rb:text-[12px] rb:text-[#10b981]">
+          ♻️
+        </div>
+        循环
+      </div>
+      <Dropdown
+        menu={{items: [
+          {
+            key: '1',
+            label: '删除',
+          },
+          {
+            key: '2',
+            label: '复制',
+          },
+          {
+            key: '3',
+            label: '删除',
+          }
+        ]}}
+      >
+        <SmallDashOutlined 
+          className={clsx("rb:cursor-pointer rb:right-1 rb:top-1 rb:invisible rb:absolute rb:group-hover:visible", {
+            'rb:visible': data.isSelected
+          })}
+        />
+      </Dropdown>
+      
+      {/* 画布内容区域 */}
+      <div className="rb:mt-6 rb:min-h-[150px] rb:w-full rb:bg-[radial-gradient(circle,#e5e7eb_1px,transparent_1px)] rb:bg-size-[12px_12px]"></div>
+    </div>
+  );
+};
+
+export default LoopNode;

web/src/views/Workflow/components/Nodes/NormalNode.tsx

@@ -0,0 +1,31 @@
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next'
+import type { ReactShapeConfig } from '@antv/x6-react-shape';
+
+const NormalNode: ReactShapeConfig['component'] = ({ node }) => {
+  const data = node?.getData() || {}
+  const { t } = useTranslation()
+
+  return (
+    <div className={clsx('rb:cursor-pointer rb:group rb:relative rb:h-16 rb:w-60 rb:p-2.5 rb:border rb:rounded-xl rb:bg-white rb:hover:shadow-[0px_2px_6px_0px_rgba(33,35,50,0.12)]', {
+      'rb:border-[#155EEF]': data.isSelected,
+      'rb:border-[#DFE4ED]': !data.isSelected
+    })}>
+      <div className="rb:flex rb:items-center rb:justify-between">
+        <div className="rb:flex rb:items-center rb:gap-2 rb:flex-1">
+          <img src={data.icon} className="rb:w-5 rb:h-5" />
+          <div className="rb:wrap-break-word rb:line-clamp-1">{data.name ?? t(`workflow.${data.type}`)}</div>
+        </div>
+        
+        <div 
+          className="rb:w-5 rb:h-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/deleteBorder.svg')] rb:hover:bg-[url('@/assets/images/deleteBg.svg')]" 
+          onClick={() => {}}
+        ></div>
+      </div>
+
+      <div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4 rb:mt-1.5">{t('workflow.clickToConfigure')}</div>
+    </div>
+  );
+};
+
+export default NormalNode;

web/src/views/Workflow/components/Properties/MessageEditor.tsx

@@ -0,0 +1,89 @@
+import { type FC } from 'react';
+import { Input, Form, Space, Button, Row, Col, Select, type FormListOperation } from 'antd';
+import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
+
+interface TextareaProps {
+  parentName?: string;
+  label?: string;
+  placeholder?: string;
+  value?: string;
+  onChange?: (value?: string) => void;
+}
+const roleOptions = [
+  // { label: 'SYSTEM', value: 'SYSTEM' },
+  { label: 'USER', value: 'USER' },
+  { label: 'ASSISTANT', value: 'ASSISTANT' },
+]
+const MessageEditor: FC<TextareaProps> = ({
+  parentName = 'messages',
+  placeholder,
+}) => {
+  const form = Form.useFormInstance();
+  const values = form.getFieldsValue()
+
+  const handleAdd = (add: FormListOperation['add']) => {
+    const list = values[parentName];
+    const lastRole = list[list.length - 1].role
+
+    add({
+      role: lastRole === 'USER' ? 'ASSISTANT' : 'USER',
+      content: undefined
+    })
+  }
+  
+  return (
+    <div>
+      <Form.List name={parentName}>
+        {(fields, { add, remove }) => (
+          <>
+            {fields.map(({ key, name, ...restField }) => {
+              const currentRole = values[parentName]?.[key].role || 'USER'
+              
+              return (
+                <Space key={key} direction="vertical" className="rb:w-full rb:border rb:border-[#DFE4ED] rb:rounded-md rb:px-2 rb:py-1.5">
+                  <Row>
+                    <Col span={12}>
+                      <Form.Item
+                        {...restField}
+                        name={[name, 'role']}
+                        noStyle
+                      >
+                        {currentRole === 'SYSTEM'
+                          ? <Input disabled />
+                          :
+                          <Select
+                            options={roleOptions}
+                            disabled={currentRole === 'SYSTEM'}
+                          />
+                        }
+                      </Form.Item>
+                    </Col>
+                    {currentRole !== 'SYSTEM' && <Col span={12}>
+                      <div className="rb:h-full rb:flex rb:justify-end rb:items-center">
+                        <MinusCircleOutlined onClick={() => remove(name)} />
+                      </div>
+                    </Col>}
+                  </Row>
+                  <Form.Item
+                    {...restField}
+                    name={[name, 'content']}
+                    noStyle
+                  >
+                    <Input.TextArea placeholder={placeholder} />
+                  </Form.Item>
+                </Space>
+              )
+            })}
+            <Form.Item className="rb:mt-3!">
+              <Button type="dashed" onClick={() => handleAdd(add)} block icon={<PlusOutlined />}>
+                Add field
+              </Button>
+            </Form.Item>
+          </>
+        )}
+      </Form.List>
+    </div>
+  );
+};
+
+export default MessageEditor;

web/src/views/Workflow/components/Properties/VariableEditModal.tsx

@@ -0,0 +1,180 @@
+import { forwardRef, useImperativeHandle, useState } from 'react';
+import { Form, Input, Select, InputNumber, Checkbox, Tag } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+import type { StartVariableItem, VariableEditModalRef } from '../../types'
+import RbModal from '@/components/RbModal'
+import SortableList from '@/components/SortableList'
+
+const FormItem = Form.Item;
+
+interface VariableEditModalProps {
+  refresh: (values: StartVariableItem) => void;
+}
+
+const types = [
+  'string',
+  'number', 
+  'boolean',
+  // 'array',
+  // 'object'
+]
+const variableType = {
+  string: 'string',
+  number: 'number',
+  boolean: 'boolean',
+  // array: 'array',
+  // object: 'object',
+}
+
+const VariableEditModal = forwardRef<VariableEditModalRef, VariableEditModalProps>(({
+  refresh
+}, ref) => {
+  const { t } = useTranslation();
+  const [visible, setVisible] = useState(false);
+  const [form] = Form.useForm<StartVariableItem>();
+  const [loading, setLoading] = useState(false)
+  const [editVo, setEditVo] = useState<StartVariableItem | null>(null)
+
+  const values = Form.useWatch([], form);
+
+  // 封装取消方法，添加关闭弹窗逻辑
+  const handleClose = () => {
+    setVisible(false);
+    form.resetFields();
+    setLoading(false)
+    setEditVo(null)
+  };
+
+  const handleOpen = (variable?: StartVariableItem) => {
+    setVisible(true);
+    if (variable) {
+      setEditVo(variable || null)
+      form.setFieldsValue(variable)
+    } else {
+      form.resetFields();
+    }
+  };
+  // 封装保存方法，添加提交逻辑
+  const handleSave = () => {
+    form.validateFields().then((values) => {
+      refresh({
+        ...(editVo || {}),
+        ...values,
+      })
+      handleClose()
+    })
+  }
+
+  // 暴露给父组件的方法
+  useImperativeHandle(ref, () => ({
+    handleOpen,
+    handleClose
+  }));
+  // 变量类型改变时，更新初始化其他字段值
+  const handleChangeType = (value: StartVariableItem['type']) => {
+    if (value) {
+      form.setFieldsValue({
+        type: value,
+        name: undefined,
+        description: undefined,
+        max_length: undefined,
+        default: undefined
+      })
+    }
+  }
+
+  return (
+    <RbModal
+      title={editVo ? t('workflow.config.start.editVariable') : t('workflow.config.start.addVariable')}
+      open={visible}
+      onCancel={handleClose}
+      okText={t('common.save')}
+      onOk={handleSave}
+      confirmLoading={loading}
+    >
+      <Form
+        form={form}
+        layout="vertical"
+        scrollToFirstError={{ behavior: 'instant', block: 'end', focus: true }}
+      >
+        {/* 变量类型 */}
+        <FormItem
+          name="type"
+          label={t('workflow.config.start.variableType')}
+          rules={[{ required: true, message: t('common.pleaseSelect') }]}
+        >
+          <Select
+            placeholder={t('common.pleaseSelect')}
+            options={types.map(key => ({
+              value: key,
+              label: t(`workflow.config.start.${key}`),
+            }))}
+            onChange={handleChangeType}
+            labelRender={(props) => <div className="rb:flex rb:justify-between rb:items-center">{props.label} <Tag color="blue">{variableType[props.value as keyof typeof variableType]}</Tag></div>}
+            optionRender={(props) => <div className="rb:flex rb:justify-between rb:items-center">{props.label} <Tag color="blue">{variableType[props.value as keyof typeof variableType]}</Tag></div>}
+          />
+        </FormItem>
+        {/* 变量名称 */}
+        <FormItem
+          name="name"
+          label={t('workflow.config.start.variableName')}
+          rules={[
+            { required: true, message: t('common.pleaseEnter') },
+            { pattern: /^[a-zA-Z_][a-zA-Z0-9_]*$/, message: t('workflow.config.start.invalidVariableName') },
+          ]}
+        >
+          <Input placeholder={t('common.enter')} />
+        </FormItem>
+
+        {/* 显示名称 */}
+        <FormItem
+          name="description"
+          label={t('workflow.config.start.description')}
+          rules={[{ required: true, message: t('common.pleaseEnter') }]}
+        >
+          <Input placeholder={t('common.enter')} />
+        </FormItem>
+
+        {/* 最大长度 */}
+        {['string'].includes(values?.type) && (
+          <FormItem
+            name="max_length"
+            label={t('workflow.config.start.max_length')}
+          >
+            <InputNumber placeholder={t('common.enter')} style={{ width: '100%' }} />
+          </FormItem>
+        )}
+        {/* 默认值 */}
+        {['string', 'number', 'boolean'].includes(values?.type) && (
+          <FormItem
+            name="default"
+            label={t('workflow.config.start.default')}
+          >
+            {['string'].includes(values.type) && <Input placeholder={t('common.enter')} />}
+            {['number'].includes(values.type) && <InputNumber placeholder={t('common.enter')} style={{ width: '100%' }} />}
+            {['boolean'].includes(values.type) && <Select placeholder={t('common.pleaseSelect')} options={[{ value: true, label: t('workflow.config.start.defaultChecked') }, { value: false, label: t('workflow.config.start.notDefaultChecked') }]} />}
+          </FormItem>
+        )}
+        {/* 选项 */}
+        {['array'].includes(values?.type) && (
+          <FormItem
+            name="options"
+            label={t('workflow.config.start.options')}
+          >
+            <SortableList />
+          </FormItem>
+        )}
+        {/* 是否必填 */}
+        <FormItem
+          name="required"
+          valuePropName="checked"
+        >
+          <Checkbox>{t('workflow.config.start.required')}</Checkbox>
+        </FormItem>
+      </Form>
+    </RbModal>
+  );
+});
+
+export default VariableEditModal;

web/src/views/Workflow/components/Properties/index.tsx

@@ -0,0 +1,235 @@
+import { type FC, useEffect, useState, useRef } from "react";
+import { useTranslation } from 'react-i18next'
+import { Graph, Node } from '@antv/x6';
+import { Form, Input, Button, Select, InputNumber, Slider, Space, Divider, App } from 'antd'
+
+import type { NodeConfig, NodeProperties, StartVariableItem, VariableEditModalRef } from '../../types'
+import Empty from '@/components/Empty';
+import emptyIcon from '@/assets/images/workflow/empty.png'
+import CustomSelect from "@/components/CustomSelect";
+import VariableEditModal from './VariableEditModal';
+import MessageEditor from './MessageEditor'
+
+interface PropertiesProps {
+  selectedNode?: Node | null; 
+  setSelectedNode: (node: Node | null) => void;
+  graphRef: React.MutableRefObject<Graph | undefined>;
+  blankClick: () => void;
+  deleteEvent: () => void;
+  copyEvent: () => void;
+  parseEvent: () => void;
+}
+const Properties: FC<PropertiesProps> = ({
+  selectedNode,
+}) => {
+  const { t } = useTranslation()
+  const { modal } = App.useApp()
+  const [form] = Form.useForm<NodeConfig>();
+  const [configs, setConfigs] = useState<Record<string,NodeConfig>>({} as Record<string,NodeConfig>)
+  const values = Form.useWatch([], form);
+  const variableModalRef = useRef<VariableEditModalRef>(null)
+  const [editIndex, setEditIndex] = useState<number | null>(null)
+
+  useEffect(() => {
+    if (selectedNode && form) {
+      const { type = 'default', name = '', config } = selectedNode.getData() || {}
+      const initialValue: Record<string, any> = {}
+      Object.keys(config || {}).forEach(key => {
+        if (config && config[key] && 'defaultValue' in config[key]) {
+          initialValue[key] = config[key].defaultValue
+        }
+      })
+
+      form.setFieldsValue({
+        type,
+        id: selectedNode.id,
+        name,
+        ...initialValue,
+      })
+      setConfigs(config || {})
+    }
+  }, [selectedNode, form])
+
+  const updateNodeLabel = (newLabel: string) => {
+    if (selectedNode && form) {
+      const nodeData = selectedNode.data as NodeProperties;
+      selectedNode.setAttrByPath('text/text', `${nodeData.icon} ${newLabel}`);
+      selectedNode.setData({ ...selectedNode.data, name: newLabel });
+    }
+  };
+
+  useEffect(() => {
+    if (values && selectedNode) {
+      const { id, ...rest } = values
+
+      Object.keys(values).forEach(key => {
+        if (selectedNode.data.config[key]) {
+          selectedNode.data.config[key].defaultValue = values[key]
+        }
+      })
+
+      selectedNode?.setData({ ...selectedNode.data, ...rest })
+    }
+  }, [values, selectedNode])
+
+  const handleAddVariable = () => {
+    variableModalRef.current?.handleOpen()
+  }
+  const handleEditVariable = (index: number, vo: StartVariableItem) => {
+    variableModalRef.current?.handleOpen(vo)
+    setEditIndex(index)
+  }
+  const handleRefreshVariable = (value: StartVariableItem) => {
+    if (!selectedNode) return
+    if (editIndex !== null) {
+      const defaultValue = selectedNode.data.config.variables.defaultValue ?? []
+      defaultValue[editIndex] = value
+      selectedNode.data.config.variables.defaultValue = [...defaultValue]
+    } else {
+      const defaultValue = selectedNode.data.config.variables.defaultValue ?? []
+      selectedNode.data.config.variables.defaultValue = [...defaultValue, value]
+    }
+    selectedNode?.setData({ ...selectedNode.data})
+
+    setConfigs({ ...selectedNode.data.config})
+  }
+  const handleDeleteVariable = (index: number, vo: StartVariableItem) => {
+    if (!selectedNode) return
+
+    modal.confirm({
+      title: t('common.confirmDeleteDesc', { name: vo.name }),
+      okText: t('common.delete'),
+      okType: 'danger',
+      onOk: () => {
+        const defaultValue = selectedNode.data.config.variables.defaultValue ?? []
+        defaultValue.splice(index, 1)
+        selectedNode.data.config.variables.defaultValue = [...defaultValue]
+
+        selectedNode?.setData({ ...selectedNode.data })
+
+        setConfigs({ ...selectedNode.data.config })
+      }
+    })
+  }
+
+  return (
+    <div className="rb:w-75 rb:fixed rb:right-0 rb:top-16 rb:bottom-0 rb:p-3">
+      <div className="rb:font-medium rb:leading-5 rb:mb-3">{t('workflow.nodeProperties')}</div>
+      {!selectedNode
+        ? <Empty url={emptyIcon} size={140} className="rb:h-full rb:mx-15" title={t('workflow.empty')} />
+        : <Form form={form} layout="vertical" className="rb:h-[calc(100%-20px)] rb:overflow-y-auto">
+            <Form.Item name="name" label={t('workflow.nodeName')}>
+              <Input
+                placeholder={t('common.pleaseEnter')}
+                onChange={(e) => {
+                  updateNodeLabel(e.target.value);
+                }}
+              />
+          </Form.Item>
+          <Form.Item name="id" label="ID">
+            <Input disabled />
+          </Form.Item>
+            {configs && Object.keys(configs).length > 0 && Object.keys(configs).map((key) => {
+              const config = configs[key] || {}
+
+              if (selectedNode.data.type === 'start' && key === 'variables' && config.type === 'define') {
+                return (
+                  <div key={key}>
+                    <div className="rb:flex rb:items-center rb:justify-between rb:mb-2.75">
+                      <div className="rb:leading-5">
+                        {t(`workflow.config.${selectedNode.data.type}.${key}`)}
+                      </div>
+                      <Button style={{padding: '0 8px', height: '24px'}} onClick={handleAddVariable}>+{t('application.addVariables')}</Button>
+                    </div>
+
+                    <Space size={4} direction="vertical" className="rb:w-full">
+                      {Array.isArray(config.defaultValue) && config.defaultValue?.map((vo, index) =>
+                        <div key={`${vo.name}}-${index}`} className="rb:p-[4px_8px] rb:text-[12px] rb:text-[#5B6167] rb:flex rb:items-center rb:justify-between rb:border rb:border-[#DFE4ED] rb:rounded-md rb:group rb:cursor-pointer">
+                          <span>{vo.name}·{vo.description}</span>
+
+                          <div className="rb:group-hover:hidden rb:flex rb:items-center rb:gap-1">
+                            {vo.required && <span>{t('workflow.config.start.required')}</span>}
+                            {vo.type}
+                          </div>
+                          <Space className="rb:hidden! rb:group-hover:flex!">
+                            <div
+                              className="rb:w-4.5 rb:h-4.5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/editBorder.svg')] rb:hover:bg-[url('@/assets/images/editBg.svg')]"
+                              onClick={() => handleEditVariable(index, vo)}
+                            ></div>
+                            <div
+                              className="rb:w-4.5 rb:h-4.5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/deleteBorder.svg')] rb:hover:bg-[url('@/assets/images/deleteBg.svg')]"
+                              onClick={() => handleDeleteVariable(index, vo)}
+                            ></div>
+                          </Space>
+                        </div>
+                      )}
+                      <Divider size="small" />
+                      {config.sys?.map((vo, index) =>
+                        <div key={index} className="rb:p-[4px_8px] rb:text-[12px] rb:text-[#5B6167] rb:flex rb:items-center rb:justify-between rb:border rb:border-[#DFE4ED] rb:rounded-md">
+                          <div>
+                            <span>sys.{vo.name}</span>
+                          </div>
+                          {vo.type}
+                        </div>
+                      )}
+                    </Space>
+                  </div>
+                )
+              }
+
+              if (selectedNode.data.type === 'llm' && key === 'messages' && config.type === 'define') {
+                return (
+                  <Form.Item key={key} name={key}>
+                    <MessageEditor />
+                  </Form.Item>
+                )
+              }
+
+              if (config.type === 'define') {
+                return null
+              }
+
+              return (
+                <Form.Item 
+                  key={key} 
+                  name={key} 
+                  label={t(`workflow.config.${selectedNode.data.type}.${key}`)}
+                >
+                  {config.type === 'input'
+                    ? <Input placeholder={t('common.pleaseEnter')} />
+                    : config.type === 'textarea'
+                    ? <Input.TextArea placeholder={t('common.pleaseEnter')} />
+                    : config.type === 'select'
+                    ? <Select
+                      options={config.options}
+                      placeholder={t('common.pleaseSelect')}
+                    />
+                    : config.type === 'inputNumber'
+                    ? <InputNumber />
+                    : config.type === 'slider'
+                    ? <Slider min={config.min} max={config.max} step={config.step} />
+                    : config.type === 'customSelect'
+                    ? <CustomSelect
+                      placeholder={t('common.pleaseSelect')}
+                      url={config.url as string}
+                      params={config.params}
+                      hasAll={false}
+                      valueKey={config.valueKey}
+                      labelKey={config.labelKey}
+                    />
+                    : null
+                  }
+                </Form.Item>
+              )
+            })}
+          </Form>
+      }
+
+      <VariableEditModal
+        ref={variableModalRef}
+        refresh={handleRefreshVariable}
+      />
+    </div>
+  );
+};
+export default Properties;

web/src/views/Workflow/constant.ts

@@ -0,0 +1,339 @@
+import LoopNode from './components/Nodes/LoopNode';
+import IterationNode from './components/Nodes/IterationNode';
+import NormalNode from './components/Nodes/NormalNode';
+import ConditionNode from './components/Nodes/ConditionNode';
+import GroupStartNode from './components/Nodes/GroupStartNode';
+import AddNode from './components/Nodes/AddNode'
+import type { PortMetadata, GroupMetadata } from '@antv/x6/lib/model/port';
+import type { ReactShapeConfig } from '@antv/x6-react-shape';
+
+// Import workflow icons
+import startIcon from '@/assets/images/workflow/start.png';
+import endIcon from '@/assets/images/workflow/end.png';
+import answerIcon from '@/assets/images/workflow/answer.png';
+import llmIcon from '@/assets/images/workflow/llm.png';
+import modelSelectionIcon from '@/assets/images/workflow/model_selection.png';
+import modelVotingIcon from '@/assets/images/workflow/model_voting.png';
+import ragIcon from '@/assets/images/workflow/rag.png';
+import classificationIcon from '@/assets/images/workflow/classification.png';
+import parameterExtractionIcon from '@/assets/images/workflow/parameter_extraction.png';
+import taskPlanningIcon from '@/assets/images/workflow/task_planning.png';
+import reasoningControlIcon from '@/assets/images/workflow/reasoning_control.png';
+import selfReflectionIcon from '@/assets/images/workflow/self_reflection.png';
+import memoryEnhancementIcon from '@/assets/images/workflow/memory_enhancement.png';
+import agentSchedulingIcon from '@/assets/images/workflow/agent_scheduling.png';
+import agentCollaborationIcon from '@/assets/images/workflow/agent_collaboration.png';
+import agentArbitrationIcon from '@/assets/images/workflow/agent_arbitration.png';
+import conditionIcon from '@/assets/images/workflow/condition.png';
+import iterationIcon from '@/assets/images/workflow/iteration.png';
+import loopIcon from '@/assets/images/workflow/loop.png';
+import parallelIcon from '@/assets/images/workflow/parallel.png';
+import aggregatorIcon from '@/assets/images/workflow/aggregator.png';
+import httpRequestIcon from '@/assets/images/workflow/http_request.png';
+import toolsIcon from '@/assets/images/workflow/tools.png';
+import codeExecutionIcon from '@/assets/images/workflow/code_execution.png';
+import templateRenderingIcon from '@/assets/images/workflow/template_rendering.png';
+import sensitiveDetectionIcon from '@/assets/images/workflow/sensitive_detection.png';
+import outputAuditIcon from '@/assets/images/workflow/output_audit.png';
+import selfOptimizationIcon from '@/assets/images/workflow/self_optimization.png';
+import processEvolutionIcon from '@/assets/images/workflow/process_evolution.png';
+
+import { getModelListUrl } from '@/api/models'
+import type { NodeLibrary } from './types'
+
+export const nodeLibrary: NodeLibrary[] = [
+  {
+    category: "coreNode",
+    nodes: [
+      { type: "start", icon: startIcon,
+        config: {
+          variables: {
+            type: 'define',
+            sys: [
+              {
+                name: "message",
+                type: "string",
+                readonly: true
+              },
+              {
+                name: "conversation_id",
+                type: "string",
+                readonly: true
+              },
+              {
+                name: "execution_id",
+                type: "string",
+                readonly: true
+              },
+              {
+                name: "workspace_id",
+                type: "string",
+                readonly: true
+              },
+              {
+                name: "user_id",
+                type: "string",
+                readonly: true
+              },
+            ],
+            defaultValue: []
+          }
+        }
+      },
+      {
+        type: "end", icon: endIcon,
+        config: {
+          output: {
+            type: 'textarea'
+          }
+        }
+      },
+      // { type: "answer", icon: answerIcon },
+    ]
+  },
+  {
+    category: "aiAndCognitiveProcessing",
+    nodes: [
+      { type: "llm", icon: llmIcon,
+        config: {
+          model_id: {
+            type: 'customSelect',
+            url: getModelListUrl,
+            params: { type: 'llm,chat' }, // llm/chat
+            valueKey: 'id',
+            labelKey: 'name',
+          },
+          temperature: {
+            type: 'slider',
+            max: 2, 
+            min: 0, 
+            step: 0.1,
+            defaultValue: 0.7
+          },
+          max_tokens: { 
+            type: 'slider', 
+            max: 32000, 
+            min: 256, 
+            step: 1, 
+            defaultValue: 2000 
+          },
+          messages: {
+            type: 'define',
+            defaultValue: [
+              {
+                role: 'SYSTEM',
+                content: undefined,
+                readonly: true
+              },
+            ]
+          }
+        }
+      },
+      // { type: "model_selection", icon: modelSelectionIcon },
+      // { type: "model_voting", icon: modelVotingIcon },
+      // { type: "rag", icon: ragIcon },
+      // { type: "classification", icon: classificationIcon },
+      // { type: "parameter_extraction", icon: parameterExtractionIcon }
+    ]
+  },
+  /*
+  {
+    category: "cognitiveUpgrading",
+    nodes: [
+      { type: "task_planning", icon: taskPlanningIcon },
+      { type: "reasoning_control", icon: reasoningControlIcon },
+      { type: "self_reflection", icon: selfReflectionIcon },
+      { type: "memory_enhancement", icon: memoryEnhancementIcon }
+    ]
+  },
+  {
+    category: "agentCollaborationNode",
+    nodes: [
+      { type: "agent_scheduling", icon: agentSchedulingIcon },
+      { type: "agent_collaboration", icon: agentCollaborationIcon },
+      { type: "agent_arbitration", icon: agentArbitrationIcon }
+    ]
+  },
+  {
+    category: "flowControl",
+    nodes: [
+      { type: "condition", icon: conditionIcon },
+      { type: "iteration", icon: iterationIcon },
+      { type: "loop", icon: loopIcon },
+      { type: "parallel", icon: parallelIcon },
+      { type: "aggregator", icon: aggregatorIcon }
+    ]
+  },
+  {
+    category: "externalInteraction",
+    nodes: [
+      { type: "http_request", icon: httpRequestIcon },
+      { type: "tools", icon: toolsIcon },
+      { type: "code_execution", icon: codeExecutionIcon },
+      { type: "template_rendering", icon: templateRenderingIcon }
+    ]
+  },
+  {
+    category: "safetyAndCompliance",
+    nodes: [
+      { type: "sensitive_detection", icon: sensitiveDetectionIcon },
+      { type: "output_audit", icon: outputAuditIcon }
+    ]
+  },
+  {
+    category: "evolutionAndGovernance",
+    nodes: [
+      { type: "self_optimization", icon: selfOptimizationIcon },
+      { type: "process_evolution", icon: processEvolutionIcon }
+    ]
+  },
+  */
+];
+
+// 节点注册库
+export const nodeRegisterLibrary: ReactShapeConfig[] = [
+  {
+    shape: 'loop-node',
+    width: 200,
+    height: 200,
+    component: LoopNode,
+  },
+  {
+    shape: 'iteration-node',
+    width: 200,
+    height: 200,
+    component: IterationNode,
+  },
+  {
+    shape: 'normal-node',
+    width: 120,
+    height: 40,
+    component: NormalNode,
+  },
+  {
+    shape: 'condition-node',
+    width: 200,
+    height: 100,
+    component: ConditionNode,
+  },
+  {
+    shape: 'group-start-node',
+    width: 120,
+    height: 40,
+    component: GroupStartNode,
+  },
+  {
+    shape: 'add-node',
+    width: 120,
+    height: 40,
+    component: AddNode,
+  },
+];
+
+interface PortsConfig {
+  groups?: GroupMetadata;
+  items?: PortMetadata[];
+}
+
+interface NodeConfig {
+  width: number;
+  height: number;
+  shape: string;
+  ports?: PortsConfig;
+}
+
+const portAttrs = {
+  circle: {
+    r: 4, magnet: true, stroke: '#155EEF', strokeWidth: 2, fill: '#155EEF', 
+  },
+}
+const defaultPortGroups = {
+  // top: { position: 'top', attrs: portAttrs },
+  right: { position: 'right', attrs: portAttrs },
+  // bottom: { position: 'bottom', attrs: portAttrs },
+  left: { position: 'left', attrs: portAttrs },
+}
+const defaultPortItems = [
+  // { group: 'top' },
+  { group: 'right' },
+  // { group: 'bottom' },
+  { group: 'left' }
+];
+export const graphNodeLibrary: Record<string, NodeConfig> = {
+  iteration: {
+    width: 240,
+    height: 200,
+    shape: 'iteration-node',
+    ports: {
+      groups: defaultPortGroups,
+      items: defaultPortItems,
+    },
+  },
+  loop: {
+    width: 240,
+    height: 200,
+    shape: 'loop-node',
+    ports: {
+      groups: defaultPortGroups,
+      items: defaultPortItems,
+    },
+  },
+  condition: {
+    width: 240,
+    height: 200,
+    shape: 'condition-node',
+    ports: {
+      groups: defaultPortGroups,
+      items: [
+        { group: 'left' },
+        { group: 'right', id: 'if_1', attrs: {text: { text: 'IF' }} },
+        { group: 'right', id: 'else_2', attrs: {text: { text: 'ELSE' }} }
+      ],
+    },
+  },
+  start: {
+    width: 240,
+    height: 64,
+    shape: 'normal-node',
+    ports: {
+      groups: {right: { position: 'right', attrs: portAttrs }},
+      items: [{ group: 'right' }],
+    },
+  },
+  end: {
+    width: 240,
+    height: 64,
+    shape: 'normal-node',
+    ports: {
+      groups: {left: { position: 'left', attrs: portAttrs }},
+      items: [{ group: 'left' }],
+    },
+  },
+  default: {
+    width: 240,
+    height: 64,
+    shape: 'normal-node',
+    ports: {
+      groups: defaultPortGroups,
+      items: defaultPortItems,
+    },
+  },
+  groupStart: {
+    width: 80,
+    height: 40,
+    shape: 'group-start-node',
+    ports: {
+      groups: {right: { position: 'right', attrs: portAttrs }},
+      items: [{ group: 'right' }],
+    },
+  },
+  addStart: {
+    width: 80,
+    height: 40,
+    shape: 'add-node',
+    ports: {
+      groups: {left: { position: 'left', attrs: portAttrs }},
+      items: [{ group: 'left' }],
+    },
+  }
+}

web/src/views/Workflow/hooks/useWorkflowGraph.ts

@@ -0,0 +1,741 @@
+import { useRef, useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { App } from 'antd'
+import { Graph, Node, MiniMap, Snapline, Clipboard, Keyboard, type Edge } from '@antv/x6';
+import { register } from '@antv/x6-react-shape';
+
+import { nodeRegisterLibrary, graphNodeLibrary, nodeLibrary } from '../constant';
+import type { WorkflowConfig, NodeProperties } from '../types';
+import { getWorkflowConfig, saveWorkflowConfig } from '@/api/application'
+
+export interface UseWorkflowGraphProps {
+  containerRef: React.RefObject<HTMLDivElement>;
+  miniMapRef: React.RefObject<HTMLDivElement>;
+}
+
+export interface UseWorkflowGraphReturn {
+  config: WorkflowConfig | null;
+  graphRef: React.MutableRefObject<Graph | undefined>;
+  selectedNode: Node | null;
+  setSelectedNode: React.Dispatch<React.SetStateAction<Node | null>>;
+  zoomLevel: number;
+  setZoomLevel: React.Dispatch<React.SetStateAction<number>>;
+  canUndo: boolean;
+  canRedo: boolean;
+  isHandMode: boolean;
+  setIsHandMode: React.Dispatch<React.SetStateAction<boolean>>;
+  onUndo: () => void;
+  onRedo: () => void;
+  onDrop: (event: React.DragEvent) => void;
+  blankClick: () => void;
+  deleteEvent: () => boolean | void;
+  copyEvent: () => boolean | void;
+  parseEvent: () => boolean | void;
+  handleSave: (flag?: boolean) => Promise<any>;
+}
+
+const edge_color = '#155EEF';
+const edge_selected_color = '#4DA8FF'
+
+export const useWorkflowGraph = ({
+  containerRef,
+  miniMapRef,
+}: UseWorkflowGraphProps): UseWorkflowGraphReturn => {
+  const { id } = useParams();
+  const { message } = App.useApp();
+  const { t } = useTranslation()
+  const graphRef = useRef<Graph>();
+  const [selectedNode, setSelectedNode] = useState<Node | null>(null);
+  const [zoomLevel, setZoomLevel] = useState(1);
+  const historyRef = useRef<{ undoStack: string[], redoStack: string[] }>({ undoStack: [], redoStack: [] });
+  const [canUndo, setCanUndo] = useState(false);
+  const [canRedo, setCanRedo] = useState(false);
+  const [isHandMode, setIsHandMode] = useState(false);
+  const [config, setConfig] = useState<WorkflowConfig | null>(null);
+
+  useEffect(() => {
+    getConfig()
+  }, [id])
+  const getConfig = () => {
+    if (!id) return
+    getWorkflowConfig(id)
+      .then(res => {
+        setConfig(res as WorkflowConfig)
+      })
+  }
+
+  useEffect(() => {
+    initWorkflow()
+  }, [config, graphRef.current])
+  
+  const initWorkflow = () => {
+    if (!config || !graphRef.current) return
+    const { nodes, edges } = config
+
+    if (nodes.length) {
+      const nodeList = nodes.map(node => {
+        const { id, type, name, position, config = {} } = node
+        let nodeLibraryConfig = [...nodeLibrary]
+          .flatMap(category => category.nodes)
+          .find(n => n.type === type)
+        nodeLibraryConfig = JSON.parse(JSON.stringify({ config: {}, ...nodeLibraryConfig })) as NodeProperties
+
+        if (nodeLibraryConfig?.config) {
+          Object.keys(nodeLibraryConfig.config).forEach(key => {
+            if (nodeLibraryConfig.config && nodeLibraryConfig.config[key]) {
+              nodeLibraryConfig.config[key].defaultValue = config[key] || {}
+            }
+          })
+        }
+        const nodeConfig = {
+          ...(graphNodeLibrary[type] ?? graphNodeLibrary.default),
+          id,
+          type,
+          name,
+          data: { ...node, ...nodeLibraryConfig},
+          ...position,
+        }
+        return nodeConfig
+      })
+      graphRef.current?.addNodes(nodeList)
+    }
+    if (edges.length) {
+      const edgeList = edges.map(edge => {
+        const { source, target } = edge
+        const sourceCell = graphRef.current?.getCellById(source)
+        const targetCell = graphRef.current?.getCellById(target)
+        
+        if (sourceCell && targetCell) {
+          const sourcePorts = (sourceCell as Node).getPorts()
+          const targetPorts = (targetCell as Node).getPorts()
+          
+          const edgeConfig = {
+            source: {
+              cell: sourceCell.id,
+              port: sourcePorts.find((port: any) => port.group === 'right')?.id || 'right'
+            },
+            target: {
+              cell: targetCell.id,
+              port: targetPorts.find((port: any) => port.group === 'left')?.id || 'left'
+            },
+            // label,
+            attrs: {
+              line: {
+                stroke: edge_color,
+                strokeWidth: 1,
+                targetMarker: {
+                  name: 'block',
+                  size: 8,
+                },
+              },
+            },
+          }
+
+          return edgeConfig
+        }
+        return null
+      })
+      graphRef.current.addEdges(edgeList.filter(vo => vo !== null))
+    }
+  }
+
+  const saveState = () => {
+    if (!graphRef.current) return;
+    const state = JSON.stringify(graphRef.current.toJSON());
+    historyRef.current.undoStack.push(state);
+    historyRef.current.redoStack = [];
+    if (historyRef.current.undoStack.length > 50) {
+      historyRef.current.undoStack.shift();
+    }
+    updateHistoryState();
+  };
+
+  const updateHistoryState = () => {
+    setCanUndo(historyRef.current.undoStack.length > 1);
+    setCanRedo(historyRef.current.redoStack.length > 0);
+  };
+
+  // 撤销
+  const onUndo = () => {
+    if (!graphRef.current || historyRef.current.undoStack.length === 0) return;
+    const { undoStack = [], redoStack = [] } = historyRef.current
+
+    const currentState = JSON.stringify(graphRef.current.toJSON());
+    const prevState = undoStack[undoStack.length - 2];
+
+    historyRef.current.redoStack = [...redoStack, currentState]
+    historyRef.current.undoStack = undoStack.slice(0, undoStack.length - 1)
+    graphRef.current.fromJSON(JSON.parse(prevState));
+    updateHistoryState();
+  };
+  // 重做
+  const onRedo = () => {
+    if (!graphRef.current || historyRef.current.redoStack.length === 0) return;
+    const { undoStack = [], redoStack = [] } = historyRef.current
+
+    const nextState = redoStack[redoStack.length - 1];
+
+    historyRef.current.undoStack = [...undoStack, nextState]
+    historyRef.current.redoStack = redoStack.slice(0, redoStack.length - 1)
+    graphRef.current.fromJSON(JSON.parse(nextState));
+    updateHistoryState();
+  };
+  // 使用插件
+  const setupPlugins = () => {
+    if (!graphRef.current || !miniMapRef.current) return;
+    // 添加小地图
+    graphRef.current.use(
+      new MiniMap({
+        container: miniMapRef.current,
+        width: 100,
+        height: 80,
+        padding: 5,
+      }),
+    );
+    graphRef.current.use(
+      new Snapline({
+        enabled: true,
+      }),
+    );
+    graphRef.current.use(
+      new Clipboard({
+        enabled: true,
+        useLocalStorage: true,
+      }),
+    );
+    graphRef.current.use(
+      new Keyboard({
+        enabled: true,
+        global: true,
+      }),
+    );
+  };
+  // 显示/隐藏连接桩
+  const showPorts = (show: boolean) => {
+    const container = containerRef.current!;
+    const ports = container.querySelectorAll('.x6-port-body') as NodeListOf<SVGElement>;
+    for (let i = 0, len = ports.length; i < len; i += 1) {
+      ports[i].style.visibility = show ? 'visible' : 'hidden';
+    }
+  };
+  // 节点选择事件
+  const nodeClick = ({ node }: { node: Node }) => {
+    const nodes = graphRef.current?.getNodes();
+
+    nodes?.forEach(vo => {
+      const data = vo.getData();
+      if (data.isSelected) {
+        vo.setData({
+          ...data,
+          isSelected: false,
+        });
+      }
+    });
+    node.setData({
+      ...node.getData(),
+      isSelected: true,
+    });
+    setSelectedNode(node);
+  };
+  // 连线选择事件
+  const edgeClick = ({ edge }: { edge: Edge }) => {
+    edge.setAttrByPath('line/stroke', edge_selected_color);
+    clearNodeSelect();
+  };
+  // 清空选中节点
+  const clearNodeSelect = () => {
+    const nodes = graphRef.current?.getNodes();
+
+    nodes?.forEach(node => {
+      const data = node.getData();
+      if (data.isSelected) {
+        node.setData({
+          ...data,
+          isSelected: false,
+        });
+      }
+    });
+    setSelectedNode(null);
+  };
+  // 清空选中连线
+  const clearEdgeSelect = () => {
+    graphRef.current?.getEdges().forEach(e => {
+      e.setAttrByPath('line/stroke', edge_color);
+      e.setAttrByPath('line/strokeWidth', 1);
+    });
+  };
+  // 画布点击事件，取消选择
+  const blankClick = () => {
+    clearNodeSelect();
+    clearEdgeSelect();
+    graphRef.current?.cleanSelection();
+  };
+  // 画布缩放事件
+  const scaleEvent = ({ sx }: { sx: number }) => {
+    setZoomLevel(sx);
+  };
+  // 节点移动事件
+  const nodeMoved = ({ node }: { node: Node }) => {
+    const parentId = node.getData()?.parentId;
+    if (parentId) {
+      const parentNode = graphRef.current!.getNodes().find(n => n.id === parentId);
+      if (parentNode?.getData()?.isGroup) {
+        // 获取父节点和子节点的边界框
+        const parentBBox = parentNode.getBBox();
+        const childBBox = node.getBBox();
+        
+        // 计算父节点的内边距
+        const padding = 24;
+        const headerHeight = 50;
+        
+        // 计算子节点允许的最小和最大位置
+        const minX = parentBBox.x + padding;
+        const minY = parentBBox.y + padding + headerHeight;
+        const maxX = parentBBox.x + parentBBox.width - padding - childBBox.width;
+        const maxY = parentBBox.y + parentBBox.height - padding - childBBox.height;
+        
+        // 限制子节点在父节点内移动
+        let newX = childBBox.x;
+        let newY = childBBox.y;
+        
+        if (newX < minX) newX = minX;
+        if (newY < minY) newY = minY;
+        if (newX > maxX) newX = maxX;
+        if (newY > maxY) newY = maxY;
+        
+        // 如果子节点位置被限制，更新其位置
+        if (newX !== childBBox.x || newY !== childBBox.y) {
+          node.setPosition(newX, newY);
+        }
+      }
+    }
+  };
+  // 复制快捷键事件
+  const copyEvent = () => {
+    if (!graphRef.current) return false;
+    const selectedNodes = graphRef.current.getNodes().filter(node => node.getData()?.isSelected);
+    if (selectedNodes.length) {
+      graphRef.current.copy(selectedNodes);
+    }
+    return false;
+  };
+  // 粘贴快捷键事件
+  const parseEvent = () => {
+    if (!graphRef.current?.isClipboardEmpty()) {
+      graphRef.current?.paste({ offset: 32 });
+      blankClick();
+    }
+    return false;
+  };
+  // 撤销快捷键事件
+  const undoEvent = () => {
+    if (canUndo) {
+      onUndo();
+    }
+    return false;
+  };
+  // 重做快捷键事件
+  const redoEvent = () => {
+    if (canRedo) {
+      onRedo();
+    }
+    return false;
+  };
+  // 删除选中的节点和连线事件
+  const deleteEvent = () => {
+    if (!graphRef.current) return;
+    const nodes = graphRef.current?.getNodes();
+    const edges = graphRef.current?.getEdges();
+    const cells: (Node | Edge)[] = [];
+    const nodesToDelete: Node[] = [];
+    const parentNodesToUpdate: Node[] = [];
+
+    // 首先收集所有选中的节点，但排除默认子节点
+    nodes?.forEach(node => {
+      const data = node.getData();
+      // 如果节点是默认子节点，不允许单独删除
+      if (data.isSelected && !data.isDefault) {
+        nodesToDelete.push(node);
+      }
+    });
+
+    // 收集与选中节点相关的连线
+    edges?.forEach(edge => {
+      const attrs = edge.getAttrs()
+      if (attrs.line.stroke === edge_selected_color) {
+        cells.push(edge)
+      }
+      const sourceId = edge.getSourceCellId();
+      const targetId = edge.getTargetCellId();
+      if (sourceId && targetId) {
+        const sourceNode = nodes?.find(n => n.id === sourceId);
+        const targetNode = nodes?.find(n => n.id === targetId);
+        if (sourceNode?.getData()?.isSelected || targetNode?.getData()?.isSelected) {
+          cells.push(edge);
+        }
+      }
+    })
+
+    // 对于每个选中的节点
+    if (nodesToDelete.length > 0) {
+      nodesToDelete.forEach(nodeToDelete => {
+        // 检查是否为子节点
+        const nodeData = nodeToDelete.getData();
+        if (nodeData.parentId) {
+          // 找到对应的父节点
+          const parentNode = nodes?.find(n => n.id === nodeData.parentId);
+          if (parentNode) {
+            // 使用removeChild方法删除子节点
+            parentNode.removeChild(nodeToDelete);
+            parentNodesToUpdate.push(parentNode);
+          }
+        } 
+        // 检查是否为 LoopNode、IterationNode 或 SubGraphNode
+        else if (nodeToDelete.shape === 'loop-node' || nodeToDelete.shape === 'iteration-node' || nodeToDelete.shape === 'subgraph-node') {
+          // 查找所有 parentId 为当前节点 id 的子节点
+          nodes?.forEach(node => {
+            const data = node.getData();
+            if (data.parentId === nodeToDelete.id) {
+              cells.push(node);
+            }
+          });
+          // 添加父节点到删除列表
+          cells.push(nodeToDelete);
+        } 
+        // 普通节点
+        else {
+          cells.push(nodeToDelete);
+        }
+      });
+      blankClick();
+    }
+      
+    // 删除所有收集的节点和连线
+    if (cells.length > 0) {
+      graphRef.current?.removeCells(cells);
+    }
+    return false;
+  };
+
+  // 调整画布大小
+  const handleResize = () => {
+    if (containerRef.current && graphRef.current) {
+      graphRef.current.resize(containerRef.current.offsetWidth, containerRef.current.offsetHeight);
+    }
+  };
+
+  // 初始化
+  const init = () => {
+    if (!containerRef.current || !miniMapRef.current) return;
+
+    // 注册React形状
+    nodeRegisterLibrary.forEach((item) => {
+      register(item);
+    });
+
+    const container = containerRef.current;
+    graphRef.current = new Graph({
+      container,
+      background: {
+        color: '#F0F3F8',
+      },
+      // width: container.clientWidth || 800,
+      // height: container.clientHeight || 600,
+      autoResize: true,
+      grid: {
+        visible: true,
+        type: 'dot',
+        size: 10,
+        args: {
+          color: '#939AB1', // 网点颜色
+          thickness: 1, // 网点大小
+        }
+      },
+      panning: false,
+      mousewheel: {
+        enabled: true,
+        modifiers: ['ctrl', 'meta'],
+      },
+      connecting: {
+        // router: 'orth',
+        // router: 'manhattan',
+        connector: {
+          name: 'rounded',
+          args: {
+            radius: 8,
+          },
+        },
+        anchor: 'center',
+        connectionPoint: 'anchor',
+        allowBlank: false,
+        allowNode: false,
+        allowEdge: false,
+        highlight: true,
+        snap: {
+          radius: 20,
+        },
+        createEdge() {
+          return graphRef.current?.createEdge({
+            attrs: {
+              line: {
+                stroke: edge_color,
+                strokeWidth: 1,
+              },
+            },
+            zIndex: 0,
+          });
+        },
+        validateConnection({ sourceCell, targetCell, targetMagnet }) {
+          if (!targetMagnet) return false;
+          
+          const sourceType = sourceCell?.getData()?.type;
+          const targetType = targetCell?.getData()?.type;
+          
+          // 开始节点不能作为连线的终点
+          if (targetType === 'start') return false;
+          
+          // 结束节点不能作为连线的起点
+          if (sourceType === 'end') return false;
+          
+          // 获取源节点和目标节点的父节点ID
+          const sourceParentId = sourceCell?.getData()?.parentId;
+          const targetParentId = targetCell?.getData()?.parentId;
+          
+          // 验证父子节点关系：
+          // 1. 如果两个节点都有父节点ID，必须相同才能连线
+          // 2. 如果一个有父节点ID，另一个没有，不能连线
+          // 3. 如果两个都没有父节点ID，可以正常连线
+          if (sourceParentId && targetParentId) {
+            // 同一父节点下的子节点可以互相连线
+            return sourceParentId === targetParentId;
+          } else if (sourceParentId || targetParentId) {
+            // 一个有父节点，一个没有，不能连线
+            return false;
+          }
+          
+          return true;
+        },
+      },
+      embedding: {
+        enabled: true,
+        validate (this, { parent }) {
+        const parentData = parent.getData()
+          return parentData.type === 'iteration' || parentData.type === 'loop'
+        }
+      },
+      translating: {
+        restrict(view) {
+          if (!view) return null
+          const cell = view.cell
+          if (cell.isNode()) {
+            const parent = cell.getParent()
+            if (parent) {
+              return parent.getBBox()
+            }
+          }
+
+          return null
+        },
+      },
+    });
+    // 使用插件
+    setupPlugins();
+    // 监听连线mouseleave事件
+    graphRef.current.on('edge:mouseleave', ({ edge }: { edge: Edge }) => {
+      if (edge.getAttrByPath('line/stroke') !== edge_selected_color) {
+        edge.setAttrByPath('line/stroke', edge_color);
+        edge.setAttrByPath('line/strokeWidth', 1);
+      }
+    });
+    // 监听节点选择事件
+    graphRef.current.on('node:click', nodeClick);
+    // 监听连线选择事件
+    graphRef.current.on('edge:click', edgeClick);
+    // 监听画布点击事件，取消选择
+    graphRef.current.on('blank:click', blankClick);
+    // 监听缩放事件
+    graphRef.current.on('scale', scaleEvent);
+    // 监听节点移动事件
+    graphRef.current.on('node:moved', nodeMoved);
+
+    // 监听画布变化事件
+    const events = [
+      'node:added', 
+      'node:removed', 
+      'edge:added', 
+      'edge:removed',
+    ];
+    events.forEach(event => {
+      graphRef.current!.on(event, () => {
+        console.log('event', event);
+        setTimeout(() => saveState(), 50);
+      });
+    });
+
+    // 监听撤销键盘事件
+    graphRef.current.bindKey(['ctrl+z', 'cmd+z'], undoEvent);
+    // 监听重做键盘事件
+    graphRef.current.bindKey(['ctrl+shift+z', 'cmd+shift+z', 'ctrl+y', 'cmd+y'], redoEvent);
+    // 监听复制键盘事件
+    graphRef.current.bindKey(['ctrl+c', 'cmd+c'], copyEvent);
+    // 监听粘贴键盘事件
+    graphRef.current.bindKey(['ctrl+v', 'cmd+v'], parseEvent);
+    // 删除选中的节点和连线
+    graphRef.current.bindKey(['ctrl+d', 'cmd+d', 'delete', 'backspace'], deleteEvent);
+
+    // 保存初始状态
+    setTimeout(() => saveState(), 100);
+    // init window hook
+    (window as Window & { __x6_instances__?: Graph[] }).__x6_instances__ = [];
+    (window as Window & { __x6_instances__?: Graph[] }).__x6_instances__?.push(graphRef.current);
+  };
+
+  useEffect(() => {
+    if (!containerRef.current || !miniMapRef.current) return;
+    init();
+
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      graphRef.current?.dispose();
+    };
+  }, []);
+
+  const onDrop = (event: React.DragEvent) => {
+    if (!graphRef.current) return;
+    event.preventDefault();
+    const dragData = JSON.parse(event.dataTransfer.getData('application/json'));
+    const graph = graphRef.current;
+    if (!graph) return;
+
+    const point = graphRef.current.clientToLocal(event.clientX, event.clientY);
+    
+    // 获取节点库中的原始配置，避免config数据串联
+    let nodeLibraryConfig = [...nodeLibrary]
+      .flatMap(category => category.nodes)
+      .find(n => n.type === dragData.type);
+    nodeLibraryConfig = { config: {}, ...nodeLibraryConfig } as NodeProperties;
+    
+    // 创建干净的节点数据，只保留必要的字段
+    const cleanNodeData = {
+      id: `${dragData.type}_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+      name: t(`workflow.${dragData.type}`),
+      ...nodeLibraryConfig
+    };
+    
+    if (dragData.type === 'loop' || dragData.type === 'iteration') {
+      graphRef.current.addNode({
+        ...graphNodeLibrary[dragData.type],
+        x: point.x - 150,
+        y: point.y - 100,
+        data: { ...cleanNodeData, isGroup: true },
+      });
+    } else if (dragData.type === 'condition') {
+      // 创建条件节点
+      graphRef.current.addNode({
+        ...graphNodeLibrary[dragData.type],
+        x: point.x - 100,
+        y: point.y - 60,
+        data: { ...cleanNodeData, elifCount: 0 },
+      });
+    } else {
+      // 检查是否放置在群组内
+      const groups = graphRef.current.getNodes().filter(node => {
+        const shape = node.shape;
+        return shape === 'loop-node' || shape === 'iteration-node' || shape === 'subgraph-node';
+      });
+      let parentGroup = null;
+      
+      for (const group of groups) {
+        const bbox = group.getBBox();
+        if (point.x >= bbox.x && point.x <= bbox.x + bbox.width &&
+            point.y >= bbox.y && point.y <= bbox.y + bbox.height) {
+          parentGroup = group;
+          break;
+        }
+      }
+      
+      const childNode = graphRef.current.addNode({
+        ...(graphNodeLibrary[dragData.type] || graphNodeLibrary.default),
+        x: point.x - 60,
+        y: point.y - 20,
+        data: { ...cleanNodeData, parentId: parentGroup?.id },
+      });
+      parentGroup?.addChild(childNode);
+    }
+  };
+  // 保存workflow配置
+  const handleSave = (flag = true) => {
+    if (!graphRef.current || !config) return Promise.resolve()
+    return new Promise((resolve, reject) => {
+      const nodes = graphRef.current?.getNodes() || [];
+      const edges = graphRef.current?.getEdges() || []
+
+      const params = {
+        ...config,
+        nodes: nodes.map((node: Node) => {
+          const data = node.getData();
+          const position = node.getPosition();
+          const config: Record<string, any> = {}
+
+          if (data.config) {
+            Object.keys(data.config).forEach(key => {
+              if (data.config[key] && 'defaultValue' in data.config[key]) {
+                config[key] = data.config[key].defaultValue
+              }
+            })
+          }
+
+          return {
+            id: data.id || node.id,
+            type: data.type,
+            name: data.name,
+            position: {
+              x: position.x,
+              y: position.y,
+            },
+            config: config
+          };
+        }),
+        edges: edges.map((edge: Edge) => {
+          return {
+            source: edge.getSourceCellId(),
+            target: edge.getTargetCellId(),
+            // label: edge.getAttrs()?.label?.text,
+          };
+        }),
+      }
+      saveWorkflowConfig(config.app_id, params as WorkflowConfig)
+      .then(() => {
+        if (flag) {
+          message.success(t('common.saveSuccess'))
+        }
+        resolve(true)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  }
+
+  return {
+    config,
+    graphRef,
+    selectedNode,
+    setSelectedNode,
+    zoomLevel,
+    setZoomLevel,
+    canUndo,
+    canRedo,
+    isHandMode,
+    setIsHandMode,
+    onUndo,
+    onRedo,
+    onDrop,
+    blankClick,
+    deleteEvent,
+    copyEvent,
+    parseEvent,
+    handleSave
+  };
+};

web/src/views/Workflow/index.tsx

@@ -0,0 +1,110 @@
+import { forwardRef, useRef, useImperativeHandle, useState } from 'react';
+import clsx from 'clsx';
+
+import NodeLibrary from './components/NodeLibrary'
+import Properties from './components/Properties';
+import CanvasToolbar from './components/CanvasToolbar';
+import { useWorkflowGraph } from './hooks/useWorkflowGraph';
+import type { WorkflowRef } from '@/views/ApplicationConfig/types'
+import Chat from './components/Chat/Chat';
+import type { ChatRef } from './types'
+import arrowIcon from '@/assets/images/workflow/arrow.png'
+
+const Workflow = forwardRef<WorkflowRef>((_props, ref) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const miniMapRef = useRef<HTMLDivElement>(null);
+  const chatRef = useRef<ChatRef>(null)
+  const [collapsed, setCollapsed] = useState(false)
+  // 使用自定义Hook初始化工作流图
+  const {
+    config,
+    graphRef,
+    selectedNode,
+    setSelectedNode,
+    zoomLevel,
+    canUndo,
+    canRedo,
+    isHandMode,
+    setIsHandMode,
+    onUndo,
+    onRedo,
+    onDrop,
+    blankClick,
+    deleteEvent,
+    copyEvent,
+    parseEvent,
+    handleSave
+  } = useWorkflowGraph({ containerRef, miniMapRef });
+
+  const onDragOver = (event: React.DragEvent) => {
+    event.preventDefault();
+  };
+  const handleRun = () => {
+    chatRef.current?.handleOpen()
+  }
+  const handleToggle = () => {
+    setCollapsed(prev => !prev)
+  }
+
+  useImperativeHandle(ref, () => ({
+    handleSave,
+    handleRun,
+    graphRef
+  }))
+  return (
+    <div className="rb:h-[calc(100vh-64px)] rb:relative">
+      {/* 左侧节点面板 */}
+      {!collapsed  && <NodeLibrary />}
+      <img 
+        src={arrowIcon} 
+        className={clsx('rb:cursor-pointer rb:w-5 rb:h-10 rb:absolute rb:top-[50%] rb:z-100', {
+          'rb:left-0 rb:rotate-180': collapsed,
+          'rb:left-80': !collapsed
+        })} 
+        onClick={handleToggle}
+      />
+      
+      {/* 右侧画布区域 */}
+      <div 
+        className={clsx(`rb:fixed rb:top-16 rb:bottom-0 rb:right-75 rb:flex-1 rb:border-x rb:border-[#DFE4ED] rb:transition-all`, {
+          'rb:left-80': !collapsed,
+          'rb:left-0': collapsed
+        })}
+        onDrop={onDrop}
+        onDragOver={onDragOver}
+      >
+        <div ref={containerRef} className="rb:w-full rb:h-full" />
+        {/* 地图工具栏 */}
+        <CanvasToolbar
+          miniMapRef={miniMapRef}
+          graphRef={graphRef}
+          isHandMode={isHandMode}
+          setIsHandMode={setIsHandMode}
+          zoomLevel={zoomLevel}
+          canUndo={canUndo}
+          canRedo={canRedo}
+          onUndo={onUndo}
+          onRedo={onRedo}
+        />
+      </div>
+      
+      {/* 右侧属性面板 */}
+      <Properties 
+        selectedNode={selectedNode} 
+        setSelectedNode={setSelectedNode}
+        graphRef={graphRef}
+        blankClick={blankClick}
+        deleteEvent={deleteEvent}
+        copyEvent={copyEvent}
+        parseEvent={parseEvent}
+      />
+      <Chat
+        ref={chatRef}
+        graphRef={graphRef}
+        appId={config?.app_id as string}
+      />
+    </div>
+  );
+});
+
+export default Workflow;

web/src/views/Workflow/types.ts

@@ -0,0 +1,95 @@
+
+import { Graph } from '@antv/x6';
+export interface NodeConfig {
+  type: 'input' | 'textarea' | 'select' | 'inputNumber' | 'slider' | 'customSelect' | 'define';
+  options?: { label: string; value: string }[];
+
+  max?: number;
+  min?: number;
+  step?: number;
+
+  url?: string;
+  params?: { [key: string]: unknown; }
+  valueKey?: string;
+  labelKey?: string;
+
+  defaultValue?: any | StartVariableItem[];
+
+  sys?: Array<{
+    name: string;
+    type: string;
+    readonly: boolean;
+  }>
+  [key: string]: unknown;
+}
+
+export interface NodeProperties {
+  type: string;
+  icon: string;
+  config?: Record<string, NodeConfig>;
+}
+
+export interface NodeLibrary {
+  category: string;
+  nodes: NodeProperties[];
+}
+
+
+export interface NodeItem {
+  id: string;
+  type: string;
+  name: string;
+  position: {
+    x: number;
+    y: number;
+  };
+  config: {
+    [key: string]: unknown;
+  };
+}
+export interface EdgesItem {
+  source: string;
+  target: string;
+  label: string;
+}
+export interface WorkflowConfig {
+  id: string;
+  app_id: string;
+  nodes: NodeItem[],
+  edges: EdgesItem[],
+  variables: Array<{
+    name: string;
+    type: string;
+    required: boolean;
+    description: string;
+    default: string;
+  }>,
+  execution_config: {
+    max_execution_time: number;
+    max_iterations: number;
+  }
+  triggers: any[];
+  is_active: boolean;
+  created_at: number;
+  updated_at: number;
+}
+
+export interface VariableEditModalRef {
+  handleOpen: (values?: StartVariableItem) => void;
+}
+export interface StartVariableItem {
+  name: string;
+  type: string;
+  required: boolean;
+  description: string;
+  max_length?: number;
+  default?: string;
+  readonly?: boolean;
+  defaultValue?: any;
+  value?: any;
+}
+
+export interface ChatRef {
+  handleOpen: () => void;
+}
+export type GraphRef = React.MutableRefObject<Graph | undefined>