管理端：设计系统 v2 收敛 + 修复漏斗卡恒为 0 的响应式缺陷

## 一、设计系统收敛

- theme/index.css 重写为 token 底座：品牌三级、语义五组、文字四级、
  边框/背景/圆角/阴影/动效/热区/排版刻度
- 修复 Element Plus 派生色阶残留：--el-color-*-light-N 是 SCSS 编译期静态生成，
  只覆盖基色不会带动它们 —— 数据统计页实测 133 处元素仍在用 EP 默认调色板
  （其中主色蓝 8 处）。已按 mix(#fff,base,N*10%) / mix(#000,base,20%) 补全全部档位
- 新增 src/theme/tokens.ts：模板里 :style 需拼 8 位 hex（color + '15'），用不了 var()，
  故以 TS 常量镜像色值；守卫会双向校验它与 index.css 同名取值一致
- 24 个 .vue 收敛：硬编码色值 97 处/67 种 → 0；越界字号 88 处（最低 9px）→ 0；
  非法字重 650×6 → 0；触摸目标 17 处 <44px → 全部 ≥44px
- 对比度：text-tertiary 3.54:1、warning 2.33:1、coral 作文字 3.14:1 → 全部 ≥4.5:1
- 新增守卫 ui-tests/admin-design-tokens.mjs（含 WCAG 对比度实算）

## 二、修复既有功能性缺陷：数据统计页漏斗卡与安全卡恒显示 0

- 现象：同一张卡片里，上方漏斗数字全是 0，下方汇总表却是 12846/9217/8462/3812，
  界面自相矛盾
- 根因：funnelStages / matchStages / safetyCards 是普通数组（const x = [...]），
  loadFunnel() 直接改元素属性，模板读的却是同一个数组 —— 非响应式写入不触发重渲染。
  同页凡走 ref 的值（汇总表、V11 区块）全部正常，规律清晰
- 修法（按根因）：三个集合改为 computed() 从既有 ref 派生，卡片与汇总表因此同源，
  结构上不可能再出现「同一份数据的两处展示对不上」；另把 loadFunnel() 内遮蔽
  颜色助手的局部变量 const token 改名 authToken
- 该缺陷无 TS/lint/构建报错，前 18 个守卫全绿也抓不到 —— 只有真跑起来看渲染结果才暴露
- 新增守卫 ui-tests/admin-reactivity-contracts.mjs：
  ①非响应式状态（普通声明 + 被当状态写 + 出现在模板里；未被写过的静态常量清单合法）
  ②数据统计页同源契约 ③颜色助手遮蔽

## 验证

- UI 契约门禁 20/20 PASS（MIN_GUARDS 18→20）
- 负向注入 3 例全部 FAIL(exit 1)，还原后复跑 exit 0（证明守卫有判别力）
- vue-tsc --noEmit exit 0
- vite build 成功（17.74s）
- 渲染态实测（Edge 无头 + CDP 读渲染后 DOM，同一 mock、同一路由，只差代码）：
  修复前漏斗卡/安全卡全 0、比率全 '-' → 修复后 12846/9217/8462/3812/
  48210/51236/7420/4380/1926/1284，安全卡 17/214/23/9

交付物：artifacts/admin-design-v2-preview.html

admin-web/src/modules/banner/BannerManagementView.vue

@@ -302,21 +302,21 @@ onMounted(loadBanners)
 <style scoped>
 .card-header { display: flex; justify-content: space-between; align-items: center; }
 .field-hint { width: 100%; font-size: 12px; color: var(--el-text-color-secondary); line-height: 1.5; }
-.preview-stage { padding: 20px; background: #f5f6f8; border-radius: 12px; }
+.preview-stage { padding: 20px; background: var(--color-bg-subtle); border-radius: 12px; }
 .preview-card {
   padding: 20px 18px;
   border-radius: 16px;
-  background: linear-gradient(135deg, #ffe9df, #fff7f2);
+  background: var(--gradient-brand-soft); /* 还原消费端 Banner 预览底色 */
   box-shadow: 0 6px 16px rgba(200, 120, 100, 0.16);
 }
 .preview-tag {
   display: inline-block; padding: 2px 10px; border-radius: 999px;
-  background: rgba(255, 255, 255, 0.85); color: #c8553d; font-size: 12px;
+  background: var(--color-bg-overlay); color: var(--admin-coral-strong); font-size: var(--font-size-xs);
 }
-.preview-title { margin-top: 10px; font-size: 17px; font-weight: 700; color: #2c2c34; }
-.preview-subtitle { margin-top: 6px; font-size: 12px; line-height: 1.6; color: #6b6b78; }
+.preview-title { margin-top: 10px; font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); color: var(--color-text-primary); }
+.preview-subtitle { margin-top: 6px; font-size: var(--font-size-xs); line-height: 1.6; color: var(--color-text-tertiary); }
 .preview-button {
   display: inline-block; margin-top: 14px; padding: 5px 16px; border-radius: 999px;
-  background: linear-gradient(135deg, #ff7d6e, #ff5c82); color: #fff; font-size: 12px; font-weight: 600;
+  background: var(--gradient-brand-vivid); color: var(--color-text-inverse); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); min-height: var(--tap-control); /* 还原消费端 Banner 按钮外观预览 */
 }
 </style>