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

@@ -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: ' ',

View File

@@ -205,6 +205,7 @@ export const createCrudOption = columns => ({
dialogClickModal: false,
menuFixed: 'right',
menuWidth: 180,
showOverflowTooltip: true,
column: columns,
});

View File

@@ -14,7 +14,7 @@ export const option = {
editBtn: false,
delBtn: false,
viewBtn: false,
menuWidth: 320,
menuWidth: 180,
dialogClickModal: false,
column: [
{

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

View File

@@ -1343,7 +1343,6 @@ export default {
.driver-page {
&__identity {
display: flex;
flex-direction: column;
gap: 4px;
line-height: 20px;
}

View File

@@ -1425,7 +1425,7 @@ export default {
editBtn: false,
selection: true,
dialogClickModal: false,
menuWidth: 320,
menuWidth: 260,
column: [
{
label: '客商编号',