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 文档

openspec/changes/refactor-frontend-layout/specs/admin-layout/spec.md

@@ -0,0 +1,138 @@
+## ADDED Requirements
+
+### Requirement: 企业 Admin 后台布局
+
+系统 SHALL 实现 Header + 侧边栏 + 内容区的企业 Admin 后台布局，使用 TDesign Layout 组件。
+
+#### Scenario: 布局结构
+
+- **WHEN** 用户访问应用
+- **THEN** 系统 SHALL 渲染包含 Header、Aside、Content 的 Layout 结构
+
+#### Scenario: Layout 嵌套结构
+
+- **WHEN** 布局渲染
+- **THEN** 系统 SHALL 使用嵌套 Layout 结构：`Layout > (Header + Layout > (Aside + Content))`
+
+### Requirement: Header 布局
+
+Header SHALL 包含折叠按钮、页面标题、主题切换控件。
+
+#### Scenario: Header 左侧折叠按钮
+
+- **WHEN** Header 渲染
+- **THEN** 系统 SHALL 在左侧显示侧边栏折叠/展开按钮
+
+#### Scenario: Header 页面标题
+
+- **WHEN** Header 渲染
+- **THEN** 系统 SHALL 显示当前路由对应的页面标题（从 menu 获取）
+
+#### Scenario: Header 右侧主题切换
+
+- **WHEN** Header 渲染
+- **THEN** 系统 SHALL 在右侧显示主题切换 RadioGroup（系统/明亮/黑暗）
+
+### Requirement: 侧边栏菜单
+
+系统 SHALL 提供侧边栏菜单组件（Sidebar），使用 TDesign Menu 组件，支持折叠/展开。
+
+#### Scenario: 侧边栏渲染菜单项
+
+- **WHEN** 侧边栏渲染
+- **THEN** 系统 SHALL 根据 `menu.tsx` 渲染所有菜单项
+
+#### Scenario: 菜单项点击导航
+
+- **WHEN** 用户点击菜单项
+- **THEN** 系统 SHALL 使用 React Router 的 `navigate` 跳转到对应路径
+
+#### Scenario: 菜单项激活状态
+
+- **WHEN** 当前路由与菜单项路径匹配
+- **THEN** 系统 SHALL 高亮显示该菜单项
+
+### Requirement: 侧边栏折叠
+
+侧边栏 SHALL 支持折叠/展开，折叠状态持久化到 localStorage。
+
+#### Scenario: 侧边栏折叠交互
+
+- **WHEN** 用户点击 Header 左侧的折叠按钮
+- **THEN** 系统 SHALL 切换侧边栏折叠状态
+
+#### Scenario: 侧边栏折叠宽度
+
+- **WHEN** 侧边栏折叠
+- **THEN** Aside 宽度 SHALL 变为 80px，Menu 仅显示图标
+
+#### Scenario: 侧边栏展开宽度
+
+- **WHEN** 侧边栏展开
+- **THEN** Aside 宽度 SHALL 变为 232px，Menu 显示图标和文字
+
+#### Scenario: 折叠状态持久化
+
+- **WHEN** 用户切换侧边栏折叠状态
+- **THEN** 系统 SHALL 将状态存储到 localStorage key `"sidebar.collapsed"`
+
+#### Scenario: 折叠状态恢复
+
+- **WHEN** 应用初始化
+- **THEN** 系统 SHALL 从 localStorage 读取 `"sidebar.collapsed"` 并恢复折叠状态
+
+### Requirement: 侧边栏主题跟随全局
+
+侧边栏 Menu 的主题 SHALL 跟随全局主题设置，不单独设置 `theme` prop。
+
+#### Scenario: 侧边栏跟随全局主题
+
+- **WHEN** 全局主题切换为 dark
+- **THEN** 侧边栏 SHALL 自动应用 dark 主题样式
+
+### Requirement: 菜单配置单一数据源
+
+系统 SHALL 在 `src/web/menu.tsx` 定义菜单项配置，包含 `value`、`label`、`path`、`icon` 字段。
+
+#### Scenario: 菜单配置类型安全
+
+- **WHEN** 定义菜单配置
+- **THEN** 系统 SHALL 使用 `as const` 保证字面量类型推断
+
+#### Scenario: Sidebar 引用菜单配置
+
+- **WHEN** Sidebar 渲染
+- **THEN** 系统 SHALL 遍历 `MENU_ITEMS` 渲染 MenuItem
+
+### Requirement: 示例页面
+
+系统 SHALL 提供示例页面组件：Dashboard、Users、Settings、NotFound。
+
+#### Scenario: Dashboard 页面
+
+- **WHEN** 用户访问 `/`
+- **THEN** 系统 SHALL 渲染 Dashboard 页面（包含原 app.tsx 的欢迎语和 /health 展示）
+
+#### Scenario: Users 页面占位
+
+- **WHEN** 用户访问 `/users`
+- **THEN** 系统 SHALL 渲染用户管理占位页面
+
+#### Scenario: Settings 页面占位
+
+- **WHEN** 用户访问 `/settings`
+- **THEN** 系统 SHALL 渲染系统设置占位页面
+
+#### Scenario: NotFound 页面
+
+- **WHEN** 用户访问未定义路径
+- **THEN** 系统 SHALL 渲染 404 页面，提供返回首页按钮
+
+### Requirement: CSS 类名迁移
+
+原 `.dashboard-*` CSS 类名 SHALL 变更为 `.app-*`。
+
+#### Scenario: 布局类名
+
+- **WHEN** 样式应用
+- **THEN** 系统 SHALL 使用 `.app-layout`、`.app-header`、`.app-content`、`.app-sidebar` 类名

openspec/changes/refactor-frontend-layout/specs/app-constants/spec.md

@@ -0,0 +1,15 @@
+## ADDED Requirements
+
+### Requirement: 侧边栏折叠状态 localStorage key
+
+侧边栏折叠状态存储 key SHALL 为 `"sidebar.collapsed"`，不包含应用名前缀。
+
+#### Scenario: 折叠状态持久化
+
+- **WHEN** 用户切换侧边栏折叠状态
+- **THEN** 系统 SHALL 将状态存储到 localStorage key `"sidebar.collapsed"`
+
+#### Scenario: 折叠状态读取
+
+- **WHEN** 应用初始化时读取侧边栏折叠状态
+- **THEN** 系统 SHALL 从 localStorage key `"sidebar.collapsed"` 读取

openspec/changes/refactor-frontend-layout/specs/frontend-routing/spec.md

@@ -0,0 +1,57 @@
+## 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 中