From c92d2a405a4eb2b86a24440fe9a0bb6e373757ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com> Date: Fri, 7 Aug 2026 12:24:17 +0800 Subject: [PATCH] =?UTF-8?q?style(ui):=20=E7=BB=9F=E4=B8=80=E6=93=8D?= =?UTF-8?q?=E4=BD=9C=E5=88=97=E6=96=87=E5=AD=97=E5=AD=97=E9=87=8D=E5=92=8C?= =?UTF-8?q?=E5=85=A8=E7=AB=99=E8=A1=A8=E6=A0=BC=E6=96=87=E5=AD=97=E6=BA=A2?= =?UTF-8?q?=E5=87=BA=E6=8F=90=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 取消操作列内 el-link 默认加粗，统一为常规字体粗细，避免字体显得突兀 - 在 element-ui.scss 中新增样式覆盖 el-link 的 font-weight 为 normal - 全站表格开启 Element Plus 全局配置 showOverflowTooltip，统一显示单元格文字省略提示 - Avue 全局 crudOption 和手写表格均启用 showOverflowTooltip，覆盖所有相关表格列 - 通过 CSS 豁免操作列单元格不受 tooltip 固定宽度裁切影响，保证操作列内部链接显示完整 - 调整部分菜单宽度以适配视觉和布局需求 - 验证构建成功，无新增 CSS 警告，确保兼容性和功能正常 --- .workbuddy/memory/2026-08-07.md | 23 +++++++++++++++++++ src/main.js | 2 ++ src/option/business/common.js | 1 + .../transportCapacity/transport-ship.js | 2 +- src/styles/element-ui.scss | 13 +++++++++++ src/views/transportCapacity/driver.vue | 1 - src/views/vehicle/customer-archive.vue | 2 +- 7 files changed, 41 insertions(+), 3 deletions(-) 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: '客商编号',