赵忠林
565553b3f7
- 将所有操作按钮数量≤3的表格操作列宽度统一调整为180px - 调整涉及全局默认值、各模块和页面中menuWidth显式设定 - 单独修改/authority/role页面操作列宽度为240px，/system/menu及流程配置对应调为220px - 通过CSS新规则视觉统一Avue内置操作按钮为el-link链接样式，无功能变更 - 优化通知公告操作列宽度，解决三按钮链接换行问题 - 调整首页Logo图标尺寸及边距以适配设计需求 - 保证所有相关改动经过npm run build验证通过
68 lines
6.3 KiB
Markdown
68 lines
6.3 KiB
Markdown
# 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」。
|
||
|
||
## 全仓表格操作列宽度统一（≤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 `*` 告警来自第三方库压缩，与本次无关（历史既有）。
|