feat: 交付官方 Docker 运行时，外观改背景图并下线自定义 CSS/JS

站点/后台分轨背景与用户列表排序一并落地；生产 CORS 改走 SITE_URL，健康检查带版本号。

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/app/admin/users/UsersAdmin.tsx

@@ -4,8 +4,12 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
 import {
+  ArrowUpDown,
+  ChevronDown,
   ChevronLeft,
   ChevronRight,
+  ChevronsUpDown,
+  ChevronUp,
   Clock,
   Columns3,
   ExternalLink,
@@ -46,12 +50,14 @@ import {
 } from "@/components/admin";
 
 export type UserFilter = "all" | "staff" | "banned";
+export type UserSortKey = "id" | "role" | "status" | "points" | "last_login" | "counts" | "created_at" | "online";
+export type UserSortDir = "asc" | "desc";
 
 const PAGE_SIZE = 20;
 const COLS_STORAGE_KEY = "j13-admin-user-cols";
 
 /** 默认始终显示的列 */
-const CORE_COLS = ["member", "role", "status", "points", "last_login", "actions"] as const;
+const CORE_COLS = ["id", "member", "role", "status", "points", "last_login", "actions"] as const;
 /** 可选列（localStorage 开关） */
 const OPTIONAL_COLS = ["online", "email", "counts", "created_at"] as const;
 
@@ -59,6 +65,9 @@ type CoreCol = (typeof CORE_COLS)[number];
 type OptionalCol = (typeof OPTIONAL_COLS)[number];
 type ColKey = CoreCol | OptionalCol;
 
+/** 可服务端排序的列（与后端白名单一致） */
+const SORTABLE_COLS = new Set<ColKey>(["id", "role", "status", "points", "last_login", "counts", "created_at", "online"]);
+
 const OPTIONAL_LABELS: Record<OptionalCol, string> = {
   online: "在线",
   email: "邮箱",
@@ -96,6 +105,17 @@ const FILTER_TABS: { key: UserFilter; label: string }[] = [
   { key: "banned", label: "已封禁" },
 ];
 
+const SORT_OPTIONS: { key: UserSortKey; label: string }[] = [
+  { key: "id", label: "用户 ID" },
+  { key: "role", label: "角色" },
+  { key: "status", label: "状态" },
+  { key: "points", label: "积分" },
+  { key: "last_login", label: "上次登录" },
+  { key: "counts", label: "内容" },
+  { key: "created_at", label: "注册时间" },
+  { key: "online", label: "在线" },
+];
+
 function filterToParams(filter: UserFilter): { role?: string; status?: string } {
   if (filter === "staff") return { role: "staff" };
   if (filter === "banned") return { status: "banned" };
@@ -178,7 +198,7 @@ function ColumnConfigPopover({
             ))}
           </ul>
           <p className="px-2 pt-1.5 pb-1 text-[11px] leading-relaxed" style={{ color: "var(--ink-3)" }}>
-            成员 / 角色 / 状态 / 积分 / 上次登录 / 操作固定显示
+            成员 / ID / 角色 / 状态 / 积分 / 上次登录 / 操作固定显示
           </p>
         </div>
       )}
@@ -186,6 +206,89 @@ function ColumnConfigPopover({
   );
 }
 
+function MobileSortPopover({
+  sort,
+  order,
+  onChange,
+}: {
+  sort: UserSortKey;
+  order: UserSortDir;
+  onChange: (key: UserSortKey, dir: UserSortDir) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  const current = SORT_OPTIONS.find((o) => o.key === sort);
+
+  useEffect(() => {
+    if (!open) return;
+    const onDown = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", onDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+
+  return (
+    <div className="relative shrink-0 md:hidden" ref={ref}>
+      <button
+        type="button"
+        className="btn btn-line btn-sm"
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        onClick={() => setOpen((v) => !v)}
+      >
+        <ArrowUpDown size={14} />
+        {current?.label ?? "排序"}
+        {order === "asc" ? <ChevronUp size={13} /> : <ChevronDown size={13} />}
+      </button>
+      {open && (
+        <div
+          role="listbox"
+          aria-label="排序"
+          className="absolute right-0 top-full mt-2 z-40 w-48 p-2 j13-toast-in"
+          style={{
+            background: "var(--panel)",
+            border: "1px solid var(--line)",
+            borderRadius: "var(--r)",
+            boxShadow: "var(--shadow-lg)",
+          }}
+        >
+          <ul className="flex flex-col gap-0.5">
+            {SORT_OPTIONS.map((o) => {
+              const active = sort === o.key;
+              return (
+                <li key={o.key}>
+                  <button
+                    type="button"
+                    role="option"
+                    aria-selected={active}
+                    className="w-full flex items-center justify-between gap-2 px-2 py-2 rounded-[var(--r-sm)] text-[13px] hover:bg-[var(--panel-2)]"
+                    style={{ color: active ? "var(--accent)" : "var(--ink)" }}
+                    onClick={() => {
+                      onChange(o.key, active && order === "desc" ? "asc" : "desc");
+                      setOpen(false);
+                    }}
+                  >
+                    {o.label}
+                    {active ? (order === "asc" ? <ChevronUp size={13} /> : <ChevronDown size={13} />) : null}
+                  </button>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}
+
 export default function UsersAdmin({
   initial,
   initError,
@@ -195,7 +298,7 @@ export default function UsersAdmin({
 }: {
   initial: AdminUsersResponse | null;
   initError: string;
-  initialQuery: { q: string; filter: UserFilter; page: number };
+  initialQuery: { q: string; filter: UserFilter; page: number; sort: UserSortKey; order: UserSortDir };
   currentUserId: number;
   currentUserRole: string;
 }) {
@@ -216,6 +319,8 @@ export default function UsersAdmin({
   const [filter, setFilter] = useState<UserFilter>(initialQuery.filter);
   const [keyword, setKeyword] = useState(initialQuery.q);
   const [appliedQ, setAppliedQ] = useState(initialQuery.q);
+  const [sort, setSort] = useState<UserSortKey>(initialQuery.sort);
+  const [order, setOrder] = useState<UserSortDir>(initialQuery.order);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(initError);
   const [actingId, setActingId] = useState<number | null>(null);
@@ -270,7 +375,13 @@ export default function UsersAdmin({
     return off;
   }, []);
 
-  const load = useCallback(async (opts: { page: number; filter: UserFilter; q: string }) => {
+  const load = useCallback(async (opts: {
+    page: number;
+    filter: UserFilter;
+    q: string;
+    sort: UserSortKey;
+    order: UserSortDir;
+  }) => {
     const seq = ++seqRef.current;
     setLoading(true);
     try {
@@ -278,6 +389,8 @@ export default function UsersAdmin({
         page: opts.page,
         size: PAGE_SIZE,
         q: opts.q || undefined,
+        sort: opts.sort,
+        order: opts.order,
         ...filterToParams(opts.filter),
       });
       if (seq !== seqRef.current) return;
@@ -287,6 +400,8 @@ export default function UsersAdmin({
       setFilter(opts.filter);
       setPage(opts.page);
       setAppliedQ(opts.q);
+      setSort(opts.sort);
+      setOrder(opts.order);
       setError("");
     } catch (e) {
       if (seq !== seqRef.current) return;
@@ -301,14 +416,14 @@ export default function UsersAdmin({
     debounceRef.current = setTimeout(() => {
       const q = keyword.trim();
       if (q !== appliedQ) {
-        load({ page: 1, filter, q });
+        load({ page: 1, filter, q, sort, order });
       }
     }, 400);
     return () => {
       if (debounceRef.current) clearTimeout(debounceRef.current);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [keyword]);
+  }, [keyword, filter, sort, order]);
 
   useEffect(() => {
     if (urlFirstRun.current) {
@@ -319,43 +434,50 @@ export default function UsersAdmin({
     if (appliedQ) p.set("q", appliedQ);
     if (filter !== "all") p.set("filter", filter);
     if (page > 1) p.set("page", String(page));
+    if (sort !== "id") p.set("sort", sort);
+    if (order === "asc") p.set("order", "asc");
     const qs = p.toString();
     router.replace(`/admin/users${qs ? `?${qs}` : ""}`, { scroll: false });
-  }, [appliedQ, filter, page, router]);
+  }, [appliedQ, filter, page, sort, order, router]);
 
   const submitSearch = () => {
     const q = keyword.trim();
     if (q === appliedQ) return;
-    load({ page: 1, filter, q });
+    load({ page: 1, filter, q, sort, order });
   };
 
   const clearSearch = () => {
     setKeyword("");
     if (appliedQ !== "" || page !== 1) {
-      load({ page: 1, filter, q: "" });
+      load({ page: 1, filter, q: "", sort, order });
     }
   };
 
   const changeFilter = (f: UserFilter) => {
     if (f === filter) return;
-    load({ page: 1, filter: f, q: appliedQ });
+    load({ page: 1, filter: f, q: appliedQ, sort, order });
   };
 
   const goPage = (p: number) => {
     const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
     const next = Math.min(Math.max(1, p), totalPages);
     if (next === page) return;
-    load({ page: next, filter, q: appliedQ });
+    load({ page: next, filter, q: appliedQ, sort, order });
+  };
+
+  const toggleSort = (key: UserSortKey) => {
+    const nextDir: UserSortDir = sort === key && order === "desc" ? "asc" : "desc";
+    load({ page: 1, filter, q: appliedQ, sort: key, order: sort === key ? nextDir : "desc" });
   };
 
   const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
   const tabCount = (f: UserFilter) =>
     f === "all" ? summary.total : f === "staff" ? summary.admins : summary.banned;
   const hasFilter = appliedQ !== "" || filter !== "all";
-  const reload = () => load({ page, filter, q: appliedQ });
+  const reload = () => load({ page, filter, q: appliedQ, sort, order });
 
   const visibleCols = useMemo(() => {
-    const list: ColKey[] = ["member", "role", "status", "points"];
+    const list: ColKey[] = ["id", "member", "role", "status", "points"];
     if (optCols.online) list.push("online");
     if (optCols.email) list.push("email");
     list.push("last_login");
@@ -370,11 +492,14 @@ export default function UsersAdmin({
     const frags: string[] = [];
     for (const c of visibleCols) {
       switch (c) {
+        case "id":
+          frags.push("56px");
+          break;
         case "member":
-          frags.push("minmax(0,1.35fr)");
+          frags.push("minmax(0,0.7fr)");
           break;
         case "role":
-          frags.push("minmax(96px,0.9fr)");
+          frags.push("minmax(92px,0.45fr)");
           break;
         case "status":
           frags.push("72px");
@@ -386,7 +511,7 @@ export default function UsersAdmin({
           frags.push("64px");
           break;
         case "email":
-          frags.push("minmax(120px,1fr)");
+          frags.push("minmax(0,0.55fr)");
           break;
         case "last_login":
           frags.push("146px");
@@ -398,7 +523,7 @@ export default function UsersAdmin({
           frags.push("100px");
           break;
         case "actions":
-          frags.push("136px");
+          frags.push("minmax(148px,1.8fr)");
           break;
       }
     }
@@ -407,6 +532,8 @@ export default function UsersAdmin({
 
   const colHeader = (c: ColKey): string => {
     switch (c) {
+      case "id":
+        return "ID";
       case "member":
         return "成员";
       case "role":
@@ -430,6 +557,37 @@ export default function UsersAdmin({
     }
   };
 
+  const renderColHeader = (c: ColKey) => {
+    const label = colHeader(c);
+    if (!SORTABLE_COLS.has(c)) {
+      return (
+        <span>{label}</span>
+      );
+    }
+    const key = c as UserSortKey;
+    const active = sort === key;
+    const ariaSort = active ? (order === "asc" ? "ascending" : "descending") : "none";
+    const Icon = active ? (order === "asc" ? ChevronUp : ChevronDown) : ChevronsUpDown;
+    return (
+      <div role="columnheader" aria-sort={ariaSort}>
+        <button
+          type="button"
+          onClick={() => toggleSort(key)}
+          className="-ml-1 inline-flex items-center gap-0.5 rounded-md px-1 py-0.5 uppercase tracking-wide transition-colors hover:bg-[var(--panel)]"
+          style={{ color: active ? "var(--accent)" : "var(--ink-3)" }}
+          aria-label={
+            active
+              ? `${label}，当前${order === "asc" ? "升序" : "降序"}，点击切换`
+              : `按${label}排序`
+          }
+        >
+          {label}
+          <Icon size={13} className={active ? undefined : "opacity-45"} aria-hidden />
+        </button>
+      </div>
+    );
+  };
+
   const renderStatus = (u: AdminUser) => {
     if (u.banned) {
       return (
@@ -519,7 +677,7 @@ export default function UsersAdmin({
 
     if (u.role === ROLES.OWNER) {
       return (
-        <div className="flex items-center gap-1 justify-end">
+        <div className="flex items-center gap-1">
           {auditBtn}
           <AdminIconButton href={`/u/${u.id}`} tip="查看个人主页" ariaLabel={`查看 ${u.nickname} 的个人主页`}>
             <ExternalLink size={15} />
@@ -529,7 +687,7 @@ export default function UsersAdmin({
     }
     if (isSelf) {
       return (
-        <div className="flex items-center gap-1 justify-end">
+        <div className="flex items-center gap-1">
           {auditBtn}
           <span
             className="inline-flex items-center rounded-full px-2.5 py-1 text-[11px] whitespace-nowrap"
@@ -543,7 +701,7 @@ export default function UsersAdmin({
     const busy = actingId === u.id;
     const roleTone = u.banned ? "danger" : u.role !== ROLES.USER ? "accent" : "default";
     return (
-      <div className="flex items-center gap-1 justify-end">
+      <div className="flex items-center gap-1">
         {auditBtn}
         <AdminIconButton
           href={`/u/${u.id}`}
@@ -567,6 +725,12 @@ export default function UsersAdmin({
 
   const renderCell = (c: ColKey, u: AdminUser, isSelf: boolean) => {
     switch (c) {
+      case "id":
+        return (
+          <span className="text-[12.5px] tabular-nums" style={{ color: "var(--ink-3)" }}>
+            {u.id}
+          </span>
+        );
       case "member":
         return (
           <div className="flex items-center gap-2.5 min-w-0">
@@ -622,12 +786,12 @@ export default function UsersAdmin({
           </span>
         );
       case "actions":
-        return <div className="flex justify-end">{renderActions(u, isSelf)}</div>;
+        return <div className="flex">{renderActions(u, isSelf)}</div>;
     }
   };
 
   return (
-    <div>
+    <div className="admin-users-page">
       <AdminPageHeader
         icon={Users}
         title="用户管理"
@@ -668,73 +832,80 @@ export default function UsersAdmin({
         />
       </div>
 
-      <div className="panel overflow-hidden">
-        <div className="admin-toolbar">
-          <div className="flex flex-col sm:flex-row gap-3 sm:items-center w-full">
-            <AdminSearchField
-              value={keyword}
-              onChange={setKeyword}
-              onSubmit={submitSearch}
-              onClear={clearSearch}
-              placeholder="搜索用户名、昵称或邮箱…"
-              ariaLabel="搜索用户"
-            />
-            <div className="flex items-center gap-2 flex-wrap shrink-0">
-              <AdminSegmented<UserFilter>
-                role="group"
-                ariaLabel="用户筛选"
-                value={filter}
-                onChange={changeFilter}
-                options={FILTER_TABS.map((t) => ({
-                  key: t.key,
-                  label: t.label,
-                  count: tabCount(t.key),
-                }))}
+      <div className="panel">
+        <div className="admin-users-stick">
+          <div className="admin-toolbar">
+            <div className="flex flex-col sm:flex-row gap-3 sm:items-center w-full">
+              <div className="flex items-center gap-2 flex-wrap shrink-0">
+                <AdminSegmented<UserFilter>
+                  role="group"
+                  ariaLabel="用户筛选"
+                  value={filter}
+                  onChange={changeFilter}
+                  options={FILTER_TABS.map((t) => ({
+                    key: t.key,
+                    label: t.label,
+                    count: tabCount(t.key),
+                  }))}
+                />
+                <MobileSortPopover
+                  sort={sort}
+                  order={order}
+                  onChange={(key, dir) => load({ page: 1, filter, q: appliedQ, sort: key, order: dir })}
+                />
+                <ColumnConfigPopover cols={optCols} onChange={persistCols} />
+              </div>
+              <AdminSearchField
+                value={keyword}
+                onChange={setKeyword}
+                onSubmit={submitSearch}
+                onClear={clearSearch}
+                placeholder="搜索用户名、昵称或邮箱…"
+                ariaLabel="搜索用户"
               />
-              <ColumnConfigPopover cols={optCols} onChange={persistCols} />
             </div>
           </div>
-        </div>
 
-        <div
-          className="px-4 sm:px-5 py-3.5 flex items-center justify-between gap-2 flex-wrap"
-          style={{ borderBottom: "1px solid var(--line)" }}
-        >
-          <span className="font-medium text-[15px]" style={{ color: "var(--ink)" }}>
-            {appliedQ ? (
-              <>
-                搜索“<span style={{ color: "var(--accent)" }}>{appliedQ}</span>”
-              </>
-            ) : filter === "staff" ? (
-              "管理团队"
-            ) : filter === "banned" ? (
-              "已封禁成员"
-            ) : (
-              "全部成员"
-            )}
-          </span>
-          <span className="meta text-[12px] tabular-nums" style={{ color: "var(--ink-3)" }}>
-            共 {total} 人
-          </span>
-        </div>
-
-        {users.length > 0 && (
           <div
-            className="hidden md:grid gap-3 items-center px-4 sm:px-5 py-3.5 text-[11.5px] uppercase tracking-wide"
-            style={{
-              ...gridStyle,
-              color: "var(--ink-3)",
-              borderBottom: "1px solid var(--line)",
-              background: "var(--panel-2)",
-            }}
+            className="px-4 sm:px-5 py-2.5 flex items-center justify-between gap-2 flex-wrap"
+            style={{ borderBottom: "1px solid var(--line)" }}
           >
-            {visibleCols.map((c) => (
-              <span key={c} className={c === "actions" ? "text-right" : undefined}>
-                {colHeader(c)}
-              </span>
-            ))}
+            <span className="font-medium text-[14px]" style={{ color: "var(--ink)" }}>
+              {appliedQ ? (
+                <>
+                  搜索“<span style={{ color: "var(--accent)" }}>{appliedQ}</span>”
+                </>
+              ) : filter === "staff" ? (
+                "管理团队"
+              ) : filter === "banned" ? (
+                "已封禁成员"
+              ) : (
+                "全部成员"
+              )}
+            </span>
+            <span className="meta text-[12px] tabular-nums" style={{ color: "var(--ink-3)" }}>
+              共 {total} 人
+            </span>
           </div>
-        )}
+
+          {users.length > 0 && (
+            <div
+              className="hidden md:grid gap-3 items-center px-4 sm:px-5 py-3 text-[11.5px] uppercase tracking-wide"
+              style={{
+                ...gridStyle,
+                color: "var(--ink-3)",
+                borderBottom: "1px solid var(--line)",
+                background: "var(--panel-2)",
+              }}
+            >
+              {visibleCols.map((c) => (
+                <div key={c}>
+                  {renderColHeader(c)}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
 
         <div aria-busy={loading}>
           {error ? (
@@ -779,7 +950,7 @@ export default function UsersAdmin({
                           )}
                         </div>
                         <p className="text-[11.5px] truncate mt-0.5" style={{ color: "var(--ink-3)" }}>
-                          @{u.username}
+                          #{u.id} · @{u.username}
                           {optCols.email && u.email ? ` · ${u.email}` : ""}
                         </p>
                       </div>

frontend/app/admin/users/page.tsx

@@ -5,14 +5,20 @@ import { fetchAdminUsers, type AdminUsersResponse } from "@/lib/api";
 import { getMeCached } from "@/lib/serverData";
 import { isSuperOrOwner } from "@/lib/roles";
 import Forbidden from "../Forbidden";
-import UsersAdmin, { type UserFilter } from "./UsersAdmin";
+import UsersAdmin, { type UserFilter, type UserSortKey } from "./UsersAdmin";
 
 export const metadata: Metadata = {
   title: "用户管理",
 };
 
+const SORT_KEYS = ["id", "role", "status", "points", "last_login", "counts", "created_at", "online"] as const;
+
+function parseSort(raw?: string): UserSortKey {
+  return (SORT_KEYS as readonly string[]).includes(raw || "") ? (raw as UserSortKey) : "id";
+}
+
 interface UsersPageProps {
-  searchParams: Promise<{ q?: string; filter?: string; page?: string }>;
+  searchParams: Promise<{ q?: string; filter?: string; page?: string; sort?: string; order?: string }>;
 }
 
 // 筛选项映射为后端查询参数：管理团队走 role=staff，封禁走 status，其余不过滤
@@ -28,6 +34,8 @@ export default async function AdminUsersPage({ searchParams }: UsersPageProps) {
   const q = sp.q?.trim() || "";
   const filter: UserFilter = sp.filter === "staff" || sp.filter === "banned" ? sp.filter : "all";
   const page = Math.max(1, parseInt(sp.page || "1", 10) || 1);
+  const sort = parseSort(sp.sort);
+  const order: "asc" | "desc" = sp.order === "asc" ? "asc" : "desc";
 
   const cookie = authCookieHeader(await cookies());
   const me = await getMeCached(cookie || undefined);
@@ -40,7 +48,7 @@ export default async function AdminUsersPage({ searchParams }: UsersPageProps) {
   let initial: AdminUsersResponse | null = null;
   let initError = "";
   try {
-    initial = await fetchAdminUsers({ page, q, ...filterToQuery(filter) }, cookie || undefined);
+    initial = await fetchAdminUsers({ page, q, sort, order, ...filterToQuery(filter) }, cookie || undefined);
   } catch (e) {
     initError = e instanceof Error ? e.message : "获取用户列表失败";
   }
@@ -49,7 +57,7 @@ export default async function AdminUsersPage({ searchParams }: UsersPageProps) {
     <UsersAdmin
       initial={initial}
       initError={initError}
-      initialQuery={{ q, filter, page }}
+      initialQuery={{ q, filter, page, sort, order }}
       currentUserId={me.user?.id ?? 0}
       currentUserRole={me.user?.role ?? ""}
     />