refactor(admin): 管理后台 UI - 独立设计系统并与用户端隔离

把后台 token、Ant 主题、壳层控件和抽屉弹窗从用户工作台拆开，去掉树状侧栏装饰线，色板仍用原来的中性黑白台阶。 Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-17 21:29:35 +08:00
parent 6892732b06
commit 9ce158aaa0
43 changed files with 1912 additions and 1410 deletions
--- a/web/src/pages/admin/channels/channels-page.tsx
+++ b/web/src/pages/admin/channels/channels-page.tsx
@@ -6,7 +6,7 @@ import { useEffect, useRef, useState } from "react";
 import { useSearchParams } from "react-router";

 import { ChannelHeadersEditor, validateChannelHeaders } from "@/components/channel-headers-editor";
-import { PaginationBar } from "@/components/layout/workspace-page";
+import { PaginationBar } from "@/pages/admin/components/admin-ui";
 import { useDebouncedValue } from "@/hooks/use-debounced-value";
 import { refreshSystemChannels } from "@/lib/user-session";
 import { createAdminChannel, deleteAdminChannel, duplicateAdminChannel, listAdminChannels, updateAdminChannel } from "@/services/api/auth";
--- a/web/src/pages/admin/components/access-settings-panel.tsx
+++ b/web/src/pages/admin/components/access-settings-panel.tsx
@@ -1,5 +1,5 @@
 import { App, Button, Form, Input, Select, Skeleton } from "antd";
-import { Switch } from "@/components/ui/base/switch";
+import { Switch } from "@/pages/admin/ui/controls";
 import { AlertTriangle, BadgeCheck, ChevronDown, Globe2, KeyRound, LockKeyhole, RefreshCw, RotateCcw, Save, ShieldCheck, UserPlus, UsersRound } from "lucide-react";
 import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
 import { useBlocker } from "react-router";
--- a/web/src/pages/admin/components/admin-announcements-panel.tsx
+++ b/web/src/pages/admin/components/admin-announcements-panel.tsx
@@ -1,11 +1,11 @@
 import { useEffect, useRef, useState, type ChangeEvent } from "react";
 import { App, Button, Form, Input, Modal, Select } from "antd";
-import { Switch } from "@/components/ui/base/switch";
+import { Switch } from "@/pages/admin/ui/controls";
 import type { InputRef } from "antd";
 import type { ColumnsType } from "antd/es/table";
 import { PencilLine, Pin, Plus, RefreshCw, Search, Send, Upload, X } from "lucide-react";

-import { PaginationBar } from "@/components/layout/workspace-page";
+import { PaginationBar } from "@/pages/admin/components/admin-ui";
 import { AnnouncementContent } from "@/components/ui/announcement-content";
 import { useDebouncedValue } from "@/hooks/use-debounced-value";
 import { ApiError } from "@/services/api/request";
--- a/web/src/pages/admin/components/admin-shell.tsx
+++ b/web/src/pages/admin/components/admin-shell.tsx
@@ -1,5 +1,4 @@
-import { ConfigProvider, Dropdown } from "antd";
-import { Tooltip } from "@/components/ui/base/tooltip";
+import { App, ConfigProvider, Dropdown } from "antd";
 import type { MenuProps } from "antd";
 import {
    Activity,
@@ -41,14 +40,16 @@ import { Link, NavLink, Outlet, useLocation } from "react-router";

 import { AppChangelogButton } from "@/components/layout/app-changelog-modal";
 import { BrandLogoFrame } from "@/components/brand/brand-logo";
-import { WorkspacePage } from "@/components/layout/workspace-page";
 import { publishWorkspaceSidebarCollapsed, readWorkspaceSidebarCollapsed, subscribeWorkspaceSidebarCollapsed } from "@/components/layout/workspace-sidebar-state";
-import { getAdminAntThemeConfig } from "@/lib/app-theme";
 import { cn } from "@/lib/utils";
-import "@/styles/admin-ui.css";
 import { useThemeStore } from "@/stores/use-theme-store";
 import { useUserStore } from "@/stores/use-user-store";
 import { useAppearanceStore } from "@/stores/use-appearance-store";
+import { getIsolatedAdminAntTheme } from "../theme/admin-ant-theme";
+import { AdminTooltip } from "../ui/controls";
+import "@/styles/admin-ui.css";
+import "../theme/admin-tokens.css";
+import "../theme/admin-chrome.css";

 type AdminNavigationItem = {
    path: string;
@@ -111,6 +112,10 @@ function isAdminNavigationPath(pathname: string, navigationPath: string) {
    return pathname === navigationPath || pathname.startsWith(`${navigationPath}/`);
 }

+function adminPopupContainer(node?: HTMLElement) {
+    return document.getElementById("admin-root") || node?.closest("[data-admin-root]") || document.body;
+}
+
 export function AdminShell() {
    const appearance = useAppearanceStore((state) => state.appearance);
    const [collapsed, setCollapsed] = useState(readWorkspaceSidebarCollapsed);
@@ -132,54 +137,52 @@ export function AdminShell() {
    };

    return (
-        <ConfigProvider theme={getAdminAntThemeConfig(dark, appearance.activeSkin)}>
-            <main className="admin-shell app-user-workspace flex h-full min-h-0 overflow-hidden text-foreground">
-                <aside className={cn("app-workspace-sidebar admin-sidebar hidden shrink-0 flex-col overflow-hidden lg:flex", collapsed && "is-collapsed")}>
-                    <div className="admin-sidebar-identity shrink-0">
-                        <Tooltip delay={100} title={collapsed ? "查看更新日志" : undefined} placement="right">
-                            <AppChangelogButton
-                                className={cn("admin-sidebar-brand-button", collapsed && "is-collapsed")}
-                                icon={<BrandLogoFrame className="admin-sidebar-brand-mark grid shrink-0 place-items-center bg-foreground text-background" logoClassName="size-5 object-contain" alt="" fallback={<InfinityIcon className="size-4" />} />}
-                                label={appearance.brandName}
-                                showLabel={!collapsed}
-                                showVersion={!collapsed}
-                                labelClassName="admin-sidebar-brand-title"
-                                versionClassName="admin-sidebar-brand-version"
-                            />
-                        </Tooltip>
-                    </div>
-                    <AdminNavigation collapsed={collapsed} />
-                    <div className="admin-sidebar-footer shrink-0">
-                        <Tooltip delay={100} title={collapsed ? "返回创作台" : undefined} placement="right">
-                            <NavLink
-                                to="/"
-                                aria-label={collapsed ? "返回创作台" : undefined}
-                                className={cn("app-workspace-nav-link group flex h-8 items-center text-foreground/62 transition-colors hover:bg-surface-hover hover:text-foreground", collapsed ? "justify-center px-0" : "gap-2.5 px-2.5")}
-                            >
-                                <Home className="size-4" strokeWidth={1.6} />
-                                {!collapsed ? <span>返回创作台</span> : null}
-                            </NavLink>
-                        </Tooltip>
-                    </div>
-                </aside>
-                <Tooltip delay={100} title={collapsed ? "展开侧栏" : "收起侧栏"} placement="right">
-                    <button type="button" className={cn("admin-sidebar-edge-toggle hidden lg:grid", collapsed && "is-collapsed")} onClick={toggleCollapsed} aria-label={collapsed ? "展开侧栏" : "收起侧栏"} aria-expanded={!collapsed}>
-                        {collapsed ? <ChevronRight className="size-3.5" aria-hidden="true" /> : <ChevronLeft className="size-3.5" aria-hidden="true" />}
-                    </button>
-                </Tooltip>
-                <section className="flex min-w-0 flex-1 flex-col overflow-hidden">
-                    <MobileAdminNavigation />
-                    <Suspense
-                        fallback={
-                            <div className="p-8 text-sm text-foreground/60" role="status">
-                                正在加载管理页面…
-                            </div>
-                        }
-                    >
-                        <Outlet />
-                    </Suspense>
-                </section>
-            </main>
+        <ConfigProvider theme={getIsolatedAdminAntTheme(dark)} getPopupContainer={(node) => adminPopupContainer(node)}>
+            <App>
+                <main id="admin-root" data-admin-root className="admin-shell flex h-full min-h-0 overflow-hidden">
+                    <aside className={cn("admin-sidebar hidden shrink-0 flex-col overflow-hidden lg:flex", collapsed && "is-collapsed")}>
+                        <div className="admin-sidebar-identity shrink-0">
+                            <AdminTooltip title={collapsed ? "查看更新日志" : undefined} placement="right">
+                                <AppChangelogButton
+                                    className={cn("admin-sidebar-brand-button", collapsed && "is-collapsed")}
+                                    icon={<BrandLogoFrame className="admin-sidebar-brand-mark grid shrink-0 place-items-center bg-foreground text-background" logoClassName="size-5 object-contain" alt="" fallback={<InfinityIcon className="size-4" />} />}
+                                    label={appearance.brandName}
+                                    showLabel={!collapsed}
+                                    showVersion={!collapsed}
+                                    labelClassName="admin-sidebar-brand-title"
+                                    versionClassName="admin-sidebar-brand-version"
+                                />
+                            </AdminTooltip>
+                        </div>
+                        <AdminNavigation collapsed={collapsed} />
+                        <div className="admin-sidebar-footer shrink-0">
+                            <AdminTooltip title={collapsed ? "返回创作台" : undefined} placement="right">
+                                <NavLink to="/" aria-label={collapsed ? "返回创作台" : undefined} className={cn("admin-nav-link", collapsed && "is-collapsed")}>
+                                    <Home className="size-4" strokeWidth={1.6} />
+                                    {!collapsed ? <span>返回创作台</span> : null}
+                                </NavLink>
+                            </AdminTooltip>
+                        </div>
+                    </aside>
+                    <AdminTooltip title={collapsed ? "展开侧栏" : "收起侧栏"} placement="right">
+                        <button type="button" className={cn("admin-sidebar-edge-toggle hidden lg:grid", collapsed && "is-collapsed")} onClick={toggleCollapsed} aria-label={collapsed ? "展开侧栏" : "收起侧栏"} aria-expanded={!collapsed}>
+                            {collapsed ? <ChevronRight className="size-3.5" aria-hidden="true" /> : <ChevronLeft className="size-3.5" aria-hidden="true" />}
+                        </button>
+                    </AdminTooltip>
+                    <section className="flex min-w-0 flex-1 flex-col overflow-hidden">
+                        <MobileAdminNavigation />
+                        <Suspense
+                            fallback={
+                                <div className="p-8 text-sm" role="status">
+                                    正在加载管理页面…
+                                </div>
+                            }
+                        >
+                            <Outlet />
+                        </Suspense>
+                    </section>
+                </main>
+            </App>
        </ConfigProvider>
    );
 }
@@ -192,16 +195,16 @@ export function AdminPageFrame({ title, description, actions, back, scroll = fal
    const sectionPath = back ? (currentItem?.path ?? currentSection?.items[0]?.path ?? "/admin") : (currentSection?.items[0]?.path ?? "/admin");

    return (
-        <WorkspacePage scroll={scroll} fluid className={cn("admin-page-root", scroll && "admin-page-root-scrollable")}>
+        <div className={cn("admin-page-root", scroll && "admin-page-root-scrollable")}>
            <div className={cn("admin-page-frame", scroll && "admin-page-frame-scrollable")}>
-                <header className="admin-page-header flex shrink-0 flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                <header className="admin-page-header flex shrink-0 flex-col sm:flex-row sm:items-center sm:justify-between">
                    <div className="flex min-w-0 items-center gap-2.5">
                        {back ? (
-                            <Tooltip title={back.label}>
-                                <button type="button" className="app-workspace-icon-button size-9 shrink-0" aria-label={back.label} onClick={back.onClick}>
+                            <AdminTooltip title={back.label}>
+                                <button type="button" className="admin-icon-button shrink-0" aria-label={back.label} onClick={back.onClick}>
                                    <ArrowLeft className="size-4" />
                                </button>
-                            </Tooltip>
+                            </AdminTooltip>
                        ) : null}
                        <div className="admin-page-title-block min-w-0">
                            <nav className="admin-page-location" aria-label="当前位置">
@@ -211,19 +214,19 @@ export function AdminPageFrame({ title, description, actions, back, scroll = fal
                                <span className="admin-page-location-separator" aria-hidden="true">
                                    /
                                </span>
-                                <h1 className="admin-page-title truncate font-semibold">{title}</h1>
+                                <h1 className="admin-page-title truncate">{title}</h1>
                            </nav>
                            {description ? <p className="admin-page-description">{description}</p> : null}
                        </div>
                    </div>
-                    <div className="admin-page-actions flex shrink-0 flex-wrap items-center gap-2">
+                    <div className="admin-page-actions flex shrink-0 flex-wrap items-center">
                        {actions}
                        <AdminThemeButton />
                    </div>
                </header>
                {children}
            </div>
-        </WorkspacePage>
+        </div>
    );
 }

@@ -233,11 +236,11 @@ function AdminThemeButton() {
    const dark = theme === "dark";

    return (
-        <Tooltip title={dark ? "切换到浅色主题" : "切换到深色主题"} placement="bottom">
-            <button type="button" className="app-workspace-icon-button admin-page-theme-toggle size-9 shrink-0" onClick={() => setTheme(dark ? "light" : "dark")} aria-label={dark ? "切换到浅色主题" : "切换到深色主题"}>
+        <AdminTooltip title={dark ? "切换到浅色主题" : "切换到深色主题"} placement="bottom">
+            <button type="button" className="admin-page-theme-toggle shrink-0" onClick={() => setTheme(dark ? "light" : "dark")} aria-label={dark ? "切换到浅色主题" : "切换到深色主题"}>
                {dark ? <Sun className="size-4" aria-hidden="true" /> : <Moon className="size-4" aria-hidden="true" />}
            </button>
-        </Tooltip>
+        </AdminTooltip>
    );
 }

@@ -263,7 +266,7 @@ function MobileAdminNavigation() {
    }));

    return (
-        <nav className="admin-mobile-navigation flex shrink-0 items-center justify-between gap-2 border-b lg:hidden" aria-label="管理后台导航">
+        <nav className="admin-mobile-navigation flex shrink-0 items-center justify-between gap-2 lg:hidden" aria-label="管理后台导航">
            <Dropdown menu={{ items: menuItems, selectable: true, selectedKeys: currentItem ? [currentItem.path] : [], className: "admin-mobile-navigation-menu" }} trigger={["click"]} placement="bottomLeft">
                <button type="button" className="admin-mobile-navigation-trigger" aria-label={`打开管理后台导航，当前页面${currentItem?.label || "未知"}`}>
                    <span className="admin-mobile-navigation-current-icon">{currentItem?.icon}</span>
@@ -275,11 +278,11 @@ function MobileAdminNavigation() {
                </button>
            </Dropdown>
            <div className="flex shrink-0 items-center gap-1">
-                <Tooltip title="返回创作台">
+                <AdminTooltip title="返回创作台">
                    <Link to="/" className="admin-mobile-navigation-action" aria-label="返回创作台">
                        <Home className="size-4" aria-hidden="true" />
                    </Link>
-                </Tooltip>
+                </AdminTooltip>
                <AppChangelogButton className="admin-mobile-navigation-action [&_svg]:size-4" />
            </div>
        </nav>
@@ -304,25 +307,14 @@ function AdminNavigation({ collapsed }: { collapsed: boolean }) {
                        ) : (
                            <div className="admin-nav-collapsed-separator" />
                        )}
-                        <div className={cn("admin-nav-group-items space-y-0.5", collapsed && "is-collapsed")}>
+                        <div className={cn("admin-nav-group-items", collapsed && "is-collapsed")}>
                            {visibleItems.map((item) => (
-                                <Tooltip key={item.path} delay={100} title={collapsed ? item.label : undefined} placement="right">
-                                    <NavLink
-                                        to={item.path}
-                                        end={item.path === "/admin"}
-                                        aria-label={collapsed ? item.label : undefined}
-                                        className={({ isActive }) =>
-                                            cn(
-                                                "app-workspace-nav-link flex h-8 items-center rounded-md transition-colors",
-                                                collapsed ? "justify-center px-0" : "gap-2.5 px-2.5",
-                                                isActive ? "is-active" : "text-foreground/62 hover:bg-surface-hover hover:text-foreground",
-                                            )
-                                        }
-                                    >
+                                <AdminTooltip key={item.path} delay={100} title={collapsed ? item.label : undefined} placement="right">
+                                    <NavLink to={item.path} end={item.path === "/admin"} aria-label={collapsed ? item.label : undefined} className={({ isActive }) => cn("admin-nav-link", collapsed && "is-collapsed", isActive && "is-active")}>
                                        {item.icon}
                                        {!collapsed ? <span className="truncate">{item.label}</span> : null}
                                    </NavLink>
-                                </Tooltip>
+                                </AdminTooltip>
                            ))}
                        </div>
                    </div>
--- a/web/src/pages/admin/components/admin-ui.tsx
+++ b/web/src/pages/admin/components/admin-ui.tsx
@@ -1,31 +1,21 @@
-import { StatusBadge } from "@/components/ui/base/badges";
-import { EmptyState } from "@/components/ui/product/empty-state";
-import { App, Button, Dropdown, Table } from "antd";
+import { App, Button, Dropdown, Select, Table } from "antd";
 import type { ButtonProps, MenuProps, TableProps } from "antd";
 import { saveAs } from "file-saver";
-import { CheckSquare2, ChevronDown, Download, SearchX, X } from "lucide-react";
-import { useState } from "react";
-import type { ReactNode } from "react";
+import { CheckSquare2, ChevronDown, ChevronLeft, ChevronRight, Download, ListFilter, RotateCcw, SearchX, X } from "lucide-react";
+import { useEffect, useState, type ReactNode } from "react";

-import { ListToolbar } from "@/components/layout/workspace-page";
 import { cn } from "@/lib/utils";

 export const configuredSecretText = "已配置 · 留空不改";

 export type AdminStatusTone = "neutral" | "success" | "warning" | "error" | "info";

-/** admin 状态徽章：归并到自研 StatusBadge（outline 圆点胶囊），admin 全部页面零改动统一视觉。
- * tone 归一：info 在 admin 中本就是前景中性（--admin-status-info: var(--foreground)）→ neutral。 */
-const adminToneToBadgeTone: Record<AdminStatusTone, "neutral" | "success" | "warning" | "error"> = {
-    neutral: "neutral",
-    success: "success",
-    warning: "warning",
-    error: "error",
-    info: "neutral",
-};
-
-export function AdminStatusBadge({ label, tone = "neutral", title }: { label: string; tone?: AdminStatusTone; title?: string }) {
-    return <StatusBadge tone={adminToneToBadgeTone[tone]} title={title} label={label} />;
+export function AdminStatusBadge({ label, tone = "neutral", title }: { label: string; tone?: AdminStatusTone; title?: string; variant?: string }) {
+    return (
+        <span className={cn("admin-status-badge", tone !== "neutral" && `is-${tone}`)} title={title}>
+            {label}
+        </span>
+    );
 }

 export function AdminStatTile({ label, value, detail, trend }: { label: string; value: string | number; detail?: string; trend?: { value: string; tone?: AdminStatusTone } }) {
@@ -36,7 +26,7 @@ export function AdminStatTile({ label, value, detail, trend }: { label: string;
            {trend || detail ? (
                <div className="admin-stat-tile-detail">
                    {trend ? <AdminStatusBadge label={trend.value} tone={trend.tone || "neutral"} /> : null}
-                    {trend && detail ? <span className="mx-1.5 text-foreground/25">·</span> : null}
+                    {trend && detail ? <span className="mx-1.5">·</span> : null}
                    {detail ? <span>{detail}</span> : null}
                </div>
            ) : null}
@@ -44,6 +34,115 @@ export function AdminStatTile({ label, value, detail, trend }: { label: string;
    );
 }

+export function ListToolbar({
+    children,
+    filters,
+    filtersAlwaysVisible = false,
+    activeFilters,
+    trailing,
+    active,
+    onReset,
+    className,
+}: {
+    children: ReactNode;
+    filters?: ReactNode;
+    filtersAlwaysVisible?: boolean;
+    activeFilters?: ReactNode;
+    trailing?: ReactNode;
+    active?: boolean;
+    onReset?: () => void;
+    className?: string;
+}) {
+    const [filtersOpen, setFiltersOpen] = useState(false);
+
+    useEffect(() => {
+        if (active) setFiltersOpen(true);
+    }, [active]);
+
+    return (
+        <div className={cn("admin-list-toolbar", className)}>
+            <div className="admin-list-toolbar-main">
+                {children}
+                {filters ? (
+                    <>
+                        {!filtersAlwaysVisible ? (
+                            <Button type="default" className="admin-filter-toggle" aria-expanded={filtersOpen} icon={<ListFilter className="size-3.5" />} onClick={() => setFiltersOpen((open) => !open)}>
+                                筛选{active ? <span className="admin-filter-active-dot" aria-label="有已应用筛选" /> : null}
+                            </Button>
+                        ) : null}
+                        <div className={cn("admin-list-toolbar-filters", (filtersAlwaysVisible || filtersOpen) && "is-open")}>{filters}</div>
+                    </>
+                ) : null}
+                {activeFilters ? <div className="admin-list-toolbar-chips">{activeFilters}</div> : null}
+            </div>
+            <div className="admin-list-toolbar-actions">
+                {active && onReset ? (
+                    <Button type="text" icon={<RotateCcw className="size-3.5" />} onClick={onReset}>
+                        重置
+                    </Button>
+                ) : null}
+                {trailing}
+            </div>
+        </div>
+    );
+}
+
+function pageItems(current: number, pages: number): Array<number | "…"> {
+    if (pages <= 7) return Array.from({ length: pages }, (_, index) => index + 1);
+    if (current <= 4) return [1, 2, 3, 4, 5, "…", pages];
+    if (current >= pages - 3) return [1, "…", pages - 4, pages - 3, pages - 2, pages - 1, pages];
+    return [1, "…", current - 1, current, current + 1, "…", pages];
+}
+
+export function PaginationBar({
+    current,
+    pageSize,
+    total,
+    onChange,
+    pageSizeOptions = [20, 50, 100],
+    alwaysShow = false,
+    itemLabel = "条",
+}: {
+    current: number;
+    pageSize: number;
+    total: number;
+    onChange: (page: number, pageSize: number) => void;
+    pageSizeOptions?: number[];
+    alwaysShow?: boolean;
+    itemLabel?: string;
+}) {
+    if (!alwaysShow && total <= pageSize && current === 1) return null;
+    const pages = Math.max(1, Math.ceil(total / pageSize));
+    const start = total === 0 ? 0 : (current - 1) * pageSize + 1;
+    const end = total === 0 ? 0 : Math.min(total, current * pageSize);
+    const items = pageItems(current, pages);
+    return (
+        <div className="admin-pagination-bar">
+            <span className="admin-pagination-total">{total === 0 ? `共 0 ${itemLabel}` : `${start}-${end} / 共 ${total} ${itemLabel}`}</span>
+            <Select size="small" value={pageSize} className="admin-pagination-size" options={pageSizeOptions.map((size) => ({ value: size, label: `${size} ${itemLabel}/页` }))} onChange={(value) => onChange(1, Number(value))} aria-label="每页条数" />
+            <div className="admin-pagination-pages" role="navigation" aria-label="分页">
+                <button type="button" className="admin-pagination-btn" disabled={current <= 1} aria-label="上一页" onClick={() => onChange(current - 1, pageSize)}>
+                    <ChevronLeft className="size-4" />
+                </button>
+                {items.map((item, index) =>
+                    item === "…" ? (
+                        <span key={`ellipsis-${index}`} className="admin-pagination-ellipsis">
+                            …
+                        </span>
+                    ) : (
+                        <button key={item} type="button" className={cn("admin-pagination-btn", item === current && "is-active")} aria-current={item === current ? "page" : undefined} onClick={() => onChange(item, pageSize)}>
+                            {item}
+                        </button>
+                    ),
+                )}
+                <button type="button" className="admin-pagination-btn" disabled={current >= pages} aria-label="下一页" onClick={() => onChange(current + 1, pageSize)}>
+                    <ChevronRight className="size-4" />
+                </button>
+            </div>
+        </div>
+    );
+}
+
 export function AdminDataTable<RecordType extends object>({
    toolbar,
    toolbarActive,
@@ -140,7 +239,18 @@ export function AdminExportButton({
 }

 export function AdminTableEmpty({ filtered = false, title, description, action }: { filtered?: boolean; title?: string; description?: string; action?: ReactNode }) {
-    return <EmptyState size="compact" icon={SearchX} title={title || (filtered ? "没有符合筛选条件的数据" : "暂无数据")} description={description} action={action} className="min-h-40 w-full justify-center" />;
+    return (
+        <div className="admin-empty">
+            <SearchX className="size-5" aria-hidden="true" />
+            <h3>{title || (filtered ? "没有符合筛选条件的数据" : "暂无数据")}</h3>
+            {description ? <p>{description}</p> : null}
+            {action}
+        </div>
+    );
+}
+
+export function AdminEmpty({ title, description, action }: { title?: string; description?: string; action?: ReactNode; size?: string; icon?: unknown }) {
+    return <AdminTableEmpty title={title} description={description} action={action} />;
 }

 export function AdminFilterChip({ label, onRemove }: { label: ReactNode; onRemove: () => void }) {
@@ -155,16 +265,16 @@ export function AdminFilterChip({ label, onRemove }: { label: ReactNode; onRemov

 export function AdminTableSkeleton({ rows = 8, columns = 6 }: { rows?: number; columns?: number }) {
    return (
-        <div className="animate-pulse motion-reduce:animate-none" aria-label="正在加载表格" role="status">
-            <div className="grid h-11 items-center gap-4 border-b border-border bg-muted/30 px-4" style={{ gridTemplateColumns: `repeat(${columns}, minmax(72px, 1fr))` }}>
+        <div aria-label="正在加载表格" role="status">
+            <div className="grid h-9 items-center gap-4 border-b px-3" style={{ borderColor: "var(--admin-border)", gridTemplateColumns: `repeat(${columns}, minmax(72px, 1fr))` }}>
                {Array.from({ length: columns }).map((_, index) => (
-                    <span key={index} className="h-3 w-16 max-w-full rounded bg-foreground/10" />
+                    <span key={index} className="h-2.5 w-16 max-w-full rounded" style={{ background: "color-mix(in srgb, var(--admin-text) 10%, transparent)" }} />
                ))}
            </div>
            {Array.from({ length: Math.max(8, rows) }).map((_, rowIndex) => (
-                <div key={rowIndex} className="grid min-h-14 items-center gap-4 border-b border-border/70 px-4 last:border-b-0" style={{ gridTemplateColumns: `repeat(${columns}, minmax(72px, 1fr))` }}>
+                <div key={rowIndex} className="grid h-10 items-center gap-4 border-b px-3 last:border-b-0" style={{ borderColor: "var(--admin-row-border)", gridTemplateColumns: `repeat(${columns}, minmax(72px, 1fr))` }}>
                    {Array.from({ length: columns }).map((_, columnIndex) => (
-                        <span key={columnIndex} className={cn("h-3 rounded bg-foreground/[0.07]", columnIndex === 0 ? "w-4/5" : columnIndex === columns - 1 ? "w-10" : "w-2/3")} />
+                        <span key={columnIndex} className="h-2.5 rounded" style={{ width: columnIndex === 0 ? "80%" : columnIndex === columns - 1 ? "40px" : "66%", background: "color-mix(in srgb, var(--admin-text) 7%, transparent)" }} />
                    ))}
                </div>
            ))}
@@ -175,9 +285,9 @@ export function AdminTableSkeleton({ rows = 8, columns = 6 }: { rows?: number; c
 export function AdminBatchBar({ count, onClear, children }: { count: number; onClear: () => void; children: ReactNode }) {
    if (count <= 0) return null;
    return (
-        <div className="admin-batch-bar sticky top-0 z-20 mt-3 flex min-h-11 flex-wrap items-center justify-between gap-3 rounded-md border border-border bg-background/95 px-3 py-2 shadow-sm backdrop-blur">
+        <div className="admin-batch-bar sticky top-0 z-20 flex min-h-11 flex-wrap items-center justify-between gap-3 px-3 py-2">
            <div className="flex items-center gap-2 text-sm font-medium">
-                <CheckSquare2 className="size-4 text-foreground/60" />
+                <CheckSquare2 className="size-4" />
                已选择 {count} 项
            </div>
            <div className="flex flex-wrap items-center gap-2">
@@ -206,7 +316,6 @@ export type AdminRowAction = {

 export function AdminRowActions({ primary, actions, visibleActionCount }: { primary?: { label: ReactNode; icon?: ReactNode; onClick: () => void | Promise<void>; disabled?: boolean }; actions: AdminRowAction[]; visibleActionCount?: number }) {
    const { modal } = App.useApp();
-    // 行内只保留一个最常用的次操作；低频或危险操作收进菜单，避免操作列堆成一排文字链接。
    const resolvedVisibleActionCount = visibleActionCount ?? (actions.length <= 1 ? actions.length : 1);
    const visibleActions = actions.slice(0, Math.max(0, resolvedVisibleActionCount));
    const menuActions = actions.slice(Math.max(0, resolvedVisibleActionCount));
@@ -292,12 +401,12 @@ export function SettingsSectionCard({
    const isStacked = layout === "stacked";
    return (
        <section className={cn("admin-settings-section", isStacked && "is-stacked", className)}>
-            <div className={cn("admin-settings-section-summary flex flex-wrap items-start justify-between gap-3 px-4 py-4", icon && "has-icon")}>
-                <div className="admin-settings-section-summary-main flex min-w-0 items-start gap-3">
-                    {icon ? <span className="grid size-8 shrink-0 place-items-center rounded-md bg-muted/40">{icon}</span> : null}
+            <div className={cn("admin-settings-section-summary", icon && "has-icon")}>
+                <div className="admin-settings-section-summary-main flex min-w-0 items-center gap-3">
+                    {icon ? <span className="admin-feature-domain-icon">{icon}</span> : null}
                    <div className="min-w-0">
-                        <h2 className="text-sm font-semibold leading-5">{title}</h2>
-                        {description ? <p className="mt-1 text-xs leading-5 text-foreground/55">{description}</p> : null}
+                        <h2>{title}</h2>
+                        {description ? <p>{description}</p> : null}
                    </div>
                </div>
                {status ? (
@@ -312,7 +421,7 @@ export function SettingsSectionCard({
            </div>
            <div className={cn("admin-settings-section-content min-w-0", contentClassName)}>
                {children}
-                {footer ? <div className="admin-settings-section-footer flex flex-wrap items-center justify-between gap-3 px-4 py-3">{footer}</div> : null}
+                {footer ? <div className="admin-settings-section-footer flex flex-wrap items-center justify-between gap-3 px-3 py-3">{footer}</div> : null}
            </div>
        </section>
    );
--- a/web/src/pages/admin/components/admin-user-detail-drawer.tsx
+++ b/web/src/pages/admin/components/admin-user-detail-drawer.tsx
@@ -1,13 +1,11 @@
 import { useEffect, useState } from "react";
 import { App, Button, Descriptions, Progress, Skeleton, Tabs } from "antd";
-import { AppDrawer } from "@/components/ui/product/app-drawer";
-import { IconButton } from "@/components/ui/base/buttons";
-import { EmptyState } from "@/components/ui/product/empty-state";
+import { AdminDrawer } from "@/pages/admin/ui/overlays";
 import { ChevronLeft, ChevronRight } from "lucide-react";

-import { PaginationBar } from "@/components/layout/workspace-page";
 import { formatCredits } from "@/constant/credits";
-import { AdminDataTable, AdminStatusBadge, AdminTableEmpty, type AdminStatusTone } from "./admin-ui";
+import { IconButton } from "@/pages/admin/ui/controls";
+import { AdminDataTable, AdminEmpty, AdminStatusBadge, AdminTableEmpty, PaginationBar, type AdminStatusTone } from "./admin-ui";
 import { getAdminUserDetail, listAdminUserAuditEvents, listAdminUserLedger, listAdminUserTasks, type AdminAuditEvent, type AdminUserDetail, type AdminUserTask } from "@/services/api/auth";
 import type { CreditLedgerEntry } from "@/services/api/wallet";

@@ -91,7 +89,7 @@ export function AdminUserDetailDrawer({ userId, onClose, previousUserId, nextUse
    }, [auditPage, message, userId]);

    return (
-        <AppDrawer
+        <AdminDrawer
            title={detail ? `${detail.user.displayName || detail.user.username} · 用户详情` : "用户详情"}
            open={Boolean(userId)}
            onClose={onClose}
@@ -227,9 +225,9 @@ export function AdminUserDetailDrawer({ userId, onClose, previousUserId, nextUse
                    ]}
                />
            ) : (
-                <EmptyState size="compact" title="没有用户详情" />
+                <AdminEmpty size="compact" title="没有用户详情" />
            )}
-        </AppDrawer>
+        </AdminDrawer>
    );
 }

--- a/web/src/pages/admin/components/analytics-panel.tsx
+++ b/web/src/pages/admin/components/analytics-panel.tsx
@@ -1,5 +1,5 @@
 import { App, Button, DatePicker, Drawer, Form, Input, Modal, Select, Tabs, Tag } from "antd";
-import { Tooltip } from "@/components/ui/base/tooltip";
+import { Tooltip } from "@/pages/admin/ui/controls";
 import { useCountUp } from "@/hooks/use-count-up";
 import { useCallback, useEffect, useMemo, useState, type ReactNode } from "react";

@@ -9,7 +9,7 @@ import { AlertTriangle, BarChart3, CircleDollarSign, Clock3, Gauge, Pencil, Plus
 import { Area, CartesianGrid, ComposedChart, Legend, Line, ResponsiveContainer, Tooltip as ChartTooltip, XAxis, YAxis } from "recharts";
 import { useSearchParams } from "react-router";

-import { ListToolbar, PaginationBar } from "@/components/layout/workspace-page";
+import { ListToolbar, PaginationBar, AdminDataTable, AdminExportButton, AdminFilterChip, AdminRowActions, AdminStatusBadge, AdminTableEmpty, type AdminStatusTone } from "./admin-ui";
 import {
    createAdminModelPricing,
    deleteAdminModelPricing,
@@ -23,7 +23,6 @@ import {
    type AnalyticsFilters,
    type ModelPricing,
 } from "@/services/api/auth";
-import { AdminDataTable, AdminExportButton, AdminFilterChip, AdminRowActions, AdminStatusBadge, AdminTableEmpty, type AdminStatusTone } from "./admin-ui";

 type Props = {
    users: AdminReferenceData["users"];
--- a/web/src/pages/admin/components/api-log-detail-drawer.tsx
+++ b/web/src/pages/admin/components/api-log-detail-drawer.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { App, Button, Descriptions, Drawer, Skeleton, Tabs, Typography } from "antd";
-import { EmptyState } from "@/components/ui/product/empty-state";
+import { AdminEmpty } from "@/pages/admin/components/admin-ui";
 import { RefreshCw } from "lucide-react";

 import { formatCredits } from "@/constant/credits";
@@ -50,7 +50,7 @@ export function ApiLogDetailDrawer({ logId, onClose, onLogUpdated }: { logId: st

    return (
        <Drawer title="请求详情" open={Boolean(logId)} onClose={onClose} width="min(1200px, 90vw)" destroyOnHidden rootClassName="admin-drawer">
-            {loading ? <Skeleton active paragraph={{ rows: 12 }} /> : log ? <LogDetail log={log} querying={querying} onQueryProviderTask={queryProviderTask} /> : <EmptyState size="compact" title="没有请求详情" />}
+            {loading ? <Skeleton active paragraph={{ rows: 12 }} /> : log ? <LogDetail log={log} querying={querying} onQueryProviderTask={queryProviderTask} /> : <AdminEmpty size="compact" title="没有请求详情" />}
        </Drawer>
    );
 }
@@ -163,7 +163,7 @@ function requestKindText(value: ApiCallLog["requestKind"]) {
 }

 function PayloadPanel({ value, empty }: { value?: string; empty: string }) {
-    if (!value) return <EmptyState size="compact" title={empty} />;
+    if (!value) return <AdminEmpty size="compact" title={empty} />;
    return (
        <div className="relative">
            <div className="absolute right-3 top-2 z-10">
--- a/web/src/pages/admin/components/channel-model-editor.tsx
+++ b/web/src/pages/admin/components/channel-model-editor.tsx
@@ -1,6 +1,6 @@
 import { useRef, useState } from "react";
 import { Alert, App, Button, Form, Input, Segmented, Switch, Tabs } from "antd";
-import { AppModal } from "@/components/ui/product/app-modal";
+import { AdminModal } from "@/pages/admin/ui/overlays";
 import { FlaskConical, Plus } from "lucide-react";
 import { ModelIconPicker } from "@/components/model-logo";
 import { ModelIcon } from "@/components/model-picker";
@@ -169,7 +169,7 @@ export function ChannelModelEditor({
    };

    return (
-        <AppModal
+        <AdminModal
            open
            title={
                <div className="admin-model-editor-title">
@@ -408,7 +408,7 @@ export function ChannelModelEditor({
                    ]}
                />
            </Form>
-        </AppModal>
+        </AdminModal>
    );
 }

--- a/web/src/pages/admin/components/channel-model-manager.tsx
+++ b/web/src/pages/admin/components/channel-model-manager.tsx
@@ -3,7 +3,7 @@ import { App, Button, Checkbox, Input, Modal, Popconfirm, Select, Space } from "
 import type { ColumnsType } from "antd/es/table";
 import { Plus, RefreshCw, Search, Trash2 } from "lucide-react";

-import { PaginationBar } from "@/components/layout/workspace-page";
+import { PaginationBar } from "@/pages/admin/components/admin-ui";
 import { ModelIcon } from "@/components/model-picker";
 import { modelProtocolDefinition, modelProtocolLabel, type ModelProtocol } from "@/lib/model-protocols";
 import { fetchPluginProviderCatalog } from "@/services/api/plugin-catalog";
--- a/web/src/pages/admin/components/channel-order-dialog.tsx
+++ b/web/src/pages/admin/components/channel-order-dialog.tsx
@@ -1,7 +1,7 @@
 import { App, Button, Modal, Spin } from "antd";
 import { ArrowDown, ArrowUp, GripVertical, ListOrdered } from "lucide-react";
 import { useRef, useState } from "react";
-import { EmptyState } from "@/components/ui/product/empty-state";
+import { AdminEmpty } from "@/pages/admin/components/admin-ui";
 import { getChannelOrder, saveChannelOrder, type ChannelOrderItem } from "@/services/api/channel-order";

 export function moveOrderItem<T extends { id: string }>(items: T[], id: string, target: number): T[] {
@@ -87,7 +87,7 @@ export function ChannelOrderDialog({ channelId, onSaved }: { channelId?: string;
                <Spin spinning={loading}>
                    <div className="max-h-[55vh] overflow-y-auto space-y-2" role="list" aria-label="展示顺序">
                        {!loading && !items.length ? (
-                            <EmptyState size="compact" title="暂无可排序条目" />
+                            <AdminEmpty size="compact" title="暂无可排序条目" />
                        ) : (
                            items.map((item, index) => (
                                <div
--- a/web/src/pages/admin/components/credit-operations-panel.tsx
+++ b/web/src/pages/admin/components/credit-operations-panel.tsx
@@ -3,7 +3,7 @@ import { App, Button, Drawer, Form, Input, InputNumber, Modal, Select } from "an
 import type { ColumnsType } from "antd/es/table";
 import { BadgeCheck, Coins, Plus, RefreshCw, Search, Trash2, Undo2 } from "lucide-react";

-import { PaginationBar } from "@/components/layout/workspace-page";
+import { PaginationBar } from "@/pages/admin/components/admin-ui";
 import { formatCredits } from "@/constant/credits";
 import { useDebouncedValue } from "@/hooks/use-debounced-value";
 import { listAdminUsers, type AdminReferenceData, type AdminUser } from "@/services/api/auth";
--- a/web/src/pages/admin/components/email-settings-panel.tsx
+++ b/web/src/pages/admin/components/email-settings-panel.tsx
@@ -1,6 +1,6 @@
 import { App, Button, Form, Input, InputNumber, Skeleton } from "antd";
-import { Select } from "@/components/ui/base/select";
-import { Switch } from "@/components/ui/base/switch";
+import { Select } from "@/pages/admin/ui/controls";
+import { Switch } from "@/pages/admin/ui/controls";
 import { AlertTriangle, AtSign, BadgeCheck, KeyRound, MailCheck, RefreshCw, RotateCcw, Save, Send, Server } from "lucide-react";
 import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
 import { useBlocker } from "react-router";
--- a/web/src/pages/admin/components/feature-availability-panel.tsx
+++ b/web/src/pages/admin/components/feature-availability-panel.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
 import { App, Button, Skeleton } from "antd";
-import { Switch } from "@/components/ui/base/switch";
+import { Switch } from "@/pages/admin/ui/controls";
 import { AlertTriangle, Clapperboard, Coins, ListChecks, MonitorCog, PlugZap, RadioTower, RefreshCw, ShieldCheck, Sparkles } from "lucide-react";

 import { cn } from "@/lib/utils";
--- a/web/src/pages/admin/components/redemption-codes-panel.tsx
+++ b/web/src/pages/admin/components/redemption-codes-panel.tsx
@@ -3,7 +3,7 @@ import { App, Button, Drawer, Form, Input, InputNumber, Modal, Popconfirm, Selec
 import type { ColumnsType } from "antd/es/table";
 import { Ban, Copy, Eye, KeyRound, RefreshCw, Search, TicketCheck } from "lucide-react";

-import { PaginationBar } from "@/components/layout/workspace-page";
+import { PaginationBar } from "@/pages/admin/components/admin-ui";
 import { formatCredits } from "@/constant/credits";
 import { useDebouncedValue } from "@/hooks/use-debounced-value";
 import { ApiError } from "@/services/api/request";
--- a/web/src/pages/admin/components/storage-resources-panel.tsx
+++ b/web/src/pages/admin/components/storage-resources-panel.tsx
@@ -5,7 +5,7 @@ import { saveAs } from "file-saver";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useSearchParams } from "react-router";

-import { PaginationBar } from "@/components/layout/workspace-page";
+import { PaginationBar } from "@/pages/admin/components/admin-ui";
 import { useDebouncedValue } from "@/hooks/use-debounced-value";
 import { adminResourceFileUrl, deleteAdminResources, downloadAdminResource, getAdminStorageStats, listAdminResources, type AdminStorageResource, type AdminStorageStats } from "@/services/api/admin-storage";
 import { AdminBatchBar, AdminDataTable, AdminFilterChip, AdminStatTile, AdminStatusBadge, AdminTableEmpty } from "./admin-ui";
--- a/web/src/pages/admin/index.tsx
+++ b/web/src/pages/admin/index.tsx
@@ -1,6 +1,8 @@
 import { useUserStore } from "@/stores/use-user-store";
 import { AdminProvider } from "./admin-context";
 import { AdminShell } from "./components/admin-shell";
+import "./theme/admin-tokens.css";
+import "./theme/admin-chrome.css";

 export default function AdminPage() {
    const actor = useUserStore((state) => state.user);
@@ -9,10 +11,10 @@ export default function AdminPage() {
    if (!hydrated) return null;
    if (actor?.role !== "admin") {
        return (
-            <main className="app-workspace-page min-h-dvh px-6 py-10 text-foreground">
-                <div className="mx-auto max-w-3xl rounded-lg border border-border bg-[var(--workspace-surface)] p-6">
-                    <h1 className="text-2xl font-semibold">无权限</h1>
-                    <p className="mt-2 text-sm text-foreground/55">当前账号不是管理员，无法访问后台。</p>
+            <main data-admin-root className="admin-unauthorized">
+                <div className="admin-unauthorized-card">
+                    <h1>无权限</h1>
+                    <p>当前账号不是管理员，无法访问后台。</p>
                </div>
            </main>
        );
--- a/web/src/pages/admin/logical-models/logical-models-page.tsx
+++ b/web/src/pages/admin/logical-models/logical-models-page.tsx
@@ -4,7 +4,7 @@ import type { ColumnsType } from "antd/es/table";
 import { Archive, FlaskConical, GitBranch, Layers3, Pencil, Plus, Search } from "lucide-react";
 import { useDeferredValue, useEffect, useMemo, useRef, useState, type ReactNode } from "react";

-import { PaginationBar } from "@/components/layout/workspace-page";
+import { PaginationBar } from "@/pages/admin/components/admin-ui";
 import { ModelIconPicker, ModelLogo } from "@/components/model-logo";
 import { ChoiceBrowser } from "@/components/choice-browser";
 import { ModelEditorModal } from "@/components/model-editor-modal";
--- a/web/src/pages/admin/logical-models/model-routing-capabilities.tsx
+++ b/web/src/pages/admin/logical-models/model-routing-capabilities.tsx
@@ -1,6 +1,6 @@
 import { Button, InputNumber, Select, Tag } from "antd";
-import { Switch } from "@/components/ui/base/switch";
-import { Callout } from "@/components/ui/product/callout";
+import { Switch } from "@/pages/admin/ui/controls";
+import { Callout } from "@/pages/admin/ui/controls";
 import { RotateCcw } from "lucide-react";
 import type { ReactNode } from "react";

--- a/web/src/pages/admin/logs/logs-page.tsx
+++ b/web/src/pages/admin/logs/logs-page.tsx
@@ -1,12 +1,12 @@
 import { App, Button, Input, Modal, Select } from "antd";
-import { IconButton } from "@/components/ui/base/buttons";
+import { IconButton } from "@/pages/admin/ui/controls";
 import type { ColumnsType } from "antd/es/table";
 import { Download, Eye, Play, Search } from "lucide-react";
 import { saveAs } from "file-saver";
 import { useEffect, useRef, useState } from "react";
 import { useSearchParams } from "react-router";

-import { PaginationBar } from "@/components/layout/workspace-page";
+import { PaginationBar } from "@/pages/admin/components/admin-ui";
 import { MediaPreview } from "@/components/media-preview";
 import { formatCredits } from "@/constant/credits";
 import { useDebouncedValue } from "@/hooks/use-debounced-value";
--- a/web/src/pages/admin/payments/payments-page.tsx
+++ b/web/src/pages/admin/payments/payments-page.tsx
@@ -1,14 +1,14 @@
 import { AlipayCircleFilled, WechatFilled } from "@ant-design/icons";
-import { Callout } from "@/components/ui/product/callout";
+import { Callout } from "@/pages/admin/ui/controls";
 import { App, Button, DatePicker, Descriptions, Drawer, Form, Input, InputNumber, Select, Tabs, Typography } from "antd";
-import { AppDrawer } from "@/components/ui/product/app-drawer";
-import { Switch } from "@/components/ui/base/switch";
+import { AdminDrawer } from "@/pages/admin/ui/overlays";
+import { Switch } from "@/pages/admin/ui/controls";
 import type { ColumnsType } from "antd/es/table";
 import dayjs, { type Dayjs } from "dayjs";
 import { Eye, Plus, RefreshCw, Search, Settings2, XCircle } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";

-import { PaginationBar } from "@/components/layout/workspace-page";
+import { PaginationBar } from "@/pages/admin/components/admin-ui";
 import { formatCredits } from "@/constant/credits";
 import {
    closeAdminPaymentOrder,
@@ -618,7 +618,7 @@ export default function AdminPaymentsPage() {
                ]}
            />

-            <AppDrawer title="支付订单详情" size="min(680px, 100vw)" open={Boolean(selectedOrder)} onClose={() => setSelectedOrder(null)}>
+            <AdminDrawer title="支付订单详情" size="min(680px, 100vw)" open={Boolean(selectedOrder)} onClose={() => setSelectedOrder(null)}>
                {selectedOrder && <Descriptions column={1} bordered size="small" items={[
                    { key: "user", label: "用户", children: selectedOrder.user ? <button type="button" className="admin-table-primary-link" onClick={() => { setSelectedUserId(selectedOrder.user!.id); setSelectedOrder(null); }}>{selectedOrder.user.displayName || selectedOrder.user.username} · @{selectedOrder.user.username}</button> : "用户不存在" },
                    { key: "email", label: "邮箱", children: selectedOrder.user?.email || "未填写邮箱" },
@@ -631,7 +631,7 @@ export default function AdminPaymentsPage() {
                    { key: "status", label: "状态", children: paymentOrderStatus[selectedOrder.status]?.label || selectedOrder.status },
                    ...([{ key: "createdAt", label: "创建时间" }, { key: "expiresAt", label: "过期时间" }, { key: "providerPaidAt", label: "支付时间" }, { key: "creditedAt", label: "入账时间" }, { key: "closedAt", label: "关闭时间" }] as const).map(({ key, label }) => ({ key, label, children: selectedOrder[key] ? formatDateTime(selectedOrder[key]!) : "--" })),
                ]} />}
-            </AppDrawer>
+            </AdminDrawer>
            <AdminUserDetailDrawer userId={selectedUserId} onClose={() => setSelectedUserId(null)} />

            <Drawer
--- a/web/src/pages/admin/plugins/plugins-page.tsx
+++ b/web/src/pages/admin/plugins/plugins-page.tsx
@@ -1,11 +1,11 @@
 import { App, Button, Input, Select } from "antd";
-import { Switch } from "@/components/ui/base/switch";
+import { Switch } from "@/pages/admin/ui/controls";
 import { AlipayCircleFilled, WechatFilled } from "@ant-design/icons";
 import type { ColumnsType } from "antd/es/table";
 import { CloudUpload, PlugZap, RefreshCw, Search, Trash2, UsersRound } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";

-import { PaginationBar } from "@/components/layout/workspace-page";
+import { PaginationBar } from "@/pages/admin/components/admin-ui";
 import "@/lib/plugins/builtin";
 import { EAGLE_PLUGIN_ID } from "@/lib/plugins/builtin/eagle";
 import { RUNNINGHUB_PLUGIN_ID } from "@/lib/plugins/builtin/workflows";
--- a/web/src/pages/admin/settings/appearance-settings-page.tsx
+++ b/web/src/pages/admin/settings/appearance-settings-page.tsx
@@ -1,5 +1,5 @@
 import { App, Button, Form, Input, Skeleton } from "antd";
-import { Switch } from "@/components/ui/base/switch";
+import { Switch } from "@/pages/admin/ui/controls";
 import { Copyright, Globe2, Image as ImageIcon, MonitorPlay, Moon, Palette, RefreshCw, RotateCcw, Save, Search, Sun, Type, Undo2, Upload } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode, type RefObject } from "react";
 import { useBlocker } from "react-router";
--- a/web/src/pages/admin/settings/ark-private-assets-settings-page.tsx
+++ b/web/src/pages/admin/settings/ark-private-assets-settings-page.tsx
@@ -1,5 +1,5 @@
 import { App, Button, Form, Input, Skeleton } from "antd";
-import { Switch } from "@/components/ui/base/switch";
+import { Switch } from "@/pages/admin/ui/controls";
 import { AlertTriangle, CloudUpload, KeyRound, RefreshCw, RotateCcw, Save } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useBlocker } from "react-router";
--- a/web/src/pages/admin/settings/components/skin-theme-editor.tsx
+++ b/web/src/pages/admin/settings/components/skin-theme-editor.tsx
@@ -1,8 +1,5 @@
 import { Button, Form, Input, InputNumber } from "antd";
-import { Select } from "@/components/ui/base/select";
-import { IconButton } from "@/components/ui/base/buttons";
-import { SegmentedControl } from "@/components/ui/base/segmented-control";
-import { Tooltip } from "@/components/ui/base/tooltip";
+import { IconButton, SegmentedControl, Select, Tooltip } from "@/pages/admin/ui/controls";
 import { Check, Copy, LockKeyhole, Moon, Plus, Sparkles, Sun, Trash2 } from "lucide-react";
 import { useMemo, useState } from "react";

--- a/web/src/pages/admin/settings/components/welcome-setting.tsx
+++ b/web/src/pages/admin/settings/components/welcome-setting.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { App, Button } from "antd";
-import { Switch } from "@/components/ui/base/switch";
+import { Switch } from "@/pages/admin/ui/controls";
 import { getAdminFeatureAvailability, updateAdminFeatureAvailability } from "@/services/api/auth";
 import { useUserStore } from "@/stores/use-user-store";

--- a/web/src/pages/admin/settings/libtv-settings-page.tsx
+++ b/web/src/pages/admin/settings/libtv-settings-page.tsx
@@ -1,5 +1,5 @@
 import { App, Button, Input, Skeleton } from "antd";
-import { Switch } from "@/components/ui/base/switch";
+import { Switch } from "@/pages/admin/ui/controls";
 import { AlertTriangle, BadgeCheck, CircleCheck, CloudDownload, KeyRound, RefreshCw, RotateCcw, Save, Server, ShieldCheck, Trash2, Wifi } from "lucide-react";
 import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
 import { useBlocker } from "react-router";
--- a/web/src/pages/admin/settings/response-interception-settings-page.tsx
+++ b/web/src/pages/admin/settings/response-interception-settings-page.tsx
@@ -1,5 +1,5 @@
 import { App, Button, Input, Skeleton } from "antd";
-import { Switch } from "@/components/ui/base/switch";
+import { Switch } from "@/pages/admin/ui/controls";
 import { AlertTriangle, ArrowDown, ArrowUp, BadgeCheck, Eye, ListOrdered, Plus, RefreshCw, RotateCcw, Save, Search, ShieldAlert, ShieldCheck, Trash2 } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useBlocker } from "react-router";
--- a/web/src/pages/admin/settings/storage-settings-page.tsx
+++ b/web/src/pages/admin/settings/storage-settings-page.tsx
@@ -1,6 +1,6 @@
 import { App, Button, Form, Input, Skeleton } from "antd";
-import { Select } from "@/components/ui/base/select";
-import { Switch } from "@/components/ui/base/switch";
+import { Select } from "@/pages/admin/ui/controls";
+import { Switch } from "@/pages/admin/ui/controls";
 import { AlertTriangle, BadgeCheck, Check, Cloud, Database, Globe2, HardDrive, KeyRound, LocateFixed, RefreshCw, RotateCcw, Save, Server, ShieldCheck, Wifi } from "lucide-react";
 import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
 import { useBlocker } from "react-router";
--- a/web/src/pages/admin/storyboard-prompts/storyboard-prompts-page.tsx
+++ b/web/src/pages/admin/storyboard-prompts/storyboard-prompts-page.tsx
@@ -1,13 +1,11 @@
 import { App, Button, Form, Input, Popconfirm, Select, Tabs } from "antd";
-import { StatusBadge } from "@/components/ui/base/badges";
-import { Callout } from "@/components/ui/product/callout";
+import { Callout } from "@/pages/admin/ui/controls";
 import type { ColumnsType } from "antd/es/table";
 import { Braces, Copy, FileJson, FileText, Plus, Power, Search, ShieldCheck, Trash2 } from "lucide-react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useSearchParams } from "react-router";

-import { PaginationBar } from "@/components/layout/workspace-page";
-import { AppDrawer } from "@/components/ui/product/app-drawer/app-drawer";
+import { AdminDrawer } from "@/pages/admin/ui/overlays";
 import { PromptCodeEditor, type PromptCodeEditorHandle } from "@/components/prompt/prompt-code-editor";
 import {
    createAdminPromptTemplate,
@@ -18,7 +16,7 @@ import {
    type PromptTemplate,
 } from "@/services/api/auth";
 import { AdminPageFrame } from "../components/admin-shell";
-import { AdminDataTable, AdminRowActions, AdminStatusBadge, AdminTableEmpty } from "../components/admin-ui";
+import { AdminDataTable, AdminRowActions, AdminStatusBadge, AdminTableEmpty, PaginationBar } from "../components/admin-ui";

 type PromptFormValues = { name: string; enabled?: boolean };
 type DraftBaseline = { operation: string; name: string; enabled: boolean; content: string };
@@ -188,7 +186,7 @@ export default function StoryboardPromptsPage() {
                footer={<PaginationBar alwaysShow current={page} pageSize={pageSize} total={filtered.length} onChange={(nextPage, nextPageSize) => { setPage(nextPageSize !== pageSize ? 1 : nextPage); setPageSize(nextPageSize); }} />}
            />

-            <AppDrawer
+            <AdminDrawer
                flush
                title={baseTemplate ? `基于 v${baseTemplate.version} 新建版本` : "新建提示词版本"}
                open={drawerOpen}
@@ -220,7 +218,7 @@ export default function StoryboardPromptsPage() {
                    <div className="grid min-h-0 flex-1 gap-0 lg:grid-cols-3">
                        <section className="flex min-h-0 flex-col border-b border-border p-4 lg:col-span-2 lg:border-b-0 lg:border-r">
                            <div className="mb-3 flex shrink-0 flex-wrap items-start justify-between gap-3">
-                                <div className="flex flex-wrap items-center gap-2"><h3 className="text-sm font-semibold">模板内容</h3>{dirty ? <StatusBadge variant="filled" tone="warning" label="未保存" /> : null}</div>
+                                <div className="flex flex-wrap items-center gap-2"><h3 className="text-sm font-semibold">模板内容</h3>{dirty ? <AdminStatusBadge variant="filled" tone="warning" label="未保存" /> : null}</div>
                                <div className="flex flex-wrap justify-end gap-2">
                                    {selectedDefinition?.variables.map((variable) => (
                                        <Button key={variable.placeholder} size="small" icon={<Braces className="size-3.5" />} onClick={() => editorRef.current?.insertText(variable.placeholder)}>
@@ -253,7 +251,7 @@ export default function StoryboardPromptsPage() {
                        </aside>
                    </div>
                </Form>
-            </AppDrawer>
+            </AdminDrawer>
        </AdminPageFrame>
    );
 }
--- a/web/src/pages/admin/theme/admin-ant-theme.ts
+++ b/web/src/pages/admin/theme/admin-ant-theme.ts
@@ -0,0 +1,156 @@
+import type { ThemeConfig } from "antd";
+import { theme as antdTheme } from "antd";
+
+/** Isolated Ant Design theme for the admin console. Does not read product skins. */
+export function getIsolatedAdminAntTheme(dark: boolean): ThemeConfig {
+    const text = dark ? "#f5f5f5" : "#111111";
+    const textSecondary = dark ? "#c4c4c4" : "#525252";
+    const canvas = dark ? "#0f0f0f" : "#f5f5f5";
+    const surface = dark ? "#181818" : "#ffffff";
+    const surfaceMuted = dark ? "#222222" : "#f6f6f6";
+    const border = dark ? "rgba(245, 245, 245, 0.12)" : "rgba(17, 17, 17, 0.12)";
+    const primary = dark ? "#f5f5f5" : "#111111";
+    const primaryFg = dark ? "#0f0f0f" : "#ffffff";
+    const hover = dark ? "#ffffff" : "#2a2a2a";
+    const active = dark ? "#d4d4d4" : "#404040";
+    const danger = dark ? "#f87171" : "#dc2626";
+    const success = dark ? "#4ade80" : "#15803d";
+    const warning = dark ? "#fbbf24" : "#b45309";
+    const info = dark ? "#60a5fa" : "#2563eb";
+    const switchOn = dark ? "#22c55e" : "#16a34a";
+    const switchOff = dark ? "#3f4b5a" : "#cbd5e1";
+
+    return {
+        algorithm: dark ? antdTheme.darkAlgorithm : antdTheme.defaultAlgorithm,
+        cssVar: { key: `admin-console-${dark ? "dark" : "light"}` },
+        token: {
+            fontFamily: 'ui-sans-serif, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", system-ui, sans-serif',
+            fontSize: 13,
+            fontSizeSM: 12,
+            borderRadius: 6,
+            borderRadiusLG: 8,
+            borderRadiusSM: 4,
+            controlHeight: 32,
+            controlHeightSM: 28,
+            controlHeightLG: 36,
+            lineWidth: 1,
+            colorPrimary: primary,
+            colorPrimaryHover: hover,
+            colorPrimaryActive: active,
+            colorText: text,
+            colorTextSecondary: textSecondary,
+            colorTextTertiary: textSecondary,
+            colorBgBase: canvas,
+            colorBgContainer: surface,
+            colorBgElevated: surface,
+            colorBgLayout: canvas,
+            colorBorder: border,
+            colorBorderSecondary: border,
+            colorSuccess: success,
+            colorWarning: warning,
+            colorError: danger,
+            colorInfo: info,
+            colorLink: text,
+            colorLinkHover: hover,
+            boxShadow: "none",
+            boxShadowSecondary: dark ? "0 22px 56px rgba(0, 0, 0, 0.48)" : "0 16px 40px rgba(15, 23, 42, 0.16)",
+            motionDurationFast: "0.12s",
+            motionDurationMid: "0.12s",
+            motionDurationSlow: "0.18s",
+        },
+        components: {
+            Button: {
+                borderRadius: 6,
+                fontWeight: 550,
+                paddingInline: 12,
+                paddingInlineSM: 8,
+                primaryShadow: "none",
+                dangerShadow: "none",
+                defaultBg: surface,
+                defaultColor: text,
+                defaultBorderColor: border,
+                defaultHoverBg: surfaceMuted,
+                defaultHoverColor: text,
+                defaultHoverBorderColor: border,
+                primaryColor: primaryFg,
+            },
+            Input: {
+                borderRadius: 6,
+                activeShadow: "none",
+                paddingInline: 10,
+                activeBg: surface,
+                hoverBg: surface,
+            },
+            InputNumber: {
+                borderRadius: 6,
+                activeShadow: "none",
+                activeBg: surface,
+                hoverBg: surface,
+            },
+            Select: {
+                borderRadius: 6,
+                optionPadding: "7px 10px",
+                optionSelectedBg: surfaceMuted,
+                optionActiveBg: surfaceMuted,
+            },
+            Switch: {
+                colorPrimary: switchOn,
+                colorPrimaryHover: switchOn,
+                colorTextQuaternary: switchOff,
+                colorTextTertiary: switchOff,
+            },
+            Table: {
+                headerBg: surfaceMuted,
+                headerColor: textSecondary,
+                headerSplitColor: "transparent",
+                borderColor: border,
+                rowHoverBg: surfaceMuted,
+                cellPaddingBlock: 6,
+                cellPaddingBlockMD: 6,
+                cellPaddingBlockSM: 4,
+                cellPaddingInline: 12,
+                cellPaddingInlineSM: 8,
+            },
+            Tabs: {
+                horizontalItemPadding: "8px 0",
+                itemColor: textSecondary,
+                itemSelectedColor: text,
+                inkBarColor: text,
+            },
+            Drawer: {
+                colorBgElevated: surface,
+                paddingLG: 16,
+            },
+            Modal: {
+                borderRadiusLG: 8,
+                contentBg: surface,
+                headerBg: surface,
+            },
+            Tooltip: {
+                borderRadius: 6,
+                colorBgSpotlight: dark ? "#f5f5f5" : "#111111",
+                colorTextLightSolid: dark ? "#0f0f0f" : "#ffffff",
+            },
+            Dropdown: {
+                borderRadiusLG: 8,
+                controlItemBgHover: surfaceMuted,
+                paddingBlock: 4,
+            },
+            Form: {
+                itemMarginBottom: 14,
+            },
+            Segmented: {
+                itemSelectedBg: surface,
+                trackBg: surfaceMuted,
+            },
+            Card: {
+                boxShadow: "none",
+                boxShadowTertiary: "none",
+            },
+            Message: {
+                borderRadiusLG: 8,
+                contentPadding: "8px 14px",
+            },
+        },
+    };
+}
--- a/web/src/pages/admin/theme/admin-chrome.css
+++ b/web/src/pages/admin/theme/admin-chrome.css
@@ -0,0 +1,978 @@
+/* Admin chrome: one layout language for every admin page.
+ * Loaded after admin-ui.css so these rules win over per-page leftovers. */
+
+[data-admin-root] {
+    background: var(--admin-canvas);
+    color: var(--admin-text);
+}
+
+[data-admin-root] *,
+[data-admin-root] *::before,
+[data-admin-root] *::after {
+    box-sizing: border-box;
+}
+
+[data-admin-root] .admin-shell {
+    position: relative;
+    background: var(--admin-canvas);
+}
+
+[data-admin-root] .admin-sidebar {
+    width: var(--admin-sidebar-width);
+    flex-basis: var(--admin-sidebar-width);
+    background: var(--admin-sidebar);
+    border-right: 1px solid var(--admin-border);
+    box-shadow: none;
+    border-radius: 0 !important;
+}
+
+[data-admin-root] .admin-sidebar.is-collapsed {
+    width: var(--admin-sidebar-collapsed);
+    flex-basis: var(--admin-sidebar-collapsed);
+}
+
+[data-admin-root] .admin-sidebar-identity {
+    display: flex;
+    height: 56px;
+    align-items: center;
+    padding: 0 12px;
+    border-bottom: 1px solid var(--admin-border);
+}
+
+[data-admin-root] .admin-sidebar-brand-button {
+    display: flex;
+    min-width: 0;
+    width: 100%;
+    align-items: center;
+    gap: 10px;
+    padding: 4px;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    text-align: left;
+}
+
+[data-admin-root] .admin-sidebar-brand-button.is-collapsed {
+    justify-content: center;
+}
+
+[data-admin-root] .admin-sidebar-brand-mark {
+    width: 28px;
+    height: 28px;
+    border-radius: var(--admin-radius);
+    box-shadow: none !important;
+}
+
+[data-admin-root] .admin-sidebar-brand-title {
+    color: var(--admin-text);
+    font-size: 13px;
+    font-weight: 650;
+    letter-spacing: -0.01em;
+    line-height: 16px;
+}
+
+[data-admin-root] .admin-sidebar-brand-version {
+    color: var(--admin-text-muted);
+    font-size: 11px;
+    font-weight: 500;
+    line-height: 14px;
+}
+
+[data-admin-root] .admin-sidebar-nav {
+    padding: 10px 8px 16px;
+}
+
+[data-admin-root] .admin-nav-group + .admin-nav-group {
+    margin-top: 14px;
+}
+
+[data-admin-root] .admin-nav-group-label,
+[data-admin-root] .admin-nav-group-label span {
+    display: block;
+    margin: 0 0 4px;
+    padding: 0 8px;
+    color: var(--admin-text-muted) !important;
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    line-height: 16px;
+    text-transform: none;
+}
+
+[data-admin-root] .admin-nav-group-label::before,
+[data-admin-root] .admin-nav-group-label::after {
+    content: none !important;
+    display: none !important;
+    width: 0 !important;
+    height: 0 !important;
+    min-width: 0 !important;
+    flex: 0 !important;
+    border: 0 !important;
+    background: none !important;
+}
+
+[data-admin-root] .admin-nav-group-items,
+[data-admin-root] .admin-nav-group-items:not(.is-collapsed) {
+    margin-left: 0 !important;
+    padding-left: 0 !important;
+    border: 0 !important;
+    border-left: 0 !important;
+}
+
+[data-admin-root] .admin-nav-collapsed-separator {
+    height: 1px;
+    margin: 8px 10px;
+    background: var(--admin-divider);
+}
+
+[data-admin-root] .admin-nav-link {
+    position: relative;
+    display: flex;
+    height: 32px;
+    align-items: center;
+    gap: 10px;
+    padding: 0 8px;
+    border: 0;
+    border-radius: var(--admin-radius);
+    color: var(--admin-text-secondary);
+    font-size: 13px;
+    font-weight: 500;
+    line-height: 16px;
+    text-decoration: none;
+    transition: background-color var(--admin-motion), color var(--admin-motion);
+}
+
+[data-admin-root] .admin-nav-link.is-collapsed {
+    justify-content: center;
+    padding: 0;
+}
+
+[data-admin-root] .admin-nav-link:hover {
+    background: var(--admin-nav-hover);
+    color: var(--admin-text);
+}
+
+[data-admin-root] .admin-nav-link.is-active {
+    background: var(--admin-nav-active);
+    border: 0;
+    box-shadow: none;
+    color: var(--admin-text);
+    font-weight: 650;
+}
+
+[data-admin-root] .admin-nav-link.is-active::before,
+[data-admin-root] .admin-sidebar.is-collapsed .admin-nav-link.is-active::before {
+    content: none !important;
+    display: none !important;
+}
+
+[data-admin-root] .admin-nav-link svg {
+    width: 15px;
+    height: 15px;
+    flex: 0 0 auto;
+    color: currentColor;
+    stroke-width: 1.75;
+}
+
+[data-admin-root] .admin-nav-link:focus-visible,
+[data-admin-root] .admin-icon-button:focus-visible,
+[data-admin-root] .admin-sidebar-edge-toggle:focus-visible {
+    outline: 2px solid var(--admin-focus);
+    outline-offset: 1px;
+}
+
+[data-admin-root] .admin-sidebar-footer {
+    padding: 8px;
+    border-top: 1px solid var(--admin-border);
+    background: var(--admin-sidebar);
+}
+
+[data-admin-root] .admin-sidebar-edge-toggle {
+    position: absolute;
+    top: 50%;
+    left: calc(var(--admin-sidebar-width) - 11px);
+    z-index: 4;
+    display: grid;
+    width: 22px;
+    height: 36px;
+    place-items: center;
+    border: 1px solid var(--admin-border);
+    border-radius: 999px;
+    background: var(--admin-surface);
+    color: var(--admin-text-muted);
+    transform: translateY(-50%);
+}
+
+[data-admin-root] .admin-sidebar-edge-toggle.is-collapsed {
+    left: calc(var(--admin-sidebar-collapsed) - 11px);
+}
+
+[data-admin-root] .admin-sidebar-edge-toggle:hover {
+    color: var(--admin-text);
+}
+
+[data-admin-root] .admin-page-root,
+[data-admin-root] .admin-page-root > div {
+    height: 100%;
+    min-height: 0;
+    background: var(--admin-canvas);
+}
+
+[data-admin-root] .admin-page-frame {
+    display: flex;
+    height: 100%;
+    min-height: 0;
+    flex-direction: column;
+    padding: 16px 20px 16px;
+}
+
+[data-admin-root] .admin-page-frame-scrollable {
+    overflow: auto;
+}
+
+[data-admin-root] .admin-page-header {
+    gap: 12px !important;
+    margin-bottom: 12px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid var(--admin-border);
+}
+
+[data-admin-root] .admin-page-location {
+    display: flex;
+    min-width: 0;
+    align-items: baseline;
+    gap: 6px;
+}
+
+[data-admin-root] .admin-page-location-section {
+    color: var(--admin-text-muted);
+    font-size: 12px;
+    font-weight: 500;
+    text-decoration: none;
+}
+
+[data-admin-root] .admin-page-location-section:hover {
+    color: var(--admin-text);
+}
+
+[data-admin-root] .admin-page-location-separator {
+    color: var(--admin-text-placeholder);
+}
+
+[data-admin-root] .admin-page-title {
+    color: var(--admin-text);
+    font-size: 18px;
+    font-weight: 650;
+    letter-spacing: -0.02em;
+    line-height: 24px;
+}
+
+[data-admin-root] .admin-page-description {
+    margin: 4px 0 0;
+    color: var(--admin-text-muted);
+    font-size: 12px;
+    line-height: 18px;
+}
+
+[data-admin-root] .admin-page-actions {
+    gap: 8px !important;
+}
+
+[data-admin-root] .admin-icon-button,
+[data-admin-root] .admin-page-theme-toggle {
+    display: grid;
+    width: 32px;
+    height: 32px;
+    place-items: center;
+    border: 1px solid var(--admin-border);
+    border-radius: var(--admin-radius);
+    background: var(--admin-surface);
+    color: var(--admin-text-secondary);
+}
+
+[data-admin-root] .admin-icon-button:hover,
+[data-admin-root] .admin-page-theme-toggle:hover {
+    background: var(--admin-surface-2);
+    color: var(--admin-text);
+}
+
+[data-admin-root] .admin-mobile-navigation {
+    height: 48px;
+    padding: 0 12px;
+    border-bottom: 1px solid var(--admin-border);
+    background: var(--admin-sidebar);
+}
+
+[data-admin-root] .admin-mobile-navigation-trigger,
+[data-admin-root] .admin-mobile-navigation-action {
+    display: flex;
+    height: 36px;
+    align-items: center;
+    gap: 8px;
+    padding: 0 8px;
+    border: 1px solid var(--admin-border);
+    border-radius: var(--admin-radius);
+    background: var(--admin-surface);
+    color: var(--admin-text);
+}
+
+[data-admin-root] .admin-mobile-navigation-eyebrow {
+    display: block;
+    color: var(--admin-text-muted);
+    font-size: 10px;
+    font-weight: 650;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+}
+
+[data-admin-root] .admin-mobile-navigation-current-label {
+    display: block;
+    font-size: 13px;
+    font-weight: 650;
+}
+
+[data-admin-root] .admin-data-table {
+    display: flex;
+    min-height: 0;
+    flex: 1;
+    flex-direction: column;
+}
+
+[data-admin-root] .admin-list-toolbar {
+    display: flex;
+    min-height: 32px;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    margin: 0 0 10px;
+    padding: 0;
+}
+
+[data-admin-root] .admin-list-toolbar-main,
+[data-admin-root] .admin-list-toolbar-actions,
+[data-admin-root] .admin-list-toolbar-filters {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+}
+
+[data-admin-root] .admin-list-toolbar .ant-input-affix-wrapper,
+[data-admin-root] .admin-list-toolbar .ant-select-selector,
+[data-admin-root] .admin-list-toolbar .ant-btn,
+[data-admin-root] .admin-page-actions .ant-btn {
+    height: var(--admin-control-h) !important;
+    border-radius: var(--admin-radius) !important;
+}
+
+[data-admin-root] .admin-filter-chip {
+    display: inline-flex;
+    height: 28px;
+    align-items: center;
+    gap: 6px;
+    padding: 0 8px;
+    border: 1px solid var(--admin-border);
+    border-radius: 999px;
+    background: var(--admin-surface);
+    color: var(--admin-text-secondary);
+    font-size: 12px;
+}
+
+[data-admin-root] .admin-table-frame {
+    display: flex;
+    min-height: 0;
+    flex: 1;
+    flex-direction: column;
+    overflow: hidden;
+    border: 1px solid var(--admin-border);
+    border-radius: var(--admin-radius-lg);
+    background: var(--admin-surface);
+    box-shadow: none;
+}
+
+[data-admin-root] .admin-table-surface,
+[data-admin-root] .admin-table-surface .ant-table-wrapper,
+[data-admin-root] .admin-table-surface .ant-table,
+[data-admin-root] .admin-table-surface .ant-table-container {
+    background: var(--admin-surface) !important;
+}
+
+[data-admin-root] .admin-table-scroll {
+    min-height: 0;
+    flex: 1;
+    overflow: auto;
+}
+
+[data-admin-root] .admin-table-surface .ant-table-thead > tr > th {
+    height: var(--admin-head-h);
+    padding: 0 12px !important;
+    border-bottom: 1px solid var(--admin-border) !important;
+    background: var(--admin-surface-2) !important;
+    color: var(--admin-text-muted) !important;
+    font-size: 11px !important;
+    font-weight: 650 !important;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+}
+
+[data-admin-root] .admin-table-surface .ant-table-tbody > tr > td {
+    height: var(--admin-row-h);
+    padding: 6px 12px !important;
+    border-bottom: 1px solid var(--admin-row-border) !important;
+    background: transparent !important;
+    color: var(--admin-text) !important;
+    font-size: 13px;
+    font-variant-numeric: tabular-nums;
+}
+
+[data-admin-root] .admin-table-surface .ant-table-tbody > tr:hover > td {
+    background: var(--admin-row-hover) !important;
+}
+
+[data-admin-root] .admin-table-pagination {
+    display: flex;
+    min-height: 44px;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 0 10px;
+    border-top: 1px solid var(--admin-border);
+    background: var(--admin-surface);
+}
+
+[data-admin-root] .admin-pagination-bar {
+    display: flex;
+    min-height: 36px;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+    margin: 0;
+    padding: 0;
+}
+
+[data-admin-root] .admin-pagination-total {
+    color: var(--admin-text-muted);
+    font-size: 12px;
+    font-variant-numeric: tabular-nums;
+}
+
+[data-admin-root] .admin-pagination-pages {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+}
+
+[data-admin-root] .admin-pagination-btn {
+    display: grid;
+    min-width: 28px;
+    height: 28px;
+    place-items: center;
+    padding: 0 6px;
+    border: 0;
+    border-radius: var(--admin-radius-sm);
+    background: transparent;
+    color: var(--admin-text-secondary);
+    font-size: 12px;
+}
+
+[data-admin-root] .admin-pagination-btn:hover:not(:disabled) {
+    background: var(--admin-nav-hover);
+    color: var(--admin-text);
+}
+
+[data-admin-root] .admin-pagination-btn.is-active {
+    background: var(--admin-accent);
+    color: var(--admin-accent-fg);
+    font-weight: 650;
+}
+
+[data-admin-root] .admin-pagination-btn:disabled {
+    opacity: 0.38;
+}
+
+[data-admin-root] .admin-batch-bar {
+    margin: 0 0 8px;
+    border: 1px solid var(--admin-border);
+    border-radius: var(--admin-radius);
+    background: var(--admin-surface);
+    box-shadow: none;
+    backdrop-filter: none;
+}
+
+[data-admin-root] .admin-status-badge {
+    display: inline-flex;
+    height: 22px;
+    align-items: center;
+    gap: 6px;
+    padding: 0 8px;
+    border: 1px solid var(--admin-border);
+    border-radius: 999px;
+    background: var(--admin-surface-2);
+    color: var(--admin-text-secondary);
+    font-size: 11px;
+    font-weight: 650;
+    line-height: 1;
+    white-space: nowrap;
+}
+
+[data-admin-root] .admin-status-badge::before {
+    width: 6px;
+    height: 6px;
+    border-radius: 999px;
+    background: currentColor;
+    content: "";
+}
+
+[data-admin-root] .admin-status-badge.is-success {
+    border-color: color-mix(in srgb, var(--admin-status-success) 28%, var(--admin-border));
+    color: var(--admin-status-success);
+}
+
+[data-admin-root] .admin-status-badge.is-warning {
+    border-color: color-mix(in srgb, var(--admin-status-warning) 28%, var(--admin-border));
+    color: var(--admin-status-warning);
+}
+
+[data-admin-root] .admin-status-badge.is-error {
+    border-color: color-mix(in srgb, var(--admin-status-error) 28%, var(--admin-border));
+    color: var(--admin-status-error);
+}
+
+[data-admin-root] .admin-status-badge.is-info {
+    border-color: color-mix(in srgb, var(--admin-status-info) 28%, var(--admin-border));
+    color: var(--admin-status-info);
+}
+
+[data-admin-root] .admin-empty {
+    display: flex;
+    min-height: 160px;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    padding: 24px;
+    color: var(--admin-text-muted);
+    text-align: center;
+}
+
+[data-admin-root] .admin-empty h3 {
+    margin: 0;
+    color: var(--admin-text);
+    font-size: 14px;
+    font-weight: 650;
+}
+
+[data-admin-root] .admin-empty p {
+    margin: 0;
+    font-size: 12px;
+    line-height: 18px;
+}
+
+[data-admin-root] .admin-stat-tile {
+    min-height: 84px;
+    padding: 12px 14px;
+    border: 1px solid var(--admin-border);
+    border-radius: var(--admin-radius-lg);
+    background: var(--admin-surface);
+    box-shadow: none;
+}
+
+[data-admin-root] .admin-stat-tile-label {
+    color: var(--admin-text-muted);
+    font-size: 11px;
+    font-weight: 650;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+}
+
+[data-admin-root] .admin-stat-tile-value {
+    margin-top: 6px;
+    color: var(--admin-text);
+    font-size: 22px;
+    font-weight: 650;
+    font-variant-numeric: tabular-nums;
+    letter-spacing: -0.03em;
+    line-height: 28px;
+}
+
+[data-admin-root] .admin-stat-tile-detail {
+    margin-top: 6px;
+    color: var(--admin-text-muted);
+    font-size: 12px;
+}
+
+[data-admin-root] .admin-settings-stack {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+[data-admin-root] .admin-settings-section {
+    overflow: hidden;
+    border: 1px solid var(--admin-border);
+    border-radius: var(--admin-radius-lg);
+    background: var(--admin-surface);
+    box-shadow: none;
+}
+
+[data-admin-root] .admin-settings-section-summary,
+[data-admin-root] .admin-settings-section-content,
+[data-admin-root] .admin-settings-section-footer {
+    background: var(--admin-surface);
+}
+
+[data-admin-root] .admin-settings-section-summary {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 12px 14px;
+    border-bottom: 1px solid var(--admin-border);
+}
+
+[data-admin-root] .admin-settings-section-summary h2 {
+    margin: 0;
+    color: var(--admin-text);
+    font-size: 13px;
+    font-weight: 650;
+    letter-spacing: -0.01em;
+}
+
+[data-admin-root] .admin-settings-section-summary p {
+    margin: 3px 0 0;
+    color: var(--admin-text-muted);
+    font-size: 12px;
+    line-height: 18px;
+}
+
+[data-admin-root] .admin-settings-section-content {
+    padding: 4px 0;
+}
+
+[data-admin-root] :is(
+    .admin-feature-command-bar,
+    .admin-appearance-command-bar,
+    .admin-access-command-bar,
+    .admin-email-command-bar,
+    .admin-storage-command-bar,
+    .admin-ark-command-bar,
+    .admin-intercept-command-bar,
+    .admin-drawing-command-bar,
+    .admin-runtime-policy-command-bar,
+    .admin-third-party-command-bar
+) {
+    position: sticky;
+    top: 0;
+    z-index: 8;
+    display: flex;
+    min-height: 44px !important;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    margin: 0;
+    border: 0 !important;
+    border-bottom: 1px solid var(--admin-border) !important;
+    border-radius: 0 !important;
+    background: var(--admin-canvas) !important;
+    padding: 8px 0 10px !important;
+    box-shadow: none !important;
+    backdrop-filter: none !important;
+}
+
+[data-admin-root] :is(
+    .admin-feature-command-bar,
+    .admin-appearance-command-bar,
+    .admin-access-command-bar,
+    .admin-email-command-bar,
+    .admin-storage-command-bar,
+    .admin-ark-command-bar,
+    .admin-intercept-command-bar,
+    .admin-drawing-command-bar,
+    .admin-runtime-policy-command-bar,
+    .admin-third-party-command-bar
+).is-dirty {
+    border-bottom-color: color-mix(in srgb, var(--admin-status-warning) 55%, var(--admin-border)) !important;
+    background: color-mix(in srgb, var(--admin-status-warning) 8%, var(--admin-canvas)) !important;
+}
+
+[data-admin-root] :is(
+    .admin-feature-command-copy strong,
+    .admin-appearance-command-copy strong
+) {
+    color: var(--admin-text);
+    font-size: 12px;
+    font-weight: 650;
+}
+
+[data-admin-root] .admin-feature-board {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+[data-admin-root] .admin-feature-domain {
+    overflow: hidden;
+    border: 1px solid var(--admin-border);
+    border-radius: var(--admin-radius-lg);
+    background: var(--admin-surface);
+    box-shadow: none;
+}
+
+[data-admin-root] .admin-feature-domain-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 12px 14px;
+    border-bottom: 1px solid var(--admin-border);
+    background: var(--admin-surface);
+}
+
+[data-admin-root] .admin-feature-domain-header h2 {
+    margin: 0;
+    color: var(--admin-text);
+    font-size: 13px;
+    font-weight: 650;
+}
+
+[data-admin-root] .admin-feature-domain-header p {
+    margin: 2px 0 0;
+    color: var(--admin-text-muted);
+    font-size: 12px;
+}
+
+[data-admin-root] .admin-feature-domain-icon,
+[data-admin-root] .admin-feature-board-row-icon {
+    display: grid;
+    width: 28px;
+    height: 28px;
+    place-items: center;
+    border: 1px solid var(--admin-border);
+    border-radius: var(--admin-radius);
+    background: var(--admin-surface-2);
+    color: var(--admin-text-secondary);
+}
+
+[data-admin-root] .admin-feature-board-row {
+    display: flex;
+    min-height: 52px;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    padding: 10px 14px;
+    border-bottom: 1px solid var(--admin-row-border);
+    background: transparent;
+}
+
+[data-admin-root] .admin-feature-board-row:last-child {
+    border-bottom: 0;
+}
+
+[data-admin-root] .admin-feature-board-row-copy {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    gap: 10px;
+}
+
+[data-admin-root] .admin-feature-board-row-name {
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+    gap: 2px;
+}
+
+[data-admin-root] .admin-feature-board-row-name small {
+    color: var(--admin-text-muted);
+    font-size: 10px;
+    font-weight: 650;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+}
+
+[data-admin-root] .admin-feature-board-row-name strong {
+    color: var(--admin-text);
+    font-size: 13px;
+    font-weight: 650;
+}
+
+[data-admin-root] .admin-feature-board-row-name span {
+    color: var(--admin-text-muted);
+    font-size: 12px;
+    line-height: 18px;
+}
+
+[data-admin-root] .admin-feature-board-row-control {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    gap: 10px;
+    color: var(--admin-text-muted);
+    font-size: 12px;
+}
+
+[data-admin-root] .admin-feature-board-source-selector {
+    display: inline-flex;
+    padding: 2px;
+    border: 1px solid var(--admin-border);
+    border-radius: var(--admin-radius);
+    background: var(--admin-surface-2);
+}
+
+[data-admin-root] .admin-feature-board-source-selector button {
+    height: 28px;
+    padding: 0 10px;
+    border: 0;
+    border-radius: var(--admin-radius-sm);
+    background: transparent;
+    color: var(--admin-text-secondary);
+    font-size: 12px;
+    font-weight: 550;
+}
+
+[data-admin-root] .admin-feature-board-source-selector button.is-selected {
+    background: var(--admin-surface);
+    color: var(--admin-text);
+    box-shadow: 0 0 0 1px var(--admin-border);
+}
+
+[data-admin-root] .admin-callout {
+    display: flex;
+    gap: 10px;
+    padding: 10px 12px;
+    border: 1px solid var(--admin-border);
+    border-radius: var(--admin-radius);
+    background: var(--admin-surface-2);
+    color: var(--admin-text-secondary);
+}
+
+[data-admin-root] .admin-callout.is-warning {
+    border-color: color-mix(in srgb, var(--admin-status-warning) 32%, var(--admin-border));
+    background: color-mix(in srgb, var(--admin-status-warning) 8%, var(--admin-surface));
+}
+
+[data-admin-root] .admin-callout.is-error {
+    border-color: color-mix(in srgb, var(--admin-status-error) 32%, var(--admin-border));
+    background: color-mix(in srgb, var(--admin-status-error) 8%, var(--admin-surface));
+}
+
+[data-admin-root] .admin-callout-title {
+    color: var(--admin-text);
+    font-size: 13px;
+    font-weight: 650;
+}
+
+[data-admin-root] .admin-callout-body {
+    margin-top: 2px;
+    font-size: 12px;
+    line-height: 18px;
+}
+
+[data-admin-root] .ant-btn {
+    font-weight: 550;
+}
+
+[data-admin-root] .ant-switch.ant-switch-checked,
+.admin-overlays .ant-switch.ant-switch-checked,
+.admin-drawer .ant-switch.ant-switch-checked,
+.admin-modal-root .ant-switch.ant-switch-checked {
+    background: var(--admin-switch-on) !important;
+}
+
+[data-admin-root] .ant-form-item {
+    margin-bottom: 14px;
+}
+
+[data-admin-root] .ant-form-item-label > label {
+    color: var(--admin-text-secondary);
+    font-size: 12px;
+    font-weight: 650;
+}
+
+[data-admin-root] .admin-row-actions {
+    display: inline-flex;
+    justify-content: center;
+    gap: 4px;
+}
+
+[data-admin-root] .admin-unauthorized {
+    display: grid;
+    min-height: 100%;
+    place-items: center;
+    padding: 48px 20px;
+    background: var(--admin-canvas);
+}
+
+[data-admin-root] .admin-unauthorized-card {
+    width: min(440px, 100%);
+    padding: 20px;
+    border: 1px solid var(--admin-border);
+    border-radius: var(--admin-radius-lg);
+    background: var(--admin-surface);
+}
+
+[data-admin-root] .admin-unauthorized-card h1 {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 650;
+}
+
+[data-admin-root] .admin-unauthorized-card p {
+    margin: 8px 0 0;
+    color: var(--admin-text-muted);
+    font-size: 13px;
+}
+
+.admin-drawer .ant-drawer-content,
+.admin-secondary-drawer .ant-drawer-content,
+.admin-modal-root .ant-modal-content,
+.admin-channel-modal-root .ant-modal-content {
+    background: var(--admin-surface) !important;
+    color: var(--admin-text) !important;
+    box-shadow: var(--admin-shadow-overlay);
+}
+
+.admin-drawer .ant-drawer-header,
+.admin-drawer .ant-drawer-footer,
+.admin-drawer .ant-drawer-body,
+.admin-secondary-drawer .ant-drawer-header,
+.admin-secondary-drawer .ant-drawer-footer,
+.admin-secondary-drawer .ant-drawer-body,
+.admin-modal-root .ant-modal-header,
+.admin-modal-root .ant-modal-body,
+.admin-modal-root .ant-modal-footer,
+.admin-channel-modal-root .ant-modal-header,
+.admin-channel-modal-root .ant-modal-body,
+.admin-channel-modal-root .ant-modal-footer {
+    background: var(--admin-surface) !important;
+    color: var(--admin-text);
+}
+
+.admin-drawer .ant-drawer-header,
+.admin-secondary-drawer .ant-drawer-header,
+.admin-modal-root .ant-modal-header,
+.admin-channel-modal-root .ant-modal-header {
+    border-bottom: 1px solid var(--admin-border);
+}
+
+.admin-drawer .ant-drawer-footer,
+.admin-secondary-drawer .ant-drawer-footer,
+.admin-modal-root .ant-modal-footer,
+.admin-channel-modal-root .ant-modal-footer {
+    border-top: 1px solid var(--admin-border);
+}
+
+.admin-drawer .ant-drawer-title,
+.admin-modal-root .ant-modal-title,
+.admin-channel-modal-root .ant-modal-title {
+    color: var(--admin-text);
+    font-size: 14px;
+    font-weight: 650;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    [data-admin-root] *,
+    body.admin-overlays * {
+        transition: none !important;
+        animation: none !important;
+    }
+}
--- a/web/src/pages/admin/theme/admin-tokens.css
+++ b/web/src/pages/admin/theme/admin-tokens.css
@@ -0,0 +1,144 @@
+/* Admin console tokens. Scoped only to admin roots.
+ * Never alias --workspace-*, --user-*, or --skin-* from the product UI.
+ * Light/dark follow the page theme class; product skins are ignored. */
+
+:is(
+    [data-admin-root],
+    body.admin-overlays,
+    .admin-drawer,
+    .admin-secondary-drawer,
+    .admin-modal-root,
+    .admin-channel-modal-root,
+    .admin-mobile-navigation-menu
+) {
+    --admin-font: ui-sans-serif, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", system-ui, sans-serif;
+    --admin-font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+    --admin-space: 8px;
+    --admin-radius-sm: 4px;
+    --admin-radius: 6px;
+    --admin-radius-lg: 8px;
+    --admin-control-h: 32px;
+    --admin-control-h-sm: 28px;
+    --admin-row-h: 40px;
+    --admin-head-h: 36px;
+    --admin-sidebar-width: 224px;
+    --admin-sidebar-collapsed: 64px;
+    --admin-motion: 120ms ease;
+    --admin-shadow-overlay: 0 16px 40px rgba(15, 23, 42, 0.16);
+
+    --admin-canvas: #f5f5f5;
+    --admin-sidebar: #f5f5f5;
+    --admin-surface: #ffffff;
+    --admin-surface-2: #f6f6f6;
+    --admin-surface-3: #ececec;
+    --admin-text: #111111;
+    --admin-text-secondary: #525252;
+    --admin-text-muted: #737373;
+    --admin-text-placeholder: #a3a3a3;
+    --admin-border: rgba(17, 17, 17, 0.1);
+    --admin-border-strong: rgba(17, 17, 17, 0.16);
+    --admin-divider: rgba(17, 17, 17, 0.08);
+    --admin-row-border: rgba(17, 17, 17, 0.06);
+    --admin-row-hover: #f0f0f0;
+    --admin-nav-hover: rgba(17, 17, 17, 0.05);
+    --admin-nav-active: #ececec;
+    --admin-nav-active-border: transparent;
+    --admin-accent: #111111;
+    --admin-accent-fg: #ffffff;
+    --admin-focus: rgba(17, 17, 17, 0.28);
+    --admin-status-success: #15803d;
+    --admin-status-warning: #b45309;
+    --admin-status-error: #dc2626;
+    --admin-status-info: #2563eb;
+    --admin-switch-on: #16a34a;
+    --admin-chart-primary: #0f172a;
+    --admin-chart-secondary: #0f766e;
+    --admin-chart-warning: #b45309;
+    --admin-card-shadow: none;
+
+    /* Compatibility aliases used by existing admin-ui.css. Independent values, not workspace skins. */
+    --admin-layer-0: var(--admin-canvas);
+    --admin-layer-1: var(--admin-surface);
+    --admin-layer-2: var(--admin-surface-2);
+    --admin-layer-3: var(--admin-surface-3);
+    --admin-text-primary: var(--admin-text);
+    --admin-control-border: var(--admin-border-strong);
+    --admin-card-border: var(--admin-border);
+
+    /* Firewall: leftover product/skin variables must resolve to admin values inside this tree. */
+    --background: var(--admin-canvas);
+    --foreground: var(--admin-text);
+    --color-surface: var(--admin-surface);
+    --color-border: var(--admin-border);
+    --border: var(--admin-border);
+    --muted: var(--admin-surface-2);
+    --popover: var(--admin-surface);
+    --ring: var(--admin-focus);
+    --font-sans: var(--admin-font);
+    --workspace-content: var(--admin-canvas);
+    --workspace-surface: var(--admin-surface);
+    --workspace-navigation: var(--admin-sidebar);
+    --workspace-page: var(--admin-canvas);
+    --workspace-accent: var(--admin-accent);
+    --workspace-nav-active-bg: var(--admin-nav-active);
+    --workspace-sidebar-width: var(--admin-sidebar-width);
+    --skin-admin-layer-0: var(--admin-canvas);
+    --skin-admin-layer-1: var(--admin-surface);
+    --skin-admin-layer-2: var(--admin-surface-2);
+    --skin-admin-layer-3: var(--admin-surface-3);
+    --theme-admin-card-shadow: none;
+    --r-sm: var(--admin-radius-sm);
+    --r-md: var(--admin-radius);
+    --r-lg: var(--admin-radius-lg);
+    --r-xl: var(--admin-radius-lg);
+    --r-2xl: var(--admin-radius-lg);
+    --motion-instant: var(--admin-motion);
+    --motion-state: var(--admin-motion);
+    --motion-ease-out: ease;
+
+    color: var(--admin-text);
+    font-family: var(--admin-font);
+    font-size: 13px;
+    line-height: 1.45;
+    font-feature-settings: "ss01" 0, "cv11" 0;
+}
+
+.dark :is(
+    [data-admin-root],
+    .admin-drawer,
+    .admin-secondary-drawer,
+    .admin-modal-root,
+    .admin-channel-modal-root,
+    .admin-mobile-navigation-menu
+),
+.dark body.admin-overlays {
+    --admin-canvas: #0f0f0f;
+    --admin-sidebar: #0f0f0f;
+    --admin-surface: #181818;
+    --admin-surface-2: #222222;
+    --admin-surface-3: #2a2a2a;
+    --admin-text: #f5f5f5;
+    --admin-text-secondary: #c4c4c4;
+    --admin-text-muted: #8a8a8a;
+    --admin-text-placeholder: #737373;
+    --admin-border: rgba(245, 245, 245, 0.1);
+    --admin-border-strong: rgba(245, 245, 245, 0.16);
+    --admin-divider: rgba(245, 245, 245, 0.08);
+    --admin-row-border: rgba(245, 245, 245, 0.06);
+    --admin-row-hover: #1c1c1c;
+    --admin-nav-hover: rgba(245, 245, 245, 0.05);
+    --admin-nav-active: #222222;
+    --admin-nav-active-border: transparent;
+    --admin-accent: #f5f5f5;
+    --admin-accent-fg: #0f0f0f;
+    --admin-focus: rgba(245, 245, 245, 0.28);
+    --admin-status-success: #4ade80;
+    --admin-status-warning: #fbbf24;
+    --admin-status-error: #f87171;
+    --admin-status-info: #60a5fa;
+    --admin-switch-on: #22c55e;
+    --admin-chart-primary: #e8eef6;
+    --admin-chart-secondary: #2dd4bf;
+    --admin-chart-warning: #fbbf24;
+    --admin-shadow-overlay: 0 22px 56px rgba(0, 0, 0, 0.48);
+}
--- a/web/src/pages/admin/ui/controls.tsx
+++ b/web/src/pages/admin/ui/controls.tsx
@@ -0,0 +1,190 @@
+import { Button, Checkbox as AntCheckbox, Segmented, Select as AntSelect, Switch as AntSwitch, Tooltip as AntTooltip } from "antd";
+import type { CheckboxChangeEvent } from "antd/es/checkbox";
+import type { ButtonProps } from "antd";
+import type { LucideIcon } from "lucide-react";
+import type { CSSProperties, InputHTMLAttributes, ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+export function AdminSwitch({
+    size = "md",
+    className,
+    ...props
+}: {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    size?: "sm" | "md";
+    checkedChildren?: ReactNode;
+    unCheckedChildren?: ReactNode;
+    onChange?: (checked: boolean) => void;
+    className?: string;
+    "aria-label"?: string;
+}) {
+    return (
+        <AntSwitch
+            {...props}
+            size={size === "sm" ? "small" : "default"}
+            className={cn("admin-switch", className)}
+            onChange={(checked) => props.onChange?.(checked)}
+        />
+    );
+}
+
+export function Switch(props: Parameters<typeof AdminSwitch>[0]) {
+    return <AdminSwitch {...props} />;
+}
+
+export function AdminSelect<V extends string = string>({
+    size = "md",
+    ariaLabel,
+    className,
+    onChange,
+    ...props
+}: {
+    value?: V;
+    onChange?: (value: V) => void;
+    options?: Array<{ value: V; label: ReactNode; disabled?: boolean; title?: string }>;
+    placeholder?: string;
+    disabled?: boolean;
+    allowClear?: boolean;
+    size?: "sm" | "md";
+    ariaLabel?: string;
+    className?: string;
+}) {
+    return (
+        <AntSelect
+            {...props}
+            size={size === "sm" ? "small" : "middle"}
+            className={cn("admin-select", className)}
+            aria-label={ariaLabel}
+            onChange={(value) => onChange?.(value as V)}
+        />
+    );
+}
+
+export function Select<V extends string = string>(props: Parameters<typeof AdminSelect<V>>[0]) {
+    return <AdminSelect<V> {...props} />;
+}
+
+export function AdminCheckbox({
+    bare,
+    size,
+    children,
+    className,
+    onChange,
+    ...props
+}: Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange"> & {
+    size?: "sm" | "md";
+    indeterminate?: boolean;
+    bare?: boolean;
+    children?: ReactNode;
+    onChange?: (event: CheckboxChangeEvent) => void;
+}) {
+    return (
+        <AntCheckbox className={cn("admin-checkbox", size === "sm" && "is-sm", className)} onChange={onChange} {...props}>
+            {bare ? null : children}
+        </AntCheckbox>
+    );
+}
+
+export function Checkbox(props: Parameters<typeof AdminCheckbox>[0]) {
+    return <AdminCheckbox {...props} />;
+}
+
+export function AdminTooltip({ title, placement = "top", delay = 80, children }: { title?: ReactNode; placement?: "top" | "right" | "bottom" | "left"; delay?: number; children: ReactNode }) {
+    if (!title) return <>{children}</>;
+    return (
+        <AntTooltip title={title} placement={placement} mouseEnterDelay={delay / 1000}>
+            <span className="inline-flex">{children}</span>
+        </AntTooltip>
+    );
+}
+
+export function Tooltip(props: Parameters<typeof AdminTooltip>[0]) {
+    return <AdminTooltip {...props} />;
+}
+
+export function AdminIconButton({
+    icon: Icon,
+    size = "sm",
+    className,
+    variant: _variant,
+    ...props
+}: {
+    icon: LucideIcon;
+    size?: "sm" | "md";
+    variant?: "ghost" | "default";
+    className?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    title?: string;
+    "aria-label"?: string;
+    onClick?: ButtonProps["onClick"];
+}) {
+    return <Button type="text" size="small" className={cn("admin-icon-button", className)} icon={<Icon className={size === "sm" ? "size-3.5" : "size-4"} />} {...props} />;
+}
+
+export function IconButton(props: Parameters<typeof AdminIconButton>[0]) {
+    return <AdminIconButton {...props} />;
+}
+
+export function AdminSegmented<V extends string = string>({
+    value,
+    onChange,
+    options,
+    ariaLabel,
+    className,
+}: {
+    value?: V;
+    onChange?: (value: V) => void;
+    options: Array<{ value: V; label?: ReactNode; icon?: ReactNode; disabled?: boolean }>;
+    ariaLabel?: string;
+    className?: string;
+}) {
+    return (
+        <Segmented
+            className={cn("admin-segmented", className)}
+            value={value}
+            options={options.map((option) => ({ ...option, label: option.label ?? option.value }))}
+            onChange={(next) => onChange?.(String(next) as V)}
+            aria-label={ariaLabel}
+        />
+    );
+}
+
+export function SegmentedControl<V extends string = string>(props: Parameters<typeof AdminSegmented<V>>[0]) {
+    return <AdminSegmented<V> {...props} />;
+}
+
+export function AdminCallout({
+    tone = "info",
+    title,
+    action,
+    className,
+    children,
+    style,
+}: {
+    tone?: "info" | "success" | "warning" | "error" | "default";
+    title?: ReactNode;
+    action?: ReactNode;
+    className?: string;
+    children?: ReactNode;
+    style?: CSSProperties;
+}) {
+    const resolvedTone = tone === "default" ? "info" : tone;
+    return (
+        <div className={cn("admin-callout", `is-${resolvedTone}`, className)} style={style} role="status">
+            <div className="min-w-0 flex-1">
+                {title ? <div className="admin-callout-title">{title}</div> : null}
+                {children ? <div className="admin-callout-body">{children}</div> : null}
+            </div>
+            {action}
+        </div>
+    );
+}
+
+export function Callout(props: Parameters<typeof AdminCallout>[0]) {
+    return <AdminCallout {...props} />;
+}
--- a/web/src/pages/admin/ui/overlays.tsx
+++ b/web/src/pages/admin/ui/overlays.tsx
@@ -0,0 +1,48 @@
+import { Drawer, Modal, type DrawerProps, type ModalProps } from "antd";
+import type { CSSProperties } from "react";
+
+import { cn } from "@/lib/utils";
+
+export type AdminDrawerProps = DrawerProps & {
+    flush?: boolean;
+};
+
+export type AdminModalProps = ModalProps & {
+    flush?: boolean;
+};
+
+const MODAL_FLUSH_STYLES = {
+    container: { padding: 0, overflow: "hidden" as const },
+    body: { padding: 0 },
+};
+
+function mergeFlushStyles(resolved: unknown, flush: boolean, kind: "drawer" | "modal") {
+    const base = resolved && typeof resolved === "object" ? (resolved as Record<string, unknown>) : {};
+    if (!flush) return base;
+    const body = base.body && typeof base.body === "object" ? (base.body as CSSProperties) : {};
+    if (kind === "drawer") return { ...base, body: { ...body, padding: 0 } };
+    const container = base.container && typeof base.container === "object" ? (base.container as CSSProperties) : {};
+    return {
+        ...base,
+        container: { ...container, ...MODAL_FLUSH_STYLES.container },
+        body: { ...body, ...MODAL_FLUSH_STYLES.body },
+    };
+}
+
+export function AdminDrawer({ flush = false, destroyOnHidden = true, styles, className, rootClassName, ...props }: AdminDrawerProps) {
+    const mergedStyles =
+        typeof styles === "function"
+            ? (info: { props: DrawerProps }) => mergeFlushStyles(styles(info), flush, "drawer")
+            : mergeFlushStyles(styles, flush, "drawer");
+
+    return <Drawer destroyOnHidden={destroyOnHidden} className={cn("admin-drawer-panel", className)} rootClassName={cn("admin-drawer", rootClassName)} {...props} styles={mergedStyles as DrawerProps["styles"]} />;
+}
+
+export function AdminModal({ flush = false, destroyOnHidden = true, styles, className, rootClassName, ...props }: AdminModalProps) {
+    const mergedStyles =
+        typeof styles === "function"
+            ? (info: { props: ModalProps }) => mergeFlushStyles(styles(info), flush, "modal")
+            : mergeFlushStyles(styles, flush, "modal");
+
+    return <Modal destroyOnHidden={destroyOnHidden} className={cn("admin-modal-panel", className)} rootClassName={cn("admin-modal-root", rootClassName)} {...props} styles={mergedStyles as ModalProps["styles"]} />;
+}
--- a/web/src/pages/admin/users/users-drawer.tsx
+++ b/web/src/pages/admin/users/users-drawer.tsx
@@ -1,5 +1,5 @@
 import { App, Button, Drawer, Form, Input } from "antd";
-import { Select } from "@/components/ui/base/select";
+import { Select } from "@/pages/admin/ui/controls";
 import { useEffect, useState } from "react";

 import { createAdminUser, updateAdminUser, type AdminUser, type LocalUser } from "@/services/api/auth";
--- a/web/src/pages/admin/users/users-panel.tsx
+++ b/web/src/pages/admin/users/users-panel.tsx
@@ -1,9 +1,9 @@
 import { App, Button, Dropdown, Input, Select } from "antd";
-import { Checkbox } from "@/components/ui/base/checkbox";
+import { Checkbox } from "@/pages/admin/ui/controls";
 import { Ban, Search, Settings2, UserPlus } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";

-import { PaginationBar } from "@/components/layout/workspace-page";
+import { PaginationBar } from "@/pages/admin/components/admin-ui";
 import { useDebouncedValue } from "@/hooks/use-debounced-value";
 import { bulkDisableAdminUsers, deleteAdminUser, listAdminUsers, updateAdminUser, type AdminUser, type LocalUser } from "@/services/api/auth";
 import { useUserStore } from "@/stores/use-user-store";