From 34fa184b699e60577a429cac075495acc878f14e Mon Sep 17 00:00:00 2001
From: Jerry Yan <792602257@qq.com>
Date: Wed, 21 Jan 2026 11:48:36 +0800
Subject: [PATCH] =?UTF-8?q?feat(knowledge):=20=E6=B7=BB=E5=8A=A0=E7=9F=A5?=
 =?UTF-8?q?=E8=AF=86=E7=AE=A1=E7=90=86=E5=8A=9F=E8=83=BD=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 实现知识集的创建、编辑、删除功能
- 实现知识条目的创建、编辑、删除功能
- 添加知识集详情页面展示功能
- 实现知识条目导入数据集文件功能
- 添加知识管理主页列表展示功能
- 实现知识集和知识条目的状态管理
- 集成标签管理和搜索过滤功能
- 添加知识条目的批量操作支持
---
 .../Detail/KnowledgeSetDetail.tsx             | 327 ++++++++++++++++++
 .../Home/KnowledgeManagementPage.tsx          | 249 +++++++++++++
 .../components/CreateKnowledgeSet.tsx         | 201 +++++++++++
 .../components/ImportKnowledgeItemsDialog.tsx |  97 ++++++
 .../components/KnowledgeItemEditor.tsx        | 198 +++++++++++
 .../knowledge-management.api.ts               |  56 +++
 .../knowledge-management.const.tsx            | 160 +++++++++
 .../knowledge-management.model.ts             |  68 ++++
 8 files changed, 1356 insertions(+)
 create mode 100644 frontend/src/pages/KnowledgeManagement/Detail/KnowledgeSetDetail.tsx
 create mode 100644 frontend/src/pages/KnowledgeManagement/Home/KnowledgeManagementPage.tsx
 create mode 100644 frontend/src/pages/KnowledgeManagement/components/CreateKnowledgeSet.tsx
 create mode 100644 frontend/src/pages/KnowledgeManagement/components/ImportKnowledgeItemsDialog.tsx
 create mode 100644 frontend/src/pages/KnowledgeManagement/components/KnowledgeItemEditor.tsx
 create mode 100644 frontend/src/pages/KnowledgeManagement/knowledge-management.api.ts
 create mode 100644 frontend/src/pages/KnowledgeManagement/knowledge-management.const.tsx
 create mode 100644 frontend/src/pages/KnowledgeManagement/knowledge-management.model.ts

diff --git a/frontend/src/pages/KnowledgeManagement/Detail/KnowledgeSetDetail.tsx b/frontend/src/pages/KnowledgeManagement/Detail/KnowledgeSetDetail.tsx
new file mode 100644
index 0000000..3ca5f2f
--- /dev/null
+++ b/frontend/src/pages/KnowledgeManagement/Detail/KnowledgeSetDetail.tsx
@@ -0,0 +1,327 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  App,
+  Breadcrumb,
+  Button,
+  Card,
+  Descriptions,
+  Empty,
+  Table,
+  Tag,
+} from "antd";
+import { DeleteOutlined, EditOutlined, PlusOutlined } from "@ant-design/icons";
+import { useNavigate, useParams } from "react-router";
+import DetailHeader from "@/components/DetailHeader";
+import { SearchControls } from "@/components/SearchControls";
+import useFetchData from "@/hooks/useFetchData";
+import {
+  deleteKnowledgeItemByIdUsingDelete,
+  deleteKnowledgeSetByIdUsingDelete,
+  queryKnowledgeItemsUsingGet,
+  queryKnowledgeSetByIdUsingGet,
+} from "../knowledge-management.api";
+import {
+  knowledgeContentTypeOptions,
+  knowledgeStatusMap,
+  mapKnowledgeItem,
+  KnowledgeItemView,
+} from "../knowledge-management.const";
+import {
+  KnowledgeItem,
+  KnowledgeSet,
+  KnowledgeStatusType,
+} from "../knowledge-management.model";
+import CreateKnowledgeSet from "../components/CreateKnowledgeSet";
+import KnowledgeItemEditor from "../components/KnowledgeItemEditor";
+import ImportKnowledgeItemsDialog from "../components/ImportKnowledgeItemsDialog";
+import { formatDate } from "@/utils/unit";
+
+const KnowledgeSetDetail = () => {
+  const navigate = useNavigate();
+  const { message } = App.useApp();
+  const { id } = useParams<{ id: string }>();
+  const [knowledgeSet, setKnowledgeSet] = useState<KnowledgeSet | null>(null);
+  const [showEdit, setShowEdit] = useState(false);
+  const [itemEditorOpen, setItemEditorOpen] = useState(false);
+  const [currentItem, setCurrentItem] = useState<KnowledgeItem | null>(null);
+
+  const fetchKnowledgeSet = useCallback(async () => {
+    if (!id) return;
+    const { data } = await queryKnowledgeSetByIdUsingGet(id);
+    setKnowledgeSet(data);
+  }, [id]);
+
+  useEffect(() => {
+    fetchKnowledgeSet();
+  }, [fetchKnowledgeSet]);
+
+  const {
+    loading,
+    tableData: items,
+    searchParams,
+    pagination,
+    fetchData,
+    setSearchParams,
+    handleFiltersChange,
+    handleKeywordChange,
+  } = useFetchData<KnowledgeItemView>(
+    (params) => (id ? queryKnowledgeItemsUsingGet(id, params) : Promise.resolve({ data: [] })),
+    mapKnowledgeItem,
+    30000,
+    false,
+    [],
+    0
+  );
+
+  const isReadOnly =
+    knowledgeSet?.status === KnowledgeStatusType.ARCHIVED ||
+    knowledgeSet?.status === KnowledgeStatusType.DEPRECATED;
+
+  const handleDeleteSet = async () => {
+    if (!knowledgeSet) return;
+    await deleteKnowledgeSetByIdUsingDelete(knowledgeSet.id);
+    message.success("知识集已删除");
+    navigate("/data/knowledge-management");
+  };
+
+  const handleDeleteItem = async (item: KnowledgeItemView) => {
+    if (!id) return;
+    await deleteKnowledgeItemByIdUsingDelete(id, item.id);
+    message.success("知识条目已删除");
+    fetchData();
+  };
+
+  const statusMeta = knowledgeSet?.status
+    ? knowledgeStatusMap[knowledgeSet.status]
+    : undefined;
+
+  const statistics = useMemo(
+    () => [
+      {
+        key: "items",
+        icon: <PlusOutlined className="text-blue-500" />,
+        label: "条目数",
+        value: pagination.total || 0,
+      },
+      {
+        key: "updated",
+        icon: <EditOutlined className="text-gray-500" />,
+        label: "更新时间",
+        value: knowledgeSet?.updatedAt ? formatDate(knowledgeSet.updatedAt) : "-",
+      },
+    ],
+    [pagination.total, knowledgeSet?.updatedAt]
+  );
+
+  const itemColumns = [
+    {
+      title: "标题",
+      dataIndex: "title",
+      key: "title",
+      fixed: "left" as const,
+      width: 220,
+      ellipsis: true,
+    },
+    {
+      title: "状态",
+      dataIndex: "status",
+      key: "status",
+      width: 120,
+      render: (status: KnowledgeItemView["status"]) => (
+        <Tag color={status?.color}>{status?.label}</Tag>
+      ),
+    },
+    {
+      title: "类型",
+      dataIndex: "contentType",
+      key: "contentType",
+      width: 120,
+      render: (contentType: string) =>
+        knowledgeContentTypeOptions.find((opt) => opt.value === contentType)?.label ||
+        contentType,
+    },
+    {
+      title: "负责人",
+      dataIndex: "owner",
+      key: "owner",
+      width: 120,
+      ellipsis: true,
+    },
+    {
+      title: "来源",
+      dataIndex: "sourceType",
+      key: "sourceType",
+      width: 140,
+      ellipsis: true,
+    },
+    {
+      title: "更新时间",
+      dataIndex: "updatedAt",
+      key: "updatedAt",
+      width: 180,
+      ellipsis: true,
+    },
+    {
+      title: "操作",
+      key: "actions",
+      width: 140,
+      render: (_: unknown, record: KnowledgeItemView) => (
+        <div className="flex items-center gap-2">
+          <Button
+            type="text"
+            icon={<EditOutlined />}
+            onClick={() => {
+              setCurrentItem({
+                ...(record as unknown as KnowledgeItem),
+                status: record.rawStatus,
+              });
+              setItemEditorOpen(true);
+            }}
+            disabled={isReadOnly || record.rawStatus === KnowledgeStatusType.ARCHIVED || record.rawStatus === KnowledgeStatusType.DEPRECATED}
+          />
+          <Button
+            type="text"
+            danger
+            icon={<DeleteOutlined />}
+            onClick={() => handleDeleteItem(record)}
+            disabled={isReadOnly}
+          />
+        </div>
+      ),
+    },
+  ];
+
+  return (
+    <div className="h-full flex flex-col">
+      <div className="mb-4">
+        <Breadcrumb>
+          <Breadcrumb.Item>
+            <a onClick={() => navigate("/data/knowledge-management")}>知识管理</a>
+          </Breadcrumb.Item>
+          <Breadcrumb.Item>{knowledgeSet?.name || "-"}</Breadcrumb.Item>
+        </Breadcrumb>
+      </div>
+
+      <DetailHeader
+        data={{
+          name: knowledgeSet?.name,
+          description: knowledgeSet?.description,
+          status: statusMeta,
+          tags: knowledgeSet?.tags,
+        }}
+        statistics={statistics}
+        operations={[
+          {
+            key: "edit",
+            label: "编辑",
+            icon: <EditOutlined />,
+            onClick: () => setShowEdit(true),
+            danger: false,
+          },
+          {
+            key: "delete",
+            label: "删除",
+            icon: <DeleteOutlined />,
+            danger: true,
+            confirm: {
+              title: "确认删除该知识集吗？",
+              description: "删除后将无法恢复，请谨慎操作。",
+              cancelText: "取消",
+              okText: "删除",
+              okType: "danger",
+              onConfirm: () => handleDeleteSet(),
+            },
+          },
+        ]}
+      />
+
+      <CreateKnowledgeSet
+        showBtn={false}
+        isEdit={showEdit}
+        data={knowledgeSet}
+        onUpdate={() => {
+          setShowEdit(false);
+          fetchKnowledgeSet();
+        }}
+        onClose={() => setShowEdit(false)}
+      />
+
+      <Card className="mt-4">
+        <Descriptions column={2} size="small">
+          <Descriptions.Item label="领域">{knowledgeSet?.domain || "-"}</Descriptions.Item>
+          <Descriptions.Item label="业务线">{knowledgeSet?.businessLine || "-"}</Descriptions.Item>
+          <Descriptions.Item label="负责人">{knowledgeSet?.owner || "-"}</Descriptions.Item>
+          <Descriptions.Item label="敏感级别">{knowledgeSet?.sensitivity || "-"}</Descriptions.Item>
+          <Descriptions.Item label="有效期">
+            {knowledgeSet?.validFrom || "-"} ~ {knowledgeSet?.validTo || "-"}
+          </Descriptions.Item>
+          <Descriptions.Item label="来源类型">{knowledgeSet?.sourceType || "-"}</Descriptions.Item>
+        </Descriptions>
+      </Card>
+
+      <div className="flex-1 border-card p-6 mt-4">
+        <div className="flex items-center justify-between mb-4 gap-3">
+          <SearchControls
+            searchTerm={searchParams.keyword}
+            onSearchChange={handleKeywordChange}
+            searchPlaceholder="搜索标题或内容"
+            filters={[]}
+            onFiltersChange={handleFiltersChange}
+            onClearFilters={() => setSearchParams({ ...searchParams, filter: { type: [], status: [], tags: [] } })}
+            showViewToggle={false}
+            showReload={false}
+          />
+          <div className="flex items-center gap-2">
+            <Button
+              type="primary"
+              icon={<PlusOutlined />}
+              onClick={() => {
+                setCurrentItem(null);
+                setItemEditorOpen(true);
+              }}
+              disabled={isReadOnly}
+            >
+              新建条目
+            </Button>
+            <ImportKnowledgeItemsDialog
+              setId={id || ""}
+              onImported={fetchData}
+              disabled={isReadOnly}
+            />
+          </div>
+        </div>
+
+        {items.length === 0 ? (
+          <Empty description="暂无知识条目" />
+        ) : (
+          <Table
+            loading={loading}
+            columns={itemColumns}
+            dataSource={items}
+            rowKey="id"
+            pagination={pagination}
+            scroll={{ y: "calc(100vh - 36rem)" }}
+          />
+        )}
+      </div>
+
+      <KnowledgeItemEditor
+        open={itemEditorOpen}
+        setId={id || ""}
+        data={currentItem}
+        readOnly={isReadOnly}
+        onCancel={() => {
+          setItemEditorOpen(false);
+          setCurrentItem(null);
+        }}
+        onSuccess={() => {
+          setItemEditorOpen(false);
+          setCurrentItem(null);
+          fetchData();
+        }}
+      />
+    </div>
+  );
+};
+
+export default KnowledgeSetDetail;
diff --git a/frontend/src/pages/KnowledgeManagement/Home/KnowledgeManagementPage.tsx b/frontend/src/pages/KnowledgeManagement/Home/KnowledgeManagementPage.tsx
new file mode 100644
index 0000000..39ec726
--- /dev/null
+++ b/frontend/src/pages/KnowledgeManagement/Home/KnowledgeManagementPage.tsx
@@ -0,0 +1,249 @@
+import { useEffect, useMemo, useState } from "react";
+import { Card, Button, Table, Tooltip, Tag, App } from "antd";
+import { DeleteOutlined, EditOutlined } from "@ant-design/icons";
+import { useNavigate } from "react-router";
+import CardView from "@/components/CardView";
+import { SearchControls } from "@/components/SearchControls";
+import TagManager from "@/components/business/TagManagement";
+import useFetchData from "@/hooks/useFetchData";
+import {
+  deleteKnowledgeSetByIdUsingDelete,
+  queryKnowledgeSetsUsingGet,
+} from "../knowledge-management.api";
+import {
+  knowledgeStatusOptions,
+  mapKnowledgeSet,
+  KnowledgeSetView,
+} from "../knowledge-management.const";
+import { KnowledgeSet } from "../knowledge-management.model";
+import CreateKnowledgeSet from "../components/CreateKnowledgeSet";
+import {
+  createDatasetTagUsingPost,
+  deleteDatasetTagUsingDelete,
+  queryDatasetTagsUsingGet,
+  updateDatasetTagUsingPut,
+} from "@/pages/DataManagement/dataset.api";
+
+export default function KnowledgeManagementPage() {
+  const navigate = useNavigate();
+  const { message } = App.useApp();
+  const [viewMode, setViewMode] = useState<"card" | "list">("card");
+  const [isEdit, setIsEdit] = useState(false);
+  const [currentSet, setCurrentSet] = useState<KnowledgeSet | null>(null);
+  const [tags, setTags] = useState<string[]>([]);
+
+  useEffect(() => {
+    const fetchTags = async () => {
+      const { data } = await queryDatasetTagsUsingGet();
+      setTags(Array.isArray(data) ? data.map((tag) => tag.name) : []);
+    };
+    fetchTags();
+  }, []);
+
+  const filterOptions = useMemo(
+    () => [
+      {
+        key: "status",
+        label: "状态",
+        options: knowledgeStatusOptions,
+      },
+      {
+        key: "tags",
+        label: "标签",
+        mode: "multiple",
+        options: tags.map((tag) => ({ label: tag, value: tag })),
+      },
+    ],
+    [tags]
+  );
+
+  const {
+    loading,
+    tableData,
+    searchParams,
+    pagination,
+    fetchData,
+    setSearchParams,
+    handleFiltersChange,
+    handleKeywordChange,
+  } = useFetchData<KnowledgeSetView>(
+    queryKnowledgeSetsUsingGet,
+    mapKnowledgeSet,
+    30000,
+    false,
+    [],
+    0
+  );
+
+  const handleDeleteSet = async (setId: string) => {
+    await deleteKnowledgeSetByIdUsingDelete(setId);
+    message.success("知识集删除成功");
+    fetchData({ pageOffset: 0 });
+  };
+
+  const operations = [
+    {
+      key: "edit",
+      label: "编辑",
+      icon: <EditOutlined />,
+      onClick: (item: KnowledgeSetView) => {
+        setIsEdit(true);
+        setCurrentSet({
+          ...(item as unknown as KnowledgeSet),
+          status: item.rawStatus,
+        });
+      },
+    },
+    {
+      key: "delete",
+      label: "删除",
+      danger: true,
+      icon: <DeleteOutlined />,
+      confirm: {
+        title: "确认删除",
+        description: "此操作不可撤销，是否继续？",
+        okText: "删除",
+        okType: "danger",
+        cancelText: "取消",
+      },
+      onClick: (item: KnowledgeSetView) => handleDeleteSet(item.id),
+    },
+  ];
+
+  const columns = [
+    {
+      title: "知识集",
+      dataIndex: "name",
+      key: "name",
+      fixed: "left" as const,
+      width: 200,
+      ellipsis: true,
+      render: (_: unknown, record: KnowledgeSetView) => (
+        <Button
+          type="link"
+          onClick={() => navigate(`/data/knowledge-management/detail/${record.id}`)}
+        >
+          {record.name}
+        </Button>
+      ),
+    },
+    {
+      title: "状态",
+      dataIndex: "status",
+      key: "status",
+      width: 120,
+      render: (status: KnowledgeSetView["status"]) => (
+        <Tag color={status?.color}>{status?.label}</Tag>
+      ),
+    },
+    {
+      title: "领域",
+      dataIndex: "domain",
+      key: "domain",
+      width: 120,
+      ellipsis: true,
+    },
+    {
+      title: "业务线",
+      dataIndex: "businessLine",
+      key: "businessLine",
+      width: 120,
+      ellipsis: true,
+    },
+    {
+      title: "负责人",
+      dataIndex: "owner",
+      key: "owner",
+      width: 120,
+      ellipsis: true,
+    },
+    {
+      title: "更新时间",
+      dataIndex: "updatedAt",
+      key: "updatedAt",
+      width: 180,
+      ellipsis: true,
+    },
+    {
+      title: "操作",
+      key: "actions",
+      fixed: "right" as const,
+      width: 140,
+      render: (_: unknown, record: KnowledgeSetView) => (
+        <div className="flex items-center gap-2">
+          {operations.map((op) => (
+            <Tooltip key={op.key} title={op.label}>
+              <Button
+                type="text"
+                icon={op.icon}
+                danger={op.danger}
+                onClick={() => op.onClick(record)}
+              />
+            </Tooltip>
+          ))}
+        </div>
+      ),
+    },
+  ];
+
+  return (
+    <div className="h-full flex flex-col gap-4">
+      <div className="flex items-center justify-between">
+        <h1 className="text-xl font-bold">知识管理</h1>
+        <div className="flex gap-2 items-center">
+          <TagManager
+            onCreate={createDatasetTagUsingPost}
+            onDelete={(ids: string) => deleteDatasetTagUsingDelete({ ids })}
+            onUpdate={updateDatasetTagUsingPut}
+            onFetch={queryDatasetTagsUsingGet}
+          />
+          <CreateKnowledgeSet
+            isEdit={isEdit}
+            data={currentSet}
+            onUpdate={() => {
+              fetchData();
+            }}
+            onClose={() => {
+              setIsEdit(false);
+              setCurrentSet(null);
+            }}
+          />
+        </div>
+      </div>
+
+      <SearchControls
+        searchTerm={searchParams.keyword}
+        onSearchChange={handleKeywordChange}
+        searchPlaceholder="搜索知识集名称、描述"
+        filters={filterOptions}
+        onFiltersChange={handleFiltersChange}
+        onClearFilters={() => setSearchParams({ ...searchParams, filter: {} })}
+        viewMode={viewMode}
+        onViewModeChange={setViewMode}
+        showViewToggle
+        onReload={fetchData}
+      />
+
+      {viewMode === "card" ? (
+        <CardView
+          loading={loading}
+          data={tableData}
+          operations={operations}
+          pagination={pagination}
+          onView={(item) => navigate(`/data/knowledge-management/detail/${item.id}`)}
+        />
+      ) : (
+        <Card>
+          <Table
+            loading={loading}
+            scroll={{ x: "max-content", y: "calc(100vh - 20rem)" }}
+            columns={columns}
+            dataSource={tableData}
+            rowKey="id"
+            pagination={pagination}
+          />
+        </Card>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/pages/KnowledgeManagement/components/CreateKnowledgeSet.tsx b/frontend/src/pages/KnowledgeManagement/components/CreateKnowledgeSet.tsx
new file mode 100644
index 0000000..925589b
--- /dev/null
+++ 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>
+    </>
+  );
+}
diff --git a/frontend/src/pages/KnowledgeManagement/components/ImportKnowledgeItemsDialog.tsx b/frontend/src/pages/KnowledgeManagement/components/ImportKnowledgeItemsDialog.tsx
new file mode 100644
index 0000000..7e4c537
--- /dev/null
+++ 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>
+    </>
+  );
+}
diff --git a/frontend/src/pages/KnowledgeManagement/components/KnowledgeItemEditor.tsx b/frontend/src/pages/KnowledgeManagement/components/KnowledgeItemEditor.tsx
new file mode 100644
index 0000000..7e392c0
--- /dev/null
+++ 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>
+  );
+}
diff --git a/frontend/src/pages/KnowledgeManagement/knowledge-management.api.ts b/frontend/src/pages/KnowledgeManagement/knowledge-management.api.ts
new file mode 100644
index 0000000..e70a1b9
--- /dev/null
+++ b/frontend/src/pages/KnowledgeManagement/knowledge-management.api.ts
@@ -0,0 +1,56 @@
+import { get, post, put, del } from "@/utils/request";
+
+// 知识集列表
+export function queryKnowledgeSetsUsingGet(params?: Record<string, unknown>) {
+  return get("/api/data-management/knowledge-sets", params);
+}
+
+// 创建知识集
+export function createKnowledgeSetUsingPost(data: Record<string, unknown>) {
+  return post("/api/data-management/knowledge-sets", data);
+}
+
+// 获取知识集详情
+export function queryKnowledgeSetByIdUsingGet(setId: string) {
+  return get(`/api/data-management/knowledge-sets/${setId}`);
+}
+
+// 更新知识集
+export function updateKnowledgeSetByIdUsingPut(setId: string, data: Record<string, unknown>) {
+  return put(`/api/data-management/knowledge-sets/${setId}`, data);
+}
+
+// 删除知识集
+export function deleteKnowledgeSetByIdUsingDelete(setId: string) {
+  return del(`/api/data-management/knowledge-sets/${setId}`);
+}
+
+// 知识条目列表
+export function queryKnowledgeItemsUsingGet(setId: string, params?: Record<string, unknown>) {
+  return get(`/api/data-management/knowledge-sets/${setId}/items`, params);
+}
+
+// 创建知识条目
+export function createKnowledgeItemUsingPost(setId: string, data: Record<string, unknown>) {
+  return post(`/api/data-management/knowledge-sets/${setId}/items`, data);
+}
+
+// 导入知识条目（数据集文件）
+export function importKnowledgeItemsUsingPost(setId: string, data: Record<string, unknown>) {
+  return post(`/api/data-management/knowledge-sets/${setId}/items/import`, data);
+}
+
+// 获取知识条目详情
+export function queryKnowledgeItemByIdUsingGet(setId: string, itemId: string) {
+  return get(`/api/data-management/knowledge-sets/${setId}/items/${itemId}`);
+}
+
+// 更新知识条目
+export function updateKnowledgeItemByIdUsingPut(setId: string, itemId: string, data: Record<string, unknown>) {
+  return put(`/api/data-management/knowledge-sets/${setId}/items/${itemId}`, data);
+}
+
+// 删除知识条目
+export function deleteKnowledgeItemByIdUsingDelete(setId: string, itemId: string) {
+  return del(`/api/data-management/knowledge-sets/${setId}/items/${itemId}`);
+}
diff --git a/frontend/src/pages/KnowledgeManagement/knowledge-management.const.tsx b/frontend/src/pages/KnowledgeManagement/knowledge-management.const.tsx
new file mode 100644
index 0000000..e4a6f97
--- /dev/null
+++ b/frontend/src/pages/KnowledgeManagement/knowledge-management.const.tsx
@@ -0,0 +1,160 @@
+import React from "react";
+import {
+  CheckCircleOutlined,
+  ClockCircleOutlined,
+  CloseCircleOutlined,
+  FolderOpenOutlined,
+} from "@ant-design/icons";
+import { BookOpen } from "lucide-react";
+import { formatDateTime } from "@/utils/unit";
+import {
+  KnowledgeContentType,
+  KnowledgeItem,
+  KnowledgeSet,
+  KnowledgeSourceType,
+  KnowledgeStatusType,
+} from "./knowledge-management.model";
+
+export type KnowledgeStatusMeta = {
+  label: string;
+  value: KnowledgeStatusType;
+  color: string;
+  icon: React.ReactNode;
+};
+
+export const knowledgeStatusMap: Record<KnowledgeStatusType, KnowledgeStatusMeta> = {
+  [KnowledgeStatusType.DRAFT]: {
+    label: "草稿",
+    value: KnowledgeStatusType.DRAFT,
+    color: "#a1a1a1",
+    icon: <ClockCircleOutlined />,
+  },
+  [KnowledgeStatusType.PUBLISHED]: {
+    label: "已发布",
+    value: KnowledgeStatusType.PUBLISHED,
+    color: "#409f17",
+    icon: <CheckCircleOutlined />,
+  },
+  [KnowledgeStatusType.ARCHIVED]: {
+    label: "已归档",
+    value: KnowledgeStatusType.ARCHIVED,
+    color: "#6b7280",
+    icon: <FolderOpenOutlined />,
+  },
+  [KnowledgeStatusType.DEPRECATED]: {
+    label: "已废弃",
+    value: KnowledgeStatusType.DEPRECATED,
+    color: "#d97706",
+    icon: <CloseCircleOutlined />,
+  },
+};
+
+export const knowledgeStatusOptions = Object.values(knowledgeStatusMap).map((item) => ({
+  label: item.label,
+  value: item.value,
+}));
+
+export const knowledgeContentTypeOptions = [
+  { label: "文本", value: KnowledgeContentType.TEXT },
+  { label: "Markdown", value: KnowledgeContentType.MARKDOWN },
+];
+
+export const knowledgeSourceTypeOptions = [
+  { label: "手工录入", value: KnowledgeSourceType.MANUAL },
+  { label: "数据集文件导入", value: KnowledgeSourceType.DATASET_FILE },
+];
+
+export type KnowledgeSetView = {
+  id: string;
+  name: string;
+  description?: string;
+  status: KnowledgeStatusMeta | null;
+  rawStatus: KnowledgeStatusType;
+  tags: KnowledgeSet["tags"];
+  domain?: string;
+  businessLine?: string;
+  owner?: string;
+  validFrom?: string;
+  validTo?: string;
+  sourceType?: KnowledgeSet["sourceType"];
+  sensitivity?: string;
+  metadata?: string;
+  createdAt?: string;
+  updatedAt?: string;
+  type: string;
+  icon?: React.ReactNode;
+  iconColor?: string;
+  statistics?: { label: string; value: string | number }[];
+};
+
+export type KnowledgeItemView = {
+  id: string;
+  setId: string;
+  title: string;
+  content: string;
+  contentType: KnowledgeContentType;
+  status: KnowledgeStatusMeta | null;
+  rawStatus: KnowledgeStatusType;
+  tags: KnowledgeItem["tags"];
+  domain?: string;
+  businessLine?: string;
+  owner?: string;
+  validFrom?: string;
+  validTo?: string;
+  sourceType?: KnowledgeItem["sourceType"];
+  sensitivity?: string;
+  sourceDatasetId?: string;
+  sourceFileId?: string;
+  metadata?: string;
+  createdAt?: string;
+  updatedAt?: string;
+};
+
+export function mapKnowledgeSet(data: KnowledgeSet): KnowledgeSetView {
+  return {
+    id: data.id,
+    name: data.name,
+    description: data.description,
+    status: knowledgeStatusMap[data.status] ?? null,
+    rawStatus: data.status,
+    tags: data.tags || [],
+    domain: data.domain,
+    businessLine: data.businessLine,
+    owner: data.owner,
+    validFrom: data.validFrom,
+    validTo: data.validTo,
+    sourceType: data.sourceType,
+    sensitivity: data.sensitivity,
+    metadata: data.metadata,
+    createdAt: data.createdAt ? formatDateTime(data.createdAt) : "",
+    updatedAt: data.updatedAt ? formatDateTime(data.updatedAt) : "",
+    type: "知识集",
+    icon: <BookOpen className="w-6 h-6" />,
+    iconColor: "#3b82f6",
+  };
+}
+
+export function mapKnowledgeItem(data: KnowledgeItem): KnowledgeItemView {
+  return {
+    id: data.id,
+    setId: data.setId,
+    title: data.title,
+    content: data.content,
+    contentType: data.contentType,
+    status: knowledgeStatusMap[data.status] ?? null,
+    rawStatus: data.status,
+    tags: data.tags || [],
+    domain: data.domain,
+    businessLine: data.businessLine,
+    owner: data.owner,
+    validFrom: data.validFrom,
+    validTo: data.validTo,
+    sourceType: data.sourceType,
+    sensitivity: data.sensitivity,
+    sourceDatasetId: data.sourceDatasetId,
+    sourceFileId: data.sourceFileId,
+    metadata: data.metadata,
+    createdAt: data.createdAt ? formatDateTime(data.createdAt) : "",
+    updatedAt: data.updatedAt ? formatDateTime(data.updatedAt) : "",
+  };
+}
diff --git a/frontend/src/pages/KnowledgeManagement/knowledge-management.model.ts b/frontend/src/pages/KnowledgeManagement/knowledge-management.model.ts
new file mode 100644
index 0000000..d9c0b70
--- /dev/null
+++ b/frontend/src/pages/KnowledgeManagement/knowledge-management.model.ts
@@ -0,0 +1,68 @@
+export enum KnowledgeStatusType {
+  DRAFT = "DRAFT",
+  PUBLISHED = "PUBLISHED",
+  ARCHIVED = "ARCHIVED",
+  DEPRECATED = "DEPRECATED",
+}
+
+export enum KnowledgeContentType {
+  TEXT = "TEXT",
+  MARKDOWN = "MARKDOWN",
+}
+
+export enum KnowledgeSourceType {
+  MANUAL = "MANUAL",
+  DATASET_FILE = "DATASET_FILE",
+}
+
+export interface KnowledgeTag {
+  id: string;
+  name: string;
+  color?: string;
+  description?: string;
+  usageCount?: number;
+}
+
+export interface KnowledgeSet {
+  id: string;
+  name: string;
+  description?: string;
+  status: KnowledgeStatusType;
+  tags: KnowledgeTag[];
+  domain?: string;
+  businessLine?: string;
+  owner?: string;
+  validFrom?: string;
+  validTo?: string;
+  sourceType?: KnowledgeSourceType;
+  sensitivity?: string;
+  metadata?: string;
+  createdAt?: string;
+  updatedAt?: string;
+  createdBy?: string;
+  updatedBy?: string;
+}
+
+export interface KnowledgeItem {
+  id: string;
+  setId: string;
+  title: string;
+  content: string;
+  contentType: KnowledgeContentType;
+  status: KnowledgeStatusType;
+  tags: KnowledgeTag[];
+  domain?: string;
+  businessLine?: string;
+  owner?: string;
+  validFrom?: string;
+  validTo?: string;
+  sourceType?: KnowledgeSourceType;
+  sensitivity?: string;
+  sourceDatasetId?: string;
+  sourceFileId?: string;
+  metadata?: string;
+  createdAt?: string;
+  updatedAt?: string;
+  createdBy?: string;
+  updatedBy?: string;
+}