frontend: fix bugs of icon

chenghh-9609 · chenghh-9609 · commit d6c18fbe81f5 · 2025-10-14T10:43:26.000+08:00
diff --git a/frontend/src/components/CardView.tsx b/frontend/src/components/CardView.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from "react";
-import { Card, Tag, Pagination, Dropdown, Tooltip, Empty, Popover } from "antd";
+import { Tag, Pagination, Dropdown, Tooltip, Empty, Popover } from "antd";
 import {
   EllipsisOutlined,
   ClockCircleOutlined,
@@ -22,7 +22,7 @@ interface BaseCardDataType {
   description: string;
   tags?: string[];
   statistics?: { label: string; value: string | number }[];
-  lastModified: string;
+  updatedAt?: string;
 }
 
 interface CardViewProps<T> {
@@ -180,27 +180,29 @@ function CardView<T extends BaseCardDataType>(props: CardViewProps<T>) {
               {/* Header */}
               <div className="flex items-start justify-between">
                 <div className="flex items-center gap-3 min-w-0">
-                  <div
-                    className={`flex-shrink-0 w-10 h-10 ${
-                      item.iconColor ||
-                      "bg-gradient-to-br from-blue-100 to-blue-200"
-                    } rounded-lg flex items-center justify-center`}
-                  >
-                    {item.icon}
-                  </div>
+                  {item?.icon && (
+                    <div
+                      className={`flex-shrink-0 w-12 h-12 ${
+                        item?.iconColor ||
+                        "bg-gradient-to-br from-blue-100 to-blue-200"
+                      } rounded-lg flex items-center justify-center`}
+                    >
+                      {item?.icon}
+                    </div>
+                  )}
                   <div className="flex-1 min-w-0">
                     <div className="flex items-center gap-2 mb-1">
                       <h3
                         className="text-base flex-1 text-ellipsis overflow-hidden whitespace-nowrap font-semibold text-gray-900 truncate cursor-pointer hover:text-blue-600"
                         onClick={() => onView?.(item)}
                       >
-                        {item.name}
+                        {item?.name}
                       </h3>
-                      {item.status && (
-                        <Tag color={item.status.color}>
+                      {item?.status && (
+                        <Tag color={item?.status?.color}>
                           <div className="flex items-center gap-2 text-xs py-0.5">
-                            <span>{item.status.icon}</span>
-                            <span>{item.status.label}</span>
+                            <span>{item?.status?.icon}</span>
+                            <span>{item?.status?.label}</span>
                           </div>
                         </Tag>
                       )}
@@ -221,20 +223,24 @@ function CardView<T extends BaseCardDataType>(props: CardViewProps<T>) {
 
               <div className="flex-1 flex flex-col justify-end">
                 {/* Tags */}
-                <TagsRenderer tags={item?.tags} />
+                <TagsRenderer tags={item?.tags || []} />
 
                 {/* Description */}
                 <p className="text-gray-600 text-xs text-ellipsis overflow-hidden whitespace-nowrap text-xs line-clamp-2 mt-2">
-                  <Tooltip title={item.description}>{item.description}</Tooltip>
+                  <Tooltip title={item?.description}>
+                    {item?.description}
+                  </Tooltip>
                 </p>
 
                 {/* Statistics */}
                 <div className="grid grid-cols-2 gap-4 py-3">
-                  {item.statistics?.map((stat, idx) => (
+                  {item?.statistics?.map((stat, idx) => (
                     <div key={idx}>
-                      <div className="text-sm text-gray-500">{stat.label}:</div>
+                      <div className="text-sm text-gray-500">
+                        {stat?.label}:
+                      </div>
                       <div className="text-base font-semibold text-gray-900">
-                        {stat.value}
+                        {stat?.value}
                       </div>
                     </div>
                   ))}
@@ -246,7 +252,7 @@ function CardView<T extends BaseCardDataType>(props: CardViewProps<T>) {
                 <div className=" text-gray-500 text-right">
                   <div className="flex items-center gap-1">
                     <ClockCircleOutlined className="w-4 h-4" />{" "}
-                    {formatDateTime(item.updatedAt)}
+                    {formatDateTime(item?.updatedAt)}
                   </div>
                 </div>
                 <Dropdown
diff --git a/frontend/src/components/DetailHeader.tsx b/frontend/src/components/DetailHeader.tsx
@@ -20,20 +20,6 @@ interface OperationItem {
   danger?: boolean;
 }
 
-interface BaseDataItem {
-  id: number;
-  icon?: React.ReactNode;
-  status?: {
-    label: string;
-    icon?: React.ReactNode;
-    color?: string;
-  };
-  name: string;
-  description: string;
-  createdAt: string;
-  lastUpdated: string;
-}
-
 interface DetailHeaderProps<T> {
   data: T;
   statistics: StatisticItem[];
@@ -71,6 +57,15 @@ const DetailHeader: React.FC<DetailHeaderProps<any>> = <T,>({
               )}
             </div>
             <p className="text-gray-700 mb-4">{data.description}</p>
+            {data?.tags?.map((tag) => (
+              <Tag
+                key={tag.id}
+                className="mr-1"
+                style={{ background: tag.color }}
+              >
+                {tag.name}
+              </Tag>
+            ))}
             <div className="flex items-center gap-6 text-sm">
               {statistics.map((stat, idx) => (
                 <div key={idx} className="flex items-center gap-1">
diff --git a/frontend/src/pages/DataCollection/Create/CreateTask.tsx b/frontend/src/pages/DataCollection/Create/CreateTask.tsx
@@ -13,7 +13,7 @@ import {
 } from "antd";
 import { Link, useNavigate } from "react-router";
 import { ArrowLeft } from "lucide-react";
-import { createTaskUsingPost } from "../collection-apis";
+import { createTaskUsingPost } from "../collection.apis";
 
 const { TextArea } = Input;
 
diff --git a/frontend/src/pages/DataCollection/Home/DataCollection.tsx b/frontend/src/pages/DataCollection/Home/DataCollection.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Button, Card, Tabs } from "antd";
+import { Button, Tabs } from "antd";
 import { PlusOutlined } from "@ant-design/icons";
 import TaskManagement from "./components/TaskManagement";
 import ExecutionLog from "./components/ExecutionLog";
diff --git a/frontend/src/pages/DataCollection/Home/components/ExecutionLog.tsx b/frontend/src/pages/DataCollection/Home/components/ExecutionLog.tsx
@@ -1,9 +1,9 @@
 import { Card, Badge, Table } from "antd";
 import type { ColumnsType } from "antd/es/table";
 import { SearchControls } from "@/components/SearchControls";
-import type { CollectionLog } from "@/pages/DataCollection/collection-model";
-import { queryExecutionLogUsingPost } from "../../collection-apis";
-import { LogStatusMap, LogTriggerTypeMap } from "../../collection-const";
+import type { CollectionLog } from "@/pages/DataCollection/collection.model";
+import { queryExecutionLogUsingPost } from "../../collection.apis";
+import { LogStatusMap, LogTriggerTypeMap } from "../../collection.const";
 import useFetchData from "@/hooks/useFetchData";
 
 const filterOptions = [
diff --git a/frontend/src/pages/DataCollection/Home/components/TaskManagement.tsx b/frontend/src/pages/DataCollection/Home/components/TaskManagement.tsx
@@ -6,9 +6,9 @@ import {
   executeTaskByIdUsingPost,
   queryTasksUsingPost,
   stopTaskByIdUsingPost,
-} from "../../collection-apis";
-import { TaskStatus, type CollectionTask } from "../../collection-model";
-import { StatusMap, SyncModeMap } from "../../collection-const";
+} from "../../collection.apis";
+import { TaskStatus, type CollectionTask } from "../../collection.model";
+import { StatusMap, SyncModeMap } from "../../collection.const";
 import useFetchData from "@/hooks/useFetchData";
 
 export default function TaskManagement() {
diff --git a/frontend/src/pages/DataCollection/collection.apis.ts b/frontend/src/pages/DataCollection/collection.apis.ts
diff --git a/frontend/src/pages/DataCollection/collection.const.ts b/frontend/src/pages/DataCollection/collection.const.ts
@@ -1,4 +1,4 @@
-import { LogStatus, SyncMode, TaskStatus, TriggerType } from "./collection-model";
+import { LogStatus, SyncMode, TaskStatus, TriggerType } from "./collection.model";
 
 export const StatusMap: Record<
   TaskStatus,
diff --git a/frontend/src/pages/DataCollection/collection.model.ts b/frontend/src/pages/DataCollection/collection.model.ts
diff --git a/frontend/src/pages/DataEvaluation/Home/DataEvaluation.tsx b/frontend/src/pages/DataEvaluation/Home/DataEvaluation.tsx
@@ -1,5 +1,3 @@
-
-
 import { useState, useEffect } from "react";
 import { Button, Card, Badge, Progress, Table } from "antd";
 import {
diff --git a/frontend/src/pages/DataManagement/Create/CreateDataset.tsx b/frontend/src/pages/DataManagement/Create/CreateDataset.tsx
@@ -13,7 +13,7 @@ import {
   updateDatasetByIdUsingPut,
 } from "../dataset.api";
 import { DatasetSubType, DatasetType, DataSource } from "../dataset.model";
-import { queryTasksUsingPost } from "@/pages/DataCollection/collection-apis";
+import { queryTasksUsingPost } from "@/pages/DataCollection/collection.apis";
 import { mockPreparedTags } from "@/components/TagManagement";
 
 export default function DatasetCreate() {
@@ -44,12 +44,12 @@ export default function DatasetCreate() {
   // 获取标签
   const fetchTags = async () => {
     try {
-      const res = await queryDatasetTagsUsingGet();
+      const { data } = await queryDatasetTagsUsingGet();
       const preparedTags = mockPreparedTags.map((tag) => ({
         label: tag.name,
         value: tag.name,
       }));
-      const customTags = res.map((tag) => ({
+      const customTags = data.map((tag) => ({
         label: tag.name,
         value: tag.name,
       }));
@@ -77,8 +77,8 @@ export default function DatasetCreate() {
   // 获取归集任务列表
   const fetchCollectionTasks = async () => {
     try {
-      const res = await queryTasksUsingPost({ pageNum: 1, pageSize: 100 });
-      const options = res.map((task: any) => ({
+      const { data } = await queryTasksUsingPost({ pageNum: 1, pageSize: 100 });
+      const options = data.map((task: any) => ({
         label: task.name,
         value: task.id,
       }));
@@ -137,7 +137,7 @@ export default function DatasetCreate() {
 
   const handleSubmit = async () => {
     const formValues = await form.validateFields();
-    
+
     const params = {
       ...formValues,
       files: undefined,
@@ -147,7 +147,7 @@ export default function DatasetCreate() {
       const callFn = id
         ? () => updateDatasetByIdUsingPut(id, params)
         : () => createDatasetUsingPost(params);
-      const data = await callFn();
+      const { data } = await callFn();
       dataset = data;
       message.success(`数据集${id ? "更新" : "创建"}成功`);
 
diff --git a/frontend/src/pages/DataManagement/Home/DataManagement.tsx b/frontend/src/pages/DataManagement/Home/DataManagement.tsx
@@ -23,6 +23,7 @@ import {
   updateDatasetTagByIdUsingPut,
   deleteDatasetTagByIdUsingDelete,
 } from "../dataset.api";
+import { formatBytes } from "@/utils/unit";
 
 export default function DatasetManagementPage() {
   const navigate = useNavigate();
@@ -36,19 +37,20 @@ export default function DatasetManagementPage() {
 
   async function fetchStatistics() {
     const { data } = await getDatasetStatisticsUsingGet();
+
     const statistics = {
       size: [
         {
-          title: "文本",
-          value: data?.size?.text || "0 MB",
+          title: "总计",
+          value: data?.totalDatasets,
         },
         {
-          title: "图像",
-          value: data?.size?.image || "0 MB",
+          title: "文件数",
+          value: data?.totalFiles,
         },
         {
-          title: "音频",
-          value: data?.size?.audio || "0 MB",
+          title: "大小",
+          value: formatBytes(data?.totalSize),
         },
         {
           title: "视频",
@@ -66,7 +68,7 @@ export default function DatasetManagementPage() {
         },
         {
           title: "音频",
-          value: data?.count.audio || 0,
+          value: data?.count?.audio || 0,
         },
         {
           title: "视频",
@@ -270,8 +272,8 @@ export default function DatasetManagementPage() {
       </div>
 
       {/* Statistics */}
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-2">
-        <Card title="数据集统计">
+      <div className="grid grid-cols-1 mt-4">
+        {/* <Card title="数据集统计">
           <div className="grid grid-cols-4">
             {statisticsData.count?.map?.((item) => (
               <Statistic
@@ -281,14 +283,14 @@ export default function DatasetManagementPage() {
               />
             ))}
           </div>
-        </Card>
-        <Card title="大小统计">
+        </Card> */}
+        <Card>
           <div className="grid grid-cols-4">
             {statisticsData.size?.map?.((item) => (
               <Statistic
                 key={item.title}
                 title={item.title}
-                value={`${item.value} MB`}
+                value={`${item.value}`}
               />
             ))}
           </div>
diff --git a/frontend/src/pages/DataManagement/dataset.const.tsx b/frontend/src/pages/DataManagement/dataset.const.tsx
@@ -13,17 +13,16 @@ import {
 } from "@ant-design/icons";
 import React from "react";
 import {
-  BarChart3,
   FileImage,
   FileText,
-  AudioLines,
   Video,
   FileCode,
   MessageCircleMore,
   ImagePlus,
   FileMusic,
   Music,
   Videotape,
+  Database,
 } from "lucide-react";
 
 export const datasetTypeMap: Record<
@@ -180,14 +179,13 @@ export const dataSourceMap: Record<string, { label: string; value: string }> = {
 export const dataSourceOptions = Object.values(dataSourceMap);
 
 export function mapDataset(dataset: Dataset) {
+  const IconComponent = datasetSubTypeMap[dataset?.type?.code]?.icon;
   return {
     ...dataset,
     size: formatBytes(dataset.totalSize || 0),
     createdAt: formatDateTime(dataset.createdAt) || "--",
     updatedAt: formatDateTime(dataset?.updatedAt) || "--",
-    icon: datasetSubTypeMap[dataset?.type?.code]?.icon || (
-      <BarChart3 className="w-4 h-4" />
-    ),
+    icon: <IconComponent /> || <Database />,
     status: datasetStatusMap[dataset.status],
     statistics: [
       { label: "数据项", value: dataset?.fileCount || 0 },
diff --git a/frontend/src/pages/Layout/Sidebar.tsx b/frontend/src/pages/Layout/Sidebar.tsx
@@ -84,7 +84,7 @@ const AsiderAndHeaderLayout = () => {
       <div className="p-4 border-t border-gray-200">
         {sidebarOpen ? (
           <div className="space-y-2">
-            <TaskPopover />
+            {/* <TaskPopover /> */}
             <Button block onClick={() => navigate("/data/settings")}>
               设置
             </Button>
diff --git a/frontend/src/utils/unit.ts b/frontend/src/utils/unit.ts
@@ -1,6 +1,6 @@
 // 字节数转换为更大单位的方法
 export const formatBytes = (bytes: number): string => {
-  if (bytes === 0) return "0 B";
+  if (!bytes) return "0 B";
 
   const units = ["B", "KB", "MB", "GB", "TB", "PB"];
   const k = 1024;
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
@@ -19,7 +19,8 @@ export default defineConfig({
     // },
     proxy: {
       "^/api": {
-        target: "http://127.0.0.1:8002",
+        // target: "http://localhost:8002", // 本地后端服务地址
+        target: "http://1.94.5.242:32530", // 远程后端服务地址
         changeOrigin: true,
         secure: false,
         rewrite: (path) => path.replace(/^\/api/, "/api"),

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { LogStatus, SyncMode, TaskStatus, TriggerType } from "./collection-model";`
	`1`	`+import { LogStatus, SyncMode, TaskStatus, TriggerType } from "./collection.model";`
`2`	`2`
`3`	`3`	`export const StatusMap: Record<`
`4`	`4`	`TaskStatus,`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,3 @@`
`1`		`-`
`2`		`-`
`3`	`1`	`import { useState, useEffect } from "react";`
`4`	`2`	`import { Button, Card, Badge, Progress, Table } from "antd";`
`5`	`3`	`import {`