From 156ebb9ce1d76595feae6ff147178ae50661a2f4 Mon Sep 17 00:00:00 2001
From: root <root@v2202607378382480008.hotsrv.de>
Date: Mon, 13 Jul 2026 11:22:49 +0200
Subject: [PATCH] refactor(web): replace users page component tree

---
 .../src/views/admin/UsersView.vue             | 644 ++----------------
 1 file changed, 47 insertions(+), 597 deletions(-)

diff --git a/web/hwlab-cloud-web/src/views/admin/UsersView.vue b/web/hwlab-cloud-web/src/views/admin/UsersView.vue
index 68279726..74f32a98 100644
--- a/web/hwlab-cloud-web/src/views/admin/UsersView.vue
+++ b/web/hwlab-cloud-web/src/views/admin/UsersView.vue
@@ -1,639 +1,89 @@
-<!-- SPEC: PJ2026-010405 云端控制台. -->
-<!-- Implementation reference: draft-2026-07-13-p0-cloud-console. -->
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { usageAPI } from "@/api";
 import AsyncBoundary from "@/components/common/AsyncBoundary.vue";
 import BaseDrawer from "@/components/common/BaseDrawer.vue";
-import DataGrid from "@/components/common/DataGrid.vue";
-import type { DataGridColumn } from "@/components/common/DataGrid.vue";
 import EmptyState from "@/components/common/EmptyState.vue";
-import Pagination from "@/components/common/Pagination.vue";
-import ResourceCollection from "@/components/common/ResourceCollection.vue";
+import AuditTimeline from "@/components/console/AuditTimeline.vue";
 import ConsoleIcon from "@/components/console/ConsoleIcon.vue";
+import EntityIndex from "@/components/console/EntityIndex.vue";
+import InspectorPanel from "@/components/console/InspectorPanel.vue";
+import OperationsWorkspace from "@/components/console/OperationsWorkspace.vue";
+import ViewModeSwitch from "@/components/console/ViewModeSwitch.vue";
 import PageCommandBar from "@/components/layout/PageCommandBar.vue";
-import type { AccessUserStatus, AdminBillingUserDetail, AdminBillingUserSummary, AdminUsageRow, ApiKeyRecord, AuthUser, BillingPlanDetail, ResourceEntitlementSummary, UsageLedgerRow, UsageReservationRow } from "@/types";
+import SectionFrame from "@/components/layout/SectionFrame.vue";
+import StatusStrip from "@/components/layout/StatusStrip.vue";
+import { useConsoleViewState } from "@/composables/useConsoleViewState";
+import type { AccessUserStatus, AdminBillingUserDetail, AdminBillingUserSummary, AdminUsageRow, AuthUser, BillingPlanDetail, UsageLedgerRow } from "@/types";
 
-const users = ref<AdminBillingUserSummary[]>([]);
 const route = useRoute();
 const router = useRouter();
+const viewState = useConsoleViewState<"list" | "grid">({ view: "list", viewValues: ["list", "grid"], tab: "profile" });
+const users = ref<AdminBillingUserSummary[]>([]);
 const plans = ref<BillingPlanDetail[]>([]);
 const detail = ref<AdminBillingUserDetail | null>(null);
-const selectedUserId = ref<string | null>(null);
+const selectedUserId = ref<string | null>(typeof route.params.userId === "string" ? route.params.userId : null);
 const loading = ref(true);
 const loaded = ref(false);
 const detailLoading = ref(false);
 const error = ref<string | null>(null);
 const mutationError = ref<string | null>(null);
 const pending = ref<string | null>(null);
-const page = ref(Math.max(1, Number(route.query.cursor) || 1));
-const pageSize = ref(25);
 const total = ref(0);
 const stateAuthority = ref("pk01-postgres");
-const auditTab = ref<"usage" | "ledger">("usage");
+const createOpen = ref(false);
+const auditTab = ref<"usage" | "ledger">("ledger");
 const auditLoading = ref(false);
-const auditError = ref<string | null>(null);
 const auditUsageRows = ref<AdminUsageRow[]>([]);
 const auditLedgerRows = ref<UsageLedgerRow[]>([]);
-const auditTotal = ref(0);
-const auditPage = ref(1);
-const auditPageSize = 25;
-const createOpen = ref(false);
-
 const filters = reactive({ search: typeof route.query.q === "string" ? route.query.q : "", status: typeof route.query.filter === "string" ? route.query.filter : "", role: typeof route.query.role === "string" ? route.query.role : "" });
-const auditFilters = reactive({ search: "", userId: "", serviceId: "", resourceType: "", apiKeyId: "", status: "", kind: "", source: "", idempotencyKey: "", from: "", to: "" });
 const createForm = reactive({ email: "", username: "", displayName: "", password: "", role: "user", status: "active", initialCredits: 0 });
 const editForm = reactive({ email: "", username: "", displayName: "", password: "", role: "user", status: "active", planId: "default" });
 const creditForm = reactive({ deltaCredits: 0, reason: "admin_adjust", idempotencyKey: "" });
-
 const selectedSummary = computed(() => detail.value?.summary ?? users.value.find((item) => item.user?.id === selectedUserId.value) ?? null);
 const selectedUser = computed(() => selectedSummary.value?.user ?? null);
-const selectedEntitlements = computed<ResourceEntitlementSummary[]>(() => selectedSummary.value?.entitlements ?? []);
 const ledgerRows = computed<UsageLedgerRow[]>(() => detail.value?.ledger?.rows ?? []);
-const apiKeys = computed<ApiKeyRecord[]>(() => detail.value?.apiKeys?.keys ?? []);
-const reservations = computed<UsageReservationRow[]>(() => detail.value?.reservations?.rows ?? detail.value?.reservations?.active ?? selectedSummary.value?.reservations?.active ?? []);
-const totalPages = computed(() => Math.max(1, Math.ceil(total.value / pageSize.value)));
-const viewMode = computed<"cards" | "list">({
-  get: () => route.query.view === "list" ? "list" : "cards",
-  set: (value) => void replaceViewQuery(value)
-});
-const asyncState = computed(() => {
-  if (loading.value) return users.value.length ? "refreshing" : "initial-loading";
-  if (error.value) return users.value.length ? "partial" : "error";
-  return loaded.value ? "ready" : "empty";
-});
-const userColumns: DataGridColumn[] = [
-  { key: "user", label: "User" },
-  { key: "status", label: "Status" },
-  { key: "credits", label: "Credits", align: "right" },
-  { key: "usage", label: "Usage", align: "right" },
-  { key: "keys", label: "Keys", align: "right" },
-  { key: "actions", label: "Action", align: "right" }
-];
-const auditUsageColumns: DataGridColumn[] = [
-  { key: "time", label: "Time" }, { key: "user", label: "User" }, { key: "service", label: "Service" },
-  { key: "resource", label: "Resource" }, { key: "credits", label: "Credits", align: "right" }, { key: "status", label: "Status" }, { key: "metadata", label: "Metadata" }
-];
-const auditLedgerColumns: DataGridColumn[] = [
-  { key: "time", label: "Time" }, { key: "user", label: "User" }, { key: "action", label: "Action" },
-  { key: "delta", label: "Delta", align: "right" }, { key: "balance", label: "Before/After", align: "right" }, { key: "operator", label: "Operator" }, { key: "idempotency", label: "Idempotency" }
-];
-const entitlementColumns: DataGridColumn[] = [
-  { key: "resource", label: "Resource" }, { key: "status", label: "Status" }, { key: "monthly", label: "Monthly" },
-  { key: "concurrent", label: "Concurrent" }, { key: "rpm", label: "RPM" }
-];
-const apiKeyColumns: DataGridColumn[] = [{ key: "key", label: "Key" }, { key: "prefix", label: "Prefix" }, { key: "status", label: "Status" }];
-const detailLedgerColumns: DataGridColumn[] = [{ key: "time", label: "Time" }, { key: "delta", label: "Delta", align: "right" }, { key: "balance", label: "Balance", align: "right" }];
-const reservationColumns: DataGridColumn[] = [
-  { key: "reservation", label: "Reservation" }, { key: "service", label: "Service" }, { key: "credits", label: "Credits", align: "right" },
-  { key: "status", label: "Status" }, { key: "expires", label: "Expires" }
-];
+const viewMode = computed({ get: () => viewState.view.value, set: (value: "list" | "grid") => void viewState.update({ view: value === "list" ? undefined : value }, false) });
+const detailTab = computed({ get: () => viewState.tab.value || "profile", set: (value: string) => void viewState.update({ tab: value === "profile" ? undefined : value }, false) });
+const asyncState = computed(() => loading.value ? (users.value.length ? "refreshing" : "initial-loading") : error.value ? (users.value.length ? "partial" : "error") : loaded.value ? "ready" : "empty");
+const statusItems = computed(() => [{ id: "users", label: "Users", value: total.value }, { id: "active", label: "Active", value: users.value.filter((item) => item.user?.status === "active").length, tone: "ok" as const }, { id: "authority", label: "Authority", value: stateAuthority.value }, { id: "selected", label: "Selected", value: selectedUser.value?.username || "-" }]);
 
-onMounted(async () => {
-  await loadPlans();
-  await refresh();
-  await refreshAudit();
-});
-
-watch(() => [route.query.q, route.query.filter, route.query.role, route.query.cursor].map((value) => typeof value === "string" ? value : "").join("\u0000"), () => {
-  const nextSearch = typeof route.query.q === "string" ? route.query.q : "";
-  const nextStatus = typeof route.query.filter === "string" ? route.query.filter : "";
-  const nextRole = typeof route.query.role === "string" ? route.query.role : "";
-  const nextPage = Math.max(1, Number(route.query.cursor) || 1);
-  if (filters.search === nextSearch && filters.status === nextStatus && filters.role === nextRole && page.value === nextPage) return;
-  filters.search = nextSearch;
-  filters.status = nextStatus;
-  filters.role = nextRole;
-  page.value = nextPage;
-  void loadUsers(false);
-});
-
-watch(() => route.params.userId, (userId) => {
-  const value = typeof userId === "string" ? userId : "";
-  if (value && value !== selectedUserId.value) void selectUser(value, false);
-  if (!value) {
-    selectedUserId.value = null;
-    detail.value = null;
-  }
-});
-
-async function loadPlans(): Promise<void> {
-  const response = await usageAPI.adminPlans();
-  if (response.ok) plans.value = response.data?.plans ?? [];
-}
-
-async function refresh(): Promise<void> {
-  await loadUsers(true);
-}
-
-async function loadUsers(updateRoute: boolean): Promise<void> {
-  if (updateRoute) await syncViewState();
-  loading.value = true;
-  const response = await usageAPI.adminUsers({ page: page.value, pageSize: pageSize.value, search: filters.search.trim(), status: filters.status, role: filters.role });
-  if (!response.ok) {
-    error.value = response.error ?? `HTTP ${response.status}`;
-  } else {
-    const payload = response.data ?? {};
-    users.value = payload.users ?? [];
-    total.value = Number(payload.total ?? payload.count ?? users.value.length);
-    stateAuthority.value = String(payload.state?.stateAuthority ?? "pk01-postgres");
-    error.value = null;
-    const routeUserId = typeof route.params.userId === "string" ? route.params.userId : "";
-    if (routeUserId) await selectUser(routeUserId, false);
-  }
-  loading.value = false;
-  loaded.value = true;
-}
-
-async function selectUser(userId: string | undefined, updateRoute = true): Promise<void> {
-  if (!userId) return;
-  if (updateRoute && route.params.userId !== userId) await router.push({ name: "UserDetail", params: { userId }, query: route.query });
-  selectedUserId.value = userId;
-  detailLoading.value = true;
-  mutationError.value = null;
-  const response = await usageAPI.adminUser(userId);
-  if (!response.ok) {
-    mutationError.value = response.error ?? `HTTP ${response.status}`;
-    detail.value = null;
-  } else {
-    detail.value = response.data?.detail ?? null;
-    fillEditForm(detail.value?.summary?.user ?? users.value.find((item) => item.user?.id === userId)?.user ?? null);
-  }
-  detailLoading.value = false;
-}
-
-function closeDetailDrawer(): void {
-  selectedUserId.value = null;
-  detail.value = null;
-  void router.push({ name: "Users", query: route.query });
-}
-
-function userKey(item: AdminBillingUserSummary): string {
-  return item.user?.id ?? item.user?.username ?? "unknown-user";
-}
-
-function fillEditForm(user: (AuthUser & { email?: string }) | null | undefined): void {
-  editForm.email = user?.email ?? "";
-  editForm.username = user?.username ?? "";
-  editForm.displayName = user?.displayName ?? "";
-  editForm.password = "";
-  editForm.role = user?.role === "admin" ? "admin" : "user";
-  editForm.status = String(user?.status ?? "active");
-  editForm.planId = selectedSummary.value?.planId ?? "default";
-}
-
-async function createUser(): Promise<void> {
-  pending.value = "create";
-  mutationError.value = null;
-  const response = await usageAPI.createAdminUser({ ...createForm, initialCredits: Number(createForm.initialCredits || 0) });
-  pending.value = null;
-  if (!response.ok) {
-    mutationError.value = response.error ?? `HTTP ${response.status}`;
-    return;
-  }
-  createForm.email = "";
-  createForm.username = "";
-  createForm.displayName = "";
-  createForm.password = "";
-  createForm.initialCredits = 0;
-  createOpen.value = false;
-  await refresh();
-  const userId = response.data?.user?.id;
-  if (userId) await selectUser(userId);
-}
-
-async function saveUser(): Promise<void> {
-  const userId = selectedUser.value?.id;
-  if (!userId) return;
-  pending.value = `save:${userId}`;
-  mutationError.value = null;
-  const body: Record<string, unknown> = {
-    email: editForm.email.trim(),
-    username: editForm.username.trim(),
-    displayName: editForm.displayName.trim(),
-    role: editForm.role,
-    status: editForm.status,
-    planId: editForm.planId || "default"
-  };
-  if (editForm.password) body.password = editForm.password;
-  const response = await usageAPI.updateAdminUser(userId, body);
-  pending.value = null;
-  if (!response.ok) {
-    mutationError.value = response.error ?? `HTTP ${response.status}`;
-    return;
-  }
-  await refresh();
-  await selectUser(userId);
-}
-
-async function setUserStatus(userId: string | undefined, status: AccessUserStatus): Promise<void> {
-  if (!userId) return;
-  pending.value = `status:${userId}`;
-  mutationError.value = null;
-  const response = await usageAPI.updateAdminUserStatus(userId, status);
-  pending.value = null;
-  if (!response.ok) {
-    mutationError.value = response.error ?? `HTTP ${response.status}`;
-    return;
-  }
-  await refresh();
-  await selectUser(userId);
-}
-
-async function adjustCredits(): Promise<void> {
-  const userId = selectedUser.value?.id;
-  if (!userId) return;
-  pending.value = `credits:${userId}`;
-  mutationError.value = null;
-  const body: Record<string, unknown> = { deltaCredits: Number(creditForm.deltaCredits), reason: creditForm.reason.trim() || "admin_adjust" };
-  if (creditForm.idempotencyKey.trim()) body.idempotencyKey = creditForm.idempotencyKey.trim();
-  const response = await usageAPI.adjustAdminCredits(userId, body);
-  pending.value = null;
-  if (!response.ok) {
-    mutationError.value = response.error ?? `HTTP ${response.status}`;
-    return;
-  }
-  creditForm.deltaCredits = 0;
-  creditForm.idempotencyKey = "";
-  await refresh();
-  await selectUser(userId);
-  await refreshAudit();
-}
-
-function auditParams(extra: Record<string, unknown> = {}): Record<string, unknown> {
-  const params: Record<string, unknown> = { page: auditPage.value, pageSize: auditPageSize, ...extra };
-  for (const [key, value] of Object.entries(auditFilters)) {
-    const text = String(value ?? "").trim();
-    if (text) params[key] = text;
-  }
-  if (auditTab.value === "usage") delete params.kind;
-  if (auditTab.value === "usage") delete params.source;
-  if (auditTab.value === "ledger") delete params.serviceId;
-  if (auditTab.value === "ledger") delete params.resourceType;
-  if (auditTab.value === "ledger") delete params.apiKeyId;
-  return params;
-}
-
-async function refreshAudit(): Promise<void> {
-  auditPage.value = 1;
-  await loadAudit();
-}
-
-async function loadAudit(): Promise<void> {
-  auditLoading.value = true;
-  auditError.value = null;
-  const response = auditTab.value === "usage" ? await usageAPI.adminUsage(auditParams()) : await usageAPI.adminLedger(auditParams());
-  auditLoading.value = false;
-  if (!response.ok) {
-    auditError.value = response.error ?? `HTTP ${response.status}`;
-    return;
-  }
-  auditTotal.value = Number(response.data?.total ?? response.data?.count ?? 0);
-  if (auditTab.value === "usage") auditUsageRows.value = (response.data?.rows ?? []) as AdminUsageRow[];
-  else auditLedgerRows.value = (response.data?.rows ?? []) as UsageLedgerRow[];
-}
-
-function setAuditTab(tab: "usage" | "ledger"): void {
-  auditTab.value = tab;
-  auditPage.value = 1;
-  void loadAudit();
-}
-
-function setAuditPage(value: number): void {
-  auditPage.value = value;
-  void loadAudit();
-}
-
-function auditUsageKey(row: AdminUsageRow): string { return row.id; }
-function auditLedgerKey(row: UsageLedgerRow): string { return row.id; }
-function entitlementKey(row: ResourceEntitlementSummary): string { return row.id || row.resourceType || "entitlement"; }
-function apiKeyKey(row: ApiKeyRecord): string { return row.id; }
-function ledgerKey(row: UsageLedgerRow): string { return row.id; }
-function reservationKey(row: UsageReservationRow): string { return row.reservationId; }
-
-function downloadAudit(): void {
-  const url = auditTab.value === "usage" ? usageAPI.adminUsageExportUrl(auditParams({ limit: 1000 })) : usageAPI.adminLedgerExportUrl(auditParams({ limit: 1000 }));
-  window.location.assign(url);
-}
-
-async function nextPage(delta: number): Promise<void> {
-  page.value = Math.min(totalPages.value, Math.max(1, page.value + delta));
-  await refresh();
-}
-
-async function syncViewState(): Promise<void> {
-  const query = { ...route.query };
-  if (filters.search.trim()) query.q = filters.search.trim();
-  else delete query.q;
-  if (filters.status) query.filter = filters.status;
-  else delete query.filter;
-  if (filters.role) query.role = filters.role;
-  else delete query.role;
-  if (page.value > 1) query.cursor = String(page.value);
-  else delete query.cursor;
-  await router.replace({ query });
-}
-
-async function replaceViewQuery(value: "cards" | "list"): Promise<void> {
-  const query = { ...route.query };
-  if (value === "cards") delete query.view;
-  else query.view = value;
-  await router.replace({ query });
-}
-
-function nextStatus(status: unknown): AccessUserStatus {
-  return String(status ?? "") === "disabled" ? "active" : "disabled";
-}
-
-function statusActionLabel(status: unknown): string {
-  return String(status ?? "") === "disabled" ? "启用" : "禁用";
-}
-
-function formatNumber(value: unknown): string {
-  const number = Number(value ?? 0);
-  if (!Number.isFinite(number)) return "0";
-  return new Intl.NumberFormat("zh-CN").format(number);
-}
-
-function formatSignedCredits(value: unknown): string {
-  const number = Number(value ?? 0);
-  const sign = number > 0 ? "+" : "";
-  return `${sign}${formatNumber(number)}`;
-}
-
-function formatDate(value: unknown): string {
-  const text = String(value ?? "").trim();
-  if (!text) return "-";
-  const date = new Date(text);
-  if (Number.isNaN(date.getTime())) return text;
-  return date.toLocaleString("zh-CN", { month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" });
-}
-
-function entitlementLimit(current: unknown, limit: unknown, unlimited: unknown): string {
-  return `${formatNumber(current)} / ${unlimited ? "unlimited" : formatNumber(limit)}`;
-}
-
-function metadataPreview(value: unknown): string {
-  if (!value || typeof value !== "object" || Array.isArray(value)) return "-";
-  const entries = Object.entries(value as Record<string, unknown>).slice(0, 4);
-  if (!entries.length) return "-";
-  return entries.map(([key, item]) => `${key}=${typeof item === "string" || typeof item === "number" || typeof item === "boolean" ? String(item) : "[structured]"}`).join(" · ");
-}
+onMounted(async () => { await Promise.all([loadUsers(), loadPlans(), loadAudit()]); if (selectedUserId.value) await selectUser(selectedUserId.value, false); });
+watch(() => route.params.userId, (value) => { const userId = typeof value === "string" ? value : ""; if (userId) void selectUser(userId, false); else { selectedUserId.value = null; detail.value = null; } });
+async function loadUsers(): Promise<void> { loading.value = true; const response = await usageAPI.adminUsers({ page: 1, pageSize: 100, search: filters.search.trim(), status: filters.status, role: filters.role }); if (!response.ok) error.value = response.error ?? `HTTP ${response.status}`; else { users.value = response.data?.users ?? []; total.value = Number(response.data?.total ?? users.value.length); stateAuthority.value = String(response.data?.state?.stateAuthority ?? "pk01-postgres"); error.value = null; } loading.value = false; loaded.value = true; }
+async function applyFilters(): Promise<void> { await router.push({ query: { ...route.query, q: filters.search || undefined, filter: filters.status || undefined, role: filters.role || undefined } }); await loadUsers(); }
+async function loadPlans(): Promise<void> { const response = await usageAPI.adminPlans(); if (response.ok) plans.value = response.data?.plans ?? []; }
+async function selectUser(userId: string | undefined, updateRoute = true): Promise<void> { if (!userId) return; if (updateRoute) await router.push({ name: "UserDetail", params: { userId }, query: route.query }); selectedUserId.value = userId; detailLoading.value = true; const response = await usageAPI.adminUser(userId); if (!response.ok) mutationError.value = response.error ?? `HTTP ${response.status}`; else { detail.value = response.data?.detail ?? null; fillEditForm(detail.value?.summary?.user ?? null); } detailLoading.value = false; }
+function closeInspector(): void { selectedUserId.value = null; detail.value = null; void router.push({ name: "Users", query: route.query }); }
+function fillEditForm(user: (AuthUser & { email?: string }) | null): void { editForm.email = user?.email ?? ""; editForm.username = user?.username ?? ""; editForm.displayName = user?.displayName ?? ""; editForm.password = ""; editForm.role = user?.role === "admin" ? "admin" : "user"; editForm.status = String(user?.status ?? "active"); editForm.planId = selectedSummary.value?.planId ?? "default"; }
+async function createUser(): Promise<void> { pending.value = "create"; const response = await usageAPI.createAdminUser({ ...createForm, initialCredits: Number(createForm.initialCredits) }); pending.value = null; if (!response.ok) { mutationError.value = response.error ?? `HTTP ${response.status}`; return; } createOpen.value = false; await loadUsers(); if (response.data?.user?.id) await selectUser(response.data.user.id); }
+async function saveUser(): Promise<void> { if (!selectedUser.value?.id) return; pending.value = "save"; const body: Record<string, unknown> = { email: editForm.email, username: editForm.username, displayName: editForm.displayName, role: editForm.role, status: editForm.status, planId: editForm.planId }; if (editForm.password) body.password = editForm.password; const response = await usageAPI.updateAdminUser(selectedUser.value.id, body); pending.value = null; if (!response.ok) mutationError.value = response.error ?? `HTTP ${response.status}`; else { await loadUsers(); await selectUser(selectedUser.value.id, false); } }
+async function setUserStatus(item: AdminBillingUserSummary): Promise<void> { const userId = item.user?.id; if (!userId) return; const status: AccessUserStatus = item.user?.status === "disabled" ? "active" : "disabled"; pending.value = `status:${userId}`; const response = await usageAPI.updateAdminUserStatus(userId, status); pending.value = null; if (!response.ok) mutationError.value = response.error ?? `HTTP ${response.status}`; else await loadUsers(); }
+async function adjustCredits(): Promise<void> { if (!selectedUser.value?.id) return; pending.value = "credits"; const response = await usageAPI.adjustAdminCredits(selectedUser.value.id, { deltaCredits: Number(creditForm.deltaCredits), reason: creditForm.reason, idempotencyKey: creditForm.idempotencyKey || undefined }); pending.value = null; if (!response.ok) mutationError.value = response.error ?? `HTTP ${response.status}`; else { await selectUser(selectedUser.value.id, false); await loadAudit(); } }
+async function loadAudit(): Promise<void> { auditLoading.value = true; const response = auditTab.value === "usage" ? await usageAPI.adminUsage({ page: 1, pageSize: 100 }) : await usageAPI.adminLedger({ page: 1, pageSize: 100 }); if (response.ok) { if (auditTab.value === "usage") auditUsageRows.value = response.data?.rows ?? []; else auditLedgerRows.value = response.data?.rows ?? []; } auditLoading.value = false; }
+function userKey(item: AdminBillingUserSummary): string { return item.user?.id ?? item.user?.username ?? "unknown"; }
+function auditKey(item: AdminUsageRow | UsageLedgerRow): string { return item.id; }
+function formatNumber(value: unknown): string { return new Intl.NumberFormat("zh-CN").format(Number(value ?? 0)); }
+function formatDate(value: unknown): string { const text = String(value ?? ""); if (!text) return "-"; const date = new Date(text); return Number.isNaN(date.getTime()) ? text : date.toLocaleString("zh-CN"); }
 </script>
 
 <template>
-  <section class="route-stack admin-users-page">
-    <PageCommandBar eyebrow="Admin" title="用户与账务" description="Sub2API-style 用户管理工作面；用户、余额、API key、ledger 和 reservation 均来自 PK01 user-billing authority。" />
-    <AsyncBoundary :state="asyncState" :has-content="Boolean(users.length)" label="加载用户" empty-title="暂无用户" empty-description="当前筛选未返回用户。" @retry="refresh">
-      <template #error><EmptyState title="管理员用户接口不可用" :description="error || '请求未完成'" action-label="重试" @action="refresh" /></template>
-      <p v-if="mutationError" class="form-error admin-action-error">{{ mutationError }}</p>
-
-      <section class="data-panel admin-users-toolbar">
-        <header class="panel-header">
-          <h2>用户查询</h2>
-          <div class="admin-users-heading-actions"><small>{{ stateAuthority }} / {{ formatNumber(total) }} users</small><span class="admin-users-view-toggle"><button type="button" :data-active="viewMode === 'cards'" @click="viewMode = 'cards'">卡片</button><button type="button" :data-active="viewMode === 'list'" @click="viewMode = 'list'">列表</button></span><button class="table-action" type="button" @click="createOpen = true">+ 创建用户</button></div>
-        </header>
-        <div class="admin-users-filters">
-          <input v-model="filters.search" class="input" placeholder="搜索用户名、邮箱或 user id" @keyup.enter="refresh" />
-          <select v-model="filters.status" class="input" @change="refresh"><option value="">全部状态</option><option value="active">active</option><option value="disabled">disabled</option><option value="pending">pending</option></select>
-          <select v-model="filters.role" class="input" @change="refresh"><option value="">全部角色</option><option value="user">user</option><option value="admin">admin</option></select>
-          <button class="btn btn-secondary" type="button" @click="refresh">刷新</button>
-        </div>
-      </section>
-
-      <section class="data-panel admin-audit-panel">
-        <header class="panel-header">
-          <h2>运营审计</h2>
-          <small>{{ auditLoading ? "loading" : `${formatNumber(auditTotal)} rows` }}</small>
-        </header>
-        <div class="admin-users-filters audit-filters">
-          <button class="table-action" type="button" :data-selected="auditTab === 'usage'" @click="setAuditTab('usage')">Usage</button>
-          <button class="table-action" type="button" :data-selected="auditTab === 'ledger'" @click="setAuditTab('ledger')">Ledger</button>
-          <input v-model="auditFilters.search" class="input" placeholder="搜索用户、记录或原因" @keyup.enter="refreshAudit" />
-          <input v-model="auditFilters.userId" class="input" placeholder="user id" @keyup.enter="refreshAudit" />
-          <input v-if="auditTab === 'usage'" v-model="auditFilters.serviceId" class="input" placeholder="service" @keyup.enter="refreshAudit" />
-          <input v-if="auditTab === 'usage'" v-model="auditFilters.resourceType" class="input" placeholder="resource" @keyup.enter="refreshAudit" />
-          <input v-if="auditTab === 'usage'" v-model="auditFilters.apiKeyId" class="input" placeholder="api key id" @keyup.enter="refreshAudit" />
-          <input v-if="auditTab === 'ledger'" v-model="auditFilters.kind" class="input" placeholder="kind" @keyup.enter="refreshAudit" />
-          <input v-if="auditTab === 'ledger'" v-model="auditFilters.source" class="input" placeholder="source" @keyup.enter="refreshAudit" />
-          <input v-model="auditFilters.status" class="input" placeholder="status" @keyup.enter="refreshAudit" />
-          <input v-model="auditFilters.from" class="input" type="datetime-local" @change="refreshAudit" />
-          <input v-model="auditFilters.to" class="input" type="datetime-local" @change="refreshAudit" />
-          <button class="btn btn-secondary" type="button" @click="refreshAudit">过滤</button>
-          <button class="btn btn-secondary" type="button" @click="downloadAudit">CSV</button>
-        </div>
-        <p v-if="auditError" class="form-error admin-action-error">{{ auditError }}</p>
-        <DataGrid v-if="auditTab === 'usage' && auditUsageRows.length" :columns="auditUsageColumns" :rows="auditUsageRows" :row-key="auditUsageKey" :interactive="false" density="compact" aria-label="Usage 运营审计">
-          <template #cell-time="{ row }">{{ formatDate((row as AdminUsageRow).createdAt) }}<small><code>{{ (row as AdminUsageRow).id }}</code></small></template>
-          <template #cell-user="{ row }">{{ (row as AdminUsageRow).username || (row as AdminUsageRow).email || (row as AdminUsageRow).userId }}<small>{{ (row as AdminUsageRow).userId }}</small></template>
-          <template #cell-service="{ row }"><code>{{ (row as AdminUsageRow).serviceId }}</code><small>{{ (row as AdminUsageRow).apiKeyId || "session/internal" }}</small></template>
-          <template #cell-resource="{ row }"><code>{{ (row as AdminUsageRow).resourceType }}</code><small>{{ formatNumber((row as AdminUsageRow).quantity) }} {{ (row as AdminUsageRow).unit || "unit" }}</small></template>
-          <template #cell-credits="{ row }">{{ formatNumber((row as AdminUsageRow).credits) }}</template>
-          <template #cell-status="{ row }"><span class="status-pill" :data-status="(row as AdminUsageRow).status">{{ (row as AdminUsageRow).status }}</span></template>
-          <template #cell-metadata="{ row }"><small>{{ metadataPreview((row as AdminUsageRow).metadata) }}</small></template>
-        </DataGrid>
-        <DataGrid v-else-if="auditTab === 'ledger' && auditLedgerRows.length" :columns="auditLedgerColumns" :rows="auditLedgerRows" :row-key="auditLedgerKey" :interactive="false" density="compact" aria-label="Ledger 运营审计">
-          <template #cell-time="{ row }">{{ formatDate((row as UsageLedgerRow).createdAt) }}<small><code>{{ (row as UsageLedgerRow).id }}</code></small></template>
-          <template #cell-user="{ row }">{{ (row as UsageLedgerRow).username || (row as UsageLedgerRow).email || (row as UsageLedgerRow).userId }}<small>{{ (row as UsageLedgerRow).userId }}</small></template>
-          <template #cell-action="{ row }">{{ (row as UsageLedgerRow).kind }}<small>{{ (row as UsageLedgerRow).source }} / {{ (row as UsageLedgerRow).status }} / {{ (row as UsageLedgerRow).reason }}</small></template>
-          <template #cell-delta="{ row }">{{ formatSignedCredits((row as UsageLedgerRow).deltaCredits) }}</template>
-          <template #cell-balance="{ row }">{{ formatNumber((row as UsageLedgerRow).balanceBefore) }} → {{ formatNumber((row as UsageLedgerRow).balanceAfter) }}</template>
-          <template #cell-operator="{ row }">{{ (row as UsageLedgerRow).operatorUsername || (row as UsageLedgerRow).operatorUserId || "-" }}</template>
-          <template #cell-idempotency="{ row }"><code>{{ (row as UsageLedgerRow).idempotencyKey || "-" }}</code></template>
-        </DataGrid>
-        <p v-else class="muted-box">当前筛选下没有 {{ auditTab }} 记录。</p>
-        <Pagination :page="auditPage" :page-size="auditPageSize" :total="auditTotal" @update:page="setAuditPage" />
-      </section>
-
-      <section class="data-panel admin-users-list-panel">
-          <header class="panel-header">
-            <h2>用户列表</h2>
-            <small>page {{ page }} / {{ totalPages }}</small>
-          </header>
-          <DataGrid v-if="viewMode === 'list' && users.length" :columns="userColumns" :rows="users" :row-key="userKey" :selected-id="selectedUserId" empty-text="没有匹配用户。" @select="(item) => selectUser(item.user?.id)">
-            <template #cell-user="{ row }"><strong>{{ (row as AdminBillingUserSummary).user?.displayName || (row as AdminBillingUserSummary).user?.username || (row as AdminBillingUserSummary).user?.id }}</strong><small>{{ (row as AdminBillingUserSummary).user?.email || (row as AdminBillingUserSummary).user?.username }} · {{ (row as AdminBillingUserSummary).planId ?? "default" }}</small></template>
-            <template #cell-status="{ row }"><span class="status-pill" :data-status="(row as AdminBillingUserSummary).user?.status">{{ (row as AdminBillingUserSummary).user?.role }} / {{ (row as AdminBillingUserSummary).user?.status }}</span></template>
-            <template #cell-credits="{ row }"><strong>{{ formatNumber((row as AdminBillingUserSummary).credits?.available) }}</strong><small>{{ formatNumber((row as AdminBillingUserSummary).credits?.balance) }} balance · {{ formatNumber((row as AdminBillingUserSummary).credits?.reserved) }} reserved</small></template>
-            <template #cell-usage="{ row }"><strong>{{ formatNumber((row as AdminBillingUserSummary).usage?.totalCredits) }}</strong><small>{{ formatNumber((row as AdminBillingUserSummary).usage?.recordCount) }} records</small></template>
-            <template #cell-keys="{ row }"><strong>{{ formatNumber((row as AdminBillingUserSummary).apiKeys?.activeCount) }}</strong><small>{{ formatNumber((row as AdminBillingUserSummary).apiKeys?.totalCount) }} total</small></template>
-            <template #cell-actions="{ row: item }"><button class="table-action" type="button" :disabled="pending === `status:${(item as AdminBillingUserSummary).user?.id}`" @click.stop="setUserStatus((item as AdminBillingUserSummary).user?.id, nextStatus((item as AdminBillingUserSummary).user?.status))">{{ statusActionLabel((item as AdminBillingUserSummary).user?.status) }}</button></template>
-          </DataGrid>
-          <ResourceCollection v-else-if="users.length" :items="users" :item-key="userKey" view="cards" :selected-id="selectedUserId" :show-controls="false" aria-label="用户卡片" @select="(item) => selectUser(item.user?.id)">
-            <template #card="{ item }"><article class="admin-user-card" :data-selected="selectedUserId === item.user?.id">
-              <span class="admin-user-glyph" aria-hidden="true"><ConsoleIcon name="users" :size="19" /></span>
-              <div class="admin-user-card-name"><strong>{{ item.user?.displayName || item.user?.username || item.user?.id }}</strong><small>{{ item.user?.email || item.user?.username }} · {{ item.planId ?? 'default' }}</small></div>
-              <span class="status-pill" :data-status="item.user?.status">{{ item.user?.role }} / {{ item.user?.status }}</span>
-              <dl><div><dt>Available</dt><dd>{{ formatNumber(item.credits?.available) }}<small>{{ formatNumber(item.credits?.balance) }} balance · {{ formatNumber(item.credits?.reserved) }} reserved</small></dd></div><div><dt>Usage</dt><dd>{{ formatNumber(item.usage?.totalCredits) }}<small>{{ formatNumber(item.usage?.recordCount) }} records</small></dd></div><div><dt>Keys</dt><dd>{{ formatNumber(item.apiKeys?.activeCount) }}<small>{{ formatNumber(item.apiKeys?.totalCount) }} total</small></dd></div></dl>
-              <footer class="admin-user-card-actions"><button class="table-action" type="button" @click.stop="selectUser(item.user?.id)">查看详情 →</button><button class="table-action" type="button" :disabled="pending === `status:${item.user?.id}`" @click.stop="setUserStatus(item.user?.id, nextStatus(item.user?.status))">{{ statusActionLabel(item.user?.status) }}</button></footer>
-            </article></template>
-          </ResourceCollection>
-          <p v-else class="muted-box">没有匹配用户。</p>
-          <footer class="pagination-row">
-            <button class="table-action" type="button" :disabled="page <= 1" @click="nextPage(-1)">上一页</button>
-            <button class="table-action" type="button" :disabled="page >= totalPages" @click="nextPage(1)">下一页</button>
-          </footer>
-      </section>
-
-      <BaseDrawer :open="createOpen" title="创建用户" description="写入 user-billing authority；创建动作不会改变既有 ACL 合同。" :busy="pending === 'create'" @close="createOpen = false">
-        <section class="admin-user-create-panel">
-          <header class="panel-header"><h2>创建用户</h2><small>写入 user-billing</small></header>
-          <div class="form-grid two-col">
-            <label>邮箱<input v-model="createForm.email" class="input" type="email" /></label>
-            <label>用户名<input v-model="createForm.username" class="input" /></label>
-            <label>显示名<input v-model="createForm.displayName" class="input" /></label>
-            <label>初始 credit<input v-model.number="createForm.initialCredits" class="input" type="number" /></label>
-            <label>角色<select v-model="createForm.role" class="input"><option value="user">user</option><option value="admin">admin</option></select></label>
-            <label>状态<select v-model="createForm.status" class="input"><option value="active">active</option><option value="pending">pending</option><option value="disabled">disabled</option></select></label>
-            <label class="span-2">初始密码<input v-model="createForm.password" class="input" type="password" autocomplete="new-password" /></label>
-          </div>
-          <button class="btn btn-primary" type="button" :disabled="pending === 'create'" @click="createUser">{{ pending === "create" ? "创建中" : "创建用户" }}</button>
-        </section>
-        <template #footer><button class="table-action" type="button" :disabled="pending === 'create'" @click="createOpen = false">取消</button><button class="table-action" type="button" :disabled="pending === 'create'" @click="createUser">{{ pending === 'create' ? '创建中' : '创建用户' }}</button></template>
-      </BaseDrawer>
-
-      <BaseDrawer :open="Boolean(selectedUser)" :title="selectedUser?.displayName || selectedUser?.username || '用户详情'" :description="selectedUser?.id || ''" :busy="detailLoading" @close="closeDetailDrawer">
-      <section class="data-panel admin-user-detail-panel">
-        <header class="panel-header">
-          <h2>{{ selectedUser?.displayName || selectedUser?.username || "用户详情" }}</h2>
-          <span class="status-pill" :data-status="selectedUser?.status || (detailLoading ? 'pending' : 'disabled')">{{ detailLoading ? "loading" : selectedUser?.role || "未选择" }}</span>
-        </header>
-        <p v-if="!selectedUser" class="muted-box">选择一个用户查看详情。</p>
-        <template v-else>
-          <div class="overview-grid usage-metrics">
-            <article class="metric-card"><span>Available</span><strong>{{ formatNumber(selectedSummary?.credits?.available) }}</strong></article>
-            <article class="metric-card"><span>Plan</span><strong>{{ selectedSummary?.plan?.displayName || selectedSummary?.planId || "default" }}</strong></article>
-            <article class="metric-card"><span>Usage credits</span><strong>{{ formatNumber(selectedSummary?.usage?.totalCredits) }}</strong></article>
-            <article class="metric-card"><span>Active keys</span><strong>{{ formatNumber(selectedSummary?.apiKeys?.activeCount) }}</strong></article>
-          </div>
-
-          <div class="admin-detail-grid">
-            <section class="detail-subpanel">
-              <h3>资料与权限</h3>
-              <div class="form-grid two-col">
-                <label>邮箱<input v-model="editForm.email" class="input" /></label>
-                <label>用户名<input v-model="editForm.username" class="input" /></label>
-                <label>显示名<input v-model="editForm.displayName" class="input" /></label>
-                <label>重置密码<input v-model="editForm.password" class="input" type="password" autocomplete="new-password" placeholder="留空则不变" /></label>
-                <label>角色<select v-model="editForm.role" class="input"><option value="user">user</option><option value="admin">admin</option></select></label>
-                <label>状态<select v-model="editForm.status" class="input"><option value="active">active</option><option value="pending">pending</option><option value="disabled">disabled</option></select></label>
-                <label class="span-2">计费 plan<select v-model="editForm.planId" class="input"><option v-for="item in plans" :key="item.plan?.id" :value="item.plan?.id">{{ item.plan?.displayName || item.plan?.id }} / {{ item.plan?.status }}</option></select></label>
-              </div>
-              <button class="btn btn-primary" type="button" :disabled="pending === `save:${selectedUser?.id}`" @click="saveUser">{{ pending === `save:${selectedUser?.id}` ? "保存中" : "保存资料" }}</button>
-            </section>
-
-            <section class="detail-subpanel">
-              <h3>Credit 调整</h3>
-              <div class="form-grid">
-                <label>Delta credits<input v-model.number="creditForm.deltaCredits" class="input" type="number" /></label>
-                <label>原因<input v-model="creditForm.reason" class="input" /></label>
-                <label>Idempotency key<input v-model="creditForm.idempotencyKey" class="input" placeholder="可选" /></label>
-              </div>
-              <button class="btn btn-secondary" type="button" :disabled="pending === `credits:${selectedUser?.id}`" @click="adjustCredits">{{ pending === `credits:${selectedUser?.id}` ? "提交中" : "调整余额" }}</button>
-            </section>
-          </div>
-
-          <section class="detail-subpanel">
-            <h3>资源授权</h3>
-            <DataGrid v-if="selectedEntitlements.length" :columns="entitlementColumns" :rows="selectedEntitlements" :row-key="entitlementKey" :interactive="false" density="compact" aria-label="用户资源授权">
-              <template #cell-resource="{ row }"><code>{{ (row as ResourceEntitlementSummary).resourceType }}</code></template>
-              <template #cell-status="{ row }"><span class="status-pill" :data-status="(row as ResourceEntitlementSummary).enabled ? 'active' : 'disabled'">{{ (row as ResourceEntitlementSummary).enabled ? "enabled" : "disabled" }}</span></template>
-              <template #cell-monthly="{ row }">{{ entitlementLimit((row as ResourceEntitlementSummary).monthlyUsageCredits, (row as ResourceEntitlementSummary).monthlyQuotaCredits, (row as ResourceEntitlementSummary).monthlyQuotaUnlimited) }}</template>
-              <template #cell-concurrent="{ row }">{{ entitlementLimit((row as ResourceEntitlementSummary).activeReservations, (row as ResourceEntitlementSummary).maxConcurrentReservations, (row as ResourceEntitlementSummary).concurrencyUnlimited) }}</template>
-              <template #cell-rpm="{ row }">{{ entitlementLimit((row as ResourceEntitlementSummary).rpmUsed, (row as ResourceEntitlementSummary).rpmLimit, (row as ResourceEntitlementSummary).rpmUnlimited) }}</template>
-            </DataGrid>
-            <p v-else class="muted-box">当前用户 plan 没有资源授权记录。</p>
-          </section>
-
-          <div class="usage-panels">
-            <section class="detail-subpanel">
-              <h3>API keys</h3>
-              <DataGrid v-if="apiKeys.length" :columns="apiKeyColumns" :rows="apiKeys" :row-key="apiKeyKey" :interactive="false" density="compact" aria-label="用户 API keys">
-                <template #cell-key="{ row }">{{ (row as ApiKeyRecord).name || (row as ApiKeyRecord).id }}<small>{{ (row as ApiKeyRecord).id }}</small></template>
-                <template #cell-prefix="{ row }"><code>{{ (row as ApiKeyRecord).prefix }}</code></template>
-                <template #cell-status="{ row }"><span class="status-pill" :data-status="(row as ApiKeyRecord).revokedAt ? 'disabled' : 'active'">{{ (row as ApiKeyRecord).revokedAt ? "revoked" : "active" }}</span></template>
-              </DataGrid>
-              <p v-else class="muted-box">暂无 API key。</p>
-            </section>
-            <section class="detail-subpanel">
-              <h3>Ledger</h3>
-              <DataGrid v-if="ledgerRows.length" :columns="detailLedgerColumns" :rows="ledgerRows" :row-key="ledgerKey" :interactive="false" density="compact" aria-label="用户 Ledger">
-                <template #cell-time="{ row }">{{ formatDate((row as UsageLedgerRow).createdAt) }}<small>{{ (row as UsageLedgerRow).kind }} / {{ (row as UsageLedgerRow).reason }} / {{ (row as UsageLedgerRow).source }}</small></template>
-                <template #cell-delta="{ row }">{{ formatSignedCredits((row as UsageLedgerRow).deltaCredits) }}</template>
-                <template #cell-balance="{ row }">{{ formatNumber((row as UsageLedgerRow).balanceBefore) }} → {{ formatNumber((row as UsageLedgerRow).balanceAfter) }}<small>{{ (row as UsageLedgerRow).operatorUsername || (row as UsageLedgerRow).operatorUserId || "-" }} · {{ (row as UsageLedgerRow).idempotencyKey || "no-key" }}</small></template>
-              </DataGrid>
-              <p v-else class="muted-box">暂无 ledger。</p>
-            </section>
-          </div>
-
-          <section class="detail-subpanel">
-            <h3>Reservations</h3>
-            <DataGrid v-if="reservations.length" :columns="reservationColumns" :rows="reservations" :row-key="reservationKey" :interactive="false" density="compact" aria-label="用户 Reservations">
-              <template #cell-reservation="{ row }"><code>{{ (row as UsageReservationRow).reservationId }}</code></template>
-              <template #cell-service="{ row }"><code>{{ (row as UsageReservationRow).serviceId }}</code><small>{{ (row as UsageReservationRow).resourceType || "generic" }}</small></template>
-              <template #cell-credits="{ row }">{{ formatNumber((row as UsageReservationRow).estimatedCredits) }}</template>
-              <template #cell-status="{ row }">{{ (row as UsageReservationRow).status }}</template>
-              <template #cell-expires="{ row }">{{ formatDate((row as UsageReservationRow).expiresAt) }}</template>
-            </DataGrid>
-            <p v-else class="muted-box">没有 active reservation。</p>
-          </section>
-        </template>
-      </section>
-      </BaseDrawer>
+  <section class="route-stack user-operations-page">
+    <PageCommandBar eyebrow="Admin" title="身份运营工作区" description="用户集合为主面；资料、plan、API key、reservation 与 ledger 渐进进入 Inspector。"><template #actions><ViewModeSwitch v-model="viewMode" :options="[{ value: 'list', label: '紧凑列表', icon: 'mdtodo' }, { value: 'grid', label: '实体网格', icon: 'users' }]" /><button class="table-action" type="button" @click="createOpen = true">创建用户</button></template></PageCommandBar>
+    <AsyncBoundary :state="asyncState" :has-content="Boolean(users.length)" label="加载身份运营" @retry="loadUsers"><template #error><EmptyState title="身份运营加载失败" :description="error || '请求未完成'" action-label="重试" @action="loadUsers" /></template>
+      <StatusStrip :items="statusItems" />
+      <OperationsWorkspace class="user-operations" label="用户身份运营" :inspector-open="Boolean(selectedUser)">
+        <template #index><EntityIndex :items="users" :item-key="userKey" :selected-id="selectedUserId" label="用户索引" @select="(item) => selectUser(item.user?.id)"><template #toolbar><input v-model="filters.search" class="input" placeholder="用户名、邮箱或 user id" @keyup.enter="applyFilters"><div class="user-filter-row"><select v-model="filters.status" class="input" @change="applyFilters"><option value="">全部状态</option><option value="active">active</option><option value="disabled">disabled</option><option value="pending">pending</option></select><select v-model="filters.role" class="input" @change="applyFilters"><option value="">全部角色</option><option value="user">user</option><option value="admin">admin</option></select></div></template><template #item="{ item }"><strong>{{ item.user?.displayName || item.user?.username || item.user?.id }}</strong><small>{{ item.user?.email || item.user?.username }} · {{ item.planId || 'default' }}</small><span class="entity-index-meta"><span class="status-pill" :data-status="item.user?.status">{{ item.user?.role }} / {{ item.user?.status }}</span><code>{{ formatNumber(item.credits?.available) }} cr</code></span></template></EntityIndex></template>
+        <div class="user-main-stack"><SectionFrame :title="viewMode === 'grid' ? '实体网格' : '身份清单'" description="两种视图消费同一 AdminBillingUserSummary 集合与稳定 user id。" :body-padding="false"><div v-if="viewMode === 'grid'" class="user-entity-grid"><button v-for="item in users" :key="userKey(item)" type="button" @click="selectUser(item.user?.id)"><ConsoleIcon name="users" :size="20" /><strong>{{ item.user?.displayName || item.user?.username }}</strong><small>{{ item.user?.email || item.user?.id }}</small><span class="status-pill" :data-status="item.user?.status">{{ item.user?.status }}</span><dl><div><dt>Available</dt><dd>{{ formatNumber(item.credits?.available) }}</dd></div><div><dt>Usage</dt><dd>{{ formatNumber(item.usage?.totalCredits) }}</dd></div><div><dt>Keys</dt><dd>{{ formatNumber(item.apiKeys?.activeCount) }}</dd></div></dl></button></div><div v-else class="user-compact-list"><button v-for="item in users" :key="userKey(item)" type="button" @click="selectUser(item.user?.id)"><strong>{{ item.user?.displayName || item.user?.username }}</strong><span>{{ item.user?.role }} / {{ item.user?.status }}</span><code>{{ item.planId || 'default' }}</code><code>{{ formatNumber(item.credits?.available) }} available</code><code>{{ formatNumber(item.usage?.totalCredits) }} usage</code><button class="table-action" type="button" :disabled="pending === `status:${item.user?.id}`" @click.stop="setUserStatus(item)">{{ item.user?.status === 'disabled' ? '启用' : '禁用' }}</button></button></div></SectionFrame>
+          <SectionFrame title="全局审计" description="不再与用户集合纵向堆成超长页；按需切换 usage / ledger。"><template #actions><button class="table-action" type="button" :aria-pressed="auditTab === 'usage'" @click="auditTab = 'usage'; loadAudit()">Usage</button><button class="table-action" type="button" :aria-pressed="auditTab === 'ledger'" @click="auditTab = 'ledger'; loadAudit()">Ledger</button></template><AuditTimeline v-if="auditTab === 'usage'" :items="auditUsageRows" :item-key="auditKey"><template #item="{ item }"><strong>{{ item.serviceId }} · {{ item.userId }}</strong><small>{{ formatDate(item.createdAt) }} · {{ item.status }} · {{ item.id }}</small></template></AuditTimeline><AuditTimeline v-else :items="auditLedgerRows" :item-key="auditKey"><template #item="{ item }"><strong>{{ item.kind }} · {{ item.userId }}</strong><small>{{ formatDate(item.createdAt) }} · {{ item.status }} · {{ item.id }}</small></template></AuditTimeline><p v-if="auditLoading" class="muted-box">审计加载中…</p></SectionFrame></div>
+        <template #inspector><InspectorPanel v-if="selectedUser" :title="selectedUser.displayName || selectedUser.username || selectedUser.id || '未命名用户'" :subtitle="selectedUser.id" @close="closeInspector"><template #tabs><button type="button" :aria-selected="detailTab === 'profile'" @click="detailTab = 'profile'">资料</button><button type="button" :aria-selected="detailTab === 'credits'" @click="detailTab = 'credits'">Credits</button><button type="button" :aria-selected="detailTab === 'ledger'" @click="detailTab = 'ledger'">Ledger</button></template><p v-if="mutationError" class="form-error">{{ mutationError }}</p><div v-if="detailTab === 'profile'" class="form-grid"><label>邮箱<input v-model="editForm.email" class="input"></label><label>用户名<input v-model="editForm.username" class="input"></label><label>显示名<input v-model="editForm.displayName" class="input"></label><label>角色<select v-model="editForm.role" class="input"><option value="user">user</option><option value="admin">admin</option></select></label><label>状态<select v-model="editForm.status" class="input"><option value="active">active</option><option value="pending">pending</option><option value="disabled">disabled</option></select></label><label>Plan<select v-model="editForm.planId" class="input"><option v-for="item in plans" :key="item.plan?.id" :value="item.plan?.id">{{ item.plan?.displayName || item.plan?.id }}</option></select></label><button class="table-action" type="button" :disabled="pending === 'save'" @click="saveUser">保存资料</button></div><div v-else-if="detailTab === 'credits'" class="form-grid"><p class="muted-box">Available {{ formatNumber(selectedSummary?.credits?.available) }} · Reserved {{ formatNumber(selectedSummary?.credits?.reserved) }}</p><label>Delta<input v-model.number="creditForm.deltaCredits" class="input" type="number"></label><label>Reason<input v-model="creditForm.reason" class="input"></label><label>Idempotency key<input v-model="creditForm.idempotencyKey" class="input"></label><button class="table-action" type="button" :disabled="pending === 'credits'" @click="adjustCredits">调整 Credits</button></div><AuditTimeline v-else :items="ledgerRows" :item-key="auditKey"><template #item="{ item }"><strong>{{ item.kind }} · {{ item.deltaCredits }}</strong><small>{{ formatDate(item.createdAt) }} · {{ item.reason }} · {{ item.id }}</small></template></AuditTimeline></InspectorPanel></template>
+      </OperationsWorkspace>
+      <BaseDrawer :open="createOpen" title="创建用户" description="写入 user-billing authority" :busy="pending === 'create'" @close="createOpen = false"><div class="form-grid two-col"><label>邮箱<input v-model="createForm.email" class="input" type="email"></label><label>用户名<input v-model="createForm.username" class="input"></label><label>显示名<input v-model="createForm.displayName" class="input"></label><label>初始 credits<input v-model.number="createForm.initialCredits" class="input" type="number"></label><label>角色<select v-model="createForm.role" class="input"><option value="user">user</option><option value="admin">admin</option></select></label><label>状态<select v-model="createForm.status" class="input"><option value="active">active</option><option value="pending">pending</option><option value="disabled">disabled</option></select></label><label>初始密码<input v-model="createForm.password" class="input" type="password"></label></div><template #footer><button class="table-action" type="button" @click="createOpen = false">取消</button><button class="table-action" type="button" :disabled="pending === 'create'" @click="createUser">创建</button></template></BaseDrawer>
     </AsyncBoundary>
   </section>
 </template>
 
 <style scoped>
-.admin-users-page { min-width: 0; }
-.admin-users-toolbar,
-.admin-audit-panel,
-.admin-users-list-panel,
-.admin-user-detail-panel { min-width: 0; box-shadow: inset 3px 0 #1ca39e; }
-.admin-users-filters { display: grid; grid-template-columns: minmax(220px, 1fr) 150px 140px auto; gap: 7px; }
-.admin-users-filters .input { min-width: 0; }
-.audit-filters { grid-template-columns: auto auto repeat(4, minmax(120px, 1fr)) auto auto; }
-.admin-users-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 12px; min-width: 0; }
-.admin-users-list-panel,
-.admin-user-create-panel,
-.admin-user-detail-panel { overflow: auto; }
-.admin-users-heading-actions { display: flex; align-items: center; gap: 8px; }
-.admin-users-view-toggle { display: flex; overflow: hidden; border: 1px solid #b7c4cb; border-radius: 5px; }
-.admin-users-view-toggle button { min-height: 28px; border: 0; background: #fff; padding: 0 9px; color: #53666f; font-size: 10px; font-weight: 800; cursor: pointer; }
-.admin-users-view-toggle button + button { border-left: 1px solid #cbd5da; }
-.admin-users-view-toggle button[data-active="true"] { background: #17383f; color: #efffff; }
-.admin-user-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; min-width: 0; }
-.admin-user-card { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 9px; align-items: center; min-width: 0; border: 1px solid #d2dce1; border-radius: 8px; background: linear-gradient(145deg, #fff, #f5f8f9); padding: 11px; color: inherit; text-align: left; cursor: pointer; }
-.admin-user-card:hover,
-.admin-user-card[data-selected="true"] { border-color: #27908c; box-shadow: 0 6px 16px rgba(25, 91, 89, .1), inset 3px 0 #1ca39e; }
-.admin-user-glyph { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid #75bbb7; border-radius: 7px; background: #e0f3f0; color: #155f5c; font: 850 9px/1 ui-monospace, monospace; }
-.admin-user-card-name { display: grid; min-width: 0; gap: 3px; }
-.admin-user-card-name strong,
-.admin-user-card-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.admin-user-card-name strong { color: #1d323b; font-size: 12px; }
-.admin-user-card-name small { color: #6a7a82; font-size: 9px; }
-.admin-user-card dl { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0; }
-.admin-user-card-actions { display: flex; grid-column: 1 / -1; justify-content: flex-end; gap: 6px; }
-.admin-user-card dl div { border-top: 1px solid #e0e7ea; padding-top: 7px; }
-.admin-user-card dt { color: #75838a; font-size: 8px; text-transform: uppercase; }
-.admin-user-card dd { margin: 3px 0 0; color: #29404a; font-size: 11px; font-weight: 800; }
-.admin-user-card-arrow { color: #217d7a; }
-.admin-user-create-panel { align-self: start; border-color: #d5c27e; background: #fffdf5; box-shadow: inset 3px 0 #d6a33d; }
-.admin-billing-table tbody tr { cursor: pointer; }
-.admin-billing-table tbody tr[data-selected="true"] { background: #e9f6f4; box-shadow: inset 3px 0 #168d88; }
-.admin-user-detail-panel > .panel-header { position: sticky; top: 0; z-index: 2; background: #fff; }
-.admin-user-detail-layout { min-width: 0; }
-.detail-subpanel { min-width: 0; border-color: #d9e2e6; background: #f8fafb; }
-:deep(.admin-users-page table) { min-width: 700px; }
-@media (max-width: 1120px) {
-  .admin-users-layout { grid-template-columns: 1fr; }
-  .admin-user-create-panel { order: -1; }
-  .audit-filters { grid-template-columns: repeat(4, minmax(120px, 1fr)); }
-}
-@media (max-width: 760px) {
-  .admin-users-filters,
-  .audit-filters { grid-template-columns: 1fr 1fr; }
-  .admin-users-filters > .input:first-of-type { grid-column: 1 / -1; }
-  :deep(.usage-metrics) { grid-template-columns: 1fr 1fr; }
-}
+.user-operations { min-height: 650px; }.user-filter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }.entity-index-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 4px; }.user-main-stack { display: grid; gap: 14px; }.user-entity-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 1px; background: #d8e1e4; }.user-entity-grid > button { display: grid; grid-template-columns: auto 1fr auto; gap: 7px; align-items: center; border: 0; padding: 12px; background: white; color: inherit; text-align: left; }.user-entity-grid small, .user-entity-grid dl { grid-column: 1/-1; }.user-entity-grid dl { display: grid; grid-template-columns: repeat(3,1fr); margin: 0; }.user-entity-grid dt { color: #64757d; font-size: 9px; }.user-entity-grid dd { margin: 3px 0 0; }.user-compact-list { overflow: auto; }.user-compact-list > button { display: grid; grid-template-columns: minmax(160px,1.3fr) 110px 100px 120px 110px 64px; gap: 8px; width: 100%; min-width: 760px; align-items: center; border: 0; border-bottom: 1px solid #d8e1e4; padding: 9px 11px; background: white; color: inherit; text-align: left; }.user-compact-list > button:hover { background: #e8f6f5; }
 </style>