feat(knowledge): 添加知识管理功能模块

- 实现知识集的创建、编辑、删除功能 - 实现知识条目的创建、编辑、删除功能 - 添加知识集详情页面展示功能 - 实现知识条目导入数据集文件功能 - 添加知识管理主页列表展示功能 - 实现知识集和知识条目的状态管理 - 集成标签管理和搜索过滤功能 - 添加知识条目的批量操作支持
2026-01-21 11:48:36 +08:00
parent da6c7860cb
commit 34fa184b69
8 changed files with 1356 additions and 0 deletions
--- a/frontend/src/pages/KnowledgeManagement/components/CreateKnowledgeSet.tsx
+++ b/frontend/src/pages/KnowledgeManagement/components/CreateKnowledgeSet.tsx
@@ -0,0 +1,201 @@
+import { useEffect, useState } from "react";
+import { Button, DatePicker, Form, Input, message, Modal, Select } from "antd";
+import { PlusOutlined } from "@ant-design/icons";
+import dayjs from "dayjs";
+import {
+  createKnowledgeSetUsingPost,
+  updateKnowledgeSetByIdUsingPut,
+} from "../knowledge-management.api";
+import {
+  knowledgeSourceTypeOptions,
+  knowledgeStatusOptions,
+} from "../knowledge-management.const";
+import {
+  KnowledgeSet,
+  KnowledgeStatusType,
+} from "../knowledge-management.model";
+import { queryDatasetTagsUsingGet } from "@/pages/DataManagement/dataset.api";
+
+export default function CreateKnowledgeSet({
+  isEdit,
+  data,
+  showBtn = true,
+  onUpdate,
+  onClose,
+}: {
+  isEdit?: boolean;
+  showBtn?: boolean;
+  data?: Partial<KnowledgeSet> | null;
+  onUpdate: () => void;
+  onClose: () => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const [form] = Form.useForm();
+  const [tagOptions, setTagOptions] = useState<{ label: string; value: string }[]>([]);
+
+  const fetchTags = async () => {
+    try {
+      const { data: tagData } = await queryDatasetTagsUsingGet();
+      const options = Array.isArray(tagData)
+        ? tagData.map((tag) => ({ label: tag.name, value: tag.name }))
+        : [];
+      setTagOptions(options);
+    } catch (error) {
+      console.error("获取标签失败", error);
+    }
+  };
+
+  useEffect(() => {
+    if (open) {
+      fetchTags();
+    }
+  }, [open]);
+
+  useEffect(() => {
+    if (isEdit && data) {
+      setOpen(true);
+      form.setFieldsValue({
+        name: data.name,
+        description: data.description,
+        status: data.status ?? KnowledgeStatusType.DRAFT,
+        domain: data.domain,
+        businessLine: data.businessLine,
+        owner: data.owner,
+        validFrom: data.validFrom ? dayjs(data.validFrom) : null,
+        validTo: data.validTo ? dayjs(data.validTo) : null,
+        sourceType: data.sourceType,
+        sensitivity: data.sensitivity,
+        tags: data.tags?.map((tag) => tag.name) || [],
+        metadata: data.metadata,
+      });
+    }
+  }, [isEdit, data, form]);
+
+  const handleSubmit = async () => {
+    try {
+      const values = await form.validateFields();
+      const validFrom = values.validFrom ? values.validFrom.format("YYYY-MM-DD") : undefined;
+      const validTo = values.validTo ? values.validTo.format("YYYY-MM-DD") : undefined;
+
+      if (validFrom && validTo && dayjs(validFrom).isAfter(dayjs(validTo))) {
+        message.warning("有效期开始不能晚于结束时间");
+        return;
+      }
+
+      const payload = {
+        ...values,
+        validFrom,
+        validTo,
+        tags: values.tags || [],
+      };
+
+      if (isEdit && data?.id) {
+        await updateKnowledgeSetByIdUsingPut(data.id, payload);
+        message.success("知识集更新成功");
+      } else {
+        await createKnowledgeSetUsingPost(payload);
+        message.success("知识集创建成功");
+      }
+
+      setOpen(false);
+      form.resetFields();
+      onUpdate();
+    } catch {
+      message.error("操作失败，请重试");
+    }
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+    form.resetFields();
+    onClose?.();
+  };
+
+  const isReadOnly =
+    data?.status === KnowledgeStatusType.ARCHIVED ||
+    data?.status === KnowledgeStatusType.DEPRECATED;
+
+  return (
+    <>
+      {showBtn && (
+        <Button
+          type="primary"
+          icon={<PlusOutlined />}
+          onClick={() => {
+            form.resetFields();
+            form.setFieldsValue({ status: KnowledgeStatusType.DRAFT, tags: [] });
+            setOpen(true);
+          }}
+        >
+          创建知识集
+        </Button>
+      )}
+      <Modal
+        title={isEdit ? "编辑知识集" : "创建知识集"}
+        open={open}
+        okText="确定"
+        cancelText="取消"
+        onCancel={handleClose}
+        onOk={handleSubmit}
+        maskClosable={false}
+        width={720}
+        okButtonProps={{ disabled: isReadOnly }}
+      >
+        <Form form={form} layout="vertical" disabled={isReadOnly}>
+          <div className="grid grid-cols-2 gap-4">
+            <Form.Item
+              label="知识集名称"
+              name="name"
+              rules={[{ required: true, message: "请输入知识集名称" }]}
+            >
+              <Input placeholder="请输入知识集名称" />
+            </Form.Item>
+            <Form.Item label="状态" name="status">
+              <Select options={knowledgeStatusOptions} />
+            </Form.Item>
+          </div>
+          <Form.Item label="描述" name="description">
+            <Input.TextArea placeholder="请输入知识集描述" rows={3} />
+          </Form.Item>
+          <div className="grid grid-cols-2 gap-4">
+            <Form.Item label="领域" name="domain">
+              <Input placeholder="请输入领域" />
+            </Form.Item>
+            <Form.Item label="业务线" name="businessLine">
+              <Input placeholder="请输入业务线" />
+            </Form.Item>
+          </div>
+          <div className="grid grid-cols-2 gap-4">
+            <Form.Item label="负责人" name="owner">
+              <Input placeholder="请输入负责人" />
+            </Form.Item>
+            <Form.Item label="敏感级别" name="sensitivity">
+              <Input placeholder="请输入敏感级别" />
+            </Form.Item>
+          </div>
+          <div className="grid grid-cols-2 gap-4">
+            <Form.Item label="有效期开始" name="validFrom">
+              <DatePicker className="w-full" />
+            </Form.Item>
+            <Form.Item label="有效期结束" name="validTo">
+              <DatePicker className="w-full" />
+            </Form.Item>
+          </div>
+          <Form.Item label="来源类型" name="sourceType">
+            <Select options={knowledgeSourceTypeOptions} />
+          </Form.Item>
+          <Form.Item label="标签" name="tags">
+            <Select
+              mode="tags"
+              options={tagOptions}
+              placeholder="请选择或输入标签"
+            />
+          </Form.Item>
+          <Form.Item label="扩展元数据" name="metadata">
+            <Input.TextArea placeholder="请输入元数据（JSON）" rows={3} />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </>
+  );
+}
--- a/frontend/src/pages/KnowledgeManagement/components/ImportKnowledgeItemsDialog.tsx
+++ b/frontend/src/pages/KnowledgeManagement/components/ImportKnowledgeItemsDialog.tsx
@@ -0,0 +1,97 @@
+import { useState } from "react";
+import { Button, Form, Modal, message, Select } from "antd";
+import { PlusOutlined } from "@ant-design/icons";
+import DatasetFileTransfer from "@/components/business/DatasetFileTransfer";
+import { Dataset, DatasetFile } from "@/pages/DataManagement/dataset.model";
+import {
+  importKnowledgeItemsUsingPost,
+} from "../knowledge-management.api";
+import { knowledgeStatusOptions } from "../knowledge-management.const";
+import { KnowledgeStatusType } from "../knowledge-management.model";
+
+export default function ImportKnowledgeItemsDialog({
+  setId,
+  onImported,
+  disabled,
+}: {
+  setId: string;
+  onImported: () => void;
+  disabled?: boolean;
+}) {
+  const [open, setOpen] = useState(false);
+  const [form] = Form.useForm();
+  const [selectedFilesMap, setSelectedFilesMap] = useState<Record<string, DatasetFile>>({});
+  const [selectedDataset, setSelectedDataset] = useState<Dataset | null>(null);
+
+  const handleSubmit = async () => {
+    if (!selectedDataset) {
+      message.warning("请先选择数据集");
+      return;
+    }
+    const fileIds = Object.keys(selectedFilesMap);
+    if (fileIds.length === 0) {
+      message.warning("请至少选择一个文件");
+      return;
+    }
+
+    const values = await form.validateFields();
+
+    try {
+      await importKnowledgeItemsUsingPost(setId, {
+        datasetId: selectedDataset.id,
+        fileIds,
+        status: values.status || undefined,
+      });
+      message.success("导入成功");
+      setOpen(false);
+      setSelectedFilesMap({});
+      setSelectedDataset(null);
+      form.resetFields();
+      onImported();
+    } catch {
+      message.error("导入失败，请重试");
+    }
+  };
+
+  return (
+    <>
+      <Button
+        icon={<PlusOutlined />}
+        onClick={() => {
+          form.resetFields();
+          form.setFieldsValue({ status: KnowledgeStatusType.DRAFT });
+          setOpen(true);
+        }}
+        disabled={disabled}
+      >
+        导入数据集文件
+      </Button>
+      <Modal
+        title="导入数据集文件"
+        open={open}
+        onCancel={() => {
+          setOpen(false);
+          setSelectedFilesMap({});
+          setSelectedDataset(null);
+        }}
+        onOk={handleSubmit}
+        okText="确定"
+        cancelText="取消"
+        width={1000}
+        maskClosable={false}
+      >
+        <Form form={form} layout="vertical">
+          <Form.Item label="条目状态" name="status">
+            <Select options={knowledgeStatusOptions} />
+          </Form.Item>
+        </Form>
+        <DatasetFileTransfer
+          open={open}
+          selectedFilesMap={selectedFilesMap}
+          onSelectedFilesChange={setSelectedFilesMap}
+          onDatasetSelect={setSelectedDataset}
+        />
+      </Modal>
+    </>
+  );
+}
--- a/frontend/src/pages/KnowledgeManagement/components/KnowledgeItemEditor.tsx
+++ b/frontend/src/pages/KnowledgeManagement/components/KnowledgeItemEditor.tsx
@@ -0,0 +1,198 @@
+import { useEffect, useState } from "react";
+import { DatePicker, Form, Input, message, Modal, Select } from "antd";
+import dayjs from "dayjs";
+import {
+  createKnowledgeItemUsingPost,
+  updateKnowledgeItemByIdUsingPut,
+} from "../knowledge-management.api";
+import {
+  knowledgeContentTypeOptions,
+  knowledgeStatusOptions,
+} from "../knowledge-management.const";
+import {
+  KnowledgeContentType,
+  KnowledgeItem,
+  KnowledgeStatusType,
+} from "../knowledge-management.model";
+import { queryDatasetTagsUsingGet } from "@/pages/DataManagement/dataset.api";
+
+export default function KnowledgeItemEditor({
+  open,
+  setId,
+  data,
+  onCancel,
+  onSuccess,
+  readOnly,
+}: {
+  open: boolean;
+  setId: string;
+  data?: Partial<KnowledgeItem> | null;
+  readOnly?: boolean;
+  onCancel: () => void;
+  onSuccess: () => void;
+}) {
+  const [form] = Form.useForm();
+  const [tagOptions, setTagOptions] = useState<{ label: string; value: string }[]>([]);
+
+  const fetchTags = async () => {
+    try {
+      const { data: tagData } = await queryDatasetTagsUsingGet();
+      const options = Array.isArray(tagData)
+        ? tagData.map((tag) => ({ label: tag.name, value: tag.name }))
+        : [];
+      setTagOptions(options);
+    } catch (error) {
+      console.error("获取标签失败", error);
+    }
+  };
+
+  useEffect(() => {
+    if (open) {
+      fetchTags();
+    }
+  }, [open]);
+
+  useEffect(() => {
+    if (open) {
+      if (data?.id) {
+        form.setFieldsValue({
+          title: data.title,
+          content: data.content,
+          contentType: data.contentType ?? KnowledgeContentType.TEXT,
+          status: data.status ?? KnowledgeStatusType.DRAFT,
+          domain: data.domain,
+          businessLine: data.businessLine,
+          owner: data.owner,
+          sensitivity: data.sensitivity,
+          validFrom: data.validFrom ? dayjs(data.validFrom) : null,
+          validTo: data.validTo ? dayjs(data.validTo) : null,
+          tags: data.tags?.map((tag) => tag.name) || [],
+          metadata: data.metadata,
+        });
+      } else {
+        form.resetFields();
+        form.setFieldsValue({
+          contentType: KnowledgeContentType.TEXT,
+          status: KnowledgeStatusType.DRAFT,
+          tags: [],
+        });
+      }
+    }
+  }, [open, data, form]);
+
+  const handleSubmit = async () => {
+    try {
+      const values = await form.validateFields();
+      const validFrom = values.validFrom ? values.validFrom.format("YYYY-MM-DD") : undefined;
+      const validTo = values.validTo ? values.validTo.format("YYYY-MM-DD") : undefined;
+
+      if (validFrom && validTo && dayjs(validFrom).isAfter(dayjs(validTo))) {
+        message.warning("有效期开始不能晚于结束时间");
+        return;
+      }
+
+      const payload = {
+        ...values,
+        validFrom,
+        validTo,
+        tags: values.tags || [],
+      };
+
+      if (data?.id) {
+        await updateKnowledgeItemByIdUsingPut(setId, data.id, payload);
+        message.success("知识条目更新成功");
+      } else {
+        await createKnowledgeItemUsingPost(setId, payload);
+        message.success("知识条目创建成功");
+      }
+
+      form.resetFields();
+      onSuccess();
+    } catch {
+      message.error("操作失败，请重试");
+    }
+  };
+
+  const title = data?.id ? "编辑知识条目" : "新建知识条目";
+
+  return (
+    <Modal
+      title={title}
+      open={open}
+      onCancel={onCancel}
+      onOk={handleSubmit}
+      okText="确定"
+      cancelText="取消"
+      width={860}
+      maskClosable={false}
+      okButtonProps={{ disabled: readOnly }}
+    >
+      <Form form={form} layout="vertical" disabled={readOnly}>
+        <div className="grid grid-cols-2 gap-4">
+          <Form.Item
+            label="标题"
+            name="title"
+            rules={[{ required: true, message: "请输入标题" }]}
+          >
+            <Input placeholder="请输入标题" />
+          </Form.Item>
+          <Form.Item label="状态" name="status">
+            <Select options={knowledgeStatusOptions} />
+          </Form.Item>
+        </div>
+        <div className="grid grid-cols-2 gap-4">
+          <Form.Item label="内容类型" name="contentType">
+            <Select options={knowledgeContentTypeOptions} />
+          </Form.Item>
+          <Form.Item label="敏感级别" name="sensitivity">
+            <Input placeholder="请输入敏感级别" />
+          </Form.Item>
+        </div>
+        <Form.Item
+          label="内容"
+          name="content"
+          rules={[{ required: true, message: "请输入内容" }]}
+        >
+          <Input.TextArea rows={8} placeholder="请输入内容" />
+        </Form.Item>
+        <div className="grid grid-cols-2 gap-4">
+          <Form.Item label="领域" name="domain">
+            <Input placeholder="请输入领域" />
+          </Form.Item>
+          <Form.Item label="业务线" name="businessLine">
+            <Input placeholder="请输入业务线" />
+          </Form.Item>
+        </div>
+        <div className="grid grid-cols-2 gap-4">
+          <Form.Item label="负责人" name="owner">
+            <Input placeholder="请输入负责人" />
+          </Form.Item>
+          <Form.Item label="标签" name="tags">
+            <Select
+              mode="tags"
+              options={tagOptions}
+              placeholder="请选择或输入标签"
+            />
+          </Form.Item>
+        </div>
+        <div className="grid grid-cols-2 gap-4">
+          <Form.Item label="有效期开始" name="validFrom">
+            <DatePicker className="w-full" />
+          </Form.Item>
+          <Form.Item label="有效期结束" name="validTo">
+            <DatePicker className="w-full" />
+          </Form.Item>
+        </div>
+        <Form.Item label="扩展元数据" name="metadata">
+          <Input.TextArea placeholder="请输入元数据（JSON）" rows={3} />
+        </Form.Item>
+        {data?.sourceType && (
+          <div className="grid grid-cols-2 gap-4 text-sm text-gray-500">
+            <div>来源类型：{data.sourceType}</div>
+            <div>来源文件：{data.sourceFileId || "-"}</div>
+          </div>
+        )}
+      </Form>
+    </Modal>
+  );
+}