lanyuanxiaoyao
4caf502908
- 引入 React Router v7 (Declarative mode) 实现 SPA 路由 - 重构 Layout 为 Header + 侧边栏 + 内容区的企业 Admin 布局 - 新增侧边栏菜单组件，支持折叠/展开，状态持久化到 localStorage - 新增示例页面：仪表盘、用户管理、系统设置、404 - 菜单配置与路由统一为单一数据源 (menu.tsx) - Vite code splitting 新增 vendor-router 组 - 更新 DEVELOPMENT.md 和 README.md 文档
58 lines
1.7 KiB
Markdown
58 lines
1.7 KiB
Markdown
## ADDED 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 中
|