19 lines
4.1 KiB
Markdown
19 lines
4.1 KiB
Markdown
---
|
||
'@g3soft/ui': minor
|
||
---
|
||
|
||
G3Table：校验态补「左侧语义色竖条」、禁用灰底加深一档 —— 让「格级」与「行级」状态重新分得开。
|
||
|
||
- **校验态（`errorStyle: 'cell'`）新增左侧 3px 语义色竖条**（error 红 / warning 琥珀），底色浓度不变（8% / 5%）。
|
||
- 背景：表体的纵向列线已经去掉（见上一条 changeset）。原来「格级色块被列线围成矩形、行级是一条长带」的**形状差异**没了，校验底色退化成无边界的横带，只剩色相一个通道 —— 「这一格有问题」很容易被读成「这一段行有问题」。左侧竖条把形状还回来：竖条 = 格级，横带 = 行级。
|
||
- 画在 `background-image` 上，不是 `border`（进盒模型会顶高行高、破坏虚拟滚动 `translateY` 的基准），也不是 `box-shadow`（单值属性，会与库的单元格选区描边、焦点环、固定列叠色互相整条覆盖）。因此 `background-origin` 按层指定：第 1 层用 `border-box` —— 表体纯文本格有 `--cell-padding-x`（12px）内边距，用默认的 `padding-box` 竖条会飘在格子内部 12px 处。
|
||
- 「正在编辑的那一格让位」的既有行为不变：编辑时既无底色也无竖条，只剩语义色焦点环 + 红字。
|
||
- **禁用（改不了）灰底从 3% 提到 6%**（暗色 4% → 8%）。灰底与斑马纹同色相、都是一条横带，原来只差约 1% 亮度，肉眼分不出「这行是条纹」还是「这格改不了」；拉开一档后可辨。整列只读 / 整列禁用 / 按行禁用三种情形共用这一套。
|
||
- **「既禁用又校验不过」的格子仍然只显示灰**（既有决策：改不了就别再提示这里错了）。灰底规则里**显式写回**库那两层格线（`background-image: var(--bg-border-right), var(--bg-border-bottom)`）—— 竖条加在 `background-image` 第 1 层上，而 background-image 不能按层覆盖，只改 `background-color` 的话灰底上会留一条红 / 黄竖条。亮 / 暗两份灰底规则都要写（只写亮色就会出现「亮色纯灰、暗色留红条」）。
|
||
- **注释修正**：`G3Table.vue` 里「灰底权重 (0,6,1) 高于校验态 (0,4,1)」这句是旧数字 —— 校验态选择器带 `:has()`，特异性取参数中最高者，按行禁用那条与校验态实测同为 `(0,7,1)`，胜负实际由「谁写在后面」决定。已改成准确表述并加了警告。
|
||
- **失败原因现在有出口了**：`validate` / `validateWarning` 返回的字符串（「金额必须大于 0」）此前在 `resolveEditorStatus` 里**只被取 `.length` 判等级、内容直接丢掉** —— 业务精心写的失败原因没有任何出口，用户只知道「这格红了」。现在该结果归一为 `{ level, message }` 一次带出，挂到内容节点的 `data-validate-message` 上，表格侧 **hover 那一格**时弹一个自绘浮层显示原因（悬停格内任意位置都行，移开 / 滚动即收）。
|
||
- 浮层是**全表共用一个 DOM**（`v-if` + 根节点上的 `mouseover` 事件委托），常态下定时器 / 监听器 / DOM 全都不存在；落到出错格上只做一次 `getBoundingClientRect()`，且滚动即关闭、不做跟随，所以滚动路径上不会出现逐帧测量。刻意没有给每个出错格挂 Tooltip：那是每个实例两组监听器，虚拟滚动下还要随行反复挂载销毁，再叠上固定列 `sticky` 的定位与层叠，容易写出「只在某个滚动位置下错位」的问题。
|
||
- 委托的判定单位是**格子**（`td`）而不是事件目标的祖先链：空值格的展示 span **宽度为 0**、右对齐数字格也常只有文字那么宽，鼠标绝大多数位置落在 `td` 的内边距上，按祖先链找会静默弹不出来（实测踩到）。
|
||
- 有原因时该格的 `title` 会让位（原本它挂的是「值」，用于内容被省略时兜底），避免原生 tooltip 与浮层叠成两个框；`aria-label` 则拼成「金额，金额必须大于 0」供屏幕阅读器。
|
||
- 文档（`docs/content/ui/data/table.md` 的「展示形态 `errorStyle`」与「不可改的格子」两节）同步更新。
|