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,18 +413,16 @@ export default function DatasetDetail() {
           },
         }}
       />
-      <div className="flex-overflow-auto p-6 pt-2 bg-white rounded-md shadow">
+      <div className="flex-1 overflow-auto">
+        <div className="p-6 pt-2 bg-white rounded-md shadow mb-4">
           <Tabs activeKey={activeTab} items={tabList} onChange={setActiveTab} />
-        <div className="h-full overflow-auto">
+          <div className="">
             {activeTab === "overview" && (
               <Overview
                 dataset={dataset}
                 filesOperation={filesOperation}
                 fetchDataset={fetchDataset}
                 onUpload={() => setShowUploadDialog(true)}
-              similarDatasets={similarDatasets}
-              similarDatasetsLoading={similarDatasetsLoading}
-              similarTags={similarTagNames}
               />
             )}
             {activeTab === "children" && (
@@ -434,6 +447,33 @@ export default function DatasetDetail() {
             {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
         data={dataset}
         open={showUploadDialog}

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>