refactor(admin): tokenize 语义色并补暗黑模式变量覆盖

将 admin 8 文件 ~50 处 raw red/green/yellow/amber/blue 类替换为语义 token
(error/success/warning/info),使其错误/成功/警告框在暗黑模式正确反色。

- tailwind.config.js: error 补 text 子键(原缺,text-error 暗黑底仅 3.3:1 不达 AA)
- globals.css: 新增 --color-error-text;html[data-theme='dark'] 补四语义色的
  *-bg(深色底)与 *-text(浅色,暗底达 AA)覆盖,原暗黑块完全漏掉这些变量
- 映射纪律:语义框 bg-<c>-bg border border-border-secondary text-<c>-text;
  危险按钮 bg-error/bg-success hover:bg-*-hover text-white;字段校验 border-error

验证:type-check 0 errors;lint 0 errors;单测 1624 passed;视觉回归 22 passed;
Playwright 实测 8 变量 light/dark 翻转 + 真实登录错误框背景反色确认。

Co-Authored-By: 阿睿 <workbuddy@tencent.com>
This commit is contained in:
2026-09-01 07:26:53 +08:00
co-authored by 阿睿
parent e0828db0cc
commit 4af238bdd9
10 changed files with 85 additions and 68 deletions
+9 -9
View File
@@ -45,10 +45,10 @@ const ROLE_LABELS: Record<string, string> = {
};
const ROLE_COLORS: Record<string, string> = {
super_admin: 'bg-red-100 text-red-700',
content_admin: 'bg-blue-100 text-blue-700',
content_editor: 'bg-green-100 text-green-700',
reviewer: 'bg-amber-100 text-amber-700',
super_admin: 'bg-error-bg text-error-text',
content_admin: 'bg-info-bg text-info-text',
content_editor: 'bg-success-bg text-success-text',
reviewer: 'bg-warning-bg text-warning-text',
readonly: 'bg-bg-hover text-text-secondary',
};
@@ -266,7 +266,7 @@ export default function UsersPage() {
</div>
{error && (
<div className="p-4 bg-red-50 border border-red-200 rounded-lg text-sm text-red-600">
<div className="p-4 bg-error-bg border border-border-secondary rounded-lg text-sm text-error-text">
{error}
</div>
)}
@@ -344,8 +344,8 @@ export default function UsersPage() {
<span
className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${
u.status === 1
? 'bg-green-100 text-green-700'
: 'bg-red-100 text-red-700'
? 'bg-success-bg text-success-text'
: 'bg-error-bg text-error-text'
}`}
>
{u.status === 1 ? '启用' : '禁用'}
@@ -368,7 +368,7 @@ export default function UsersPage() {
</button>
<button
onClick={() => { setPendingDeleteId(u.id); setDeleteDialogOpen(true); }}
className="p-1.5 rounded hover:bg-red-50 text-text-muted hover:text-red-600"
className="p-1.5 rounded hover:bg-error-bg text-text-muted hover:text-error-text"
title="删除"
>
<Trash2 className="w-4 h-4" />
@@ -529,7 +529,7 @@ export default function UsersPage() {
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel></AlertDialogCancel>
<AlertDialogAction onClick={handleDelete} className="bg-red-600 hover:bg-red-700">
<AlertDialogAction onClick={handleDelete} className="bg-error hover:bg-error-hover">
</AlertDialogAction>
</AlertDialogFooter>