diff --git a/.workbuddy/memory/2026-08-07.md b/.workbuddy/memory/2026-08-07.md index d0b1e1b..7880418 100644 --- a/.workbuddy/memory/2026-08-07.md +++ b/.workbuddy/memory/2026-08-07.md @@ -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 个手写 ``,其中 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 `*` 告警来自第三方库压缩,与本次无关(历史既有)。 diff --git a/src/main.js b/src/main.js index 2dcdf66..195571f 100644 --- a/src/main.js +++ b/src/main.js @@ -75,6 +75,7 @@ app.use(store); app.use(router); app.use(ElementPlus, { locale: messages[language], + table: { showOverflowTooltip: true }, }); app.use(Avue, { axios, @@ -86,6 +87,7 @@ app.use(Avue, { searchMenuSpan: 24, searchMenuPosition: 'right', menuWidth: 180, + showOverflowTooltip: true, viewBtnIcon: ' ', editBtnIcon: ' ', copyBtnIcon: ' ', diff --git a/src/option/business/common.js b/src/option/business/common.js index 292a07e..bbecf30 100644 --- a/src/option/business/common.js +++ b/src/option/business/common.js @@ -205,6 +205,7 @@ export const createCrudOption = columns => ({ dialogClickModal: false, menuFixed: 'right', menuWidth: 180, + showOverflowTooltip: true, column: columns, }); diff --git a/src/option/transportCapacity/transport-ship.js b/src/option/transportCapacity/transport-ship.js index d7b9834..b1cb9ad 100644 --- a/src/option/transportCapacity/transport-ship.js +++ b/src/option/transportCapacity/transport-ship.js @@ -14,7 +14,7 @@ export const option = { editBtn: false, delBtn: false, viewBtn: false, - menuWidth: 320, + menuWidth: 180, dialogClickModal: false, column: [ { diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss index 0fd7d1d..749a220 100644 --- a/src/styles/element-ui.scss +++ b/src/styles/element-ui.scss @@ -573,6 +573,9 @@ // 选择器同时覆盖 Avue 行菜单(.avue-crud__menu)与任意含 el-link 的表格体单元格(手写操作列)。 .avue-crud__menu .el-link, .el-table .el-table__body .cell:has(.el-link) .el-link { + // 覆盖 Element Plus el-link 默认的 font-weight: var(--el-font-weight-primary)(500 中等粗), + // 操作列文字统一为常规字重,避免「查看/编辑/删除」等链接显得加粗。 + font-weight: normal; --el-link-text-color: var(--el-color-primary); --el-link-hover-text-color: var(--el-color-primary-light-3); --el-link-active-text-color: var(--el-color-primary-dark-2); @@ -596,6 +599,16 @@ font-weight: normal; } +// 全站统一:Element Plus 全局开启 show-overflow-tooltip 后, +// 操作列单元格会被加上 .el-tooltip 类并写死宽度,导致内部 el-link 换行后被裁切。 +// 此处豁免操作列单元格:让 Avue 行菜单与手写表格操作列保持原有 flex 自动换行,不被固定宽度裁切。 +.el-table .cell.avue-crud__menu, +.el-table .el-table__body .cell.el-tooltip:has(> .el-link) { + width: auto !important; + overflow: visible; + text-overflow: clip; +} + // 全站统一:Avue 内置行操作按钮(查看 / 编辑 / 删除 / 复制等)视觉对齐为 el-link 链接样式。 // 选择器仅命中表格行操作列 .avue-crud__menu 内的 is-text 按钮,不误伤顶部工具栏(.avue-crud__header) // 与弹窗按钮(.avue-crud__dialog__menu)。事件(rowView/rowEdit/rowDel)与权限(permission 指令) diff --git a/src/views/transportCapacity/driver.vue b/src/views/transportCapacity/driver.vue index a3c17f6..6d1eee0 100644 --- a/src/views/transportCapacity/driver.vue +++ b/src/views/transportCapacity/driver.vue @@ -1343,7 +1343,6 @@ export default { .driver-page { &__identity { display: flex; - flex-direction: column; gap: 4px; line-height: 20px; } diff --git a/src/views/vehicle/customer-archive.vue b/src/views/vehicle/customer-archive.vue index 15c00e9..fc194a3 100644 --- a/src/views/vehicle/customer-archive.vue +++ b/src/views/vehicle/customer-archive.vue @@ -1425,7 +1425,7 @@ export default { editBtn: false, selection: true, dialogClickModal: false, - menuWidth: 320, + menuWidth: 260, column: [ { label: '客商编号',