refactor(web): add knowledge/moreDropdown/tablePageLayout components

web/src/components/Knowledge/Knowledge.tsx

@@ -0,0 +1,214 @@
+import { type FC, useRef, useState, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Space, Button, Flex } from 'antd'
+
+import knowledgeEmpty from '@/assets/images/application/knowledgeEmpty.svg'
+import type {
+  KnowledgeConfigForm,
+  KnowledgeConfig,
+  RerankerConfig,
+  KnowledgeBase,
+  KnowledgeModalRef,
+  KnowledgeConfigModalRef,
+  KnowledgeGlobalConfigModalRef,
+} 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 RbCard from '@/components/RbCard/Card'
+
+interface KnowledgeProps {
+  value?: KnowledgeConfig;
+  onChange?: (config: KnowledgeConfig) => void;
+  /** 'app' renders inside a Card with empty state; 'workflow' renders inline with dashed add button */
+  variant?: 'app' | 'workflow';
+}
+
+const Knowledge: FC<KnowledgeProps> = ({ value = { knowledge_bases: [] }, onChange, variant = 'workflow' }) => {
+  const { t } = useTranslation()
+  const knowledgeModalRef = useRef<KnowledgeModalRef>(null)
+  const knowledgeConfigModalRef = useRef<KnowledgeConfigModalRef>(null)
+  const knowledgeGlobalConfigModalRef = useRef<KnowledgeGlobalConfigModalRef>(null)
+  const [knowledgeList, setKnowledgeList] = useState<KnowledgeBase[]>([])
+  const [editConfig, setEditConfig] = useState<KnowledgeConfig>({} as KnowledgeConfig)
+
+  useEffect(() => {
+    if (value && JSON.stringify(value) !== JSON.stringify(editConfig)) {
+      setEditConfig({ ...(value || {}) })
+      const knowledge_bases = [...(value.knowledge_bases || [])]
+      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)
+      }
+    }
+  }, [value])
+
+  const handleKnowledgeConfig = () => knowledgeGlobalConfigModalRef.current?.handleOpen()
+  const handleAddKnowledge = () => knowledgeModalRef.current?.handleOpen()
+
+  const handleDeleteKnowledge = (id: string) => {
+    const list = knowledgeList.filter(item => item.id !== id)
+    setKnowledgeList([...list])
+    onChange?.({ ...editConfig, knowledge_bases: [...list] })
+  }
+
+  const handleEditKnowledge = (item: KnowledgeBase) => knowledgeConfigModalRef.current?.handleOpen(item)
+
+  const refresh = (values: KnowledgeBase[] | KnowledgeConfigForm | RerankerConfig, type: 'knowledge' | 'knowledgeConfig' | 'rerankerConfig') => {
+    if (type === 'knowledge') {
+      let list = [...knowledgeList]
+      if (list.length > 0) {
+        (Array.isArray(values) ? values : [values]).forEach(vo => {
+          const index = list.findIndex(item => item.id === (vo as KnowledgeBase).id)
+          if (index === -1) list.push(vo as KnowledgeBase)
+        })
+      } else {
+        list = [...values as KnowledgeBase[]]
+      }
+      setKnowledgeList([...list])
+      onChange?.({ ...editConfig, knowledge_bases: [...list] })
+    } else if (type === 'knowledgeConfig') {
+      const index = knowledgeList.findIndex(item => item.id === (values as KnowledgeBase).kb_id)
+      const list = [...knowledgeList]
+      list[index] = { ...list[index], ...values, config: { ...values as KnowledgeConfigForm } }
+      setKnowledgeList([...list])
+      onChange?.({ ...editConfig, knowledge_bases: [...list] })
+    } else if (type === 'rerankerConfig') {
+      const rerankerValues = values as RerankerConfig
+      setEditConfig(prev => ({ ...prev, ...rerankerValues }))
+      onChange?.({
+        ...editConfig,
+        ...rerankerValues,
+        reranker_id: rerankerValues.rerank_model ? rerankerValues.reranker_id : undefined,
+        reranker_top_k: rerankerValues.rerank_model ? rerankerValues.reranker_top_k : undefined,
+      })
+    }
+  }
+
+  const modals = (
+    <>
+      <KnowledgeGlobalConfigModal data={editConfig} ref={knowledgeGlobalConfigModalRef} refresh={refresh} />
+      <KnowledgeListModal ref={knowledgeModalRef} selectedList={knowledgeList} refresh={refresh} />
+      <KnowledgeConfigModal ref={knowledgeConfigModalRef} refresh={refresh} />
+    </>
+  )
+
+  const knowledgeItems = knowledgeList.map(item => {
+    if (!item.id) return null
+    return (
+      <Flex
+        key={item.id}
+        align="center"
+        justify="space-between"
+        className={variant === 'app'
+          ? 'rb:py-3! rb:px-4! rb-border rb:rounded-lg'
+          : 'rb:text-[12px] rb:py-1.75! rb:px-2.5! rb-border rb:rounded-lg'
+        }
+      >
+        <div>
+          <span className={variant === 'app' ? 'rb:font-medium rb:leading-4' : 'rb:font-medium rb:leading-4.25'}>{item.name}</span>
+          <Tag
+            color={item.status === 1 ? 'success' : item.status === 0 ? 'default' : 'error'}
+            className={variant === 'app' ? 'rb:ml-2' : 'rb:ml-1 rb:py-0! rb:px-1! rb:text-[12px] rb:leading-4!'}
+          >
+            {item.status === 1 ? t('common.enable') : item.status === 0 ? t('common.disabled') : t('common.deleted')}
+          </Tag>
+          <div className={variant === 'app'
+            ? 'rb:mt-1 rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-4'
+            : 'rb:mt-1 rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-4.25'
+          }>
+            {t('application.contains', { include_count: item.doc_num })}
+          </div>
+        </div>
+        <Space size={12}>
+          {variant === 'app' ? (
+            <>
+              <div className="rb:size-6 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/editBorder.svg')] rb:hover:bg-[url('@/assets/images/editBg.svg')]" onClick={() => handleEditKnowledge(item)} />
+              <div className="rb:size-6 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/deleteBorder.svg')] rb:hover:bg-[url('@/assets/images/deleteBg.svg')]" onClick={() => handleDeleteKnowledge(item.id)} />
+            </>
+          ) : (
+            <>
+              <div className="rb:size-4 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/edit.svg')]" onClick={() => handleEditKnowledge(item)} />
+              <div className="rb:size-4 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/delete.svg')]" onClick={() => handleDeleteKnowledge(item.id)} />
+            </>
+          )}
+        </Space>
+      </Flex>
+    )
+  })
+
+  if (variant === 'app') {
+    return (
+      <RbCard
+        title={t('application.knowledgeBaseAssociation')}
+        extra={
+          <Space>
+            <Button
+              className="rb:h-6! rb:py-0! rb:px-2! rb:rounded-md! rb:text-[#21233"
+              icon={<div className="rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/application/set.svg')]"></div>}
+              onClick={handleKnowledgeConfig}
+            >{t('application.globalConfig')}</Button>
+            <Button className="rb:h-6! rb:py-0! rb:px-2! rb:rounded-md! rb:text-[#21233" onClick={handleAddKnowledge}>+</Button>
+          </Space>
+        }
+        headerType="borderless"
+        headerClassName="rb:h-11.5! rb:py-3! rb:leading-5.5!"
+        titleClassName="rb:font-[MiSans-Bold] rb:font-bold"
+      >
+        <div className="rb:leading-4.5 rb:text-[12px] rb:mb-2 rb:font-medium">
+          {t('application.associatedKnowledgeBase')}
+        </div>
+        {knowledgeList.length === 0
+          ? <div className="rb-border rb:rounded-xl rb:min-h-37">
+              <Empty url={knowledgeEmpty} size={88} subTitle={t('application.knowledgeEmpty')} className="rb:mt-4!" />
+            </div>
+          : <Flex vertical gap={10}>{knowledgeItems}</Flex>
+        }
+        {modals}
+      </RbCard>
+    )
+  }
+
+  return (
+    <div>
+      <Flex align="center" justify="space-between" className="rb:mb-2!">
+        <div className="rb:text-[12px] rb:font-medium rb:leading-4.5">
+          <span className="rb:text-[#ff5d34] rb:text-[14px] rb:font-[SimSun,sans-serif] rb:mr-1">*</span>
+          {t('application.knowledgeBaseAssociation')}
+        </div>
+        <Button
+          onClick={handleKnowledgeConfig}
+          icon={<div className="rb:size-3.5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/application/set.svg')]"></div>}
+          className="rb:py-0! rb:px-1! rb:text-[12px]! rb:group rb:gap-0.5!"
+          size="small"
+          disabled={knowledgeList.length === 0}
+        >
+          {t('application.globalConfig')}
+        </Button>
+      </Flex>
+      <Flex gap={10} vertical>
+        <Button type="dashed" block size="middle" className="rb:text-[12px]!" onClick={handleAddKnowledge}>
+          + {t('workflow.config.knowledge-retrieval.addKnowledge')}
+        </Button>
+        {knowledgeList.length > 0 && knowledgeItems}
+      </Flex>
+      {modals}
+    </div>
+  )
+}
+
+export default Knowledge

web/src/components/Knowledge/KnowledgeConfigModal.tsx

@@ -0,0 +1,124 @@
+import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+import { Form, Select, InputNumber, Flex } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+import type { KnowledgeConfigModalRef, KnowledgeBase, KnowledgeConfigForm, RetrieveType } from './types'
+import RbModal from '@/components/RbModal'
+import RbSlider from '@/components/RbSlider'
+import { formatDateTime } from '@/utils/format';
+
+const FormItem = Form.Item;
+
+interface KnowledgeConfigModalProps {
+  refresh: (values: KnowledgeConfigForm, type: 'knowledgeConfig') => void;
+}
+const retrieveTypes: RetrieveType[] = ['participle', 'semantic', 'hybrid', 'graph']
+
+const KnowledgeConfigModal = forwardRef<KnowledgeConfigModalRef, KnowledgeConfigModalProps>(({ refresh }, ref) => {
+  const { t } = useTranslation();
+  const [visible, setVisible] = useState(false);
+  const [form] = Form.useForm<KnowledgeConfigForm>();
+  const [data, setData] = useState<KnowledgeBase | null>(null);
+  const values = Form.useWatch<KnowledgeConfigForm>([], form);
+
+  const handleClose = () => {
+    setVisible(false);
+    form.resetFields();
+    setData(null)
+  };
+
+  const handleOpen = (data: KnowledgeBase) => {
+    form.setFieldsValue({
+      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 || {}),
+    })
+    setData({...data})
+    setVisible(true);
+  };
+
+  const handleSave = () => {
+    form.validateFields()
+      .then(() => {
+        refresh(values, 'knowledgeConfig')
+        handleClose()
+      })
+      .catch((err) => console.log('err', err));
+  }
+
+  useImperativeHandle(ref, () => ({ handleOpen, handleClose }));
+
+  useEffect(() => {
+    if (values?.retrieve_type) {
+      const fieldsToReset = Object.keys(values).filter(key =>
+        key !== 'kb_id' && key !== 'retrieve_type' && key !== 'top_k'
+      ) as (keyof KnowledgeConfigForm)[];
+      form.resetFields(fieldsToReset);
+    }
+  }, [values?.retrieve_type])
+
+  return (
+    <RbModal
+      title={t('application.knowledgeConfig')}
+      open={visible}
+      onCancel={handleClose}
+      okText={t('common.save')}
+      onOk={handleSave}
+    >
+      <Form form={form} layout="vertical" size="middle">
+        {data && (
+          <Flex align="center" justify="space-between" className="rb:mb-6! rb-border rb:rounded-lg rb:p-[17px_16px]! rb:cursor-pointer rb:bg-[#F0F3F8] rb:text-[#212332]">
+            <div className="rb:text-[16px] rb:leading-5.5">
+              {data.name}
+              <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-4 rb:text-[#5B6167]">{formatDateTime(data.updated_at, 'YYYY-MM-DD HH:mm:ss')}</div>
+          </Flex>
+        )}
+        <FormItem name="kb_id" hidden />
+        <FormItem
+          name="retrieve_type"
+          label={t('application.retrieve_type')}
+          extra={t('application.retrieve_type_desc')}
+          rules={[{ required: true, message: t('common.pleaseSelect') }]}
+        >
+          <Select options={retrieveTypes.map(key => ({ label: t(`application.${key}`), value: key }))} />
+        </FormItem>
+        <FormItem
+          name="top_k"
+          label={t('application.top_k')}
+          rules={[{ required: true, message: t('common.pleaseEnter') }]}
+          extra={t('application.top_k_desc')}
+        >
+          <InputNumber style={{ width: '100%' }} min={1} max={20} />
+        </FormItem>
+        {values?.retrieve_type === 'semantic' && (
+          <FormItem name="similarity_threshold" label={t('application.similarity_threshold')} extra={t('application.similarity_threshold_desc')} initialValue={0.5}>
+            <RbSlider max={1.0} step={0.1} min={0.0} isInput={true} />
+          </FormItem>
+        )}
+        {values?.retrieve_type === 'participle' && (
+          <FormItem name="vector_similarity_weight" label={t('application.vector_similarity_weight')} extra={t('application.vector_similarity_weight_desc')} initialValue={0.5}>
+            <RbSlider max={1.0} step={0.1} min={0.0} isInput={true} />
+          </FormItem>
+        )}
+        {values?.retrieve_type === 'hybrid' && (
+          <>
+            <FormItem name="similarity_threshold" label={t('application.similarity_threshold')} extra={t('application.similarity_threshold_desc1')} initialValue={0.5}>
+              <RbSlider max={1.0} step={0.1} min={0.0} isInput={true} />
+            </FormItem>
+            <FormItem name="vector_similarity_weight" label={t('application.vector_similarity_weight')} extra={t('application.vector_similarity_weight_desc1')} initialValue={0.5}>
+              <RbSlider max={1.0} step={0.1} min={0.0} isInput={true} />
+            </FormItem>
+          </>
+        )}
+      </Form>
+    </RbModal>
+  );
+});
+
+export default KnowledgeConfigModal;

web/src/components/Knowledge/KnowledgeGlobalConfigModal.tsx

@@ -0,0 +1,93 @@
+import { forwardRef, useImperativeHandle, useState, useEffect } from 'react';
+import { Form, InputNumber, Switch, Flex } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+import type { RerankerConfig, KnowledgeGlobalConfigModalRef } from './types'
+import RbModal from '@/components/RbModal'
+import ModelSelect from '@/components/ModelSelect'
+
+const FormItem = Form.Item;
+
+interface KnowledgeGlobalConfigModalProps {
+  data: RerankerConfig;
+  refresh: (values: RerankerConfig, type: 'rerankerConfig') => void;
+}
+
+const KnowledgeGlobalConfigModal = forwardRef<KnowledgeGlobalConfigModalRef, KnowledgeGlobalConfigModalProps>(({ refresh, data }, ref) => {
+  const { t } = useTranslation();
+  const [visible, setVisible] = useState(false);
+  const [form] = Form.useForm<RerankerConfig>();
+  const values = Form.useWatch<RerankerConfig>([], form);
+
+  const handleClose = () => {
+    setVisible(false);
+    form.resetFields();
+  };
+
+  const handleOpen = () => {
+    form.setFieldsValue({ ...data, rerank_model: !!data?.reranker_id })
+    setVisible(true);
+  };
+
+  const handleSave = () => {
+    form.validateFields()
+      .then(() => {
+        refresh(values, 'rerankerConfig')
+        handleClose()
+      })
+      .catch((err) => console.log('err', err));
+  }
+
+  useEffect(() => {
+    if (values?.rerank_model) {
+      form.setFieldsValue({ ...data })
+    } else {
+      form.setFieldsValue({ reranker_id: undefined, reranker_top_k: undefined })
+    }
+  }, [values?.rerank_model])
+
+  useImperativeHandle(ref, () => ({ handleOpen }));
+
+  return (
+    <RbModal
+      title={t('application.globalConfig')}
+      open={visible}
+      onCancel={handleClose}
+      okText={t('common.save')}
+      onOk={handleSave}
+    >
+      <Form form={form} layout="vertical" size="middle">
+        <div className="rb:text-[#5B6167] rb:mb-6">{t('application.globalConfigDesc')}</div>
+        <Flex align="center" justify="space-between" className="rb:my-6!">
+          <div className="rb:text-[14px] rb:font-medium rb:leading-5">
+            {t('application.rerankModel')}
+            <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-0!">
+            <Switch />
+          </FormItem>
+        </Flex>
+        {values?.rerank_model && <>
+          <FormItem
+            name="reranker_id"
+            label={t('application.rearrangementModel')}
+            rules={[{ required: true, message: t('common.pleaseSelect') }]}
+            extra={t('application.rearrangementModelDesc')}
+          >
+            <ModelSelect params={{ type: 'rerank' }} className="rb:w-full!" />
+          </FormItem>
+          <FormItem
+            name="reranker_top_k"
+            label={t('application.reranker_top_k')}
+            rules={[{ required: true, message: t('common.pleaseEnter') }]}
+            extra={t('application.reranker_top_k_desc')}
+          >
+            <InputNumber style={{ width: '100%' }} min={1} max={20} onChange={(value) => form.setFieldValue('reranker_top_k', value)} />
+          </FormItem>
+        </>}
+      </Form>
+    </RbModal>
+  );
+});
+
+export default KnowledgeGlobalConfigModal;

web/src/components/Knowledge/KnowledgeListModal.tsx

@@ -0,0 +1,138 @@
+import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+import { List, Form, Flex } from 'antd';
+import { useTranslation } from 'react-i18next';
+import clsx from 'clsx'
+
+import type { KnowledgeModalRef, KnowledgeBase } from './types'
+import type { KnowledgeBaseListItem } from '@/views/KnowledgeBase/types'
+import RbModal from '@/components/RbModal'
+import { getKnowledgeBaseList } from '@/api/knowledgeBase'
+import SearchInput from '@/components/SearchInput'
+import Empty from '@/components/Empty'
+import { formatDateTime } from '@/utils/format';
+
+interface KnowledgeModalProps {
+  refresh: (rows: KnowledgeBase[], type: 'knowledge') => void;
+  selectedList: KnowledgeBase[];
+}
+
+const KnowledgeListModal = forwardRef<KnowledgeModalRef, KnowledgeModalProps>(({ refresh, selectedList }, ref) => {
+  const { t } = useTranslation();
+  const [visible, setVisible] = useState(false);
+  const [list, setList] = useState<KnowledgeBaseListItem[]>([])
+  const [filterList, setFilterList] = useState<KnowledgeBaseListItem[]>([])
+  const [selectedIds, setSelectedIds] = useState<string[]>([])
+  const [selectedRows, setSelectedRows] = useState<KnowledgeBase[]>([])
+
+  const [form] = Form.useForm()
+  const query = Form.useWatch([], form)
+
+  const handleClose = () => {
+    setVisible(false);
+    form.resetFields()
+    setSelectedIds([])
+    setSelectedRows([])
+  };
+
+  const handleOpen = () => {
+    setVisible(true);
+    form.resetFields()
+    setSelectedIds([])
+    setSelectedRows([])
+  };
+
+  useEffect(() => {
+    if (visible) getList()
+  }, [query?.keywords, visible])
+
+  const getList = () => {
+    getKnowledgeBaseList(undefined, { ...query, pagesize: 100, orderby: 'created_at', desc: true })
+      .then(res => {
+        const response = res as { items: KnowledgeBaseListItem[] }
+        setList(response.items || [])
+        setSelectedIds([])
+        setSelectedRows([])
+      })
+  }
+
+  const handleSave = () => {
+    refresh(selectedRows.map(item => ({
+      ...item,
+      config: {
+        similarity_threshold: 0.7,
+        retrieve_type: 'hybrid',
+        top_k: 3,
+        weight: 1,
+      }
+    })), 'knowledge')
+    setVisible(false);
+  }
+
+  useImperativeHandle(ref, () => ({ handleOpen, handleClose }));
+
+  const handleSelect = (item: KnowledgeBase) => {
+    const index = selectedIds.indexOf(item.id)
+    if (index === -1) {
+      setSelectedIds([...selectedIds, item.id])
+      setSelectedRows([...selectedRows, item])
+    } else {
+      setSelectedIds(selectedIds.filter(id => id !== item.id))
+      setSelectedRows(selectedRows.filter(row => row.id !== item.id))
+    }
+  }
+
+  useEffect(() => {
+    if (list.length && selectedList.length) {
+      setFilterList(list.filter(item => selectedList.findIndex(vo => vo.id === item.id) < 0))
+    } else {
+      setFilterList([...list])
+    }
+  }, [list, selectedList])
+
+  return (
+    <RbModal
+      title={t('application.chooseKnowledge')}
+      open={visible}
+      onCancel={handleClose}
+      okText={t('common.save')}
+      onOk={handleSave}
+      width={1000}
+    >
+      <Flex gap={24} vertical>
+        <Form form={form}>
+          <Form.Item name="keywords" noStyle>
+            <SearchInput placeholder={t('knowledgeBase.searchPlaceholder')} className="rb:w-full!" variant="outlined" />
+          </Form.Item>
+        </Form>
+        {filterList.length === 0
+          ? <Empty />
+          : <List
+            grid={{ gutter: 16, column: 2 }}
+            dataSource={filterList}
+            renderItem={(item: KnowledgeBase) => (
+              <List.Item key={item.id}>
+                <Flex
+                  align="center"
+                  justify="space-between"
+                  className={clsx('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-5.5">
+                    {item.name}
+                    <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-4 rb:text-[#5B6167]">{formatDateTime(item.created_at, 'YYYY-MM-DD HH:mm:ss')}</div>
+                </Flex>
+              </List.Item>
+            )}
+          />
+        }
+      </Flex>
+    </RbModal>
+  );
+});
+
+export default KnowledgeListModal;

web/src/components/Knowledge/types.ts

@@ -0,0 +1,31 @@
+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' | 'graph'
+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;
+}

web/src/components/MoreDropdown/index.tsx

@@ -0,0 +1,26 @@
+import { type FC } from 'react';
+import { Dropdown } from 'antd';
+import type { MenuProps } from 'antd';
+
+interface MoreDropdownProps {
+  items: NonNullable<MenuProps['items']>;
+  placement?: 'bottomRight' | 'bottomLeft' | 'topRight' | 'topLeft';
+  onClick?: (e: React.MouseEvent) => void;
+}
+
+/**
+ * Dropdown triggered by a "more" icon button.
+ * Used in card headers across ApiKeyManagement, Ontology, KnowledgeBase, etc.
+ */
+const MoreDropdown: FC<MoreDropdownProps> = ({ items, placement = 'bottomRight', onClick }) => {
+  return (
+    <Dropdown menu={{ items }} placement={placement}>
+      <div
+        onClick={(e) => { e.stopPropagation(); onClick?.(e); }}
+        className="rb:cursor-pointer rb:size-5.5 rb:bg-[url('@/assets/images/common/more.svg')] rb:hover:bg-[url('@/assets/images/common/more_hover.svg')]"
+      />
+    </Dropdown>
+  );
+};
+
+export default MoreDropdown;

web/src/components/OverflowTags/index.tsx

@@ -0,0 +1,86 @@
+import { useRef, useState, useLayoutEffect, useCallback, type ReactNode } from 'react'
+import { Popover } from 'antd'
+import Tag, { type TagProps } from '@/components/Tag'
+
+interface OverflowTagsProps {
+  items: ReactNode[];
+  gap?: number;
+  numTagColor?: TagProps['color'];
+  numTag?: (num?: number) => ReactNode;
+}
+
+const OverflowTags = ({ items, gap = 8, numTagColor = 'default', numTag }: OverflowTagsProps) => {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const measureRef = useRef<HTMLDivElement>(null)
+  const [visibleCount, setVisibleCount] = useState(items.length)
+
+  const calculate = useCallback((containerWidth: number) => {
+    const measure = measureRef.current
+    if (!measure || containerWidth === 0) return
+
+    const children = Array.from(measure.children) as HTMLElement[]
+    if (!children.length) return
+
+    // last child is the sample +N tag
+    const extraTagWidth = (children[children.length - 1] as HTMLElement).offsetWidth
+    const widths = children.slice(0, -1).map(c => c.offsetWidth)
+
+    // check if all items fit
+    let total = widths.reduce((sum, w, i) => sum + (i > 0 ? gap : 0) + w, 0)
+    if (total <= containerWidth) {
+      setVisibleCount(widths.length)
+      return
+    }
+
+    // find max count that fits alongside +N
+    let used = 0
+    let count = 0
+    for (let i = 0; i < widths.length; i++) {
+      const w = used + (i > 0 ? gap : 0) + widths[i]
+      if (w + gap + extraTagWidth <= containerWidth) {
+        used = w
+        count = i + 1
+      } else {
+        break
+      }
+    }
+    setVisibleCount(count || 1)
+  }, [items, gap])
+
+  useLayoutEffect(() => {
+    const ro = new ResizeObserver(entries => {
+      calculate(entries[0].contentRect.width)
+    })
+    if (containerRef.current) {
+      ro.observe(containerRef.current)
+    }
+    return () => ro.disconnect()
+  }, [calculate])
+
+  const hidden = items.length - visibleCount
+
+  return (
+    <div ref={containerRef} style={{ width: '100%', minWidth: 0 }}>
+      {/* off-screen measure layer */}
+      <div ref={measureRef} style={{ display: 'flex', gap, position: 'fixed', top: -9999, left: -9999, visibility: 'hidden', pointerEvents: 'none' }}>
+        {items.map((item, i) => <span key={i}>{item}</span>)}
+        <Tag>+0</Tag>
+      </div>
+      <Popover content={
+        <div style={{ display: 'flex', gap, flexWrap: 'wrap', maxWidth: 300 }}>
+          {items.map((item, i) => <span key={i}>{item}</span>)}
+        </div>
+      }>
+        <div style={{ display: 'flex', gap, alignItems: 'center', flexWrap: 'nowrap' }}>
+          {items.slice(0, visibleCount).map((item, i) => <span key={i}>{item}</span>)}
+          {hidden > 0 && numTag
+            ? numTag(hidden)
+            : hidden > 0 && <Tag color={numTagColor}>+{hidden}</Tag>
+          }
+        </div>
+      </Popover>
+    </div>
+  )
+}
+
+export default OverflowTags

web/src/components/RbCard/Card.tsx

@@ -2,7 +2,7 @@
  * @Author: ZhaoYing 
  * @Date: 2026-02-02 15:21:14 
  * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-02-25 16:20:39
+ * @Last Modified time: 2026-04-22 10:51:00
  */
 /**
  * RbCard Component
@@ -98,7 +98,7 @@ const RbCard: FC<RbCardProps> = ({
               {typeof title === 'function' ? title() : title ?
                 <Flex align="center">
                   {avatarUrl
-                    ? <img src={avatarUrl} alt={avatarUrl} className="rb:mr-3.25 rb:size-12 rb:rounded-lg" />
+                    ? <img src={avatarUrl} alt={avatarUrl} className="rb:size-12 rb:rounded-lg" />
                     : avatar ? avatar : null
                   }
                   <div className={
@@ -110,7 +110,7 @@ const RbCard: FC<RbCardProps> = ({
                     )
                   }>
                     <div className={`rb:w-full rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap ${titleClassName}`}>{title}</div>
-                    {subTitle && <div className="rb:text-[#5B6167] rb:text-[12px]">{subTitle}</div>}
+                    {subTitle && <div className="rb:w-full rb:text-[#5B6167] rb:text-[12px]">{subTitle}</div>}
                   </div>
                 </Flex> : null
               }
@@ -130,22 +130,24 @@ const RbCard: FC<RbCardProps> = ({
       variant={variant}
       {...props}
       title={typeof title === 'function' ? title() : title ?
-        <Flex align="center" gap={12}>
+        <Flex align="center" gap={12} className={extra ? 'rb:mr-3!' : ''}>
           {/* Avatar image or custom avatar component */}
           {avatarUrl 
-            ? <img src={avatarUrl} alt={avatarUrl} className="rb:mr-3.25 rb:size-12 rb:rounded-lg" />
+            ? <img src={avatarUrl} alt={avatarUrl} className="rb:size-12 rb:rounded-lg" />
             : avatar ? avatar : null
           }
           <div className={
-            clsx(
+            clsx('rb:flex-1',
               {
                 'rb:max-w-full': !avatarUrl && !avatar,
-                'rb:max-w-[calc(100%-80px)]': avatarUrl || avatar,
+                'rb:w-[calc(100%-80px)]': avatarUrl || avatar,
               }
             )
           }>
             {/* Title with tooltip for overflow text */}
-            <Tooltip title={title}><div className={`rb:w-full rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap ${titleClassName}`}>{title}</div></Tooltip>
+            <Tooltip title={title}>
+              <div className={`rb:w-full rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap ${titleClassName}`}>{title}</div>
+            </Tooltip>
             {/* Optional subtitle */}
             {subTitle && <div className="rb:text-[#5B6167] rb:text-[12px]">{subTitle}</div>}
           </div>

web/src/components/TablePageLayout/index.tsx

@@ -0,0 +1,26 @@
+import { type FC, type ReactNode } from 'react';
+import { Flex } from 'antd';
+
+interface TablePageLayoutProps {
+  title: ReactNode;
+  extra?: ReactNode;
+  children: ReactNode;
+}
+
+/**
+ * Standard table page container with white background, title and action area.
+ * Used by management pages like MemberManagement, UserManagement, etc.
+ */
+const TablePageLayout: FC<TablePageLayoutProps> = ({ title, extra, children }) => {
+  return (
+    <div className="rb:h-full rb:overflow-hidden rb:bg-white rb:rounded-lg rb:pt-3 rb:px-3">
+      <Flex justify="space-between" align="center" className="rb:px-1! rb:mb-3!">
+        <div className="rb:font-[MiSans-Bold] rb:font-bold rb:text-[#212332] rb:leading-5">{title}</div>
+        {extra && <div>{extra}</div>}
+      </Flex>
+      {children}
+    </div>
+  );
+};
+
+export default TablePageLayout;

web/src/hooks/useDeleteConfirm.ts

@@ -0,0 +1,33 @@
+import { App } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+interface DeleteConfirmOptions {
+  name: string;
+  onOk: () => Promise<unknown> | void;
+}
+
+/**
+ * Hook for standardized delete confirmation dialog.
+ * Extracts the repeated modal.confirm pattern used across all management views.
+ */
+const useDeleteConfirm = () => {
+  const { t } = useTranslation();
+  const { modal, message } = App.useApp();
+
+  const confirm = ({ name, onOk }: DeleteConfirmOptions) => {
+    modal.confirm({
+      title: t('common.confirmDeleteDesc', { name }),
+      okText: t('common.delete'),
+      cancelText: t('common.cancel'),
+      okType: 'danger',
+      onOk: async () => {
+        await onOk();
+        message.success(t('common.deleteSuccess'));
+      },
+    });
+  };
+
+  return confirm;
+};
+
+export default useDeleteConfirm;