task-242(admin.html观感对齐): Element Plus 语义色/圆角对齐蓝白浅色（ep-overrides 单源）

admin-frontend-vue/src/styles/ep-overrides.ts

@@ -0,0 +1,35 @@
+/**
+ * Element Plus 主题对齐映射（module 13 task 242）：把 Element 默认语义色/圆角
+ * 对齐 admin.html 蓝白浅色皮肤。main.css 用 elCssVars() 的结果承载 --el-* 变量；
+ * tests 用本模块校验值正确且已落盘，防止 Element 默认红绿黄(#f56c6c/#67c23a/#e6a23c)回潮。
+ */
+export const EP_ALIGN = {
+  primary: '#4f78a5',
+  success: '#4e806d',
+  warning: '#a8793e',
+  danger: '#b35f6a',
+  borderColor: '#d8e3ee',
+  borderRadiusBase: '9px',
+} as const
+
+export type EpAlignKey = keyof typeof EP_ALIGN
+
+export function elCssVarName(key: EpAlignKey): string {
+  if (key === 'borderColor') return '--el-border-color'
+  if (key === 'borderRadiusBase') return '--el-border-radius-base'
+  return `--el-color-${key}`
+}
+
+/** 需要落盘到 main.css 的 --el-* 变量（key -> CSS 值）。 */
+export function elCssVars(): Record<string, string> {
+  const out: Record<string, string> = {}
+  for (const key of Object.keys(EP_ALIGN) as EpAlignKey[]) {
+    out[elCssVarName(key)] = EP_ALIGN[key]
+  }
+  // danger/success/warning 的 light 家族 Element 不会自动从 base 推导覆盖，
+  // 显式对齐成浅色调（供标签/提示等底色使用），避免仍偏默认色。
+  out['--el-color-success-light-9'] = '#eef5f0'
+  out['--el-color-warning-light-9'] = '#fbf4ea'
+  out['--el-color-danger-light-9'] = '#faf0f1'
+  return out
+}

admin-frontend-vue/src/styles/main.css

@@ -16,7 +16,16 @@
   --el-color-primary-light-8: #e1e9f0;
   --el-color-primary-light-9: #f0f4f8;
   --el-color-primary-dark-2: #3f628a;
-  --el-border-radius-base: 6px;
+  /* 语义色/边框/圆角对齐 admin.html 蓝白浅色皮肤（EP_ALIGN 单源，勿单独改） */
+  --el-color-success: #4e806d;
+  --el-color-warning: #a8793e;
+  --el-color-danger: #b35f6a;
+  --el-color-success-light-9: #eef5f0;
+  --el-color-warning-light-9: #fbf4ea;
+  --el-color-danger-light-9: #faf0f1;
+  --el-border-color: #d8e3ee;
+  --el-border-color-base: #d8e3ee;
+  --el-border-radius-base: 9px;
 }
 
 * { box-sizing: border-box; }

admin-frontend-vue/tests/task-242.test.ts

@@ -0,0 +1,72 @@
+import test from 'node:test'
+import assert from 'node:assert/strict'
+import { readSource } from './helpers.ts'
+import { contrastRatio } from '../src/styles/theme.ts'
+import { EP_ALIGN, elCssVarName, elCssVars } from '../src/styles/ep-overrides.ts'
+
+// module 13 task 242：Element Plus 全局语义色/圆角对齐 admin.html 蓝白浅色皮肤，
+// 避免页面仍用 Element 默认红/绿/黄与默认边框。
+
+test('test_task_242_ep_align_normal_primary_path', () => {
+  // 正常主路径：语义色命中 admin.html 蓝白基线。
+  assert.equal(EP_ALIGN.primary, '#4f78a5')
+  assert.equal(EP_ALIGN.success, '#4e806d')
+  assert.equal(EP_ALIGN.warning, '#a8793e')
+  assert.equal(EP_ALIGN.danger, '#b35f6a')
+  assert.equal(EP_ALIGN.borderColor, '#d8e3ee')
+})
+
+test('test_task_242_ep_align_normal_variant_input', () => {
+  // 正常变体：CSS 变量名生成规则符合 --el-color-<name>。
+  assert.equal(elCssVarName('danger'), '--el-color-danger')
+  assert.equal(elCssVarName('success'), '--el-color-success')
+  assert.equal(elCssVarName('warning'), '--el-color-warning')
+})
+
+test('test_task_242_ep_align_normal_repeated_operation_is_idempotent', () => {
+  // 正常重复：变量映射幂等、可安全合并多次。
+  const a = elCssVars()
+  const b = elCssVars()
+  assert.deepEqual(a, b)
+  assert.ok(Object.keys(a).length >= 5, '至少覆盖主色/成功/警告/危险/边框')
+})
+
+test('test_task_242_ep_align_boundary_empty_input', () => {
+  // 边界：全部 hex 合法、值与 Element 默认值不同（确认不是漏改的默认色）。
+  for (const v of [EP_ALIGN.primary, EP_ALIGN.success, EP_ALIGN.warning, EP_ALIGN.danger, EP_ALIGN.borderColor]) {
+    assert.match(v, /^#[0-9a-fA-F]{6}$/)
+  }
+  assert.notEqual(EP_ALIGN.danger, '#f56c6c', 'danger 不应停留在 Element 默认红')
+  assert.notEqual(EP_ALIGN.success, '#67c23a', 'success 不应停留在 Element 默认绿')
+  assert.notEqual(EP_ALIGN.warning, '#e6a23c', 'warning 不应停留在 Element 默认黄')
+})
+
+test('test_task_242_ep_align_boundary_single_item', () => {
+  // 边界单元素：danger/success 在浅色内容底上满足按钮文本对比。
+  const bg = '#ffffff'
+  assert.ok(contrastRatio('#ffffff', EP_ALIGN.danger) >= 3, '白字/危险渐变按钮需 ≥3')
+  assert.ok(contrastRatio(EP_ALIGN.success, bg) >= 3, '成功色可读')
+})
+
+test('test_task_242_ep_align_boundary_limit_or_missing_field', () => {
+  // 边界上限：圆角 token 有值；映射含边框变量。
+  assert.ok(typeof EP_ALIGN.borderRadiusBase === 'string' && EP_ALIGN.borderRadiusBase.trim().length > 0)
+  assert.ok('--el-border-color' in elCssVars() || '--el-border-color-base' in elCssVars())
+})
+
+test('test_task_242_ep_align_invalid_input_rejected', () => {
+  // 异常：main.css 必须落盘对齐后的语义色与圆角（readSource 交叉校验）。
+  const css = readSource('src/styles/main.css')
+  for (const [name, value] of Object.entries(elCssVars())) {
+    assert.ok(css.includes(`${name}: ${value}`), `main.css 缺 ${name}: ${value}`)
+  }
+  assert.ok(css.includes('--el-border-radius-base: 9px'), '圆角应对齐 admin 9px')
+  assert.equal(/@import/.test(css), false)
+})
+
+test('test_task_242_ep_align_dependency_failure_returns_actionable_message', () => {
+  // 依赖失败：按钮/输入框等关键组件仍依赖 --el-* 变量（防硬编码 Element 默认色绕过主题）。
+  const css = readSource('src/styles/main.css')
+  assert.ok(css.includes('--el-color-primary'), '主色变量需存在')
+  assert.ok(!/#f56c6c|#67c23a|#e6a23c/.test(css), 'main.css 不得残留 Element 默认红绿黄')
+})