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([
   {