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/CreateKBDialog.tsx
+++ b/frontend/src/components/knowledge/CreateKBDialog.tsx
@@ -0,0 +1,115 @@
+import React, { useState } from 'react';
+import { Modal, Form, Input, message } from 'antd';
+
+const { TextArea } = Input;
+
+interface CreateKBDialogProps {
+  open: boolean;
+  onCancel: () => void;
+  onCreate: (name: string, description?: string) => Promise<void>;
+}
+
+const CreateKBDialog: React.FC<CreateKBDialogProps> = ({
+  open,
+  onCancel,
+  onCreate,
+}) => {
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false);
+
+  const handleOk = async () => {
+    try {
+      const values = await form.validateFields();
+      setLoading(true);
+      
+      await onCreate(values.name, values.description);
+      
+      message.success('知识库创建成功！');
+      form.resetFields();
+      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>
+
+        <div style={{ 
+          padding: 12, 
+          background: '#f0f5ff', 
+          borderRadius: 4,
+          fontSize: 13,
+          color: '#595959'
+        }}>
+          <p style={{ margin: 0, marginBottom: 8 }}>
+            📌 <strong>提示</strong>
+          </p>
+          <ul style={{ margin: 0, paddingLeft: 20 }}>
+            <li>每个用户最多创建 3 个知识库</li>
+            <li>每个知识库最多上传 50 个文档</li>
+            <li>支持的文件格式：PDF、DOC、DOCX、TXT、MD</li>
+            <li>单个文件最大10MB</li>
+          </ul>
+        </div>
+      </Form>
+    </Modal>
+  );
+};
+
+export default CreateKBDialog;
+