feat(client): 用户管理页 + E2E 门禁（E15/E16/E18）

- 新增系统用户管理页（创建/禁用启用/重置密码/角色） - 引入 Playwright E2E：覆盖登录-报销-待办-票据-OCR-支付-登出 - 新增 ci-e2e 工作流（PR + nightly）
2026-02-09 01:13:14 +08:00
@@ -0,0 +1,122 @@
+name: ci-e2e
+
+on:
+  pull_request:
+  workflow_dispatch:
+  schedule:
+    - cron: "10 19 * * *"
+
+jobs:
+  e2e:
+    runs-on: ubuntu-latest
+    timeout-minutes: 45
+
+    services:
+      postgres:
+        image: postgres:16
+        env:
+          POSTGRES_DB: hyb_oa
+          POSTGRES_USER: hyboa_user
+          POSTGRES_PASSWORD: hyboa_password
+        ports:
+          - 5432:5432
+        options: >-
+          --health-cmd="pg_isready -U hyboa_user -d hyb_oa"
+          --health-interval=10s
+          --health-timeout=5s
+          --health-retries=10
+
+    env:
+      NODE_ENV: test
+      PORT: 3000
+      HOST: 127.0.0.1
+      APP_ORIGIN: http://127.0.0.1:3000
+      DATABASE_URL: postgresql://hyboa_user:[email protected]:5432/hyb_oa?schema=public
+      JWT_SECRET: ci_e2e_secret_key
+      OCR_PROVIDER: mock
+      OCR_MAX_ATTEMPTS: 3
+      OCR_POLL_CRON: "*/5 * * * * *"
+      DELEGATION_REVOKE_CRON: "0 * * * *"
+      SERVE_CLIENT_DIST: "true"
+      CLIENT_DIST_DIR: "../client/dist"
+      E2E_BASE_URL: http://127.0.0.1:3000
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: npm
+          cache-dependency-path: |
+            server/package-lock.json
+            client/package-lock.json
+
+      - name: Install server dependencies
+        working-directory: server
+        run: npm ci
+
+      - name: Install client dependencies
+        working-directory: client
+        run: npm ci
+
+      - name: Migrate database
+        working-directory: server
+        run: npm run prisma:migrate:deploy
+
+      - name: Seed database
+        working-directory: server
+        run: npm run seed:dev
+
+      - name: Build client
+        working-directory: client
+        run: npm run build
+
+      - name: Install Playwright browsers
+        working-directory: client
+        run: npx playwright install --with-deps
+
+      - name: Start server
+        working-directory: server
+        run: |
+          nohup npm run dev > /tmp/hyb-oa-server.log 2>&1 &
+          echo $! > /tmp/hyb-oa-server.pid
+
+      - name: Wait for ready
+        run: |
+          for i in {1..45}; do
+            if curl -fsS "http://127.0.0.1:3000/ready" >/dev/null; then
+              exit 0
+            fi
+            sleep 2
+          done
+          echo "Server readiness check timed out" >&2
+          exit 1
+
+      - name: Run Playwright E2E
+        working-directory: client
+        run: npm run test:e2e
+
+      - name: Stop server
+        if: always()
+        run: |
+          if [[ -f /tmp/hyb-oa-server.pid ]]; then
+            kill "$(cat /tmp/hyb-oa-server.pid)" || true
+          fi
+
+      - name: Dump server log on failure
+        if: failure()
+        run: |
+          echo "==== /tmp/hyb-oa-server.log ===="
+          cat /tmp/hyb-oa-server.log || true
+
+      - name: Upload Playwright report
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report
+          path: client/playwright-report
+          if-no-files-found: ignore
+
@@ -28,6 +28,11 @@ cd /home/shunli/Projects/hyb-oa/client
 npm run dev
 ```

+## 3.1 试运行/单域托管部署（推荐）
+试运行/上线演练建议使用仓库内置部署包（server 托管 `client/dist`，同域 cookie 更稳定）：
+- `deploy/trialrun/runbook.md`
+- `deploy/trialrun/checklist.md`
+
 ## 4. 鉴权与会话说明
 - Access Token 仅保存在内存，不写入 `localStorage/sessionStorage`。
 - Refresh Token 由后端通过 HttpOnly Cookie 维护。
@@ -54,6 +59,7 @@ npm run dev
 - 待我处理：`expense.approve`。
 - 票据中心：`invoice.upload` / `invoice.view_own` / `invoice.manage`。
 - 审计工作台：`system.audit.view`（finance_mgr/admin）。
+- 用户管理：`system.users`（hr/admin）。
 - 个人设置：登录即可访问。

 ## 6. 页面现状（P3）
@@ -78,6 +84,27 @@ npm run dev
 npm run typecheck
 npm run build
 npm run preview
+npm run test:e2e
+```
+
+## 8.1 Playwright E2E（E15）
+前置：本地启动 DB + server（建议 `SERVE_CLIENT_DIST=true` 单域托管），并启用 mock OCR：
+```bash
+cd /home/shunli/Projects/hyb-oa
+docker compose up -d db
+
+cd /home/shunli/Projects/hyb-oa/server
+OCR_PROVIDER=mock OCR_POLL_CRON="*/5 * * * * *" npm run prisma:migrate:deploy
+OCR_PROVIDER=mock OCR_POLL_CRON="*/5 * * * * *" npm run seed:dev
+OCR_PROVIDER=mock OCR_POLL_CRON="*/5 * * * * *" SERVE_CLIENT_DIST=true npm run dev
+```
+
+执行：
+```bash
+cd /home/shunli/Projects/hyb-oa/client
+npm install
+npx playwright install --with-deps
+npm run test:e2e
 ```

 ## 9. 仓库级最小门禁
@@ -21,6 +21,7 @@
        "tailwind-merge": "^2.6.1"
      },
      "devDependencies": {
+        "@playwright/test": "^1.50.0",
        "@types/react": "^18.2.55",
        "@types/react-dom": "^18.2.19",
        "@vitejs/plugin-react": "^4.2.1",
@@ -843,6 +844,22 @@
        "node": ">= 8"
      }
    },
+    "node_modules/@playwright/test": {
+      "version": "1.58.2",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.58.2.tgz",
+      "integrity": "sha512-akea+6bHYBBfA9uQqSYmlJXn61cTa+jbO87xVLCWbTqbWadRVmhxlXATaOjOgcBaWU4ePo0wB41KMFv3o35IXA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.58.2"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
    "node_modules/@radix-ui/primitive": {
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
@@ -2804,6 +2821,53 @@
        "node": ">= 6"
      }
    },
+    "node_modules/playwright": {
+      "version": "1.58.2",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.58.2.tgz",
+      "integrity": "sha512-vA30H8Nvkq/cPBnNw4Q8TWz1EJyqgpuinBcHET0YVJVFldr8JDNiU9LaWAE1KqSkRYazuaBhTpB5ZzShOezQ6A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.58.2"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.58.2",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.58.2.tgz",
+      "integrity": "sha512-yZkEtftgwS8CsfYo7nm0KE8jsvm6i/PTgVtB8DL726wNf6H2IMsDuxCpJj59KDaxCtSnrWan2AeDqM7JBaultg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
    "node_modules/postcss": {
      "version": "8.5.6",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
@@ -7,6 +7,7 @@
    "dev": "vite",
    "build": "npm run typecheck && vite build",
    "typecheck": "tsc --noEmit",
+    "test:e2e": "playwright test",
    "preview": "vite preview"
  },
  "dependencies": {
@@ -23,6 +24,7 @@
    "tailwind-merge": "^2.6.1"
  },
  "devDependencies": {
+    "@playwright/test": "^1.50.0",
    "@types/react": "^18.2.55",
    "@types/react-dom": "^18.2.19",
    "@vitejs/plugin-react": "^4.2.1",
@@ -0,0 +1,21 @@
+import { defineConfig } from "@playwright/test";
+
+const baseURL = process.env.E2E_BASE_URL ?? "http://127.0.0.1:3000";
+
+export default defineConfig({
+  testDir: "./tests/e2e",
+  timeout: 120_000,
+  expect: {
+    timeout: 30_000,
+  },
+  retries: process.env.CI ? 1 : 0,
+  use: {
+    baseURL,
+    headless: true,
+    trace: "on-first-retry",
+    screenshot: "only-on-failure",
+    video: "retain-on-failure",
+  },
+  reporter: process.env.CI ? [["github"], ["html", { open: "never" }]] : [["list"], ["html"]],
+});
+
@@ -0,0 +1,83 @@
+import { apiRequestData } from "./http";
+
+export type UserStatus = "active" | "archived";
+
+export type UserSummary = {
+  id: string;
+  employeeNo: string;
+  name: string;
+  phone: string;
+  email: string;
+  status: UserStatus;
+  departmentId: string;
+  title: string;
+  roleCodes: string[];
+  createdAt: string | null;
+  updatedAt: string | null;
+};
+
+export type UserListResponse = {
+  page: number;
+  pageSize: number;
+  total: number;
+  items: UserSummary[];
+};
+
+export async function fetchUsers(params: {
+  page: number;
+  pageSize: number;
+  status?: UserStatus;
+  q?: string;
+}) {
+  const search = new URLSearchParams();
+  search.set("page", String(params.page));
+  search.set("pageSize", String(params.pageSize));
+  if (params.status) search.set("status", params.status);
+  if (params.q) search.set("q", params.q);
+
+  return apiRequestData<UserListResponse>(`/api/users?${search.toString()}`);
+}
+
+export async function createUser(payload: {
+  employeeNo: string;
+  name: string;
+  phone: string;
+  email: string;
+  password: string;
+  roles: string[];
+}) {
+  return apiRequestData<UserSummary>("/api/users", {
+    method: "POST",
+    body: JSON.stringify(payload),
+  });
+}
+
+export async function disableUser(userId: string) {
+  return apiRequestData<{ id: string; status: UserStatus }>(`/api/users/${userId}/disable`, {
+    method: "POST",
+  });
+}
+
+export async function enableUser(userId: string) {
+  return apiRequestData<{ id: string; status: UserStatus }>(`/api/users/${userId}/enable`, {
+    method: "POST",
+  });
+}
+
+export async function resetUserPassword(userId: string) {
+  return apiRequestData<{ id: string; oneTimePassword: string }>(
+    `/api/users/${userId}/reset-password`,
+    {
+      method: "POST",
+      body: JSON.stringify({}),
+    },
+  );
+}
+
+export async function setUserRoles(userId: string, roles: string[]) {
+  return apiRequestData<{ id: string; roleCodes: string[] }>(`/api/users/${userId}/roles`, {
+    method: "POST",
+    body: JSON.stringify({ roles }),
+  });
+}
+
@@ -36,6 +36,11 @@ export const NAV_ITEMS: NavItem[] = [
    label: "委派管理",
    anyOf: ["expense.proxy_manage"],
  },
+  {
+    to: "/system/users",
+    label: "用户管理",
+    anyOf: ["system.users"],
+  },
  { to: "/settings/profile", label: "个人设置" },
 ];

@@ -0,0 +1,503 @@
+import { useMemo, useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { mapApiErrorMessage } from "../api/errorMessages";
+import { isApiError } from "../api/types";
+import {
+  createUser,
+  disableUser,
+  enableUser,
+  fetchUsers,
+  resetUserPassword,
+  setUserRoles,
+  type UserStatus,
+  type UserSummary,
+} from "../api/users";
+import { PageHeader } from "../components/common/PageHeader";
+import { Button } from "../components/ui/button";
+import { Card } from "../components/ui/card";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "../components/ui/dialog";
+import { Input } from "../components/ui/input";
+import { Label } from "../components/ui/label";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/ui/table";
+
+const PAGE_SIZE = 20;
+
+const ROLE_OPTIONS: Array<{ code: string; label: string }> = [
+  { code: "employee", label: "employee" },
+  { code: "manager", label: "manager" },
+  { code: "ceo", label: "ceo" },
+  { code: "finance", label: "finance" },
+  { code: "finance_mgr", label: "finance_mgr" },
+  { code: "administration", label: "administration" },
+  { code: "hr", label: "hr" },
+  { code: "admin", label: "admin" },
+];
+
+function formatRoleCodes(roleCodes: string[]) {
+  return roleCodes.length ? roleCodes.join(", ") : "-";
+}
+
+export function UserManagementPage() {
+  const queryClient = useQueryClient();
+  const [status, setStatus] = useState<UserStatus | "">("");
+  const [q, setQ] = useState("");
+  const [page, setPage] = useState(1);
+  const [error, setError] = useState("");
+  const [resetResult, setResetResult] = useState<{ userId: string; password: string } | null>(null);
+
+  const [createOpen, setCreateOpen] = useState(false);
+  const [employeeNo, setEmployeeNo] = useState("");
+  const [name, setName] = useState("");
+  const [phone, setPhone] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [createRoles, setCreateRoles] = useState<Set<string>>(() => new Set(["employee"]));
+
+  const [roleDialogUser, setRoleDialogUser] = useState<UserSummary | null>(null);
+  const [roleDraft, setRoleDraft] = useState<Set<string>>(() => new Set());
+
+  const listQuery = useQuery({
+    queryKey: ["users", "list", status, q, page],
+    queryFn: () => fetchUsers({ page, pageSize: PAGE_SIZE, status: status || undefined, q: q || undefined }),
+  });
+
+  const totalPages = Math.max(1, Math.ceil((listQuery.data?.total ?? 0) / PAGE_SIZE));
+
+  const createPayload = useMemo(() => {
+    return {
+      employeeNo: employeeNo.trim(),
+      name: name.trim(),
+      phone: phone.trim(),
+      email: email.trim(),
+      password: password,
+      roles: Array.from(createRoles),
+    };
+  }, [createRoles, email, employeeNo, name, password, phone]);
+
+  const createMutation = useMutation({
+    mutationFn: () => createUser(createPayload),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: ["users"] });
+      setCreateOpen(false);
+      setEmployeeNo("");
+      setName("");
+      setPhone("");
+      setEmail("");
+      setPassword("");
+      setCreateRoles(new Set(["employee"]));
+      setError("");
+    },
+    onError: (err) => {
+      if (isApiError(err)) {
+        setError(`${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`);
+        return;
+      }
+      setError(err instanceof Error ? err.message : "创建用户失败");
+    },
+  });
+
+  const toggleMutation = useMutation({
+    mutationFn: async (item: UserSummary) => {
+      if (item.status === "active") {
+        return disableUser(item.id);
+      }
+      return enableUser(item.id);
+    },
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: ["users"] });
+      setError("");
+    },
+    onError: (err) => {
+      if (isApiError(err)) {
+        setError(`${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`);
+        return;
+      }
+      setError(err instanceof Error ? err.message : "更新用户状态失败");
+    },
+  });
+
+  const resetMutation = useMutation({
+    mutationFn: async (item: UserSummary) => resetUserPassword(item.id),
+    onSuccess: async (data) => {
+      setResetResult({ userId: data.id, password: data.oneTimePassword });
+      await queryClient.invalidateQueries({ queryKey: ["users"] });
+      setError("");
+    },
+    onError: (err) => {
+      if (isApiError(err)) {
+        setError(`${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`);
+        return;
+      }
+      setError(err instanceof Error ? err.message : "重置密码失败");
+    },
+  });
+
+  const rolesMutation = useMutation({
+    mutationFn: async () => {
+      if (!roleDialogUser) {
+        throw new Error("missing user");
+      }
+      return setUserRoles(roleDialogUser.id, Array.from(roleDraft));
+    },
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: ["users"] });
+      setRoleDialogUser(null);
+      setRoleDraft(new Set());
+      setError("");
+    },
+    onError: (err) => {
+      if (isApiError(err)) {
+        setError(`${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`);
+        return;
+      }
+      setError(err instanceof Error ? err.message : "更新角色失败");
+    },
+  });
+
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        title="系统用户管理"
+        subtitle="创建/启用/禁用账号，重置密码并分配角色（仅试运行最小运营）。"
+        actions={
+          <Dialog open={createOpen} onOpenChange={setCreateOpen}>
+            <DialogTrigger asChild>
+              <Button data-testid="users-create-open" type="button">
+                新建用户
+              </Button>
+            </DialogTrigger>
+            <DialogContent className="max-w-lg">
+              <DialogHeader>
+                <DialogTitle>新建用户</DialogTitle>
+                <DialogDescription>请填写基础信息与初始密码（满足密码策略）。</DialogDescription>
+              </DialogHeader>
+
+              <div className="grid gap-4">
+                <div className="grid gap-2">
+                  <Label htmlFor="employeeNo">工号</Label>
+                  <Input
+                    id="employeeNo"
+                    data-testid="users-create-employeeNo"
+                    value={employeeNo}
+                    onChange={(e) => setEmployeeNo(e.target.value)}
+                    placeholder="E1001"
+                  />
+                </div>
+                <div className="grid gap-2">
+                  <Label htmlFor="name">姓名</Label>
+                  <Input
+                    id="name"
+                    data-testid="users-create-name"
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    placeholder="张三"
+                  />
+                </div>
+                <div className="grid gap-2">
+                  <Label htmlFor="phone">手机号</Label>
+                  <Input
+                    id="phone"
+                    data-testid="users-create-phone"
+                    value={phone}
+                    onChange={(e) => setPhone(e.target.value)}
+                    placeholder="13800000001"
+                  />
+                </div>
+                <div className="grid gap-2">
+                  <Label htmlFor="email">邮箱</Label>
+                  <Input
+                    id="email"
+                    data-testid="users-create-email"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    placeholder="[email protected]"
+                  />
+                </div>
+                <div className="grid gap-2">
+                  <Label htmlFor="password">初始密码</Label>
+                  <Input
+                    id="password"
+                    data-testid="users-create-password"
+                    type="password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    placeholder="至少12位，含大小写与数字"
+                  />
+                </div>
+
+                <div className="grid gap-2">
+                  <Label>角色</Label>
+                  <div className="flex flex-wrap gap-3 text-sm">
+                    {ROLE_OPTIONS.map((item) => (
+                      <label className="flex items-center gap-2" key={item.code}>
+                        <input
+                          data-testid={`users-create-role-${item.code}`}
+                          type="checkbox"
+                          checked={createRoles.has(item.code)}
+                          onChange={(event) => {
+                            setCreateRoles((prev) => {
+                              const next = new Set(prev);
+                              if (event.target.checked) {
+                                next.add(item.code);
+                              } else {
+                                next.delete(item.code);
+                              }
+                              return next;
+                            });
+                          }}
+                        />
+                        <span>{item.label}</span>
+                      </label>
+                    ))}
+                  </div>
+                </div>
+
+                <div className="flex justify-end gap-2">
+                  <Button
+                    data-testid="users-create-submit"
+                    disabled={
+                      createMutation.isPending ||
+                      !createPayload.employeeNo ||
+                      !createPayload.name ||
+                      !createPayload.phone ||
+                      !createPayload.email ||
+                      !createPayload.password ||
+                      createPayload.roles.length < 1
+                    }
+                    onClick={() => createMutation.mutate()}
+                    type="button"
+                  >
+                    {createMutation.isPending ? "创建中..." : "创建"}
+                  </Button>
+                </div>
+              </div>
+            </DialogContent>
+          </Dialog>
+        }
+      />
+
+      {error ? (
+        <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600" data-testid="users-error">
+          {error}
+        </p>
+      ) : null}
+
+      {resetResult ? (
+        <p className="rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800" data-testid="users-reset-result">
+          已重置密码（user={resetResult.userId}），一次性口令：<span className="font-mono">{resetResult.password}</span>
+        </p>
+      ) : null}
+
+      <Card className="space-y-4 p-6">
+        <div className="flex flex-wrap items-center gap-2">
+          <Input
+            data-testid="users-search"
+            value={q}
+            onChange={(e) => {
+              setQ(e.target.value);
+              setPage(1);
+            }}
+            placeholder="搜索工号/姓名/手机号/邮箱"
+          />
+          <select
+            className="h-11 rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
+            data-testid="users-status-filter"
+            value={status}
+            onChange={(e) => {
+              setStatus(e.target.value as UserStatus | "");
+              setPage(1);
+            }}
+          >
+            <option value="">全部状态</option>
+            <option value="active">active</option>
+            <option value="archived">archived</option>
+          </select>
+        </div>
+
+        {listQuery.isLoading ? <p className="text-sm text-slate-500">加载中...</p> : null}
+        {listQuery.isError ? (
+          <p className="text-sm text-red-600">
+            {isApiError(listQuery.error)
+              ? `${listQuery.error.code}: ${mapApiErrorMessage(
+                  listQuery.error.code,
+                  listQuery.error.details,
+                  listQuery.error.message,
+                )}`
+              : "加载用户列表失败"}
+          </p>
+        ) : null}
+
+        <div className="rounded-lg border border-slate-200">
+          <Table data-testid="users-table">
+            <TableHeader>
+              <tr>
+                <TableHead>工号/姓名</TableHead>
+                <TableHead>联系方式</TableHead>
+                <TableHead>状态</TableHead>
+                <TableHead>角色</TableHead>
+                <TableHead className="w-56">操作</TableHead>
+              </tr>
+            </TableHeader>
+            <TableBody>
+              {(listQuery.data?.items ?? []).length ? (
+                listQuery.data?.items.map((item) => (
+                  <TableRow data-testid="users-row" key={item.id}>
+                    <TableCell>
+                      <div className="font-medium text-slate-900">
+                        {item.employeeNo} / {item.name}
+                      </div>
+                      <div className="text-xs text-slate-500 font-mono">{item.id}</div>
+                    </TableCell>
+                    <TableCell className="text-sm">
+                      <div>{item.email}</div>
+                      <div className="text-slate-500">{item.phone}</div>
+                    </TableCell>
+                    <TableCell>{item.status}</TableCell>
+                    <TableCell className="text-xs">{formatRoleCodes(item.roleCodes)}</TableCell>
+                    <TableCell>
+                      <div className="flex flex-wrap gap-2">
+                        <Button
+                          data-testid="users-toggle"
+                          size="sm"
+                          variant="secondary"
+                          disabled={toggleMutation.isPending}
+                          onClick={() => toggleMutation.mutate(item)}
+                          type="button"
+                        >
+                          {item.status === "active" ? "禁用" : "启用"}
+                        </Button>
+
+                        <Button
+                          data-testid="users-reset-password"
+                          size="sm"
+                          variant="secondary"
+                          disabled={resetMutation.isPending}
+                          onClick={() => resetMutation.mutate(item)}
+                          type="button"
+                        >
+                          重置密码
+                        </Button>
+
+                        <Button
+                          data-testid="users-edit-roles"
+                          size="sm"
+                          variant="secondary"
+                          disabled={rolesMutation.isPending}
+                          onClick={() => {
+                            setRoleDialogUser(item);
+                            setRoleDraft(new Set(item.roleCodes));
+                          }}
+                          type="button"
+                        >
+                          角色
+                        </Button>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))
+              ) : (
+                <TableRow>
+                  <TableCell colSpan={5} className="py-3 text-slate-500">
+                    暂无数据
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </div>
+
+        <div className="flex items-center justify-between text-sm">
+          <span>
+            第 {page} / {totalPages} 页
+          </span>
+          <div className="flex gap-2">
+            <Button
+              data-testid="users-prev-page"
+              variant="secondary"
+              disabled={page <= 1}
+              onClick={() => setPage((current) => Math.max(1, current - 1))}
+              type="button"
+            >
+              上一页
+            </Button>
+            <Button
+              data-testid="users-next-page"
+              variant="secondary"
+              disabled={page >= totalPages}
+              onClick={() => setPage((current) => Math.min(totalPages, current + 1))}
+              type="button"
+            >
+              下一页
+            </Button>
+          </div>
+        </div>
+      </Card>
+
+      <Dialog
+        open={Boolean(roleDialogUser)}
+        onOpenChange={(open) => {
+          if (!open) {
+            setRoleDialogUser(null);
+            setRoleDraft(new Set());
+          }
+        }}
+      >
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle>设置角色</DialogTitle>
+            <DialogDescription>
+              当前用户：{roleDialogUser?.employeeNo} / {roleDialogUser?.name}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="flex flex-wrap gap-3 text-sm">
+            {ROLE_OPTIONS.map((item) => (
+              <label className="flex items-center gap-2" key={item.code}>
+                <input
+                  data-testid={`users-role-${item.code}`}
+                  type="checkbox"
+                  checked={roleDraft.has(item.code)}
+                  onChange={(event) => {
+                    setRoleDraft((prev) => {
+                      const next = new Set(prev);
+                      if (event.target.checked) {
+                        next.add(item.code);
+                      } else {
+                        next.delete(item.code);
+                      }
+                      return next;
+                    });
+                  }}
+                />
+                <span>{item.label}</span>
+              </label>
+            ))}
+          </div>
+
+          <div className="flex justify-end gap-2">
+            <Button
+              variant="secondary"
+              disabled={rolesMutation.isPending}
+              onClick={() => {
+                setRoleDialogUser(null);
+                setRoleDraft(new Set());
+              }}
+              type="button"
+            >
+              取消
+            </Button>
+            <Button
+              data-testid="users-role-save"
+              disabled={rolesMutation.isPending || roleDraft.size < 1}
+              onClick={() => rolesMutation.mutate()}
+              type="button"
+            >
+              {rolesMutation.isPending ? "保存中..." : "保存"}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
@@ -11,6 +11,7 @@ import { NotFoundPage } from "../pages/NotFoundPage";
 import { ProfilePage } from "../pages/ProfilePage";
 import { ReimbursementDetailPage } from "../pages/ReimbursementDetailPage";
 import { ReimbursementsPage } from "../pages/ReimbursementsPage";
+import { UserManagementPage } from "../pages/UserManagementPage";
 import { WorkflowTaskDetailPage } from "../pages/WorkflowTaskDetailPage";
 import { WorkflowTasksPage } from "../pages/WorkflowTasksPage";
 import { GuestOnly, RequireAuth, RequirePermission } from "./guards";
@@ -103,6 +104,15 @@ export function AppRouter() {
          }
        />

+        <Route
+          path="system/users"
+          element={
+            <RequirePermission anyOf={["system.users"]}>
+              <UserManagementPage />
+            </RequirePermission>
+          }
+        />
+
        <Route path="settings/profile" element={<ProfilePage />} />
      </Route>

@@ -0,0 +1,114 @@
+import { expect, test, type Page } from "@playwright/test";
+
+const EMPLOYEE = { identifier: "[email protected]", password: "EmployeePassword1234", name: "Employee" };
+const MANAGER = { identifier: "[email protected]", password: "ManagerPassword1234", name: "Manager" };
+const FINANCE = { identifier: "[email protected]", password: "FinancePassword1234", name: "Finance" };
+
+async function login(page: Page, user: { identifier: string; password: string }) {
+  await page.goto("/login");
+  await page.getByTestId("login-identifier").fill(user.identifier);
+  await page.getByTestId("login-password").fill(user.password);
+  await page.getByTestId("login-submit").click();
+  await expect(page).toHaveURL(/\/dashboard/);
+}
+
+async function logout(page: Page, userDisplayName: string) {
+  await page.getByRole("button", { name: userDisplayName }).click();
+  await page.getByRole("menuitem", { name: "退出登录" }).click();
+  await expect(page).toHaveURL(/\/login/);
+}
+
+function extractId(text: string, label: string) {
+  const match = text.match(new RegExp(`${label}：([0-9a-f-]{36})`));
+  if (!match?.[1]) {
+    throw new Error(`Failed to parse ${label} from text: ${text}`);
+  }
+  return match[1];
+}
+
+test("E2E 主链路：登录→报销→待办审批→票据OCR→支付→登出", async ({ page }) => {
+  // 1) employee: create reimbursement
+  await login(page, EMPLOYEE);
+
+  await page.getByRole("link", { name: "我的报销" }).click();
+  await page.getByTestId("reimbursements-create").click();
+  await expect(page.getByTestId("reimbursements-table")).toBeVisible();
+  const firstRow = page.getByTestId("reimbursements-table").getByTestId("reimbursement-row").first();
+  await expect(firstRow).toBeVisible();
+  await firstRow.getByTestId("reimbursement-detail-link").click();
+  await expect(page.getByTestId("reimbursement-summary")).toBeVisible();
+
+  const reimbursementSummaryText = await page.getByTestId("reimbursement-summary").innerText();
+  const reimbursementId = extractId(reimbursementSummaryText, "报销ID");
+
+  // 2) employee: upload invoice and wait OCR
+  await page.getByRole("link", { name: "票据中心" }).click();
+  const marker = `MOCK_E2E_${Date.now()}_${Math.random().toString(16).slice(2)}`;
+  await page.getByTestId("invoice-upload-file").setInputFiles({
+    name: `e2e-${Date.now()}.png`,
+    mimeType: "image/png",
+    buffer: Buffer.from(marker, "utf8"),
+  });
+  await page.getByTestId("invoice-upload-submit").click();
+
+  await expect(page.getByTestId("invoice-detail-panel")).toBeVisible();
+  await expect(page.getByTestId("invoice-detail-panel")).toContainText("状态：pending_ocr");
+  await expect(page.getByTestId("invoice-detail-panel")).toContainText("状态：available", { timeout: 90_000 });
+
+  const invoiceDetailText = await page.getByTestId("invoice-detail-panel").innerText();
+  const invoiceId = extractId(invoiceDetailText, "票据ID");
+
+  // 预览（popup 存在即可）
+  const popupPromise = page.waitForEvent("popup");
+  const invoiceRow = page.getByTestId("invoice-row").filter({ hasText: invoiceId }).first();
+  await expect(invoiceRow).toBeVisible();
+  await invoiceRow.getByTestId("invoice-preview-button").click();
+  const popup = await popupPromise;
+  await expect(popup).toHaveURL(new RegExp(`/api/invoice-pool/${invoiceId}`));
+  await popup.close();
+
+  // 3) bind invoice to reimbursement
+  await page.getByTestId("invoice-bind-invoice").selectOption(invoiceId);
+  await page.getByTestId("invoice-bind-reimbursement").selectOption(reimbursementId);
+  await page.getByTestId("invoice-bind-submit").click();
+
+  // 4) submit reimbursement
+  await page.goto(`/reimbursements/${reimbursementId}`);
+  await page.getByTestId("reimbursement-submit").click();
+  await expect(page.getByText("状态：reviewing")).toBeVisible();
+
+  // 5) manager approve
+  await logout(page, EMPLOYEE.name);
+  await login(page, MANAGER);
+
+  await page.getByRole("link", { name: "待我处理" }).click();
+  await expect(page.getByTestId("workflow-tasks-table")).toBeVisible();
+  const managerTaskRow = page.getByTestId("workflow-task-row").filter({ hasText: reimbursementId }).first();
+  await expect(managerTaskRow).toBeVisible();
+  await managerTaskRow.getByTestId("workflow-task-detail-link").click();
+  await page.getByTestId("workflow-task-approve").click();
+  await expect(page.getByTestId("workflow-task-summary")).toContainText("状态：completed");
+
+  await logout(page, MANAGER.name);
+
+  // 6) finance approve + pay
+  await login(page, FINANCE);
+  await page.getByRole("link", { name: "待我处理" }).click();
+  const financeTaskRow = page.getByTestId("workflow-task-row").filter({ hasText: reimbursementId }).first();
+  await expect(financeTaskRow).toBeVisible();
+  await financeTaskRow.getByTestId("workflow-task-detail-link").click();
+  await page.getByTestId("workflow-task-approve").click();
+  await expect(page.getByTestId("workflow-task-summary")).toContainText("状态：completed");
+
+  await page.goto(`/reimbursements/${reimbursementId}`);
+  await expect(page.getByText("状态：approved")).toBeVisible({ timeout: 30_000 });
+  await page.getByTestId("reimbursement-pay-voucher-no").fill(`E2E-${Date.now()}`);
+  await page.getByTestId("reimbursement-pay").click();
+  await expect(page.getByText("状态：paid")).toBeVisible({ timeout: 30_000 });
+
+  await logout(page, FINANCE.name);
+
+  // 7) guard: unauth -> login
+  await page.goto("/dashboard");
+  await expect(page).toHaveURL(/\/login/);
+});
@@ -0,0 +1,2 @@
+MOCK_INVOICE_E2E_1
+