feat(frontend): Day 21 knowledge base management frontend completed

2025-10-11 12:48:26 +08:00
parent 5bacdc1768
commit 186ae55302
9 changed files with 1459 additions and 221 deletions
--- a/frontend/src/components/knowledge/EditKBDialog.tsx
+++ b/frontend/src/components/knowledge/EditKBDialog.tsx
@@ -0,0 +1,111 @@
+import React, { useState, useEffect } from 'react';
+import { Modal, Form, Input, message } from 'antd';
+import type { KnowledgeBase } from '../../api/knowledgeBaseApi';
+
+const { TextArea } = Input;
+
+interface EditKBDialogProps {
+  open: boolean;
+  knowledgeBase: KnowledgeBase | null;
+  onCancel: () => void;
+  onUpdate: (id: string, name: string, description?: string) => Promise<void>;
+}
+
+const EditKBDialog: React.FC<EditKBDialogProps> = ({
+  open,
+  knowledgeBase,
+  onCancel,
+  onUpdate,
+}) => {
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false);
+
+  // 当知识库数据变化时，更新表单
+  useEffect(() => {
+    if (open && knowledgeBase) {
+      form.setFieldsValue({
+        name: knowledgeBase.name,
+        description: knowledgeBase.description || '',
+      });
+    }
+  }, [open, knowledgeBase, form]);
+
+  const handleOk = async () => {
+    if (!knowledgeBase) return;
+
+    try {
+      const values = await form.validateFields();
+      setLoading(true);
+      
+      await onUpdate(knowledgeBase.id, values.name, values.description);
+      
+      message.success('知识库更新成功！');
+      onCancel();
+    } catch (error: any) {
+      if (error.errorFields) {
+        // 表单验证错误
+        return;
+      }
+      message.error(error.message || '更新失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCancel = () => {
+    form.resetFields();
+    onCancel();
+  };
+
+  return (
+    <Modal
+      title="编辑知识库"
+      open={open}
+      onOk={handleOk}
+      onCancel={handleCancel}
+      okText="保存"
+      cancelText="取消"
+      confirmLoading={loading}
+      destroyOnClose
+    >
+      <Form
+        form={form}
+        layout="vertical"
+        autoComplete="off"
+      >
+        <Form.Item
+          name="name"
+          label="知识库名称"
+          rules={[
+            { required: true, message: '请输入知识库名称' },
+            { max: 50, message: '名称不能超过50个字符' },
+          ]}
+        >
+          <Input 
+            placeholder="例如：文献综述资料" 
+            maxLength={50}
+            showCount
+          />
+        </Form.Item>
+
+        <Form.Item
+          name="description"
+          label="描述（选填）"
+          rules={[
+            { max: 200, message: '描述不能超过200个字符' },
+          ]}
+        >
+          <TextArea
+            placeholder="简要描述该知识库的用途..."
+            rows={4}
+            maxLength={200}
+            showCount
+          />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export default EditKBDialog;
+