feat: Enhance CardView and DatasetManagement with loading state and pagination updates

frontend/src/components/CardView.tsx

@@ -5,8 +5,6 @@ import {
   Tooltip,
   Empty,
   Popover,
-  Menu,
-  Popconfirm,
 } from "antd";
 import { ClockCircleOutlined, StarFilled } from "@ant-design/icons";
 import type { ItemType } from "antd/es/menu/interface";
@@ -47,6 +45,7 @@ interface CardViewProps<T> {
         onClick?: (item: T) => void;
       }[]
     | ((item: T) => ItemType[]);
+  loading?: boolean;
   onView?: (item: T) => void;
   onFavorite?: (item: T) => void;
   isFavorite?: (item: T) => boolean;
@@ -160,8 +159,15 @@ const TagsRenderer = ({ tags }: { tags?: any[] }) => {
 };
 
 function CardView<T extends BaseCardDataType>(props: CardViewProps<T>) {
-  const { data, pagination, operations, onView, onFavorite, isFavorite } =
+  const {
-    props;
+    data,
+    pagination,
+    operations,
+    loading,
+    onView,
+    onFavorite,
+    isFavorite,
+  } = props;
 
   if (data.length === 0) {
     return (
@@ -174,47 +180,6 @@ function CardView<T extends BaseCardDataType>(props: CardViewProps<T>) {
   const ops = (item) =>
     typeof operations === "function" ? operations(item) : operations;
 
-  const menu = (item) => {
-    const ops =
-      typeof operations === "function" ? operations(item) : operations;
-    <Menu>
-      {ops.map((op) => {
-        if (op?.danger) {
-          return (
-            <Menu.Item key={op?.key} disabled icon={op?.icon}>
-              <Popconfirm
-                title="确定删除吗？"
-                description="此操作不可撤销"
-                onConfirm={op.onClick ? () => op.onClick(item) : undefined}
-                okText="确定"
-                cancelText="取消"
-                // 阻止事件冒泡，避免 Dropdown 关闭
-                onClick={(e) => e.stopPropagation()}
-              >
-                <div
-                  style={{
-                    display: "block",
-                    width: "100%",
-                    color: "inherit",
-                  }}
-                  onClick={(e) => e.stopPropagation()}
-                >
-                  {op.icon}
-                  {op.label}
-                </div>
-              </Popconfirm>
-            </Menu.Item>
-          );
-        } else {
-          return (
-            <Menu.Item key={op?.key} onClick={op?.onClick} icon={op?.icon}>
-              {op?.label}
-            </Menu.Item>
-          );
-        }
-      })}
-    </Menu>;
-  };
   return (
     <div className="flex-overflow-hidden">
       <div className="overflow-auto grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-4">

frontend/src/hooks/useFetchData.ts

@@ -23,7 +23,8 @@ export default function useFetchData<T>(
   mapDataFunc: (data: AnyObject) => T = (data) => data as T,
   pollingInterval: number = 30000, // 默认30秒轮询一次
   autoRefresh: boolean = true,
-  additionalPollingFuncs: (() => Promise<any>)[] = [] // 额外的轮询函数
+  additionalPollingFuncs: (() => Promise<any>)[] = [], // 额外的轮询函数
+  pageOffset: number = 1
 ) {
   const { message } = App.useApp();
 
@@ -88,7 +89,6 @@ export default function useFetchData<T>(
   const fetchData = useCallback(
     async (extraParams = {}, skipPollingRestart = false) => {
       const { keyword, filter, current, pageSize } = searchParams;
-
       if (!skipPollingRestart) {
         Loading.show();
         setLoading(true);
@@ -110,7 +110,7 @@ export default function useFetchData<T>(
             type: getFirstOfArray(filter?.type) || undefined,
             status: getFirstOfArray(filter?.status) || undefined,
             tags: filter?.tags?.length ? filter.tags.join(",") : undefined,
-            page: current - 1,
+            page: current - pageOffset,
             size: pageSize,
           }),
           ...additionalPollingFuncs.map((func) => func()),

frontend/src/pages/DataCleansing/Create/components/CreateTaskStepOne.tsx

@@ -29,7 +29,7 @@ export default function CreateTaskStepOne({
   const [datasets, setDatasets] = useState<Dataset[]>([]);
 
   const fetchDatasets = async () => {
-    const { data } = await queryDatasetsUsingGet({ page: 0, size: 1000 });
+    const { data } = await queryDatasetsUsingGet({ page: 1, size: 1000 });
     setDatasets(data.content.map(mapDataset) || []);
   };
 

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

@@ -179,6 +179,7 @@ export default function Overview({ dataset, filesOperation }) {
             dataSource={fileList}
             // rowSelection={rowSelection}
             scroll={{ x: "max-content", y: 600 }}
+            pagination={{ showTotal: (total) => `共 ${total} 条` }}
           />
         </div>
       </div>

frontend/src/pages/DataManagement/Home/DataManagement.tsx

@@ -51,7 +51,7 @@ export default function DatasetManagementPage() {
         },
         {
           title: "文件总数",
-          value: data?.totalFiles?.image || "0 MB",
+          value: data?.totalFiles || "0 MB",
         },
         {
           title: "总大小",
@@ -113,6 +113,7 @@ export default function DatasetManagementPage() {
   );
 
   const {
+    loading,
     tableData,
     searchParams,
     pagination,
@@ -124,7 +125,8 @@ export default function DatasetManagementPage() {
     mapDataset,
     30000, // 30秒轮询间隔
     true, // 自动刷新
-    [fetchStatistics] // 额外的轮询函数
+    [fetchStatistics], // 额外的轮询函数
+    0
   );
 
   const handleDownloadDataset = async (dataset: Dataset) => {
@@ -135,7 +137,7 @@ export default function DatasetManagementPage() {
   const handleDeleteDataset = async (id: number) => {
     if (!id) return;
     await deleteDatasetByIdUsingDelete(id);
-    fetchData();
+    fetchData({ pageOffset: 0 });
     message.success("数据删除成功");
   };
 
@@ -145,7 +147,7 @@ export default function DatasetManagementPage() {
   };
 
   const handleRefresh = async (showMessage = true) => {
-    await fetchData();
+    await fetchData({ pageOffset: 0 });
     if (showMessage) {
       message.success("数据已刷新");
     }
@@ -295,6 +297,7 @@ export default function DatasetManagementPage() {
 
   const renderCardView = () => (
     <CardView
+      loading={loading}
       data={tableData}
       pageSize={9}
       operations={operations}

frontend/src/utils/request.ts

@@ -91,7 +91,6 @@ class Request {
 
       const xhr = new XMLHttpRequest();
 
-      console.log("upload xhr", url, config);
       // 监听上传进度
       xhr.upload.addEventListener("progress", function (event) {
         if (event.lengthComputable) {