tt/ttstd-infinite-canvas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'upstream/main' into main (保留常驻通知与顺延迁移版本)

Browse Source
This commit is contained in:
✨await
2026-09-17 23:25:50 +08:00
parent a3b6761ba9 9ce158aaa0
commit 3dc3ea2970
120 changed files with 9314 additions and 1625 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
web/src/pages/admin/admin-route-pages.tsx
View File

@@ -14,6 +14,7 @@ const AccessSettingsPanel = lazy(() => import("./components/access-settings-pane
const EmailSettingsPanel = lazy(() => import("./components/email-settings-panel"));
const FeatureAvailabilityPanel = lazy(() => import("./components/feature-availability-panel"));
const StorageResourcesPanel = lazy(() => import("./components/storage-resources-panel"));
const AgentLessonsPanel = lazy(() => import("./components/agent-lessons-panel"));
export function AnalyticsPage() {
const { references } = useAdminContext();
@@ -128,3 +129,11 @@ export function StorageResourcesPage() {
</AdminPageFrame>
);
}
export function AgentLessonsPage() {
return (
<AdminPageFrame title="Agent 记忆" description="按用户查看个人记忆；批准仍由用户自己处理" scroll>
<AgentLessonsPanel />
</AdminPageFrame>
);
}

2
web/src/pages/admin/channels/channels-page.tsx
View File

@@ -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";

2
web/src/pages/admin/components/access-settings-panel.tsx
View File

@@ -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";

4
web/src/pages/admin/components/admin-announcements-panel.tsx
View File

@@ -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";

158
web/src/pages/admin/components/admin-shell.tsx
View File

@@ -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,
@@ -28,6 +27,7 @@ import {
PlugZap,
RadioTower,
RefreshCw,
Sparkles,
Settings2,
ShieldAlert,
ShieldCheck,
@@ -41,14 +41,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;
@@ -79,6 +81,7 @@ const adminNavigation: Array<{ label: string; items: AdminNavigationItem[] }> =
items: [
{ path: "/admin/announcements", label: "系统公告", description: "发布、关闭与历史公告", icon: <BellRing className="size-4" /> },
{ path: "/admin/banner-announcements", label: "常驻通知", description: "首页顶部常驻滚动通知", icon: <Megaphone className="size-4" /> },
{ path: "/admin/agent-lessons", label: "Agent 记忆", description: "按用户查看个人记忆", icon: <Sparkles className="size-4" /> },
{ path: "/admin/payments", label: "支付充值", description: "支付渠道、订单与对账", icon: <CreditCard className="size-4" /> },
{ path: "/admin/credit-operations", label: "积分运营", description: "人工调账与异常计费", icon: <Coins className="size-4" /> },
{ path: "/admin/redemption-codes", label: "兑换码", description: "生成与查看兑换码批次", icon: <TicketCheck className="size-4" /> },
@@ -111,6 +114,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 +139,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 +197,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 +216,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 +238,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 +268,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 +280,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 +309,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>

179
web/src/pages/admin/components/admin-ui.tsx
View File

@@ -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>
);

14
web/src/pages/admin/components/admin-user-detail-drawer.tsx
View File

@@ -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>
);
}

239
web/src/pages/admin/components/agent-lessons-panel.tsx Normal file
View File

@@ -0,0 +1,239 @@
import { App, Button, Input, Select, Space, Tag, Tooltip } from "antd";
import type { ColumnsType } from "antd/es/table";
import { RefreshCw, Trash2 } from "lucide-react";
import { useCallback, useEffect, useRef, useState } from "react";
import { useDebouncedValue } from "@/hooks/use-debounced-value";
import { agentLessonCategoryLabel, deleteAdminAgentLesson, listAdminAgentLessons, type AdminAgentLesson } from "@/services/api/admin-agent-lessons";
import { listAdminUsers, type AdminUser } from "@/services/api/auth";
import { AdminDataTable, AdminStatusBadge, AdminTableEmpty } from "./admin-ui";
function authorLabel(record: AdminAgentLesson) {
if (record.authorDisplayName && record.authorUsername) return `${record.authorDisplayName}（${record.authorUsername}）`;
return record.authorDisplayName || record.authorUsername || record.authorUserId || "未知用户";
}
export default function AgentLessonsPanel() {
const { message, modal } = App.useApp();
const [items, setItems] = useState<AdminAgentLesson[]>([]);
const [loading, setLoading] = useState(true);
const [status, setStatus] = useState<string>("all");
const [keyword, setKeyword] = useState("");
const [userId, setUserId] = useState<string | undefined>();
const [users, setUsers] = useState<AdminUser[]>([]);
const [userSearch, setUserSearch] = useState("");
const [searchingUsers, setSearchingUsers] = useState(false);
const debouncedKeyword = useDebouncedValue(keyword.trim(), 250);
const debouncedUserSearch = useDebouncedValue(userSearch.trim(), 250);
const seqRef = useRef(0);
const userSearchRef = useRef(0);
const load = useCallback(async () => {
const seq = ++seqRef.current;
setLoading(true);
try {
const data = await listAdminAgentLessons({
status: status === "all" ? undefined : status,
userId,
keyword: debouncedKeyword || undefined,
limit: 100,
});
if (seq !== seqRef.current) return;
setItems(data.lessons || []);
} catch (error) {
if (seq === seqRef.current) message.error(error instanceof Error ? error.message : "读取记忆失败");
} finally {
if (seq === seqRef.current) setLoading(false);
}
}, [debouncedKeyword, message, status, userId]);
useEffect(() => {
void load();
}, [load]);
useEffect(() => {
const requestId = ++userSearchRef.current;
setSearchingUsers(true);
void listAdminUsers({ keyword: debouncedUserSearch || undefined, page: 1, pageSize: 50 })
.then((result) => {
if (requestId !== userSearchRef.current) return;
setUsers((current) => {
const selected = current.find((user) => user.id === userId);
if (selected && !result.users.some((user) => user.id === selected.id)) return [selected, ...result.users];
return result.users;
});
})
.catch((error) => {
if (requestId === userSearchRef.current) message.error(error instanceof Error ? error.message : "搜索用户失败");
})
.finally(() => {
if (requestId === userSearchRef.current) setSearchingUsers(false);
});
}, [debouncedUserSearch, message, userId]);
const remove = (record: AdminAgentLesson) => {
modal.confirm({
title: `删除「${record.topic}」`,
content: `这是 ${authorLabel(record)} 的个人记忆。删除后该用户的 Agent 也无法召回。确认删除？`,
okText: "删除",
okButtonProps: { danger: true },
onOk: async () => {
await deleteAdminAgentLesson(record.id);
message.success("已删除");
await load();
},
});
};
const columns: ColumnsType<AdminAgentLesson> = [
{
title: "用户",
key: "author",
width: 168,
render: (_, record) => (
<div className="flex flex-col gap-0.5">
<span className="font-medium">{authorLabel(record)}</span>
{record.authorUserId ? <span className="text-[10px] opacity-60">{record.authorUserId}</span> : null}
</div>
),
},
{
title: "分类",
dataIndex: "category",
width: 92,
render: (value: string) => <Tag>{agentLessonCategoryLabel(value)}</Tag>,
},
{
title: "主题",
dataIndex: "topic",
width: 180,
render: (value: string, record) => (
<div className="flex flex-col gap-0.5">
<span className="font-medium">{value}</span>
{record.source ? <span className="text-[10px] opacity-60">来源：{record.source}</span> : null}
</div>
),
},
{
title: "适用场景 / 做法",
dataIndex: "situation",
render: (_: string, record) => {
const steps = record.steps || [];
return (
<div className="flex flex-col gap-1 text-xs">
<span className="opacity-80">{record.situation}</span>
{record.lesson ? <span>{record.lesson}</span> : null}
{steps.length ? (
<ol className="ml-4 list-decimal space-y-0.5 opacity-80">
{steps.map((step, index) => (
<li key={`${record.id}-${index}`}>
<span className="font-medium">{step.tool}</span>
{" — "}
{step.action}
{step.note ? <span className="opacity-60">（{step.note}）</span> : null}
</li>
))}
</ol>
) : null}
</div>
);
},
},
{
title: "状态",
dataIndex: "status",
width: 96,
render: (value: string) => <AdminStatusBadge label={value === "approved" ? "已批准" : value === "rejected" ? "已拒绝" : "待审"} tone={value === "approved" ? "success" : value === "rejected" ? "error" : "warning"} />,
},
{
title: (
<Tooltip title="被附进该用户 Agent 上下文的次数">
<span>注入</span>
</Tooltip>
),
dataIndex: "injected",
width: 64,
render: (value: number) => <span className="tabular-nums opacity-80">{value ?? 0}</span>,
},
{
title: (
<Tooltip title="该用户的 Agent 用 recall_lessons 取全文的次数">
<span>查阅</span>
</Tooltip>
),
dataIndex: "hits",
width: 64,
render: (value: number) => <span className="tabular-nums opacity-80">{value ?? 0}</span>,
},
{
title: "操作",
key: "actions",
width: 72,
render: (_, record) => (
<Space size={4}>
<Button size="small" danger icon={<Trash2 className="size-3.5" />} onClick={() => remove(record)} />
</Space>
),
},
];
return (
<div className="flex flex-col gap-3">
<p className="text-xs text-foreground/60">
记忆归用户自己批准和管理。这里只做巡查：可按用户、状态、关键词筛选，必要时删除违规内容。批准入口在用户的「设置 → Agent 记忆」。
</p>
<AdminDataTable
toolbar={
<div className="flex flex-wrap items-center gap-2">
<Select
value={status}
onChange={setStatus}
className="w-[120px]"
options={[
{ label: "全部", value: "all" },
{ label: "待审", value: "pending" },
{ label: "已批准", value: "approved" },
{ label: "已拒绝", value: "rejected" },
]}
/>
<Select
allowClear
showSearch
filterOption={false}
loading={searchingUsers}
placeholder="筛选用户"
className="w-[220px]"
value={userId}
onSearch={setUserSearch}
onChange={(value) => setUserId(value)}
options={users.map((user) => ({
value: user.id,
label: user.displayName ? `${user.displayName}（${user.username}）` : user.username,
}))}
/>
<Input.Search
allowClear
placeholder="主题、内容或用户名"
className="w-[220px]"
value={keyword}
onChange={(event) => setKeyword(event.target.value)}
/>
<Button icon={<RefreshCw className="size-4" />} onClick={() => void load()}>
刷新
</Button>
<span className="text-xs opacity-60">共 {items.length} 条</span>
</div>
}
table={{
rowKey: "id",
size: "small",
loading,
columns,
dataSource: items,
pagination: { defaultPageSize: 20, showSizeChanger: true },
}}
empty={<AdminTableEmpty title="没有匹配的记忆" description="换一个用户或关键词再查。用户自己在设置页批准后才会注入该用户的会话。" />}
/>
</div>
);
}

5
web/src/pages/admin/components/analytics-panel.tsx
View File

@@ -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"];

6
web/src/pages/admin/components/api-log-detail-drawer.tsx
View File

@@ -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">

6
web/src/pages/admin/components/channel-model-editor.tsx
View File

@@ -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>
);
}

2
web/src/pages/admin/components/channel-model-manager.tsx
View File

@@ -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";

4
web/src/pages/admin/components/channel-order-dialog.tsx
View File

@@ -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

2
web/src/pages/admin/components/credit-operations-panel.tsx
View File

@@ -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";

4
web/src/pages/admin/components/email-settings-panel.tsx
View File

@@ -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";

2
web/src/pages/admin/components/feature-availability-panel.tsx
View File

@@ -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";

2
web/src/pages/admin/components/redemption-codes-panel.tsx
View File

@@ -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";

2
web/src/pages/admin/components/storage-resources-panel.tsx
View File

@@ -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";

10
web/src/pages/admin/index.tsx
View File

@@ -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>
);

2
web/src/pages/admin/logical-models/logical-models-page.tsx
View File

@@ -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";

4
web/src/pages/admin/logical-models/model-routing-capabilities.tsx
View File

@@ -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";

4
web/src/pages/admin/logs/logs-page.tsx
View File

@@ -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";

12
web/src/pages/admin/payments/payments-page.tsx
View File

@@ -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

4
web/src/pages/admin/plugins/plugins-page.tsx
View File

@@ -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";

2
web/src/pages/admin/settings/appearance-settings-page.tsx
View File

@@ -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";

2
web/src/pages/admin/settings/ark-private-assets-settings-page.tsx
View File

@@ -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";

5
web/src/pages/admin/settings/components/skin-theme-editor.tsx
View File

@@ -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";

2
web/src/pages/admin/settings/components/welcome-setting.tsx
View File

@@ -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";

2
web/src/pages/admin/settings/libtv-settings-page.tsx
View File

@@ -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";

2
web/src/pages/admin/settings/response-interception-settings-page.tsx
View File

@@ -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";

4
web/src/pages/admin/settings/storage-settings-page.tsx
View File

@@ -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";

14
web/src/pages/admin/storyboard-prompts/storyboard-prompts-page.tsx
View File

@@ -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>
);
}

156
web/src/pages/admin/theme/admin-ant-theme.ts Normal file
View File

@@ -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",
},
},
};
}

978
web/src/pages/admin/theme/admin-chrome.css Normal file
View File

@@ -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;
}
}

144
web/src/pages/admin/theme/admin-tokens.css Normal file
View File

@@ -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);
}

190
web/src/pages/admin/ui/controls.tsx Normal file
View File

@@ -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} />;
}

48
web/src/pages/admin/ui/overlays.tsx Normal file
View File

@@ -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"]} />;
}

2
web/src/pages/admin/users/users-drawer.tsx
View File

@@ -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";

4
web/src/pages/admin/users/users-panel.tsx
View File

@@ -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";

8
web/src/pages/assets/index.tsx
View File

@@ -1434,7 +1434,7 @@ function assetArchiveFacts(asset: LibraryAsset) {
{ label: "分类", value: assetCategoryLabel(asset.category) },
];
if (asset.kind === "image" || asset.kind === "video") {
facts.push({ label: "尺寸", value: `${asset.data.width}x${asset.data.height}` });
facts.push({ label: "尺寸", value: assetSizeLabel(asset.data.width, asset.data.height) });
}
if (asset.kind === "video" || asset.kind === "audio") {
facts.push({ label: "时长", value: formatAssetClock(asset.data.durationMs) || "未知" });
@@ -1454,7 +1454,11 @@ function assetSummary(asset: LibraryAsset) {
if (asset.kind === "text") return asset.data.content;
if (asset.kind === "audio") return `${formatAssetDuration(asset.data.durationMs)} · ${formatBytes(asset.data.bytes)} · ${asset.data.mimeType}`;
if (asset.kind === "model") return `${asset.data.fileName} · ${formatBytes(asset.data.bytes)} · ${asset.data.mimeType}`;
return `${asset.data.width}x${asset.data.height} · ${formatBytes(asset.data.bytes)} · ${asset.data.mimeType}`;
return `${assetSizeLabel(asset.data.width, asset.data.height)} · ${formatBytes(asset.data.bytes)} · ${asset.data.mimeType}`;
}
function assetSizeLabel(width: number, height: number) {
return width > 0 && height > 0 ? `${width}x${height}` : "未知";
}
function StorageTag({ asset }: { asset: LibraryAsset }) {

4
web/src/pages/projects/detail/chapters.tsx
View File

@@ -623,7 +623,7 @@ export default function ProjectChaptersView({ detail, refreshProject }: ProjectD
</div>
<label className="block">
<span className="mb-1.5 block text-xs font-medium text-foreground/68">文本模型</span>
<ModelPicker config={effectiveConfig} capability="text" value={selectedTextModel} onChange={setSelectedTextModel} fullWidth placeholder="选择用于提取角色、场景与道具的文本模型" showSelectedPrice={false} onMissingConfig={() => navigateToSettings({ continueCreation: true })} />
<ModelPicker config={effectiveConfig} capability="text" value={selectedTextModel} onChange={setSelectedTextModel} variant="creation" fullWidth placeholder="选择用于提取角色、场景与道具的文本模型" showSelectedPrice={false} onMissingConfig={() => navigateToSettings({ continueCreation: true })} />
</label>
</div>
</Modal>
@@ -637,7 +637,7 @@ export default function ProjectChaptersView({ detail, refreshProject }: ProjectD
{storyboardImpact.shotCount ? <Callout tone="warning" title={`本章已有 ${storyboardImpact.shotCount} 个分镜`}>继续后会先生成新分镜；生成成功后，再按确认内容整体替换旧镜头及其关联数据。</Callout> : null}
<label className="block">
<span className="mb-1.5 block text-xs font-medium text-foreground/68">文本模型</span>
<ModelPicker config={effectiveConfig} capability="text" value={selectedTextModel} onChange={setSelectedTextModel} fullWidth placeholder="选择用于生成分镜的文本模型" showSelectedPrice={false} onMissingConfig={() => navigateToSettings({ continueCreation: true })} />
<ModelPicker config={effectiveConfig} capability="text" value={selectedTextModel} onChange={setSelectedTextModel} variant="creation" fullWidth placeholder="选择用于生成分镜的文本模型" showSelectedPrice={false} onMissingConfig={() => navigateToSettings({ continueCreation: true })} />
</label>
<div>
<label className="block">

534
web/src/pages/settings/agent-memory-pane.tsx Normal file
View File

@@ -0,0 +1,534 @@
import { App, Button, Form, Input, Select, Space } from "antd";
import { Check, Download, Pencil, Plus, Sparkles, Trash2, Upload, X } from "lucide-react";
import { useCallback, useEffect, useRef, useState } from "react";
import { WorkspaceState } from "@/components/layout/workspace-state";
import { ModelPicker } from "@/components/model-picker";
import { StatusBadge } from "@/components/ui/base/badges";
import { IconButton } from "@/components/ui/base/buttons";
import { SegmentedControl } from "@/components/ui/base/segmented-control";
import { AppModal } from "@/components/ui/product/app-modal";
import { Callout } from "@/components/ui/product/callout";
import {
agentMemoryCategoryLabel,
AGENT_MEMORY_CATEGORIES,
compactAgentMemories,
createAgentMemory,
decideAgentMemory,
deleteAgentMemory,
exportAgentMemories,
getAgentMemorySettings,
importAgentMemories,
listAgentMemories,
updateAgentMemory,
updateAgentMemorySettings,
type AgentMemory,
type AgentMemoryBundle,
type AgentMemoryCompactInterval,
type AgentMemoryCompactView,
type AgentMemoryRequest,
type AgentMemoryStep,
} from "@/services/api/agent-memories";
import { encodeChannelModel, logicalModelIDForConfig, modelOptionName, resolveModelRequestConfig, useEffectiveConfig, type AiConfig } from "@/stores/use-config-store";
const COMPACT_INTERVALS: Array<{ value: AgentMemoryCompactInterval; label: string }> = [
{ value: "off", label: "手动" },
{ value: "daily", label: "每天" },
{ value: "weekly", label: "每周" },
{ value: "monthly", label: "每月" },
];
const STATUS_FILTERS = [
{ value: "all", label: "全部" },
{ value: "pending", label: "待审" },
{ value: "approved", label: "已批" },
{ value: "rejected", label: "已拒" },
] as const;
function memoryStatusTone(status: string) {
if (status === "approved") return "success" as const;
if (status === "rejected") return "error" as const;
if (status === "pending") return "warning" as const;
return "neutral" as const;
}
function memoryStatusLabel(status: string) {
if (status === "approved") return "已批准";
if (status === "rejected") return "已拒绝";
if (status === "pending") return "待审";
return status;
}
function compactModelFields(config: AiConfig, selectedModel: string) {
const model = selectedModel.trim();
if (!model) return {};
const agentConfig = { ...config, model };
const requestConfig = resolveModelRequestConfig(agentConfig, model);
return {
logicalModelId: logicalModelIDForConfig(agentConfig) || undefined,
channelId: requestConfig.channelId || undefined,
channelModelKey: modelOptionName(model) || undefined,
model,
};
}
function restoreCompactModel(settings: AgentMemoryCompactView | null, fallback: string) {
if (settings?.model?.trim()) return settings.model.trim();
if (settings?.channelId && settings?.channelModelKey) return encodeChannelModel(settings.channelId, settings.channelModelKey);
return fallback;
}
function compactStatusLabel(settings: AgentMemoryCompactView | null) {
if (!settings) return "";
if (settings.lastStatus === "queued") return "已排队，等待文本模型压缩";
if (settings.lastStatus === "running") return "正在调用文本模型压缩记忆";
if (settings.lastStatus === "failed") return settings.lastError || "上次压缩失败";
if (settings.lastStatus === "succeeded") {
const summary = settings.summary;
const parts = [
summary?.merged ? `合并 ${summary.merged}` : "",
summary?.rewritten ? `改写 ${summary.rewritten}` : "",
summary?.removed ? `删除 ${summary.removed}` : "",
].filter(Boolean);
const when = settings.lastCompactAt ? new Date(settings.lastCompactAt).toLocaleString() : "";
return [when && `上次 ${when}`, parts.join(" · ") || "模型认为没有需要改动的条目"].filter(Boolean).join(" · ");
}
return "压缩会按你的文本模型计费，把相近记忆合并、把含糊条目改清楚。";
}
type MemoryFormValues = {
topic: string;
category: string;
situation: string;
lesson?: string;
source?: string;
steps?: AgentMemoryStep[];
};
function toRequest(values: MemoryFormValues): AgentMemoryRequest {
const steps = (values.steps || []).filter((step) => step.tool?.trim() && step.action?.trim());
return {
topic: values.topic.trim(),
category: values.category,
situation: values.situation.trim(),
lesson: values.lesson?.trim() || undefined,
source: values.source?.trim() || undefined,
steps: steps.length ? steps : undefined,
};
}
function AgentMemoryCompactCard({ compact = false, onApplied }: { compact?: boolean; onApplied: () => Promise<void> }) {
const { message } = App.useApp();
const config = useEffectiveConfig();
const [settings, setSettings] = useState<AgentMemoryCompactView | null>(null);
const [model, setModel] = useState("");
const [saving, setSaving] = useState(false);
const [compacting, setCompacting] = useState(false);
const seqRef = useRef(0);
const busy = settings?.lastStatus === "queued" || settings?.lastStatus === "running";
const loadSettings = useCallback(async () => {
const seq = ++seqRef.current;
try {
const next = await getAgentMemorySettings();
if (seq !== seqRef.current) return null;
setSettings(next);
setModel((current) => restoreCompactModel(next, current || config.textModel || ""));
return next;
} catch (error) {
if (seq === seqRef.current) message.error(error instanceof Error ? error.message : "读取压缩设置失败");
return null;
}
}, [config.textModel, message]);
useEffect(() => {
void loadSettings();
}, [loadSettings]);
useEffect(() => {
if (!busy) return;
const timer = window.setInterval(() => {
void loadSettings().then((next) => {
if (next?.lastStatus === "succeeded") void onApplied();
});
}, 3000);
return () => window.clearInterval(timer);
}, [busy, loadSettings, onApplied]);
const persist = async (interval: AgentMemoryCompactInterval, selectedModel: string) => {
setSaving(true);
try {
const next = await updateAgentMemorySettings({
compactInterval: interval,
...compactModelFields(config, selectedModel),
});
setSettings(next);
setModel(restoreCompactModel(next, selectedModel));
} catch (error) {
message.error(error instanceof Error ? error.message : "保存压缩设置失败");
} finally {
setSaving(false);
}
};
const runCompact = async () => {
const selected = model.trim();
if (!selected) {
message.warning("请先选择用于压缩的文本模型");
return;
}
setCompacting(true);
try {
const next = await compactAgentMemories(compactModelFields(config, selected));
setSettings(next);
message.success("已提交压缩任务，完成后会刷新记忆列表");
} catch (error) {
message.error(error instanceof Error ? error.message : "提交压缩失败");
} finally {
setCompacting(false);
}
};
const statusText = compactStatusLabel(settings);
const failed = settings?.lastStatus === "failed";
return (
<section className={compact ? "space-y-2.5" : "space-y-3 rounded-2xl bg-surface-secondary/80 px-4 py-3.5"}>
<div className="flex items-start justify-between gap-3">
<div className="min-w-0">
<h3 className="text-sm font-medium text-foreground">压缩优化</h3>
{compact ? null : <p className="mt-0.5 text-caption leading-5 text-muted-foreground">按文本模型计费，合并相近条目、改写含糊内容。</p>}
</div>
<Button size="small" icon={<Sparkles className="size-3.5" />} loading={compacting || busy} disabled={!model.trim()} onClick={() => void runCompact()}>
{busy ? "压缩中" : "立即压缩"}
</Button>
</div>
<div className="flex min-w-0 flex-col gap-2">
<SegmentedControl
size="sm"
ariaLabel="压缩周期"
value={settings?.compactInterval || "off"}
disabled={saving || busy}
options={COMPACT_INTERVALS}
onChange={(value) => void persist(value, model)}
/>
<div className="min-w-0 overflow-hidden rounded-xl bg-surface-tertiary">
<ModelPicker
config={config}
value={model}
capability="text"
variant="creation"
fullWidth
showSelectedPrice
showOptionPrices
className="!h-9 !min-h-9 !border-0 !bg-transparent !shadow-none"
placeholder="选择压缩用的文本模型"
onChange={(value) => {
setModel(value);
void persist(settings?.compactInterval || "off", value);
}}
/>
</div>
</div>
{failed && settings?.lastError ? (
<Callout tone="warning" title="上次压缩未完成">{settings.lastError}</Callout>
) : statusText ? (
<p className="text-caption leading-5 text-muted-foreground">{statusText}</p>
) : null}
</section>
);
}
export default function AgentMemoryPane({ compact = false }: { compact?: boolean }) {
const { message, modal } = App.useApp();
const [items, setItems] = useState<AgentMemory[]>([]);
const [loading, setLoading] = useState(true);
const [status, setStatus] = useState<string>("all");
const [busyId, setBusyId] = useState<string | null>(null);
const [editorOpen, setEditorOpen] = useState(false);
const [editing, setEditing] = useState<AgentMemory | null>(null);
const [saving, setSaving] = useState(false);
const [form] = Form.useForm<MemoryFormValues>();
const fileRef = useRef<HTMLInputElement>(null);
const seqRef = useRef(0);
const load = useCallback(async () => {
const seq = ++seqRef.current;
setLoading(true);
try {
const data = await listAgentMemories(status === "all" ? undefined : status, 200);
if (seq !== seqRef.current) return;
setItems(data.memories || []);
} catch (error) {
if (seq === seqRef.current) message.error(error instanceof Error ? error.message : "读取记忆失败");
} finally {
if (seq === seqRef.current) setLoading(false);
}
}, [message, status]);
useEffect(() => {
void load();
}, [load]);
const openCreate = () => {
setEditing(null);
form.resetFields();
form.setFieldsValue({ category: "other", steps: [] });
setEditorOpen(true);
};
const openEdit = (record: AgentMemory) => {
setEditing(record);
form.setFieldsValue({
topic: record.topic,
category: record.category || "other",
situation: record.situation,
lesson: record.lesson,
source: record.source,
steps: record.steps || [],
});
setEditorOpen(true);
};
const save = async () => {
const values = await form.validateFields();
const request = toRequest(values);
if (!request.lesson && !(request.steps && request.steps.length)) {
message.warning("请填写做法，或至少添加一步路线");
return;
}
setSaving(true);
try {
if (editing) {
await updateAgentMemory(editing.id, request);
message.success("已保存");
} else {
await createAgentMemory(request);
message.success("已添加，立刻对你的 Agent 生效");
}
setEditorOpen(false);
await load();
} catch (error) {
message.error(error instanceof Error ? error.message : "保存失败");
} finally {
setSaving(false);
}
};
const decide = async (record: AgentMemory, decision: "approve" | "reject") => {
setBusyId(record.id);
try {
await decideAgentMemory(record.id, decision);
message.success(decision === "approve" ? "已批准，之后的会话会用到这条记忆" : "已拒绝，不会再注入会话");
await load();
} catch (error) {
message.error(error instanceof Error ? error.message : "处理失败");
} finally {
setBusyId(null);
}
};
const remove = (record: AgentMemory) => {
modal.confirm({
title: `删除记忆「${record.topic}」`,
content: "删除后不会再出现在你的 Agent 上下文里。确认删除？",
okText: "删除",
okButtonProps: { danger: true },
onOk: async () => {
await deleteAgentMemory(record.id);
message.success("已删除");
await load();
},
});
};
const onExport = async () => {
try {
const bundle = await exportAgentMemories();
const blob = new Blob([JSON.stringify(bundle, null, 2)], { type: "application/json" });
const url = URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = url;
link.download = `agent-memories-${bundle.exportedAt.slice(0, 10)}.json`;
link.click();
URL.revokeObjectURL(url);
message.success(`已导出 ${bundle.memories.length} 条`);
} catch (error) {
message.error(error instanceof Error ? error.message : "导出失败");
}
};
const onImportFile = async (file: File) => {
try {
const parsed = JSON.parse(await file.text()) as AgentMemoryBundle;
const result = await importAgentMemories(parsed);
message.success(`导入 ${result.imported} 条，合并 ${result.merged} 条，跳过 ${result.skipped} 条`);
await load();
} catch (error) {
message.error(error instanceof Error ? error.message : "导入失败，请确认是本产品导出的 JSON");
}
};
const pendingCount = items.filter((item) => item.status === "pending").length;
const statusFilters = STATUS_FILTERS.map((option) => ({
...option,
label: option.value === "pending" && pendingCount ? `待审 ${pendingCount}` : option.label,
}));
return (
<div className={compact ? "flex min-h-0 flex-1 flex-col gap-3 overflow-hidden" : "flex flex-col gap-5"}>
<div className="flex shrink-0 flex-wrap items-center gap-2">
<SegmentedControl
size="sm"
ariaLabel="记忆状态"
value={status}
options={statusFilters}
onChange={setStatus}
/>
<div className="ml-auto flex items-center gap-1">
<IconButton variant="ghost" size="sm" icon={Download} aria-label="导出记忆" onClick={() => void onExport()} />
<IconButton variant="ghost" size="sm" icon={Upload} aria-label="导入记忆" onClick={() => fileRef.current?.click()} />
<Button type="primary" icon={<Plus className="size-4" />} onClick={openCreate}>
添加记忆
</Button>
</div>
<input
ref={fileRef}
type="file"
accept="application/json,.json"
className="hidden"
onChange={(event) => {
const file = event.target.files?.[0];
event.target.value = "";
if (file) void onImportFile(file);
}}
/>
</div>
{compact ? null : <AgentMemoryCompactCard onApplied={load} />}
<div className={compact ? "thin-scrollbar flex min-h-0 flex-1 flex-col overflow-y-auto" : undefined}>
{loading ? (
<div className="space-y-2" aria-busy="true" aria-live="polite">
{[0, 1, 2].map((index) => (
<div key={index} className="h-[72px] animate-pulse rounded-2xl bg-surface-secondary" />
))}
</div>
) : null}
{!loading && items.length === 0 ? (
<WorkspaceState
compact
icon="empty"
className={compact ? "min-h-0 flex-1 py-8" : "min-h-[220px] py-10"}
title={status === "pending" ? "没有待批准的记忆" : "还没有个人记忆"}
description={status === "pending" ? "Agent 跑通任务后会把可复用做法记到这里，等你点头。" : "手动添加立刻生效，也可以等 Agent 记下后再批准。"}
action={status === "pending" ? undefined : <Button type="primary" icon={<Plus className="size-4" />} onClick={openCreate}>添加记忆</Button>}
/>
) : null}
{!loading && items.length ? (
<div className="space-y-2">
{items.map((record) => (
<article key={record.id} className="group rounded-2xl bg-surface-secondary/80 px-3.5 py-3 transition-[background,transform] duration-[var(--motion-state)] hover:bg-surface-hover motion-reduce:transition-none">
<div className="flex items-start gap-3">
<div className="min-w-0 flex-1">
<div className="flex flex-wrap items-center gap-2">
<h3 className="text-sm font-medium text-foreground">{record.topic}</h3>
<StatusBadge size="sm" tone={memoryStatusTone(record.status)} label={memoryStatusLabel(record.status)} />
<span className="text-[11px] text-muted-foreground">{agentMemoryCategoryLabel(record.category)}</span>
</div>
<p className="mt-1 text-caption leading-5 text-muted-foreground">{record.situation}</p>
{record.lesson ? <p className="mt-1 text-caption leading-5 text-foreground/80">{record.lesson}</p> : null}
{record.steps?.length ? (
<ol className="mt-1.5 ml-4 list-decimal space-y-0.5 text-[11px] leading-5 text-muted-foreground">
{record.steps.map((step, index) => (
<li key={`${record.id}-${index}`}>
<span className="font-medium text-foreground/80">{step.tool}</span>
{" — "}
{step.action}
{step.note ? <span className="text-foreground/45">（{step.note}）</span> : null}
</li>
))}
</ol>
) : null}
</div>
<div className="flex shrink-0 flex-wrap items-center justify-end gap-1">
{record.status === "pending" ? (
<>
<Button size="small" type="primary" icon={<Check className="size-3.5" />} loading={busyId === record.id} onClick={() => void decide(record, "approve")}>
批准
</Button>
<Button size="small" icon={<X className="size-3.5" />} loading={busyId === record.id} onClick={() => void decide(record, "reject")}>
拒绝
</Button>
</>
) : null}
<IconButton variant="ghost" size="sm" icon={Pencil} aria-label={`编辑 ${record.topic}`} onClick={() => openEdit(record)} />
<IconButton variant="danger" size="sm" icon={Trash2} aria-label={`删除 ${record.topic}`} onClick={() => remove(record)} />
</div>
</div>
</article>
))}
</div>
) : null}
</div>
{compact ? (
<div className="shrink-0 border-t border-border/40 pt-3">
<AgentMemoryCompactCard compact onApplied={load} />
</div>
) : null}
<AppModal
open={editorOpen}
title={editing ? "编辑记忆" : "添加记忆"}
okText={editing ? "保存" : "添加"}
confirmLoading={saving}
onOk={() => void save()}
onCancel={() => setEditorOpen(false)}
>
<Form form={form} layout="vertical" className="pt-2">
<Form.Item name="topic" label="主题" rules={[{ required: true, message: "请填写主题" }]}>
<Input maxLength={120} placeholder="例如 canvas.snapshot-hash" />
</Form.Item>
<Form.Item name="category" label="分类" rules={[{ required: true, message: "请选择分类" }]}>
<Select options={AGENT_MEMORY_CATEGORIES.map((entry) => ({ value: entry.key, label: entry.label }))} />
</Form.Item>
<Form.Item name="situation" label="适用场景" rules={[{ required: true, message: "请填写适用场景" }]}>
<Input maxLength={200} placeholder="什么情况下用这条记忆" />
</Form.Item>
<Form.Item name="lesson" label="做法">
<Input.TextArea rows={3} maxLength={400} placeholder="一句话说明该怎么做" />
</Form.Item>
<Form.Item name="source" label="来源（可选）">
<Input maxLength={200} />
</Form.Item>
<Form.List name="steps">
{(fields, { add, remove: removeStep }) => (
<div className="space-y-2">
<div className="flex items-center justify-between">
<span className="text-sm">路线步骤（可选）</span>
<Button size="small" onClick={() => add({ tool: "", action: "", note: "" })}>
加一步
</Button>
</div>
{fields.map((field) => (
<Space key={field.key} className="flex w-full" align="start">
<Form.Item {...field} name={[field.name, "tool"]} className="mb-0 flex-1">
<Input placeholder="工具名" />
</Form.Item>
<Form.Item {...field} name={[field.name, "action"]} className="mb-0 flex-1">
<Input placeholder="做什么" />
</Form.Item>
<Button type="text" danger onClick={() => removeStep(field.name)}>
删
</Button>
</Space>
))}
</div>
)}
</Form.List>
</Form>
</AppModal>
</div>
);
}

19
web/src/pages/settings/index.tsx
View File

@@ -1,6 +1,6 @@
import { App, Button, InputNumber } from "antd";
import { SettingsRow } from "@/components/ui/product/settings-row";
import { ArrowLeft, Boxes, Bug, Cloud, MessageSquareText, RadioTower, SlidersHorizontal, Workflow } from "lucide-react";
import { ArrowLeft, Boxes, Brain, Bug, Cloud, MessageSquareText, RadioTower, SlidersHorizontal, Workflow } from "lucide-react";
import { useEffect, useLayoutEffect, useMemo, useState, type ReactNode } from "react";
import { useNavigate, useSearchParams } from "react-router";
@@ -12,11 +12,12 @@ import { ChannelSettingsPane, channelValidationError, focusInvalidChannelField,
import { ModelDefaultGrid } from "./model-default-grid";
import { PromptPreferencesPane } from "./prompt-preferences-pane";
import DiagnosticsPanel from "./diagnostics-panel";
import AgentMemoryPane from "./agent-memory-pane";
import { RunningHubSettingsPane } from "./runninghub-settings-pane";
import { RUNNINGHUB_PLUGIN_ID } from "@/lib/plugins/builtin/workflows";
import { usePluginStore } from "@/stores/use-plugin-store";
type ConfigSectionKey = "channels" | "models" | "runninghub" | "preferences" | "prompts" | "storage" | "diagnostics";
type ConfigSectionKey = "channels" | "models" | "runninghub" | "preferences" | "prompts" | "agent-memory" | "storage" | "diagnostics";
const configSections: Array<{ key: ConfigSectionKey; label: string; description: string; icon: ReactNode }> = [
{ key: "channels", label: "个人渠道", description: "模型服务与个人工作流", icon: <RadioTower className="size-4" /> },
@@ -24,6 +25,7 @@ const configSections: Array<{ key: ConfigSectionKey; label: string; description:
{ key: "models", label: "模型选择", description: "按领域选择默认模型", icon: <Boxes className="size-4" /> },
{ key: "preferences", label: "生成偏好", description: "画布生成默认值", icon: <SlidersHorizontal className="size-4" /> },
{ key: "prompts", label: "提示词偏好", description: "按任务定制平台模板", icon: <MessageSquareText className="size-4" /> },
{ key: "agent-memory", label: "Agent 记忆", description: "批准、添加、导出导入、压缩", icon: <Brain className="size-4" /> },
{ key: "storage", label: "我的对象存储", description: "管理个人媒体存储", icon: <Cloud className="size-4" /> },
{ key: "diagnostics", label: "问题诊断", description: "导出日志协助排查", icon: <Bug className="size-4" /> },
];
@@ -153,6 +155,19 @@ export default function SettingsPage() {
</SettingsPane>
),
prompts: <SettingsPane fill><PromptPreferencesPane /></SettingsPane>,
"agent-memory": (
<SettingsPane>
<div className="settings-pane-header">
<div className="min-w-0">
<h2>Agent 记忆</h2>
<p>只属于你。Agent 记下的先待批准；手动添加立刻生效。可导入导出，也可用文本模型压缩相近条目。</p>
</div>
</div>
<div className="settings-section">
<AgentMemoryPane />
</div>
</SettingsPane>
),
diagnostics: <SettingsPane><DiagnosticsPanel taskId={searchParams.get("taskId") || undefined} projectId={searchParams.get("projectId") || undefined} /></SettingsPane>,
storage: (
<SettingsPane>