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
+11 -11
View File
@@ -38,16 +38,16 @@ const NOTIFICATION_TYPE_LABELS: Record<string, string> = {
};
const NOTIFICATION_TYPE_ICONS: Record<string, React.ReactNode> = {
review_pending: <AlertCircle className="w-4 h-4 text-amber-500" />,
review_approved: <CheckCircle className="w-4 h-4 text-green-500" />,
review_rejected: <XCircle className="w-4 h-4 text-red-500" />,
review_pending: <AlertCircle className="w-4 h-4 text-warning-text" />,
review_approved: <CheckCircle className="w-4 h-4 text-success-text" />,
review_rejected: <XCircle className="w-4 h-4 text-error-text" />,
item_archived: <Archive className="w-4 h-4 text-text-muted" />,
};
const NOTIFICATION_TYPE_COLORS: Record<string, string> = {
review_pending: 'bg-amber-50 border-amber-200',
review_approved: 'bg-green-50 border-green-200',
review_rejected: 'bg-red-50 border-red-200',
review_pending: 'bg-warning-bg border-border-secondary',
review_approved: 'bg-success-bg border-border-secondary',
review_rejected: 'bg-error-bg border-border-secondary',
item_archived: 'bg-bg-secondary border-border-primary',
};
@@ -156,7 +156,7 @@ export default function NotificationsPage() {
<p className="text-sm text-text-muted mt-1">
共 {total} 条通知
{unreadCount > 0 && (
<span className="ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-700">
<span className="ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-error-bg text-error-text">
{unreadCount} 条未读
</span>
)}
@@ -194,7 +194,7 @@ export default function NotificationsPage() {
</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>
)}
@@ -223,12 +223,12 @@ export default function NotificationsPage() {
className={`relative flex items-start gap-4 p-4 rounded-lg border transition-colors ${
item.read
? 'bg-bg-primary border-border-light'
: NOTIFICATION_TYPE_COLORS[item.type] || 'bg-blue-50 border-blue-200'
: NOTIFICATION_TYPE_COLORS[item.type] || 'bg-info-bg border-border-secondary'
}`}
>
{/* Unread indicator */}
{!item.read && (
<div className="absolute top-4 left-4 w-2 h-2 rounded-full bg-blue-500" />
<div className="absolute top-4 left-4 w-2 h-2 rounded-full bg-info" />
)}
{/* Type icon */}
@@ -278,7 +278,7 @@ export default function NotificationsPage() {
{item.relatedItemId && item.relatedModelCode && (
<button
onClick={() => handleViewRelated(item)}
className="text-xs text-blue-600 hover:text-blue-800 flex items-center gap-1"
className="text-xs text-info-text hover:text-info flex items-center gap-1"
>
<ExternalLink className="w-3 h-3" />
查看详情