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

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