bun-app-template/openspec/changes/refactor-frontend-layout/proposal.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.9 KiB

Raw Blame History

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 已支持）

1.9 KiB Raw Blame History Unescape Escape

Why