Files

OG T 83e9d3eef8 docs(specs): Sprint 5 四份技術文檔 — Tab 規格/路由對照/元件抽取/API 變更

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>

2026-04-08 16:03:58 +08:00

6.8 KiB

Raw Blame History

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

6.8 KiB Raw Blame History

Sprint 5 — Tab 結構規格書

🏠 AI 指令中心 (/)

Tab 1: 戰情總覽 — 區塊配置

Tab 2: 告警 & 授權 — 區塊配置

Tab 3: 活動串流 — 區塊配置

Tab 4: 處置統計 — 區塊配置

📊 可觀測性 (/observability)

🔧 自動化 (/automation)

📦 營運 (/operations)

🛡️ 安全合規 (/security-compliance)

📚 知識 (/knowledge)

⚙️ 設定 (/settings)