# 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`（膠囊） |
| `.crit-banner` P0 緊急 Banner | `10px` |
| `.h-pill` 狀態 Pills | `10px` |

---

## 七、右側面板（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/incident/dual-state-incident-card.tsx` | **廢棄刪除**（授權邏輯移植後） |
| `apps/web/src/components/ai/openclaw-panel.tsx` | NemoClaw 動畫換為截圖風格 |
| `apps/web/messages/zh-TW.json` | `戰情中心` → `AI中心` |
| `apps/web/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）
