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>
74 lines
3.1 KiB
Markdown
74 lines
3.1 KiB
Markdown
# 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 實作方式
|
|
|
|
```typescript
|
|
// 方案 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) 為主，效能最好。
|