Merge branch 'develop' into feature/ui_zy

2026-01-20 16:14:50 +08:00
parent b5b1a98bc4 83fe793e72
commit a7c0789e36
149 changed files with 5332 additions and 8392 deletions
--- a/web/src/views/ApplicationConfig/components/Card.tsx
+++ b/web/src/views/ApplicationConfig/components/Card.tsx
@@ -3,18 +3,21 @@ import RbCard from '@/components/RbCard/Card'

 interface CardProps {
  title?: string | ReactNode;
+  subTitle?: string | ReactNode;
  children: ReactNode;
  extra?: ReactNode;
 }

 const Card: FC<CardProps> = ({
  title,
+  subTitle,
  children,
  extra,
 }) => {
  return (
    <RbCard
      title={title}
+      subTitle={subTitle}
      extra={extra}
      headerType="borderL"
      headerClassName="rb:before:bg-[#155EEF]! rb:before:h-[19px]"
--- a/web/src/views/ApplicationConfig/components/ChatVariableConfigModal.tsx
+++ b/web/src/views/ApplicationConfig/components/ChatVariableConfigModal.tsx
@@ -0,0 +1,101 @@
+import { forwardRef, useImperativeHandle, useState } from 'react';
+import { Form, Input, InputNumber } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+import type { ChatVariableConfigModalRef } from '../types'
+import type { Variable } from './VariableList/types'
+import RbModal from '@/components/RbModal'
+
+interface VariableEditModalProps {
+  refresh: (values: Variable[]) => void;
+}
+
+const ChatVariableConfigModal = forwardRef<ChatVariableConfigModalRef, VariableEditModalProps>(({
+  refresh,
+}, ref) => {
+  const { t } = useTranslation();
+  const [visible, setVisible] = useState(false);
+  const [form] = Form.useForm<{variables: Variable[]}>();
+  const [loading, setLoading] = useState(false)
+  const [initialValues, setInitialValues] = useState<Variable[]>([])
+
+  // 封装取消方法，添加关闭弹窗逻辑
+  const handleClose = () => {
+    setVisible(false);
+    form.resetFields();
+    setLoading(false)
+  };
+
+  const handleOpen = (values: Variable[]) => {
+    console.log('values', values)
+    setVisible(true);
+    form.setFieldsValue({variables: values})
+    setInitialValues([...values])
+  };
+  // 封装保存方法，添加提交逻辑
+  const handleSave = () => {
+    form.validateFields().then((values) => {
+      refresh([
+        ...(values?.variables ?? []),
+      ])
+      handleClose()
+    })
+  }
+
+  // 暴露给父组件的方法
+  useImperativeHandle(ref, () => ({
+    handleOpen,
+    handleClose
+  }));
+
+  console.log(form.getFieldValue('variables'))
+
+  return (
+    <RbModal
+      title={t('application.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 }}
+      >
+        <Form.List name="variables">
+          {(fields) => (
+            <>
+              {fields.map(({ name }, index) => {
+                const field = initialValues[index]
+                return (
+                  <Form.Item
+                    key={name}
+                    name={[name, 'value']}
+                    label={`${field.name}·${field.display_name}`}
+                    rules={[
+                      { required: field.required, message: t('common.pleaseEnter') },
+                    ]}
+                  >
+                    {
+                      field.type === 'text' && <Input placeholder={t('common.pleaseEnter')} />
+                    }
+                    {
+                      field.type === 'number' && <InputNumber placeholder={t('common.pleaseEnter')} className="rb:w-full!" onChange={(value) => form.setFieldValue(['variables', name, 'value'], value)} />
+                    }
+                    {
+                      field.type === 'paragraph' && <Input.TextArea placeholder={t('common.pleaseEnter')} />
+                    }
+                  </Form.Item>
+                )
+              })}
+            </>
+          )}
+        </Form.List>
+      </Form>
+    </RbModal>
+  );
+});
+
+export default ChatVariableConfigModal;
--- a/web/src/views/ApplicationConfig/components/Knowledge/Knowledge.tsx
+++ b/web/src/views/ApplicationConfig/components/Knowledge/Knowledge.tsx
@@ -2,7 +2,6 @@ import { type FC, useRef, useState, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Space, Button, List } from 'antd'
 import knowledgeEmpty from '@/assets/images/application/knowledgeEmpty.svg'
-import Card from './Card'
 import type {
  KnowledgeConfigForm,
  KnowledgeConfig,
@@ -11,14 +10,16 @@ import type {
  KnowledgeModalRef,
  KnowledgeConfigModalRef,
  KnowledgeGlobalConfigModalRef,
-} from '../types'
+} from './types'
 import Empty from '@/components/Empty'
 import KnowledgeListModal from './KnowledgeListModal'
 import KnowledgeConfigModal from './KnowledgeConfigModal'
 import KnowledgeGlobalConfigModal from './KnowledgeGlobalConfigModal'
 import Tag from '@/components/Tag'
+import { getKnowledgeBaseList } from '@/api/knowledgeBase'
+import Card from '../Card'

-const Knowledge: FC<{data: KnowledgeConfig; onUpdate: (config: KnowledgeConfig) => void}> = ({data, onUpdate}) => {
+const Knowledge: FC<{value?: KnowledgeConfig; onChange?: (config: KnowledgeConfig) => void}> = ({value = {knowledge_bases: []}, onChange}) => {
  const { t } = useTranslation()
  const knowledgeModalRef = useRef<KnowledgeModalRef>(null)
  const knowledgeConfigModalRef = useRef<KnowledgeConfigModalRef>(null)
@@ -27,12 +28,31 @@ const Knowledge: FC<{data: KnowledgeConfig; onUpdate: (config: KnowledgeConfig)
  const [editConfig, setEditConfig] = useState<KnowledgeConfig>({} as KnowledgeConfig)

  useEffect(() => {
-    if (data) {
-      setEditConfig({ ...(data || {}) })
-      const knowledge_bases = [...(data.knowledge_bases || [])]
-      setKnowledgeList(knowledge_bases)
+    if (value && JSON.stringify(value) !== JSON.stringify(editConfig)) {
+      setEditConfig({ ...(value || {}) })
+      const knowledge_bases = [...(value.knowledge_bases || [])]
+      
+      // 检查是否有knowledge_bases缺少name字段
+      const basesWithoutName = knowledge_bases.filter(base => !base.name)
+      if (basesWithoutName.length > 0) {
+        // 调用接口获取完整的知识库信息
+        getKnowledgeBaseList().then(res => {
+          const fullBases = knowledge_bases.map(base => {
+            if (!base.name) {
+              const fullBase = res.items.find((item: any) => item.id === base.kb_id)
+              return fullBase ? { ...base, ...fullBase } : base
+            }
+            return base
+          })
+          setKnowledgeList(fullBases)
+        }).catch(() => {
+          setKnowledgeList(knowledge_bases)
+        })
+      } else {
+        setKnowledgeList(knowledge_bases)
+      }
    }
-  }, [data])
+  }, [value])

  const handleKnowledgeConfig = () => {
    knowledgeGlobalConfigModalRef.current?.handleOpen()
@@ -43,7 +63,7 @@ const Knowledge: FC<{data: KnowledgeConfig; onUpdate: (config: KnowledgeConfig)
  const handleDeleteKnowledge = (id: string) => {
    const list = knowledgeList.filter(item => item.id !== id)
    setKnowledgeList([...list])
-    onUpdate({
+    onChange && onChange({
      ...editConfig,
      knowledge_bases: [...list],
    })
@@ -65,7 +85,7 @@ const Knowledge: FC<{data: KnowledgeConfig; onUpdate: (config: KnowledgeConfig)
          list = [...values as KnowledgeBase[]]
        }
      setKnowledgeList([...list])
-      onUpdate({
+      onChange && onChange({
        ...editConfig,
        knowledge_bases: [...list],
      })
@@ -77,14 +97,14 @@ const Knowledge: FC<{data: KnowledgeConfig; onUpdate: (config: KnowledgeConfig)
        config: {...values as KnowledgeConfigForm}
      }
      setKnowledgeList([...list])
-      onUpdate({
+      onChange && onChange({
        ...editConfig,
        knowledge_bases: [...list],
      })
    } else if (type === 'rerankerConfig') {
      const rerankerValues = values as RerankerConfig
      setEditConfig(prev => ({ ...prev, ...rerankerValues }))
-      onUpdate({
+      onChange && onChange({
        ...editConfig,
        ...rerankerValues,
        reranker_id: rerankerValues.rerank_model ? rerankerValues.reranker_id : undefined,
@@ -93,55 +113,54 @@ const Knowledge: FC<{data: KnowledgeConfig; onUpdate: (config: KnowledgeConfig)
    }
  }
  return (
-    <Card 
+    <Card
      title={t('application.knowledgeBaseAssociation')}
      extra={
-        <Button style={{padding: '0 8px', height: '24px'}} onClick={() => handleKnowledgeConfig()}>{t('application.globalConfig')}</Button>
+        <Space>
+          <Button style={{ padding: '0 8px', height: '24px' }} onClick={handleKnowledgeConfig}>{t('workflow.config.knowledge-retrieval.recallConfig')}</Button>
+          <Button style={{ padding: '0 8px', height: '24px' }} onClick={handleAddKnowledge}>+</Button>
+        </Space>
      }
    >
-      <div className="rb:flex rb:items-center rb:justify-between rb:mb-3">
-        <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>
-
      {knowledgeList.length === 0
        ? <Empty url={knowledgeEmpty} size={88} subTitle={t('application.knowledgeEmpty')} />
        : 
          <List
            grid={{ gutter: 12, column: 1 }}
            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-lg">
-                  <div className="rb:font-medium rb:leading-4">
-                    {item.name}
-                    <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-1 rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-5">{t('application.contains', {include_count: item.doc_num})}</div>
+            renderItem={(item) => {
+              if (!item.id) return null
+              return (
+                <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-lg">
+                    <div className="rb:font-medium rb:leading-4">
+                      {item.name}
+                      <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-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-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-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>
                  </div>
-                  <Space size={12}>
-                    <div 
-                      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-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>
-                </div>
-              </List.Item>
-            )}
+                </List.Item>
+              )
+            }}
          />
      }
-      {/* 全局设置 */}
      <KnowledgeGlobalConfigModal
        data={editConfig}
        ref={knowledgeGlobalConfigModalRef}
        refresh={refresh}
      />
-      {/* 知识库列表 */}
      <KnowledgeListModal
        ref={knowledgeModalRef}
        selectedList={knowledgeList}
--- a/web/src/views/ApplicationConfig/components/Knowledge/KnowledgeConfigModal.tsx
+++ b/web/src/views/ApplicationConfig/components/Knowledge/KnowledgeConfigModal.tsx
@@ -2,7 +2,7 @@ import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
 import { Form, Select, InputNumber } from 'antd';
 import { useTranslation } from 'react-i18next';

-import type { KnowledgeConfigModalRef, KnowledgeBase, KnowledgeConfigForm } from '../types'
+import type { KnowledgeConfigModalRef, KnowledgeBase, KnowledgeConfigForm, RetrieveType } from './types'
 import RbModal from '@/components/RbModal'
 import RbSlider from '@/components/RbSlider'
 import { formatDateTime } from '@/utils/format';
@@ -12,7 +12,7 @@ const FormItem = Form.Item;
 interface KnowledgeConfigModalProps {
  refresh: (values: KnowledgeConfigForm, type: 'knowledgeConfig') => void;
 }
-const retrieveTypes = ['participle', 'semantic', 'hybrid']
+const retrieveTypes: RetrieveType[] = ['participle', 'semantic', 'hybrid']

 const KnowledgeConfigModal = forwardRef<KnowledgeConfigModalRef, KnowledgeConfigModalProps>(({
  refresh,
@@ -33,8 +33,11 @@ const KnowledgeConfigModal = forwardRef<KnowledgeConfigModalRef, KnowledgeConfig

  const handleOpen = (data: KnowledgeBase) => {
    form.setFieldsValue({
-      retrieve_type: retrieveTypes[0],
+      retrieve_type: data?.config?.retrieve_type || retrieveTypes[0],
      kb_id: data.id,
+      top_k: data?.config?.top_k || 5,
+      similarity_threshold: data?.config?.similarity_threshold || 0.5,
+      vector_similarity_weight: data?.config?.vector_similarity_weight || 0.5,
      ...(data || {}),
      ...(data?.config || {}),
    })
@@ -62,12 +65,10 @@ const KnowledgeConfigModal = forwardRef<KnowledgeConfigModalRef, KnowledgeConfig

  useEffect(() => {
    if (values?.retrieve_type) {
-      const initialValues = Object.keys(values).map(key => {
-        return {
-          [key as keyof KnowledgeConfigForm]: (key === 'kb_id' || key === 'retrieve_type') ? values[key] : undefined
-        }
-      })
-      form.resetFields(initialValues)
+      const fieldsToReset = Object.keys(values).filter(key => 
+        key !== 'kb_id' && key !== 'retrieve_type'
+      ) as (keyof KnowledgeConfigForm)[];
+      form.resetFields(fieldsToReset);
    }
  }, [values?.retrieve_type])

@@ -84,12 +85,12 @@ const KnowledgeConfigModal = forwardRef<KnowledgeConfigModalRef, KnowledgeConfig
        layout="vertical"
      >
        {data && (
-          <div className="rb:mb-[24px] rb:flex rb:items-center rb:justify-between rb:border rb:rounded-[8px] rb:p-[17px_16px] rb:cursor-pointer rb:bg-[#F0F3F8] rb:border-[#DFE4ED] rb:text-[#212332]">
-            <div className="rb:text-[16px] rb:leading-[22px]">
+          <div className="rb:mb-6 rb:flex rb:items-center rb:justify-between rb:border rb:rounded-lg rb:p-[17px_16px] rb:cursor-pointer rb:bg-[#F0F3F8] rb:border-[#DFE4ED] rb:text-[#212332]">
+            <div className="rb:text-[16px] rb:leading-5.5">
              {data.name}
-              <div className="rb:text-[12px] rb:leading-[16px] rb:text-[#5B6167] rb:mt-[8px]">{t('application.contains', {include_count: data.doc_num})}</div>
+              <div className="rb:text-[12px] rb:leading-4 rb:text-[#5B6167] rb:mt-2">{t('application.contains', {include_count: data.doc_num})}</div>
            </div>
-            <div className="rb:text-[12px] rb:leading-[16px] rb:text-[#5B6167]">{formatDateTime(data.updated_at, 'YYYY-MM-DD HH:mm:ss')}</div>
+            <div className="rb:text-[12px] rb:leading-4 rb:text-[#5B6167]">{formatDateTime(data.updated_at, 'YYYY-MM-DD HH:mm:ss')}</div>
          </div>
        )}
        <FormItem name="kb_id" hidden />
@@ -114,8 +115,14 @@ const KnowledgeConfigModal = forwardRef<KnowledgeConfigModalRef, KnowledgeConfig
          label={t('application.top_k')}
          rules={[{ required: true, message: t('common.pleaseEnter') }]}
          extra={t('application.top_k_desc')}
+          initialValue={5}
        >
-          <InputNumber style={{ width: '100%' }} />
+          <InputNumber
+            style={{ width: '100%' }}
+            min={1}
+            max={20}
+            onChange={(value) => form.setFieldValue('top_k', value)}
+          />
        </FormItem>
        {/* 语义相似度阈值 similarity_threshold */}
        {values?.retrieve_type === 'semantic' && (
@@ -123,6 +130,7 @@ const KnowledgeConfigModal = forwardRef<KnowledgeConfigModalRef, KnowledgeConfig
            name="similarity_threshold"
            label={t('application.similarity_threshold')}
            extra={t('application.similarity_threshold_desc')}
+            initialValue={0.5}
          >
            <RbSlider 
              max={1.0}
@@ -137,6 +145,7 @@ const KnowledgeConfigModal = forwardRef<KnowledgeConfigModalRef, KnowledgeConfig
            name="vector_similarity_weight"
            label={t('application.vector_similarity_weight')}
            extra={t('application.vector_similarity_weight_desc')}
+            initialValue={0.5}
          >
            <RbSlider 
              max={1.0}
@@ -152,6 +161,7 @@ const KnowledgeConfigModal = forwardRef<KnowledgeConfigModalRef, KnowledgeConfig
              name="similarity_threshold"
              label={t('application.similarity_threshold')}
              extra={t('application.similarity_threshold_desc1')}
+              initialValue={0.5}
            >
              <RbSlider 
                max={1.0}
@@ -163,6 +173,7 @@ const KnowledgeConfigModal = forwardRef<KnowledgeConfigModalRef, KnowledgeConfig
              name="vector_similarity_weight"
              label={t('application.vector_similarity_weight')}
              extra={t('application.vector_similarity_weight_desc1')}
+              initialValue={0.5}
            >
              <RbSlider 
                max={1.0}
--- a/web/src/views/ApplicationConfig/components/Knowledge/KnowledgeGlobalConfigModal.tsx
+++ b/web/src/views/ApplicationConfig/components/Knowledge/KnowledgeGlobalConfigModal.tsx
@@ -2,7 +2,7 @@ import { forwardRef, useImperativeHandle, useState, useEffect } from 'react';
 import { Form, InputNumber, Switch } from 'antd';
 import { useTranslation } from 'react-i18next';

-import type { RerankerConfig, KnowledgeGlobalConfigModalRef } from '../types'
+import type { RerankerConfig, KnowledgeGlobalConfigModalRef } from './types'
 import RbModal from '@/components/RbModal'
 import CustomSelect from '@/components/CustomSelect'
 import { getModelListUrl } from '@/api/models'
@@ -71,18 +71,18 @@ const KnowledgeGlobalConfigModal = forwardRef<KnowledgeGlobalConfigModalRef, Kno
        form={form}
        layout="vertical"
      >
-        <div className="rb:text-[#5B6167] rb:mb-[24px]">{t('application.globalConfigDesc')}</div>
+        <div className="rb:text-[#5B6167] rb:mb-6">{t('application.globalConfigDesc')}</div>

        {/* 结果重排 */}
-        <div className="rb:flex rb:items-center rb:justify-between rb:my-[24px]">
-          <div className="rb:text-[14px] rb:font-medium rb:leading-[20px]">
+        <div className="rb:flex rb:items-center rb:justify-between rb:my-6">
+          <div className="rb:text-[14px] rb:font-medium rb:leading-5">
            {t('application.rerankModel')}
-            <div className="rb:mt-[4px] rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-[16px]">{t('application.rerankModelDesc')}</div>
+            <div className="rb:mt-1 rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-4">{t('application.rerankModelDesc')}</div>
          </div>
          <FormItem
            name="rerank_model"
            valuePropName="checked"
-            className="rb:mb-[0px]!"
+            className="rb:mb-0!"
          >
            <Switch />
          </FormItem>
@@ -110,7 +110,12 @@ const KnowledgeGlobalConfigModal = forwardRef<KnowledgeGlobalConfigModalRef, Kno
            rules={[{ required: true, message: t('common.pleaseEnter') }]}
            extra={t('application.reranker_top_k_desc')}
          >
-            <InputNumber style={{ width: '100%' }} min={1} max={20} />
+            <InputNumber
+              style={{ width: '100%' }}
+              min={1}
+              max={20}
+              onChange={(value) => form.setFieldValue('reranker_top_k', value)}
+            />
          </FormItem>
        </>}
      </Form>
--- a/web/src/views/ApplicationConfig/components/Knowledge/KnowledgeListModal.tsx
+++ b/web/src/views/ApplicationConfig/components/Knowledge/KnowledgeListModal.tsx
@@ -2,7 +2,7 @@ import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
 import { Space, List } from 'antd';
 import { useTranslation } from 'react-i18next';
 import clsx from 'clsx'
-import type { KnowledgeModalRef, KnowledgeBase } from '../types'
+import type { KnowledgeModalRef, KnowledgeBase } from './types'
 import type { KnowledgeBaseListItem } from '@/views/KnowledgeBase/types'
 import RbModal from '@/components/RbModal'
 import { getKnowledgeBaseList } from '@/api/knowledgeBase'
@@ -39,12 +39,13 @@ const KnowledgeListModal = forwardRef<KnowledgeModalRef, KnowledgeModalProps>(({
    setQuery({})
    setSelectedIds([])
    setSelectedRows([])
-    getList()
  };

  useEffect(() => {
-    getList()
-  }, [query.keywords])
+    if (visible) {
+      getList()
+    }
+  }, [query.keywords, visible])
  const getList = () => {
    getKnowledgeBaseList(undefined, {
      ...query,
@@ -124,15 +125,15 @@ const KnowledgeListModal = forwardRef<KnowledgeModalRef, KnowledgeModalProps>(({
              dataSource={filterList}
              renderItem={(item: KnowledgeBase) => (
                <List.Item>
-                  <div key={item.id} className={clsx("rb:flex rb:items-center rb:justify-between rb:border rb:rounded-[8px] rb:p-[17px_16px] rb:cursor-pointer rb:hover:bg-[#F0F3F8]", {
+                  <div key={item.id} className={clsx("rb:flex rb:items-center rb:justify-between rb:border rb:rounded-lg rb:p-[17px_16px] rb:cursor-pointer rb:hover:bg-[#F0F3F8]", {
                    "rb:bg-[rgba(21,94,239,0.06)] rb:border-[#155EEF] rb:text-[#155EEF]": selectedIds.includes(item.id),
                    "rb:border-[#DFE4ED] rb:text-[#212332]": !selectedIds.includes(item.id),
                  })} onClick={() => handleSelect(item)}>
-                    <div className="rb:text-[16px] rb:leading-[22px]">
+                    <div className="rb:text-[16px] rb:leading-5.5">
                      {item.name}
-                      <div className="rb:text-[12px] rb:leading-[16px] rb:text-[#5B6167] rb:mt-[8px]">{t('application.contains', {include_count: item.doc_num})}</div>
+                      <div className="rb:text-[12px] rb:leading-4 rb:text-[#5B6167] rb:mt-2">{t('application.contains', {include_count: item.doc_num})}</div>
                    </div>
-                    <div className="rb:text-[12px] rb:leading-[16px] rb:text-[#5B6167]">{formatDateTime(item.created_at, 'YYYY-MM-DD HH:mm:ss')}</div>
+                    <div className="rb:text-[12px] rb:leading-4 rb:text-[#5B6167]">{formatDateTime(item.created_at, 'YYYY-MM-DD HH:mm:ss')}</div>
                  </div>
                </List.Item>
              )}
--- a/web/src/views/ApplicationConfig/components/Knowledge/types.ts
+++ b/web/src/views/ApplicationConfig/components/Knowledge/types.ts
@@ -0,0 +1,30 @@
+import type { KnowledgeBaseListItem } from '@/views/KnowledgeBase/types'
+export interface RerankerConfig {
+  rerank_model?: boolean | undefined;
+  reranker_id?: string | undefined;
+  reranker_top_k?: number | undefined;
+}
+export type RetrieveType = 'participle' | 'semantic' | 'hybrid'
+export interface KnowledgeConfigForm {
+  kb_id?: string;
+  similarity_threshold?: number;
+  vector_similarity_weight?: number;
+  top_k?: number;
+  retrieve_type?: RetrieveType;
+}
+export interface KnowledgeBase extends KnowledgeBaseListItem, KnowledgeConfigForm {
+  config?: KnowledgeConfigForm
+}
+export interface KnowledgeConfig extends RerankerConfig {
+  knowledge_bases: KnowledgeBase[];
+}
+
+export interface KnowledgeConfigModalRef {
+  handleOpen: (data: KnowledgeBase) => void;
+}
+export interface KnowledgeGlobalConfigModalRef {
+  handleOpen: () => void;
+}
+export interface KnowledgeModalRef {
+  handleOpen: (config?: KnowledgeConfig[]) => void;
+}
--- a/web/src/views/ApplicationConfig/components/ToolList/ToolList.tsx
+++ b/web/src/views/ApplicationConfig/components/ToolList/ToolList.tsx
@@ -1,22 +1,22 @@
 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 Card from '../Card'
 import type {
  ToolModalRef,
  ToolOption
-} from '../types'
+} 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 ToolList: FC<{ value?: ToolOption[]; onChange?: (config: ToolOption[]) => void}> = ({value, onChange}) => {
  const { t } = useTranslation()
  const toolModalRef = useRef<ToolModalRef>(null)
  const [toolList, setToolList] = useState<ToolOption[]>([])
  useEffect(() => {
-    if (data) {
-      const processedData = data.map(async (item) => {
+    if (value) {
+      const processedData = value.map(async (item) => {
        if (!item.label && item.tool_id) {
          try {
            const [toolDetail, methods] = await Promise.all([
@@ -77,7 +77,7 @@ const ToolList: FC<{ data: ToolOption[]; onUpdate: (config: ToolOption[]) => voi
      
      Promise.all(processedData).then(setToolList)
    }
-  }, [data])
+  }, [value])

  const handleAddTool = () => {
    toolModalRef.current?.handleOpen()
@@ -85,12 +85,12 @@ const ToolList: FC<{ data: ToolOption[]; onUpdate: (config: ToolOption[]) => voi
  const updateTools = (tool: ToolOption) => {
    const list = [...toolList, tool]
    setToolList(list)
-    onUpdate(list)
+    onChange && onChange(list)
  }
  const handleDeleteTool = (index: number) => {
    const list = toolList.filter((_item, idx) => idx !== index)
    setToolList([...list])
-    onUpdate(list)
+    onChange && onChange(list)
  }
  const handleChangeEnabled = (index: number) => {
    const list = toolList.map((item, idx) => {
@@ -103,7 +103,7 @@ const ToolList: FC<{ data: ToolOption[]; onUpdate: (config: ToolOption[]) => voi
      return item
    })
    setToolList([...list])
-    onUpdate(list)
+    onChange && onChange(list)
  }
  return (
    <Card 
@@ -112,7 +112,6 @@ const ToolList: FC<{ data: ToolOption[]; onUpdate: (config: ToolOption[]) => voi
        <Button style={{ padding: '0 8px', height: '24px' }} onClick={handleAddTool}>+{t('application.addTool')}</Button>
      }
    >
-
      {toolList.length === 0
        ? <Empty size={88} />
        : 
--- a/web/src/views/ApplicationConfig/components/ToolList/ToolModal.tsx
+++ b/web/src/views/ApplicationConfig/components/ToolList/ToolModal.tsx
--- a/web/src/views/ApplicationConfig/components/ToolList/types.ts
+++ b/web/src/views/ApplicationConfig/components/ToolList/types.ts
@@ -0,0 +1,26 @@
+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;
+}
+export interface ToolModalRef {
+  handleOpen: () => void;
+}
--- a/web/src/views/ApplicationConfig/components/VariableList.tsx
+++ b/web/src/views/ApplicationConfig/components/VariableList.tsx
@@ -1,131 +0,0 @@
-import { type FC, useRef, useState, useEffect } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Space, Button, Switch } from 'antd'
-import variablesEmpty from '@/assets/images/application/variablesEmpty.svg'
-import Card from './Card'
-import Table from '@/components/Table';
-import type { Variable, VariableEditModalRef } from '../types'
-import Empty from '@/components/Empty'
-import VariableEditModal from './VariableEditModal'
-
-interface VariableListProps {
-  data?: Variable[];
-  onUpdate: (data: Variable[]) => void;
-}
-const VariableList: FC<VariableListProps> = ({data = [], onUpdate}) => {
-  const { t } = useTranslation()
-  const variableEditModalRef = useRef<VariableEditModalRef>(null)
-  const [variableList, setVariableList] = useState<Variable[]>([])
-  const [maxIndex, setMaxIndex] = useState(0)
-
-  useEffect(() => {
-    if (!data || data.length === 0) return
-    const list = data.map((item, index) => ({
-      ...item,
-      index
-    }))
-    setVariableList(list)
-    onUpdate(list)
-    setMaxIndex(list.length)
-  }, [data])
-  
-  const handleAddVariable = () => {
-    variableEditModalRef.current?.handleOpen()
-  }
-  const handleSaveVariable = (value: Variable) => {
-    if (value.index !== undefined && value.index >= 0) {
-      const index = variableList.findIndex(item => item.index === value.index)
-      if (index !== -1) {
-        const newData = [...variableList]
-        newData[index] = value
-        setVariableList([...newData])
-        onUpdate([...newData])
-      }
-    } else {
-      const list = [...variableList, {
-        index: maxIndex + 1,
-        ...value
-      }]
-      setVariableList(list)
-      onUpdate([...list])
-      setMaxIndex(maxIndex + 1)
-    }
-  }
-  const handleDeleteVariable = (index: number) => {
-    const list = variableList.filter((_, i) => i !== index)
-    setVariableList(list)
-    onUpdate([...list])
-  }
-  return (
-    <Card title={t('application.variableConfiguration')}>
-      <div className="rb:flex rb:items-center rb:justify-between rb:mb-[11px]">
-        <div className="rb:font-medium rb:leading-[20px]">
-          {t('application.VariableManagement')}
-          <span className="rb:font-regular rb:text-[12px] rb:text-[#5B6167]"> ({t('application.VariableManagementDesc')})</span>
-        </div>
-        <Button style={{padding: '0 8px', height: '24px'}} onClick={handleAddVariable}>+{t('application.addVariables')}</Button>
-      </div>
-
-      {/* List */}
-      {variableList.length > 0
-        ? (
-          <div className="rb:mt-[12px]">
-            <Table
-              rowKey="index"
-              pagination={false}
-              columns={[
-                {
-                  title: t('application.variableType'),
-                  dataIndex: 'type',
-                  key: 'type',
-                  render: (type) => t(`application.${type}`)
-                },
-                {
-                  title: t('application.variableKey'),
-                  dataIndex: 'name',
-                  key: 'name',
-                },
-                {
-                  title: t('application.variableName'),
-                  dataIndex: 'display_name',
-                  key: 'display_name',
-                },
-                {
-                  title: t('application.optional'),
-                  dataIndex: 'required',
-                  key: 'required',
-                  render: (required) => <Switch checked={!required} disabled />
-                },
-                {
-                  title: t('common.operation'),
-                  key: 'action',
-                  render: (_, record, index: number) => (
-                    <Space size="middle">
-                      <Button
-                        type="link"
-                        onClick={() => variableEditModalRef.current?.handleOpen(record as Variable)}
-                      >
-                        {t('common.edit')}
-                      </Button>
-                      <Button type="link" danger onClick={() => handleDeleteVariable(index)}>
-                        {t('common.delete')}
-                      </Button>
-                    </Space>
-                  ),
-                },
-              ]}
-              initialData={variableList as unknown as Record<string, unknown>[]}
-              emptySize={88}
-            />
-          </div>
-        )
-        : <Empty url={variablesEmpty} size={88} subTitle={t('application.variablesEmpty')} />
-      }
-      <VariableEditModal
-        ref={variableEditModalRef}
-        refreshTable={handleSaveVariable}
-      />
-    </Card>
-  )
-}
-export default VariableList
--- a/web/src/views/ApplicationConfig/components/VariableList/ApiExtensionModal.tsx
+++ b/web/src/views/ApplicationConfig/components/VariableList/ApiExtensionModal.tsx
@@ -2,7 +2,7 @@ import { forwardRef, useImperativeHandle, useState } from 'react';
 import { Form, Input } from 'antd';
 import { useTranslation } from 'react-i18next';

-import type { ApiExtensionModalData, ApiExtensionModalRef } from '../types'
+import type { ApiExtensionModalData, ApiExtensionModalRef } from './types'
 import RbModal from '@/components/RbModal'

 const FormItem = Form.Item;
--- a/web/src/views/ApplicationConfig/components/VariableList/VariableEditModal.tsx
+++ b/web/src/views/ApplicationConfig/components/VariableList/VariableEditModal.tsx
@@ -2,7 +2,7 @@ import { forwardRef, useImperativeHandle, useState, useRef } from 'react';
 import { Form, Input, Select, InputNumber, Checkbox, Tag, Divider, Button } from 'antd';
 import { useTranslation } from 'react-i18next';

-import type { ApiExtensionModalRef, Variable, VariableEditModalRef } from '../types'
+import type { ApiExtensionModalRef, Variable, VariableEditModalRef } from './types'
 import RbModal from '@/components/RbModal'
 import SortableList from '@/components/SortableList'
 import ApiExtensionModal from './ApiExtensionModal'
@@ -137,7 +137,14 @@ const VariableEditModal = forwardRef<VariableEditModalRef, VariableEditModalProp
              { pattern: /^[a-zA-Z_][a-zA-Z0-9_]*$/, message: t('application.invalidVariableName') },
            ]}
          >
-            <Input placeholder={t('common.enter')} />
+            <Input 
+              placeholder={t('common.enter')} 
+              onBlur={(e) => {
+                if (!form.getFieldValue('display_name')) {
+                  form.setFieldValue('display_name', e.target.value)
+                }
+              }}
+            />
          </FormItem>
          {/* 显示名称 */}
          <FormItem
--- a/web/src/views/ApplicationConfig/components/VariableList/VariableList.tsx
+++ b/web/src/views/ApplicationConfig/components/VariableList/VariableList.tsx
@@ -0,0 +1,110 @@
+import { type FC, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Space, Button, Switch, Form } from 'antd'
+import variablesEmpty from '@/assets/images/application/variablesEmpty.svg'
+import Card from '../Card'
+import Table from '@/components/Table';
+import type { Variable, VariableEditModalRef } from './types'
+import Empty from '@/components/Empty'
+import VariableEditModal from './VariableEditModal'
+
+interface VariableListProps {
+  value?: Variable[];
+  onChange?: (value: Variable[]) => void;
+}
+const VariableList: FC<VariableListProps> = ({value = [], onChange}) => {
+  const { t } = useTranslation()
+  const variableEditModalRef = useRef<VariableEditModalRef>(null)
+  
+  const handleAddVariable = () => {
+    variableEditModalRef.current?.handleOpen()
+  }
+  const handleSaveVariable = (variable: Variable) => {
+    const newList = [...(value || [])]
+    if (variable.index !== undefined && variable.index >= 0) {
+      const index = newList.findIndex(item => item.index === variable.index)
+      if (index !== -1) {
+        newList[index] = variable
+      }
+    } else {
+      newList.push({ ...variable, index: Date.now() })
+    }
+    onChange?.(newList)
+  }
+  return (
+    <Card
+      title={<>
+        {t('application.variableConfiguration')}
+        <span className="rb:font-regular rb:text-[12px] rb:text-[#5B6167]"> ({t('application.VariableManagementDesc')})</span>
+      </>}
+      extra={<Button style={{ padding: '0 8px', height: '24px' }} onClick={handleAddVariable}>+ {t('application.addVariables')}</Button>}
+    >
+      <Form.List name="variables" initialValue={value}>
+        {(fields, { remove }) => {
+          return (
+            <>
+              {fields.length > 0 ? (
+                <div className="rb:mt-3">
+                  <Table
+                    rowKey="index"
+                    pagination={false}
+                    columns={[
+                      {
+                        title: t('application.variableType'),
+                        dataIndex: 'type',
+                        key: 'type',
+                        render: (type) => t(`application.${type}`)
+                      },
+                      {
+                        title: t('application.variableKey'),
+                        dataIndex: 'name',
+                        key: 'name',
+                      },
+                      {
+                        title: t('application.variableName'),
+                        dataIndex: 'display_name',
+                        key: 'display_name',
+                      },
+                      {
+                        title: t('application.optional'),
+                        dataIndex: 'required',
+                        key: 'required',
+                        render: (required) => <Switch checked={!required} disabled />
+                      },
+                      {
+                        title: t('common.operation'),
+                        key: 'action',
+                        render: (_, record, index: number) => (
+                          <Space size="middle">
+                            <Button
+                              type="link"
+                              onClick={() => variableEditModalRef.current?.handleOpen(record as Variable)}
+                            >
+                              {t('common.edit')}
+                            </Button>
+                            <Button type="link" danger onClick={() => remove(index)}>
+                              {t('common.delete')}
+                            </Button>
+                          </Space>
+                        ),
+                      },
+                    ]}
+                    initialData={value as unknown as Record<string, unknown>[]}
+                    emptySize={88}
+                  />
+                </div>
+              ) : (
+                <Empty url={variablesEmpty} size={88} subTitle={t('application.variablesEmpty')} />
+              )}
+            </>
+          )
+        }}
+      </Form.List>
+      <VariableEditModal
+        ref={variableEditModalRef}
+        refreshTable={handleSaveVariable}
+      />
+    </Card>
+  )
+}
+export default VariableList
--- a/web/src/views/ApplicationConfig/components/VariableList/types.ts
+++ b/web/src/views/ApplicationConfig/components/VariableList/types.ts
@@ -0,0 +1,28 @@
+export interface Variable {
+  index?: number;
+  name: string;
+  display_name: string;
+  type: string;
+  required: boolean;
+  max_length?: number;
+  description?: string;
+
+  key?: string;
+  default_value?: string;
+  options?: string[];
+  api_extension?: string;
+  hidden?: boolean;
+  value?: any;
+}
+export interface VariableEditModalRef {
+  handleOpen: (values?: Variable) => void;
+}
+
+export interface ApiExtensionModalData {
+  name: string;
+  apiEndpoint: string;
+  apiKey: string;
+}
+export interface ApiExtensionModalRef {
+  handleOpen: () => void;
+}