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

2026-04-22 11:33:37 +08:00
parent a106f4e3cd
commit 5304117ae2
10 changed files with 781 additions and 8 deletions
--- a/web/src/components/Knowledge/KnowledgeGlobalConfigModal.tsx
+++ b/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;