fix: 审查修补前端布局重构并归档 change

- 补实现 ProtectedRoute 空壳组件(预留接口,不启用认证逻辑)
- 修复页面组件内联 style 为 CSS 类,符合样式规范
- 补充 Sidebar 菜单项激活状态测试、404 按钮可点击测试
- 回写 admin-layout spec Header 页面标题 fallback 行为
- 同步 delta specs 至主规范(admin-layout、frontend-routing、app-constants)
- 归档 refactor-frontend-layout change
This commit is contained in:
2026-05-24 22:28:17 +08:00
parent 4caf502908
commit 1e3269380e
16 changed files with 51 additions and 210 deletions

View File

@@ -0,0 +1,57 @@
## Requirements
### Requirement: 前端 SPA 路由
系统 SHALL 使用 React Router v7 (Declarative mode) 实现前端 SPA 路由,支持多页面导航。
#### Scenario: 应用启动时初始化路由
- **WHEN** 应用启动
- **THEN** 系统 SHALL 在 `main.tsx` 中使用 `BrowserRouter` 包裹根组件
#### Scenario: 路由匹配渲染对应页面
- **WHEN** 用户访问路径 `/`
- **THEN** 系统 SHALL 渲染 Dashboard 页面
#### Scenario: 用户管理页面路由
- **WHEN** 用户访问路径 `/users`
- **THEN** 系统 SHALL 渲染用户管理页面
#### Scenario: 系统设置页面路由
- **WHEN** 用户访问路径 `/settings`
- **THEN** 系统 SHALL 渲染系统设置页面
#### Scenario: 未知路径返回 404 页面
- **WHEN** 用户访问未定义的路径(如 `/unknown`
- **THEN** 系统 SHALL 渲染 NotFound 页面
### Requirement: 路由定义独立文件
路由定义 SHALL 抽离为独立文件 `src/web/routes.tsx``app.tsx` 引用该文件。
#### Scenario: 路由配置集中管理
- **WHEN** 开发者需要新增或修改路由
- **THEN** 系统 SHALL 在 `routes.tsx` 中统一管理所有 `<Route>` 定义
### Requirement: 路由守卫预留
系统 SHALL 预留路由守卫接口(`ProtectedRoute` 组件),但暂不实现认证逻辑。
#### Scenario: 路由守卫组件存在
- **WHEN** 需要实现认证保护
- **THEN** 系统 SHALL 提供 `ProtectedRoute` wrapper 组件供 Routes 使用
### Requirement: Vite code splitting 包含路由库
`vite.config.ts` 的 code splitting 配置 SHALL 新增 `vendor-router` 组,包含 `react-router`
#### Scenario: 路由库独立分包
- **WHEN** 执行生产构建
- **THEN** `react-router` SHALL 被打包到独立的 `vendor-router` chunk 中