朱子纯
Showing 17 changed files
docs/superpowers/specs/2026-05-08-frontend-design.md
frontend/src/App.tsx
frontend/src/components/AppShell.tsx
frontend/src/components/NavOverlay.tsx
frontend/src/pages/MainPage.tsx
frontend/src/pages/usr/LoginPage.tsx
frontend/src/pages/usr/UserDetailPage.tsx
frontend/src/pages/usr/UserFormDrawer.tsx
frontend/src/pages/usr/UserListPage.tsx
frontend/src/store/index.ts
frontend/src/store/slices/tabsSlice.ts
frontend/src/styles/tokens.css
frontend/src/test/AppShell.test.tsx
frontend/src/test/NavOverlay.test.tsx
frontend/src/test/UserDetailPage.test.tsx
frontend/src/test/UserListPage.test.tsx
frontend/src/test/tabsSlice.test.ts
+# 前端重写设计文档
+
+**日期**: 2026-05-08
+**范围**: USR 模块前端 — 登录、用户列表、用户单据
+**参考原型**: `prototype/erp.html`
+**技术栈**: 不变（React 18 + Ant Design 5 + Redux Toolkit + React Router v6 + Vite）
+
+---
+
+## 一、核心决策记录
+
+| 决策项 | 结论 | 说明 |
+|---|---|---|
+| 导航结构 | 原型 Tab 顶栏，无侧边栏 | 与 docs/06 § 1.1 不符，已与用户确认，本文档为准 |
+| 用户表单形式 | 全屏单据页（独立 Tab） | 替代原 Drawer；与原型一致 |
+| Tab 状态管理 | Redux `tabsSlice` | 切换 Tab 时 React Router navigate + 列表筛选存 URL query，保证状态可恢复 |
+| 主页 | 占位页面 | KPI 看板后续模块实现 |
+| 现有 api / store | 保留不动 | 逻辑正确，仅重写 UI 层 |
+
+> **docs/06 偏差声明**: docs/06 § 1.1 规定 Header + Sider + Content 经典 Admin 布局。本设计采用原型的 Tab 顶栏导航，无侧边栏。后续若文档更新，以本文档为 USR 模块实现基准。
+
+---
+
+## 二、架构
+
+```
+React Router v6 (路由/渲染)
+  + tabsSlice (Redux) (Tab 列表 / activeId)
+  ↓
+AppShell (深色顶栏 + Tab 栏 + NavOverlay)
+  ↓
+页面组件 (LoginPage / MainPage / UserListPage / UserDetailPage)
+  ↓
+api/ (Axios，保留) + store/slices/authSlice (保留)
+```
+
+**Tab 切换机制**:
+- Tab 切换 = `navigate(tab.path)` + Redux `activateTab(id)`
+- 列表筛选条件持久化到 URL query string（如 `/usr/users?queryField=username&queryValue=管广飞`），切回时自动恢复
+- 用户单据 Tab 固定 id `"userdetail"`，新增/编辑复用同一 Tab
+
+---
+
+## 三、路由结构
+
+| 路径 | 页面 | Tab 行为 |
+|---|---|---|
+| `/login` | LoginPage | 无 Shell，全屏 |
+| `/` | MainPage | 固定 Tab "主页"，不可关闭 |
+| `/usr/users` | UserListPage | Tab "用户列表"，可关闭 |
+| `/usr/users/new` | UserDetailPage (新增模式) | Tab "用户信息单据"，可关闭 |
+| `/usr/users/:id` | UserDetailPage (编辑模式) | 复用 Tab "用户信息单据"，可关闭 |
+
+---
+
+## 四、文件变更清单
+
+### 新建
+
+| 文件 | 职责 |
+|---|---|
+| `src/store/slices/tabsSlice.ts` | Tab 状态：`tabs: Tab[]`、`activeId: string \| null`；actions: `openTab` / `closeTab` / `activateTab` |
+| `src/components/AppShell.tsx` | 深色顶栏 + Tab 栏 + NavOverlay 入口；包裹所有已登录页面 |
+| `src/components/NavOverlay.tsx` | 全屏模块导航（按 prototype § nav-overlay 还原）；当前阶段仅"用户列表"可点击，其余展示占位 |
+| `src/pages/MainPage.tsx` | 主页占位 |
+| `src/pages/usr/UserDetailPage.tsx` | 全屏用户单据页：深色工具栏（新增/修改/删除/保存/取消/作废/重置密码）+ 3 列表单网格 + 权限组 Tab 列表 |
+
+### 重写（逻辑不变，仅 UI 层）
+
+| 文件 | 改动说明 |
+|---|---|
+| `src/pages/usr/LoginPage.tsx` | 还原原型登录视觉：蓝色渐变 hero + 右侧白色登录卡片；API 调用逻辑保留 |
+| `src/pages/usr/UserListPage.tsx` | 还原原型列表视觉：深色工具栏 + filterbar + 带单选圆点的表格；双击行导航到单据页 |
+| `src/App.tsx` | 路由改用 AppShell 包裹；新增 `/usr/users/new` 和 `/usr/users/:id` 路由 |
+| `src/styles/tokens.css` | 追加原型色值 token（见 § 五） |
+
+### 删除
+
+| 文件 | 原因 |
+|---|---|
+| `src/pages/usr/UserFormDrawer.tsx` | 由 UserDetailPage 全屏单据页替代 |
+
+### 保留不动
+
+- `src/api/` — auth.ts / usr.ts / request.ts
+- `src/store/slices/authSlice.ts`
+- `src/store/index.ts`、`src/store/hooks.ts`
+- `src/components/PermButton.tsx`
+
+---
+
+## 五、新增 Design Tokens
+
+在 `src/styles/tokens.css` `:root` 块追加：
+
+| 变量名 | 值 | 用途 |
+|---|---|---|
+| `--color-topbar-bg` | `#1f1f23` | 顶栏背景 |
+| `--color-toolbar-bg` | `#2c2f36` | 深色工具栏背景 |
+| `--color-toolbar-text` | `#e6e7ea` | 深色工具栏文字 |
+| `--color-tab-active` | `#1e84e6` | 活动 Tab 文字 / 下划线 |
+| `--color-tab-text` | `#9aa0a8` | 非活动 Tab 文字 |
+| `--color-field-bg-edit` | `#eaf3fe` | 可编辑表单字段背景 |
+| `--color-field-label-req` | `#f04848` | 必填标签色（* 号） |
+| `--color-table-border` | `#e3e6eb` | 表格边框 |
+| `--color-table-row-alt` | `#f7f8fa` | 表格隔行背景色 |
+| `--color-filterbar-bg` | `#ffffff` | 筛选栏背景 |
+| `--color-nav-overlay-bg` | `#2b3137` | 导航 Overlay 背景 |
+
+---
+
+## 六、页面规格
+
+### 6.1 LoginPage
+
+- 全屏两分区：左侧蓝色渐变 hero（`radial-gradient` 深蓝）+ 网格背景 + 品牌文字；右侧白色登录卡片
+- 卡片内：用户名输入框 / 密码输入框 / 公司版本下拉（从 `getBrands()` 加载）/ 登录按钮
+- 登录成功后 → navigate('/') + 打开"主页" Tab
+
+### 6.2 AppShell
+
+- 高度 44px 深色顶栏，从左到右：Logo（鹿角 SVG）/ "全部导航"按钮 / Tab 列表 / 右侧用户信息
+- Tab 列表：每个 Tab 含标题 + 关闭按钮（✕）；活动 Tab 蓝色下划线；主页 Tab 无关闭按钮
+- 点"全部导航"展开 NavOverlay；点 Tab 切换路由；点✕关闭 Tab 并跳转到前一个 Tab
+
+### 6.3 NavOverlay
+
+- 全屏覆盖层，背景 `#2b3137`
+- 左侧：模块分类列表（系统管理高亮，其余占位）
+- 右侧网格：按 prototype 还原 7 列模块链接；仅"用户列表"绑定 `openTab + navigate`
+- 点击任意区域外（或再次点"全部导航"）收起
+
+### 6.4 UserListPage
+
+- 深色工具栏：刷新 / 新增（`usr:create` 权限）/ 导出Excel
+- Filterbar：查询字段 Select + 匹配方式 Select + 查询值 Input + 搜索按钮 + 清空按钮
+- 表格：带单选圆点列 + 序号列 + 用户名/员工名/用户号/部门/用户类型/语言/作废/登录日期/制单人/制单日期
+- 双击行 → navigate(`/usr/users/${row.sId}`)
+- 点"新增" → navigate('/usr/users/new')
+- 筛选条件同步到 URL query string
+
+### 6.5 UserDetailPage
+
+- 深色工具栏：新增 / 修改 / 删除 / 保存 / 取消 / 作废 / 重置密码
+- 3 列表单网格（与原型一致）：创建时间（只读）/ 制单人（只读）/ 员工名（下拉，可选）/ 用户名 / 类型 / 语言 / 用户号 / 单据修改权限（复选框）
+- 可编辑字段背景 `--color-field-bg-edit`，只读字段背景 `--color-bg-input-readonly`
+- 权限组 Tab：横排 Tab 栏（权限组 / 客户查看权限等占位）+ 权限列表（复选框 + 权限名）
+- 新增模式：表单空白，保存调 `POST /api/usr/users`
+- 编辑模式：行数据通过 React Router `location.state` 从列表页传入（后端无单条 GET by ID 接口）；若直接访问 URL 但 state 为空，redirect 回 `/usr/users`
+- 保存编辑调 `PUT /api/usr/users/:id`
+- 删除、作废、重置密码：当前阶段按钮展示但不实现（REQ 范围外）
+
+---
+
+## 七、超出 REQ 范围的按钮处理
+
+工具栏中"删除"、"作废"、"取消作废"、"重置密码"在原型中存在，但当前 REQ-USR-001/002 未覆盖对应接口。这些按钮渲染但 `disabled`，tooltip 提示"功能待实现"。
 import { Navigate, Route, Routes } from 'react-router-dom'
 import { useAppSelector } from './store/hooks'
+import AppShell from './components/AppShell'
 import LoginPage from './pages/usr/LoginPage'
+import MainPage from './pages/MainPage'
 import UserListPage from './pages/usr/UserListPage'
+import UserDetailPage from './pages/usr/UserDetailPage'
-function PrivateRoute({ children }: { children: React.ReactNode }) {
+function AuthenticatedShell() {
   const accessToken = useAppSelector(s => s.auth.accessToken)
-  return accessToken ? <>{children}</> : <Navigate to="/login" replace />
+  if (!accessToken) return <Navigate to="/login" replace />
+  return <AppShell />
 }
 export default function App() {
   return (
     <Routes>
       <Route path="/login" element={<LoginPage />} />
-      <Route path="/" element={<PrivateRoute><div>主页（待实现）</div></PrivateRoute>} />
-      <Route path="/usr/users" element={<PrivateRoute><UserListPage /></PrivateRoute>} />
+      <Route element={<AuthenticatedShell />}>
+        <Route path="/" element={<MainPage />} />
+        <Route path="/usr/users" element={<UserListPage />} />
+        <Route path="/usr/users/new" element={<UserDetailPage />} />
+        <Route path="/usr/users/:id" element={<UserDetailPage />} />
+      </Route>
       <Route path="*" element={<Navigate to="/" replace />} />
     </Routes>
   )
+import { useState } from 'react'
+import { Outlet, useNavigate } from 'react-router-dom'
+import { useAppSelector, useAppDispatch } from '../store/hooks'
+import { closeTab, activateTab } from '../store/slices/tabsSlice'
+import NavOverlay from './NavOverlay'
+
+const ANTLER_PATHS = [
+  'M14 10c2 4 1 8-1 11 3-1 7 0 10 3 1-4 4-7 8-7-3 3-4 7-3 11l4 1c-1 3 0 6 3 8-3 0-6 1-8 4-1-3-4-5-8-5 2-3 2-7 0-10-3 1-7 0-10-3 3 0 5-2 6-5l-1-8z',
+  'M48 14c-2 3-2 6-1 9-2-2-5-2-8-1 1 3 1 6-1 9 3 0 5 2 6 5 1-3 4-5 7-5-2-3-2-6 0-9 2 1 5 1 7-1-2 0-4-1-5-3-1-2-3-4-5-4z',
+  'M28 38c2 3 5 5 9 5 1 4 4 7 8 8-3 2-5 5-5 9-3-2-7-3-11-2 1-3 1-7-1-10-3 0-6-1-8-4 3-1 6-3 8-6z',
+]
+
+export default function AppShell() {
+  const dispatch = useAppDispatch()
+  const navigate = useNavigate()
+  const { tabs, activeId } = useAppSelector(s => s.tabs)
+  const userInfo = useAppSelector(s => s.auth.userInfo)
+  const [navOpen, setNavOpen] = useState(false)
+
+  function handleTabClick(id: string, path: string) {
+    dispatch(activateTab(id))
+    navigate(path)
+  }
+
+  function handleTabClose(e: React.MouseEvent, id: string) {
+    e.stopPropagation()
+    const idx = tabs.findIndex(t => t.id === id)
+    dispatch(closeTab(id))
+    const remaining = tabs.filter(t => t.id !== id)
+    const newIdx = Math.min(idx, remaining.length - 1)
+    if (remaining[newIdx]) navigate(remaining[newIdx].path)
+  }
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100vh', overflow: 'hidden' }}>
+      {/* Topbar */}
+      <div style={{ display: 'flex', alignItems: 'stretch', height: 44, background: 'var(--color-topbar-bg)', color: '#fff', position: 'relative', zIndex: 30, flexShrink: 0 }}>
+        {/* Logo */}
+        <div style={{ width: 54, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+          <svg viewBox="0 0 64 64" width={30} height={30} fill="#0e1216">
+            {ANTLER_PATHS.map((d, i) => <path key={i} d={d} />)}
+          </svg>
+        </div>
+        {/* Nav toggle */}
+        <button
+          aria-label="全部导航"
+          onClick={() => setNavOpen(v => !v)}
+          style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '0 18px', color: '#fff', cursor: 'pointer', fontSize: 14, border: 'none', background: navOpen ? 'var(--color-primary)' : 'transparent', height: '100%', fontFamily: 'inherit' }}
+        >
+          <svg width={18} height={18} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+            <line x1={4} y1={7} x2={20} y2={7} /><line x1={4} y1={12} x2={20} y2={12} /><line x1={4} y1={17} x2={20} y2={17} />
+          </svg>
+          全部导航
+        </button>
+        {/* Tab list */}
+        <div style={{ display: 'flex', alignItems: 'stretch', flex: 1 }}>
+          {tabs.map(tab => (
+            <div
+              key={tab.id}
+              role="tab"
+              aria-selected={tab.id === activeId}
+              onClick={() => handleTabClick(tab.id, tab.path)}
+              style={{
+                display: 'flex', alignItems: 'center', gap: 8, padding: '0 18px', cursor: 'pointer', fontSize: 14, height: '100%',
+                color: tab.id === activeId ? 'var(--color-tab-active)' : 'var(--color-tab-text)',
+                borderBottom: tab.id === activeId ? '2px solid var(--color-tab-active)' : 'none',
+              }}
+            >
+              {tab.title}
+              {tab.closable && (
+                <button
+                  aria-label={`关闭 ${tab.title}`}
+                  onClick={e => handleTabClose(e, tab.id)}
+                  style={{ marginLeft: 6, width: 14, height: 14, borderRadius: '50%', border: 'none', background: 'transparent', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, color: 'var(--color-tab-text)', cursor: 'pointer', padding: 0 }}
+                >
+                  ✕
+                </button>
+              )}
+            </div>
+          ))}
+        </div>
+        {/* User info */}
+        <div style={{ display: 'flex', alignItems: 'center', gap: 6, paddingRight: 14, fontSize: 14 }}>
+          {userInfo?.username}({userInfo?.userType})
+        </div>
+      </div>
+      {/* Stage */}
+      <div style={{ flex: 1, position: 'relative', overflow: 'hidden' }}>
+        {navOpen && <NavOverlay onClose={() => setNavOpen(false)} />}
+        <div style={{ position: 'absolute', inset: 0, overflow: 'auto' }}>
+          <Outlet />
+        </div>
+      </div>
+    </div>
+  )
+}
+import { useNavigate } from 'react-router-dom'
+import { useAppDispatch } from '../store/hooks'
+import { openTab } from '../store/slices/tabsSlice'
+
+const LEFT_MODULES = [
+  '销售管理', 'DCS系统', '产品管理', '生产运营', '生产执行', '模具管理',
+  '采购管理', '材料库存', '成品库存', '外协管理', '物流管理', '质量管理',
+  '财务管理', '成本管理(专)', '成本管理', '设备管理', '人事行政', 'OA系统',
+  '基础设置', '系统设置',
+]
+
+type NavItem = string | { label: string; go?: string; star?: boolean }
+
+const NAV_COLS: { title: string; items: NavItem[] }[] = [
+  { title: '期初设置', items: ['客户期初', '供应商期初', '材料期初', '产品期初', '数据导入', '离线导出下载'] },
+  { title: '用户管理', items: [{ label: '用户列表', go: 'userlist', star: true }, '系统权限', '系统权限稽查表', '权限组'] },
+  { title: '系统参数', items: ['系统参数', '财务结账', '系统常量配置'] },
+  { title: '计算方案', items: ['方案列表', '计算参数'] },
+  { title: '日志', items: ['个性化模块', '操作日志', '异常清除KPI任务表', 'MYSQL监听器'] },
+  { title: '开发平台', items: ['自定义开发范例', { label: '系统功能模块设置', star: true }, 'EBC流程清单', '功能模块界面设置', '增删改存业务处理'] },
+  { title: 'API对接管理', items: ['调用第三方接口(TOKEN配置)', '调用第三方接口(接口定义)', '被第三方调用(生成token)', '数据同步', '被第三方调用(API定义)'] },
+]
+
+interface Props { onClose: () => void }
+
+export default function NavOverlay({ onClose }: Props) {
+  const navigate = useNavigate()
+  const dispatch = useAppDispatch()
+
+  function handleUserList() {
+    dispatch(openTab({ id: 'userlist', title: '用户列表', path: '/usr/users', closable: true }))
+    navigate('/usr/users')
+    onClose()
+  }
+
+  return (
+    <div
+      data-testid="nav-bg"
+      onClick={onClose}
+      style={{ position: 'absolute', inset: 0, background: 'var(--color-nav-overlay-bg)', zIndex: 20, color: '#cfd3da', display: 'flex' }}
+    >
+      <div onClick={e => e.stopPropagation()} style={{ display: 'flex', flex: 1 }}>
+        {/* Left sidebar */}
+        <div style={{ width: 200, background: 'var(--color-nav-overlay-bg)', borderRight: '1px solid var(--color-nav-sidebar-border)', padding: '8px 0', overflowY: 'auto' }}>
+          {LEFT_MODULES.map(mod => (
+            <div
+              key={mod}
+              style={{
+                display: 'flex', alignItems: 'center', gap: 10, padding: '11px 18px', fontSize: 14, cursor: 'pointer',
+                color: mod === '系统设置' ? 'var(--color-tab-active)' : 'var(--color-nav-item-text)',
+                background: mod === '系统设置' ? 'var(--color-nav-sidebar-active-bg)' : 'transparent',
+              }}
+            >
+              {mod}
+            </div>
+          ))}
+        </div>
+        {/* Right grid */}
+        <div style={{ flex: 1, padding: '30px 40px', display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: '30px 40px', alignContent: 'start', overflowY: 'auto' }}>
+          {NAV_COLS.map(col => (
+            <div key={col.title}>
+              <h3 style={{ fontSize: 15, color: 'var(--color-nav-col-header)', fontWeight: 500, margin: '0 0 18px', borderBottom: '1px solid var(--color-nav-col-divider)', paddingBottom: 10 }}>
+                {col.title}
+              </h3>
+              {col.items.map(item => {
+                if (typeof item === 'string') {
+                  return <div key={item} style={{ padding: '7px 0', color: 'var(--color-nav-item-text)', fontSize: 14 }}>{item}</div>
+                }
+                return (
+                  <div
+                    key={item.label}
+                    onClick={item.go === 'userlist' ? handleUserList : undefined}
+                    style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '7px 0', color: 'var(--color-nav-item-text)', fontSize: 14, cursor: item.go === 'userlist' ? 'pointer' : 'default' }}
+                  >
+                    {item.label}
+                    {item.star && <span style={{ color: 'var(--color-nav-item-star)' }}>★</span>}
+                  </div>
+                )
+              })}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+import { useEffect } from 'react'
+import { useAppDispatch } from '../store/hooks'
+import { activateTab } from '../store/slices/tabsSlice'
+
+export default function MainPage() {
+  const dispatch = useAppDispatch()
+  useEffect(() => {
+    dispatch(activateTab('main'))
+  }, [dispatch])
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', color: '#888', fontSize: 16 }}>
+      主页（功能待实现）
+    </div>
+  )
+}
 import { useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { Button, Form, Input, message, Select } from 'antd'
-import { getBrands, login, BrandVO } from '../../api/auth'
+import { Button, Form, Input, Select, message } from 'antd'
+import { getBrands, login, type BrandVO } from '../../api/auth'
 import { setCredentials } from '../../store/slices/authSlice'
+import { activateTab } from '../../store/slices/tabsSlice'
 import { useAppDispatch } from '../../store/hooks'
+const ANTLER_PATHS = [
+  'M14 10c2 4 1 8-1 11 3-1 7 0 10 3 1-4 4-7 8-7-3 3-4 7-3 11l4 1c-1 3 0 6 3 8-3 0-6 1-8 4-1-3-4-5-8-5 2-3 2-7 0-10-3 1-7 0-10-3 3 0 5-2 6-5l-1-8z',
+  'M48 14c-2 3-2 6-1 9-2-2-5-2-8-1 1 3 1 6-1 9 3 0 5 2 6 5 1-3 4-5 7-5-2-3-2-6 0-9 2 1 5 1 7-1-2 0-4-1-5-3-1-2-3-4-5-4z',
+  'M28 38c2 3 5 5 9 5 1 4 4 7 8 8-3 2-5 5-5 9-3-2-7-3-11-2 1-3 1-7-1-10-3 0-6-1-8-4 3-1 6-3 8-6z',
+]
+
 export default function LoginPage() {
   const [brandOptions, setBrandOptions] = useState<BrandVO[]>([])
   const [loading, setLoading] = useState(false)
@@ -19,17 +26,14 @@ export default function LoginPage() {
       const defaultNo = std ? std.sNo : brands[0]?.sNo
       if (defaultNo) form.setFieldValue('brandNo', defaultNo)
     }).catch(() => {})
-  }, [])
+  }, [form])
   const onFinish = async (values: { brandNo: string; username: string; password: string }) => {
     setLoading(true)
     try {
       const result = await login(values)
-      dispatch(setCredentials({
-        accessToken: result.accessToken,
-        refreshToken: result.refreshToken,
-        userInfo: result.userInfo
-      }))
+      dispatch(setCredentials({ accessToken: result.accessToken, refreshToken: result.refreshToken, userInfo: result.userInfo }))
+      dispatch(activateTab('main'))
       navigate('/')
     } catch (e: unknown) {
       message.error(e instanceof Error ? e.message : '登录失败')
@@ -39,28 +43,49 @@ export default function LoginPage() {
   }
   return (
-    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100vh' }}>
-      <div style={{ width: 360 }}>
-        <h2 style={{ textAlign: 'center', marginBottom: 24 }}>小羚羊 ERP</h2>
-        <Form form={form} layout="vertical" onFinish={onFinish}>
-          <Form.Item label="公司/版本" name="brandNo" rules={[{ required: true, message: '请选择公司/版本' }]}>
-            <Select
-              options={brandOptions.map(b => ({ value: b.sNo, label: b.sName }))}
-              placeholder="请选择公司/版本"
-            />
-          </Form.Item>
-          <Form.Item label="用户名" name="username" rules={[{ required: true, message: '请输入用户名' }]}>
-            <Input placeholder="请输入用户名" />
-          </Form.Item>
-          <Form.Item label="密码" name="password" rules={[{ required: true, message: '请输入密码' }]}>
-            <Input.Password placeholder="请输入密码" />
-          </Form.Item>
-          <Form.Item>
-            <Button type="primary" htmlType="submit" loading={loading} block>
-              登录
-            </Button>
-          </Form.Item>
-        </Form>
+    <div style={{ position: 'absolute', inset: 0, background: 'var(--color-login-bg)', display: 'flex', flexDirection: 'column' }}>
+      {/* Header */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '18px 36px' }}>
+        <div style={{ width: 42, height: 42, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+          <svg viewBox="0 0 64 64" width={42} height={42} fill="#0e1216">
+            {ANTLER_PATHS.map((d, i) => <path key={i} d={d} />)}
+          </svg>
+        </div>
+        <span style={{ fontSize: 24, fontWeight: 700, color: 'var(--color-login-brand)', letterSpacing: 2 }}>Antler ERP</span>
+        <span style={{ color: '#444', fontSize: 14, marginLeft: 6 }}>欢迎登录EBC平台</span>
+      </div>
+      {/* Hero */}
+      <div style={{ flex: 1, position: 'relative', background: 'radial-gradient(ellipse at center, var(--color-login-hero-start) 0%, var(--color-login-hero-mid) 60%, var(--color-login-hero-end) 100%)', overflow: 'hidden' }}>
+        {/* Brand text */}
+        <div style={{ position: 'absolute', left: '8%', top: '35%', color: '#fff', zIndex: 2 }}>
+          <div style={{ fontSize: 30, fontWeight: 300, color: '#cfe1ff', marginBottom: 6 }}>Enterprise Business Capability</div>
+          <div style={{ fontSize: 54, fontWeight: 700, letterSpacing: 4, marginBottom: 4 }}>企业业务能力平台</div>
+          <div style={{ fontSize: 90, fontWeight: 800, letterSpacing: 8, lineHeight: 0.9 }}>ERP</div>
+        </div>
+        {/* Login card */}
+        <div style={{ position: 'absolute', right: '8%', top: '50%', transform: 'translateY(-50%)', background: '#fff', width: 380, padding: '36px 32px', borderRadius: 2, boxShadow: '0 12px 40px rgba(0,0,0,.3)', zIndex: 3 }}>
+          <h3 style={{ margin: '0 0 22px', fontSize: 18, color: '#333', fontWeight: 500 }}>用户登录</h3>
+          <Form form={form} layout="vertical" onFinish={onFinish}>
+            <Form.Item label="公司/版本" name="brandNo" rules={[{ required: true, message: '请选择公司/版本' }]}>
+              <Select options={brandOptions.map(b => ({ value: b.sNo, label: b.sName }))} placeholder="请选择公司/版本" />
+            </Form.Item>
+            <Form.Item label="用户名" name="username" rules={[{ required: true, message: '请输入用户名' }]}>
+              <Input placeholder="请输入用户名" />
+            </Form.Item>
+            <Form.Item label="密码" name="password" rules={[{ required: true, message: '请输入密码' }]}>
+              <Input.Password placeholder="请输入密码" />
+            </Form.Item>
+            <Form.Item>
+              <Button type="primary" htmlType="submit" loading={loading} block style={{ height: 42, fontSize: 15, letterSpacing: 8, borderRadius: 2 }}>
+                登 录
+              </Button>
+            </Form.Item>
+          </Form>
+        </div>
+      </div>
+      {/* Footer */}
+      <div style={{ background: 'var(--color-login-bg)', textAlign: 'center', padding: '14px 8px', color: 'var(--color-login-text-muted)', fontSize: 12, borderTop: '1px solid var(--color-login-border)' }}>
+        🛠 ©Copyright Antler Software | 印刷ERP | 400-880-6237
       </div>
     </div>
   )
+import { useEffect, useState } from 'react'
+import { useNavigate, useLocation, useParams } from 'react-router-dom'
+import { message } from 'antd'
+import { useAppDispatch } from '../../store/hooks'
+import { openTab } from '../../store/slices/tabsSlice'
+import { getStaffs, getPermissionGroups, createUser, updateUser } from '../../api/usr'
+import type { StaffVO, PermissionGroupVO, UserListItemVO, UserCreateReq, UserUpdateReq } from '../../api/usr'
+
+// REQ-USR-001: 增加用户
+// REQ-USR-002: 修改用户
+export default function UserDetailPage() {
+  const { id } = useParams()
+  const navigate = useNavigate()
+  const location = useLocation()
+  const dispatch = useAppDispatch()
+
+  const isNew = !id
+  const rowData = location.state as UserListItemVO | null
+
+  const [staffs, setStaffs] = useState<StaffVO[]>([])
+  const [permGroups, setPermGroups] = useState<PermissionGroupVO[]>([])
+  const [selectedPermIds, setSelectedPermIds] = useState<string[]>([])
+  const [submitting, setSubmitting] = useState(false)
+  const [activePermTab, setActivePermTab] = useState(0)
+
+  const [userCode, setUserCode] = useState('')
+  const [username, setUsername] = useState('')
+  const [userType, setUserType] = useState<'普通用户' | '超级管理员'>('普通用户')
+  const [language, setLanguage] = useState<'中文' | '英文' | '繁体'>('中文')
+  const [canEditDoc, setCanEditDoc] = useState(false)
+  const [isDisabled, setIsDisabled] = useState(false)
+  const [employeeId, setEmployeeId] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!isNew && !rowData) {
+      navigate('/usr/users', { replace: true })
+      return
+    }
+    dispatch(openTab({ id: 'userdetail', title: '用户信息单据', path: location.pathname, closable: true }))
+    getStaffs().then(setStaffs).catch(() => {})
+    getPermissionGroups().then(setPermGroups).catch(() => {})
+    if (!isNew && rowData) {
+      setUserType(rowData.sUserType as '普通用户' | '超级管理员')
+      setLanguage(rowData.sLanguage as '中文' | '英文' | '繁体')
+      setCanEditDoc(rowData.bCanEditDoc === 1)
+      setIsDisabled(rowData.bIsDisabled === 1)
+    }
+  }, [])  // eslint-disable-line react-hooks/exhaustive-deps
+
+  async function handleSave() {
+    if (isNew) {
+      if (!userCode.trim()) { message.error('请输入用户号'); return }
+      if (!username.trim()) { message.error('请输入用户名'); return }
+    }
+    setSubmitting(true)
+    try {
+      if (isNew) {
+        const req: UserCreateReq = { userCode, username, userType, language, canEditDoc, employeeId, permGroupIds: selectedPermIds }
+        await createUser(req)
+        message.success('新增用户成功')
+      } else {
+        const req: UserUpdateReq = { userType, language, canEditDoc, isDisabled, employeeId, permGroupIds: selectedPermIds }
+        await updateUser(id!, req)
+        message.success('修改用户成功')
+      }
+      navigate('/usr/users')
+    } catch (e: unknown) {
+      if (e instanceof Error) message.error(e.message)
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  const PERM_TABS = ['权限组', '客户查看权限', '供应商查看权限', '人员查看权限', '工序查看权限', '司机查看权限']
+
+  const fieldBg = 'var(--color-field-bg-edit)'
+  const readonlyBg = 'var(--color-form-bg-readonly)'
+  const inputStyle: React.CSSProperties = { flex: 1, height: 28, border: '1px solid #d5d8de', borderRadius: 2, padding: '0 10px', background: fieldBg, minWidth: 0, fontSize: 13, fontFamily: 'inherit' }
+  const roStyle: React.CSSProperties = { flex: 1, height: 28, border: '1px solid #d5d8de', borderRadius: 2, padding: '0 10px', background: readonlyBg, color: '#444', display: 'flex', alignItems: 'center', fontSize: 13, minWidth: 0, overflow: 'hidden' }
+  const selectStyle: React.CSSProperties = { ...inputStyle, padding: '0 8px' }
+  const cellStyle: React.CSSProperties = { display: 'flex', alignItems: 'center', gap: 6, padding: '8px 10px' }
+  const lblStyle: React.CSSProperties = { minWidth: 88, color: '#333', fontSize: 13, textAlign: 'right', flexShrink: 0 }
+  const reqLblStyle: React.CSSProperties = { ...lblStyle, color: 'var(--color-field-label-req)' }
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
+      {/* Dark toolbar */}
+      <div style={{ background: 'var(--color-toolbar-bg)', color: 'var(--color-toolbar-text)', display: 'flex', alignItems: 'center', gap: 6, padding: '0 8px', height: 38, flexShrink: 0 }}>
+        {[
+          { label: '⊕ 新增', onClick: () => navigate('/usr/users/new'), disabled: false },
+          { label: '✎ 修改', onClick: undefined, disabled: true },
+          { label: '🗑 删除', onClick: undefined, disabled: true, title: '功能待实现' },
+          { label: '💾 保存', onClick: handleSave, disabled: submitting },
+          { label: '✕ 取消', onClick: () => navigate('/usr/users'), disabled: false },
+          { label: '作废', onClick: undefined, disabled: true, title: '功能待实现' },
+          { label: '重置密码', onClick: undefined, disabled: true, title: '功能待实现' },
+        ].map(btn => (
+          <button
+            key={btn.label}
+            onClick={btn.onClick}
+            disabled={btn.disabled}
+            title={btn.title}
+            style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '6px 12px', color: btn.disabled ? '#666' : 'var(--color-toolbar-text)', cursor: btn.disabled ? 'not-allowed' : 'pointer', fontSize: 13, borderRadius: 2, border: 'none', background: 'transparent', fontFamily: 'inherit', opacity: btn.disabled ? 0.5 : 1 }}
+          >
+            {btn.label}
+          </button>
+        ))}
+        <span style={{ flex: 1 }} />
+        <span style={{ padding: '6px 8px', color: '#cfd2d8', cursor: 'pointer' }}>⚙</span>
+      </div>
+
+      {/* 3-column form grid */}
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', background: '#fff', padding: '10px 14px', borderBottom: '1px solid var(--color-table-border)', flexShrink: 0 }}>
+        {/* Row 1: 创建时间 / 制单人 / 员工名 */}
+        <div style={cellStyle}>
+          <span style={lblStyle}>创建时间：</span>
+          <div style={roStyle}>{isNew ? '' : rowData?.tCreateDate}</div>
+        </div>
+        <div style={cellStyle}>
+          <span style={lblStyle}>制单人：</span>
+          <div style={roStyle}>{isNew ? '保存后自动生成' : rowData?.sCreatorUsername}</div>
+        </div>
+        <div style={cellStyle}>
+          <span style={reqLblStyle}>*员工名：</span>
+          <select value={employeeId ?? ''} onChange={e => setEmployeeId(e.target.value || null)} style={{ ...selectStyle, backgroundImage: 'url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'10\' height=\'10\' viewBox=\'0 0 10 10\'><path d=\'M2 3l3 4 3-4z\' fill=\'%23888\'/></svg>")', backgroundRepeat: 'no-repeat', backgroundPosition: 'right 8px center', paddingRight: 24 }}>
+            <option value="">— 不关联 —</option>
+            {staffs.map(s => <option key={s.sId} value={s.sId}>{s.sStaffName}</option>)}
+          </select>
+        </div>
+        {/* Row 2: 用户名 / 类型 / 语言 */}
+        <div style={cellStyle}>
+          <span style={isNew ? reqLblStyle : lblStyle}>{isNew ? '*用户名：' : '用户名：'}</span>
+          {isNew
+            ? <input type="text" value={username} onChange={e => setUsername(e.target.value)} placeholder="请输入用户名" style={inputStyle} />
+            : <div style={roStyle}>{rowData?.sUsername}</div>}
+        </div>
+        <div style={cellStyle}>
+          <span style={reqLblStyle}>*类型：</span>
+          <select value={userType} onChange={e => setUserType(e.target.value as typeof userType)} style={selectStyle}>
+            <option value="普通用户">普通用户</option>
+            <option value="超级管理员">超级管理员</option>
+          </select>
+        </div>
+        <div style={cellStyle}>
+          <span style={reqLblStyle}>*语言：</span>
+          <select value={language} onChange={e => setLanguage(e.target.value as typeof language)} style={selectStyle}>
+            <option value="中文">中文</option>
+            <option value="英文">English</option>
+            <option value="繁体">繁體</option>
+          </select>
+        </div>
+        {/* Row 3: 用户号 / (empty) / 单据修改权限 */}
+        <div style={cellStyle}>
+          <span style={isNew ? reqLblStyle : lblStyle}>{isNew ? '*用户号：' : '用户号：'}</span>
+          {isNew
+            ? <input type="text" value={userCode} onChange={e => setUserCode(e.target.value)} placeholder="请输入用户号" style={inputStyle} />
+            : <div style={roStyle}>{rowData?.sUserCode}</div>}
+        </div>
+        <div style={cellStyle} />
+        <div style={cellStyle}>
+          <span style={lblStyle}>单据修改权限：</span>
+          <input type="checkbox" aria-hidden="true" checked={canEditDoc} onChange={e => setCanEditDoc(e.target.checked)} style={{ width: 14, height: 14 }} />
+        </div>
+      </div>
+
+      {/* Permission tabs row */}
+      <div style={{ display: 'flex', background: '#fff', borderBottom: '1px solid var(--color-table-border)', padding: '0 6px', flexShrink: 0 }}>
+        {PERM_TABS.map((tab, i) => (
+          <div
+            key={tab}
+            onClick={() => setActivePermTab(i)}
+            style={{ padding: '11px 18px', fontSize: 14, color: i === activePermTab ? 'var(--color-tab-active)' : '#444', cursor: 'pointer', borderBottom: i === activePermTab ? `2px solid var(--color-tab-active)` : 'none', marginRight: 4 }}
+          >
+            {tab}
+          </div>
+        ))}
+      </div>
+
+      {/* Permission list
+          KNOWN LIMITATION (edit mode): UserListItemVO does not include permGroupIds (backend list API
+          does not return them). In edit mode, selectedPermIds starts empty — saving will overwrite
+          existing permissions with whatever the user selects here. A future backend GET /usr/users/:id
+          endpoint should return permGroupIds so they can be pre-populated. */}
+      {!isNew && activePermTab === 0 && (
+        <div style={{ background: '#fffbe6', borderBottom: '1px solid #ffe58f', padding: '8px 14px', fontSize: 12, color: '#ad6800' }}>
+          ⚠ 编辑模式下权限组未预加载（后端列表接口不返回 permGroupIds）。保存将以当前勾选为准，请重新勾选所需权限组。
+        </div>
+      )}
+      <div style={{ flex: 1, background: '#fff', overflow: 'auto' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '10px 14px', borderBottom: '1px solid var(--color-table-border)', background: 'var(--color-table-header-bg)', fontWeight: 500, color: '#222', fontSize: 13 }}>
+          <span style={{ width: 14, height: 14, border: '1px solid #b8bcc3', display: 'inline-block', flexShrink: 0 }} />
+          <span>权限分类</span>
+        </div>
+        {activePermTab === 0
+          ? permGroups.map(pg => (
+              <div key={pg.sId} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '10px 14px', borderBottom: '1px solid var(--color-table-border)', fontSize: 13, color: '#333' }}>
+                <input
+                  type="checkbox"
+                  checked={selectedPermIds.includes(pg.sId)}
+                  onChange={e => setSelectedPermIds(prev => e.target.checked ? [...prev, pg.sId] : prev.filter(x => x !== pg.sId))}
+                  style={{ width: 14, height: 14, flexShrink: 0 }}
+                />
+                <span>{pg.sGroupName}</span>
+              </div>
+            ))
+          : <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: 100, color: '#aaa' }}>功能待实现</div>}
+      </div>
+    </div>
+  )
+}
-import { useState, useEffect } from 'react'
-import { Table, Select, Input, Button, Space } from 'antd'
-import type { ColumnsType } from 'antd/es/table'
+import { useEffect, useState } from 'react'
+import { useNavigate, useSearchParams, useLocation } from 'react-router-dom'
+import { useAppDispatch } from '../../store/hooks'
+import { openTab, updateTabPath } from '../../store/slices/tabsSlice'
 import { PermButton } from '../../components/PermButton'
-import UserFormDrawer from './UserFormDrawer'
 import { getUserList } from '../../api/usr'
 import type { PageVO, UserListItemVO } from '../../api/usr'
@@ -24,110 +24,136 @@ const MATCH_TYPES = [
 ]
 // REQ-USR-003: 查询用户
-// REQ-USR-002: 修改用户
+// REQ-USR-001: 新增入口 (navigate to /usr/users/new)
+// REQ-USR-002: 修改入口 (double-click row → /usr/users/:id)
 export default function UserListPage() {
-  const [drawerOpen, setDrawerOpen] = useState(false)
-  const [editingUser, setEditingUser] = useState<UserListItemVO | null>(null)
+  const navigate = useNavigate()
+  const dispatch = useAppDispatch()
+  const location = useLocation()
+  const [searchParams, setSearchParams] = useSearchParams()
+
+  const [queryField, setQueryField] = useState(searchParams.get('queryField') ?? 'username')
+  const [matchType, setMatchType] = useState(searchParams.get('matchType') ?? 'contains')
+  const [queryValue, setQueryValue] = useState(searchParams.get('queryValue') ?? '')
+  const [currentPage, setCurrentPage] = useState(Number(searchParams.get('page') ?? '1'))
   const [data, setData] = useState<PageVO<UserListItemVO> | null>(null)
-  const [queryField, setQueryField] = useState('username')
-  const [matchType, setMatchType] = useState('contains')
-  const [queryValue, setQueryValue] = useState('')
-  const [currentPage, setCurrentPage] = useState(1)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+
+  useEffect(() => {
+    dispatch(openTab({ id: 'userlist', title: '用户列表', path: location.pathname + location.search, closable: true }))
+    doLoad(currentPage, queryField, matchType, queryValue)
+  }, [])
-  const load = (pg = 1) => {
+  function doLoad(pg: number, field: string, match: string, val: string) {
     setCurrentPage(pg)
-    getUserList({ queryField, matchType, queryValue, page: pg, pageSize: 20 }).then(setData)
+    getUserList({ queryField: field, matchType: match, queryValue: val, page: pg, pageSize: 20 }).then(setData)
   }
-  useEffect(() => {
-    load()
-  }, [])
+  function handleSearch() {
+    const newPath = `/usr/users?queryField=${queryField}&matchType=${matchType}&queryValue=${encodeURIComponent(queryValue)}`
+    setSearchParams({ queryField, matchType, queryValue, page: '1' })
+    dispatch(updateTabPath({ id: 'userlist', path: newPath }))
+    doLoad(1, queryField, matchType, queryValue)
+  }
-  const columns: ColumnsType<UserListItemVO> = [
-    { title: '用户名', dataIndex: 'sUsername' },
-    { title: '员工名', dataIndex: 'sStaffName' },
-    { title: '用户号', dataIndex: 'sUserCode' },
-    { title: '部门', dataIndex: 'sDepartment' },
-    { title: '用户类型', dataIndex: 'sUserType' },
-    { title: '语言', dataIndex: 'sLanguage' },
-    { title: '作废', dataIndex: 'bIsDisabled', render: (v: number) => v ? '是' : '否' },
-    { title: '登录日期', dataIndex: 'tLastLoginDate' },
-    { title: '制单人', dataIndex: 'sCreatorUsername' },
-    { title: '制单日期', dataIndex: 'tCreateDate' },
-    {
-      title: '操作',
-      key: 'action',
-      render: (_, record) => (
-        <PermButton
-          permission="usr:edit"
-          type="link"
-          onClick={() => setEditingUser(record)}
-        >
-          修改
-        </PermButton>
-      )
-    },
-  ]
+  function handleClear() {
+    setQueryField('username'); setMatchType('contains'); setQueryValue('')
+    setSearchParams({})
+    dispatch(updateTabPath({ id: 'userlist', path: '/usr/users' }))
+    doLoad(1, 'username', 'contains', '')
+  }
+
+  const totalPages = data ? Math.ceil(data.total / 20) : 1
   return (
-    <div>
-      <Space style={{ marginBottom: 16 }} wrap>
-        <Select
-          value={queryField}
-          onChange={setQueryField}
-          options={QUERY_FIELDS}
-          style={{ width: 120 }}
-        />
-        <Select
-          value={matchType}
-          onChange={setMatchType}
-          options={MATCH_TYPES}
-          style={{ width: 100 }}
-        />
-        <Input
-          value={queryValue}
-          onChange={e => setQueryValue(e.target.value)}
-          placeholder="查询值"
-          style={{ width: 160 }}
-        />
-        <Button type="primary" onClick={() => load(1)}>搜索</Button>
-        <PermButton
-          permission="usr:create"
-          type="primary"
-          onClick={() => setDrawerOpen(true)}
-        >
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+      {/* Toolbar */}
+      <div style={{ background: 'var(--color-toolbar-bg)', color: 'var(--color-toolbar-text)', display: 'flex', alignItems: 'center', gap: 6, padding: '0 8px', height: 38, flexShrink: 0 }}>
+        <button onClick={() => doLoad(currentPage, queryField, matchType, queryValue)} style={tbBtn}>
+          <svg width={14} height={14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}><path d="M21 12a9 9 0 1 1-3-6.7"/><path d="M21 4v5h-5"/></svg>
+          刷新
+        </button>
+        <PermButton permission="usr:create" onClick={() => navigate('/usr/users/new')} style={tbBtn}>
+          <svg width={14} height={14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}><circle cx={12} cy={12} r={9}/><path d="M12 8v8M8 12h8"/></svg>
           新增
         </PermButton>
-      </Space>
-      <Table
-        dataSource={data?.list ?? []}
-        columns={columns}
-        rowKey="sId"
-        pagination={{
-          total: data?.total ?? 0,
-          pageSize: 20,
-          current: currentPage,
-          onChange: load,
-        }}
-      />
-      <UserFormDrawer
-        open={drawerOpen}
-        onClose={() => setDrawerOpen(false)}
-        onSuccess={() => { setDrawerOpen(false); load(1) }}
-      />
-      <UserFormDrawer
-        open={editingUser !== null}
-        userId={editingUser?.sId}
-        initialData={editingUser ? {
-          userType: editingUser.sUserType,
-          language: editingUser.sLanguage,
-          canEditDoc: editingUser.bCanEditDoc === 1,
-          isDisabled: editingUser.bIsDisabled === 1,
-          employeeId: null,
-        } : undefined}
-        onClose={() => setEditingUser(null)}
-        onSuccess={() => { setEditingUser(null); load(1) }}
-      />
+        <button style={tbBtn}>
+          <svg width={14} height={14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}><path d="M4 4h12l4 4v12H4z"/><path d="M16 4v4h4M8 12h8M8 16h8"/></svg>
+          导出Excel
+        </button>
+        <span style={{ flex: 1 }} />
+        <span style={{ padding: '6px 8px', cursor: 'pointer', color: '#cfd2d8' }}>⚙</span>
+      </div>
+      {/* Filter bar */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '10px 12px', background: 'var(--color-filterbar-bg)', borderBottom: '1px solid var(--color-table-border)', flexShrink: 0 }}>
+        <select value={queryField} onChange={e => setQueryField(e.target.value)} style={fSel}>
+          {QUERY_FIELDS.map(f => <option key={f.value} value={f.value}>{f.label}</option>)}
+        </select>
+        <select value={matchType} onChange={e => setMatchType(e.target.value)} style={fSel}>
+          {MATCH_TYPES.map(m => <option key={m.value} value={m.value}>{m.label}</option>)}
+        </select>
+        <input value={queryValue} onChange={e => setQueryValue(e.target.value)} style={fIn} />
+        <span style={{ width: 34, height: 30, background: '#dfe5ee', border: '1px solid #d5d8de', display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 2, cursor: 'pointer', color: '#3776c8' }}>▾</span>
+        <button onClick={handleSearch} style={fBtn}>
+          <svg width={13} height={13} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}><circle cx={11} cy={11} r={7}/><line x1={21} y1={21} x2={16.5} y2={16.5}/></svg>
+          搜索
+        </button>
+        <button onClick={handleClear} style={{ ...fBtn, background: '#fff', color: '#444', borderColor: '#cfd3da' }}>⊗ 清空</button>
+      </div>
+      {/* Table */}
+      <div style={{ flex: 1, overflow: 'auto', background: '#fff', border: '1px solid var(--color-table-border)', borderTop: 'none' }}>
+        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
+          <thead>
+            <tr>
+              {['', '序号', '用户名', '员工名', '用户号', '部门', '用户类型', '语言', '作废', '登录日期', '制单人', '制单日期'].map((h, i) => (
+                <th key={i} style={{ background: 'var(--color-table-header-bg)', fontWeight: 500, color: '#333', padding: '7px 10px', textAlign: 'left', whiteSpace: 'nowrap', border: '1px solid var(--color-table-border)', position: 'sticky', top: 0, zIndex: 1, width: i === 0 ? 32 : i === 1 ? 60 : undefined }}>
+                  {h}{i > 1 && <span style={{ color: '#aaa', marginLeft: 4 }}>⇅ ⌕</span>}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {(data?.list ?? []).map((row, idx) => (
+              <tr
+                key={row.sId}
+                onClick={() => setSelectedId(row.sId)}
+                onDoubleClick={() => navigate(`/usr/users/${row.sId}`, { state: row })}
+                style={{ background: row.sId === selectedId ? 'var(--color-table-row-bg-selected)' : idx % 2 === 1 ? 'var(--color-table-row-alt)' : '#fff', cursor: 'pointer' }}
+              >
+                <td style={td}><span style={{ width: 14, height: 14, border: '1px solid #b8bcc3', borderRadius: '50%', display: 'inline-block', background: row.sId === selectedId ? 'var(--color-primary)' : '#fff' }} /></td>
+                <td style={td}>{idx + 1}</td>
+                <td style={td}>{row.sUsername}</td>
+                <td style={td}>{row.sStaffName ?? ''}</td>
+                <td style={td}>{row.sUserCode}</td>
+                <td style={td}>{row.sDepartment ?? ''}</td>
+                <td style={td}>{row.sUserType}</td>
+                <td style={td}>{row.sLanguage}</td>
+                <td style={td}>{row.bIsDisabled ? '是' : ''}</td>
+                <td style={td}>{row.tLastLoginDate ?? ''}</td>
+                <td style={td}>{row.sCreatorUsername ?? ''}</td>
+                <td style={td}>{row.tCreateDate}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      {/* Pager */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '10px 14px', background: '#fff', borderTop: '1px solid var(--color-table-border)', justifyContent: 'flex-end', fontSize: 13, color: '#555', flexShrink: 0 }}>
+        <span>当前显示 共{data?.total ?? 0}条记录</span>
+        <button onClick={() => currentPage > 1 && doLoad(currentPage - 1, queryField, matchType, queryValue)} style={pgBtn}>‹</button>
+        <span style={{ width: 28, height: 28, border: '1px solid var(--color-primary)', color: 'var(--color-primary)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', borderRadius: 2 }}>{currentPage}</span>
+        <button onClick={() => currentPage < totalPages && doLoad(currentPage + 1, queryField, matchType, queryValue)} style={pgBtn}>›</button>
+        <select defaultValue="10000" style={{ height: 28, border: '1px solid #d5d8de', borderRadius: 2, padding: '0 8px' }}>
+          <option value="10000">10000 条/页</option>
+        </select>
+      </div>
     </div>
   )
 }
+
+const tbBtn: React.CSSProperties = { display: 'inline-flex', alignItems: 'center', gap: 6, padding: '6px 12px', color: 'var(--color-toolbar-text)', cursor: 'pointer', fontSize: 13, borderRadius: 2, border: 'none', background: 'transparent', fontFamily: 'inherit' }
+const fSel: React.CSSProperties = { height: 30, border: '1px solid #d5d8de', borderRadius: 2, padding: '0 28px 0 10px', background: '#fff', minWidth: 100 }
+const fIn: React.CSSProperties = { height: 30, border: '1px solid #d5d8de', borderRadius: 2, padding: '0 10px', minWidth: 140, fontSize: 13, fontFamily: 'inherit' }
+const fBtn: React.CSSProperties = { height: 30, padding: '0 14px', borderRadius: 2, border: '1px solid var(--color-primary)', background: 'var(--color-primary)', color: '#fff', display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 13, cursor: 'pointer', fontFamily: 'inherit' }
+const td: React.CSSProperties = { padding: '7px 10px', textAlign: 'left', whiteSpace: 'nowrap', border: '1px solid var(--color-table-border)' }
+const pgBtn: React.CSSProperties = { width: 28, height: 28, border: '1px solid #d5d8de', background: '#fff', borderRadius: 2, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', color: '#666', fontFamily: 'inherit' }
 import { configureStore } from '@reduxjs/toolkit'
 import authReducer from './slices/authSlice'
+import tabsReducer from './slices/tabsSlice'
 export const store = configureStore({
   reducer: {
-    auth: authReducer
-  }
+    auth: authReducer,
+    tabs: tabsReducer,
+  },
 })
 export type RootState = ReturnType<typeof store.getState>
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+
+export interface Tab {
+  id: string
+  title: string
+  path: string
+  closable: boolean
+}
+
+interface TabsState {
+  tabs: Tab[]
+  activeId: string | null
+}
+
+const initialState: TabsState = {
+  tabs: [{ id: 'main', title: '主页', path: '/', closable: false }],
+  activeId: 'main',
+}
+
+const tabsSlice = createSlice({
+  name: 'tabs',
+  initialState,
+  reducers: {
+    openTab(state, action: PayloadAction<Tab>) {
+      const existing = state.tabs.find(t => t.id === action.payload.id)
+      if (existing) {
+        existing.path = action.payload.path
+      } else {
+        state.tabs.push(action.payload)
+      }
+      state.activeId = action.payload.id
+    },
+    closeTab(state, action: PayloadAction<string>) {
+      const idx = state.tabs.findIndex(t => t.id === action.payload)
+      if (idx === -1) return
+      state.tabs.splice(idx, 1)
+      if (state.activeId === action.payload) {
+        const newIdx = Math.min(idx, state.tabs.length - 1)
+        state.activeId = state.tabs[newIdx]?.id ?? null
+      }
+    },
+    activateTab(state, action: PayloadAction<string>) {
+      state.activeId = action.payload
+    },
+    updateTabPath(state, action: PayloadAction<{ id: string; path: string }>) {
+      const tab = state.tabs.find(t => t.id === action.payload.id)
+      if (tab) tab.path = action.payload.path
+    },
+  },
+})
+
+export const { openTab, closeTab, activateTab, updateTabPath } = tabsSlice.actions
+export default tabsSlice.reducer
@@ -40,4 +40,34 @@
   --color-table-row-fg: #000000;
   --color-table-header-bg: #f5f5f5;
   --color-table-header-fg: rgba(0, 0, 0, 0.85);  /* = #000000D9 */
+
+  /* === 3. Prototype shell tokens === */
+  --color-topbar-bg: #1f1f23;
+  --color-toolbar-bg: #2c2f36;
+  --color-toolbar-text: #e6e7ea;
+  --color-tab-active: #1e84e6;
+  --color-tab-text: #9aa0a8;
+  --color-field-bg-edit: #eaf3fe;
+  --color-field-label-req: #f04848;
+  --color-table-border: #e3e6eb;
+  --color-table-row-alt: #f7f8fa;
+  --color-filterbar-bg: #ffffff;
+  --color-nav-overlay-bg: #2b3137;
+
+  /* === 4. NavOverlay colors === */
+  --color-nav-sidebar-border: #1e2226;
+  --color-nav-sidebar-active-bg: #34393f;
+  --color-nav-col-header: #e8eaee;
+  --color-nav-col-divider: #4a4f57;
+  --color-nav-item-text: #cfd3da;
+  --color-nav-item-star: #f3b526;
+
+  /* === 5. Login hero === */
+  --color-login-hero-start: #1a4ea0;
+  --color-login-hero-mid: #0a1d44;
+  --color-login-hero-end: #050d20;
+  --color-login-bg: #eaedf2;
+  --color-login-border: #d8dce2;
+  --color-login-brand: #e0a020;
+  --color-login-text-muted: #666666;
 }
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { Provider } from 'react-redux'
+import { MemoryRouter, Routes, Route } from 'react-router-dom'
+import { configureStore } from '@reduxjs/toolkit'
+import authReducer from '../store/slices/authSlice'
+import tabsReducer, { openTab } from '../store/slices/tabsSlice'
+import AppShell from '../components/AppShell'
+
+vi.mock('../components/NavOverlay', () => ({
+  default: ({ onClose }: { onClose: () => void }) => (
+    <div data-testid="nav-overlay" onClick={onClose}>NavOverlay</div>
+  ),
+}))
+
+function makeStore(extraTabs = false) {
+  const store = configureStore({ reducer: { auth: authReducer, tabs: tabsReducer } })
+  store.dispatch({
+    type: 'auth/setCredentials',
+    payload: { accessToken: 'tok', refreshToken: 'ref', userInfo: { userId: 'u0', username: 'admin', userType: '超级管理员', language: '中文', brandId: 'b1' } },
+  })
+  if (extraTabs) {
+    store.dispatch(openTab({ id: 'userlist', title: '用户列表', path: '/usr/users', closable: true }))
+  }
+  return store
+}
+
+function renderShell(path = '/', extraTabs = false) {
+  const store = makeStore(extraTabs)
+  return {
+    store,
+    ...render(
+      <Provider store={store}>
+        <MemoryRouter initialEntries={[path]}>
+          <Routes>
+            <Route element={<AppShell />}>
+              <Route path="/" element={<div>MainPage</div>} />
+              <Route path="/usr/users" element={<div>UserListPage</div>} />
+            </Route>
+          </Routes>
+        </MemoryRouter>
+      </Provider>
+    ),
+  }
+}
+
+describe('AppShell', () => {
+  it('renders_mainTabAndUserInfo', () => {
+    renderShell()
+    expect(screen.getByText('主页')).toBeInTheDocument()
+    expect(screen.getByText(/admin/)).toBeInTheDocument()
+  })
+
+  it('renders_openTabs', () => {
+    renderShell('/', true)
+    expect(screen.getByText('用户列表')).toBeInTheDocument()
+  })
+
+  it('clickTab_navigatesToTabPath', async () => {
+    renderShell('/', true)
+    await userEvent.click(screen.getByText('用户列表'))
+    await waitFor(() => expect(screen.getByText('UserListPage')).toBeInTheDocument())
+  })
+
+  it('closeTab_removesTabAndNavigates', async () => {
+    renderShell('/usr/users', true)
+    await userEvent.click(screen.getByRole('button', { name: '关闭 用户列表' }))
+    await waitFor(() => expect(screen.queryByText('用户列表')).not.toBeInTheDocument())
+    expect(screen.getByText('MainPage')).toBeInTheDocument()
+  })
+
+  it('navToggle_showsNavOverlay', async () => {
+    renderShell()
+    await userEvent.click(screen.getByRole('button', { name: /全部导航/ }))
+    expect(screen.getByTestId('nav-overlay')).toBeInTheDocument()
+  })
+
+  it('navToggle_secondClick_hidesOverlay', async () => {
+    renderShell()
+    await userEvent.click(screen.getByRole('button', { name: /全部导航/ }))
+    await userEvent.click(screen.getByRole('button', { name: /全部导航/ }))
+    expect(screen.queryByTestId('nav-overlay')).not.toBeInTheDocument()
+  })
+})
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { Provider } from 'react-redux'
+import { MemoryRouter, Routes, Route } from 'react-router-dom'
+import { configureStore } from '@reduxjs/toolkit'
+import authReducer from '../store/slices/authSlice'
+import tabsReducer from '../store/slices/tabsSlice'
+import NavOverlay from '../components/NavOverlay'
+
+function makeStore() {
+  return configureStore({ reducer: { auth: authReducer, tabs: tabsReducer } })
+}
+
+function renderOverlay(onClose = vi.fn()) {
+  return render(
+    <Provider store={makeStore()}>
+      <MemoryRouter initialEntries={['/']}>
+        <Routes>
+          <Route path="/" element={<NavOverlay onClose={onClose} />} />
+          <Route path="/usr/users" element={<div>UserList</div>} />
+        </Routes>
+      </MemoryRouter>
+    </Provider>
+  )
+}
+
+describe('NavOverlay', () => {
+  it('renders_systemModules', () => {
+    renderOverlay()
+    expect(screen.getByText('系统设置')).toBeInTheDocument()
+    expect(screen.getByText('用户管理')).toBeInTheDocument()
+  })
+
+  it('clickUserList_navigatesAndClosesOverlay', async () => {
+    const onClose = vi.fn()
+    renderOverlay(onClose)
+    await userEvent.click(screen.getByText('用户列表'))
+    expect(screen.getByText('UserList')).toBeInTheDocument()
+    expect(onClose).toHaveBeenCalledTimes(1)
+  })
+
+  it('clickBackground_callsOnClose', async () => {
+    const onClose = vi.fn()
+    render(
+      <Provider store={makeStore()}>
+        <MemoryRouter>
+          <NavOverlay onClose={onClose} />
+        </MemoryRouter>
+      </Provider>
+    )
+    // Click the outer overlay div (background)
+    await userEvent.click(document.querySelector('[data-testid="nav-bg"]')!)
+    expect(onClose).toHaveBeenCalledTimes(1)
+  })
+})
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { Provider } from 'react-redux'
+import { MemoryRouter, Routes, Route } from 'react-router-dom'
+import { configureStore } from '@reduxjs/toolkit'
+import authReducer from '../store/slices/authSlice'
+import tabsReducer from '../store/slices/tabsSlice'
+import UserDetailPage from '../pages/usr/UserDetailPage'
+
+vi.mock('../api/usr', () => ({
+  getStaffs: vi.fn().mockResolvedValue([{ sId: 's1', sStaffName: '张三' }]),
+  getPermissionGroups: vi.fn().mockResolvedValue([{ sId: 'pg1', sGroupCode: 'usr:create', sGroupName: '新增用户', sCategory: '用户管理' }]),
+  createUser: vi.fn().mockResolvedValue({ userId: 'u2', userCode: 'UC002', username: 'bob' }),
+  updateUser: vi.fn().mockResolvedValue({ userId: 'u1', username: 'alice', updatedAt: '2026-05-08T10:00:00' }),
+  getUserList: vi.fn().mockResolvedValue({ total: 0, page: 1, pageSize: 20, list: [] }),
+}))
+
+vi.mock('../api/request', () => ({
+  default: { get: vi.fn(), post: vi.fn(), put: vi.fn() },
+}))
+
+function makeStore() {
+  const store = configureStore({ reducer: { auth: authReducer, tabs: tabsReducer } })
+  store.dispatch({
+    type: 'auth/setCredentials',
+    payload: { accessToken: 'tok', refreshToken: 'ref', userInfo: { userId: 'u0', username: 'admin', userType: '超级管理员', language: '中文', brandId: 'b1' } },
+  })
+  return store
+}
+
+const rowData = {
+  sId: 'u1', sUsername: 'alice', sUserCode: 'UC001', sUserType: '普通用户',
+  sLanguage: '中文', bCanEditDoc: 0, bIsDisabled: 0, tLastLoginDate: null,
+  sCreatorUsername: 'admin', tCreateDate: '2026-01-01 00:00:00',
+  sStaffName: null, sDepartment: null,
+}
+
+function renderNew() {
+  return render(
+    <Provider store={makeStore()}>
+      <MemoryRouter initialEntries={['/usr/users/new']}>
+        <Routes>
+          <Route path="/usr/users/new" element={<UserDetailPage />} />
+          <Route path="/usr/users" element={<div>UserList</div>} />
+        </Routes>
+      </MemoryRouter>
+    </Provider>
+  )
+}
+
+function renderEdit(state = rowData) {
+  return render(
+    <Provider store={makeStore()}>
+      <MemoryRouter initialEntries={[{ pathname: '/usr/users/u1', state }]}>
+        <Routes>
+          <Route path="/usr/users/:id" element={<UserDetailPage />} />
+          <Route path="/usr/users" element={<div>UserList</div>} />
+        </Routes>
+      </MemoryRouter>
+    </Provider>
+  )
+}
+
+describe('UserDetailPage', () => {
+  beforeEach(() => { vi.clearAllMocks() })
+
+  it('newMode_showsSaveButton', () => {
+    renderNew()
+    expect(screen.getByRole('button', { name: /保存/ })).toBeInTheDocument()
+  })
+
+  it('newMode_showsPermissionGroupTab', async () => {
+    renderNew()
+    await waitFor(() => expect(screen.getByText('新增用户')).toBeInTheDocument())
+  })
+
+  it('editMode_showsUsernameReadonly', async () => {
+    renderEdit()
+    await waitFor(() => expect(screen.getByText('alice')).toBeInTheDocument())
+  })
+
+  it('editMode_noState_redirectsToList', async () => {
+    render(
+      <Provider store={makeStore()}>
+        <MemoryRouter initialEntries={['/usr/users/u1']}>
+          <Routes>
+            <Route path="/usr/users/:id" element={<UserDetailPage />} />
+            <Route path="/usr/users" element={<div>UserList</div>} />
+          </Routes>
+        </MemoryRouter>
+      </Provider>
+    )
+    await waitFor(() => expect(screen.getByText('UserList')).toBeInTheDocument())
+  })
+
+  it('newMode_save_callsCreateUser', async () => {
+    const { createUser } = await import('../api/usr')
+    renderNew()
+    await userEvent.type(screen.getByPlaceholderText('请输入用户号'), 'UC002')
+    await userEvent.type(screen.getByPlaceholderText('请输入用户名'), 'bob')
+    await userEvent.click(screen.getByRole('button', { name: /保存/ }))
+    await waitFor(() => expect(vi.mocked(createUser)).toHaveBeenCalledWith(
+      expect.objectContaining({ userCode: 'UC002', username: 'bob' })
+    ))
+  })
+
+  it('editMode_save_callsUpdateUser', async () => {
+    const { updateUser } = await import('../api/usr')
+    renderEdit()
+    await waitFor(() => expect(screen.getByText('alice')).toBeInTheDocument())
+    await userEvent.click(screen.getByRole('button', { name: /保存/ }))
+    await waitFor(() => expect(vi.mocked(updateUser)).toHaveBeenCalledWith(
+      'u1',
+      expect.objectContaining({ userType: '普通用户' })
+    ))
+  })
+
+  it('permCheckbox_togglesSelection', async () => {
+    renderNew()
+    await waitFor(() => expect(screen.getByText('新增用户')).toBeInTheDocument())
+    const cb = screen.getByRole('checkbox')
+    expect(cb).not.toBeChecked()
+    await userEvent.click(cb)
+    expect(cb).toBeChecked()
+    await userEvent.click(cb)
+    expect(cb).not.toBeChecked()
+  })
+
+  it('cancelButton_navigatesToList', async () => {
+    renderNew()
+    await userEvent.click(screen.getByRole('button', { name: /取消/ }))
+    await waitFor(() => expect(screen.getByText('UserList')).toBeInTheDocument())
+  })
+})
@@ -2,9 +2,10 @@ import { describe, it, expect, vi, beforeEach } from &#39;vitest&#39;
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { Provider } from 'react-redux'
-import { MemoryRouter } from 'react-router-dom'
+import { MemoryRouter, Routes, Route } from 'react-router-dom'
 import { configureStore } from '@reduxjs/toolkit'
 import authReducer from '../store/slices/authSlice'
+import tabsReducer from '../store/slices/tabsSlice'
 import UserListPage from '../pages/usr/UserListPage'
 vi.mock('../api/usr', () => ({
@@ -12,41 +13,50 @@ vi.mock(&#39;../api/usr&#39;, () =&gt; ({
   getPermissionGroups: vi.fn().mockResolvedValue([]),
   createUser: vi.fn(),
   getUserList: vi.fn().mockResolvedValue({ total: 0, page: 1, pageSize: 20, list: [] }),
-  updateUser: vi.fn().mockResolvedValue({ userId: 'u1', username: 'alice', updatedAt: '2026-05-08T10:00:00' })
+  updateUser: vi.fn().mockResolvedValue({ userId: 'u1', username: 'alice', updatedAt: '2026-05-08T10:00:00' }),
 }))
 vi.mock('../api/request', () => ({
-  default: { get: vi.fn(), post: vi.fn() }
+  default: { get: vi.fn(), post: vi.fn(), put: vi.fn() },
 }))
 function makeStore(userType: string) {
-  const store = configureStore({ reducer: { auth: authReducer } })
+  const store = configureStore({ reducer: { auth: authReducer, tabs: tabsReducer } })
   store.dispatch({
     type: 'auth/setCredentials',
-    payload: {
-      accessToken: 'test-token',
-      refreshToken: 'test-refresh',
-      userInfo: { userId: 'u1', username: 'admin', userType, language: '中文', brandId: 'b1' }
-    }
+    payload: { accessToken: 'test-token', refreshToken: 'test-refresh', userInfo: { userId: 'u1', username: 'admin', userType, language: '中文', brandId: 'b1' } },
   })
   return store
 }
-function renderPage(userType: string) {
+const sampleRow = {
+  sId: 'u1', sUsername: 'alice', sUserCode: 'UC001', sUserType: '普通用户',
+  sLanguage: '中文', bCanEditDoc: 0, bIsDisabled: 0, tLastLoginDate: null,
+  sCreatorUsername: 'admin', tCreateDate: '2026-01-01T00:00:00',
+  sStaffName: '张三', sDepartment: '研发部',
+}
+
+function renderPage(userType: string, extraRoutes = false) {
   const store = makeStore(userType)
   return render(
     <Provider store={store}>
-      <MemoryRouter>
-        <UserListPage />
+      <MemoryRouter initialEntries={['/usr/users']}>
+        {extraRoutes ? (
+          <Routes>
+            <Route path="/usr/users" element={<UserListPage />} />
+            <Route path="/usr/users/new" element={<div>NewUserPage</div>} />
+            <Route path="/usr/users/:id" element={<div>DetailPage</div>} />
+          </Routes>
+        ) : (
+          <UserListPage />
+        )}
       </MemoryRouter>
     </Provider>
   )
 }
 describe('UserListPage', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
+  beforeEach(() => { vi.clearAllMocks() })
   it('superAdmin_seesNewButton', () => {
     renderPage('超级管理员')
@@ -58,23 +68,15 @@ describe(&#39;UserListPage&#39;, () =&gt; {
     expect(screen.queryByRole('button', { name: /新\s*增/ })).not.toBeInTheDocument()
   })
-  it('clickNewButton_opensDrawer', async () => {
-    renderPage('超级管理员')
+  it('clickNewButton_navigatesToNewPage', async () => {
+    renderPage('超级管理员', true)
     await userEvent.click(screen.getByRole('button', { name: /新\s*增/ }))
-    await waitFor(() => expect(screen.getByText('新增用户')).toBeInTheDocument())
+    await waitFor(() => expect(screen.getByText('NewUserPage')).toBeInTheDocument())
   })
   it('initialLoad_rendersTableRows', async () => {
     const { getUserList } = await import('../api/usr')
-    vi.mocked(getUserList).mockResolvedValueOnce({
-      total: 1, page: 1, pageSize: 20,
-      list: [{
-        sId: 'u1', sUsername: 'alice', sUserCode: 'UC001', sUserType: '普通用户',
-        sLanguage: '中文', bCanEditDoc: 0, bIsDisabled: 0, tLastLoginDate: null,
-        sCreatorUsername: 'admin', tCreateDate: '2026-01-01T00:00:00',
-        sStaffName: '张三', sDepartment: '研发部'
-      }]
-    })
+    vi.mocked(getUserList).mockResolvedValueOnce({ total: 1, page: 1, pageSize: 20, list: [sampleRow] })
     renderPage('超级管理员')
     await waitFor(() => expect(screen.getByText('alice')).toBeInTheDocument())
     expect(screen.getByText('张三')).toBeInTheDocument()
@@ -87,22 +89,12 @@ describe(&#39;UserListPage&#39;, () =&gt; {
     await waitFor(() => expect(vi.mocked(getUserList)).toHaveBeenCalledTimes(2))
   })
-  it('editMode_submit_callsUpdateUser', async () => {
-    const { getUserList, updateUser } = await import('../api/usr')
-    vi.mocked(getUserList).mockResolvedValue({
-      total: 1, page: 1, pageSize: 20,
-      list: [{
-        sId: 'u1', sUsername: 'alice', sUserCode: 'UC001', sUserType: '普通用户',
-        sLanguage: '中文', bCanEditDoc: 0, bIsDisabled: 0, tLastLoginDate: null,
-        sCreatorUsername: 'admin', tCreateDate: '2026-01-01T00:00:00',
-        sStaffName: null, sDepartment: null
-      }]
-    })
-    renderPage('超级管理员')
+  it('doubleClickRow_navigatesToDetailPage', async () => {
+    const { getUserList } = await import('../api/usr')
+    vi.mocked(getUserList).mockResolvedValueOnce({ total: 1, page: 1, pageSize: 20, list: [sampleRow] })
+    renderPage('超级管理员', true)
     await waitFor(() => expect(screen.getByText('alice')).toBeInTheDocument())
-    await userEvent.click(screen.getByRole('button', { name: /修改/ }))
-    await waitFor(() => expect(screen.getByText('修改用户')).toBeInTheDocument())
-    await userEvent.click(screen.getByRole('button', { name: /确\s*认/ }))
-    await waitFor(() => expect(vi.mocked(updateUser)).toHaveBeenCalledTimes(1))
+    await userEvent.dblClick(screen.getByText('alice').closest('tr')!)
+    await waitFor(() => expect(screen.getByText('DetailPage')).toBeInTheDocument())
   })
 })
+import { describe, it, expect } from 'vitest'
+import tabsReducer, {
+  openTab, closeTab, activateTab, updateTabPath,
+  type Tab
+} from '../store/slices/tabsSlice'
+
+const mainTab: Tab = { id: 'main', title: '主页', path: '/', closable: false }
+const listTab: Tab = { id: 'userlist', title: '用户列表', path: '/usr/users', closable: true }
+const detailTab: Tab = { id: 'userdetail', title: '用户信息单据', path: '/usr/users/new', closable: true }
+
+describe('tabsSlice', () => {
+  it('initialState_hasMainTab', () => {
+    const state = tabsReducer(undefined, { type: '' })
+    expect(state.tabs).toHaveLength(1)
+    expect(state.tabs[0].id).toBe('main')
+    expect(state.activeId).toBe('main')
+  })
+
+  it('openTab_addsNewTabAndActivates', () => {
+    const state = tabsReducer(undefined, openTab(listTab))
+    expect(state.tabs).toHaveLength(2)
+    expect(state.tabs[1].id).toBe('userlist')
+    expect(state.activeId).toBe('userlist')
+  })
+
+  it('openTab_existingId_updatesPathAndActivates', () => {
+    let state = tabsReducer(undefined, openTab(listTab))
+    const updated: Tab = { ...listTab, path: '/usr/users?queryValue=alice' }
+    state = tabsReducer(state, openTab(updated))
+    expect(state.tabs).toHaveLength(2)
+    expect(state.tabs[1].path).toBe('/usr/users?queryValue=alice')
+    expect(state.activeId).toBe('userlist')
+  })
+
+  it('closeTab_removesTabAndActivatesPrevious', () => {
+    let state = tabsReducer(undefined, openTab(listTab))
+    state = tabsReducer(state, closeTab('userlist'))
+    expect(state.tabs).toHaveLength(1)
+    expect(state.activeId).toBe('main')
+  })
+
+  it('closeTab_middleTab_activatesTabToLeft', () => {
+    let state = tabsReducer(undefined, openTab(listTab))
+    state = tabsReducer(state, openTab(detailTab))
+    state = tabsReducer(state, closeTab('userdetail'))
+    expect(state.activeId).toBe('userlist')
+  })
+
+  it('closeTab_nonExistentId_doesNothing', () => {
+    const state = tabsReducer(undefined, closeTab('nonexistent'))
+    expect(state.tabs).toHaveLength(1)
+    expect(state.activeId).toBe('main')
+  })
+
+  it('activateTab_setsActiveId', () => {
+    let state = tabsReducer(undefined, openTab(listTab))
+    state = tabsReducer(state, activateTab('main'))
+    expect(state.activeId).toBe('main')
+  })
+
+  it('updateTabPath_updatesPath', () => {
+    let state = tabsReducer(undefined, openTab(listTab))
+    state = tabsReducer(state, updateTabPath({ id: 'userlist', path: '/usr/users?q=alice' }))
+    expect(state.tabs[1].path).toBe('/usr/users?q=alice')
+  })
+
+  it('updateTabPath_nonExistentId_doesNothing', () => {
+    const state = tabsReducer(undefined, updateTabPath({ id: 'nope', path: '/x' }))
+    expect(state.tabs[0].path).toBe('/')
+  })
+})