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 文档
This commit is contained in:
56
openspec/changes/refactor-frontend-layout/tasks.md
Normal file
56
openspec/changes/refactor-frontend-layout/tasks.md
Normal file
@@ -0,0 +1,56 @@
|
||||
## 1. 依赖与配置
|
||||
|
||||
- [x] 1.1 安装 react-router 依赖
|
||||
- [x] 1.2 更新 vite.config.ts code splitting 配置,新增 vendor-router 组
|
||||
|
||||
## 2. 工具与 Hook
|
||||
|
||||
- [x] 2.1 创建 src/web/menu.tsx,定义菜单项配置
|
||||
- [x] 2.2 创建 src/web/hooks/use-sidebar-collapsed.ts,实现侧边栏折叠状态 hook
|
||||
|
||||
## 3. 页面组件
|
||||
|
||||
- [x] 3.1 创建 src/web/pages/dashboard/index.tsx,迁移原 app.tsx 内容区逻辑
|
||||
- [x] 3.2 创建 src/web/pages/users/index.tsx,实现用户管理占位页面
|
||||
- [x] 3.3 创建 src/web/pages/settings/index.tsx,实现系统设置占位页面
|
||||
- [x] 3.4 创建 src/web/pages/404/index.tsx,实现 404 页面
|
||||
|
||||
## 4. 侧边栏组件
|
||||
|
||||
- [x] 4.1 创建 src/web/components/Sidebar/index.tsx,实现侧边栏菜单组件
|
||||
|
||||
## 5. 路由配置
|
||||
|
||||
- [x] 5.1 创建 src/web/routes.tsx,定义所有路由
|
||||
|
||||
## 6. 根组件重构
|
||||
|
||||
- [x] 6.1 重构 src/web/app.tsx,实现 Header + Aside + Content 布局
|
||||
- [x] 6.2 修改 src/web/main.tsx,添加 BrowserRouter 包裹
|
||||
|
||||
## 7. 样式更新
|
||||
|
||||
- [x] 7.1 更新 src/web/styles.css,迁移 .dashboard-* 为 .app-*,新增布局样式
|
||||
|
||||
## 8. 测试工具增强
|
||||
|
||||
- [x] 8.1 增强 tests/web/test-utils.tsx,提供 renderWithProviders 函数
|
||||
|
||||
## 9. 组件测试
|
||||
|
||||
- [x] 9.1 创建 tests/web/components/Sidebar/index.test.tsx
|
||||
- [x] 9.2 创建 tests/web/routes/dashboard.test.tsx
|
||||
- [x] 9.3 创建 tests/web/routes/users.test.tsx
|
||||
- [x] 9.4 创建 tests/web/routes/settings.test.tsx
|
||||
- [x] 9.5 创建 tests/web/routes/404.test.tsx
|
||||
- [x] 9.6 更新 tests/web/App.test.tsx 适配 BrowserRouter
|
||||
|
||||
## 10. 文档更新
|
||||
|
||||
- [x] 10.1 更新 DEVELOPMENT.md,更新技术栈表格、组件树、目录结构说明
|
||||
- [x] 10.2 更新 README.md,更新技术栈表格、项目结构说明
|
||||
|
||||
## 11. 质量保障
|
||||
|
||||
- [x] 11.1 运行 bun run check 确保类型检查、lint、测试通过
|
||||
- [x] 11.2 运行 bun run build 验证构建成功
|
||||
Reference in New Issue
Block a user