From bb6a57dd8739e002b5478b0b424f48e16f0f9c84 Mon Sep 17 00:00:00 2001 From: OG T Date: Wed, 8 Apr 2026 16:01:38 +0800 Subject: [PATCH] =?UTF-8?q?docs(plan):=20Sprint=205=20=E5=89=8D=E7=AB=AF?= =?UTF-8?q?=E8=B3=87=E8=A8=8A=E6=9E=B6=E6=A7=8B=E9=87=8D=E7=B5=84=20?= =?UTF-8?q?=E2=80=94=20=E5=AE=8C=E6=95=B4=E8=A7=A3=E6=B1=BA=E6=96=B9?= =?UTF-8?q?=E6=A1=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 涵蓋: - 第一章: 現有 26 頁面 + 62 元件完整資產清單 - 第二章: 重組對照表 (25→6+2 導航，零功能遺失) - 第三章: 6 個新頁面的 Tab 結構與元件整合 - 第四章: 舊路由向後兼容 (20+ redirect) - 第五章: 共用 Tab 容器元件規格 - 第六章: 新導航 Sidebar 結構 - 第七章: 互動模式規範 (Tab/Drawer/Modal/Toggle) - 第八章: 細化實施步驟 (6 Phase, 30 Step) - 第九章: 檔案影響清單 (15 新增 + 5 修改) - 第十章: 8 份技術文檔清單 - 第十一章: 風險矩陣 - 第十二章: 時程預估 (~10天, 3批交付) Co-Authored-By: Claude Haiku 4.5 --- .../2026-04-08-sprint5-ia-restructure.md | 566 ++++++++++++++++++ 1 file changed, 566 insertions(+) create mode 100644 docs/superpowers/plans/2026-04-08-sprint5-ia-restructure.md diff --git a/docs/superpowers/plans/2026-04-08-sprint5-ia-restructure.md b/docs/superpowers/plans/2026-04-08-sprint5-ia-restructure.md new file mode 100644 index 00000000..b3d59670 --- /dev/null +++ b/docs/superpowers/plans/2026-04-08-sprint5-ia-restructure.md @@ -0,0 +1,566 @@ +# Sprint 5 — 前端資訊架構重組 + 指令中心拓撲圖 + +> **建立**: 2026-04-08 (台北) +> **狀態**: 📋 待統帥最終審核 +> **範圍**: 導航精簡 (25→6+2) + 多頁籤整合 + React Flow 拓撲圖 +> **原則**: 零功能遺失 — 所有現有頁面功能必須保留，只改變呈現方式 + +--- + +## 第一章：現有資產完整清單 (不可遺失) + +### 1.1 現有 26 個頁面路由 + +| # | 路由 | 頁面名稱 | 程式碼行數 | 功能摘要 | +|---|------|---------|-----------|---------| +| 1 | `/` | AI 中心 (首頁) | 1200+ | Metrics Strip + Incident Feed + OpenClaw Panel + HostGrid | +| 2 | `/alerts` | 告警 | 183 | 告警列表 + 嚴重度篩選 | +| 3 | `/authorizations` | 授權中心 | 25 | 批准/拒絕授權 (佔位頁) | +| 4 | `/monitoring` | 服務監控 | 269 | 監控工具狀態 (Grafana/Prometheus/SigNoz) | +| 5 | `/apm` | APM | 128 | 應用效能監控 (SignOz 連結) | +| 6 | `/errors` | 錯誤追蹤 | 164 | Sentry 錯誤列表 + AI 分析 | +| 7 | `/topology` | 拓撲圖 | 103 | 簡單 host list (待升級) | +| 8 | `/security` | 安全 | 137 | 安全掃描狀態 | +| 9 | `/compliance` | 合規 | 124 | 合規報告 + 嚴重度分佈 | +| 10 | `/auto-repair` | 自動修復 | 460 | Playbook 管理 + 評估 + 執行 | +| 11 | `/neural-command` | 神經指揮 | 209 | SSH 指揮權鏈 (4 Tab 元件) | +| 12 | `/drift` | Drift 偵測 | 324 | Config Drift 報告 | +| 13 | `/deployments` | 部署管理 | 113 | 部署歷史 | +| 14 | `/tickets` | 工單 | 120 | 工單管理 | +| 15 | `/cost` | 成本分析 | 95 | AI 效能統計 | +| 16 | `/action-logs` | 行動日誌 | 551 | 操作記錄 + 時間軸 | +| 17 | `/reports` | 報表 | 317 | 處置統計儀表板 (Sprint 4) | +| 18 | `/knowledge-base` | 知識庫 | 532 | KB 搜尋 + 語義搜尋 | +| 19 | `/terminal` | 終端 | 36 | Omni-Terminal | +| 20 | `/apps` | 應用 | 103 | 主機服務狀態 | +| 21 | `/services` | 服務目錄 | 120 | 服務清單 | +| 22 | `/settings` | 設定 | 245 | 系統設定 | +| 23 | `/users` | 用戶 | 136 | 用戶管理 | +| 24 | `/notifications` | 通知 | 97 | 通知中心 | +| 25 | `/billing` | 計費 | 113 | 計費資訊 | +| 26 | `/help` | 幫助 | 57 | 幫助文檔 | +| — | `/demo` | Demo | 189 | 開發用 (環境變數保護) | + +### 1.2 現有 62 個前端元件 + +(完整清單見附錄 A) + +核心元件群組: +- **layout/**: AppLayout, Header, Sidebar (4 檔, 719 行) +- **incident/**: IncidentCard, FlowPipeline, ThinkingTerminal (3 檔, 1172 行) +- **approval/**: ApprovalCard, LiveApprovalPanel, ConversationalView 等 (6 檔, 2402 行) +- **ai/**: OpenClawPanel, ThinkingStream, HITLSection 等 (6 檔, 1883 行) +- **neural-command/**: NeuralPreFlight, NeuralLiveCenter, NeuralStats, NeuralApprovalPanel (4 檔, 1032 行) +- **dashboard/**: LiveDashboard, HostCard, ConnectionStatus (4 檔, 1217 行) +- **errors/**: ErrorOverview, ErrorTrend, RecentIssues, UXAudit (4 檔, 1083 行) + +--- + +## 第二章：重組對照表 — 每個頁面的去向 + +### 2.1 導航重組：25 項 → 6 主項 + 2 固定項 + +``` +舊導航 (25項) 新導航 (6+2項) +━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + +🏠 AI 核心 (3項) +├─ 儀表板 ─────────────────→ 🏠 AI 指令中心 +├─ 授權中心 ───────────────→ └─ [Tab] 告警 & 授權 +└─ 告警 ───────────────────→ └─ [Tab] 告警 & 授權 + +📊 監控安全 (6項) +├─ 服務監控 ───────────────→ 📊 可觀測性 +├─ APM ────────────────────→ └─ [Tab] APM +├─ 錯誤追蹤 ───────────────→ └─ [Tab] 錯誤追蹤 +├─ 拓撲圖 ─────────────────→ 🏠 AI 指令中心 [Tab] 戰情總覽 +├─ 安全 ───────────────────→ 🛡️ 安全合規 +└─ 合規 ───────────────────→ └─ [Tab] 合規 + +🔧 維護管理 (8項) +├─ 自動修復 ───────────────→ 🔧 自動化 +├─ 神經指揮 ───────────────→ └─ [Tab] 神經指揮 +├─ Drift ──────────────────→ └─ [Tab] Drift +├─ 部署管理 ───────────────→ 📦 營運 +├─ 工單 ───────────────────→ └─ [Tab] 工單 +├─ 成本分析 ───────────────→ └─ [Tab] 成本 +├─ 行動日誌 ───────────────→ └─ [Tab] 日誌 +└─ 報表 ───────────────────→ 🏠 AI 指令中心 [Tab] 處置統計 + +📚 知識工具 (4項) +├─ 知識庫 ─────────────────→ 📚 知識 +├─ 終端 ───────────────────→ 💻 終端 (底部固定) +├─ 應用 ───────────────────→ 📊 可觀測性 [Tab] 應用 +└─ 服務目錄 ───────────────→ 📊 可觀測性 [Tab] 服務 + +⚙️ 底部 (5項) +├─ 用戶 ───────────────────→ ⚙️ 設定 (底部固定) +├─ 通知 ───────────────────→ 🏠 AI 指令中心 (通知 bell icon) +├─ 計費 ───────────────────→ 📦 營運 [Tab] 計費 +├─ 幫助 ───────────────────→ ⚙️ 設定 [Tab] 幫助 +└─ 設定 ───────────────────→ ⚙️ 設定 (底部固定) +``` + +### 2.2 新導航結構 + +``` +━━━━━━━━━━━━━━━━━━ +🏠 AI 指令中心 ← 首頁/戰情室 +📊 可觀測性 ← 監控/APM/錯誤/應用/服務 +🔧 自動化 ← 修復/SSH/Drift/Playbook +📦 營運 ← 部署/工單/成本/日誌/計費 +🛡️ 安全合規 ← 安全/合規 +📚 知識 ← 知識庫/服務目錄 +━━━━━━━━━━━━━━━━━━ +💻 終端 ← 固定底部 +⚙️ 設定 ← 固定底部 (含用戶/幫助) +━━━━━━━━━━━━━━━━━━ +``` + +--- + +## 第三章：每個新頁面的 Tab 結構與元件整合 + +### 3.1 🏠 AI 指令中心 (路由: `/`) + +**整合來源**: 現有首頁 + `/alerts` + `/authorizations` + `/topology` + `/reports` + +| Tab | 名稱 | 整合的現有元件/頁面 | 新增元件 | +|-----|------|-------------------|---------| +| **T1** | 戰情總覽 | HostGrid, MetricsStrip, IncidentCard, OpenClawPanel | **ServiceTopology (React Flow)** | +| **T2** | 告警 & 授權 | `/alerts` 完整頁面 + LiveApprovalPanel + ApprovalCard | 合併為左右佈局 | +| **T3** | 活動串流 | SSE `/dashboard/stream` + ActionTimeline | 即時事件時間軸 | +| **T4** | 處置統計 | `/reports` 完整儀表板 (Sprint 4) | 直接嵌入 | + +**實作方式**: +```typescript +// apps/web/src/app/[locale]/page.tsx +// 改為 Tab 容器，每個 Tab 載入對應內容 + +const TABS = [ + { id: 'overview', label: t('tabs.overview'), icon: LayoutDashboard }, + { id: 'alerts', label: t('tabs.alerts'), icon: Bell, badge: alertsCount }, + { id: 'stream', label: t('tabs.stream'), icon: Activity }, + { id: 'disposition', label: t('tabs.disposition'), icon: BarChart3 }, +] + +// Tab 1: 戰情總覽 +// - 保留: MetricsStrip (7指標) +// - 保留: IncidentCard + FlowPipeline +// - 保留: OpenClawPanel +// - 新增: ServiceTopology (React Flow, 收合模式) +// - 保留: HostGrid (嵌入拓撲圖下方) + +// Tab 2: 告警 & 授權 +// - 移入: /alerts/page.tsx 的完整內容 (183行) +// - 移入: LiveApprovalPanel (484行) +// - 左右佈局: 告警列表(左) + 授權面板(右) + +// Tab 3: 活動串流 +// - 移入: ActionTimeline (245行) +// - SSE 即時事件 +// - AI 推理鏈視覺化 + +// Tab 4: 處置統計 +// - 移入: /reports/page.tsx 完整內容 (317行) +// - Sprint 4 四色統計 + 堆疊條 + 明細表 +``` + +**影響的現有檔案**: +| 檔案 | 動作 | 說明 | +|------|------|------| +| `app/[locale]/page.tsx` | **重寫** | 改為 Tab 容器 | +| `app/[locale]/alerts/page.tsx` | **保留路由但內容抽取** | 抽取為 `AlertsPanel` 元件 | +| `app/[locale]/authorizations/page.tsx` | **保留路由但內容抽取** | 合併入 Tab 2 | +| `app/[locale]/topology/page.tsx` | **保留路由但升級** | 完整版拓撲 (全展開) | +| `app/[locale]/reports/page.tsx` | **保留路由但內容抽取** | 抽取為 `DispositionPanel` 元件 | + +**重要**: 所有原有路由保留，確保舊連結/書籤不失效。只是內容同時在 AI 中心也能看到。 + +--- + +### 3.2 📊 可觀測性 (路由: `/observability` 新建) + +**整合來源**: `/monitoring` + `/apm` + `/errors` + `/apps` + `/services` + +| Tab | 名稱 | 整合的現有頁面 | 行數 | +|-----|------|---------------|------| +| **T1** | 服務監控 | `/monitoring/page.tsx` | 269 | +| **T2** | APM | `/apm/page.tsx` | 128 | +| **T3** | 錯誤追蹤 | `/errors/page.tsx` | 164 | +| **T4** | 應用 | `/apps/page.tsx` | 103 | +| **T5** | 服務目錄 | `/services/page.tsx` | 120 | + +**實作方式**: 新建 `/observability/page.tsx`，5 Tab 容器 +**保留舊路由**: `/monitoring` → redirect to `/observability?tab=monitoring` + +--- + +### 3.3 🔧 自動化 (路由: `/automation` 新建) + +**整合來源**: `/auto-repair` + `/neural-command` + `/drift` + +| Tab | 名稱 | 整合的現有頁面 | 行數 | +|-----|------|---------------|------| +| **T1** | 自動修復 | `/auto-repair/page.tsx` | 460 | +| **T2** | 神經指揮 | `/neural-command/page.tsx` | 209 + 4元件(1032) | +| **T3** | Drift 偵測 | `/drift/page.tsx` | 324 | + +**保留舊路由**: `/auto-repair` → redirect to `/automation?tab=repair` + +--- + +### 3.4 📦 營運 (路由: `/operations` 新建) + +**整合來源**: `/deployments` + `/tickets` + `/cost` + `/action-logs` + `/billing` + +| Tab | 名稱 | 整合的現有頁面 | 行數 | +|-----|------|---------------|------| +| **T1** | 部署管理 | `/deployments/page.tsx` | 113 | +| **T2** | 工單 | `/tickets/page.tsx` | 120 | +| **T3** | 成本分析 | `/cost/page.tsx` | 95 | +| **T4** | 行動日誌 | `/action-logs/page.tsx` | 551 | +| **T5** | 計費 | `/billing/page.tsx` | 113 | + +--- + +### 3.5 🛡️ 安全合規 (路由: `/security-compliance` 新建) + +**整合來源**: `/security` + `/compliance` + +| Tab | 名稱 | 整合的現有頁面 | 行數 | +|-----|------|---------------|------| +| **T1** | 安全掃描 | `/security/page.tsx` | 137 | +| **T2** | 合規報告 | `/compliance/page.tsx` | 124 | + +--- + +### 3.6 📚 知識 (路由: `/knowledge` 新建) + +**整合來源**: `/knowledge-base` + +| Tab | 名稱 | 整合的現有頁面 | 行數 | +|-----|------|---------------|------| +| **T1** | 知識庫 | `/knowledge-base/page.tsx` | 532 | + +(單一內容暫不需 Tab，但預留未來擴充) + +--- + +### 3.7 底部固定項 + +| 項目 | 路由 | 說明 | +|------|------|------| +| 💻 終端 | `/terminal` | 保持獨立，因為需要全螢幕 | +| ⚙️ 設定 | `/settings` | 整合 `/users` + `/help` + `/notifications` | + +--- + +## 第四章：舊路由向後兼容 (Backward Compatibility) + +**原則**: 所有現有 URL 必須繼續有效 (書籤/Telegram 連結不失效) + +| 舊路由 | 處理方式 | 目的地 | +|--------|---------|--------| +| `/alerts` | **redirect** | `/?tab=alerts` | +| `/authorizations` | **redirect** | `/?tab=alerts` | +| `/topology` | **保留** | 完整版拓撲 (React Flow 全展開) | +| `/reports` | **redirect** | `/?tab=disposition` | +| `/monitoring` | **redirect** | `/observability?tab=monitoring` | +| `/apm` | **redirect** | `/observability?tab=apm` | +| `/errors` | **redirect** | `/observability?tab=errors` | +| `/apps` | **redirect** | `/observability?tab=apps` | +| `/services` | **redirect** | `/observability?tab=services` | +| `/auto-repair` | **redirect** | `/automation?tab=repair` | +| `/neural-command` | **redirect** | `/automation?tab=neural` | +| `/drift` | **redirect** | `/automation?tab=drift` | +| `/deployments` | **redirect** | `/operations?tab=deployments` | +| `/tickets` | **redirect** | `/operations?tab=tickets` | +| `/cost` | **redirect** | `/operations?tab=cost` | +| `/action-logs` | **redirect** | `/operations?tab=logs` | +| `/billing` | **redirect** | `/operations?tab=billing` | +| `/security` | **redirect** | `/security-compliance?tab=security` | +| `/compliance` | **redirect** | `/security-compliance?tab=compliance` | +| `/knowledge-base` | **redirect** | `/knowledge` | +| `/users` | **redirect** | `/settings?tab=users` | +| `/help` | **redirect** | `/settings?tab=help` | +| `/notifications` | **redirect** | `/settings?tab=notifications` | + +**實作**: Next.js `redirects` in `next.config.js` 或各頁面加 `redirect()` + +--- + +## 第五章：共用 Tab 容器元件 + +所有新頁面共用同一個 Tab 元件，確保一致性： + +```typescript +// apps/web/src/components/layout/page-tabs.tsx (新建) + +interface TabConfig { + id: string + labelKey: string // i18n key + icon: React.ElementType // Lucide icon + badge?: number // 數字徽章 (如告警數) + component: React.LazyComponent // lazy load 內容 +} + +interface PageTabsProps { + tabs: TabConfig[] + defaultTab?: string + // URL query 同步: ?tab=alerts + syncWithUrl?: boolean +} + +// 設計規範: +// - Tab Bar 高度: 40px +// - Tab 間距: 0px (緊貼) +// - Active Tab: 底部 2px accent (#d97757) + 文字加粗 +// - Inactive: text-text2 (#87867f) +// - Icon: 16px Lucide, 與文字間距 4px +// - Badge: 紅色圓形 (#cc2200), 8px 字體 +// - Tab Bar 邊框: 0.5px solid #e0ddd4 +``` + +--- + +## 第六章：新導航 Sidebar 結構 + +```typescript +// apps/web/src/components/layout/sidebar.tsx (修改) + +const NAV_SECTIONS: NavSection[] = [ + { + sectionKey: 'main', + sectionLabel: '', + items: [ + { id: 'command-center', href: '/', labelKey: 'commandCenter', Icon: LayoutDashboard }, + { id: 'observability', href: '/observability', labelKey: 'observability', Icon: Monitor }, + { id: 'automation', href: '/automation', labelKey: 'automation', Icon: Wrench }, + { id: 'operations', href: '/operations', labelKey: 'operations', Icon: Package }, + { id: 'security-compliance',href: '/security-compliance', labelKey: 'securityCompliance', Icon: Shield }, + { id: 'knowledge', href: '/knowledge', labelKey: 'knowledge', Icon: BookOpen }, + ], + }, +] + +const BOTTOM_NAV: NavItemConfig[] = [ + { id: 'terminal', href: '/terminal', labelKey: 'terminal', Icon: Terminal }, + { id: 'settings', href: '/settings', labelKey: 'settings', Icon: Settings }, +] + +// 從 25 項 → 8 項 (6 主項 + 2 底部) +``` + +--- + +## 第七章：互動模式完整規範 + +### 7.1 Tab 頁籤 + +| 場景 | 行為 | +|------|------| +| 點擊 Tab | 切換內容，URL query 同步 (`?tab=alerts`) | +| 瀏覽器後退 | 回到上一個 Tab | +| Tab 有 badge | 顯示數字 (如告警數 2) | +| Tab 內容載入中 | 骨架屏 (Skeleton) | +| Tab 內容無資料 | 空狀態 (Inbox icon + 文字) | + +### 7.2 Drawer 側邊抽屜 + +| 場景 | 行為 | +|------|------| +| 點擊拓撲節點 | 右側滑出服務詳情 Drawer (300px) | +| 點擊告警列表項 | 右側滑出告警詳情 | +| Drawer 外點擊 | 關閉 Drawer | +| ESC 鍵 | 關閉 Drawer | + +### 7.3 Modal 彈出視窗 + +| 場景 | 行為 | +|------|------| +| 批准修復操作 | 彈出確認 Modal (風險等級 + URI + 按鈕) | +| 拒絕操作 | 彈出理由輸入 Modal | +| 危險操作 (scale down) | 彈出雙重確認 Modal | + +### 7.4 Toggle 開關 + +| 場景 | 行為 | +|------|------| +| 「顯示拓撲圖」 | 切換 拓撲圖 / HostGrid 視圖 | +| 「只看異常」 | 篩選只顯示 warning/critical | +| 「顯示數據流」 | 開啟/關閉 SSE 即時串流 | +| 「自動刷新」 | 開啟/關閉 30 秒輪詢 | + +--- + +## 第八章：細化實施步驟 + +### Phase 0: 基礎建設 (Day 1) + +| Step | 動作 | 影響檔案 | 驗證 | +|------|------|---------|------| +| 0.1 | 安裝 `@xyflow/react` + `elkjs` | package.json | import 成功 | +| 0.2 | 建立 `PageTabs` 共用元件 | components/layout/page-tabs.tsx (新建) | 渲染 3 個 Tab | +| 0.3 | 建立 `ServiceDrawer` 共用元件 | components/layout/service-drawer.tsx (新建) | 滑出/關閉 | + +### Phase 1: AI 指令中心重構 (Day 2-3) + +| Step | 動作 | 影響檔案 | 驗證 | +|------|------|---------|------| +| 1.1 | 首頁 page.tsx 改為 4-Tab 結構 | app/[locale]/page.tsx (重寫) | 4 Tab 切換 | +| 1.2 | Tab 1: 保留現有 MetricsStrip + IncidentCard + OpenClaw | 複用現有元件 | 不丟功能 | +| 1.3 | Tab 1: 嵌入 ServiceTopology (React Flow 收合) | topology/ 元件 (新建) | 拓撲圖渲染 | +| 1.4 | Tab 2: 從 /alerts 和 /authorizations 抽取內容 | alerts/page.tsx → AlertsPanel 元件 | 告警列表+授權 | +| 1.5 | Tab 3: 建立活動串流 Tab | 複用 SSE + ActionTimeline | 即時事件 | +| 1.6 | Tab 4: 從 /reports 抽取處置統計 | reports/page.tsx → DispositionPanel | 四色統計 | + +### Phase 2: React Flow 拓撲圖 (Day 3-4) + +| Step | 動作 | 影響檔案 | 驗證 | +|------|------|---------|------| +| 2.1 | ServiceNode.tsx (memo + Tailwind + Lucide) | topology/nodes/ (新建) | 節點渲染 | +| 2.2 | GroupNode.tsx (展開/收合) | topology/nodes/ (新建) | 群組切換 | +| 2.3 | TopologyEdge.tsx (漸層 + CSS 動畫) | topology/edges/ (新建) | 邊線動畫 | +| 2.4 | useElkLayout.ts (elkjs 嵌套佈局) | topology/hooks/ (新建) | 自動佈局 | +| 2.5 | useTopologyData.ts (store → nodes) | topology/hooks/ (新建) | 資料轉換 | +| 2.6 | ServiceTopology.tsx (主元件) | topology/ (新建) | 完整拓撲 | + +### Phase 3: 其他整合頁面 (Day 4-5) + +| Step | 動作 | 影響檔案 | 驗證 | +|------|------|---------|------| +| 3.1 | 新建 /observability 頁 (5 Tab) | app/[locale]/observability/page.tsx (新建) | 5 Tab | +| 3.2 | 新建 /automation 頁 (3 Tab) | app/[locale]/automation/page.tsx (新建) | 3 Tab | +| 3.3 | 新建 /operations 頁 (5 Tab) | app/[locale]/operations/page.tsx (新建) | 5 Tab | +| 3.4 | 新建 /security-compliance 頁 (2 Tab) | app/[locale]/security-compliance/page.tsx (新建) | 2 Tab | +| 3.5 | /knowledge 指向 knowledge-base | app/[locale]/knowledge/page.tsx (新建) | 內容一致 | + +### Phase 4: 導航重構 + 舊路由 Redirect (Day 5-6) + +| Step | 動作 | 影響檔案 | 驗證 | +|------|------|---------|------| +| 4.1 | sidebar.tsx 改為 6+2 結構 | components/layout/sidebar.tsx (修改) | 導航正確 | +| 4.2 | 建立 20+ 個 redirect | next.config.js 或各舊頁面 | 舊 URL 跳轉正確 | +| 4.3 | i18n 新增所有 Tab/Section key | messages/zh-TW.json, en.json | 零硬編碼 | + +### Phase 5: 後端擴充 (Day 6) + +| Step | 動作 | 影響檔案 | 驗證 | +|------|------|---------|------| +| 5.1 | dashboard.py 加 K8s Pod + AI 狀態 | api/v1/dashboard.py (修改 +30行) | curl 新欄位 | +| 5.2 | 靜態依賴關係定義 | topology/dependency-map.ts (新建) | 邊線正確 | + +### Phase 6: 視覺調校 + 驗收 (Day 7-8) + +| Step | 動作 | 驗證 | +|------|------|------| +| 6.1 | TypeScript 編譯 | `tsc --noEmit` 零錯誤 | +| 6.2 | 生產建置 | `pnpm build` 成功 | +| 6.3 | 所有舊 URL redirect 測試 | 20+ URL 全部跳轉正確 | +| 6.4 | 所有 Tab 切換測試 | 每個 Tab 內容正確載入 | +| 6.5 | 拓撲圖互動測試 | 展開/收合/hover/click | +| 6.6 | 統帥視覺驗收 | 確認設計 | + +--- + +## 第九章：檔案影響完整清單 + +### 新增檔案 (15 個) + +| # | 檔案 | 行數 | 功能 | +|---|------|------|------| +| 1 | `components/layout/page-tabs.tsx` | 80 | 共用 Tab 容器 | +| 2 | `components/layout/service-drawer.tsx` | 60 | 共用側邊抽屜 | +| 3 | `components/topology/index.ts` | 10 | 匯出 | +| 4 | `components/topology/ServiceTopology.tsx` | 150 | React Flow 主元件 | +| 5 | `components/topology/nodes/GroupNode.tsx` | 120 | 群組節點 | +| 6 | `components/topology/nodes/ServiceNode.tsx` | 80 | 服務節點 | +| 7 | `components/topology/edges/TopologyEdge.tsx` | 60 | 邊線 | +| 8 | `components/topology/hooks/useTopologyData.ts` | 100 | 資料轉換 | +| 9 | `components/topology/hooks/useElkLayout.ts` | 80 | 佈局引擎 | +| 10 | `components/topology/topology.css` | 30 | 動畫 | +| 11 | `app/[locale]/observability/page.tsx` | 100 | 可觀測性頁 | +| 12 | `app/[locale]/automation/page.tsx` | 80 | 自動化頁 | +| 13 | `app/[locale]/operations/page.tsx` | 100 | 營運頁 | +| 14 | `app/[locale]/security-compliance/page.tsx` | 60 | 安全合規頁 | +| 15 | `app/[locale]/knowledge/page.tsx` | 40 | 知識頁 | + +**新增總計: ~1,150 行** + +### 修改檔案 (5 個) + +| # | 檔案 | 改動 | +|---|------|------| +| 1 | `app/[locale]/page.tsx` | 重寫為 4-Tab 結構 | +| 2 | `components/layout/sidebar.tsx` | 25→8 導航項 | +| 3 | `apps/web/tailwind.config.ts` | +3 動畫 | +| 4 | `apps/api/src/api/v1/dashboard.py` | +30 行 K8s/AI 狀態 | +| 5 | `messages/zh-TW.json` + `en.json` | +40 i18n key | + +### 不刪除的檔案 (保留舊路由做 redirect) + +所有 26 個現有頁面路由檔案 **全部保留**，內容改為 redirect 或共用元件。 + +--- + +## 第十章：技術文檔清單 + +為避免溝通落差，以下文檔需要產出： + +| # | 文檔名稱 | 用途 | 格式 | +|---|---------|------|------| +| 1 | **頁面路由對照表** | 每個舊 URL 對應到哪個新位置 | 本文件第四章 | +| 2 | **Tab 結構規格書** | 每個新頁面的 Tab 配置 | 本文件第三章 | +| 3 | **元件抽取計畫** | 哪些頁面需要抽取為獨立元件 | 見下方 | +| 4 | **React Flow PoC** | 嵌套群組互動 demo | HTML 部署到內網 | +| 5 | **設計稿 (3+ 版本)** | AI 指令中心多頁籤視覺設計 | HTML 部署到內網 | +| 6 | **Sidebar 設計稿** | 新 6+2 導航視覺設計 | HTML 部署到內網 | +| 7 | **i18n Key 清單** | 所有新增的翻譯 key | JSON | +| 8 | **API 變更規格** | dashboard.py 新增欄位定義 | Pydantic model | + +### 元件抽取計畫 (文檔 #3) + +| 現有頁面 | 抽取為元件 | 用途 | +|---------|-----------|------| +| `/alerts/page.tsx` | `AlertsPanel.tsx` | AI 中心 Tab 2 + 獨立路由 | +| `/reports/page.tsx` | `DispositionPanel.tsx` | AI 中心 Tab 4 + 獨立路由 | +| `/monitoring/page.tsx` | `MonitoringPanel.tsx` | 可觀測性 Tab 1 | +| `/apm/page.tsx` | `APMPanel.tsx` | 可觀測性 Tab 2 | +| `/errors/page.tsx` | `ErrorsPanel.tsx` | 可觀測性 Tab 3 | +| `/auto-repair/page.tsx` | `AutoRepairPanel.tsx` | 自動化 Tab 1 | +| `/neural-command/page.tsx` | `NeuralCommandPanel.tsx` | 自動化 Tab 2 | +| `/drift/page.tsx` | `DriftPanel.tsx` | 自動化 Tab 3 | + +--- + +## 第十一章：風險與緩解 + +| 風險 | 等級 | 緩解 | +|------|------|------| +| 舊 URL 失效 | 高 | 全部保留做 redirect | +| Tab 切換效能 | 中 | React.lazy + Suspense 按需載入 | +| 元件抽取改壞現有功能 | 中 | 抽取時只移動，不修改邏輯 | +| Sidebar 變更影響所有頁面 | 中 | 先測試再部署 | +| i18n key 遺漏 | 低 | build 時 next-intl 會報錯 | +| 工期超出預估 | 中 | Phase 1-2 優先，Phase 3-4 可分批 | + +--- + +## 第十二章：時程預估 + +| Phase | 天數 | 內容 | 優先級 | +|-------|------|------|--------| +| 0 | 1 | 安裝 + 共用元件 | P0 | +| 1 | 2 | AI 指令中心 4-Tab | P0 | +| 2 | 2 | React Flow 拓撲圖 | P0 | +| 3 | 2 | 其他整合頁面 | P1 | +| 4 | 1 | 導航重構 + redirect | P1 | +| 5 | 1 | 後端擴充 | P1 | +| 6 | 1 | 視覺調校 + 驗收 | P0 | +| **總計** | **~10 天** | | | + +**可分批交付**: +- **第一批 (Day 1-5)**: Phase 0-2 → AI 指令中心 + 拓撲圖可用 +- **第二批 (Day 6-8)**: Phase 3-4 → 其他頁面整合 + 導航精簡 +- **第三批 (Day 9-10)**: Phase 5-6 → 後端 + 驗收