优化财务与管理页视觉 Wave4（05-27-pc-finance-admin-visual-wave4）

client/src/pages/UserManagementPage.tsx

@@ -14,7 +14,7 @@ import {
   type UserStatus,
   type UserSummary,
 } from "../api/users";
-import { PageHeader } from "../components/common/PageHeader";
+import { ListWorkspace, WorkspaceHeader } from "../components/patterns/ListWorkspace";
 import { Button } from "../components/ui/button";
 import { Input } from "../components/ui/input";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/ui/table";
@@ -76,6 +76,13 @@ export function UserManagementPage() {
   });
 
   const totalPages = Math.max(1, Math.ceil((listQuery.data?.total ?? 0) / PAGE_SIZE));
+  const users = listQuery.data?.items ?? [];
+  const userStats = {
+    total: listQuery.data?.total ?? 0,
+    active: users.filter((item) => item.status === "active").length,
+    archived: users.filter((item) => item.status === "archived").length,
+    roles: new Set(users.flatMap((item) => item.roleCodes)).size,
+  };
 
   const createMutation = useMutation({
     mutationFn: (payload: CreateUserFormData) => createUser(payload),
@@ -150,10 +157,10 @@ export function UserManagementPage() {
   });
 
   return (
-    <div className="space-y-6">
-      <PageHeader
+    <ListWorkspace>
+      <WorkspaceHeader
         title="系统用户管理"
-        subtitle="创建/启用/禁用账号，系统自动生成工号并展示一次性口令，管理员只负责最小开通与角色分配。"
+        subtitle="账号开通、停用、角色和一次性口令集中处理。"
         actions={
           <div className="flex gap-2">
             <UserImportDialog
@@ -213,8 +220,16 @@ export function UserManagementPage() {
         </p>
       ) : null}
 
-      <div className="card-std space-y-4 p-6">
-        <div className="flex flex-wrap items-center gap-2">
+      <div className="finance-status-strip" data-testid="users-summary">
+        <div className="finance-metric-card"><div className="finance-metric-card__label">用户总数</div><div className="finance-metric-card__value">{userStats.total}</div></div>
+        <div className="finance-metric-card"><div className="finance-metric-card__label">当前页生效</div><div className="finance-metric-card__value">{userStats.active}</div></div>
+        <div className="finance-metric-card"><div className="finance-metric-card__label">当前页停用</div><div className="finance-metric-card__value">{userStats.archived}</div></div>
+        <div className="finance-metric-card"><div className="finance-metric-card__label">当前页角色</div><div className="finance-metric-card__value">{userStats.roles}</div></div>
+        <div className="finance-metric-card"><div className="finance-metric-card__label">当前页</div><div className="finance-metric-card__value">{page}</div></div>
+      </div>
+
+      <div className="admin-command-panel space-y-4">
+        <div className="ops-command-bar__row">
           <Input
             data-testid="users-search"
             value={q}
@@ -252,7 +267,7 @@ export function UserManagementPage() {
           </p>
         ) : null}
 
-        <div className="rounded-lg border border-zinc-200">
+        <div className="ops-table-focus overflow-x-auto">
           <Table data-testid="users-table">
             <TableHeader>
               <tr>
@@ -264,8 +279,8 @@ export function UserManagementPage() {
               </tr>
             </TableHeader>
             <TableBody>
-              {(listQuery.data?.items ?? []).length ? (
-                listQuery.data?.items.map((item) => (
+              {users.length ? (
+                users.map((item) => (
                   <TableRow data-testid="users-row" key={item.id}>
                     <TableCell>
                       <div className="font-medium text-zinc-900">
@@ -352,6 +367,6 @@ export function UserManagementPage() {
         }}
         isPending={rolesMutation.isPending}
       />
-    </div>
+    </ListWorkspace>
   );
 }