bun-app-template/openspec/changes/refactor-frontend-layout/specs/frontend-routing/spec.md at 4caf502908f986807b1e2ed20b5fa3c2b99b0a27

Files

lanyuanxiaoyao 4caf502908 feat: 重构前端为企业 Admin 后台布局，引入 React Router 路由

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

2026-05-20 19:06:14 +08:00

1.7 KiB

Raw Blame History

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 中

1.7 KiB Raw Blame History Unescape Escape