refactor(DataManagement): 移除相似数据集表格并改用卡片视图显示

- 移除了 Overview 组件中的相似数据集表格相关代码
- 移除了 Tag 组件和相关依赖的导入
- 在 DatasetDetail 中添加 CardView 组件用于显示相似数据集
- 将相似数据集的展示从表格改为卡片布局
- 移除了 Overview 组件中的相似数据集参数传递
- 更新了页面布局以

frontend/src/pages/DataManagement/Detail/DatasetDetail.tsx

@@ -28,8 +28,10 @@ import Overview from "./components/Overview";
 import { Activity, Clock, File, FileType } from "lucide-react";
 import EditDataset from "../Create/EditDataset";
 import ImportConfiguration from "./components/ImportConfiguration";
+import CardView from "@/components/CardView";
 
 const SIMILAR_DATASET_LIMIT = 4;
+const SIMILAR_TAGS_PREVIEW_LIMIT = 3;
 
 export default function DatasetDetail() {
   const { id } = useParams(); // 获取动态路由参数
@@ -97,6 +99,19 @@ export default function DatasetDetail() {
       }
     }
   };
+
+  const similarTagsSummary = useMemo(() => {
+    if (!similarTagNames || similarTagNames.length === 0) {
+      return "";
+    }
+    const visibleTags = similarTagNames.slice(0, SIMILAR_TAGS_PREVIEW_LIMIT);
+    const hiddenCount = similarTagNames.length - visibleTags.length;
+    if (hiddenCount > 0) {
+      return `${visibleTags.join("、")} 等 ${similarTagNames.length} 个`;
+    }
+    return visibleTags.join("、");
+  }, [similarTagNames]);
+
   const navigateItems = useMemo(() => {
     const items = [
       {
@@ -362,7 +377,7 @@ export default function DatasetDetail() {
   ];
 
   return (
-    <div className="h-full flex flex-col gap-4">
+    <div className="h-full flex flex-col gap-4 overflow-hidden">
       <Breadcrumb items={navigateItems} />
       {/* Header */}
       <DetailHeader
@@ -398,40 +413,65 @@ export default function DatasetDetail() {
           },
         }}
       />
-      <div className="flex-overflow-auto p-6 pt-2 bg-white rounded-md shadow">
+      <div className="flex-1 overflow-auto">
-        <Tabs activeKey={activeTab} items={tabList} onChange={setActiveTab} />
+        <div className="p-6 pt-2 bg-white rounded-md shadow mb-4">
-        <div className="h-full overflow-auto">
+          <Tabs activeKey={activeTab} items={tabList} onChange={setActiveTab} />
-          {activeTab === "overview" && (
+          <div className="">
-            <Overview
+            {activeTab === "overview" && (
-              dataset={dataset}
+              <Overview
-              filesOperation={filesOperation}
+                dataset={dataset}
-              fetchDataset={fetchDataset}
+                filesOperation={filesOperation}
-              onUpload={() => setShowUploadDialog(true)}
+                fetchDataset={fetchDataset}
-              similarDatasets={similarDatasets}
+                onUpload={() => setShowUploadDialog(true)}
-              similarDatasetsLoading={similarDatasetsLoading}
-              similarTags={similarTagNames}
-            />
-          )}
-          {activeTab === "children" && (
-            <div className="pt-4">
-              <div className="flex items-center justify-between mb-3">
-                <h2 className="text-base font-semibold">关联数据集</h2>
-                <span className="text-xs text-gray-500">
-                  共 {childDatasets.length} 个
-                </span>
-              </div>
-              <Table
-                rowKey="id"
-                columns={childColumns}
-                dataSource={childDatasets}
-                loading={childDatasetsLoading}
-                pagination={false}
-                locale={{ emptyText: "暂无关联数据集" }}
               />
-            </div>
+            )}
-          )}
+            {activeTab === "children" && (
-          {activeTab === "lineage" && <DataLineageFlow dataset={dataset} />}
+              <div className="pt-4">
-          {activeTab === "quality" && <DataQuality />}
+                <div className="flex items-center justify-between mb-3">
+                  <h2 className="text-base font-semibold">关联数据集</h2>
+                  <span className="text-xs text-gray-500">
+                    共 {childDatasets.length} 个
+                  </span>
+                </div>
+                <Table
+                  rowKey="id"
+                  columns={childColumns}
+                  dataSource={childDatasets}
+                  loading={childDatasetsLoading}
+                  pagination={false}
+                  locale={{ emptyText: "暂无关联数据集" }}
+                />
+              </div>
+            )}
+            {activeTab === "lineage" && <DataLineageFlow dataset={dataset} />}
+            {activeTab === "quality" && <DataQuality />}
+          </div>
+        </div>
+
+        {/* 相似数据集 */}
+        <div className="bg-white rounded-md shadow p-6 mb-4">
+          <div className="flex items-center justify-between mb-3">
+            <h2 className="text-base font-semibold">相似数据集</h2>
+            {similarTagsSummary && (
+              <span className="text-xs text-gray-500">
+                匹配标签：{similarTagsSummary}
+              </span>
+            )}
+          </div>
+          <CardView
+            data={similarDatasets}
+            loading={similarDatasetsLoading}
+            operations={[]}
+            pagination={{
+              current: 1,
+              pageSize: similarDatasets.length || 10,
+              total: similarDatasets.length || 0,
+              style: { display: "none" },
+            }}
+            onView={(item) => {
+              navigate(`/data/management/detail/${item.id}`);
+            }}
+          />
         </div>
       </div>
       <ImportConfiguration

frontend/src/pages/DataManagement/Detail/components/Overview.tsx

@@ -6,13 +6,11 @@ import {
   Modal,
   Table,
   Input,
-  Tag,
 } from "antd";
 import { formatBytes, formatDateTime } from "@/utils/unit";
 import { Download, Trash2, Folder, File } from "lucide-react";
 import { datasetTypeMap } from "../../dataset.const";
 import type { Dataset, DatasetFile } from "@/pages/DataManagement/dataset.model";
-import { Link } from "react-router";
 import type { useFilesOperation } from "../useFilesOperation";
 
 type DatasetFileRow = DatasetFile & {
@@ -29,17 +27,12 @@ const PREVIEW_MODAL_WIDTH = {
 const PREVIEW_TEXT_FONT_SIZE = 12;
 const PREVIEW_TEXT_PADDING = 12;
 const PREVIEW_AUDIO_PADDING = 40;
-const SIMILAR_TAGS_PREVIEW_LIMIT = 3;
-const SIMILAR_DATASET_TAG_PREVIEW_LIMIT = 4;
 
 type OverviewProps = {
   dataset: Dataset;
   filesOperation: ReturnType<typeof useFilesOperation>;
   fetchDataset: () => void;
   onUpload?: () => void;
-  similarDatasets: Dataset[];
-  similarDatasetsLoading: boolean;
-  similarTags: string[];
 };
 
 export default function Overview({
@@ -47,9 +40,6 @@ export default function Overview({
   filesOperation,
   fetchDataset,
   onUpload,
-  similarDatasets,
-  similarDatasetsLoading,
-  similarTags,
 }: OverviewProps) {
   const { modal, message } = App.useApp();
   const {
@@ -72,82 +62,6 @@ export default function Overview({
     handleDeleteDirectory,
     handlePreviewFile,
   } = filesOperation;
-  const similarTagsSummary = (() => {
-    if (!similarTags || similarTags.length === 0) {
-      return "";
-    }
-    const visibleTags = similarTags.slice(0, SIMILAR_TAGS_PREVIEW_LIMIT);
-    const hiddenCount = similarTags.length - visibleTags.length;
-    if (hiddenCount > 0) {
-      return `${visibleTags.join("、")} 等 ${similarTags.length} 个`;
-    }
-    return visibleTags.join("、");
-  })();
-  const renderDatasetTags = (
-    tags?: Array<string | { name?: string; color?: string } | null>
-  ) => {
-    if (!tags || tags.length === 0) {
-      return "-";
-    }
-    const visibleTags = tags.slice(0, SIMILAR_DATASET_TAG_PREVIEW_LIMIT);
-    const hiddenCount = tags.length - visibleTags.length;
-    return (
-      <div className="flex flex-wrap gap-1">
-        {visibleTags.map((tag, index) => {
-          const tagName = typeof tag === "string" ? tag : tag?.name;
-          if (!tagName) {
-            return null;
-          }
-          const tagColor = typeof tag === "string" ? undefined : tag?.color;
-          return (
-            <Tag key={`${tagName}-${index}`} color={tagColor}>
-              {tagName}
-            </Tag>
-          );
-        })}
-        {hiddenCount > 0 && <Tag>+{hiddenCount}</Tag>}
-      </div>
-    );
-  };
-  const similarColumns = [
-    {
-      title: "名称",
-      dataIndex: "name",
-      key: "name",
-      render: (_: string, record: Dataset) => (
-        <Link to={`/data/management/detail/${record.id}`}>{record.name}</Link>
-      ),
-    },
-    {
-      title: "标签",
-      dataIndex: "tags",
-      key: "tags",
-      render: (tags: Array<string | { name?: string; color?: string }>) =>
-        renderDatasetTags(tags),
-    },
-    {
-      title: "类型",
-      dataIndex: "datasetType",
-      key: "datasetType",
-      width: 120,
-      render: (_: string, record: Dataset) =>
-        datasetTypeMap[record.datasetType as keyof typeof datasetTypeMap]?.label ||
-        "未知",
-    },
-    {
-      title: "文件数",
-      dataIndex: "fileCount",
-      key: "fileCount",
-      width: 120,
-      render: (value?: number) => value ?? 0,
-    },
-    {
-      title: "更新时间",
-      dataIndex: "updatedAt",
-      key: "updatedAt",
-      width: 180,
-    },
-  ];
 
   // 基本信息
   const items: DescriptionsProps["items"] = [
@@ -375,31 +289,6 @@ export default function Overview({
           column={5}
         />
 
-        {/* 相似数据集 */}
-        <div className="mt-8">
-          <div className="flex items-center justify-between mb-3">
-            <h2 className="text-base font-semibold">相似数据集</h2>
-            {similarTagsSummary && (
-              <span className="text-xs text-gray-500">
-                匹配标签：{similarTagsSummary}
-              </span>
-            )}
-          </div>
-          <Table
-            size="small"
-            rowKey="id"
-            columns={similarColumns}
-            dataSource={similarDatasets}
-            loading={similarDatasetsLoading}
-            pagination={false}
-            locale={{
-              emptyText: similarTags?.length
-                ? "暂无相似数据集"
-                : "当前数据集未设置标签",
-            }}
-          />
-        </div>
-
         {/* 文件列表 */}
         <div className="flex items-center justify-between mt-8 mb-2">
           <h2 className="text-base font-semibold">文件列表</h2>