From ac21936785a47175f378d7e23427569a27514d0a Mon Sep 17 00:00:00 2001 From: zhangxiang Date: Tue, 1 Sep 2026 07:40:43 +0800 Subject: [PATCH] =?UTF-8?q?refactor(admin):=20=E8=A3=85=E9=A5=B0=E6=80=A7?= =?UTF-8?q?=E6=A8=A1=E5=9E=8B=E5=8D=A1=E5=9B=BE=E6=A0=87=E5=BA=95=E5=A4=8D?= =?UTF-8?q?=E7=94=A8=20accent=20token=20=E4=BB=A5=E6=9A=97=E9=BB=91?= =?UTF-8?q?=E5=8F=8D=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 仪表盘模型卡/统计卡的 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: 阿睿 --- src/app/admin/page.tsx | 20 ++++++++++---------- src/app/globals.css | 8 ++++++++ tailwind.config.js | 4 ++++ 3 files changed, 22 insertions(+), 10 deletions(-) diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx index 515e525..28fc203 100644 --- a/src/app/admin/page.tsx +++ b/src/app/admin/page.tsx @@ -48,13 +48,13 @@ interface DashboardStats { } const modelCards = [ - { code: 'news', name: '新闻资讯', icon: Newspaper, color: 'bg-blue-50 text-blue-600' }, - { code: 'case-study', name: '案例研究', icon: Briefcase, color: 'bg-amber-50 text-amber-600' }, + { code: 'news', name: '新闻资讯', icon: Newspaper, color: 'bg-accent-blue-soft text-accent-blue' }, + { 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: 'product', name: '产品管理', icon: Box, color: 'bg-purple-50 text-purple-600' }, - { code: 'solution', name: '解决方案', icon: Layers, color: 'bg-teal-50 text-teal-600' }, - { code: 'hero-banner', name: 'Hero Banner', icon: Image, color: 'bg-rose-50 text-rose-600' }, - { code: 'stat-item', name: '数据指标', icon: BarChart3, color: 'bg-indigo-50 text-indigo-600' }, + { code: 'product', name: '产品管理', icon: Box, color: 'bg-accent-purple-soft text-accent-purple' }, + { code: 'solution', name: '解决方案', icon: Layers, color: 'bg-accent-teal-soft text-accent-teal' }, + { code: 'hero-banner', name: 'Hero Banner', icon: Image, color: 'bg-accent-rose-soft text-accent-rose' }, + { code: 'stat-item', name: '数据指标', icon: BarChart3, color: 'bg-accent-indigo-soft text-accent-indigo' }, ]; const MODEL_LABELS: Record = { @@ -130,9 +130,9 @@ export default function AdminDashboardPage() { {/* Stats cards */}
{[ - { label: '内容模型', value: stats?.models ?? '-', icon: FileText, color: 'bg-blue-50' }, - { label: '内容条目', value: stats?.items ?? '-', icon: Layers, color: 'bg-purple-50' }, - { label: '页面区域', value: stats?.zones ?? '-', icon: Briefcase, color: 'bg-amber-50' }, + { label: '内容模型', value: stats?.models ?? '-', icon: FileText, color: 'bg-accent-blue-soft' }, + { label: '内容条目', value: stats?.items ?? '-', icon: Layers, color: 'bg-accent-purple-soft' }, + { label: '页面区域', value: stats?.zones ?? '-', icon: Briefcase, color: 'bg-accent-amber-soft' }, { label: '活跃用户', value: stats?.activeUsers ?? '-', icon: Users, color: 'bg-success-bg' }, { label: '待审核', @@ -145,7 +145,7 @@ export default function AdminDashboardPage() { label: '未读通知', value: stats?.unreadNotifications ?? '-', icon: Bell, - color: 'bg-indigo-50', + color: 'bg-accent-indigo-soft', highlight: (stats?.unreadNotifications ?? 0) > 0, }, ].map((stat) => ( diff --git a/src/app/globals.css b/src/app/globals.css index 492addd..ff5f246 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -51,6 +51,14 @@ body { --color-accent-cyan-soft: rgba(6, 182, 212, 0.12); --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-secondary: #F8FAFC; diff --git a/tailwind.config.js b/tailwind.config.js index 1056b7f..f4a0168 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -41,6 +41,10 @@ module.exports = { 'purple-soft': 'var(--color-accent-purple-soft)', cyan: 'rgb(var(--color-accent-cyan-rgb) / )', 'cyan-soft': 'var(--color-accent-cyan-soft)', + rose: 'rgb(var(--color-accent-rose-rgb) / )', + 'rose-soft': 'var(--color-accent-rose-soft)', + indigo: 'rgb(var(--color-accent-indigo-rgb) / )', + 'indigo-soft': 'var(--color-accent-indigo-soft)', }, bg: { primary: 'rgb(var(--color-bg-primary-rgb) / )',