# 前端执行票 —— 工单堆叠图语义间隔与饼图交互 Label: ready-for-agent Category: frontend-execution ## 来源 承接票37收口时维护者反馈第1、2条。 ## 范围 1. 调查工单横向堆叠统计图中部分类别间的小间隔（待接单/已接单、已结案/已取消）：确认是浏览器像素舍入、条段绘制策略还是有意表达语义边界；不得把不明原因的视觉现象直接当成设计。 2. 若为设计语义，补充图上说明/图例提示；若为绘制缺陷，修复为连续、可解释的条段。 3. 为饼图/环图补齐交互：悬停放大或高亮、共享详情浮层、键盘焦点/可访问名称；交互风格与已验收横条统计保持一致。 4. 验收：不同统计块的颜色、间隔含义明确；饼图扇区 hover/focus 有明显反馈并展示类别与数量；不改变统计口径。 ## 非目标 - 不改变后端统计字段与工单状态口径。 - 不重做票37已收口的共享省略组件。 ## 进度 - 2026-10-15：认领（`Status: claimed`）→ 诊断（范围 1）→ 实施（范围 2/3）→ 离线闸门 + 变异测试 + 回归 → 收口。 - 2026-10-15：真实浏览器走查未执行（`AGENTS.md` 项目规则：不自动运行 dev/build/截图）；走查入口 `http://127.0.0.1:8000/#/cockpit`，判据见「验收对照」第 2 条。 - 2026-10-15：**改动未提交**（工作树混有票 37/38/39/40/45/46 等并行在制品，入库须按票 33/36/42 的裁剪纪律单独摘取本票 hunks）。 Status: claimed Type: task Blocked by: Labels: ready-for-agent, wayfinder:task ## 诊断结论（范围 1） **小间隔＝绘制缺陷（像素舍入），不是设计语义。** 判定过程没有把视觉现象当设计： - **机制**：`components/PanelBlocks.vue` 的堆叠段样式原先对 `left` 与 `width` **各自独立取整** —— `left: Math.round(row.start*100)%`、`width: Math.round(row.ratio*100)%`。相邻段之间露出的底色缝 = `round(nextStart*100) − (round(start*100) + round(ratio*100))`，该值可为 ±1 个百分点（取决于两段各自的小数部分）。 - **复现**：用 mock 报警族工单向量 `[0,1,2,1,1,3,1,0]`（`mocks/contractMocks.js:2419` `alarmWorkOrderStates`，total=9）逐段复算，「待验收→已结案」边界 `left+width=55` 而下一段 `left=56`，**实测 1 个百分点缝**，与维护者所见一致（预警效率/报警族两处堆叠条同一算法，同一缺陷）。 - **反证「非有意设计」**：CSS 里 `.panel-stacked__seg` 无 `margin`、条容器无 gap/分隔声明，分段色由 `barTone` 逐态给（八态八色相）——若真要表达语义边界，应当是显式的分隔样式，而不是随数据总数随机出现在某些边界上的缝。**同一对类别是否露缝取决于计数**（待派单/待接单边界 0→0 不露，待验收/已结案露 1），这正是舍入噪声的特征，不是语义设计的特征。 - **结论**：走票面第 2 条的**「绘制缺陷」分支** → 修复为连续、可解释的条段（不加「语义间隔」说明，因为不存在这种语义）。 ## 实施（范围 2/3） ### 交付 1：堆叠条段边界改「接力取整」，连续由构造保证 - **`domain/panelBlocks.js` `stackedBlock()`** 每行新增 `startPct` / `widthPct`：由**同一个累加器**取整接力（`endPct = round(acc/total*100)`，下一段 `startPct = 上一段 endPct`），末段终点恒为 100。**无缝不是运气舍入的结果，而是代码结构保证**（每段起点定义上就是上一段终点）。 - **`components/PanelBlocks.vue`** 堆叠段样式改消费这两个整数百分比，删除段内的 `Math.round(...)` 独立取整。 - **口径不变（票面非目标）**：`total` / `start` / `ratio` 原样保留未取整的精确占比，只改**绘制边界**；后端统计字段与工单状态码一字未动。 ### 交付 2：饼图/环图交互补齐（悬停放大已有，本票补键盘与可达性） - **扇区可键盘聚焦**：饼图与环形图的每个扇区 `tabindex="0"` + `role="img"` + **每片自己的可访问名称** `` :aria-label="`${slice.label}：${slice.count}`" ``（类别与数量都在名称里，读屏可达）。 - **focus 与 hover 走同一条路**：`@focus`/`@blur` 接**同一个**共享详情浮层 `showChartTip/hideChartTip`（票 37 走查扩展立的浮层），CSS `:focus-visible` 与 `:hover` **同一档放大**（饼 1.05 / 环 1.06）+ 增亮 + 一圈白色描边让焦点位置可见。交互风格与已验收横条统计一致（横条用 `:hover`/`:focus-visible` 同档反馈，见 `.panel-bar--button`）。 - **外层 `