From 45a295dcbcc3f0ae45c6342885e5aac4b8f91af4 Mon Sep 17 00:00:00 2001 From: =?utf8?q?wang=2Eyu=28=E7=8E=8B=E7=91=9C=29?= Date: Mon, 24 Aug 2026 11:41:20 +0800 Subject: [PATCH] =?utf8?q?=E6=96=B0=E5=A2=9E=20AIDC=20=E4=B8=93=E9=A2=98?= =?utf8?q?=E7=BB=84=EF=BC=888=20=E9=A1=B5=E6=A8=A1=E6=8B=9F=E6=95=B0?= =?utf8?q?=E6=8D=AE=EF=BC=8C=E7=8B=AC=E7=AB=8B=E4=BA=8E=E7=9C=9F=E5=AE=9E?= =?utf8?q?=E5=9C=BA=E7=AB=99=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit - 新建 Aidc.tsx：8 个 AIDC 页面（chain/quality/patrol/redundancy/ liquid/synergy/security/simulation）全部使用原型模拟数据，不接真实 MU/AIDC/iStation 接口；含数据中心图标(AidcIcon)、菜单项(aidcModules)、 主容器(AidcPanel) 与 .aidc-root 作用域 CSS - 修改 App.tsx：左侧"场站运营"段内、原场站项之上插入 AIDC 子分组； active 状态类型扩展为 SkillKey|AidcKey，aidc- 前缀路由到 AidcPanel - 通过 tsc 类型检查与 vite 生产构建验证 --- frontend/src/Aidc.tsx | 1032 +++++++++++++++++++++++++++++++++++++++++ frontend/src/App.tsx | 10 +- 2 files changed, 1040 insertions(+), 2 deletions(-) create mode 100644 frontend/src/Aidc.tsx diff --git a/frontend/src/Aidc.tsx b/frontend/src/Aidc.tsx new file mode 100644 index 0000000..6fdae9d --- /dev/null +++ b/frontend/src/Aidc.tsx @@ -0,0 +1,1032 @@ +import { useState, type CSSProperties } from "react"; + +/* ============================================================ + * AIDC 专题（StationAIDemo） + * 一组全新功能页面，使用设计原型中的模拟数据，不连接真实场站。 + * 样式作用域限定在 .aidc-root，沿用原型的设计语言。 + * ============================================================ */ + +export type AidcKey = + | "aidc-chain" + | "aidc-quality" + | "aidc-patrol" + | "aidc-redundancy" + | "aidc-liquid" + | "aidc-synergy" + | "aidc-security" + | "aidc-simulation"; + +export const aidcModules: { key: AidcKey; name: string; sub: string; mark: string }[] = [ + { key: "aidc-chain", name: "关键链路态势", sub: "连续性总览", mark: "链" }, + { key: "aidc-quality", name: "数据可信度中心", sub: "AI 数据底座", mark: "数" }, + { key: "aidc-patrol", name: "智能巡检与交接班", sub: "少人值守", mark: "巡" }, + { key: "aidc-redundancy", name: "冗余与连续性保障", sub: "N+1 / 2N", mark: "冗" }, + { key: "aidc-liquid", name: "液冷安全运营", sub: "CDU 与液冷区域", mark: "液" }, + { key: "aidc-synergy", name: "电冷算协同", sub: "GPU 负荷联动", mark: "协" }, + { key: "aidc-security", name: "多模态安全", sub: "环境与视频联动", mark: "安" }, + { key: "aidc-simulation", name: "扩容与故障仿真", sub: "What-if 决策", mark: "仿" }, +]; + +/* 数字机房 / 数据中心图标：机柜 + 服务器槽位 + 算力节点 */ +export function AidcIcon({ style }: { style?: CSSProperties }) { + return ( + + + + + + + + + + ); +} + +/* ---------- 模拟数据（来自设计原型，不连接真实场站） ---------- */ +const stations = { + core: { name: "Demo ORG · 智算中心一期", cabinets: 96, itLoad: 5.42, trust: 97.8, pue: 1.24, alerts: 2, factor: 1 }, + edge: { name: "东区边缘算力舱", cabinets: 18, itLoad: 0.71, trust: 99.1, pue: 1.19, alerts: 0, factor: 0.32 }, + liquid: { name: "高密液冷实验站", cabinets: 36, itLoad: 2.18, trust: 95.6, pue: 1.16, alerts: 3, factor: 0.58 }, +} as const; +type StationKey = keyof typeof stations; + +const fmt = (n: number, d = 1) => Number(n).toFixed(d); + +/* ---------- 通用小组件 ---------- */ +const Badge = ({ text, kind }: { text: string; kind?: string }) => ( + {text} +); + +const Metric = ({ label, value, note, cls }: { label: string; value: string; note: string; cls?: string }) => { + const tone = cls?.includes("warn") ? "warn" : cls?.includes("bad") ? "bad" : cls?.includes("good") ? "good" : ""; + return ( +
+
{label}
+
{value}
+
{note}
+
+ ); +}; + +const EventRow = ({ time, title, sub }: { time: string; title: string; sub: string }) => ( +
+ {time} + +
+ {title} +
{sub}
+
+
+); + +const AiInsight = ({ summary, points, prompt }: { summary: string; points: string[]; prompt: string }) => { + const [open, setOpen] = useState(false); + const [regen, setRegen] = useState(false); + return ( +
+
+ ✦ + AI Insight · 场站级结论 + {Badge({ text: "可追溯" } as any)} +
+

{summary}

+ +
+ + +
+ {open && ( +
+