enhance system config page (#61)

* 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.

* feat: Add .editorconfig and enhance SystemConfig with table for settings display

frontend/.editorconfig

@@ -0,0 +1,13 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.{md}]
+trim_trailing_whitespace = false
+

frontend/src/pages/Home/Home.tsx

@@ -134,7 +134,7 @@ export default function WelcomePage() {
             {menuItems.map((item) => (
               <Card
                 key={item.id}
-                onClick={() => navigate(`/data/${item.id}`)}
+                onClick={() => navigate(item.children ? `/data/${item.children[0].id}`: `/data/${item.id}`)}
                 className="cursor-pointer hover:shadow-lg transition-all duration-200 border-0 shadow-md relative overflow-hidden group"
               >
                 <div className="text-center relative">

frontend/src/pages/RatioTask/ratio.const.tsx

@@ -1,5 +1,7 @@
 import { formatDate } from "@/utils/unit";
 import { RatioTaskItem, RatioStatus } from "./ratio.model";
+import { BarChart3 } from "lucide-react";
+import { Link } from "react-router";
 
 export const ratioTaskStatusMap: Record<
   string,
@@ -42,5 +44,29 @@ export function mapRatioTask(task: Partial<RatioTaskItem>): RatioTaskItem {
     status: ratioTaskStatusMap[task.status || RatioStatus.PENDING]?.value,
     createdAt: formatDate(task.created_at),
     updatedAt: formatDate(task.updated_at),
+    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 ? (
+          <Link to={`/data/management/detail/${task.target_dataset_id}`}>
+            {task.target_dataset_name}
+          </Link>
+        ) : (
+          "无"
+        ),
+      },
+      {
+        label: "创建时间",
+        value: task.created_at || "-",
+      },
+    ],
   };
 }

frontend/src/pages/SettingsPage/SystemConfig.tsx

@@ -1,4 +1,5 @@
-import { Card, Divider, Input, Select, Switch, Button, Form, App } from "antd";
+import { Divider, Input, Select, Switch, Button, Form, App, Table } from "antd";
+import { PlusOutlined } from "@ant-design/icons";
 import { useState } from "react";
 
 export default function SystemConfig() {
@@ -12,6 +13,38 @@ export default function SystemConfig() {
     sessionTimeout: "30",
     enableNotifications: true,
   });
+  const configData = [
+    {
+      key: "1",
+      parameter: "站点名称",
+      value: systemConfig.siteName,
+      description: "系统的显示名称",
+    },
+    {
+      key: "2",
+      parameter: "最大文件大小 (MB)",
+      value: systemConfig.maxFileSize,
+      description: "允许上传的最大文件大小",
+    },
+    {
+      key: "3",
+      parameter: "自动备份",
+      value: systemConfig.autoBackup ? "启用" : "禁用",
+      description: "定期自动备份系统数据",
+    },
+    {
+      key: "4",
+      parameter: "日志级别",
+      value: systemConfig.logLevel,
+      description: "系统日志的详细程度",
+    },
+    {
+      key: "5",
+      parameter: "会话超时 (分钟)",
+      value: systemConfig.sessionTimeout,
+      description: "用户会话的超时时间",
+    },
+  ];
 
   const logLevelOptions = [
     { value: "debug", label: "Debug" },
@@ -26,61 +59,132 @@ export default function SystemConfig() {
     message.success("系统设置已保存");
   };
 
+  const columns = [
+    {
+      title: "参数",
+      dataIndex: "parameter",
+      key: "parameter",
+    },
+    {
+      title: "值",
+      dataIndex: "value",
+      key: "value",
+    },
+    {
+      title: "描述",
+      dataIndex: "description",
+      key: "description",
+    },
+    {
+      title: "是否启用",
+      dataIndex: "enabled",
+      key: "enabled",
+      render: (_: any, record: any) => (
+        <Switch
+          checked={
+            record.key === "3"
+              ? systemConfig.autoBackup
+              : record.key === "5"
+              ? systemConfig.enableNotifications
+              : false
+          }
+          onChange={(checked) => {
+            if (record.key === "3") {
+              setSystemConfig((prevConfig) => ({
+                ...prevConfig,
+                autoBackup: checked,
+              }));
+            } else if (record.key === "5") {
+              setSystemConfig((prevConfig) => ({
+                ...prevConfig,
+                enableNotifications: checked,
+              }));
+            }
+          }}
+        />
+      ),
+    }
+  ];
+
   return (
-    <Card>
+    <div className="h-full flex flex-col">
-      <Form
+      <div className="flex items-top justify-between">
-        onValuesChange={(changedValues) => {
+        <h2 className="text-lg font-medium mb-4">参数配置</h2>
-          setSystemConfig((prevConfig) => ({
+        <Button
-            ...prevConfig,
+          type="primary"
-            ...changedValues,
+          icon={<PlusOutlined />}
-          }));
+          onClick={() => {
-        }}
+            setIsEditMode(false);
-        layout="vertical"
+            form.resetFields();
-      >
+            setNewModel({
-        <div className="grid grid-cols-2 gap-6">
+              name: "",
-          <Form.Item name="siteName" label="站点名称">
+              provider: "",
-            <Input />
+              model: "",
-          </Form.Item>
+              apiKey: "",
-          <Form.Item name="maxFileSize" label="最大文件大小 (MB)">
+              endpoint: "",
-            <Input type="number" />
+            });
-          </Form.Item>
+            setShowModelDialog(true);
-          <Form.Item name="logLevel" label="日志级别">
+          }}
-            <Select options={logLevelOptions}></Select>
+        >
-          </Form.Item>
+          添加模型
-          <Form.Item name="sessionTimeout" label="会话超时 (分钟)">
+        </Button>
-            <Input type="number" />
+      </div>
-          </Form.Item>
+      <div className="flex-1 border-card overflow-auto p-6">
-        </div>
+        <Table columns={columns} data={configData} />
-        <Divider />
+        <Form
-        <div className="space-y-4">
+          onValuesChange={(changedValues) => {
-          <h4 className="font-medium">功能开关</h4>
+            setSystemConfig((prevConfig) => ({
-          <div className="space-y-3">
+              ...prevConfig,
-            <div className="flex items-center justify-between">
+              ...changedValues,
-              <div>
+            }));
-                <span>自动备份</span>
+          }}
-                <p className="text-sm text-gray-500">定期自动备份系统数据</p>
+          layout="vertical"
+        >
+          <div className="grid grid-cols-2 gap-6 mt-6">
+            <Form.Item name="siteName" label="站点名称">
+              <Input />
+            </Form.Item>
+            <Form.Item name="maxFileSize" label="最大文件大小 (MB)">
+              <Input type="number" />
+            </Form.Item>
+            <Form.Item name="logLevel" label="日志级别">
+              <Select options={logLevelOptions}></Select>
+            </Form.Item>
+            <Form.Item name="sessionTimeout" label="会话超时 (分钟)">
+              <Input type="number" />
+            </Form.Item>
+          </div>
+          <Divider />
+          <div className="space-y-4">
+            <h4 className="font-medium">功能开关</h4>
+            <div className="space-y-3">
+              <div className="flex items-center justify-between">
+                <div>
+                  <span>自动备份</span>
+                  <p className="text-sm text-gray-500">定期自动备份系统数据</p>
+                </div>
+                <Form.Item name="autoBackup" valuePropName="checked">
+                  <Switch />
+                </Form.Item>
               </div>
-              <Form.Item name="autoBackup" valuePropName="checked">
+              <div className="flex items-center justify-between">
-                <Switch />
+                <div>
-              </Form.Item>
+                  <span>启用通知</span>
-            </div>
+                  <p className="text-sm text-gray-500">接收系统通知和提醒</p>
-            <div className="flex items-center justify-between">
+                </div>
-              <div>
+                <Form.Item name="enableNotifications" valuePropName="checked">
-                <span>启用通知</span>
+                  <Switch />
-                <p className="text-sm text-gray-500">接收系统通知和提醒</p>
+                </Form.Item>
               </div>
-              <Form.Item name="enableNotifications" valuePropName="checked">
-                <Switch />
-              </Form.Item>
             </div>
           </div>
-        </div>
+          <div className="flex justify-end mt-6">
-        <div className="flex justify-end mt-6">
+            <Button type="primary" onClick={handleSaveSystemSettings}>
-          <Button type="primary" onClick={handleSaveSystemSettings}>
+              保存设置
-            保存设置
+            </Button>
-          </Button>
+          </div>
-        </div>
+        </Form>
-      </Form>
+      </div>
-    </Card>
+    </div>
   );
 }