From 2660845b74899c9ada6f9650aad99c4543904fbb Mon Sep 17 00:00:00 2001 From: chenghh-9609 <55340429+chenghh-9609@users.noreply.github.com> Date: Thu, 13 Nov 2025 10:41:59 +0800 Subject: [PATCH] update data ratio detail page (#78) * 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 * feat: Enhance parameter configuration for range inputs and update default values * feat: Update site name to DataMate and refine text for AI data processing * 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 * 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: Update site name to DataMate and refine text for AI data processing * 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 * 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 settings drawer and integrate SettingsPage component * feat: add ratio task management features including detail view and API integration * feat: enable destruction of hidden settings drawer to free up resources * feat: add data metrics and ratio display components with charts for enhanced data visualization --- frontend/src/components/DetailHeader.tsx | 2 +- frontend/src/pages/Layout/Sidebar.tsx | 1 + .../pages/RatioTask/Detail/DataMetrics.tsx | 58 ++++++++ .../pages/RatioTask/Detail/DataRatioChart.tsx | 76 +++++++++++ .../pages/RatioTask/Detail/RatioDisplay.tsx | 107 +++++++++++++++ .../RatioTask/Detail/RatioTaskDetail.tsx | 124 +++++------------- frontend/src/pages/RatioTask/ratio.const.tsx | 25 ++-- .../src/pages/SettingsPage/SettingsPage.tsx | 20 +-- frontend/src/routes/routes.ts | 2 +- 9 files changed, 302 insertions(+), 113 deletions(-) create mode 100644 frontend/src/pages/RatioTask/Detail/DataMetrics.tsx create mode 100644 frontend/src/pages/RatioTask/Detail/DataRatioChart.tsx create mode 100644 frontend/src/pages/RatioTask/Detail/RatioDisplay.tsx diff --git a/frontend/src/components/DetailHeader.tsx b/frontend/src/components/DetailHeader.tsx index 526a4d2..27b5965 100644 --- a/frontend/src/components/DetailHeader.tsx +++ b/frontend/src/components/DetailHeader.tsx @@ -61,7 +61,7 @@ function DetailHeader({ {data?.status && (
- {data.status?.icon} + {data.status?.icon && {data.status?.icon}} {data.status?.label}
diff --git a/frontend/src/pages/Layout/Sidebar.tsx b/frontend/src/pages/Layout/Sidebar.tsx index 1c46ea7..f1e706f 100644 --- a/frontend/src/pages/Layout/Sidebar.tsx +++ b/frontend/src/pages/Layout/Sidebar.tsx @@ -183,6 +183,7 @@ const AsiderAndHeaderLayout = () => { open={settingVisible} onClose={() => setSettingVisible(false)} bodyStyle={{ padding: 0 }} + destroyOnHidden={true} > diff --git a/frontend/src/pages/RatioTask/Detail/DataMetrics.tsx b/frontend/src/pages/RatioTask/Detail/DataMetrics.tsx new file mode 100644 index 0000000..b585f5d --- /dev/null +++ b/frontend/src/pages/RatioTask/Detail/DataMetrics.tsx @@ -0,0 +1,58 @@ +import { Card } from "antd" +import { BarChart3, Database, Users, Zap } from "lucide-react" + +const metrics = [ + { + label: "总数据量", + value: "2.5M", + icon: Database, + change: "+12.5%", + color: "text-blue-400", + }, + { + label: "配比成功率", + value: "94.2%", + icon: BarChart3, + change: "+2.1%", + color: "text-emerald-400", + }, + { + label: "处理速度", + value: "185K/s", + icon: Zap, + change: "+8.3%", + color: "text-amber-400", + }, + { + label: "活跃用户", + value: "156.8K", + icon: Users, + change: "+5.2%", + color: "text-purple-400", + }, +] + +export default function DataMetrics() { + return ( +
+ {metrics.map((metric, idx) => { + const Icon = metric.icon + return ( +
+
+
+ +
+ {metric.change} +
+

{metric.label}

+

{metric.value}

+
+ ) + })} +
+ ) +} diff --git a/frontend/src/pages/RatioTask/Detail/DataRatioChart.tsx b/frontend/src/pages/RatioTask/Detail/DataRatioChart.tsx new file mode 100644 index 0000000..de5b871 --- /dev/null +++ b/frontend/src/pages/RatioTask/Detail/DataRatioChart.tsx @@ -0,0 +1,76 @@ +import { + BarChart, + Bar, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Legend, + ResponsiveContainer, + LineChart, + Line, +} from "recharts" + +const chartData = [ + { name: "一月", 配比率: 65, 成功数: 2400, 失败数: 240 }, + { name: "二月", 配比率: 72, 成功数: 2210, 失败数: 221 }, + { name: "三月", 配比率: 78, 成功数: 2290, 失败数: 229 }, + { name: "四月", 配比率: 84, 成功数: 2000, 失败数: 200 }, + { name: "五月", 配比率: 90, 成功数: 2181, 失败数: 218 }, + { name: "六月", 配比率: 94, 成功数: 2500, 失败数: 250 }, +] + +export default function DataRatioChart() { + return ( +
+
+

配比趋势分析

+ + + + + + + + + + + +
+ +
+

成功率曲线

+ + + + + + + + + +
+
+ ) +} diff --git a/frontend/src/pages/RatioTask/Detail/RatioDisplay.tsx b/frontend/src/pages/RatioTask/Detail/RatioDisplay.tsx new file mode 100644 index 0000000..b53edb8 --- /dev/null +++ b/frontend/src/pages/RatioTask/Detail/RatioDisplay.tsx @@ -0,0 +1,107 @@ +import { BarChart3, Layers } from "lucide-react"; +import { + PieChart, + Pie, + Cell, + Tooltip, + ResponsiveContainer, + BarChart, + Bar, + XAxis, + YAxis, + CartesianGrid, +} from "recharts"; + +interface DatasetRatio { + name: string; + ratio: number; + count: number; + color: string; +} + +export default function RatioDisplay() { + const datasets: DatasetRatio[] = [ + { name: "用户行为数据集", ratio: 45, count: 450000, color: "#3b82f6" }, + { name: "交易记录数据集", ratio: 30, count: 300000, color: "#8b5cf6" }, + { name: "产品信息数据集", ratio: 15, count: 150000, color: "#ec4899" }, + { name: "评价反馈数据集", ratio: 10, count: 100000, color: "#f59e0b" }, + ]; + + const chartData = datasets.map((d) => ({ + name: d.name, + value: d.ratio, + count: d.count, + fill: d.color, + })); + + return ( +
+

+ 数据集配比信息 +

+ +
+ {/* 饼图展示比例 */} +
+ + + `${value}%`} + outerRadius={80} + fill="#8884d8" + dataKey="value" + > + {chartData.map((entry, index) => ( + + ))} + + `${value}%`} /> + + +
+ + {/* 数据集详情列表 */} +
+ {datasets.map((dataset, index) => ( +
+
+
+
+ + {dataset.name} + +
+ + {dataset.ratio}% + +
+ + {/* 比例条形图 */} +
+
+
+
+ + {dataset.count.toLocaleString()} + +
+
+ ))} +
+
+
+ ); +} diff --git a/frontend/src/pages/RatioTask/Detail/RatioTaskDetail.tsx b/frontend/src/pages/RatioTask/Detail/RatioTaskDetail.tsx index 0ccf7d3..ab27227 100644 --- a/frontend/src/pages/RatioTask/Detail/RatioTaskDetail.tsx +++ b/frontend/src/pages/RatioTask/Detail/RatioTaskDetail.tsx @@ -21,20 +21,23 @@ import { post } from "@/utils/request"; import type { RatioTaskItem } from "@/pages/RatioTask/ratio.model"; import { mapRatioTask } from "../ratio.const"; import { Copy, Pause, PlayIcon } from "lucide-react"; +import DataRatioChart from "./DataRatioChart"; +import RatioDisplay from "./RatioDisplay"; +import DataMetrics from "./DataMetrics"; const tabList = [ { key: "overview", label: "概览", }, - { - key: "analysis", - label: "配比分析", - }, - { - key: "config", - label: "配比配置", - }, + // { + // key: "analysis", + // label: "配比分析", + // }, + // { + // key: "config", + // label: "配比配置", + // }, ]; export default function RatioTaskDetail() { @@ -105,20 +108,20 @@ export default function RatioTaskDetail() { // 操作列表 const operations = [ - { - key: "execute", - label: "启动", - icon: , - onClick: handleExecute, - disabled: ratioTask.status === "RUNNING", - }, - { - key: "stop", - label: "停止", - icon: , - onClick: handleStop, - disabled: ratioTask.status !== "RUNNING", - }, + // { + // key: "execute", + // label: "启动", + // icon: , + // onClick: handleExecute, + // disabled: ratioTask.status === "RUNNING", + // }, + // { + // key: "stop", + // label: "停止", + // icon: , + // onClick: handleStop, + // disabled: ratioTask.status !== "RUNNING", + // }, { key: "refresh", label: "刷新", @@ -153,6 +156,11 @@ export default function RatioTaskDetail() { label: "名称", children: ratioTask.name, }, + { + key: "totals", + label: "目标数量", + children: ratioTask.totals, + }, { key: "dataset", label: "目标数据集", @@ -164,31 +172,21 @@ export default function RatioTaskDetail() { }, { key: "status", - label: "数据大小", + label: "状态", children: ( ), }, { key: "type", - label: "类型", + label: "配比方式", children: ratioTask.type || "未知", }, - { - key: "status", - label: "状态", - children: ratioTask?.status?.label || "未知", - }, { key: "createdBy", label: "创建者", children: ratioTask.createdBy || "未知", }, - { - key: "targetLocation", - label: "输出路径", - children: ratioTask.targetLocation || "未知", - }, { key: "createdAt", label: "创建时间", @@ -215,6 +213,7 @@ export default function RatioTaskDetail() { statistics={ratioTask?.statistics || []} operations={operations} /> + {/* */}
@@ -227,63 +226,10 @@ export default function RatioTaskDetail() { items={items} column={5} /> -

配比详情

-
- {/* 目标配比 */} - -
- {ratioTask.targetRatio && - Object.entries(ratioTask.targetRatio).map( - ([category, ratio]) => ( -
-
- - {category} - - - {ratioTask.ratio}% - -
- -
- ) - )} -
- - - {/* 当前配比 */} - -
- {ratioTask.currentRatio && - Object.entries(ratioTask.currentRatio).length > 0 ? ( - Object.entries(ratioTask.currentRatio)?.map( - ([category, ratio]) => ( -
-
- - {category} - - - {ratioTask.ratio}% - -
- -
- ) - ) - ) : ( -

等待处理开始

- )} -
- -
+ {/* */} )} - {activeTab === "analysis" && ( -
- 配比分析功能正在开发中，敬请期待！ -
- )} + {activeTab === "analysis" && } {activeTab === "config" && ( 
diff --git a/frontend/src/pages/RatioTask/ratio.const.tsx b/frontend/src/pages/RatioTask/ratio.const.tsx
index e1c6b3e..55d8fb4 100644
--- a/frontend/src/pages/RatioTask/ratio.const.tsx
+++ b/frontend/src/pages/RatioTask/ratio.const.tsx
@@ -46,7 +46,8 @@ export function mapRatioTask(task: Partial): RatioTaskItem {
     createdAt: formatDate(task.created_at),
     updatedAt: formatDate(task.updated_at),
     description:
-      task.ratio_method === "DATASET" ? "按数据集配比" : "按标签配比",
+      task.description ||
+      (task.ratio_method === "DATASET" ? "按数据集配比" : "按标签配比"),
     icon: ,
     iconColor: task.ratio_method === "DATASET" ? "bg-blue-100" : "bg-green-100",
     statistics: [
@@ -72,16 +73,16 @@ export function mapRatioTask(task: Partial): RatioTaskItem {
         value: task.created_at || "-",
       },
     ],
-    type: "balance",
-    progress: 100,
-    sourceDatasets: ["sentiment_dataset", "news_classification"],
-    targetRatio: { 正面: 33, 负面: 33, 中性: 34 },
-    currentRatio: { 正面: 33, 负面: 33, 中性: 34 },
-    totalRecords: 15000,
-    processedRecords: 15000,
-    estimatedTime: "已完成",
-    quality: 95,
-    strategy: "随机下采样",
-    outputPath: "/data/balanced/sentiment_balanced_20250120",
+    type: task.ratio_method === "DATASET" ? "数据集配比" : "标签配比",
+    // progress: 100,
+    // sourceDatasets: ["sentiment_dataset", "news_classification"],
+    // targetRatio: { 正面: 33, 负面: 33, 中性: 34 },
+    // currentRatio: { 正面: 33, 负面: 33, 中性: 34 },
+    // totalRecords: 15000,
+    // processedRecords: 15000,
+    // estimatedTime: "已完成",
+    // quality: 95,
+    // strategy: "随机下采样",
+    // outputPath: "/data/balanced/sentiment_balanced_20250120",
   };
 }
diff --git a/frontend/src/pages/SettingsPage/SettingsPage.tsx b/frontend/src/pages/SettingsPage/SettingsPage.tsx
index e2012c1..aac949d 100644
--- a/frontend/src/pages/SettingsPage/SettingsPage.tsx
+++ b/frontend/src/pages/SettingsPage/SettingsPage.tsx
@@ -22,21 +22,21 @@ export default function SettingsPage() {
           ,
-                label: "系统设置",
-              },
               {
                 key: "model-access",
                 icon: ,
                 label: "模型接入",
               },
-              {
-                key: "webhook-config",
-                icon: ,
-                label: "Webhook",
-              },
+              // {
+              //   key: "system-config",
+              //   icon: ,
+              //   label: "参数配置",
+              // },
+              // {
+              //   key: "webhook-config",
+              //   icon: ,
+              //   label: "Webhook",
+              // },
             ]}
             selectedKeys={[activeTab]}
             onClick={({ key }) => {
diff --git a/frontend/src/routes/routes.ts b/frontend/src/routes/routes.ts
index 38d662b..9a7d02d 100644
--- a/frontend/src/routes/routes.ts
+++ b/frontend/src/routes/routes.ts
@@ -39,8 +39,8 @@ import OrchestrationPage from "@/pages/Orchestration/Orchestration";
 import WorkflowEditor from "@/pages/Orchestration/WorkflowEditor";
 import { withErrorBoundary } from "@/components/ErrorBoundary";
 import AgentPage from "@/pages/Agent/Agent.tsx";
-import CleansingTemplateDetail from "@/pages/DataCleansing/Detail/TemplateDetail.tsx";
 import RatioTaskDetail from "@/pages/RatioTask/Detail/RatioTaskDetail";
+import CleansingTemplateDetail from "@/pages/DataCleansing/Detail/TemplateDetail";
 
 const router = createBrowserRouter([
   {