refactor(table): 统一调整全仓表格操作列宽度及按钮样式
- 将所有操作按钮数量≤3的表格操作列宽度统一调整为180px - 调整涉及全局默认值、各模块和页面中menuWidth显式设定 - 单独修改/authority/role页面操作列宽度为240px,/system/menu及流程配置对应调为220px - 通过CSS新规则视觉统一Avue内置操作按钮为el-link链接样式,无功能变更 - 优化通知公告操作列宽度,解决三按钮链接换行问题 - 调整首页Logo图标尺寸及边距以适配设计需求 - 保证所有相关改动经过npm run build验证通过
This commit is contained in:
@@ -34,3 +34,34 @@
|
||||
- 车辆图标改为白底 + 主色边框 + 主色 `Van` 图标,尺寸加大到 44×44px,两侧各延伸 20px 虚线,形成「路线」流动感。
|
||||
- 城市名称限制单行并溢出省略,地址/联系人间距收紧、颜色变淡。
|
||||
- 验证:`npm run build` 成功。
|
||||
|
||||
## 通知公告 /desk/notice 操作列加宽
|
||||
- 需求:客户截图反馈操作列中「查看、编辑、删除」三个文字链接被挤成两行,要求加宽。
|
||||
- 改动:`src/views/desk/notice.vue`
|
||||
- 在 Avue CRUD option 中新增 `menuWidth: 220`,使操作列可在一行容纳三个操作链接;符合项目样式规范「三个操作按钮时宽度不小于 220px」。
|
||||
|
||||
## 全仓表格操作列宽度统一(≤3 按钮统一 180)
|
||||
- 需求:客户提供新截图,要求所有操作按钮 ≤3 个的表格操作列统一宽度为 180;>3 个按钮保持 320。
|
||||
- 核心改动:
|
||||
- `src/utils/table-menu.js`:`TABLE_MENU_WIDTH` 的 `default` 与 `three` 都从 160/220 统一改为 180,`four` 保持 320;`resolveTableMenuWidth` 逻辑不变。
|
||||
- `src/main.js`:全局 `crudOption.menuWidth` 从 160 改为 180,覆盖未显式设置 menuWidth 的 Avue CRUD 页面。
|
||||
- `src/views/desk/notice.vue`:`menuWidth` 从 220 改为 180。
|
||||
- `src/option/business/process-config.js`:`menuWidth` 从 200 改为 180。
|
||||
- `src/views/system/param.vue`:手写 el-table 操作列宽度从 220 改为 180。
|
||||
- 批量替换:对 44 个显式设置 `menuWidth: 160` 的 `.vue` / `.js` / `const/*.js` 文件统一改为 180(含部分文件内多处)。
|
||||
- 验证:`npm run build` 成功(exit code 0)。
|
||||
|
||||
## 角色管理 /authority/role 操作列改 180
|
||||
- 需求:用户明确要求把 /authority/role 页面操作列宽度设为 180(该页面此前设为 320,因含「查看/编辑/删除 + 权限设置」自定义菜单)。
|
||||
- 改动:`src/views/authority/role.vue`
|
||||
- option 内联 `menuWidth: 320` 改为 `menuWidth: 180`。
|
||||
|
||||
## 全站操作列按钮统一为链接(el-link)风格
|
||||
- 需求:用户要求「操作栏里的按钮改成链接的方案,全站风格统一」,并先确认了对功能是否有影响。
|
||||
- 调研结论(关键):全仓手写 el-table 操作列(10 个文件、约 28 列)与 53 个 avue-crud 自定义 `#menu` 插槽**已全部是 `<el-link>`**,全库 `type="text"` 残留为 0;真正未链接化的只剩下 **Avue 内置 viewBtn/editBtn/delBtn**(渲染为 `<el-button is-text>`,包在 `div.avue-crud__menu` 内,且自带 `permission` 指令与 `rowView/rowEdit/rowDel` 事件)。
|
||||
- 实施手法:采用「方案 A:纯 CSS 视觉对齐」(零功能影响、不动事件与权限,符合用户「不要影响功能」的诉求)。
|
||||
- 改动:`src/styles/element-ui.scss`
|
||||
- 新增 `.avue-crud__menu > .el-button.is-text` 规则,把 Avue 内置行操作按钮外观对齐为 el-link:主色文字、无边框/无背景、hover 下划线 + 浅色、禁用态浅色无下划线、`height:auto / padding:0`(配合父级 `inline-flex; gap:8px` 与已存在的主色/间距覆盖规则)。
|
||||
- 选择器仅命中行操作列 `.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 `*` 告警来自第三方库压缩,与本次无关(历史既有)。
|
||||
|
||||
Reference in New Issue
Block a user