diff --git a/docs/superpowers/specs/2026-04-01-ai-center-redesign-design.md b/docs/superpowers/specs/2026-04-01-ai-center-redesign-design.md new file mode 100644 index 000000000..8a36d4297 --- /dev/null +++ b/docs/superpowers/specs/2026-04-01-ai-center-redesign-design.md @@ -0,0 +1,207 @@ +# AI中心 UI 重設計規格 + +> **日期**: 2026-04-01 +> **版本**: v6(統帥批准) +> **Mockup**: `.superpowers/brainstorm/31359-1775037143/content/final-v6.html` +> **範疇**: `apps/web/src/` — 頁面佈局、元件重構、設計系統色彩更新 + +--- + +## 一、目標 + +將現有「戰情中心」頁面(`/` 儀表板)重設計為「AI中心」,融合 Anthropic Warmth 米色系與 OpenClaw 藍色設計語言,提升 AI 操作性、資訊密度與視覺一致性。**不是 Dashboard**,是 AI 指揮操作介面。 + +--- + +## 二、命名正名 + +- 所有 `戰情中心` → **AI中心** +- i18n key: `dashboard.title` → 更新為 `AI中心` / `AI Center` +- Route 不變 (`/`) + +--- + +## 三、色彩系統(Anthropic Warmth + OpenClaw Blue) + +| 用途 | 色碼 | CSS 變數 | +|------|------|---------| +| 頁面底色 | `#f5f4ed` | `--bg-base` | +| 表面(Header / Sidebar / Panel) | `#faf9f3` | `--bg-surface` | +| 事件列背景 | `#f0efe8` | `--bg-feed` | +| 邊框 | `#e0ddd4` | `--border` | +| 主文字 | `#141413` | `--text-primary` | +| 次要文字 | `#87867f` | `--text-secondary` | +| 標籤文字 | `#b0ad9f` | `--text-muted` | +| **Accent 橘紅** | `#d97757` | `--accent` (active/hover/badge) | +| **OpenClaw 藍** | `#4A90D9` | `--claw-blue` (NemoClaw/orbit) | +| Logo 背景 | `#0d1117` | — | +| 成功 | `#22C55E` | `--status-ok` | +| 警告 | `#F59E0B` | `--status-warn` | +| 緊急 | `#cc2200` | `--status-critical` | + +--- + +## 四、佈局結構 + +``` +┌─────────────────────────────────────────────────────────┐ +│ 天 Header (52px): Logo | P0 Banner | 狀態 pills | 時間 │ +├─────────────────────────────────────────────────────────┤ +│ Metrics Strip (50px): 6 個即時指標 │ +├──────────┬──────────────────────┬───────────────────────┤ +│ Sidebar │ 活躍事件 Feed │ AI Panel + Infra │ +│ (200px) │ (flex: 1) │ (flex: 1) │ +│ 固定寬度 │ 可捲動 │ 可捲動 │ +├──────────┴──────────────────────┴───────────────────────┤ +│ 地 Footer (28px): 版本 | build | 同步時間 | 服務狀態 │ +└─────────────────────────────────────────────────────────┘ +``` + +--- + +## 五、Sidebar(200px) + +四分區 + 底部系統,全部可捲動,**不含**服務狀態: + +| 分區 | 項目 | +|------|------| +| AI 核心 | AI中心(active) / 授權中心(badge) / 告警中心 | +| 監控與安全 | 監控中心 / APM / 錯誤追蹤 / 服務拓樸 / 安全中心 / 合規中心 | +| 運維管理 | 自動修復 / 部署管理 / 工單管理 / 成本優化 / 行動日誌 / 報告管理 | +| 知識與工具 | 知識殿堂 / Omni Terminal / 應用管理 / 服務管理 | +| 底部 | 使用者管理 / 通知設定 / 計費管理 / 說明中心 / 系統設定 | + +Active 樣式:`border-right: 2px solid #d97757`,背景 `rgba(217,119,87,0.08)` + +--- + +## 六、活躍事件 Feed(flex: 1) + +每張 `IncidentCard` 包含: + +### 6.1 卡片結構 +``` +[彩色頂邊條 3px] ← P0=紅 / P2=橙 / P3=藍 / OK=綠 +[嚴重度膠囊] [服務標籤] [時間] +[事件標題] +[INC-ID · 持續時間] +[流程狀態圖] ← 核心新功能 +[Impact 指標列] +[AI 提案行] ← 可展開 +[授權按鈕] ← 僅 waiting_approval 狀態顯示 +``` + +### 6.2 流程狀態圖(每卡片必有) + +水平 7 節點管線:**告警 → AI偵測 → AI分析 → 提案生成 → 等待授權 → 執行 → 完成** + +- 節點狀態:`done`(橘紅填滿)/ `active`(黑色 + 橘紅光暈)/ `pending`(灰空心)/ `resolved`(綠色) +- Q版龍蝦(`18×20` inline SVG,**本色橘紅 `#E85530`**)停在 `active` 節點上方 + - `lobster-bob` CSS 動畫:上下浮動 4px,1.5s loop + - 已完成事件:改用綠色龍蝦,靜止無動畫 +- Hover 節點:顯示 tooltip(事件時間、信號描述、執行結果) +- 連接線:done = `rgba(232,85,48,0.5)` / pending = `#e0ddd4` + +### 6.3 圓角規範 + +| 元件 | `border-radius` | +|------|----------------| +| `.inc` 卡片 | `8px` | +| `.sev` 嚴重度標籤 | `10px` | +| `.svc-tag` 服務標籤 | `10px` | +| `.impact` / `.ai-row` / `.analyzing` | `6px` | +| `.btn-ok` / `.btn-no` | `20px`(膠囊) | + +--- + +## 七、右側面板(flex: 1) + +三段垂直排列,可捲動: + +### 7.1 NemoClaw 動畫區(截圖風格) + +`72×72` SVG,放在 `claw-stage` 左側: +- **白底圓形**(`white` fill + `#c8dcf5` 邊框) +- **中央漸層藍球**(`#7AB8F5` → `#2B6CB0`),`orb-pulse` 脈動,白色高光 +- **4 主臂**(solid `#4A90D9`,opacity 0.7) + **4 斜臂**(細,opacity 0.35) +- **端點節點**:白底 + `#4A90D9` 邊框圓形(主臂 r=3,斜臂 r=2) +- **虛線軌道環**:`ring-spin` 12s,opacity 0.5 +- ❌ 禁止用 `openclaw-panel.tsx` 的龍蝦臂 SVG + +NemoClaw 右側:名稱 + 分析描述 + OpenClaw Pipeline 膠囊 + +### 7.2 思考流(Reasoning Stream) + +最多 8 條,顯示 `✓ done` / `▶ in_progress` / `○ waiting`,帶時間戳,橘紅 `▶` + +### 7.3 基礎架構(2×2 Grid) + +4 主機緊湊網格(非獨立中間欄): +- 每格:hostname + IP + CPU/RAM + 3 條關鍵服務 mini 列 +- 圓角 `8px`,hover 橘紅邊框 +- 異常指標用警示色 + +### 7.4 修復提案(Approvals) + +AI 生成提案,需人工長按授權(進度條動畫 `#d97757` 填充) + +--- + +## 八、Header + Footer + +**天 Header**: +- 左:NemoClaw Logo(`140×140` viewBox 縮至 `34×34`,深色底,白瓷臂) + `AWOOOI` 文字 + `AI中心 · AI OPERATIONS` +- 中:P0 緊急 Banner(橘紅邊框) +- 右:異常/健康/分析中 Pills + UTC+8 時間 + +**地 Footer**: +- 左:版本 + build hash + 同步時間 + 模型名稱 +- 右:關鍵服務狀態 + UTC+8 + +--- + +## 九、動畫清單 + +| 動畫 | 用途 | +|------|------| +| `orb-pulse` | NemoClaw 中央球脈動 | +| `ring-spin` | 軌道環旋轉 | +| `dash-flow` | 虛線流動(舊版保留) | +| `node-glow` | Logo drop-shadow 閃爍 | +| `lobster-bob` | Q版龍蝦上下浮動 4px | +| `blink` | 緊急狀態指示燈 | +| `spin` | 載入 spinner | + +--- + +## 十、實作範疇 + +### 需要修改的檔案 + +| 檔案 | 修改內容 | +|------|---------| +| `apps/web/src/app/[locale]/page.tsx` | 主頁佈局重構 | +| `apps/web/src/components/layout/sidebar.tsx` | 新增菜單項、移除服務狀態、套用新色彩 | +| `apps/web/src/components/layout/header.tsx` | 更新 Logo + 色彩 | +| `apps/web/src/components/incident/incident-card.tsx` | 加入流程圖 + Q版龍蝦 | +| `apps/web/src/components/ai/openclaw-panel.tsx` | NemoClaw 動畫換為截圖風格 | +| `apps/web/src/messages/zh-TW.json` | `戰情中心` → `AI中心` | +| `apps/web/src/messages/en.json` | `Command Center` → `AI Center` | +| `apps/web/tailwind.config.ts` | 新增色彩 token | + +### 新增元件 + +| 元件 | 功能 | +|------|------| +| `components/incident/flow-pipeline.tsx` | 7節點流程圖 + Q版龍蝦 | +| `components/ai/nemo-node-animation.tsx` | NemoClaw 白底節點動畫 SVG | +| `components/infra/host-grid.tsx` | 2×2 主機緊湊 grid | + +--- + +## 十一、不在範疇 + +- 後端 API 無需修改 +- 不改動 Zustand store 結構 +- 不改動其他頁面(授權中心、錯誤追蹤等) +- 不引入新的動畫庫(純 CSS keyframes)