lanyuanxiaoyao
4caf502908
- 引入 React Router v7 (Declarative mode) 实现 SPA 路由 - 重构 Layout 为 Header + 侧边栏 + 内容区的企业 Admin 布局 - 新增侧边栏菜单组件，支持折叠/展开，状态持久化到 localStorage - 新增示例页面：仪表盘、用户管理、系统设置、404 - 菜单配置与路由统一为单一数据源 (menu.tsx) - Vite code splitting 新增 vendor-router 组 - 更新 DEVELOPMENT.md 和 README.md 文档
37 lines
1.9 KiB
Markdown
37 lines
1.9 KiB
Markdown
## Why
|
||
|
||
当前前端为单页面应用，仅有 Header + Content 的简单布局，无路由、无侧边栏，页面结构单一，无法支撑企业级 Admin 后台的多页面导航需求。作为 Bun 全栈应用模板，需要提供更完善的前端布局范例，便于使用者在此基础上扩展业务页面。
|
||
|
||
## What Changes
|
||
|
||
- 引入 React Router v7 (Declarative mode) 实现前端 SPA 路由
|
||
- 重构 Layout 为经典企业 Admin 后台布局：Header + 侧边栏 + 内容区
|
||
- 新增侧边栏菜单组件，支持折叠/展开，折叠状态持久化到 localStorage
|
||
- 新增多个示例页面（仪表盘、用户管理、系统设置、404）
|
||
- 将路由定义与菜单配置统一为单一数据源，保证两者同步
|
||
- 新增 `react-router` 依赖，Vite code splitting 单独分组
|
||
|
||
**BREAKING**: 原 `app.tsx` 的 Content 内容迁移至 Dashboard 页面；CSS 类名 `.dashboard-*` 变更为 `.app-*`
|
||
|
||
## Capabilities
|
||
|
||
### New Capabilities
|
||
|
||
- `frontend-routing`: 前端 SPA 路由能力，基于 React Router v7，支持多页面导航、路由匹配、404 处理
|
||
- `admin-layout`: 企业 Admin 后台布局能力，Header + 侧边栏 + 内容区，侧边栏可折叠
|
||
|
||
### Modified Capabilities
|
||
|
||
- `app-constants`: 新增 localStorage key `"sidebar.collapsed"` 用于持久化侧边栏折叠状态
|
||
|
||
## Impact
|
||
|
||
- 新增依赖：`react-router`
|
||
- 新增目录：`src/web/pages/`、`src/web/components/Sidebar/`
|
||
- 新增文件：`src/web/routes.tsx`、`src/web/menu.tsx`、`src/web/hooks/use-sidebar-collapsed.ts`
|
||
- 修改文件：`src/web/app.tsx`（重构 Layout）、`src/web/main.tsx`（+ BrowserRouter）、`src/web/styles.css`（布局样式重写）
|
||
- 修改配置：`vite.config.ts`（code splitting 新增 vendor-router 组）
|
||
- 更新文档：`DEVELOPMENT.md`、`README.md`
|
||
- 新增测试：Sidebar 组件测试、各页面测试、test-utils 增强
|
||
- 后端无需改动（SPA fallback 已支持）
|