Add LAN deploy scripts and improve admin billing/users UX.

Provide rsync deploy and restart tooling for the 100 server, document the workflow, and add pagination plus user filtering across billing and user management pages. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-16 20:46:59 +08:00
parent 8ad1a8a8da
commit 680e2c9427
11 changed files with 1079 additions and 275 deletions
@@ -2,6 +2,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { listAdminUsers } from '../../api/client';
 import type { AdminUserRow } from '../../types';

+// Lightweight hook for user dropdowns — loads up to 100 users, no pagination.
 export function useAdminUsers() {
  const [users, setUsers] = useState<AdminUserRow[]>([]);
  const [loading, setLoading] = useState(true);
@@ -11,7 +12,8 @@ export function useAdminUsers() {
    setLoading(true);
    setError(null);
    try {
-      setUsers(await listAdminUsers());
+      const result = await listAdminUsers({ pageSize: 100 });
+      setUsers(result.items);
    } catch (err) {
      setError(err instanceof Error ? err.message : '加载用户失败');
    } finally {
@@ -1,9 +1,95 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { listAdminLedger, listAdminUsage, rechargeUser } from '../../api/client';
-import type { LedgerEntry, UsageRecord } from '../../types';
+import type { PagedResult } from '../../api/client';
+import type { AdminUserRow, LedgerEntry, UsageRecord } from '../../types';
+import { Pagination } from '../../components/Pagination';
 import { useAdminUsers } from '../hooks/useAdminUsers';
 import { formatTime, formatYuan } from '../utils/format';

+function UserCombobox({
+  users,
+  value,
+  onChange,
+  placeholder = '搜索用户名 / 显示名称',
+}: {
+  users: AdminUserRow[];
+  value: string;
+  onChange: (id: string) => void;
+  placeholder?: string;
+}) {
+  const [query, setQuery] = useState('');
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  const selected = users.find((u) => u.id === value);
+
+  const filtered = query.trim()
+    ? users.filter((u) => {
+        const q = query.toLowerCase();
+        return u.username.toLowerCase().includes(q) || u.displayName.toLowerCase().includes(q);
+      })
+    : users;
+
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, []);
+
+  const select = (u: AdminUserRow) => {
+    onChange(u.id);
+    setQuery('');
+    setOpen(false);
+  };
+
+  const clear = () => {
+    onChange('');
+    setQuery('');
+  };
+
+  return (
+    <div ref={ref} className="user-combobox">
+      <div className="user-combobox-input-wrap" onClick={() => setOpen(true)}>
+        {selected && !open ? (
+          <span className="user-combobox-selected">
+            {selected.displayName} <span className="muted">@{selected.username}</span>
+            <span className="user-combobox-balance">¥{formatYuan(selected.balanceCents)}</span>
+          </span>
+        ) : (
+          <input
+            className="user-combobox-input"
+            placeholder={selected ? `${selected.displayName} @${selected.username}` : placeholder}
+            value={query}
+            autoFocus={open}
+            onChange={(e) => { setQuery(e.target.value); setOpen(true); }}
+            onFocus={() => setOpen(true)}
+          />
+        )}
+        {value && (
+          <button type="button" className="user-combobox-clear" onClick={(e) => { e.stopPropagation(); clear(); }}>×</button>
+        )}
+      </div>
+      {open && (
+        <div className="user-combobox-dropdown">
+          {filtered.length === 0 ? (
+            <div className="user-combobox-empty">无匹配用户</div>
+          ) : (
+            filtered.map((u) => (
+              <div key={u.id} className="user-combobox-option" onMouseDown={() => select(u)}>
+                <span className="user-combobox-name">{u.displayName}</span>
+                <span className="user-combobox-meta muted">@{u.username}</span>
+                <span className="user-combobox-bal">¥{formatYuan(u.balanceCents)}</span>
+              </div>
+            ))
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
 type TabKey = 'recharge' | 'usage' | 'ledger';

 const TABS: { key: TabKey; label: string }[] = [
@@ -12,6 +98,8 @@ const TABS: { key: TabKey; label: string }[] = [
  { key: 'ledger', label: '资金流水' },
 ];

+const PAGE_SIZE = 20;
+
 function RechargeTab() {
  const { users, reload, error, setError } = useAdminUsers();
  const [message, setMessage] = useState<string | null>(null);
@@ -43,32 +131,15 @@ function RechargeTab() {
      {error && <p className="banner banner-error">{error}</p>}
      {message && <p className="banner banner-info">{message}</p>}
      <form className="admin-form" onSubmit={handleRecharge}>
-        <select
+        <UserCombobox
+          users={users.filter((u) => u.role === 'user')}
          value={recharge.userId}
-          onChange={(e) => setRecharge((s) => ({ ...s, userId: e.target.value }))}
-        >
-          <option value="">选择用户</option>
-          {users
-            .filter((u) => u.role === 'user')
-            .map((u) => (
-              <option key={u.id} value={u.id}>
-                {u.username}（¥{formatYuan(u.balanceCents)}）
-              </option>
-            ))}
-        </select>
-        <input
-          placeholder="金额（元）"
-          type="number"
-          min="0.01"
-          step="0.01"
-          value={recharge.amountYuan}
-          onChange={(e) => setRecharge((s) => ({ ...s, amountYuan: e.target.value }))}
-        />
-        <input
-          placeholder="备注（可选）"
-          value={recharge.note}
-          onChange={(e) => setRecharge((s) => ({ ...s, note: e.target.value }))}
+          onChange={(id) => setRecharge((s) => ({ ...s, userId: id }))}
        />
+        <input placeholder="金额（元）" type="number" min="0.01" step="0.01" value={recharge.amountYuan}
+          onChange={(e) => setRecharge((s) => ({ ...s, amountYuan: e.target.value }))} />
+        <input placeholder="备注（可选）" value={recharge.note}
+          onChange={(e) => setRecharge((s) => ({ ...s, note: e.target.value }))} />
        <button type="submit" className="send-btn" disabled={!recharge.userId || submitting}>
          {submitting ? '处理中…' : '充值'}
        </button>
@@ -79,16 +150,19 @@ function RechargeTab() {

 function UsageTab() {
  const { users } = useAdminUsers();
-  const [usage, setUsage] = useState<UsageRecord[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [filterUserId, setFilterUserId] = useState('');
+  const [result, setResult] = useState<PagedResult<UsageRecord> | null>(null);
+  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
+  const [filterUserId, setFilterUserId] = useState('');
+  const [pendingUserId, setPendingUserId] = useState('');

-  const load = useCallback(async (userId?: string) => {
+  const load = useCallback(async (p: number, userId: string) => {
    setLoading(true);
    setError(null);
    try {
-      setUsage(await listAdminUsage(userId || undefined));
+      const data = await listAdminUsage({ userId: userId || undefined, page: p, pageSize: PAGE_SIZE });
+      setResult(data);
+      setFilterUserId(userId);
    } catch (err) {
      setError(err instanceof Error ? err.message : '加载失败');
    } finally {
@@ -96,64 +170,67 @@ function UsageTab() {
    }
  }, []);

-  useEffect(() => {
-    void load(filterUserId || undefined);
-  }, [load, filterUserId]);
+  useEffect(() => { void load(1, ''); }, [load]);
+
+  const handleQuery = () => void load(1, pendingUserId);
+  const handlePage = (p: number) => void load(p, filterUserId);

  return (
    <section className="admin-card">
      <div className="admin-card-head">
        <h2>用量记录</h2>
        <div className="billing-toolbar">
-          <select
-            className="billing-filter-select"
-            value={filterUserId}
-            onChange={(e) => setFilterUserId(e.target.value)}
-          >
-            <option value="">全部用户</option>
-            {users.map((u) => (
-              <option key={u.id} value={u.id}>
-                {u.username}
-              </option>
-            ))}
-          </select>
-          <button type="button" className="ghost-btn" onClick={() => void load(filterUserId || undefined)}>
-            刷新
+          <UserCombobox
+            users={users}
+            value={pendingUserId}
+            onChange={setPendingUserId}
+            placeholder="全部用户"
+          />
+          <button type="button" className="send-btn billing-query-btn" onClick={handleQuery} disabled={loading}>
+            查询
          </button>
        </div>
      </div>
      {error && <p className="banner banner-error">{error}</p>}
-      {loading ? (
-        <p className="muted">加载中…</p>
-      ) : usage.length === 0 ? (
-        <p className="muted billing-empty">暂无记录</p>
-      ) : (
-        <div className="admin-table-wrap">
-          <table className="admin-table">
-            <thead>
-              <tr>
-                <th>时间</th>
-                <th>用户</th>
-                <th>输入 Token</th>
-                <th>输出 Token</th>
-                <th>扣费</th>
-                <th>余额后</th>
-              </tr>
-            </thead>
-            <tbody>
-              {usage.map((row) => (
-                <tr key={row.id}>
-                  <td className="billing-time">{formatTime(row.createdAt)}</td>
-                  <td>@{row.username}</td>
-                  <td className="billing-num">{row.inputTokens.toLocaleString()}</td>
-                  <td className="billing-num">{row.outputTokens.toLocaleString()}</td>
-                  <td className="billing-num">¥{formatYuan(row.costCents)}</td>
-                  <td className="billing-num">¥{formatYuan(row.balanceAfterCents)}</td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
+      {!result && !loading && (
+        <p className="muted billing-empty">选择筛选条件后点击查询</p>
+      )}
+      {loading && <p className="muted">加载中…</p>}
+      {!loading && result && (
+        result.items.length === 0 ? (
+          <p className="muted billing-empty">暂无记录</p>
+        ) : (
+          <>
+            <div className="admin-table-wrap">
+              <table className="admin-table">
+                <thead>
+                  <tr>
+                    <th>时间</th>
+                    <th>用户</th>
+                    <th style={{ textAlign: 'right' }}>输入 Token</th>
+                    <th style={{ textAlign: 'right' }}>输出 Token</th>
+                    <th style={{ textAlign: 'right' }}>扣费</th>
+                    <th style={{ textAlign: 'right' }}>余额后</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {result.items.map((row) => (
+                    <tr key={row.id}>
+                      <td className="billing-time">{formatTime(row.createdAt)}</td>
+                      <td>@{row.username}</td>
+                      <td className="billing-num">{row.inputTokens.toLocaleString()}</td>
+                      <td className="billing-num">{row.outputTokens.toLocaleString()}</td>
+                      <td className="billing-num">¥{formatYuan(row.costCents)}</td>
+                      <td className="billing-num">¥{formatYuan(row.balanceAfterCents)}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            <Pagination page={result.page} totalPages={result.totalPages} total={result.total}
+              pageSize={result.pageSize} onChange={handlePage} />
+          </>
+        )
      )}
    </section>
  );
@@ -161,16 +238,19 @@ function UsageTab() {

 function LedgerTab() {
  const { users } = useAdminUsers();
-  const [ledger, setLedger] = useState<LedgerEntry[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [filterUserId, setFilterUserId] = useState('');
+  const [result, setResult] = useState<PagedResult<LedgerEntry> | null>(null);
+  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
+  const [filterUserId, setFilterUserId] = useState('');
+  const [pendingUserId, setPendingUserId] = useState('');

-  const load = useCallback(async (userId?: string) => {
+  const load = useCallback(async (p: number, userId: string) => {
    setLoading(true);
    setError(null);
    try {
-      setLedger(await listAdminLedger(userId || undefined));
+      const data = await listAdminLedger({ userId: userId || undefined, page: p, pageSize: PAGE_SIZE });
+      setResult(data);
+      setFilterUserId(userId);
    } catch (err) {
      setError(err instanceof Error ? err.message : '加载失败');
    } finally {
@@ -178,75 +258,69 @@ function LedgerTab() {
    }
  }, []);

-  useEffect(() => {
-    void load(filterUserId || undefined);
-  }, [load, filterUserId]);
+  useEffect(() => { void load(1, ''); }, [load]);

-  const TYPE_LABEL: Record<string, string> = {
-    recharge: '充值',
-    deduct: '扣费',
-    refund: '退款',
-    adjust: '调整',
-  };
+  const handleQuery = () => void load(1, pendingUserId);
+  const handlePage = (p: number) => void load(p, filterUserId);
+
+  const TYPE_LABEL: Record<string, string> = { recharge: '充值', deduct: '扣费', refund: '退款', adjust: '调整' };

  return (
    <section className="admin-card">
      <div className="admin-card-head">
        <h2>资金流水</h2>
        <div className="billing-toolbar">
-          <select
-            className="billing-filter-select"
-            value={filterUserId}
-            onChange={(e) => setFilterUserId(e.target.value)}
-          >
-            <option value="">全部用户</option>
-            {users.map((u) => (
-              <option key={u.id} value={u.id}>
-                {u.username}
-              </option>
-            ))}
-          </select>
-          <button type="button" className="ghost-btn" onClick={() => void load(filterUserId || undefined)}>
-            刷新
+          <UserCombobox
+            users={users}
+            value={pendingUserId}
+            onChange={setPendingUserId}
+            placeholder="全部用户"
+          />
+          <button type="button" className="send-btn billing-query-btn" onClick={handleQuery} disabled={loading}>
+            查询
          </button>
        </div>
      </div>
      {error && <p className="banner banner-error">{error}</p>}
-      {loading ? (
-        <p className="muted">加载中…</p>
-      ) : ledger.length === 0 ? (
-        <p className="muted billing-empty">暂无记录</p>
-      ) : (
-        <div className="admin-table-wrap">
-          <table className="admin-table">
-            <thead>
-              <tr>
-                <th>时间</th>
-                <th>用户</th>
-                <th>类型</th>
-                <th>金额</th>
-                <th>备注</th>
-              </tr>
-            </thead>
-            <tbody>
-              {ledger.map((row) => (
-                <tr key={row.id}>
-                  <td className="billing-time">{formatTime(row.createdAt)}</td>
-                  <td>@{row.username}</td>
-                  <td>
-                    <span className={`ledger-type-tag ledger-type-${row.type}`}>
-                      {TYPE_LABEL[row.type] ?? row.type}
-                    </span>
-                  </td>
-                  <td className={`billing-num ${row.amountCents < 0 ? 'text-error' : 'text-income'}`}>
-                    {row.amountCents >= 0 ? '+' : ''}¥{formatYuan(Math.abs(row.amountCents))}
-                  </td>
-                  <td className="billing-note">{row.note ?? '—'}</td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
+      {!result && !loading && (
+        <p className="muted billing-empty">选择筛选条件后点击查询</p>
+      )}
+      {loading && <p className="muted">加载中…</p>}
+      {!loading && result && (
+        result.items.length === 0 ? (
+          <p className="muted billing-empty">暂无记录</p>
+        ) : (
+          <>
+            <div className="admin-table-wrap">
+              <table className="admin-table">
+                <thead>
+                  <tr>
+                    <th>时间</th>
+                    <th>用户</th>
+                    <th>类型</th>
+                    <th style={{ textAlign: 'right' }}>金额</th>
+                    <th>备注</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {result.items.map((row) => (
+                    <tr key={row.id}>
+                      <td className="billing-time">{formatTime(row.createdAt)}</td>
+                      <td>@{row.username}</td>
+                      <td><span className={`ledger-type-tag ledger-type-${row.type}`}>{TYPE_LABEL[row.type] ?? row.type}</span></td>
+                      <td className={`billing-num ${row.amountCents < 0 ? 'text-error' : 'text-income'}`}>
+                        {row.amountCents >= 0 ? '+' : ''}¥{formatYuan(Math.abs(row.amountCents))}
+                      </td>
+                      <td className="billing-note">{row.note ?? '—'}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            <Pagination page={result.page} totalPages={result.totalPages} total={result.total}
+              pageSize={result.pageSize} onChange={handlePage} />
+          </>
+        )
      )}
    </section>
  );
@@ -261,22 +335,15 @@ export function BillingPage() {
        <h2>计费中心</h2>
        <p className="muted">充值、用量与资金流水</p>
      </div>
-
      <div className="admin-tabs" role="tablist">
        {TABS.map((tab) => (
-          <button
-            key={tab.key}
-            type="button"
-            role="tab"
-            aria-selected={activeTab === tab.key}
+          <button key={tab.key} type="button" role="tab" aria-selected={activeTab === tab.key}
            className={`admin-tab${activeTab === tab.key ? ' active' : ''}`}
-            onClick={() => setActiveTab(tab.key)}
-          >
+            onClick={() => setActiveTab(tab.key)}>
            {tab.label}
          </button>
        ))}
      </div>
-
      <div className="billing-tab-content">
        {activeTab === 'recharge' && <RechargeTab />}
        {activeTab === 'usage' && <UsageTab />}
@@ -1,24 +1,63 @@
-import { useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { createAdminUser, updateAdminUser } from '../../api/client';
-import { useAdminUsers } from '../hooks/useAdminUsers';
+import { createAdminUser, listAdminUsers, updateAdminUser } from '../../api/client';
+import type { PagedResult } from '../../api/client';
+import type { AdminUserRow } from '../../types';
+import { Pagination } from '../../components/Pagination';
 import { formatYuan } from '../utils/format';

+const PAGE_SIZE = 20;
+
 export function UsersPage() {
-  const { users, loading, error, reload, setError } = useAdminUsers();
+  const [result, setResult] = useState<PagedResult<AdminUserRow> | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
  const [message, setMessage] = useState<string | null>(null);
-  const [newUser, setNewUser] = useState({
-    username: '',
-    password: '',
-    displayName: '',
-    workspaceRoot: '',
-    balanceCents: 500,
-  });
+
+  // query params committed on search click — separate from pending inputs
+  const [committed, setCommitted] = useState({ search: '', role: '', status: '' });
+  const [pending, setPending] = useState({ search: '', role: '', status: '' });
+
+  const [showCreate, setShowCreate] = useState(false);
+  const [newUser, setNewUser] = useState({ username: '', password: '', displayName: '', workspaceRoot: '', balanceCents: 500 });
+  const [creating, setCreating] = useState(false);
+
+  const load = useCallback(async (p: number, q: { search: string; role: string; status: string }) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await listAdminUsers({ page: p, pageSize: PAGE_SIZE, search: q.search, role: q.role, status: q.status });
+      setResult(data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : '加载失败');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void load(1, committed);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleQuery = () => {
+    setCommitted(pending);
+    void load(1, pending);
+  };
+
+  const handlePage = (p: number) => void load(p, committed);
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') handleQuery();
+  };
+
+  const reload = () => void load(result?.page ?? 1, committed);

  const handleCreate = async (e: React.FormEvent) => {
    e.preventDefault();
    setMessage(null);
    setError(null);
+    setCreating(true);
    try {
      await createAdminUser({
        username: newUser.username,
@@ -27,17 +66,23 @@ export function UsersPage() {
        workspaceRoot: newUser.workspaceRoot || undefined,
        balanceCents: Number(newUser.balanceCents),
      });
-      setNewUser({
-        username: '',
-        password: '',
-        displayName: '',
-        workspaceRoot: '',
-        balanceCents: 500,
-      });
+      setNewUser({ username: '', password: '', displayName: '', workspaceRoot: '', balanceCents: 500 });
      setMessage('用户已创建');
-      await reload();
+      setShowCreate(false);
+      reload();
    } catch (err) {
      setError(err instanceof Error ? err.message : '创建失败');
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  const toggleStatus = async (user: AdminUserRow) => {
+    try {
+      await updateAdminUser(user.id, { status: user.status === 'active' ? 'disabled' : 'active' });
+      reload();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : '操作失败');
    }
  };

@@ -45,108 +90,118 @@ export function UsersPage() {
    <div className="admin-page">
      <div className="admin-page-head">
        <h2>用户管理</h2>
-        <p className="muted">创建账号、查看列表、进入用户详情配置权限</p>
+        <p className="muted">搜索账号、查看列表、进入用户详情配置权限</p>
      </div>

      {error && <p className="banner banner-error">{error}</p>}
      {message && <p className="banner banner-info">{message}</p>}

-      <section className="admin-card">
-        <h2>创建用户</h2>
-        <form className="admin-form" onSubmit={handleCreate}>
-          <input
-            placeholder="用户名"
-            autoComplete="username"
-            value={newUser.username}
-            onChange={(e) => setNewUser((s) => ({ ...s, username: e.target.value }))}
-          />
-          <input
-            placeholder="密码"
-            type="password"
-            autoComplete="new-password"
-            value={newUser.password}
-            onChange={(e) => setNewUser((s) => ({ ...s, password: e.target.value }))}
-          />
-          <input
-            placeholder="显示名称"
-            value={newUser.displayName}
-            onChange={(e) => setNewUser((s) => ({ ...s, displayName: e.target.value }))}
-          />
-          <input
-            placeholder="工作目录（可选）"
-            value={newUser.workspaceRoot}
-            onChange={(e) => setNewUser((s) => ({ ...s, workspaceRoot: e.target.value }))}
-          />
-          <input
-            placeholder="初始余额（分）"
-            type="number"
-            value={newUser.balanceCents}
-            onChange={(e) =>
-              setNewUser((s) => ({ ...s, balanceCents: Number(e.target.value) }))
-            }
-          />
-          <button type="submit" className="send-btn">
-            创建
-          </button>
-        </form>
-      </section>
+      {showCreate && (
+        <section className="admin-card">
+          <div className="admin-card-head">
+            <h2>创建用户</h2>
+            <button type="button" className="ghost-btn" onClick={() => setShowCreate(false)}>取消</button>
+          </div>
+          <form className="admin-form" onSubmit={handleCreate}>
+            <input placeholder="用户名" autoComplete="username" required value={newUser.username} onChange={(e) => setNewUser((s) => ({ ...s, username: e.target.value }))} />
+            <input placeholder="密码" type="password" autoComplete="new-password" required minLength={6} value={newUser.password} onChange={(e) => setNewUser((s) => ({ ...s, password: e.target.value }))} />
+            <input placeholder="显示名称" value={newUser.displayName} onChange={(e) => setNewUser((s) => ({ ...s, displayName: e.target.value }))} />
+            <input placeholder="工作目录（可选）" value={newUser.workspaceRoot} onChange={(e) => setNewUser((s) => ({ ...s, workspaceRoot: e.target.value }))} />
+            <input placeholder="初始余额（分）" type="number" value={newUser.balanceCents} onChange={(e) => setNewUser((s) => ({ ...s, balanceCents: Number(e.target.value) }))} />
+            <button type="submit" className="send-btn" disabled={creating}>{creating ? '创建中…' : '创建'}</button>
+          </form>
+        </section>
+      )}

      <section className="admin-card">
        <div className="admin-card-head">
-          <h2>用户列表</h2>
-          <button type="button" className="ghost-btn" onClick={() => void reload()}>
-            刷新
-          </button>
-        </div>
-        {loading ? (
-          <p className="muted">加载中…</p>
-        ) : (
-          <div className="admin-table-wrap">
-            <table className="admin-table">
-              <thead>
-                <tr>
-                  <th>用户</th>
-                  <th>角色</th>
-                  <th>状态</th>
-                  <th>余额</th>
-                  <th>工作目录</th>
-                  <th>操作</th>
-                </tr>
-              </thead>
-              <tbody>
-                {users.map((user) => (
-                  <tr key={user.id}>
-                    <td>
-                      <div>{user.displayName}</div>
-                      <div className="muted">@{user.username}</div>
-                    </td>
-                    <td>{user.role}</td>
-                    <td>{user.status}</td>
-                    <td>¥{formatYuan(user.balanceCents)}</td>
-                    <td className="mono">{user.workspaceRoot}</td>
-                    <td className="admin-actions">
-                      <Link to={`/admin/users/${user.id}`} className="ghost-btn admin-inline-link">
-                        详情
-                      </Link>
-                      {user.role === 'user' && (
-                        <button
-                          type="button"
-                          className="ghost-btn"
-                          onClick={() =>
-                            void updateAdminUser(user.id, {
-                              status: user.status === 'active' ? 'disabled' : 'active',
-                            }).then(reload)
-                          }
-                        >
-                          {user.status === 'active' ? '禁用' : '启用'}
-                        </button>
-                      )}
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
+          <h2>
+            用户列表
+            {result && <span className="users-total-badge">{result.total.toLocaleString()} 人</span>}
+          </h2>
+          <div className="users-toolbar">
+            <input
+              className="users-search-input"
+              placeholder="搜索用户名 / 显示名"
+              value={pending.search}
+              onChange={(e) => setPending((s) => ({ ...s, search: e.target.value }))}
+              onKeyDown={handleKeyDown}
+            />
+            <select className="billing-filter-select" value={pending.role}
+              onChange={(e) => setPending((s) => ({ ...s, role: e.target.value }))}>
+              <option value="">全部角色</option>
+              <option value="user">普通用户</option>
+              <option value="admin">管理员</option>
+            </select>
+            <select className="billing-filter-select" value={pending.status}
+              onChange={(e) => setPending((s) => ({ ...s, status: e.target.value }))}>
+              <option value="">全部状态</option>
+              <option value="active">正常</option>
+              <option value="disabled">禁用</option>
+              <option value="suspended">封禁</option>
+            </select>
+            <button type="button" className="send-btn billing-query-btn" onClick={handleQuery} disabled={loading}>
+              查询
+            </button>
+            <button type="button" className="ghost-btn" onClick={() => setShowCreate((v) => !v)}>
+              {showCreate ? '取消' : '+ 新建'}
+            </button>
          </div>
+        </div>
+
+        {!result && !loading && (
+          <p className="muted billing-empty">输入条件后点击查询，或直接点查询加载全部</p>
+        )}
+        {loading && <p className="muted">加载中…</p>}
+        {!loading && result && (
+          result.items.length === 0 ? (
+            <p className="muted billing-empty">没有匹配的用户</p>
+          ) : (
+            <>
+              <div className="admin-table-wrap">
+                <table className="admin-table">
+                  <thead>
+                    <tr>
+                      <th>用户</th>
+                      <th>角色</th>
+                      <th>状态</th>
+                      <th>余额</th>
+                      <th>工作目录</th>
+                      <th>操作</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {result.items.map((user) => (
+                      <tr key={user.id}>
+                        <td>
+                          <div>{user.displayName}</div>
+                          <div className="muted">@{user.username}</div>
+                        </td>
+                        <td><span className={`role-tag role-${user.role}`}>{user.role === 'admin' ? '管理员' : '用户'}</span></td>
+                        <td>
+                          <span className={`status-tag status-${user.status}`}>
+                            {user.status === 'active' ? '正常' : user.status === 'disabled' ? '禁用' : '封禁'}
+                          </span>
+                        </td>
+                        <td className="billing-num">¥{formatYuan(user.balanceCents)}</td>
+                        <td className="admin-table-path">{user.workspaceRoot || '—'}</td>
+                        <td className="admin-actions">
+                          <Link to={`/admin/users/${user.id}`} className="ghost-btn">详情</Link>
+                          {user.role === 'user' && (
+                            <button type="button" className="ghost-btn" onClick={() => void toggleStatus(user)}>
+                              {user.status === 'active' ? '禁用' : '启用'}
+                            </button>
+                          )}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+              <Pagination page={result.page} totalPages={result.totalPages} total={result.total}
+                pageSize={result.pageSize} onChange={handlePage} />
+            </>
+          )
        )}
      </section>
    </div>