feat(table): 重构行内编辑——无缝编辑器、全表校验态、列宽拖拽、行高亮 ## 概述 重做 G3Table 行内编辑的视觉与交互模型:编辑器「无缝嵌入单元格」(无外间距、 无常驻边框),校验态全表可见(不再依赖点击行),列宽拖拽与行高亮的行为与 fms-vue 的 FmsTable 对齐,并补上缺失的 row-click 事件与 warning 级校验。 ## 组件库(g3soft-libs) ### G3Table.vue - 新增 `editorSeamless` prop(默认 true):编辑格无外间距、编辑器无常驻边框, 焦点提示由 td 的 `:focus-within` inset 环承担,hover 用 outline、校验用文字色 + 内描边;编辑格底色用 `--td-bgc`(不透明、主题自适应),仅在未选中时铺在 td 上,避免盖住库的边框渐变与选区底色。 - 新增 `row-click` 事件透传(配合受控 `active-row-key` 实现「点击行高亮」, 与 fms 的 `@row-click="(_, row) => activeKey = ..."` 用法一致)。 - `active-row-key` 判定修复:`vnode.props` 里存的是父级模板的**原始写法**, 需同时匹配 camelCase 与 kebab-case(`activeRowKey` / `active-row-key`), 此前只认驼峰导致官方推荐的 kebab 写法完全失效。 - `activeRowKey` watcher 改为同步(去掉 `await nextTick()`),修复编辑态下 点击行时「高亮设上又被清掉」的竞态;仅在未受控时才由内部设置当前行。 - 校验态(error / warning)抽取为参数化 mixin,两种等级共用;选择器覆盖 **编辑器**与**展示态 span** 两种形态(校验全表可见的关键)。 - 列宽拖拽:恢复 `columnsBound` 门控(未绑 `v-model:columns` 时关闭,与 fms 一致);移除实测无效的「内部自存列宽」方案(库会把拖拽结果写进自己的列 对象后直接丢弃,不绑 v-model 根本无法回写)。 - 只读列灰底判据修正:从 `tr:has(编辑器)` 改为「该行有 input/select 编辑器」, 并排除序号列(`.seq-column`)。此前 checkbox/select 始终挂载导致「除了启用列 全灰」的误判。 ### utils/column.ts - `resolveCustomCell` 门控新增:配了 `validate` / `validateWarning` 的列, **无论编辑态与否**都注入 customCell(走 displayValue)。这是「校验态全表可见」 的根因修复——此前 text/number 列在非编辑态走库原生 td,校验态根本不渲染。 ### utils/editable.ts - `displayValue` 在非编辑态也求校验态并打状态类(error/warning 全表可见)。 - 新增 `validateWarning` 支持:与 `validate` 同约定(falsy 通过 / string 有问题), error 优先于 warning;抽 `editorStatusClass` 统一 input/select/checkbox 三条路径。 - 修复 `resolveEditorStatus` 的布尔语义:此前 `if (!result) return ''` 是 「truthy 报错」,与文档「falsy 通过」**正好相反**,导致 `validate: v => v > 0` 这类最自然写法判定翻转。 ### select/Select.vue + types.ts - 新增 `seamless` prop:去掉触发器自身描边/圆角/底色,`min-height: 0` 释放 32px 下限;根节点改 `display:flex; align-items:stretch` 让触发器撑满、文字 垂直居中(与 input 行为一致)。 - 网格间距从内层 input 上移到触发器(flex 容器),让清除/箭头图标一起内缩, 不再贴到格右边界。 ### types.ts - `TableEditor` 新增 `validate`、`validateWarning`、`errorStyle` 字段。 - `TableEmits` 新增 `row-click` 事件。 ### 测试 - `utils/editable.test.ts`:新增 validate / validateWarning 语义、error 优先、 抛错降级、三种编辑器类型共用状态类等 6 组用例(合计 47 个)。 - `e2e/table.spec.ts`:新增「校验态全表可见」「校验态落在正确列」「列宽拖拽 需绑 v-model」「点击行进入编辑时高亮跟随」4 条真浏览器断言(合计 26 个)。 - `playground/main.ts`:金额列加 error 校验、备注列加 warning 校验,提供三级 状态的真实样例数据。 ### 文档 - `README.md`:补「构建组件库前必须停 ERP dev server」的约定(含真实报错日志)。 - `docs/content/ui/data/table.md`、`docs/table-design.md`、`docs/examples/table/editable.vue`: 同步 editorSeamless、validate/validateWarning、row-click、只读列灰底的说明。 ## ERP(g3soft-erp) ### web/src/views/ocean/Booking.vue - 重写订舱单范例:覆盖 text/number/select/checkbox 四种编辑器、error/warning 校验、按行禁用、只读列灰底、当前行高亮、保存时整表校验并定位首个错误格。 - 删除「编辑明细/取消编辑」按钮与 snapshot 回滚机制,页面**始终可编辑**, 且不默认激活任何一行(编辑目标由用户点击产生)。 - 给 G3Table 绑定 `v-model:columns`(列宽拖拽的必要条件,与 fms 用法一致)。 ### README.md - 补「本地联调组件库:构建时必须先停 dev server」的约定。 ## 验证 - `pnpm --filter @g3soft/ui typecheck` 通过 - `pnpm --filter @g3soft/ui exec vitest run src/table` → 124 passed - `pnpm --filter @g3soft/ui exec playwright test e2e/table.spec.ts` → 26 passed ## 备注 - **本次改动仅涉及前端**。`git diff` 中出现的 ERP server 端 Java 文件 (GlobalExceptionHandler.java、JwtAuthFilter.java、RequestLoggingFilter.java、 logback-spring.xml 等)及 `log-viewer.html`、`_gen.demologs.js` 等,属于仓库 其它工作流的改动,**不在本次提交范围**,请勿一并提交。 - 校验态底色比例(error 12% / warning 8%,暗色 8% / 6%)为观感推定的档位, 非实测调优值,可按实际观感调整。