4.1 KiB
4.1 KiB
@g3soft/ui
| @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」供屏幕阅读器。
- 浮层是全表共用一个 DOM（
- 文档（
docs/content/ui/data/table.md的「展示形态errorStyle」与「不可改的格子」两节）同步更新。