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:
@@ -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" />
|
||||
查看详情
|
||||
|
||||
Reference in New Issue
Block a user