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:
2026-05-20 19:06:14 +08:00
parent 5aed73523e
commit 4caf502908
32 changed files with 981 additions and 140 deletions

View File

@@ -115,13 +115,23 @@ bun run dev
│ │ └── app.ts # 应用全局常量name、title、version 等)
│ └── web/ # 前端代码
│ ├── index.html # HTML 入口
│ ├── main.tsx # React 入口QueryClient + ErrorBoundary
│ ├── app.tsx # 根组件(Layout + 主题切换 + /health 展示
│ ├── main.tsx # React 入口(BrowserRouter + QueryClient + ErrorBoundary
│ ├── app.tsx # 根组件(Admin 布局Header + Sidebar + Content
│ ├── routes.tsx # 路由配置
│ ├── styles.css # 全局样式
│ ├── css.d.ts # CSS 模块类型声明
│ ├── pages/ # 页面组件
│ │ ├── dashboard/ # 仪表盘页
│ │ ├── users/ # 用户管理页
│ │ ├── settings/ # 系统设置页
│ │ └── 404/ # 404 页面
│ ├── components/ # UI 组件
│ │ ├── ErrorBoundary.tsx
│ │ └── Sidebar/ # 侧边栏组件
│ ├── hooks/ # React Hooks
── utils/ # 前端工具函数
── utils/ # 前端工具函数
│ ├── menu.tsx # 菜单配置
│ └── routes.tsx # 路由配置
├── tests/ # 测试文件(镜像 src 目录结构)
├── openspec/ # OpenSpec 规格与变更管理
└── docs/ # 项目文档
@@ -182,6 +192,7 @@ bun run dev custom-config.yaml
| 技术 | 说明 |
| --------------------------------------------------- | ------------------------ |
| [React 19](https://react.dev/) | UI 组件框架 |
| [React Router](https://reactrouter.com/) | SPA 路由与页面导航 |
| [TDesign React](https://tdesign.tencent.com/react/) | 企业级 UI 组件库 |
| [@tanstack/react-query](https://tanstack.com/query) | 服务端状态管理与数据获取 |
| [Recharts](https://recharts.org/) | 图表可视化(推荐使用) |