83e9d3eef8
1. Tab 結構規格書: 每個新頁面的 Tab 配置、區塊佈局、元件複用方式 2. 路由對照表: 26 個舊 URL → 新位置的精確映射 + redirect 實作方式 3. 元件抽取計畫: 17 個頁面抽取為 Panel 元件的步驟和目錄結構 4. API 變更規格: DashboardResponse +3 欄位 + SSE +1 事件 (不新增 API) Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
151 lines
6.8 KiB
Markdown
151 lines
6.8 KiB
Markdown
# Sprint 5 — Tab 結構規格書
|
|
|
|
> 每個新頁面的 Tab 配置、來源元件、資料源、互動行為
|
|
|
|
---
|
|
|
|
## 🏠 AI 指令中心 (`/`)
|
|
|
|
| Tab ID | 名稱 | i18n Key | Icon | Badge | 內容來源 |
|
|
|--------|------|---------|------|-------|---------|
|
|
| `overview` | 戰情總覽 | `tabs.overview` | LayoutDashboard | — | 現有首頁 + **新拓撲圖** |
|
|
| `alerts` | 告警 & 授權 | `tabs.alerts` | Bell | `alertsCount` | `/alerts` + `/authorizations` |
|
|
| `stream` | 活動串流 | `tabs.stream` | Activity | — | SSE + ActionTimeline |
|
|
| `disposition` | 處置統計 | `tabs.disposition` | BarChart3 | — | `/reports` (Sprint 4) |
|
|
|
|
### Tab 1: 戰情總覽 — 區塊配置
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────┐
|
|
│ [MetricsStrip] 7 指標橫排 (現有，不動) │
|
|
├───────────────────────────┬─────────────────────┤
|
|
│ │ OpenClaw Panel │
|
|
│ ServiceTopology │ (現有，不動) │
|
|
│ (React Flow 收合模式) │ │
|
|
│ 4 群組 + 依賴邊線 │ Toggle: 拓撲/主機 │
|
|
│ │ [拓撲圖] [主機網格] │
|
|
├───────────────────────────┤ │
|
|
│ IncidentCard Feed │ │
|
|
│ (現有，不動，最新 3 筆) │ │
|
|
└───────────────────────────┴─────────────────────┘
|
|
```
|
|
|
|
**元件複用**:
|
|
- `MetricsStrip`: 現有首頁 L446-525 → 原地保留
|
|
- `IncidentCard`: 現有 `components/incident/incident-card.tsx` → 原地保留
|
|
- `OpenClawPanel`: 現有 `components/ai/openclaw-panel.tsx` → 原地保留
|
|
- `ServiceTopology`: **新建** `components/topology/ServiceTopology.tsx`
|
|
- `HostGrid`: 現有 `components/infra/host-grid.tsx` → Toggle 切換顯示
|
|
|
|
**Toggle 行為**: 「拓撲圖 / 主機網格」切換按鈕
|
|
- 預設: 拓撲圖
|
|
- 切換: 隱藏拓撲，顯示現有 HostGrid (4主機卡片)
|
|
- 記住選擇: localStorage
|
|
|
|
### Tab 2: 告警 & 授權 — 區塊配置
|
|
|
|
```
|
|
┌──────────────────────┬──────────────────────────┐
|
|
│ AlertsPanel │ LiveApprovalPanel │
|
|
│ (從 /alerts 抽取) │ (現有元件) │
|
|
│ │ │
|
|
│ · 嚴重度篩選 │ · 待批准列表 │
|
|
│ · 告警列表 │ · SSH URI + 風險等級 │
|
|
│ · 時間排序 │ · 批准/拒絕按鈕 │
|
|
│ │ · 執行歷史 │
|
|
└──────────────────────┴──────────────────────────┘
|
|
```
|
|
|
|
**元件複用**:
|
|
- `AlertsPanel`: 從 `/alerts/page.tsx` (183行) 抽取核心內容
|
|
- `LiveApprovalPanel`: 現有 `components/approval/live-approval-panel.tsx` (484行)
|
|
|
|
### Tab 3: 活動串流 — 區塊配置
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────┐
|
|
│ 篩選: [全部] [告警] [AI] [修復] [心跳] │
|
|
├─────────────────────────────────────────────────┤
|
|
│ 18:05 ● 心跳確認 mon/mon1 Ready │
|
|
│ 18:04 ● OpenClaw 匹配 Playbook (91%) │
|
|
│ 18:03 ● OpenClaw 啟動 RCA │
|
|
│ 18:02 ● Prometheus 警報: Worker CPU 89% │
|
|
│ 17:58 ● 自動修復完成 restart: api (12s) │
|
|
│ ... │
|
|
└─────────────────────────────────────────────────┘
|
|
```
|
|
|
|
**資料源**: SSE `/api/v1/dashboard/stream` (現有)
|
|
**元件複用**: `ActionTimeline` (`components/timeline/action-timeline.tsx`, 245行)
|
|
|
|
### Tab 4: 處置統計 — 區塊配置
|
|
|
|
直接嵌入 `/reports/page.tsx` 的完整內容:
|
|
- KPI 3 卡 (處置總數/自動化率/人工介入率)
|
|
- 四大計數卡 (自動/人工/手動/冷啟動)
|
|
- 堆疊分佈條
|
|
- 按異常類型明細表
|
|
- 事件摘要 + 解決率
|
|
|
|
**元件複用**: 從 `/reports/page.tsx` (317行) 抽取為 `DispositionPanel`
|
|
|
|
---
|
|
|
|
## 📊 可觀測性 (`/observability`)
|
|
|
|
| Tab ID | 名稱 | i18n Key | 內容來源 | 行數 |
|
|
|--------|------|---------|---------|------|
|
|
| `monitoring` | 服務監控 | `obs.monitoring` | `/monitoring/page.tsx` | 269 |
|
|
| `apm` | APM | `obs.apm` | `/apm/page.tsx` | 128 |
|
|
| `errors` | 錯誤追蹤 | `obs.errors` | `/errors/page.tsx` | 164 |
|
|
| `apps` | 應用 | `obs.apps` | `/apps/page.tsx` | 103 |
|
|
| `services` | 服務目錄 | `obs.services` | `/services/page.tsx` | 120 |
|
|
|
|
---
|
|
|
|
## 🔧 自動化 (`/automation`)
|
|
|
|
| Tab ID | 名稱 | i18n Key | 內容來源 | 行數 |
|
|
|--------|------|---------|---------|------|
|
|
| `repair` | 自動修復 | `auto.repair` | `/auto-repair/page.tsx` | 460 |
|
|
| `neural` | 神經指揮 | `auto.neural` | `/neural-command/page.tsx` + 4元件 | 1241 |
|
|
| `drift` | Drift 偵測 | `auto.drift` | `/drift/page.tsx` | 324 |
|
|
|
|
---
|
|
|
|
## 📦 營運 (`/operations`)
|
|
|
|
| Tab ID | 名稱 | i18n Key | 內容來源 | 行數 |
|
|
|--------|------|---------|---------|------|
|
|
| `deployments` | 部署管理 | `ops.deployments` | `/deployments/page.tsx` | 113 |
|
|
| `tickets` | 工單 | `ops.tickets` | `/tickets/page.tsx` | 120 |
|
|
| `cost` | 成本分析 | `ops.cost` | `/cost/page.tsx` | 95 |
|
|
| `logs` | 行動日誌 | `ops.logs` | `/action-logs/page.tsx` | 551 |
|
|
| `billing` | 計費 | `ops.billing` | `/billing/page.tsx` | 113 |
|
|
|
|
---
|
|
|
|
## 🛡️ 安全合規 (`/security-compliance`)
|
|
|
|
| Tab ID | 名稱 | i18n Key | 內容來源 | 行數 |
|
|
|--------|------|---------|---------|------|
|
|
| `security` | 安全掃描 | `sec.security` | `/security/page.tsx` | 137 |
|
|
| `compliance` | 合規報告 | `sec.compliance` | `/compliance/page.tsx` | 124 |
|
|
|
|
---
|
|
|
|
## 📚 知識 (`/knowledge`)
|
|
|
|
單頁，無 Tab。內容 = `/knowledge-base/page.tsx` (532行)
|
|
|
|
---
|
|
|
|
## ⚙️ 設定 (`/settings`)
|
|
|
|
| Tab ID | 名稱 | i18n Key | 內容來源 | 行數 |
|
|
|--------|------|---------|---------|------|
|
|
| `general` | 一般設定 | `settings.general` | `/settings/page.tsx` | 245 |
|
|
| `users` | 用戶管理 | `settings.users` | `/users/page.tsx` | 136 |
|
|
| `notifications` | 通知 | `settings.notifications` | `/notifications/page.tsx` | 97 |
|
|
| `help` | 幫助 | `settings.help` | `/help/page.tsx` | 57 |
|