chore:系统管理拆分

2026-08-05 15:13:34 +08:00
parent d851f98581
commit 8c4d2c0517
6 changed files with 923 additions and 915 deletions
@@ -0,0 +1,83 @@
+import Icon from "../../components/common/Icon";
+import { useAuth } from "../../context/AuthContext";
+
+export function DashboardPage({
+  scriptCount,
+  online,
+  onNavigate,
+}: {
+  scriptCount: number;
+  online: boolean;
+  onNavigate: (page: "scripts" | "schedules" | "system") => void;
+}) {
+  const { user, currentWorkspace } = useAuth();
+  return (
+    <section className="dashboard-page">
+      <div className="dashboard-hero">
+        <div>
+          <span>MODEL DEVELOPMENT PLATFORM</span>
+          <h2>下午好，{user?.display_name ?? "用户"}</h2>
+          <p>
+            当前位于 {currentWorkspace?.workspace_name ?? "（未选择 Workspace）"}
+            ，可以继续构建脚本或配置调度。
+          </p>
+        </div>
+        <span className="dashboard-hero__badge">{online ? "服务正常" : "服务连接中"}</span>
+      </div>
+      <div className="dashboard-metrics">
+        <article><Icon name="script" /><span><b>{scriptCount}</b><small>工作副本</small></span></article>
+        <article><Icon name="workspace" /><span><b>2</b><small>Workspace</small></span></article>
+        <article><Icon name="settings" /><span><b>4</b><small>平台用户</small></span></article>
+        <article><Icon name="check" /><span><b>{online ? "正常" : "检查中"}</b><small>平台状态</small></span></article>
+      </div>
+      <div className="dashboard-actions">
+        <button type="button" onClick={() => onNavigate("scripts")}><Icon name="script" />构建脚本</button>
+        <button type="button" onClick={() => onNavigate("schedules")}><Icon name="schedule" />调度配置</button>
+        <button type="button" onClick={() => onNavigate("system")}><Icon name="settings" />系统管理</button>
+      </div>
+      <div className="dashboard-grid">
+        <section className="dashboard-panel dashboard-panel--trend">
+          <header><div><span>运行趋势</span><h3>近 7 天调度执行</h3></div><b>成功率 92.6%</b></header>
+          <div className="trend-chart">
+            {[38, 55, 44, 73, 61, 86, 78].map((value, index) => (
+              <div className="trend-column" key={index}>
+                <span className="trend-column__value">{Math.round(value / 7)}</span>
+                <i style={{ height: `${value}%` }} />
+                <small>{["周一", "周二", "周三", "周四", "周五", "周六", "今天"][index]}</small>
+              </div>
+            ))}
+          </div>
+          <footer><span><i className="legend-dot is-success" />成功 75</span><span><i className="legend-dot is-failed" />失败 6</span></footer>
+        </section>
+        <section className="dashboard-panel dashboard-panel--donut">
+          <header><div><span>脚本资产</span><h3>类型分布</h3></div></header>
+          <div className="donut-layout">
+            <div className="donut-chart"><span><b>{scriptCount}</b><small>全部脚本</small></span></div>
+            <div className="donut-legend">
+              <span><i className="legend-dot is-notebook" /><b>Notebook</b><small>{Math.max(1, Math.round(scriptCount * .67))} 个 · 67%</small></span>
+              <span><i className="legend-dot is-python" /><b>Python</b><small>{Math.max(0, scriptCount - Math.round(scriptCount * .67))} 个 · 33%</small></span>
+              <span><i className="legend-dot is-version" /><b>稳定版本</b><small>3 个已发布</small></span>
+            </div>
+          </div>
+        </section>
+        <section className="dashboard-panel dashboard-panel--activity">
+          <header><div><span>ACTIVITY</span><h3>最近平台活动</h3></div><button type="button">查看全部</button></header>
+          <div className="activity-table">
+            <div className="activity-table__head"><span>操作内容</span><span>执行人</span><span>状态</span><span>时间</span></div>
+            {[
+              ["数据探索.ipynb 发布稳定版本 v3.0", "张三", "成功", "16:42"],
+              ["每日模型训练流程完成调度运行", "Scheduler", "成功", "15:25"],
+              ["批量预测.py 更新工作副本", "王五", "已同步", "14:18"],
+              ["风险验证流程完成 DAG 校验", "李四", "成功", "11:06"],
+            ].map((row) => (
+              <div className="activity-row" key={row[0]}>
+                <span><i className="activity-icon"><Icon name="check" size={13} /></i>{row[0]}</span>
+                <span>{row[1]}</span><span><b>{row[2]}</b></span><span>{row[3]}</span>
+              </div>
+            ))}
+          </div>
+        </section>
+      </div>
+    </section>
+  );
+}