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>
3.1 KiB
3.1 KiB
Sprint 5 — 頁面路由對照表
每個舊 URL 的精確去向，確保零連結失效
路由對照表
| # | 舊路由 | 新位置 | 實作方式 | Tab ID |
|---|---|---|---|---|
| 1 | / |
/ |
保留 (重構為 4-Tab) | — |
| 2 | /alerts |
/?tab=alerts |
redirect | alerts |
| 3 | /authorizations |
/?tab=alerts |
redirect | alerts |
| 4 | /topology |
/topology |
保留 (升級為完整拓撲) | — |
| 5 | /reports |
/?tab=disposition |
redirect | disposition |
| 6 | /monitoring |
/observability?tab=monitoring |
redirect | monitoring |
| 7 | /apm |
/observability?tab=apm |
redirect | apm |
| 8 | /errors |
/observability?tab=errors |
redirect | errors |
| 9 | /apps |
/observability?tab=apps |
redirect | apps |
| 10 | /services |
/observability?tab=services |
redirect | services |
| 11 | /auto-repair |
/automation?tab=repair |
redirect | repair |
| 12 | /neural-command |
/automation?tab=neural |
redirect | neural |
| 13 | /drift |
/automation?tab=drift |
redirect | drift |
| 14 | /deployments |
/operations?tab=deployments |
redirect | deployments |
| 15 | /tickets |
/operations?tab=tickets |
redirect | tickets |
| 16 | /cost |
/operations?tab=cost |
redirect | cost |
| 17 | /action-logs |
/operations?tab=logs |
redirect | logs |
| 18 | /billing |
/operations?tab=billing |
redirect | billing |
| 19 | /security |
/security-compliance?tab=security |
redirect | security |
| 20 | /compliance |
/security-compliance?tab=compliance |
redirect | compliance |
| 21 | /knowledge-base |
/knowledge |
redirect | — |
| 22 | /terminal |
/terminal |
保留 (底部固定項) | — |
| 23 | /settings |
/settings |
保留 (加 Tab: users/notifications/help) | — |
| 24 | /users |
/settings?tab=users |
redirect | users |
| 25 | /notifications |
/settings?tab=notifications |
redirect | notifications |
| 26 | /help |
/settings?tab=help |
redirect | help |
| 27 | /demo |
/demo |
保留 (環境變數保護) | — |
保留的獨立路由 (不整合)
| 路由 | 原因 |
|---|---|
/ |
首頁，重構為 4-Tab |
/topology |
完整版拓撲圖 (全展開模式) |
/terminal |
需要全螢幕，不適合 Tab |
/settings |
底部固定項 |
/demo |
開發用 |
Redirect 實作方式
// 方案 A: next.config.js (推薦 — 伺服器端 301)
module.exports = {
async redirects() {
return [
{ source: '/alerts', destination: '/?tab=alerts', permanent: false },
{ source: '/authorizations', destination: '/?tab=alerts', permanent: false },
{ source: '/reports', destination: '/?tab=disposition', permanent: false },
{ source: '/monitoring', destination: '/observability?tab=monitoring', permanent: false },
// ... 其他 20+ 條
]
}
}
// 方案 B: 各頁面內 redirect (fallback)
// apps/web/src/app/[locale]/alerts/page.tsx
import { redirect } from 'next/navigation'
export default function AlertsPage() {
redirect('/?tab=alerts')
}
建議: 方案 A (next.config.js) 為主，效能最好。