docs: AI中心 UI 重設計規格文件 v6

- Anthropic Warmth (#f5f4ed) + OpenClaw Blue (#4A90D9) 色彩系統 - 3欄佈局：Sidebar(200px) | Feed(50%) | RightPanel(50%) - 完整側邊欄：4區19項（整合 wooo-aiops 所有菜單） - 事件卡片流程圖 + Q版龍蝦 (橘紅本色 #E85530) - NemoClaw 白底節點動畫（截圖風格） - 全面圓角規範 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-01 19:19:03 +08:00
parent a9d8fd9c3c
commit 4b84e95723
1 changed files with 207 additions and 0 deletions
--- a/docs/superpowers/specs/2026-04-01-ai-center-redesign-design.md
+++ 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）