refactor(admin): 管理后台 - 收敛重复边框并提升运维信息密度

web/src/pages/admin/components/admin-density.tsx

@@ -0,0 +1,42 @@
+import { createContext, useContext, useState, type ReactNode } from "react";
+
+export type AdminDensity = "compact" | "comfortable";
+
+export function normalizeAdminDensity(value: string | null): AdminDensity {
+    return value === "comfortable" ? "comfortable" : "compact";
+}
+
+export function adminDensityStorageKey(userId: string) {
+    return `admin-console:${encodeURIComponent(userId)}:density`;
+}
+
+const AdminDensityContext = createContext<{ density: AdminDensity; toggleDensity: () => void }>({ density: "compact", toggleDensity: () => {} });
+
+export function AdminDensityProvider({ userId, children }: { userId?: string; children: ReactNode }) {
+    const [density, setDensity] = useState<AdminDensity>(() => {
+        if (!userId || typeof window === "undefined") return "compact";
+        try {
+            return normalizeAdminDensity(window.localStorage.getItem(adminDensityStorageKey(userId)));
+        } catch (error) {
+            console.warn("无法读取后台密度偏好，使用紧凑布局", error);
+            return "compact";
+        }
+    });
+
+    const toggleDensity = () => {
+        const next = density === "compact" ? "comfortable" : "compact";
+        setDensity(next);
+        if (!userId) return;
+        try {
+            window.localStorage.setItem(adminDensityStorageKey(userId), next);
+        } catch (error) {
+            console.warn("后台密度已切换，但无法保存偏好", error);
+        }
+    };
+
+    return <AdminDensityContext.Provider value={{ density, toggleDensity }}>{children}</AdminDensityContext.Provider>;
+}
+
+export function useAdminDensity() {
+    return useContext(AdminDensityContext);
+}