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

@@ -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 指令)