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

DEVELOPMENT.md

@@ -37,16 +37,31 @@ src/
     app.ts          应用全局常量（name、title、subtitle、description、version）
   web/              React 前端（通过 Vite 构建）
     index.html      HTML 入口
-    app.tsx         根组件（Layout + Header + Content，/health 联调示例展示）
-    main.tsx        入口（QueryClient 挂载 + ErrorBoundary + ReactQueryDevtools + TDesign CSS 导入）
+    app.tsx         根组件（Admin 布局：Header + Sidebar + Content）
+    main.tsx        入口（BrowserRouter + QueryClient 挂载 + ErrorBoundary + ReactQueryDevtools + TDesign CSS 导入）
+    routes.tsx      路由配置（定义所有页面路由）
     styles.css      全局样式与自定义 CSS 变量
     css.d.ts        CSS 模块类型声明
+    pages/          页面组件
+      dashboard/
+        index.tsx   仪表盘页（欢迎语 + /health 联调示例）
+      users/
+        index.tsx   用户管理页（占位）
+      settings/
+        index.tsx   系统设置页（占位）
+      404/
+        index.tsx   404 页面
     components/     UI 组件
       ErrorBoundary.tsx  React 错误边界，捕获渲染异常并展示降级 UI
+      Sidebar/
+        index.tsx   侧边栏菜单组件（TDesign Menu + 折叠控制）
     hooks/          React hooks
       use-theme-preference.ts  主题偏好 hook（system/light/dark，localStorage 记忆 + matchMedia 监听）
+      use-sidebar-collapsed.ts 侧边栏折叠状态 hook（localStorage 记忆）
     utils/          前端工具函数
       time.ts       时间处理（formatCountdown、formatDurationUnit、formatRelativeTime、isOlderThan、subtractHours）
+    menu.tsx        菜单配置（路由与菜单项统一数据源）
+    routes.tsx      路由配置（定义所有页面路由）
 scripts/
     dev.ts          双进程开发服务（Bun API server + Vite dev server）
     build.ts        Vite → codegen → Bun compile 三步构建流水线
@@ -211,9 +226,9 @@ server:
 | 语言   | TypeScript                                          | 类型安全                 |
 | UI 库  | TDesign React + tdesign-icons-react                 | UI 组件与图标            |
 | 数据层 | TanStack Query (React Query) + React Query Devtools | 服务端状态管理与自动刷新 |
-| 路由   | 无（单页面应用）                                    | 不引入 React Router      |
+| 路由   | React Router v7 (Declarative mode)                  | SPA 路由与页面导航       |
 
-**不引入的依赖**：React Router（单页面场景不需要）、状态管理库（TanStack Query 即服务端状态层，组件内用 `useState` 足够）
+**不引入的依赖**：状态管理库（TanStack Query 即服务端状态层，组件内用 `useState` 足够）
 
 ### 2.2 组件树与数据流
 
@@ -222,11 +237,22 @@ main.tsx
 └── StrictMode
     └── ErrorBoundary（React 错误边界）
         └── QueryClientProvider（TanStack Query 全局挂载）
-            ├── App（根组件，Layout + Header + Content 骨架）
-            │   ├── useThemePreference() ── Header 主题模式 RadioGroup（系统/明亮/黑暗，localStorage 记忆 + theme-mode 应用）
-            │   ├── useQuery["health"] ── GET /health（30s 轮询，前后端联调示例）
-            │   └── Content ── 欢迎页 + /health API 响应 JSON 展示
-            └── ReactQueryDevtools（开发工具，仅开发环境）
+            └── BrowserRouter（React Router 路由）
+                ├── App（根组件，Admin 布局）
+                │   ├── useThemePreference() ── Header 主题模式 RadioGroup（系统/明亮/黑暗）
+                │   ├── useSidebarCollapsed() ── 侧边栏折叠状态（localStorage 记忆）
+                │   ├── Layout
+                │   │   ├── Header（折叠按钮 + 品牌名 + 页标题 + 主题切换）
+                │   │   └── Layout（嵌套）
+                │   │       ├── Aside
+                │   │       │   └── Sidebar（TDesign Menu，菜单项点击导航）
+                │   │       └── Content
+                │   │           └── AppRoutes（路由配置）
+                │   │               ├── / → DashboardPage（欢迎语 + /health 联调）
+                │   │               ├── /users → UsersPage（占位）
+                │   │               ├── /settings → SettingsPage（占位）
+                │   │               └── * → NotFoundPage（404）
+                └── ReactQueryDevtools（开发工具，仅开发环境）
 ```
 
 **Hook 架构**：
@@ -237,6 +263,22 @@ hooks/use-theme-preference.ts（浏览器 UI 偏好）
 ├── EffectiveTheme: light / dark（写入 document.documentElement theme-mode）
 ├── localStorage key: theme.preference（同一浏览器记忆）
 └── matchMedia("(prefers-color-scheme: dark)")（系统模式下跟随系统明暗变化）
+
+hooks/use-sidebar-collapsed.ts（侧边栏折叠状态）
+├── collapsed: boolean（折叠状态）
+├── localStorage key: sidebar.collapsed（同一浏览器记忆）
+└── toggleCollapsed()（切换折叠状态）
+```
+
+**菜单配置**：
+
+```
+utils/menu-config.ts（路由与菜单统一数据源）
+├── MENU_ITEMS: MenuItemConfig[]（菜单项配置数组）
+│   ├── { value: "dashboard", label: "仪表盘", path: "/", icon: <DashboardIcon /> }
+│   ├── { value: "users", label: "用户管理", path: "/users", icon: <UserIcon /> }
+│   └── { value: "settings", label: "系统设置", path: "/settings", icon: <SettingIcon /> }
+└── Sidebar 和 Routes 共同引用，保证菜单项与路由同步
 ```
 
 ### 2.3 TanStack Query 数据层