- 将所有操作按钮数量≤3的表格操作列宽度统一调整为180px - 调整涉及全局默认值、各模块和页面中menuWidth显式设定 - 单独修改/authority/role页面操作列宽度为240px,/system/menu及流程配置对应调为220px - 通过CSS新规则视觉统一Avue内置操作按钮为el-link链接样式,无功能变更 - 优化通知公告操作列宽度,解决三按钮链接换行问题 - 调整首页Logo图标尺寸及边距以适配设计需求 - 保证所有相关改动经过npm run build验证通过
6.3 KiB
6.3 KiB
2026-08-07 工作日志
运输计划调度弹窗恢复左右分栏布局
- 需求:客户提供「计划详情」参考截图,要求调度弹窗改回「左侧基本信息卡 + 右侧收发货路线卡」的左右分栏布局。
- 改动:
src/views/business/components/business-crud-page.vue- 模板:把基本信息与收发货路线重新包进
business-crud-page__dispatch-summary双列容器;左侧section-card内恢复 3 列网格(客户/项目/合同编号),货物信息占 2 列、计划执行时间占 1 列、附件独占一行;右侧section-card内恢复左右排列的起点/终点(徽章+名称+地址+联系人),中间用方向虚线连接。 - 样式:
- 外容器恢复
grid-template-columns: minmax(0, 1.25fr) minmax(420px, 1fr),gap 16px,卡片等高拉伸。 - 基本信息网格恢复 3 列,列间距 16px、行间距 12px。
- 路线区恢复
grid-template-columns: 1fr 56px 1fr,徽章 32px,标题 16px,地址/联系人 13px,连接线 56px。 - 保留紧凑化后的字号/间距(标签 12px、值 14px),避免回到原先过松的状态。
- 外容器恢复
- 模板:把基本信息与收发货路线重新包进
- 验证:
npm run build成功。
运输计划调度弹窗基本信息改为 2 列
- 需求:客户截图反馈左侧「基本信息」还嫌松,要求改为 2 列更紧凑。
- 改动:
src/views/business/components/business-crud-page.vue- 模板:调整基本信息字段顺序为 客户/项目、合同编号/计划执行时间、货物信息(占满 2 列)、附件(占满 2 列)。
- 样式:
business-crud-page__dispatch-summary-grid从repeat(3, minmax(0, 1fr))改为repeat(2, minmax(0, 1fr)),保持 gap 12px 16px。
- 验证:
npm run build成功。
运输计划调度弹窗路线连接改为车辆图标
- 需求:客户希望把收发货路线中间的方向虚线换成车辆图标。
- 改动:
src/views/business/components/business-crud-page.vue- 模板:把
<div class="business-crud-page__dispatch-route-line" />替换为<div class="business-crud-page__dispatch-route-vehicle"><el-icon><Van /></el-icon></div>。 - 样式:删除原
&__dispatch-route-line虚线箭头样式,新增&__dispatch-route-vehicle,使用主色圆形背景、白色Van图标,尺寸 36×36px,居中与路线节点对齐。
- 模板:把
- 验证:
npm run build成功。
运输计划调度弹窗收发货路线视觉美化
- 需求:客户反馈右上角「收发货路线」卡片仍不够美观,要求继续优化。
- 改动:
src/views/business/components/business-crud-page.vue- 样式:
- 路线容器去掉
padding-top,改为align-items: center垂直居中。 - 起点/终点 item 改为
align-items: center,徽章从方角改为圆形,并加轻微阴影。 - 车辆图标改为白底 + 主色边框 + 主色
Van图标,尺寸加大到 44×44px,两侧各延伸 20px 虚线,形成「路线」流动感。 - 城市名称限制单行并溢出省略,地址/联系人间距收紧、颜色变淡。
- 路线容器去掉
- 样式:
- 验证:
npm run build成功。
通知公告 /desk/notice 操作列加宽
- 需求:客户截图反馈操作列中「查看、编辑、删除」三个文字链接被挤成两行,要求加宽。
- 改动:
src/views/desk/notice.vue- 在 Avue CRUD option 中新增
menuWidth: 220,使操作列可在一行容纳三个操作链接;符合项目样式规范「三个操作按钮时宽度不小于 220px」。
- 在 Avue CRUD option 中新增
全仓表格操作列宽度统一(≤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。
- option 内联
全站操作列按钮统一为链接(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*告警来自第三方库压缩,与本次无关(历史既有)。