You've already forked DataMate
feat(knowledge): 添加知识管理功能模块
- 实现知识集的创建、编辑、删除功能 - 实现知识条目的创建、编辑、删除功能 - 添加知识集详情页面展示功能 - 实现知识条目导入数据集文件功能 - 添加知识管理主页列表展示功能 - 实现知识集和知识条目的状态管理 - 集成标签管理和搜索过滤功能 - 添加知识条目的批量操作支持
This commit is contained in:
@@ -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;
|
||||
Reference in New Issue
Block a user