Merge pull request #42 from SuanmoSuanyangTechnology/feature/workflow_zy

Feature/workflow zy

web/src/views/ApplicationConfig/Agent.tsx

@@ -18,7 +18,9 @@ import type {
   Variable,
   MemoryConfig,
   AiPromptModalRef,
-  Source
+  Source,
+  ToolModalRef,
+  ToolOption
 } from './types'
 import type { Model } from '@/views/ModelManagement/types'
 import { getModelList } from '@/api/models';
@@ -31,6 +33,8 @@ import { memoryConfigListUrl } from '@/api/memory'
 import CustomSelect from '@/components/CustomSelect'
 import aiPrompt from '@/assets/images/application/aiPrompt.png'
 import AiPromptModal from './components/AiPromptModal'
+import ToolModal from './components/ToolModal'
+import ToolList from './components/ToolList'
 
 const DescWrapper: FC<{desc: string, className?: string}> = ({desc, className}) => {
   return (
@@ -47,12 +51,12 @@ const LabelWrapper: FC<{title: string, className?: string; children?: ReactNode}
     </div>
   )
 }
-const SwitchWrapper: FC<{ title: string, desc: string, name: string }> = ({ title, desc, name }) => {
+const SwitchWrapper: FC<{ title: string, desc?: string, name: string | string[]; needTransition?: boolean; }> = ({ title, desc, name, needTransition = true }) => {
   const { t } = useTranslation();
   return (
     <div className="rb:flex rb:items-center rb:justify-between">
-      <LabelWrapper title={t(`application.${title}`)}>
+      <LabelWrapper title={needTransition ? t(`application.${title}`) : title}>
-        <DescWrapper desc={t(`application.${desc}`)} className="rb:mt-2" />
+        {desc && <DescWrapper desc={needTransition ? t(`application.${desc}`) : desc} className="rb:mt-2" />}
       </LabelWrapper>
       <Form.Item
         name={name}
@@ -100,11 +104,11 @@ const Agent = forwardRef<AgentRef>((_props, ref) => {
   const [formData, setFormData] = useState<{
     default_model_config_id?: string,
     model_parameters?: Config['model_parameters'],
+    tools: ToolOption[],
   } | null>(null)
   const values = Form.useWatch<{
     memoryEnabled: boolean;
     memory_content?: string | number;
-    webSearch: boolean;
   } & Config>([], form)
 
   const [knowledgeConfig, setKnowledgeConfig] = useState<KnowledgeConfig>({ knowledge_bases: [] })  
@@ -149,17 +153,21 @@ const Agent = forwardRef<AgentRef>((_props, ref) => {
     setLoading(true)
     getApplicationConfig(id as string).then(res => {
       const response = res as Config
-      setData(response)
+      setData({
+        ...response,
+        tools: Array.isArray(response.tools) ? response.tools : []
+      })
       const { memory, tools } = response
       form.setFieldsValue({
         ...response,
         memoryEnabled: memory?.enabled || false,
         memory_content: memory?.memory_content ? Number(memory?.memory_content) : undefined,
-        webSearch: tools?.web_search?.enabled || false,
+        tools: Array.isArray(tools) ? tools : []
       })
       setFormData({
         default_model_config_id: response.default_model_config_id,
         model_parameters: response.model_parameters || {},
+        tools: Array.isArray(tools) ? tools : []
       })
       if (response?.knowledge_retrieval?.knowledge_bases?.length) {
         getDefaultKnowledgeList(response)
@@ -260,8 +268,9 @@ const Agent = forwardRef<AgentRef>((_props, ref) => {
   // 保存Agent配置
   const handleSave = (flag = true) => {
     if (!isSave || !data) return Promise.resolve()
-    const { memoryEnabled, memory_content, webSearch, ...rest } = values
+    const { memoryEnabled, memory_content, ...rest } = values
     const { knowledge_bases = [], ...knowledgeRest } = knowledgeConfig || {}
+
     
     // 从原数据中获取memory的其他必要属性
     const originalMemory = data.memory || ({} as MemoryConfig)
@@ -285,15 +294,10 @@ const Agent = forwardRef<AgentRef>((_props, ref) => {
           ...(item.config || {})
         }))
       } as KnowledgeConfig : null,
-      tools: {
+      tools: toolList
-        web_search: {
-          enabled: webSearch,
-          config: {
-            web_search: webSearch
-          }
-        }
-      }
     }
+
+    console.log('params', rest, params)
     
     return new Promise((resolve, reject) => {
       saveAgentConfig(data.app_id, params)
@@ -342,6 +346,19 @@ const Agent = forwardRef<AgentRef>((_props, ref) => {
   const updatePrompt = (value: string) => {
     form.setFieldValue('system_prompt', value)
   }
+
+  const toolModalRef = useRef<ToolModalRef>(null)
+  const [toolList, setToolList] = useState<ToolOption[]>([])
+  const handleAddTool = () => {
+    toolModalRef.current?.handleOpen()
+  }
+  const updateTools = (tool: ToolOption) => {
+    const tools = [...toolList, tool]
+    setToolList(tools)
+    form.setFieldValue('tools', tools)
+  }
+
+  console.log('toolList', toolList)
   return (
     <>
       {loading && <Spin fullscreen></Spin>}
@@ -410,14 +427,12 @@ const Agent = forwardRef<AgentRef>((_props, ref) => {
                 data={data?.variables}
                 onUpdate={setVariableList}
               />
+              
               {/* 工具配置 */}
-              <Card title={t('application.toolConfiguration')}>
+              <ToolList
-                <Space size={24} direction='vertical' style={{ width: '100%' }}>
+                data={data?.tools || []}
-                  <SwitchWrapper title="webSearch" desc="webSearchDesc" name="webSearch" />
+                onUpdate={setToolList}
-                  {/* <SwitchWrapper title="codeExecutor" desc="codeExecutorDesc" name="codeExecutor" />
+              />
-                  <SwitchWrapper title="imageGeneration" desc="imageGenerationDesc" name="imageGeneration" /> */}
-                </Space>
-              </Card>
             </Space>
           </Form>
         </Col>
@@ -454,6 +469,10 @@ const Agent = forwardRef<AgentRef>((_props, ref) => {
         defaultModel={defaultModel}
         refresh={updatePrompt}
       />
+      <ToolModal
+        ref={toolModalRef}
+        refresh={updateTools}
+      />
     </>
   );
 });

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

@@ -31,10 +31,6 @@ const Knowledge: FC<{data: KnowledgeConfig; onUpdate: (config: KnowledgeConfig)
       setEditConfig({ ...(data || {}) })
       const knowledge_bases = [...(data.knowledge_bases || [])]
       setKnowledgeList(knowledge_bases)
-      onUpdate(prev => ({
-        ...prev,
-        knowledge_bases: knowledge_bases,
-      }))
     }
   }, [data])
 
@@ -47,10 +43,10 @@ const Knowledge: FC<{data: KnowledgeConfig; onUpdate: (config: KnowledgeConfig)
   const handleDeleteKnowledge = (id: string) => {
     const list = knowledgeList.filter(item => item.id !== id)
     setKnowledgeList([...list])
-    onUpdate(prev => ({
+    onUpdate({
-      ...prev,
+      ...editConfig,
       knowledge_bases: [...list],
-    }))
+    })
   }
   const handleEditKnowledge = (item: KnowledgeBase) => {
     knowledgeConfigModalRef.current?.handleOpen(item)
@@ -69,10 +65,10 @@ const Knowledge: FC<{data: KnowledgeConfig; onUpdate: (config: KnowledgeConfig)
           list = [...values as KnowledgeBase[]]
         }
       setKnowledgeList([...list])
-      onUpdate(prev => ({
+      onUpdate({
-        ...prev,
+        ...editConfig,
         knowledge_bases: [...list],
-      }))
+      })
     } else if (type === 'knowledgeConfig') {
       const index = knowledgeList.findIndex(item => item.id === (values as KnowledgeBase).kb_id)
       const list = [...knowledgeList]
@@ -81,18 +77,19 @@ const Knowledge: FC<{data: KnowledgeConfig; onUpdate: (config: KnowledgeConfig)
         config: {...values as KnowledgeConfigForm}
       }
       setKnowledgeList([...list])
-      onUpdate(prev => ({
+      onUpdate({
-        ...prev,
+        ...editConfig,
         knowledge_bases: [...list],
-      }))
+      })
     } else if (type === 'rerankerConfig') {
-      setEditConfig(prev => ({ ...prev, ...(values as RerankerConfig) }))
+      const rerankerValues = values as RerankerConfig
-      onUpdate(prev => ({
+      setEditConfig(prev => ({ ...prev, ...rerankerValues }))
-        ...prev,
+      onUpdate({
-        ...values,
+        ...editConfig,
-        reranker_id: values.rerank_model ? values.reranker_id : undefined,
+        ...rerankerValues,
-        reranker_top_k: values.rerank_model ? values.reranker_top_k : undefined,
+        reranker_id: rerankerValues.rerank_model ? rerankerValues.reranker_id : undefined,
-      }))
+        reranker_top_k: rerankerValues.rerank_model ? rerankerValues.reranker_top_k : undefined,
+      })
     }
   }
   return (
@@ -102,8 +99,8 @@ const Knowledge: FC<{data: KnowledgeConfig; onUpdate: (config: KnowledgeConfig)
         <Button style={{padding: '0 8px', height: '24px'}} onClick={() => handleKnowledgeConfig()}>{t('application.globalConfig')}</Button>
       }
     >
-      <div className="rb:flex rb:items-center rb:justify-between rb:mb-[12px]">
+      <div className="rb:flex rb:items-center rb:justify-between rb:mb-3">
-        <div className="rb:font-medium rb:leading-[20px]">{t('application.associatedKnowledgeBase')}</div>
+        <div className="rb:font-medium rb:leading-5">{t('application.associatedKnowledgeBase')}</div>
         <Button style={{padding: '0 8px', height: '24px'}} onClick={handleAddKnowledge}>+{t('application.addKnowledgeBase')}</Button>
       </div>
 
@@ -115,21 +112,21 @@ const Knowledge: FC<{data: KnowledgeConfig; onUpdate: (config: KnowledgeConfig)
             dataSource={knowledgeList}
             renderItem={(item) => (
               <List.Item>
-                <div key={item.id} className="rb:flex rb:items-center rb:justify-between rb:p-[12px_16px] rb:bg-[#FBFDFF] rb:border rb:border-[#DFE4ED] rb:rounded-[8px]">
+                <div key={item.id} className="rb:flex rb:items-center rb:justify-between rb:p-[12px_16px] rb:bg-[#FBFDFF] rb:border rb:border-[#DFE4ED] rb:rounded-lg">
-                  <div className="rb:font-medium rb:leading-[16px]">
+                  <div className="rb:font-medium rb:leading-4">
                     {item.name}
-                    <Tag color={item.status === 1 ? 'success' : item.status === 0 ? 'default' : 'error'} className="rb:ml-[8px]">
+                    <Tag color={item.status === 1 ? 'success' : item.status === 0 ? 'default' : 'error'} className="rb:ml-2">
                       {item.status === 1 ? t('common.enable') : item.status === 0 ? t('common.disabled') : t('common.deleted')}
                     </Tag>
-                    <div className="rb:mt-[4px] rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-[20px]">{t('application.contains', {include_count: item.doc_num})}</div>
+                    <div className="rb:mt-1 rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-5">{t('application.contains', {include_count: item.doc_num})}</div>
                   </div>
                   <Space size={12}>
                     <div 
-                      className="rb:w-[24px] rb:h-[24px] rb:cursor-pointer rb:bg-[url('@/assets/images/editBorder.svg')] rb:hover:bg-[url('@/assets/images/editBg.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={() => handleEditKnowledge(item)}
                     ></div>
                     <div 
-                      className="rb:w-[24px] rb:h-[24px] rb:cursor-pointer rb:bg-[url('@/assets/images/deleteBorder.svg')] rb:hover:bg-[url('@/assets/images/deleteBg.svg')]" 
+                      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={() => handleDeleteKnowledge(item.id)}
                     ></div>
                   </Space>

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

@@ -0,0 +1,149 @@
+import { type FC, useRef, useState, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Space, Button, List, Switch } from 'antd'
+import Card from './Card'
+import type {
+  ToolModalRef,
+  ToolOption
+} from '../types'
+import Empty from '@/components/Empty'
+import ToolModal from './ToolModal'
+import { getToolMethods, getToolDetail } from '@/api/tools'
+
+const ToolList: FC<{ data: ToolOption[]; onUpdate: (config: ToolOption[]) => void}> = ({data, onUpdate}) => {
+  const { t } = useTranslation()
+  const toolModalRef = useRef<ToolModalRef>(null)
+  const [toolList, setToolList] = useState<ToolOption[]>([])
+  useEffect(() => {
+    if (data) {
+      const processedData = data.map(async (item) => {
+        if (!item.label && item.tool_id) {
+          try {
+            const [toolDetail, methods] = await Promise.all([
+              getToolDetail(item.tool_id),
+              getToolMethods(item.tool_id)
+            ])
+
+            switch ((toolDetail as any).tool_type) {
+              case 'mcp':
+                const mcpFilterItem = (methods as any[]).find(vo => vo.name === item.operation)
+                return {
+                  ...item,
+                  label: mcpFilterItem?.description,
+                  method_id: mcpFilterItem?.method_id,
+                  value: mcpFilterItem?.name,
+                  description: mcpFilterItem?.description,
+                  parameters: mcpFilterItem?.parameters
+                }
+                break
+              case 'builtin':
+                if ((methods as any[]).length > 1) {
+                  const builtinFilterItem = (methods as any[]).find(vo => vo.name === item.operation)
+                  return {
+                    ...item,
+                    label: builtinFilterItem?.description,
+                    method_id: builtinFilterItem?.method_id,
+                    value: builtinFilterItem?.name,
+                    description: builtinFilterItem?.description,
+                    parameters: builtinFilterItem?.parameters
+                  }
+                }
+                return {
+                  ...item,
+                  label: (methods as any[])[0]?.description,
+                  method_id: (methods as any[])[0]?.method_id,
+                  value: (methods as any[])[0]?.name,
+                  description: (methods as any[])[0]?.description,
+                  parameters: (methods as any[])[0]?.parameters
+                }
+                break
+              default:
+                const customFilterItem = (methods as any[]).find(vo => vo.method_id === item.operation)
+                return {
+                  ...item,
+                  label: customFilterItem?.name,
+                  method_id: customFilterItem?.method_id,
+                  value: customFilterItem?.name,
+                  description: customFilterItem?.description,
+                  parameters: customFilterItem?.parameters
+                }
+            }
+          } catch (error) {
+            return item
+          }
+        }
+        return item
+      })
+      
+      Promise.all(processedData).then(setToolList)
+    }
+  }, [data])
+
+  console.log('toolList', toolList)
+
+  const handleAddTool = () => {
+    toolModalRef.current?.handleOpen()
+  }
+  const updateTools = (tool: ToolOption) => {
+    const list = [...toolList, tool]
+    setToolList(list)
+    onUpdate(list)
+  }
+  const handleDeleteTool = (index: number) => {
+    const list = toolList.filter((_item, idx) => idx !== index)
+    setToolList([...list])
+    onUpdate(list)
+  }
+  const handleChangeEnabled = (index: number) => {
+    const list = toolList.map((item, idx) => {
+      if (idx === index) {
+        return {
+          ...item,
+          enabled: !item.enabled
+        }
+      }
+      return item
+    })
+    setToolList([...list])
+    onUpdate(list)
+  }
+  return (
+    <Card 
+      title={t('application.toolConfiguration')}
+      extra={
+        <Button style={{ padding: '0 8px', height: '24px' }} onClick={handleAddTool}>+{t('application.addTool')}</Button>
+      }
+    >
+
+      {toolList.length === 0
+        ? <Empty size={88} />
+        : 
+          <List
+            grid={{ gutter: 12, column: 1 }}
+            dataSource={toolList}
+            renderItem={(item, index) => (
+              <List.Item>
+                <div key={index} className="rb:flex rb:items-center rb:justify-between rb:p-[12px_16px] rb:bg-[#FBFDFF] rb:border rb:border-[#DFE4ED] rb:rounded-lg">
+                  <div className="rb:font-medium rb:leading-4">
+                    {item.label}
+                  </div>
+                  <Space size={12}>
+                    <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={() => handleDeleteTool(index)}
+                    ></div>
+                    <Switch checked={item.enabled} onChange={() => handleChangeEnabled(index)} />
+                  </Space>
+                </div>
+              </List.Item>
+            )}
+          />
+      }
+      <ToolModal
+        ref={toolModalRef}
+        refresh={updateTools}
+      />
+    </Card>
+  )
+}
+export default ToolList

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

@@ -0,0 +1,145 @@
+import { forwardRef, useImperativeHandle, useState } from 'react';
+import { Form, Cascader, type CascaderProps } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+import type { ToolModalRef, ToolOption } from '../types'
+import RbModal from '@/components/RbModal'
+import { getToolMethods, getTools } from '@/api/tools'
+import type { ToolType, ToolItem } from '@/views/ToolManagement/types'
+
+const FormItem = Form.Item;
+
+interface ToolModalProps {
+  refresh: (tool: ToolOption) => void;
+}
+
+const ToolModal = forwardRef<ToolModalRef, ToolModalProps>(({
+  refresh,
+}, ref) => {
+  const { t } = useTranslation();
+  const [visible, setVisible] = useState(false);
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false)
+  const [optionList, setOptionList] = useState<ToolOption[]>([
+    { value: 'mcp', label: t('tool.mcp'), isLeaf: false },
+    { value: 'builtin', label: t('tool.inner'), isLeaf: false },
+    { value: 'custom', label: t('tool.custom'), isLeaf: false },
+  ])
+  const [selectdTools, setSelectedTools] = useState<ToolOption[]>([])
+
+  // 封装取消方法，添加关闭弹窗逻辑
+  const handleClose = () => {
+    setVisible(false);
+    form.resetFields();
+    setLoading(false)
+    setSelectedTools([])
+  };
+
+  const handleOpen = () => {
+    setVisible(true);
+    form.resetFields();
+    setSelectedTools([])
+  };
+  // 封装保存方法，添加提交逻辑
+  const handleSave = () => {
+    form.validateFields().then(() => {
+      setLoading(false)
+      let operation: any = undefined
+      if (selectdTools[0].value === 'mcp' || (selectdTools[0].value === 'builtin' && selectdTools[1]?.children && selectdTools[1].children.length > 1)) {
+        operation = selectdTools[2].value
+      } else if (selectdTools[0].value === 'custom') {
+        operation = selectdTools[2].method_id
+      }
+
+      const tool = {
+        ...selectdTools[2],
+        label: selectdTools[0].value === 'custom' ? selectdTools[2].label : selectdTools[2].description,
+        tool_id: selectdTools[1].value as string,
+        enabled: true
+      }
+      if (operation) {
+        tool.operation = operation
+      }
+      refresh(tool)
+      handleClose()
+    })
+  }
+  const loadData = (selectedOptions: ToolOption[]) => {
+    const targetOption = selectedOptions[selectedOptions.length - 1];
+    if (selectedOptions.length === 1) {
+      getTools({ tool_type: targetOption.value as ToolType })
+        .then(res => {
+          const response = res as ToolItem[]
+          targetOption.children = response.map((vo: any) => {
+            return {
+              value: vo.id,
+              label: vo.name,
+              isLeaf: response.length === 0,
+            }
+          })
+          setOptionList([...optionList])
+        })
+    } else {
+      getToolMethods(targetOption.value as string)
+        .then(res => {
+          const response = res as Array<{ method_id: string; name: string }>
+          targetOption.children = response.map((vo: any) => {
+            return {
+              value: vo.name,
+              label: vo.name,
+              description: vo.description,
+              isLeaf: true,
+              method_id: vo.method_id,
+              parameters: vo.parameters
+            }
+          })
+          setOptionList([...optionList])
+        })
+    }
+  };
+
+  const handleChange: CascaderProps<ToolOption>['onChange'] = (_value, selectedOptions) => {
+    console.log('selectedOptions', selectedOptions)
+    setSelectedTools(selectedOptions)
+  }
+
+  // 暴露给父组件的方法
+  useImperativeHandle(ref, () => ({
+    handleOpen,
+    handleClose
+  }));
+
+  return (
+    <RbModal
+      title={t(`application.addTool`)}
+      open={visible}
+      onCancel={handleClose}
+      okText={t('common.save')}
+      onOk={handleSave}
+      confirmLoading={loading}
+    >
+      <Form
+        form={form}
+        layout="vertical"
+      >
+        <FormItem
+          name="agent_id"
+          label={t('application.tool')}
+          rules={[
+            { required: true, message: t('common.pleaseSelect') },
+          ]}
+        >
+          <Cascader
+            placeholder={t('common.pleaseSelect')}
+            options={optionList}
+            loadData={loadData}
+            onChange={handleChange}
+            changeOnSelect={false}
+          />
+        </FormItem>
+      </Form>
+    </RbModal>
+  );
+});
+
+export default ToolModal;

web/src/views/ApplicationConfig/types.ts

@@ -78,14 +78,7 @@ export interface Config extends MultiAgentConfig {
   knowledge_retrieval: KnowledgeConfig | null;
   memory?: MemoryConfig;
   variables: Variable[];
-  tools: {
+  tools: ToolOption[];
-    web_search: {
-      enabled: boolean;
-      config: {
-        web_search: boolean;
-      }
-    }
-  };
   is_active: boolean;
   created_at: number;
   updated_at: number;
@@ -211,4 +204,31 @@ export interface AiPromptForm {
   model_id?: string;
   message?: string;
   current_prompt?: string;
+}
+export interface ToolModalRef {
+  handleOpen: () => void;
+}
+
+export interface ToolOption {
+  value?: string | number | null;
+  label?: React.ReactNode;
+  description?: string;
+  children?: ToolOption[];
+  isLeaf?: boolean;
+  method_id?: string;
+  operation?: string;
+  parameters?: Parameter[];
+  tool_id?: string;
+  enabled?: boolean;
+}
+export interface Parameter {
+  name: string;
+  type: string;
+  description: string;
+  required: boolean;
+  default: any;
+  enum: null | string[];
+  minimum: number;
+  maximum: number;
+  pattern: null | string;
 }

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

@@ -62,6 +62,10 @@ const AssignmentList: FC<AssignmentListProps> = ({
                         placeholder={t('common.pleaseSelect')}
                         options={options}
                         popupMatchSelectWidth={false}
+                        onChange={() => {
+                          form.setFieldValue([parentName, name, 'operation'], undefined);
+                          form.setFieldValue([parentName, name, 'value'], undefined);
+                        }}
                       />
                     </Form.Item>
                   </Col>
@@ -72,6 +76,7 @@ const AssignmentList: FC<AssignmentListProps> = ({
                       noStyle
                     >
                       <Select
+                        placeholder={t('common.pleaseSelect')}
                         options={operationOptions.map(op => ({
                           ...op,
                           label: t(op.label)
@@ -99,14 +104,20 @@ const AssignmentList: FC<AssignmentListProps> = ({
                         name={[name, 'value']}
                         noStyle
                       >
-                        {operation === 'assign'
+                        {dataType === 'number' && operation === 'cover'
+                          ? <VariableSelect
+                            placeholder={t('common.pleaseSelect')}
+                            options={dataType ? options.filter(vo => vo.dataType === dataType) : options}
+                            popupMatchSelectWidth={false}
+                          />
+                          : dataType === 'number'
+                          ? <InputNumber
+                            placeholder={t('common.pleaseEnter')}
+                            className="rb:w-full!"
+                          />
+                          : operation === 'assign'
                           ? <>
-                            {dataType === 'number'
+                            {dataType === 'boolean'
-                              ? <InputNumber
-                                placeholder={t('common.pleaseEnter')}
-                                className="rb:w-full!"
-                              />
-                              : dataType === 'boolean'
                               ? <Radio.Group block>
                                 <Radio.Button value={true}>True</Radio.Button>
                                 <Radio.Button value={false}>False</Radio.Button>

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

@@ -9,8 +9,8 @@ import VariableSelect from '../VariableSelect'
 import Editor from '../../Editor'
 
 interface CaseListProps {
-  value?: Array<{ logical_operator: 'and' | 'or'; expressions: { left: string; comparison_operator: string; right: string; input_type?: string; }[] }>;
+  value?: Array<{ logical_operator: 'and' | 'or'; expressions: { left: string; operator: string; right: string; input_type?: string; }[] }>;
-  onChange?: (value: Array<{ logical_operator: 'and' | 'or'; expressions: { left: string; comparison_operator: string; right: string; }[] }>) => void;
+  onChange?: (value: Array<{ logical_operator: 'and' | 'or'; expressions: { left: string; operator: string; right: string; }[] }>) => void;
   options: Suggestion[];
   name: string;
   selectedNode?: any;
@@ -40,6 +40,8 @@ const operatorsObj: { [key: string]: SelectProps['options'] } = {
   boolean: [
     { value: 'eq', label: 'workflow.config.if-else.boolean.eq' },
     { value: 'ne', label: 'workflow.config.if-else.boolean.ne' },
+    { value: 'empty', label: 'workflow.config.if-else.empty' },
+    { value: 'not_empty', label: 'workflow.config.if-else.not_empty' },
   ]
 }
 
@@ -199,7 +201,7 @@ const CaseList: FC<CaseListProps> = ({
           expressions: {
             [conditionIndex]: {
               left: newValue,
-              comparison_operator: undefined,
+              operator: undefined,
               right: undefined,
               input_type: undefined
             }
@@ -238,6 +240,7 @@ const CaseList: FC<CaseListProps> = ({
               <div key={caseField.key}>
                 <Form.List name={[caseField.name, 'expressions']}>
                   {(conditionFields, { add: addCondition, remove: removeCondition }) => {
+                    const logicalOperator = form.getFieldValue(name)?.[caseIndex]?.logical_operator || 'and'
                     return (
                       <div className={clsx("rb:relative rb:mb-4 rb:border rb:border-gray-200 rb:rounded rb:p-3 rb:pl-5")}>
                         <div className="rb:flex rb:items-center rb:justify-between rb:mb-3">
@@ -274,14 +277,13 @@ const CaseList: FC<CaseListProps> = ({
                           const cases = form.getFieldValue(name) || [];
                           const currentCase = cases[caseIndex] || {};
                           const currentExpression = currentCase.expressions?.[conditionIndex] || {};
-                          const currentOperator = currentExpression.comparison_operator;
+                          const currentOperator = currentExpression.operator;
                           const hideRightField = currentOperator === 'empty' || currentOperator === 'not_empty';
                           const leftFieldValue = currentExpression.left;
                           const leftFieldOption = options.find(option => `{{${option.value}}}` === leftFieldValue);
                           const leftFieldType = leftFieldOption?.dataType;
                           const operatorList = operatorsObj[leftFieldType || 'default'] || operatorsObj.default || [];
                           const inputType = leftFieldType === 'number' ? currentExpression.input_type : undefined;
-                          const logicalOperator = currentCase.logical_operator;
                           return (
                             <div key={conditionField.key} className={clsx({
                               "rb:mb-3": conditionIndex !== conditionFields.length - 1
@@ -301,7 +303,7 @@ const CaseList: FC<CaseListProps> = ({
                                     </Form.Item>
                                   </Col>
                                   <Col span={8}>
-                                    <Form.Item name={[conditionField.name, 'comparison_operator']} noStyle>
+                                    <Form.Item name={[conditionField.name, 'operator']} noStyle>
                                       <Select
                                         options={operatorList.map(vo => ({
                                           ...vo,

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

@@ -9,7 +9,7 @@ import Editor from '../../Editor'
 
 interface Case {
   logical_operator: 'and' | 'or';
-  expressions: Array<{ left: string; comparison_operator: string; right: string; input_type: string; }>
+  expressions: Array<{ left: string; operator: string; right: string; input_type: string; }>
 }
 
 interface CaseListProps {
@@ -45,6 +45,8 @@ const operatorsObj: { [key: string]: SelectProps['options'] } = {
   boolean: [
     { value: 'eq', label: 'workflow.config.if-else.boolean.eq' },
     { value: 'ne', label: 'workflow.config.if-else.boolean.ne' },
+    { value: 'empty', label: 'workflow.config.if-else.empty' },
+    { value: 'not_empty', label: 'workflow.config.if-else.not_empty' },
   ]
 }
 
@@ -61,7 +63,7 @@ const ConditionList: FC<CaseListProps> = ({
         expressions: {
           [index]: {
             left: newValue,
-            comparison_operator: undefined,
+            operator: undefined,
             right: undefined,
             input_type: undefined
           }
@@ -87,7 +89,7 @@ const ConditionList: FC<CaseListProps> = ({
             {fields.map((field, index) => {
               const expressions = form.getFieldValue([parentName, 'expressions']) || [];
               const currentExpression = expressions[index] || {};
-              const currentOperator = currentExpression.comparison_operator;
+              const currentOperator = currentExpression.operator;
               const hideRightField = currentOperator === 'empty' || currentOperator === 'not_empty';
               const leftFieldValue = currentExpression.left;
               const leftFieldOption = options.find(option => `{{${option.value}}}` === leftFieldValue);
@@ -122,7 +124,7 @@ const ConditionList: FC<CaseListProps> = ({
                       </Col>
                       
                       <Col span={8}>
-                        <Form.Item name={[field.name, 'comparison_operator']} noStyle>
+                        <Form.Item name={[field.name, 'operator']} noStyle>
                           <Select
                             options={operatorList.map(vo => ({
                               ...vo,
@@ -196,7 +198,7 @@ const ConditionList: FC<CaseListProps> = ({
 
             <Button
               type="dashed"
-              onClick={() => add({ left: '', comparison_operator: '', right: '' })}
+              onClick={() => add({ left: '', operator: '', right: '' })}
               className="rb:w-full rb:ml-6 rb:mt-2"
               icon={<span>+</span>}
             >

web/src/views/Workflow/components/Properties/HttpRequest/EditableTable.tsx

@@ -1,179 +1,155 @@
-import { useState, useEffect, useMemo } from 'react';
+import { useMemo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next'
-import { Button, Select, Table } from 'antd';
+import { Button, Select, Table, Form, type TableProps } from 'antd';
 import { PlusOutlined, DeleteOutlined } from '@ant-design/icons';
-import Editor from '../../Editor';
 import type { Suggestion } from '../../Editor/plugin/AutocompletePlugin';
 import Empty from '@/components/Empty';
 import VariableSelect from '../VariableSelect';
 
+interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
+  name?: string | string[];
+  inputType?: 'select' | 'variableSelect';
+  options?: { value: string, label: string }[] | Suggestion[];
+}
+
+const EditableCell: React.FC<React.PropsWithChildren<EditableCellProps>> = ({ 
+  name, 
+  inputType, 
+  options, 
+  children,
+  ...restProps 
+}) => {
+  const { t } = useTranslation();
+  
+  if (!inputType) return <td {...restProps}>{children}</td>;
+  
+  return (
+    <td {...restProps}>
+      <Form.Item name={name} style={{ margin: 0 }}>
+        {inputType === 'select' ? (
+          <Select 
+            placeholder={t('common.pleaseSelect')} 
+            size="small" 
+            options={options as { value: string, label: string }[]} 
+          />
+        ) : (
+          <VariableSelect 
+            placeholder={t('common.pleaseSelect')} 
+            size="small" 
+            options={(options as Suggestion[]) || []} 
+          />
+        )}
+      </Form.Item>
+    </td>
+  );
+};
+
 export interface TableRow {
   key: string;
-  name: string;
+  name?: string;
-  value: string;
+  value?: string;
   type?: string;
 }
 
 interface EditableTableProps {
+  parentName: string | string[];
   title?: string;
-  value?: Record<string, string> | TableRow[];
-  onChange?: (value: TableRow[]) => void;
   options?: Suggestion[];
-  typeOptions?: {value: string, label: string}[]
+  typeOptions?: { value: string, label: string }[]
 }
 
 const EditableTable: React.FC<EditableTableProps> = ({
+  parentName,
   title,
-  value,
-  onChange,
   options = [],
   typeOptions = []
 }) => {
-  const { t } = useTranslation()
+  const { t } = useTranslation();
-  const [rows, setRows] = useState<TableRow[]>([]);
+  const form = Form.useFormInstance();
+  const values = Form.useWatch(typeof parentName === 'string' ? [parentName] : parentName, form);
 
-  useEffect(() => {
+  const createNewRow = (): TableRow => ({
-    if (Array.isArray(value)) {
+    key: Date.now().toString(),
-      setRows([...value])
+    name: undefined,
-    } else if (value && Object.keys(value).length > 0) {
+    value: undefined,
-      setRows(Object.entries(value).map(([key, val], index) => ({
+    ...(typeOptions.length > 0 && { type: typeOptions[0].value })
-        key: index.toString(),
+  });
-        name: key || '',
-        value: val || '',
-        type: typeOptions.length > 0 ? typeOptions[0].value : undefined
-      })))
-    } else {
-      setRows([])
-    }
-  }, [value, typeOptions])
 
-  const handleChange = (key: string, field: 'name' | 'value' | 'type', val: string) => {
+  const handleAdd = useCallback(() => {
-    const newRows = rows.map(row => 
+    form.setFieldValue(parentName, [...(values ?? []), createNewRow()]);
-      row.key === key ? { ...row, [field]: val } : row
+  }, [form, parentName, values, typeOptions]);
-    );
-    setRows(newRows);
-    onChange?.(newRows);
-  };
 
-  const handleAdd = () => {
+  const handleDelete = useCallback((index: number) => {
-    const newRow: TableRow = {
+    const currentValues = form.getFieldValue(parentName) || [];
-      key: Date.now().toString(),
+    form.setFieldValue(parentName, currentValues.filter((_: TableRow, i: number) => i !== index));
-      name: '',
+  }, [form, parentName]);
-      value: '',
-      ...(typeOptions.length > 0 && { type: typeOptions[0].value })
-    };
-    const newRows = [...rows, newRow];
-    setRows(newRows);
-    onChange?.(newRows);
-  };
 
-  const handleDelete = (key: string) => {
+  const createColumn = (dataIndex: string, inputType: 'select' | 'variableSelect', width: string, columnOptions: any[]) => ({
-    const newRows = rows.filter(row => row.key !== key);
+    title: t(`workflow.config.${dataIndex}`),
-    setRows(newRows);
+    dataIndex,
-    onChange?.(newRows);
+    width,
-  };
+    onCell: (_: TableRow, index?: number) => ({
+      name: typeof parentName === 'string' ? [parentName, index ?? 0, dataIndex] : [...parentName, index ?? 0, dataIndex],
+      inputType,
+      options: columnOptions
+    } as any)
+  });
 
-  const columns = useMemo(() => {
+  const columns: TableProps<TableRow>['columns'] = useMemo(() => {
-    const baseColumns = [
+    const hasType = typeOptions.length > 0;
+    const baseWidth = hasType ? '35%' : '45%';
+
+    return [
+      createColumn('name', 'variableSelect', baseWidth, options),
+      ...(hasType ? [createColumn('type', 'select', '20%', typeOptions)] : []),
+      createColumn('value', 'variableSelect', baseWidth, options),
       {
-        title: typeOptions.length > 0 ? t('workflow.config.name') : '键',
+        title: '',
-        dataIndex: 'name',
+        dataIndex: 'actions',
-        width: typeOptions.length > 0 ? '35%' : '45%',
+        width: '10%',
-        render: (text: string, record: TableRow) => (
+        render: (_: any, __: TableRow, index: number) => (
-          <Editor
+          <Button type="text" icon={<DeleteOutlined />} onClick={() => handleDelete(index)} />
-            options={options}
+        )
-            value={text}
-            height={32}
-            variant="outlined"
-            onChange={(value) => handleChange(record.key, 'name', value || '')}
-          />
-        ),
       }
     ];
+  }, [typeOptions, options, t, parentName, handleDelete]);
 
-    if (typeOptions.length > 0) {
+  const AddButton = ({ block = false }: { block?: boolean }) => (
-      baseColumns.push({
+    <Button 
-        title: t('workflow.config.type'),
+      type={block ? "dashed" : "text"} 
-        dataIndex: 'type',
+      icon={<PlusOutlined />} 
-        width: '20%',
+      onClick={handleAdd} 
-        render: (text: string, record: TableRow) => (
+      size="small"
-          <Select
+      block={block}
-            value={text}
+      className={block ? "rb:mt-1" : ""}
-            options={typeOptions}
+    >
-            onChange={(value) => handleChange(record.key, 'type', value)}
+      {block && `+${t('common.add')}`}
-          />
+    </Button>
-        ),
+  );
-      });
-    }
-
-    baseColumns.push({
-      title: typeOptions.length > 0 ? t('workflow.config.value') : '值',
-      dataIndex: 'value',
-      width: typeOptions.length > 0 ? '35%' : '45%',
-      render: (text: string, record: TableRow) => {
-        if (record.type === 'file') {
-          return (
-            <VariableSelect
-              options={options}
-              value={text}
-              onChange={(value) => handleChange(record.key, 'value', value || '')}
-            />
-          )
-        }
-        return (
-          <Editor
-            options={options}
-            value={text}
-            height={32}
-            variant="outlined"
-            onChange={(value) => handleChange(record.key, 'value', value || '')}
-          />
-        )
-      },
-    });
-
-    baseColumns.push({
-      title: '',
-      dataIndex: 'actions',
-      width: '10%',
-      render: (_: any, record: TableRow) => (
-        <Button
-          type="text"
-          icon={<DeleteOutlined />}
-          onClick={() => handleDelete(record.key)}
-        />
-      ),
-    });
-
-    return baseColumns;
-  }, [typeOptions, options, t]);
 
   return (
     <div className="rb:mb-4">
       {title && (
         <div className="rb:flex rb:items-center rb:mb-2 rb:justify-between">
           <div className="rb:font-medium">{title}</div>
-          <Button
+          <AddButton />
-            type="text"
-            icon={<PlusOutlined />}
-            onClick={handleAdd}
-            size="small"
-          />
         </div>
       )}
-      <Table
+      
-        columns={columns}
+      <Form.Item name={parentName}>
-        dataSource={rows}
+        <Table<TableRow>
-        pagination={false}
+          components={{ body: { cell: EditableCell } }}
-        size="small"
+          bordered
-        locale={{ emptyText: <Empty size={88} /> }}
+          dataSource={values}
-        scroll={{ x: 'max-content' }}
+          columns={columns}
-      />
+          pagination={false}
-      {!title && (
+          size="small"
-        <Button type="dashed" onClick={handleAdd} block className='rb:mt-1'>
+          locale={{ emptyText: <Empty size={88} /> }}
-          +{t('common.add')}
+          scroll={{ x: 'max-content' }}
-        </Button>
+        />
-      )}
+      </Form.Item>
+      
+      {!title && <AddButton block />}
     </div>
   );
 };

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

@@ -7,7 +7,7 @@ import AuthConfigModal from './AuthConfigModal'
 import type { AuthConfigModalRef, HttpRequestConfigForm } from './types'
 import VariableSelect from "../VariableSelect";
 import MessageEditor from '../MessageEditor'
-import EditableTable, { type TableRow } from './EditableTable'
+import EditableTable from './EditableTable'
 
 const HttpRequest: FC<{ options: Suggestion[]; }> = ({
   options,
@@ -36,17 +36,6 @@ const HttpRequest: FC<{ options: Suggestion[]; }> = ({
     })
   }
 
-  const updateObjectList = (data: TableRow[], key: string) => {
-    let obj: Record<string, string> = {}
-    if (data.length) {
-      data.forEach(vo => {
-        obj[vo.name] = vo.value
-      })
-    }
-
-    form.setFieldValue(key, obj)
-  }
-
   console.log('HttpRequest', values)
 
   return (
@@ -81,17 +70,17 @@ const HttpRequest: FC<{ options: Suggestion[]; }> = ({
 
       <Form.Item name="headers">
         <EditableTable
+          parentName="headers"
           title="HEADERS"
           options={options}
-          onChange={(headers) => updateObjectList(headers, 'headers')}
         />
       </Form.Item>
 
       <Form.Item name="params">
         <EditableTable
+          parentName="params"
           title="PARAMS"
           options={options}
-          onChange={(params) => updateObjectList(params, 'params')}
         />
       </Form.Item>
 
@@ -113,15 +102,8 @@ const HttpRequest: FC<{ options: Suggestion[]; }> = ({
         {values?.body?.content_type === 'form-data' &&
           <Form.Item name={['body', 'data']} noStyle>
             <EditableTable
+              parentName={['body', 'data']}
               options={options}
-              onChange={(data) => {
-                form.setFieldsValue({
-                  body: { 
-                    ...form.getFieldValue('body'), 
-                    data 
-                  }
-                })
-              }}
               typeOptions={[
                 { label: 'text', value: 'text' },
                 { label: 'file', value: 'file' }
@@ -132,13 +114,8 @@ const HttpRequest: FC<{ options: Suggestion[]; }> = ({
         {values?.body?.content_type === 'x-www-form-urlencoded' &&
           <Form.Item name={['body', 'data']} noStyle>
             <EditableTable
+              parentName={['body', 'data']}
               options={options}
-              onChange={(data) => {
-                const currentBody = form.getFieldValue('body') || {}
-                form.setFieldsValue({
-                  body: { ...currentBody, data }
-                })
-              }}
             />
           </Form.Item>
         }

web/src/views/Workflow/components/Properties/ParamsList/ParamEditModal.tsx

@@ -103,6 +103,7 @@ const ParamEditModal = forwardRef<ParamEditModalRef, ParamEditModalProps>(({
         <FormItem
           name="desc"
           label={t('workflow.config.parameter-extractor.desc')}
+          rules={[{ required: true, message: t('common.pleaseEnter') }]}
         >
           <Input.TextArea placeholder={t('common.enter')} />
         </FormItem>

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

@@ -82,7 +82,7 @@ const Properties: FC<PropertiesProps> = ({
 
   useEffect(() => {
     if (values && selectedNode) {
-      const { id, knowledge_retrieval, group, group_names, ...rest } = values
+      const { id, knowledge_retrieval, group, group_variables, ...rest } = values
       const { knowledge_bases = [], ...restKnowledgeConfig } = (knowledge_retrieval as any) || {}
 
       let allRest = {
@@ -730,7 +730,7 @@ const Properties: FC<PropertiesProps> = ({
                         }
                         />
                       : config.type === 'switch'
-                      ? <Switch onChange={key === 'group' ? () => { form.setFieldValue('group_names', []) } : undefined} />
+                                    ? <Switch onChange={key === 'group' ? () => { form.setFieldValue('group_variables', []) } : undefined} />
                       : config.type === 'categoryList'
                       ? <CategoryList parentName={key} selectedNode={selectedNode} graphRef={graphRef} />
                       : config.type === 'conditionList'

web/src/views/Workflow/constant.ts

@@ -327,7 +327,7 @@ export const nodeLibrary: NodeLibrary[] = [
             type: 'switch',
             defaultValue: false
           },
-          group_names: {
+          group_variables: {
             type: 'groupVariableList',
             defaultValue: [],
           }
@@ -373,11 +373,11 @@ export const nodeLibrary: NodeLibrary[] = [
           },
           headers: {
             type: 'define',
-            defaultValue: {}
+            defaultValue: []
           },
           params: {
             type: 'define',
-            defaultValue: {}
+            defaultValue: []
           },
           body: {
             type: 'define',

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

@@ -90,11 +90,13 @@ export const useWorkflowGraph = ({
               nodeLibraryConfig.config[key].defaultValue = {
                 ...rest
               }
-            } else if (key === 'group_names' && nodeLibraryConfig.config && nodeLibraryConfig.config[key]) {
+            } else if (key === 'group_variables' && nodeLibraryConfig.config && nodeLibraryConfig.config[key]) {
-              const { group_names, group } = config
+              const { group_variables, group } = config
               nodeLibraryConfig.config[key].defaultValue = group
-                ? Object.entries(group_names as Record<string, any>).map(([key, value]) => ({ key, value }))
+                ? Object.entries(group_variables as Record<string, any>).map(([key, value]) => ({ key, value }))
-                : group_names
+                : group_variables
+            } else if (type === 'http-request' && (key === 'headers' || key === 'params') && config[key] && typeof config[key] === 'object' && !Array.isArray(config[key]) && nodeLibraryConfig.config && nodeLibraryConfig.config[key]) {
+              nodeLibraryConfig.config[key].defaultValue = Object.entries(config[key]).map(([name, value]) => ({ name, value }))
             } else if (nodeLibraryConfig.config && nodeLibraryConfig.config[key] && config[key]) {
               nodeLibraryConfig.config[key].defaultValue = config[key]
             }
@@ -882,14 +884,22 @@ export const useWorkflowGraph = ({
 
           if (data.config) {
             Object.keys(data.config).forEach(key => {
-              if (data.config[key] && 'defaultValue' in data.config[key] && key === 'group_names') {
+              if (data.config[key] && 'defaultValue' in data.config[key] && key === 'group_variables') {
-                let group_names = data.config.group.defaultValue ? {} : data.config[key].defaultValue
+                let group_variables = data.config.group.defaultValue ? {} : data.config[key].defaultValue
                 if (data.config.group.defaultValue) {
                   data.config[key].defaultValue.map((vo: any) => {
-                    group_names[vo.key] = vo.value
+                    group_variables[vo.key] = vo.value
+                  })
+                }
+                itemConfig[key] = group_variables
+              } else if (data.type === 'http-request' && (key === 'headers' || key === 'params') && data.config[key] && 'defaultValue' in data.config[key]) {
+                const value = data.config[key].defaultValue
+                itemConfig[key] = {}
+                if (value.length > 0) {
+                  value.forEach((vo: any) => {
+                    itemConfig[key][vo.name] = vo.value
                   })
                 }
-                itemConfig[key] = group_names
               } else if (data.config[key] && 'defaultValue' in data.config[key] && key !== 'knowledge_retrieval') {
                 itemConfig[key] = data.config[key].defaultValue
               } else if (key === 'knowledge_retrieval' && data.config[key] && 'defaultValue' in data.config[key]) {

web/src/views/Workflow/types.ts

@@ -24,7 +24,7 @@ export interface NodeConfig {
 
   knowledge_retrieval?: KnowledgeConfig;
 
-  group_names?: Array<{ key: string, value: string[] }>
+  group_variables?: Array<{ key: string, value: string[] }>
   cycle?: string;
   [key: string]: unknown;
 }