refactor(admin): 装饰性模型卡图标底复用 accent token 以暗黑反色

仪表盘模型卡/统计卡的 blue/amber/purple/teal/rose/indigo 图标底是纯装饰
多色强调(非语义状态),原用 raw bg-X-50 等 Solid 浅色,暗黑模式仍为浅色盒。

- 复用项目既有 accent 色组(bg-accent-{hue}-soft 透明浅色调 + text-accent-{hue}),
  透明 soft 叠加暗黑页面底色即自动反色为深色底(与 products-content-v3 /
  metric-card 既定模式一致)。
- tailwind.config.js + globals.css:accent 组补 rose/indigo 两色(DEFAULT + soft
  + rgb),blue/amber/teal/purple 已由既有 token 覆盖,无需新增。

验证:type-check 0 errors;lint 0 errors;单测 1624 passed;视觉回归 22 passed;
Playwright 实测新增 rose/indigo 变量接线正确,装饰框实际渲染色
浅 rgb(231,240,254) → 暗 rgb(16,28,47) 确认反色。

Co-Authored-By: 阿睿 <workbuddy@tencent.com>
This commit is contained in:
2026-09-01 07:40:43 +08:00
co-authored by 阿睿
parent 4af238bdd9
commit ac21936785
3 changed files with 22 additions and 10 deletions
+10 -10
View File
@@ -48,13 +48,13 @@ interface DashboardStats {
} }
const modelCards = [ const modelCards = [
{ code: 'news', name: '新闻资讯', icon: Newspaper, color: 'bg-blue-50 text-blue-600' }, { code: 'news', name: '新闻资讯', icon: Newspaper, color: 'bg-accent-blue-soft text-accent-blue' },
{ code: 'case-study', name: '案例研究', icon: Briefcase, color: 'bg-amber-50 text-amber-600' }, { code: 'case-study', name: '案例研究', icon: Briefcase, color: 'bg-accent-amber-soft text-accent-amber' },
{ code: 'service', name: '服务管理', icon: Settings, color: 'bg-success-bg text-success-text' }, { code: 'service', name: '服务管理', icon: Settings, color: 'bg-success-bg text-success-text' },
{ code: 'product', name: '产品管理', icon: Box, color: 'bg-purple-50 text-purple-600' }, { code: 'product', name: '产品管理', icon: Box, color: 'bg-accent-purple-soft text-accent-purple' },
{ code: 'solution', name: '解决方案', icon: Layers, color: 'bg-teal-50 text-teal-600' }, { code: 'solution', name: '解决方案', icon: Layers, color: 'bg-accent-teal-soft text-accent-teal' },
{ code: 'hero-banner', name: 'Hero Banner', icon: Image, color: 'bg-rose-50 text-rose-600' }, { code: 'hero-banner', name: 'Hero Banner', icon: Image, color: 'bg-accent-rose-soft text-accent-rose' },
{ code: 'stat-item', name: '数据指标', icon: BarChart3, color: 'bg-indigo-50 text-indigo-600' }, { code: 'stat-item', name: '数据指标', icon: BarChart3, color: 'bg-accent-indigo-soft text-accent-indigo' },
]; ];
const MODEL_LABELS: Record<string, string> = { const MODEL_LABELS: Record<string, string> = {
@@ -130,9 +130,9 @@ export default function AdminDashboardPage() {
{/* Stats cards */} {/* Stats cards */}
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4"> <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4">
{[ {[
{ label: '内容模型', value: stats?.models ?? '-', icon: FileText, color: 'bg-blue-50' }, { label: '内容模型', value: stats?.models ?? '-', icon: FileText, color: 'bg-accent-blue-soft' },
{ label: '内容条目', value: stats?.items ?? '-', icon: Layers, color: 'bg-purple-50' }, { label: '内容条目', value: stats?.items ?? '-', icon: Layers, color: 'bg-accent-purple-soft' },
{ label: '页面区域', value: stats?.zones ?? '-', icon: Briefcase, color: 'bg-amber-50' }, { label: '页面区域', value: stats?.zones ?? '-', icon: Briefcase, color: 'bg-accent-amber-soft' },
{ label: '活跃用户', value: stats?.activeUsers ?? '-', icon: Users, color: 'bg-success-bg' }, { label: '活跃用户', value: stats?.activeUsers ?? '-', icon: Users, color: 'bg-success-bg' },
{ {
label: '待审核', label: '待审核',
@@ -145,7 +145,7 @@ export default function AdminDashboardPage() {
label: '未读通知', label: '未读通知',
value: stats?.unreadNotifications ?? '-', value: stats?.unreadNotifications ?? '-',
icon: Bell, icon: Bell,
color: 'bg-indigo-50', color: 'bg-accent-indigo-soft',
highlight: (stats?.unreadNotifications ?? 0) > 0, highlight: (stats?.unreadNotifications ?? 0) > 0,
}, },
].map((stat) => ( ].map((stat) => (
+8
View File
@@ -51,6 +51,14 @@ body {
--color-accent-cyan-soft: rgba(6, 182, 212, 0.12); --color-accent-cyan-soft: rgba(6, 182, 212, 0.12);
--color-accent-cyan-rgb: 6 182 212; --color-accent-cyan-rgb: 6 182 212;
--color-accent-rose: #E11D48;
--color-accent-rose-soft: rgba(225, 29, 72, 0.12);
--color-accent-rose-rgb: 225 29 72;
--color-accent-indigo: #4F46E5;
--color-accent-indigo-soft: rgba(79, 70, 229, 0.12);
--color-accent-indigo-rgb: 79 70 229;
/* 背景色层级 */ /* 背景色层级 */
--color-bg-primary: #FFFFFF; --color-bg-primary: #FFFFFF;
--color-bg-secondary: #F8FAFC; --color-bg-secondary: #F8FAFC;
+4
View File
@@ -41,6 +41,10 @@ module.exports = {
'purple-soft': 'var(--color-accent-purple-soft)', 'purple-soft': 'var(--color-accent-purple-soft)',
cyan: 'rgb(var(--color-accent-cyan-rgb) / <alpha-value>)', cyan: 'rgb(var(--color-accent-cyan-rgb) / <alpha-value>)',
'cyan-soft': 'var(--color-accent-cyan-soft)', 'cyan-soft': 'var(--color-accent-cyan-soft)',
rose: 'rgb(var(--color-accent-rose-rgb) / <alpha-value>)',
'rose-soft': 'var(--color-accent-rose-soft)',
indigo: 'rgb(var(--color-accent-indigo-rgb) / <alpha-value>)',
'indigo-soft': 'var(--color-accent-indigo-soft)',
}, },
bg: { bg: {
primary: 'rgb(var(--color-bg-primary-rgb) / <alpha-value>)', primary: 'rgb(var(--color-bg-primary-rgb) / <alpha-value>)',