Skip to Content
管理员后台管理员后台（Dramagon 暗色主题）

管理员后台（Dramagon 暗色主题）

配图占位：本节用于在后续视觉评审中插入「管理员后台」整体视觉截图（玻璃面板、侧栏 5 组折叠、顶栏面包屑 + 刷新 + 头像、17 个子页面索引）。

用途

本页面用于介绍管理员后台（/admin/*）的整体主题样式、通用组件拆分与 17 个子页面索引，作为后台所有页面的设计语言基线（SSOT）。

管理员后台已从暖色棕金主题切换至 Dramagon 暗色玻璃拟态 主题，与首页、用户页面保持统一视觉语言：

  • 基色：#050507 纯黑底 + #d11d3b Dramagon 红梅（主色）+ #ff7a18 虹膜橙（强调）
  • 面板：玻璃面板 rgba(255,255,255,0.025) + backdrop-blur(24px)
  • 侧栏：玻璃侧栏 rgba(5,5,7,0.55) + backdrop-blur(12px) + 5 组导航折叠
  • 顶栏：玻璃顶栏 + 面包屑 + 刷新 + 头像
  • 状态色：成功 #22c55e / 警告 #f59e0b / 错误 #ef4444 / 信息 #6366f1

使用前准备

  • 仅管理员账号可见；登录态与会话由 AdminGuard 守护。
  • 通用组件（AdminShell / AdminSidebar / AdminTopBar / AdminPanel 等）与具体页面解耦，可独立替换或升级。
  • 17 个子页面的数据契约与具体 API 字段请参照对应页面文档。
  • 主题切换不影响 antd 行为组件（Table / Drawer / Form / Select / DatePicker 等继续可用）。

操作步骤

主题与组件切换（FEAT-20260901-001）

  1. 主题变量统一在 src/styles/dramagon/admin.css 与 --dramagon-* CSS 令牌中定义。
  2. 通用组件位于 src/app/[locale]/admin/components/parts/ 与 src/components/admin/parts/ 两个目录，按「展示组件 vs 容器组件」拆分。
  3. 子页面无需直接引用主题变量；统一通过 AdminShell 包装层注入。

KPI 数据来源（FEAT-20260902-003）

  1. /api/admin/overview 响应中的 kpi 字段与设计稿 .design/dramagon-redesign/pages/admin-overview.html lines 556-577 1:1 对齐。
  2. KPI 字段口径：
KPI 字段含义数据源时间窗口
kpi.totalUsers全部用户数prisma.user.count()全量
kpi.activeProjects活跃项目数prisma.project.count({ where: { lastAccessedAt >= now - 30d } })30 天
kpi.taskThroughput.perHour过去 1 小时创建任务数prisma.task.count({ where: { createdAt >= now - 1h } })1 小时
kpi.taskThroughput.perDay过去 24 小时创建任务数prisma.task.count({ where: { createdAt >= now - 24h } })24 小时
kpi.creditsUsed积分消耗总量prisma.pointLedgerEntry.aggregate({ _sum: { consumedDelta: true }, where: { type: 'SETTLE', createdAt >= now - 30d } })30 天

视觉收口（FEAT-20260902-005）

  1. 数字格式：KPI 卡统一使用千分位（2,431 / 142,800），替换原缩写格式（2.4k / 142.8k / 1.2M）。实现位于 src/lib/format/credits.ts formatCredits(raw)，使用 BigInt 处理字符串入参。
  2. 趋势文案 i18n 化：4 张 KPI 卡的趋势文案改为 i18n key，zh/en 对称。
  3. 任务吞吐 perHour 主、perDay 副：主 value 显示 perHour；subtitle 通过新增 i18n key overview.kpi.taskThroughputPerDay 显示 perDay。

画风管理卡片 metadata（FEAT-20260902-006）

  1. /admin/art-styles 卡片底部 metadata 行与设计稿 lines 359-362 1:1 对齐。
  2. 用量字段以 {count, number} 次 格式展示，避免 0 用 / 247 用 这种中文计数怪句式。
  3. 版本字段直接展示 API 派生的 v{major}.{minor}，不再 prepend versionLabel i18n 键。
  4. API 字段：/api/admin/config-center/art-styles 响应末端的 usageCount 与 version 由 FEAT-20260902-004 注入。

结果与状态

用户模型并发

在“用户管理 → 基本资料”中可设置文本/分析、图片、视频、音频和其他类别兜底流程并发。五项必须为正整数；用户尚未配置时均按 5 生效。口型同步、编辑渲染等未归入前四类的模型任务使用“其他类别”上限。修改会写入管理员审计日志，个人模型设置仅展示生效值。

  • 主题切换（2026-09-01）：后台所有页面统一切换至 Dramagon 暗色玻璃拟态，旧 operations/admin-console.mdx 仍为运营排障入口。
  • KPI 数据契约：旧字段 users / projects / tasks.total / content.* 全部保留，新增 kpi.* 字段不破坏任何现有调用方。
  • 视觉收口：2026-09-02 Round 1 上线后，独立 UIUX 验收员发现 3 个 P1 问题（数字格式、趋势文案 i18n、任务吞吐主/副）全部修复。
  • 画风卡片：用量 + 版本字段按设计稿 1:1 对齐，绕过 antd 默认 <Tag> 的尺寸约束。
  • 依赖后端 BG-XXX 占位：API 耗时诊断页保持「规划态」，不创建 /admin/api-timing 路由与侧栏项。

权限和边界

  • 仅管理员账号可见；登录态与会话由 AdminGuard 守护。
  • 通用组件（AdminShell / AdminSidebar / AdminTopBar / AdminPanel 等）与具体页面解耦，可独立替换或升级。
  • 主题切换不影响 antd 行为组件（Table / Drawer / Form / Select / DatePicker 等继续可用）。
  • 旧版 operations/admin-console.mdx 仍为运营排障文档入口。
  • i18n key overview.kpi.depNotice 保留为 fallback（@deprecated）：仅当 kpi 字段缺失（后端版本回退）时渲染。

常见问题

  • Q：KPI 数字显示为 —？ A：检查 /api/admin/overview 响应是否包含 kpi.* 字段；若后端版本回退，UI 渲染 depNotice 占位文案（i18n key overview.kpi.depNotice）。
  • Q：主题变量不生效？ A：确认 src/styles/dramagon/admin.css 已加载；浏览器 DevTools 检查 :root 是否定义了 --dramagon-* 令牌。
  • Q：通用组件如何替换？ A：编辑 src/app/[locale]/admin/components/parts/ 下的对应组件；子页面会自动接收新组件。
  • Q：API 耗时诊断页找不到？ A：该页保持「规划态」，不创建路由与侧栏项；后端无 ApiCall 模型与埋点（BG-005）。

相关文档

Last updated on
模板管理诊断问题