update data synthesis page ui (#60)

* feat: Update site name to DataMate and refine text for AI data processing

* feat: Refactor settings page and implement model access functionality

- Created a new ModelAccess component for managing model configurations.
- Removed the old Settings component and replaced it with a new SettingsPage component that integrates ModelAccess, SystemConfig, and WebhookConfig.
- Added SystemConfig component for managing system settings.
- Implemented WebhookConfig component for managing webhook configurations.
- Updated API functions for model management in settings.apis.ts.
- Adjusted routing to point to the new SettingsPage component.

* feat: Implement Data Collection Page with Task Management and Execution Log

- Created DataCollectionPage component to manage data collection tasks.
- Added TaskManagement and ExecutionLog components for task handling and logging.
- Integrated task operations including start, stop, edit, and delete functionalities.
- Implemented filtering and searching capabilities in task management.
- Introduced SimpleCronScheduler for scheduling tasks with cron expressions.
- Updated CreateTask component to utilize new scheduling and template features.
- Enhanced BasicInformation component to conditionally render fields based on visibility settings.
- Refactored ImportConfiguration component to remove NAS import section.

* feat: Update task creation API endpoint and enhance task creation form with new fields and validation

* Refactor file upload and operator management components

- Removed unnecessary console logs from file download and export functions.
- Added size property to TaskItem interface for better task management.
- Simplified TaskUpload component by utilizing useFileSliceUpload hook for file upload logic.
- Enhanced OperatorPluginCreate component to handle file uploads and parsing more efficiently.
- Updated ConfigureStep component to use Ant Design Form for better data handling and validation.
- Improved PreviewStep component to navigate back to the operator market.
- Added support for additional file types in UploadStep component.
- Implemented delete operator functionality in OperatorMarketPage with confirmation prompts.
- Cleaned up unused API functions in operator.api.ts to streamline the codebase.
- Fixed number formatting utility to handle zero values correctly.

* Refactor Knowledge Generation to Knowledge Base

- Created new API service for Knowledge Base operations including querying, creating, updating, and deleting knowledge bases and files.
- Added constants for Knowledge Base status and type mappings.
- Defined models for Knowledge Base and related files.
- Removed obsolete Knowledge Base creation and home components, replacing them with new implementations under the Knowledge Base structure.
- Updated routing to reflect the new Knowledge Base paths.
- Adjusted menu items to align with the new Knowledge Base terminology.
- Modified ModelAccess interface to include modelName and type properties.

* feat: Implement Knowledge Base Page with CRUD operations and data management

- Added KnowledgeBasePage component for displaying and managing knowledge bases.
- Integrated search and filter functionalities with SearchControls component.
- Implemented CreateKnowledgeBase component for creating and editing knowledge bases.
- Enhanced AddDataDialog for file uploads and dataset selections.
- Introduced TableTransfer component for managing data transfers between tables.
- Updated API functions for knowledge base operations, including file management.
- Refactored knowledge base model to include file status and metadata.
- Adjusted routing to point to the new KnowledgeBasePage.

* feat: enhance OperatorPluginCreate and ConfigureStep for better upload handling and UI updates

* refactor: remove unused components and clean up API logging in KnowledgeBase

* feat: update icons in various components and improve styling for better UI consistency

* fix: adjust upload step handling and improve error display in configuration step

* feat: Add RatioTransfer component for dataset selection and configuration

- Implemented RatioTransfer component to manage dataset selection and ratio configuration.
- Integrated dataset fetching with search and filter capabilities.
- Added RatioConfig component for displaying and updating selected datasets' configurations.
- Enhanced SelectDataset component with improved UI and functionality for dataset selection.
- Updated RatioTasksPage to utilize new ratio task status mapping and improved error handling for task deletion.
- Refactored ratio model and constants for better type safety and clarity.
- Changed Vite configuration to use local backend service for development.

frontend/src/pages/RatioTask/Home/RatioTask.tsx

@@ -1,59 +1,67 @@
 import { useState } from "react";
 import { Button, Card, Table, Tooltip, App } from "antd";
-import { Plus, Clock, Play, CheckCircle, AlertCircle, Pause, BarChart3 } from "lucide-react";
+import { Plus } from "lucide-react";
 import { DeleteOutlined } from "@ant-design/icons";
-import type { RatioTaskItem } from "@/pages/RatioTask/ratio.model.ts";
+import type { RatioTaskItem } from "@/pages/RatioTask/ratio.model";
 import { useNavigate } from "react-router";
-import CardView from "@/components/CardView.tsx";
-import { SearchControls } from "@/components/SearchControls.tsx";
-import { queryRatioTasksUsingGet, deleteRatioTasksUsingDelete } from "@/pages/RatioTask/ratio.api.ts";
+import CardView from "@/components/CardView";
+import { SearchControls } from "@/components/SearchControls";
+import {
+  deleteRatioTasksUsingDelete,
+  queryRatioTasksUsingGet,
+} from "../ratio.api";
 import useFetchData from "@/hooks/useFetchData";
+import { mapRatioTask, ratioTaskStatusMap } from "../ratio.const";
 
 export default function RatioTasksPage() {
-  const navigate = useNavigate();
-  const [viewMode, setViewMode] = useState<"card" | "list">("card");
   const { message } = App.useApp();
+  const navigate = useNavigate();
+  const [viewMode, setViewMode] = useState<"card" | "list">("list");
 
-  const { loading, tableData, pagination, searchParams, setSearchParams, handleFiltersChange, fetchData } =
-    useFetchData<RatioTaskItem>(queryRatioTasksUsingGet, (d) => d as RatioTaskItem, 30000, true, [], 0);
+  const {
+    loading,
+    tableData,
+    pagination,
+    searchParams,
+    setSearchParams,
+    handleFiltersChange,
+    fetchData,
+  } = useFetchData<RatioTaskItem>(
+    queryRatioTasksUsingGet,
+    mapRatioTask,
+    30000,
+    true,
+    [],
+    0
+  );
 
-  const handleDelete = async (id: string) => {
-    await deleteRatioTasksUsingDelete([id]);
-    message.success("删除成功");
-    await fetchData();
+  const handleDeleteTask = async (task: RatioTaskItem) => {
+    try {
+      // 调用删除接口
+      await deleteRatioTasksUsingDelete(task.id);
+      message.success("任务删除成功");
+      // 重新加载数据
+      fetchData();
+    } catch (error) {
+      message.error("任务删除失败，请稍后重试");
+    }
   };
 
-  const getStatusBadge = (status: string) => {
-    const s = (status || "").toUpperCase();
-    const statusConfig = {
-      PENDING: {
-        label: "等待中",
-        color: "#f09e10ff",
-        icon: <Clock className="w-4 h-4 inline mr-1" />,
-      },
-      RUNNING: {
-        label: "运行中",
-        color: "#007bff",
-        icon: <Play className="w-4 h-4 inline mr-1" />,
-      },
-      SUCCESS: {
-        label: "已完成",
-        color: "#28a745",
-        icon: <CheckCircle className="w-4 h-4 inline mr-1" />,
-      },
-      FAILED: {
-        label: "失败",
-        color: "#dc3545",
-        icon: <AlertCircle className="w-4 h-4 inline mr-1" />,
-      },
-      PAUSED: {
-        label: "已暂停",
-        color: "#6c757d",
-        icon: <Pause className="w-4 h-4 inline mr-1" />,
-      },
-    };
-    return statusConfig[s as keyof typeof statusConfig] || statusConfig.PENDING;
-  };
+  // 搜索、筛选和视图控制相关
+  const filters = [
+    {
+      key: "status",
+      label: "状态筛选",
+      options: [
+        { label: "全部状态", value: "all" },
+        { label: "等待中", value: "PENDING" },
+        { label: "运行中", value: "RUNNING" },
+        { label: "已完成", value: "SUCCESS" },
+        { label: "失败", value: "FAILED" },
+        { label: "已暂停", value: "PAUSED" },
+      ],
+    },
+  ];
 
   const columns = [
     {
@@ -61,14 +69,20 @@ export default function RatioTasksPage() {
       dataIndex: "name",
       key: "name",
       render: (text: string, record: RatioTaskItem) => (
-        <a onClick={() => navigate(`/data/synthesis/ratio-task/detail/${record.id}`)}>{text}</a>
+        <a
+          onClick={() =>
+            navigate(`/data/synthesis/ratio-task/detail/${record.id}`)
+          }
+        >
+          {text}
+        </a>
       ),
     },
     {
       title: "状态",
       dataIndex: "status",
       key: "status",
-      render: (v: string) => getStatusBadge(v).label,
+      render: (status) => ratioTaskStatusMap[status]?.label,
     },
     {
       title: "配比方式",
@@ -85,7 +99,13 @@ export default function RatioTasksPage() {
       dataIndex: "target_dataset_name",
       key: "target_dataset_name",
       render: (text: string, task: RatioTaskItem) => (
-        <a onClick={() => navigate(`/data/management/detail/${task.target_dataset_id}`)}>{text}</a>
+        <a
+          onClick={() =>
+            navigate(`/data/management/detail/${task.target_dataset_id}`)
+          }
+        >
+          {text}
+        </a>
       ),
     },
     {
@@ -112,127 +132,25 @@ export default function RatioTasksPage() {
     },
   ];
 
-  const renderTableView = () => (
-    <Card>
-      <Table
-        columns={columns}
-        dataSource={tableData}
-        rowKey="id"
-        loading={loading}
-        pagination={pagination}
-        scroll={{ x: "max-content" }}
-        locale={{
-          emptyText: (
-            <div className="text-center py-8">
-              <BarChart3 className="w-12 h-12 text-gray-400 mx-auto mb-4" />
-              <h3 className="text-lg font-medium text-gray-900 mb-2">
-                暂无配比任务
-              </h3>
-              <p className="text-gray-500 mb-4">
-                {searchParams.keyword || (searchParams.filter?.status?.[0] && searchParams.filter?.status?.[0] !== "all")
-                  ? "没有找到匹配的任务"
-                  : "开始创建您的第一个配比任务"}
-              </p>
-              {!searchParams.keyword && (!searchParams.filter?.status?.length || searchParams.filter?.status?.[0] === "all") && (
-                  <Button
-                    onClick={() =>
-                      navigate("/data/synthesis/ratio-task/create")
-                    }
-                    type="primary"
-                  >
-                    <Plus className="w-4 h-4 mr-2" />
-                    创建配比任务
-                  </Button>
-                )}
-            </div>
-          ),
-        }}
-      />
-    </Card>
-  );
   const operations = [
     {
       key: "delete",
       label: "删除",
       danger: true,
       confirm: {
-        title: "确认删除该数据集？",
-        description: "删除后该数据集将无法恢复，请谨慎操作。",
+        title: "确认删除该任务？",
+        description: "删除后该任务将无法恢复，请谨慎操作。",
         okText: "删除",
         cancelText: "取消",
         okType: "danger",
       },
       icon: <DeleteOutlined />,
-      onClick: (item) => handleDelete(String(item.id)),
-    }
-  ];
-  const renderCardView = () => (
-    <CardView
-      loading={loading}
-      data={tableData.map((task) => ({
-        ...task,
-        description: task.ratio_method === "DATASET" ? "按数据集配比" : "按标签配比",
-        icon: <BarChart3 className="w-6 h-6" />,
-        iconColor: task.ratio_method === "DATASET" ? "bg-blue-100" : "bg-green-100",
-        statistics: [
-          {
-            label: "目标数量",
-            value: (task.totals ?? 0).toLocaleString(),
-          },
-          {
-            label: "目标数据集",
-            value: task.target_dataset_name ? (
-              <a onClick={(e) => {
-                e.stopPropagation();
-                navigate(`/data/management/detail/${task.target_dataset_id}`);
-              }}>
-                {task.target_dataset_name}
-              </a>
-            ) : '无',
-          },
-          {
-            label: "创建时间",
-            value: task.created_at || "-",
-          },
-        ],
-        status: getStatusBadge(task.status),
-      }))}
-      pagination={pagination}
-      operations={operations}
-      onView={(task) => {navigate(`/data/synthesis/ratio-task/detail/${task.id}`)}}
-    />
-  );
-
-  // 搜索、筛选和视图控制相关
-  const searchFilters = [
-    {
-      key: "status",
-      label: "状态筛选",
-      options: [
-        { label: "全部状态", value: "all" },
-        { label: "等待中", value: "PENDING" },
-        { label: "运行中", value: "RUNNING" },
-        { label: "已完成", value: "SUCCESS" },
-        { label: "失败", value: "FAILED" },
-        { label: "已暂停", value: "PAUSED" },
-      ],
+      onClick: handleDeleteTask,
     },
   ];
 
-  // 处理 SearchControls 的筛选变化
-  const handleSearchControlsFiltersChange = (
-    filters: Record<string, string[]>
-  ) => {
-    handleFiltersChange(filters);
-  };
-
-  // 处理视图切换
-  const handleViewModeChange = (mode: "card" | "list") => {
-    setViewMode(mode === "card" ? "card" : "list");
-  };
-
   return (
-    <div className="">
+    <div className="h-full flex flex-col gap-4">
       <div className="flex items-center justify-between">
         <h2 className="text-xl font-bold">配比任务</h2>
         <Button
@@ -247,17 +165,42 @@ export default function RatioTasksPage() {
         {/* 搜索、筛选和视图控制 */}
         <SearchControls
           searchTerm={searchParams.keyword}
-          onSearchChange={(keyword) => setSearchParams({ ...searchParams, keyword })}
-          searchPlaceholder="搜索任务名称"
-          filters={searchFilters}
-          onFiltersChange={handleSearchControlsFiltersChange}
-          onClearFilters={() => setSearchParams({ ...searchParams, filter: {} })}
-          viewMode={viewMode === "card" ? "card" : "list"}
-          onViewModeChange={handleViewModeChange}
-          showViewToggle={true}
+          onSearchChange={(keyword) =>
+            setSearchParams({ ...searchParams, keyword })
+          }
+          searchPlaceholder="搜索任务名称..."
+          filters={filters}
+          onFiltersChange={handleFiltersChange}
+          onClearFilters={() =>
+            setSearchParams({ ...searchParams, filter: {} })
+          }
+          viewMode={viewMode}
+          onViewModeChange={setViewMode}
+          showViewToggle
+          onReload={fetchData}
         />
         {/* 任务列表 */}
-        {viewMode === "list" ? renderTableView() : renderCardView()}
+        {viewMode === "list" ? (
+          <Card>
+            <Table
+              columns={columns}
+              dataSource={tableData}
+              pagination={pagination}
+              rowKey="id"
+              scroll={{ x: "max-content", y: "calc(100vh - 30rem)" }}
+            />
+          </Card>
+        ) : (
+          <CardView
+            loading={loading}
+            data={tableData}
+            operations={operations}
+            pagination={pagination}
+            onView={(task) => {
+              navigate(`/data/synthesis/ratio-task/detail/${task.id}`);
+            }}
+          />
+        )}
       </>
     </div>
   );