style(ui): 统一操作列文字字重和全站表格文字溢出提示

- 取消操作列内 el-link 默认加粗,统一为常规字体粗细,避免字体显得突兀
- 在 element-ui.scss 中新增样式覆盖 el-link 的 font-weight 为 normal
- 全站表格开启 Element Plus 全局配置 showOverflowTooltip,统一显示单元格文字省略提示
- Avue 全局 crudOption 和手写表格均启用 showOverflowTooltip,覆盖所有相关表格列
- 通过 CSS 豁免操作列单元格不受 tooltip 固定宽度裁切影响,保证操作列内部链接显示完整
- 调整部分菜单宽度以适配视觉和布局需求
- 验证构建成功,无新增 CSS 警告,确保兼容性和功能正常
This commit is contained in:
2026-08-07 12:24:17 +08:00
parent be4ccc89f6
commit c92d2a405a
7 changed files with 41 additions and 3 deletions

View File

@@ -65,3 +65,26 @@
- 选择器仅命中行操作列 `.avue-crud__menu` 内的 `is-text` 按钮,不误伤顶部工具栏(`.avue-crud__header`)与弹窗按钮(`.avue-crud__dialog__menu`)。
- 注意:现有全局规则 `.avue-crud__menu .el-link` 会强制操作列内所有 el-link`type="danger"` 的删除)显示为主色蓝。如需删除按钮保留红色告警,需单独调整该覆盖规则(本次未改,保持统一蓝)。
- 验证:`npm run build` 成功exit code 0构建日志中的 CSS `*` 告警来自第三方库压缩,与本次无关(历史既有)。
## 操作列文字取消加粗(统一常规字重)
- 需求:用户要求操作栏下的按钮字体都不要加粗,统一风格。
- 根因Element Plus `el-link` 默认 `font-weight: var(--el-font-weight-primary)`500 中等粗),导致操作列里的链接(查看/编辑/删除等)显示为加粗;而 Avue 内置 `is-text` 按钮此前已被规则设为 normal。
- 改动:`src/styles/element-ui.scss`
- 在既有 `.avue-crud__menu .el-link, .el-table ... .cell:has(.el-link) .el-link` 统一规则中增加 `font-weight: normal;`(0,2,0) 优先级高于 el-link 自身 (0,1,0) 的默认字重,可覆盖)。
- 覆盖范围Avue 行菜单内的 el-link + 任意含 el-link 的表格体单元格手写操作列一次统一全站操作列字重Avue 内置 `is-text` 按钮与顶部工具栏/弹窗按钮字重保持原样不受影响。
- 验证:`npm run build` 成功exit code 0
## 全站表格省略文字 hover tooltip 提示统一
- 需求:用户截图反馈合同管理等页面中「所属项目」等列文字被省略,要求像 `/base/common-address` 一样,鼠标移上去显示完整提示;全站统一加,改完列出文件。
- 参考实现:`src/option/base/common-address.js` 中 Avue 列配置使用 `showOverflowTooltip: true`
- 调研结论:全站表格可见列约 848 个Avue+ 424 个手写 `<el-table-column>`,其中 801 个 Avue 列、268 个手写列未开启 tooltip。Element Plus 支持全局 `table: { showOverflowTooltip: true }` 配置Avue 3.9.2 完整透传,可一行代码覆盖全站。
- 改动文件清单:
- `src/main.js`
- Element Plus 全局配置新增 `table: { showOverflowTooltip: true }`,一次性覆盖所有 Avue CRUD 与手写 el-table。
- Avue 全局 `crudOption` 新增 `showOverflowTooltip: true` 作为双保险,避免页面级 option 被错误覆盖时失效。
- `src/styles/element-ui.scss`
- 新增 `.el-table .cell.avue-crud__menu, .el-table .el-table__body .cell.el-tooltip:has(> .el-link)` 规则,豁免操作列单元格的固定宽度与溢出隐藏,防止全局 tooltip 导致操作列内 el-link 换行后被裁切,保持原有 8px gap 与自动换行。
- `src/option/business/common.js`
- 共享工厂函数 `createCrudOption` 新增 `showOverflowTooltip: true`,覆盖 business 模块通过该工厂生成的所有 CRUD option。
- 覆盖范围:全站所有表格可见文本列(含 Avue 与手写 el-table`type="selection"` 选择列由 Element Plus 自动豁免;操作列通过 CSS 豁免不被影响。
- 验证:`npm run build` 成功exit code 0构建日志中 CSS `*` 告警来自第三方库压缩,与本次无关(历史既有)。