From 442e561817b7d30384404562bed970dc5973b61c Mon Sep 17 00:00:00 2001 From: chenghh-9609 <55340429+chenghh-9609@users.noreply.github.com> Date: Wed, 12 Nov 2025 17:23:24 +0800 Subject: [PATCH] change settings page and add ratio task detail page (#77) * 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 --- frontend/src/components/CardView.tsx | 4 +- frontend/src/mock/mock-apis.cjs | 11 + .../src/mock/mock-seed/data-cleansing.cjs | 1 - frontend/src/mock/mock-seed/data-ratio.cjs | 220 ++++++++++++ frontend/src/pages/Layout/Sidebar.tsx | 26 +- .../Create/components/ConfigureStep.tsx | 76 +++-- .../RatioTask/Detail/RatioTaskDetail.tsx | 312 ++++++++++++++++++ .../src/pages/RatioTask/Home/RatioTask.tsx | 41 ++- frontend/src/pages/RatioTask/ratio.const.tsx | 27 +- .../src/pages/SettingsPage/SettingsPage.tsx | 92 +++--- frontend/src/routes/routes.ts | 10 +- 11 files changed, 707 insertions(+), 113 deletions(-) create mode 100644 frontend/src/mock/mock-seed/data-ratio.cjs create mode 100644 frontend/src/pages/RatioTask/Detail/RatioTaskDetail.tsx diff --git a/frontend/src/components/CardView.tsx b/frontend/src/components/CardView.tsx index f1ab701..04301cb 100644 --- a/frontend/src/components/CardView.tsx +++ b/frontend/src/components/CardView.tsx @@ -209,7 +209,9 @@ function CardView(props: CardViewProps) { {item?.status && (
- {item?.status?.icon} + {item?.status?.icon && ( + {item?.status?.icon} + )} {item?.status?.label}
diff --git a/frontend/src/mock/mock-apis.cjs b/frontend/src/mock/mock-apis.cjs index a41fdb9..c219608 100644 --- a/frontend/src/mock/mock-apis.cjs +++ b/frontend/src/mock/mock-apis.cjs @@ -92,6 +92,17 @@ const MockAPI = { deleteInstructionTemplateByIdUsingDelete: "/synthesis/templates/:templateId", // 删除指令模板 instructionTuningUsingPost: "/synthesis/instruction-tuning", // 指令微调 cotDistillationUsingPost: "/synthesis/cot-distillation", // Cot蒸馏 + + // 数据配比接口 + createRatioTaskUsingPost: "/synthesis/ratio-task", // 创建配比任务 + queryRatioTasksUsingGet: "/synthesis/ratio-task", // 获取配比任务列表 + queryRatioTaskByIdUsingGet: "/synthesis/ratio-task/:taskId", // 根据ID获取配比任务详情 + deleteRatioTaskByIdUsingDelete: "/synthesis/ratio-task/:taskId", // 删除配比任务 + updateRatioTaskByIdUsingPut: "/synthesis/ratio-task/:taskId", // 更新配比任务 + executeRatioTaskByIdUsingPost: "/synthesis/ratio-task/:taskId/execute", // 执行配比任务 + stopRatioTaskByIdUsingPost: "/synthesis/ratio-task/:taskId/stop", // 停止配比任务 + queryRatioJobStatusUsingGet: "/synthesis/ratio-task/:taskId/status", // 获取配比任务状态 + queryRatioModelsUsingGet: "/synthesis/ratio-models", // 获取配比模型列表 // 数据评测接口 queryEvaluationTasksUsingPost: "/evaluation/tasks", // 获取评测任务列表 diff --git a/frontend/src/mock/mock-seed/data-cleansing.cjs b/frontend/src/mock/mock-seed/data-cleansing.cjs index 74d5c83..6a17849 100644 --- a/frontend/src/mock/mock-seed/data-cleansing.cjs +++ b/frontend/src/mock/mock-seed/data-cleansing.cjs @@ -443,7 +443,6 @@ module.exports = function (router) { const { id } = req.params; const operator = operatorList.find((op) => op.id === id); console.log("获取算子详情：", id, operator); - if (operator) { // 增加浏览次数模拟 operator.viewCount = (operator.viewCount || 0) + 1; diff --git a/frontend/src/mock/mock-seed/data-ratio.cjs b/frontend/src/mock/mock-seed/data-ratio.cjs new file mode 100644 index 0000000..9ca4b3a --- /dev/null +++ b/frontend/src/mock/mock-seed/data-ratio.cjs @@ -0,0 +1,220 @@ + +const Mock = require("mockjs"); +const API = require("../mock-apis.cjs"); + +function ratioJobItem() { + return { + id: Mock.Random.guid().replace(/[^a-zA-Z0-9]/g, ""), + name: Mock.Random.ctitle(5, 15), + description: Mock.Random.csentence(10, 30), + status: Mock.Random.pick(["PENDING", "RUNNING", "COMPLETED", "FAILED", "PAUSED"]), + totals: Mock.Random.integer(1000, 10000), + ratio_method: Mock.Random.pick(["DATASET", "TAG"]), + target_dataset_id: Mock.Random.guid().replace(/[^a-zA-Z0-9]/g, ""), + target_dataset_name: Mock.Random.ctitle(3, 8), + config: [ + { + datasetId: Mock.Random.guid().replace(/[^a-zA-Z0-9]/g, ""), + counts: Mock.Random.integer(100, 1000).toString(), + filter_conditions: "", + }, + { + datasetId: Mock.Random.guid().replace(/[^a-zA-Z0-9]/g, ""), + counts: Mock.Random.integer(100, 1000).toString(), + filter_conditions: "", + }, + ], + created_at: Mock.Random.datetime("yyyy-MM-dd HH:mm:ss"), + updated_at: Mock.Random.datetime("yyyy-MM-dd HH:mm:ss"), + }; +} + +const ratioJobList = new Array(20).fill(null).map(ratioJobItem); + + +module.exports = function (router) { + // 获取配比任务列表 + router.get(API.queryRatioTasksUsingGet, (req, res) => { + const { page = 0, size = 10, status } = req.query; + let filteredJobs = ratioJobList; + if (status) { + filteredJobs = ratioJobList.filter((job) => job.status === status); + } + const startIndex = page * size; + const endIndex = startIndex + parseInt(size); + const pageData = filteredJobs.slice(startIndex, endIndex); + res.send({ + code: "0", + msg: "Success", + data: { + content: pageData, + totalElements: filteredJobs.length, + totalPages: Math.ceil(filteredJobs.length / size), + size: parseInt(size), + number: parseInt(page), + }, + }); + }); + + // 创建配比任务 + router.post(API.createRatioTaskUsingPost, (req, res) => { + const newJob = { + ...ratioJobItem(), + ...req.body, + id: Mock.Random.guid().replace(/[^a-zA-Z0-9]/g, ""), + status: "PENDING", + createdAt: new Date().toISOString(), + }; + ratioJobList.push(newJob); + res.status(201).send({ + code: "0", + msg: "Ratio job created successfully", + data: newJob, + }); + }); + + // 获取配比任务详情 + router.get(API.queryRatioTaskByIdUsingGet, (req, res) => { + const { taskId } = req.params; + const job = ratioJobList.find((j) => j.id === taskId); + if (job) { + res.send({ + code: "0", + msg: "Success", + data: job, + }); + } else { + res.status(404).send({ + code: "1", + msg: "Ratio job not found", + data: null, + }); + } + }); + + // 删除配比任务 + router.delete(API.deleteRatioTaskByIdUsingDelete, (req, res) => { + const { taskId } = req.params; + const index = ratioJobList.findIndex((j) => j.id === taskId); + if (index !== -1) { + ratioJobList.splice(index, 1); + res.send({ + code: "0", + msg: "Ratio job deleted successfully", + data: null, + }); + } else { + res.status(404).send({ + code: "1", + msg: "Ratio job not found", + data: null, + }); + } + }); + + // 更新配比任务 + router.put(API.updateRatioTaskByIdUsingPut, (req, res) => { + const { taskId } = req.params; + const index = ratioJobList.findIndex((j) => j.id === taskId); + if (index !== -1) { + ratioJobList[index] = { + ...ratioJobList[index], + ...req.body, + updatedAt: new Date().toISOString(), + }; + res.send({ + code: "0", + msg: "Ratio job updated successfully", + data: ratioJobList[index], + }); + } else { + res.status(404).send({ + code: "1", + msg: "Ratio job not found", + data: null, + }); + } + }); + + // 执行配比任务 + router.post(API.executeRatioTaskByIdUsingPost, (req, res) => { + const { taskId } = req.params; + const job = ratioJobList.find((j) => j.id === taskId); + if (job) { + job.status = "RUNNING"; + job.startedAt = new Date().toISOString(); + res.send({ + code: "0", + msg: "Ratio job execution started", + data: { + executionId: Mock.Random.guid().replace(/[^a-zA-Z0-9]/g, ""), + status: "RUNNING", + message: "Job execution started successfully", + }, + }); + } else { + res.status(404).send({ + code: "1", + msg: "Ratio job not found", + data: null, + }); + } + }); + + // 停止配比任务 + router.post(API.stopRatioTaskByIdUsingPost, (req, res) => { + const { taskId } = req.params; + const job = ratioJobList.find((j) => j.id === taskId); + if (job) { + job.status = "STOPPED"; + job.finishedAt = new Date().toISOString(); + res.send({ + code: "0", + msg: "Ratio job stopped successfully", + data: null, + }); + } else { + res.status(404).send({ + code: "1", + msg: "Ratio job not found", + data: null, + }); + } + }); + + // 获取配比任务状态 + router.get(API.queryRatioJobStatusUsingGet, (req, res) => { + const { taskId } = req.params; + const job = ratioJobList.find((j) => j.id === taskId); + if (job) { + res.send({ + code: "0", + msg: "Success", + data: { + status: job.status, + progress: job.progress, + }, + }); + } else { + res.status(404).send({ + code: "1", + msg: "Ratio job not found", + data: null, + }); + } + }); + + // 获取配比模型列表 + router.get(API.queryRatioModelsUsingGet, (req, res) => { + const models = [ + { id: "model1", name: "均匀分配模型", description: "将目标数量均匀分配到各数据集。" }, + { id: "model2", name: "标签优先模型", description: "优先满足标签配比需求。" }, + { id: "model3", name: "自定义模型", description: "支持自定义分配逻辑。" }, + ]; + res.send({ + code: "0", + msg: "Success", + data: models, + }); + }); +}; diff --git a/frontend/src/pages/Layout/Sidebar.tsx b/frontend/src/pages/Layout/Sidebar.tsx index 2c9c818..1c46ea7 100644 --- a/frontend/src/pages/Layout/Sidebar.tsx +++ b/frontend/src/pages/Layout/Sidebar.tsx @@ -1,5 +1,5 @@ import { memo, useEffect, useState } from "react"; -import { Button, Menu, Popover } from "antd"; +import { Button, Drawer, Menu, Popover } from "antd"; import { CloseOutlined, MenuOutlined, @@ -9,6 +9,7 @@ import { ClipboardList, Sparkles, X } from "lucide-react"; import { menuItems } from "@/pages/Layout/menu"; import { NavLink, useLocation, useNavigate } from "react-router"; import TaskUpload from "./TaskUpload"; +import SettingsPage from "../SettingsPage/SettingsPage"; const AsiderAndHeaderLayout = () => { const { pathname } = useLocation(); @@ -16,6 +17,7 @@ const AsiderAndHeaderLayout = () => { const [activeItem, setActiveItem] = useState(""); const [sidebarOpen, setSidebarOpen] = useState(true); const [taskCenterVisible, setTaskCenterVisible] = useState(false); + const [settingVisible, setSettingVisible] = useState(false); // Initialize active item based on current pathname const initActiveItem = () => { @@ -137,11 +139,8 @@ const AsiderAndHeaderLayout = () => {