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:
@@ -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 `*` 告警来自第三方库压缩,与本次无关(历史既有)。
|
||||
|
||||
@@ -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: ' ',
|
||||
|
||||
@@ -205,6 +205,7 @@ export const createCrudOption = columns => ({
|
||||
dialogClickModal: false,
|
||||
menuFixed: 'right',
|
||||
menuWidth: 180,
|
||||
showOverflowTooltip: true,
|
||||
column: columns,
|
||||
});
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@ export const option = {
|
||||
editBtn: false,
|
||||
delBtn: false,
|
||||
viewBtn: false,
|
||||
menuWidth: 320,
|
||||
menuWidth: 180,
|
||||
dialogClickModal: false,
|
||||
column: [
|
||||
{
|
||||
|
||||
@@ -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 指令)
|
||||
|
||||
@@ -1343,7 +1343,6 @@ export default {
|
||||
.driver-page {
|
||||
&__identity {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
@@ -1425,7 +1425,7 @@ export default {
|
||||
editBtn: false,
|
||||
selection: true,
|
||||
dialogClickModal: false,
|
||||
menuWidth: 320,
|
||||
menuWidth: 260,
|
||||
column: [
|
||||
{
|
||||
label: '客商编号',
|
||||
|
||||
Reference in New Issue
Block a user