265 lines
2.7 MiB
HTML
265 lines
2.7 MiB
HTML
<!DOCTYPE html>
|
||||
|
|
<html lang="zh-CN">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8" />
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|||
|
|
<title>善缘丹阳 · 管理端设计系统 v2 改造对照</title>
|
|||
|
|
<style>
|
|||
|
|
:root{
|
|||
|
|
--brand:#C84A53; --brand-strong:#C0414A; --brand-vivid:#F45F68; --brand-soft:#FAEDEE;
|
|||
|
|
--text-strong:#1A1F36; --text:#2A3050; --text-2:#4A5169; --text-3:#676E7B;
|
|||
|
|
--bg:#F6F5F3; --card:#FFFFFF; --subtle:#F5F6FA; --border:#E6E8EF; --line:#EFF0F5;
|
|||
|
|
--ok:#2F7D5B; --ok-soft:#E9F2ED; --warn:#8A6A2B; --warn-soft:#FBF3E4; --bad:#B23B3B; --bad-soft:#FBECEC;
|
|||
|
|
}
|
|||
|
|
*{box-sizing:border-box}
|
|||
|
|
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
|
|||
|
|
.wrap{max-width:1500px;margin:0 auto;padding:32px 24px 72px}
|
|||
|
|
h1{font-size:30px;line-height:1.25;margin:0 0 8px;color:var(--text-strong)}
|
|||
|
|
h2{font-size:21px;margin:44px 0 14px;color:var(--text-strong);padding-bottom:8px;border-bottom:2px solid var(--line)}
|
|||
|
|
h3{font-size:16px;margin:0 0 10px;color:var(--text-strong)}
|
|||
|
|
.lede{color:var(--text-2);margin:0 0 6px}
|
|||
|
|
.muted{color:var(--text-3);font-weight:400;font-size:13px}
|
|||
|
|
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:22px 0 6px}
|
|||
|
|
.kpi{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 18px}
|
|||
|
|
.kpi b{display:block;font-size:26px;color:var(--brand-strong);line-height:1.2}
|
|||
|
|
.kpi span{font-size:12px;color:var(--text-3)}
|
|||
|
|
table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden;font-size:13.5px}
|
|||
|
|
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
|
|||
|
|
th{background:var(--subtle);color:var(--text-strong);font-weight:600;font-size:12.5px;letter-spacing:.02em}
|
|||
|
|
tr:last-child td{border-bottom:0}
|
|||
|
|
td.after{color:var(--ok);font-weight:600}
|
|||
|
|
td.before{color:var(--bad)}
|
|||
|
|
code{background:var(--subtle);border:1px solid var(--border);border-radius:5px;padding:1px 5px;font-size:12.5px}
|
|||
|
|
.swatch{display:inline-block;width:11px;height:11px;border-radius:3px;vertical-align:-1px;margin-right:5px;border:1px solid rgba(0,0,0,.12)}
|
|||
|
|
.shot{margin:26px 0 0;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px 18px 20px}
|
|||
|
|
.pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
|
|||
|
|
figure{margin:0}
|
|||
|
|
figure img{width:100%;height:auto;display:block;border:1px solid var(--border);border-radius:9px;background:#fff}
|
|||
|
|
figcaption{margin-top:7px;font-size:12.5px;color:var(--text-2)}
|
|||
|
|
.pair figure:first-child figcaption b{color:var(--bad)}
|
|||
|
|
.pair figure:last-child figcaption b{color:var(--ok)}
|
|||
|
|
.note{background:var(--warn-soft);border:1px solid #EBD9B4;border-radius:12px;padding:14px 18px;margin:18px 0 0}
|
|||
|
|
.note h3{color:var(--warn);margin-bottom:6px}
|
|||
|
|
ul{margin:6px 0 0;padding-left:20px}
|
|||
|
|
li{margin:3px 0}
|
|||
|
|
.tag{display:inline-block;font-size:11.5px;padding:2px 9px;border-radius:999px;background:var(--brand-soft);color:var(--brand-strong);border:1px solid #F0D5D7}
|
|||
|
|
.ok{background:var(--ok-soft);color:var(--ok);border-color:#CFE4D8}
|
|||
|
|
footer{margin-top:40px;color:var(--text-3);font-size:12.5px;border-top:1px solid var(--line);padding-top:14px}
|
|||
|
|
@media (max-width:1000px){.pair{grid-template-columns:1fr}}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="wrap">
|
|||
|
|
|
|||
|
|
<span class="tag">管理端 · admin-web</span>
|
|||
|
|
<span class="tag ok">20/20 契约门禁通过</span>
|
|||
|
|
<h1>管理端设计系统 v2 改造对照</h1>
|
|||
|
|
<p class="lede">用与小程端相同的收敛手法,把 admin-web(Vue3 + Element Plus)的样式统一到一套 token 上:颜色、字号、字重、触摸目标、对比度,并补上 Element Plus 派生色阶联动。</p>
|
|||
|
|
<p class="muted">范围:24 个 .vue 中的 style 块 + <code>src/theme/index.css</code>(重写为底座)+ 新增 <code>src/theme/tokens.ts</code>(TS 侧色值镜像)。另含复验中咬出并修复的 1 个既有功能性缺陷(见第六节)。</p>
|
|||
|
|
|
|||
|
|
<div class="kpis">
|
|||
|
|
<div class="kpi"><b>0</b><span>硬编码色值(原 97 处 / 67 种)</span></div>
|
|||
|
|
<div class="kpi"><b>0</b><span>越界字号(原 88 处,最低 9px)</span></div>
|
|||
|
|
<div class="kpi"><b>0</b><span>EP 默认调色板残留(数据统计页原 133 处)</span></div>
|
|||
|
|
<div class="kpi"><b>4 / 4</b><span>页面实测无 <11px 文本</span></div>
|
|||
|
|
<div class="kpi"><b>20 / 20</b><span>UI 契约门禁(新增 1 个响应式守卫)</span></div>
|
|||
|
|
<div class="kpi"><b>1</b><span>复验咬出并已修复的既有缺陷</span></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<h2>一、修复的缺陷类别(附实测数字)</h2>
|
|||
|
|
<table>
|
|||
|
|
<tr><th style="width:190px">类别</th><th style="width:38%">改造前(实测)</th><th style="width:26%">改造后</th><th>证据来源</th></tr>
|
|||
|
|
<tr><td><b>Element Plus 派生色阶残留</b></td><td class="before">light-3/5/7/8/9、dark-2 及 success/warning/danger/info 的 light-N 全是 EP 默认值;<b>数据统计页实测 133 处元素仍在使用 EP 默认调色板</b>(其中主色蓝 8 处、success 14、danger 10、warning 8、info 92)</td><td class="after">全部档位按品牌基调重算;4 个页面实测 <b>0 处</b></td><td class="muted">渲染态 CDP 实测</td></tr>
|
|||
|
|
<tr><td><b>硬编码色值</b></td><td class="before">97 处 / 67 种色值</td><td class="after">0</td><td class="muted">守卫</td></tr>
|
|||
|
|
<tr><td><b>硬编码字号</b></td><td class="before">88 处;其中 20 处 ≤11px(最低 9px,工作台实测 9px×27 / 10px×42)</td><td class="after">0 处越界;实测最低 11px</td><td class="muted">守卫 + 渲染态</td></tr>
|
|||
|
|
<tr><td><b>非法字重</b></td><td class="before">6 处 650(缺字重平台会回退,渲染不一致)</td><td class="after">0;仅用 400/500/600/700</td><td class="muted">守卫 + 渲染态</td></tr>
|
|||
|
|
<tr><td><b>对比度不达标</b></td><td class="before">text-tertiary #888 3.54:1、warning #E59A32 2.33:1、coral #F45F68 作文字 3.14:1</td><td class="after">全部 ≥4.5:1(11 组实算判定)</td><td class="muted">守卫(WCAG 实算)</td></tr>
|
|||
|
|
<tr><td><b>触摸目标偏小</b></td><td class="before">17 处 <44px</td><td class="after">全部 ≥44px</td><td class="muted">守卫</td></tr>
|
|||
|
|
<tr><td><b><small> 依赖 UA 默认字号</b></td><td class="before">浏览器对 <small> 默认 <code>font-size: smaller</code>(0.833em),父级 11px→实际 9.17px、12px→10px</td><td class="after">统一继承父级字号 + 关键处显式声明,实测 ≥11px</td><td class="muted">本轮渲染态新发现</td></tr>
|
|||
|
|
</table>
|
|||
|
|
|
|||
|
|
<h2>二、核心 token 对照</h2>
|
|||
|
|
<p class="muted">Element Plus 的 <code>--el-color-*-light-N</code> 是 SCSS 编译期静态生成的:只改 <code>--el-color-primary</code> 不会带动它们,残留下来的就是 EP 默认蓝。</p>
|
|||
|
|
<table>
|
|||
|
|
<tr><th style="width:260px">token</th><th style="width:30%">改造前</th><th style="width:20%">改造后</th><th>说明</th></tr>
|
|||
|
|
<tr><td><code>--el-color-primary</code></td><td class="before">#f45f68(只覆盖了基色)</td><td class="after"><span class="swatch" style="background:#C84A53"></span>#C84A53</td><td class="muted">实心底 + 白字 4.60:1</td></tr>
|
|||
|
|
<tr><td><code>--el-color-primary-light-3</code></td><td class="before">#79bbff ← EP 默认蓝</td><td class="after"><span class="swatch" style="background:#d98087"></span>#d98087</td><td class="muted">按 mix(#fff,base,30%) 重算</td></tr>
|
|||
|
|
<tr><td><code>--el-color-primary-light-5</code></td><td class="before">#a0cfff ← EP 默认蓝</td><td class="after"><span class="swatch" style="background:#e4a5a9"></span>#e4a5a9</td><td class="muted">mix(#fff,base,50%)</td></tr>
|
|||
|
|
<tr><td><code>--el-color-primary-light-7</code></td><td class="before">#c6e2ff ← EP 默认蓝</td><td class="after"><span class="swatch" style="background:#efc9cb"></span>#efc9cb</td><td class="muted">mix(#fff,base,70%)</td></tr>
|
|||
|
|
<tr><td><code>--el-color-primary-light-8</code></td><td class="before">#d9ecff ← EP 默认蓝</td><td class="after"><span class="swatch" style="background:#f4dbdd"></span>#f4dbdd</td><td class="muted">mix(#fff,base,80%)</td></tr>
|
|||
|
|
<tr><td><code>--el-color-primary-light-9</code></td><td class="before">#ecf5ff ← EP 默认蓝</td><td class="after"><span class="swatch" style="background:#faedee"></span>#faedee</td><td class="muted">mix(#fff,base,90%)</td></tr>
|
|||
|
|
<tr><td><code>--el-color-primary-dark-2</code></td><td class="before">#337ecc ← EP 默认蓝</td><td class="after"><span class="swatch" style="background:#a03b42"></span>#a03b42</td><td class="muted">mix(#000,base,20%)</td></tr>
|
|||
|
|
<tr><td><code>--el-color-info</code></td><td class="before">#909399</td><td class="after"><span class="swatch" style="background:#656C79"></span>#656C79</td><td class="muted">info 语义是「中性/未知」,保持灰调</td></tr>
|
|||
|
|
<tr><td><code>--color-text-tertiary</code></td><td class="before">#888888(3.54:1)</td><td class="after"><span class="swatch" style="background:#676E7B"></span>#676E7B</td><td class="muted">白底 5.13:1 / 浅底 4.74:1</td></tr>
|
|||
|
|
<tr><td><code>--admin-coral-strong</code></td><td class="before">(未定义)</td><td class="after"><span class="swatch" style="background:#C0414A"></span>#C0414A</td><td class="muted">深一档,专供白底文字 5.13:1</td></tr>
|
|||
|
|
<tr><td><code>--admin-coral-solid</code></td><td class="before">(未定义)</td><td class="after"><span class="swatch" style="background:#C84A53"></span>#C84A53</td><td class="muted">实心底 + 白字 4.60:1</td></tr>
|
|||
|
|
<tr><td><code>--tap-min</code></td><td class="before">(未定义)</td><td class="after">44px</td><td class="muted">触摸目标下限</td></tr>
|
|||
|
|
<tr><td><code>--font-size-base</code></td><td class="before">(未定义)</td><td class="after">14px</td><td class="muted">正文基准</td></tr>
|
|||
|
|
</table>
|
|||
|
|
|
|||
|
|
<h2>三、字号与字重收敛(工作台渲染态实测)</h2>
|
|||
|
|
<table>
|
|||
|
|
<tr><th style="width:150px">维度</th><th>改造前</th><th>改造后</th></tr>
|
|||
|
|
<tr><td><b>字号分布</b></td>
|
|||
|
|
<td class="before">9px×27 · 10px×42 · 11px×35 · 12px×22 · 13px×9 · 14px×123 · 15px×3 · 16px×29 · 17px×73 · 20px×6 · 21px×6 · 22px×1 · 27px×1 · 30px×13 · 31px×3</td>
|
|||
|
|
<td class="after">11px×90 · 12px×37 · 13px×9 · 14px×123 · 15px×3 · 16px×102 · 20px×13 · 24px×1 · 28px×16</td></tr>
|
|||
|
|
<tr><td><b>字重分布</b></td><td class="before">400 / 500 / 600 / <b>650×6</b> / 700</td><td class="after">仅 400 / 500 / 600 / 700</td></tr>
|
|||
|
|
<tr><td><b>层级倒挂</b></td><td class="before">指标数字 30px > 页面标题 24px(数字比标题更抢眼)</td><td class="after">标题 24px / 指标 24px / 区块 20px,层级归位</td></tr>
|
|||
|
|
</table>
|
|||
|
|
<p class="muted">字号刻度收敛为:micro 11 / xs 12 / sm 13 / base 14 / md 15 / lg 16 / xl 18 / 2xl 20 / 3xl 24 / 4xl 28 / 5xl 32 / display 38。</p>
|
|||
|
|
|
|||
|
|
<h2>四、1440×900 目视对照</h2>
|
|||
|
|
<p class="muted">系统自带 Edge(Chromium 内核)无头截图,视口 1440×900、缩放 1x,页面数据来自本地 mock。
|
|||
|
|
已目视核对<b>工作台</b>与<b>数据统计</b>的前后对照;<b>登录页与申诉管理页未逐张细看</b>,请人工过目。
|
|||
|
|
数值层面另以「计算样式实测 + 守卫断言」为准。</p>
|
|||
|
|
<p class="muted"><b>提示</b>:本节截图的「改造后」列取自<b>已修复漏斗缺陷</b>的产物,
|
|||
|
|
故数据统计页的漏斗卡显示的是真实数字;修复前后的专项对照见第六节。</p>
|
|||
|
|
|
|||
|
|
<section class="shot">
|
|||
|
|
<h3>登录页 <span class="muted">品牌视觉与表单密度</span></h3>
|
|||
|
|
<div class="pair">
|
|||
|
|
<figure>
|
|||
|
|
<img src="data:image/png;base64,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
|
|||
|
|
<figcaption><b>改造前</b></figcaption>
|
|||
|
|
</figure>
|
|||
|
|
<figure>
|
|||
|
|
<img src="data:image/png;base64,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
|
|||
|
|
<figcaption><b>改造后</b></figcaption>
|
|||
|
|
</figure>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
<section class="shot">
|
|||
|
|
<h3>工作台 <span class="muted">指标卡 / 待办 / 活动列表 / 漏斗</span></h3>
|
|||
|
|
<div class="pair">
|
|||
|
|
<figure>
|
|||
|
|
<img src="data:image/png;base64,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
|
|||
|
|
<figcaption><b>改造前</b></figcaption>
|
|||
|
|
</figure>
|
|||
|
|
<figure>
|
|||
|
|
<img src="data:image/png;base64,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
|
|||
|
|
<figcaption><b>改造后</b></figcaption>
|
|||
|
|
</figure>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
<section class="shot">
|
|||
|
|
<h3>申诉管理 <span class="muted">统计卡 + 列表 + 弹窗触发器</span></h3>
|
|||
|
|
<div class="pair">
|
|||
|
|
<figure>
|
|||
|
|
<img src="data:image/png;base64,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
|
|||
|
|
<figcaption><b>改造前</b></figcaption>
|
|||
|
|
</figure>
|
|||
|
|
<figure>
|
|||
|
|
<img src="data:image/png;base64,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
|
|||
|
|
<figcaption><b>改造后</b></figcaption>
|
|||
|
|
</figure>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
<section class="shot">
|
|||
|
|
<h3>数据统计 <span class="muted">漏斗阶段色 / 表格 / 标签(EP 默认色重灾区)</span></h3>
|
|||
|
|
<div class="pair">
|
|||
|
|
<figure>
|
|||
|
|
<img src="data:image/png;base64,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
|
|||
|
|
<figcaption><b>改造前</b></figcaption>
|
|||
|
|
</figure>
|
|||
|
|
<figure>
|
|||
|
|
<img src="data:image/png;base64,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
|
|||
|
|
<figcaption><b>改造后</b></figcaption>
|
|||
|
|
</figure>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<h2>五、验证结果</h2>
|
|||
|
|
<table>
|
|||
|
|
<tr><th style="width:230px">项目</th><th style="width:52%">结果</th><th>命令 / 方式</th></tr>
|
|||
|
|
<tr><td><b>UI 契约门禁(全量)</b></td><td><b>20 / 20 PASS</b>,0 失败,10.4s</td><td class="muted"><code>node scripts/run-ui-contracts.mjs</code></td></tr>
|
|||
|
|
<tr><td><b>新增守卫 admin-design-tokens</b></td><td><b>PASS</b>:未定义 token 0 / 硬编码色值 0 / 越界字号 0 / 非法字重 0 / 对比度 11 组实算 / tokens.ts↔index.css 20 项一致</td><td class="muted"><code>node ui-tests/admin-design-tokens.mjs</code></td></tr>
|
|||
|
|
<tr><td><b>新增守卫 admin-reactivity-contracts</b></td><td><b>PASS</b>:扫描 24 个 .vue、23 个 v-for 绑定点 → 非响应式状态 <b>0</b>、颜色助手遮蔽 <b>0</b>(静态常量清单 3 处正确豁免)</td><td class="muted"><code>node ui-tests/admin-reactivity-contracts.mjs</code></td></tr>
|
|||
|
|
<tr><td><b>守卫判别力(负向注入 · 设计守卫)</b></td><td>抽掉 <code>.scene-footer small</code> 的 font-size → 守卫 <b>FAIL(exit 1)</b>,3b 计数 1</td><td class="muted"><code>注入 → 复测 → 还原</code></td></tr>
|
|||
|
|
<tr><td><b>守卫判别力(负向注入 · 响应式守卫)</b></td><td><b>3 例注入全部咬住(exit 1)</b>:①普通数组+直接改元素+v-for ②汇总表改硬编码数字(同源契约)③颜色助手被同名局部变量遮蔽;<b>还原后复跑 exit 0</b></td><td class="muted"><code>node .workbuddy/neg-inject-admin.mjs</code></td></tr>
|
|||
|
|
<tr><td><b>漏斗缺陷修复(行为验证)</b></td><td>同一 mock、同一路由,只差代码:修复前漏斗卡/安全卡 <b>全 0</b>、比率全 <code>-</code> → 修复后 <b>12846 / 9217 / 8462 / 3812 / 48210 / 51236 / 7420 / 4380 / 1926 / 1284</b>,安全卡 17 / 214 / 23 / 9</td><td class="muted"><code>Edge 无头 + CDP 读渲染后 DOM 文本</code></td></tr>
|
|||
|
|
<tr><td><b>类型检查</b></td><td><b>exit 0</b>,无错误</td><td class="muted"><code>vue-tsc --noEmit</code></td></tr>
|
|||
|
|
<tr><td><b>生产构建</b></td><td><b>成功</b>,17.74s</td><td class="muted"><code>vite build</code></td></tr>
|
|||
|
|
<tr><td><b>渲染态实测(CDP)</b></td><td>登录 / 工作台 / 申诉 / 数据统计 4 页:EP 默认色 <b>0 处</b>、<11px 文本 <b>0 处</b>、字重仅 400/500/600/700</td><td class="muted"><code>Edge 无头 + CDP 取计算样式</code></td></tr>
|
|||
|
|
</table>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<h2>六、复验中咬出并已修复的既有缺陷</h2>
|
|||
|
|
<div class="note" style="background:var(--ok-soft);border-color:#CFE4D8">
|
|||
|
|
<h3 style="color:var(--ok)">数据统计页:漏斗卡片与安全卡片恒显示 0 —— 已修复 + 已加守卫</h3>
|
|||
|
|
<p style="margin:6px 0 0">
|
|||
|
|
现象:<b>同一张卡片里,上方的漏斗数字全是 0,下方「累计注册 / 实名用户 / 审核通过 / 7日活跃」的汇总表却是真实数字</b>(12846 / 9217 / 8462 / 3812),界面自相矛盾。
|
|||
|
|
</p>
|
|||
|
|
<p style="margin:8px 0 0">
|
|||
|
|
<b>根因</b>:这三组曾是普通数组,<code>loadFunnel()</code> 直接改元素属性,而模板读的就是同一个数组 ——
|
|||
|
|
<b>非响应式写入不触发重渲染</b>,Vue 看不到变化:
|
|||
|
|
</p>
|
|||
|
|
<p style="margin:6px 0 0"><code>const funnelStages = [ { value: 0, ... } ] // 普通数组</code><br>
|
|||
|
|
<code>funnelStages[0].value = userData.totalRegistered // 直接改元素 → 渲染不更新</code></p>
|
|||
|
|
<p style="margin:8px 0 0">
|
|||
|
|
<b>定位依据(渲染态实测,同一 mock、同一路由,只差代码)</b>
|
|||
|
|
</p>
|
|||
|
|
<table style="margin-top:8px">
|
|||
|
|
<tr><th style="width:30%">取值来源</th><th style="width:20%">是否响应式</th><th style="width:26%">修复前渲染</th><th>修复后渲染</th></tr>
|
|||
|
|
<tr><td><code>funnelStats.totalRegistered</code> 等(汇总表)</td><td>是(<code>ref</code>)</td><td class="after">正常 12846 / 9217 / 8462 / 3812</td><td class="after">正常</td></tr>
|
|||
|
|
<tr><td>漏斗卡 10 张(<code>funnelStages</code> / <code>matchStages</code>)</td><td class="before">否(普通数组)</td><td class="before">全 0</td><td class="after">12846 / 9217 / 8462 / 3812 / 48210 / 51236 / 7420 / 4380 / 1926 / 1284</td></tr>
|
|||
|
|
<tr><td>安全卡 4 张(<code>safetyCards</code>)</td><td class="before">否(普通数组)</td><td class="before">全 0</td><td class="after">17 / 214 / 23 / 9</td></tr>
|
|||
|
|
<tr><td>比率(<code>funnel-rate</code>)</td><td class="before">否</td><td class="before">全 <code>-</code></td><td class="after">71.7% / 65.9% / 29.7% / 106.3% / 15.4% / 9.1% / 2.7%</td></tr>
|
|||
|
|
</table>
|
|||
|
|
<p style="margin:8px 0 0">
|
|||
|
|
已排除环境因素:CDP 抓取页面运行期 <b>控制台错误 0 条、网络失败 0 条</b>,
|
|||
|
|
且 <b>汇总表在同一页渲染出了 12846</b> ⇒ 数据确实已到达前端,纯粹是响应式问题。
|
|||
|
|
<b>改造前的构建产物表现完全相同</b> ⇒ 该缺陷先于本次改动存在,不是本次收敛引入的回归。
|
|||
|
|
</p>
|
|||
|
|
<p style="margin:8px 0 0">
|
|||
|
|
<b>修法(按根因而非最小改动)</b>:三个集合改为 <code>computed()</code> 从既有 <code>ref</code> 派生,
|
|||
|
|
卡片与汇总表因此<b>同源</b> —— 结构上不可能再出现「同一份数据的两处展示对不上」。
|
|||
|
|
另把 <code>loadFunnel()</code> 里遮蔽颜色助手的局部变量 <code>const token</code> 改名 <code>authToken</code>。
|
|||
|
|
</p>
|
|||
|
|
<p style="margin:8px 0 0">
|
|||
|
|
<b>为何前 19 个守卫全绿也没发现它</b>:既有守卫都是源码结构断言,而这一段代码<b>完全合法</b>
|
|||
|
|
—— 无 TS 报错、无 lint 报错、构建通过。只有<b>真跑起来看渲染结果</b>才暴露。
|
|||
|
|
故新增 <code>ui-tests/admin-reactivity-contracts.mjs</code>:
|
|||
|
|
①非响应式状态(普通声明 + 被当状态写 + 出现在模板里 → 失败;未被写过的静态常量清单合法,按「是否被写」区分)
|
|||
|
|
②数据统计页同源契约(卡片与汇总表必须取自同一变量、端点不得被删)
|
|||
|
|
③颜色助手遮蔽。已用<b>负向注入</b>证明判别力:3 例注入全部 <b>FAIL(exit 1)</b>,还原后复跑 PASS。
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<section class="shot">
|
|||
|
|
<h3>漏斗缺陷修复对照 <span class="muted">数据统计页 · 同为设计 v2,只差这一处修复,mock 数据完全相同</span></h3>
|
|||
|
|
<div class="pair">
|
|||
|
|
<figure>
|
|||
|
|
<img src="data:image/png;base64,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
|
|||
|
|
<figcaption><b>修复前</b>:漏斗卡 0 / 0 / 0 / 0 / 0 / 0 / 0 / 0 / 0 / 0,安全卡 0 / 0 / 0 / 0</figcaption>
|
|||
|
|
</figure>
|
|||
|
|
<figure>
|
|||
|
|
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAOECAIAAADYLwGFAAAQAElEQVR4nOydB2AUxRrH50ouPaQnpJECAQIEMCFUpYggzQeC4UmRBxZUBBURxIKKIlYExIYFRUCJKAgCAlKFAAEEQg8hBFJI7/Xqm929sldzSS4hgf/PeMx+Ozu7t7vZ7Pzn+74Rq2qqCQAAAAAAAAAAAEBrRkgAAAAAAAAAAAAAWjkQOAAAAAAAAAAAANDqgcABAAAAAAAAAACAVg8EDgAAAAAAAAAAALR6IHAAAAAAAAAAAACg1QOBAwAAAAAAAAAAAK0eCBwAAAAAAAAAAABo9UDgAAAAAAAAAAAAQKsHAgcAAAAAAAAAAABaPRA4AAAAAAAAAAAA0OqBwAEAAAAAAAAAAIBWDwQOAAAAAAAAAAAAtHogcAAAAAAAAAAAAKDVA4EDAAAAAAAAAAAArR4IHAAAAAAAAAAAAGj1QOAAAAAAAAAAAABAqwcCBwAAAAAAAAAAAFo9EDgAaCDKtHQCAAAAAAAAAKBlAIEDAAAAAAAAAAAArR4IHAAA0DKprSUAAAAAAAAAa4HAAcDto+DXcV16hjI/j60vaFAFW1NbcGXT+0/06vPEJvO7OziPO6Sesw+T5qHs7PppDzz2fRqxMYdf4b5I6MPrM3XW7O8f5r7gxO+ziG2pLSvIL7NStbi+6alRHXuOm7c3GzIHAAAAAAAA1iAmAIDbQ8Gmee+d5orR3dzO7t/NXxnYbVgn14Pvr1RX8PKq1avgGjEgNsKekMtb5609adx0xMgJbmtfWX6d1EnUE9/+ODFAs1S+++3/ztvHlBZ/njzhzWjOmn/4+w92pBMSOmbujIHehi1YXls/asvzy9nuvMTVx82eM51e9t9x36XT0sH/vRLx5/sD3Vhz1q/T/rfmYp0Nhk3fvPqRIL3j5JGdrClsXfzqFTf1QvnFbLV10/uLLrrqbRExcs4zA/hfkkoW5TwBovza2fQybkXWyYOXywmRZiYnX6M1ym/ll3N12j7z244FnYhFyg/Oe3LekUJCCjfNGbVpyNLkzx50I3VDj6ZMyhTsXb3V5w8AAAAAAICmRC6trJDaubtISAsAAgcAt4Xy08tmzTuhWUreMHvOBr31I1alP3HqtZ0V6sXCA4vnHOCtjly0e2NEIBVJEjf9scu49YhOwycX3MrPJnWSqece4Dpm6oR5+zZRW1nCx+tnrZ3M9uVr03Zt+iOF7jRq1oyBRi1YXlsPyo7MHv3cNtqpp99u28YZ6g69fVRcN7fvWNWgcNe0Of1O/PCQD2OXZmbfyq+zTVep0XGaojxlt4lVFRf3bTPQUCI6Pf3MAM1C1vr7h318jdSXW1/OXjlmz5wosxXKD746btrOQvVS9Ly91qkbFPuCXdPGfMwcs9fwH7ViEAAAAAAAAE2GOGNjckKXPrN9c07JnAZGNnLEs5EgRAWA5qf84NuPjfuO61FL3ALa+rBuAvZebX0CND/kwOyn1qjjJly9uApE4qKp4G318DzbfkBbN62i6sq24GpGYY2bMIPx53CJGjE8gjQn17//H6dukIEffTsjXLfCfsDiXx5vq1448ea0tVb4pZjE3lt3egMMToILz+6lPbd6V4T9CbKJW0T2r69tNCc+le+m6sYfanXDbcjSEz9P1l2I2my6NvS+RQfLzGwdPvnHJTFMgYpB/+PH3QAAAAAAAGAdFdczr1VKraoqrchNSfk7hVzefH5HOgkPdSe3GYGqppoAAOqPMi1dGB5K6k9t0pJe0zexXVRJzwW/bB6w//4xn12jvdkRqw5/3J8ZdK8tP73xxWkfnGLrxHx88OVrj/73S6ZHzLo28Dr/pODK7rN0RcG299/bxlRoO2bRy2O8iVtYwMV5/118hVqG/3jh/YFs4oxpO5ktxnx9+rMBbPqJmYzrR8SC7XsfY0NUNBYDaP0FaRMHfJBS19dinEpmBJKGkblWs4teb2t8NPhc//Lhhz+4whbDZu/4c0aUYWyIGXShLqbQfuWO8w7/PjlIbc3+/uFR7Kmr6xsZeHBQ+clbE9Di3XFgGFv27jasO6Niu4V1i3Cr63iYvBtcZApD1OM//jI3WueEUXty8egnv+eEEUsOGgWb/vcA5xzUZ8meX8beXg0dAAAAAAC0Os7/O2G7y6YFkXXVY4JTKoj43LoU58GSLavKgp/qMbOruKKSuDjfrngVhKgYIK24djpt/Wbl2Pd7RPPMFYdPLjgiiR8X1DfS0+y1Kk7dfMZhYP8gbY1ru05uoX02D/fpU9p7EgA47ONe27wg+f4PCvss+eaXsWG0E7xoxIZpOwvLdn785RPebvP++8F1QgKmb9790JePrrR/79MJtNv89byDTOhB4cHk6zPCw3RteXccdn9H2ifP/JxsY5Zdew4YPIzpk2fXnZ+i5VD212tqAaXtM68YqxuUsGfem75+/NaIBcs+e4zr89u7edfXm6L2WlLitXK+od+SRay/A7E/vXe/5ozVuk18dQlnPbt/92VefdfQgXFhpvbaKHFHTdmR1yY9t17tnuKluTd42Me+sGTC7umbGL+Mwl3TRhMzGof3hBcnLJ7EKGjH3v/44Ij3ByIZBwAAAAAA4JPxe+LXvl3fHWAmoLmrS/RmpZQOzqmX5dLM9K9X5xX38H/u4XBex1YscXb3LE6VxrUfGKr0mJ558EjKZ0eklw9XZ/h6ff5J12DS/EDg0EN+bd2Z57YraOna95k/ztCM6FamLPu6Mq2q8v2kiukr4uKDTJ+1jP05q9crVq9KG/n2fbO7UkNB8u7Kv9MJcZJWFpc461fuNDp2VJhxG6lLx2cdItbg/MZvsf34htP/TlpVYVApKD5qJknfYn7s3WNA+xk9b7sf0d3HldOXA3pGBwQlrZmXxBokoT6kkPTqlr92/WnOLSF76+JP+0UM6Ed2fDRvB2MI6ijJtI/1UW8SO+O9h6Ks2teuaV30/DK2zey5jdQTJrijvK5K3g3uR1/7duVBrjRkzjPmsm92mrnj6Ey3RmXOLDz4/tzFV0jDYRw9woKI7Sk7u3La/9ac5hwBJd2e+eHzBd1djau5xb224+vyATN3qTOSjJb8+OdiExpH95kLoje9lkxI+a7lW+YNnAgnDgAAAACAu4KSk7/fJAOiYn2Neqwp519Pcls0JYTVLIqS08UxzqlPjq/o9HrcSz0djNpx7+Sck0tIMCk7+MH5xA6+YwcEzH5d+fqcsuKHiVbgyN2fnOju4JInJ87Zm3dL+o3uOqMnNWfuCVTGjA65TQP8zSVwqFSkskJVWEDSrqoy0lVFhUQmEwiEKrc2woBgVftIoa8/adOGiETkNqAnDai4f/K2X5twJE0tWUlVxVVswU6+5c3ELZwx0PvTxVF+ulbSEjYzygjxcRvZlbMUnUtn/62SHT0g09+lwGU0sTFSZXGJysDmXKnMTa/8+4jZjYICpexdCJqXgoN/HDhN77xkffOJbZt0C4Wnd247bbjhrk3qTaRj3nuI2JYB76f/+1p+QQHxDvOxJ/mX958uC+0Z7u3mTezJ5ycmkiYj+fuEW1xp2NjB5tNi2rtp1mnDbaxEHZXThKQsHtZzcb220Dl9FOx++8mnEtI1dq9hL04K2vvRvI28utLs02ezNWk3pLrAnMJt0/7nvfmHOT0Nz5r3hKmDXnv5AC2d/nbDtYlzmjedCgAAAAAAaD6kFcVVEg93putanL3jjHDyaFOdfDs50/mXyomEFO1PzxzWfmxJeub86Nkm1A3apNCupGTxS8c6Tek0vYfDtS7tO7uXVBD3mMAqXqWq5MNSvzciPQ6nS3qGpC07f3mwU+7pMrsukQ/YvKtbD5pD4FDV1pL0VNX5M6rsTJVcSRQKVWWFoKZWpVSSvHxFylVy6KAqOETYM0bQqTPx8iYCAWlWTEkDlMoSVaWBSaYqLtGUneX8vCvSwwV/M5dbcN/MSHVnIrMmg/035rnuc3to6p1Jmbyqmo7RBtXhNiHqNsjBz4RdnnygNs/ShoK+0/0HOpetW1WZSW5j7BOwFld1hlGrqC3PL6wg9aPbjJXT+xB
|
|||
|
|
<figcaption><b>修复后</b>:12846 / 9217 / 8462 / 3812 / 48210 / 51236 / 7420 / 4380 / 1926 / 1284,安全卡 17 / 214 / 23 / 9</figcaption>
|
|||
|
|
</figure>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="note">
|
|||
|
|
<h3>七、边界与未验证项(请人工确认)</h3>
|
|||
|
|
<ul>
|
|||
|
|
<li><b>漏斗修复是用 mock 数据验证的</b>:验证的是「取数落到 <code>ref</code> 后能否正确传导到 DOM」这一链路(修复前全 0、修复后为真实值,同一 mock 对照)。
|
|||
|
|
<b>真实后端的响应字段名未在本轮重新核对</b> —— 但这部分本次未改动,修复前后一致。</li>
|
|||
|
|
<li><b>截图里「Match 按来源分离」与部分 V11 小卡显示 0 是 mock 缺口,不是缺陷</b>:本地 mock 未提供
|
|||
|
|
<code>matchesBySource</code> / <code>matchmakerRecommendations</code> 等字段(这几个值同样走 <code>ref</code>,
|
|||
|
|
若后端返回即会渲染)。请勿据此判定为同类问题。</li>
|
|||
|
|
<li><b>登录页 / 申诉管理页截图未逐张细看</b>:已目视核对工作台与数据统计的前后对照;其余两页的版式细节(间距节奏、换行、对齐)请人工过目。</li>
|
|||
|
|
<li><b>预览使用示意数据</b>:为让页面渲染出真实版式,本地预览服务器对 <code>/api/v1/*</code> 返回了按前端读取字段构造的 <b>mock 数据</b>,<b>不是真实业务数据</b>;本次只看版式/配色/字号/热区,不验证业务正确性。</li>
|
|||
|
|
<li><b>无自动化视觉回归</b>:布局类改动(栅格、间距)没有像素级基线,回归只覆盖 token、字号、字重、对比度、响应式状态与关键行为契约。</li>
|
|||
|
|
<li><b>13.33px 一档保留</b>:工作台仍有 64 个元素计算为 13.33px,但其中<b>仅 1 个自身带文本</b>,来源是容器字号继承(非刻意的排版设定),不构成字号越界。</li>
|
|||
|
|
<li><b>未跑真机 / 未逐页人工走查</b>:管理端 20 个业务页面仅按代表性的 4 个页面做了渲染态实测,其余靠源码级守卫覆盖。</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<footer>
|
|||
|
|
生成时间:2026-09-23 · 基线 <code>825fd41</code>(未提交,待评审)· 截图来源:本地生产构建产物(<code>.workbuddy/tmp/admin-dist4</code> 及其前序版本)+ mock API
|
|||
|
|
</footer>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
</html>
|