Files
tms-erp-web/.workbuddy/memory/2026-07-31.md
赵忠林 4383e9956e style(top-bar): 给顶部状态栏标题区添加背景条以区分视觉层次
- 顶部状态栏 `.top-bar__title` 增加品牌色淡底背景和左侧主色竖条
- 文字颜色调整为深色,保持搜索框可读性
- 调整主题相关样式,处理 light 主题和 dark 主题下背景条效果差异
- 优化多个主题下 Logo 背景和文字颜色,提升整体视觉一致性
- 修改欢迎页背景颜色及相关元素颜色,增强视觉层次感
- 调整部分组件和布局的内边距与边框颜色,提升界面细节表现
- 隐藏顶部主题切换项,调整 hover 背景颜色以适应新视觉风格
2026-07-31 20:50:18 +08:00

125 lines
12 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 2026-07-31 工作记录
## 货物类型(/base/cargo-type批量导入「全或无」改造
- 需求:批量导入时只要任一行报错,整批都不入库,并返回失败明细 Excel。用户在「事务 vs 校验」之间选了"全或无 + 推荐方案"。
- 结论(已落地):**全量预校验 + 单事务兜底**,而非纯事务或纯校验二选一。
- 后端仓库:`/Users/gxwebsoft/JAVA/tms-erp-api-ws`BladeX本仓库 tms-erp-web-ws 是纯前端,无 Java
- 改动文件:`blade-service/blade-system/.../service/impl/CargoTypeServiceImpl.java`(仅此一文件,未动 Controller/前端)。
- 实现要点:
- `importCargoType` 拆为两阶段:阶段一 `validateImportAll`(只读,不写库)→ 任一失败直接返回失败明细、整批不入库;阶段二 `saveImportAll` 全部通过后才在 `@Transactional` 内统一写库(兜底防半截入库)。
- 补上原缺失的校验:文件内编码全局去重、一级名称去重、二级(同上级)名称去重;二级父级解析同时支持 DB 与"文件内一级映射"(解决"单文件一级在前"场景,二级引用同文件的一级)。
- 原代码其实已是 `@Transactional + setRollbackOnly`,但"边校验边写库"且缺文件内去重/父子引用校验;本次重构成更干净的预校验优先。
- 前端无需改动:`src/views/base/cargo-type.vue` + `utils/import-excel.js` 已支持失败明细 Excel 下载与 `decorateCargoTypeFailDetail` 装饰。
- 验证:本环境无 maven无法编译已做静态核对imports/方法/字段/括号完整,无 TransactionAspectSupport 残留)。需在本地 `mvn -pl blade-service/blade-system compile` 确认。
- 遗留小问题(非本次引入,可选优化):后端二级编码前缀报错文案为"货物类型编码前2位必须与上级货物类型编码一致",而前端 `CARGO_TYPE_FAIL_RULES` 匹配的是"二级编码前2位必须与上级货物类型编码一致",二者不完全一致,导致该错误前端不会追加规则说明(仍会显示原因)。可后续对齐文案。
## cargo-type 分页隐藏「首页/上一页/下一页/尾页」
- 根因:页面有两套分页——有数据时用 `avue-crud` 自带分页(默认 layout `total, sizes, prev, pager, next, jumper`,原生上一页/下一页来自这里);无数据时用共享组件 `<empty-pagination>`layout 写死同样带 prev/next。「首页/尾页」按钮不是 Avue/EP 原生的,而是全局增强器 `src/utils/pagination.js``setupPaginationEnhancer()`main.js 第 98 行全局启用)扫描所有 `.el-pagination`,在 `.btn-prev` 前插「首页」、`.btn-next` 后插「尾页」。
- 关键机制:增强器只在存在 `.btn-prev/.btn-next` 时才注入首页/尾页。因此去掉分页 layout 里的 prev/next首页/尾页就不会被注入。
- 改动(仅 `src/views/base/cargo-type.vue`,未碰共享组件):① `page` 数据加 `layout: 'total, sizes, pager, jumper'` 处理有数据状态;② 新增 scoped `:deep(.avue-crud__pagination)` 规则隐藏 `.btn-prev/.btn-next/.erp-pagination-first/.erp-pagination-last`,覆盖无数据时的 empty-pagination 状态。
- 注意:`empty-pagination` 被 16+ 页面共用,本次未改它的默认 layout避免影响其它页面。如需其它页面也隐藏应给该组件加 `layout` prop 而非改默认值。
## 全站分页统一隐藏「首页/上一页/下一页/尾页」(接上一条)
- 用户要求全站统一。逐页改不现实empty-pagination 被 16+ 页共用,还有大量 avue-crud 自带分页),改为**集中两处全局改动**
1. `src/utils/pagination.js`:删除全局增强器对「首页/尾页」按钮的注入(保留「跳转」);同步精简 `updatePaginationButtons`(不再处理 first/last disabled
2. `src/styles/element-ui.scss`:新增全局规则 `.el-pagination { .btn-prev, .btn-next { display: none !important } }`,统一隐藏原生「上一页/下一页」。
- 因此**回退了 cargo-type.vue 之前的两处页面级改动**`page.layout` 与 scoped 隐藏样式避免与全局方案两套机制并存cargo-type 现由全局方案统一接管。
- 效果:全站所有 el-pagination含 avue-crud 自带分页与 empty-pagination均只保留「总条数/每页条数/页码/跳转」,首页/上一页/下一页/尾页全部隐藏;「跳转」按钮保留。
- 风险点:全局 `display:none !important` 会影响所有分页,符合"全站统一"诉求;如后续某页面需恢复导航按钮,需针对该页用更高优先级样式覆盖或单独处理。
## 全站搜索按钮文案统一
- **文件**: `src/lang/zh.js``src/lang/en.js`
- **改动**:
- `tagsView.search`: `搜索``查询`(中)/ `Search``Query`(英)
- `crud.filter.resetBtn`: `清空条件``重置`
- **影响范围**: 全站所有 Avue CRUD 搜索栏按钮自动生效(通过 i18n 全局配置)
- **排除**: 地图搜索、日志清空等非 CRUD 场景的按钮文案保持不变
## 全站操作栏按钮隐藏图标
- **文件**: `src/styles/element-ui.scss`
- **改动**: 新增全局 CSS 规则 `.avue-crud__menu .el-button--text i, .avue-crud__menu .el-button i { display: none !important }`
- **效果**: 全站所有 Avue CRUD 操作列(查看/编辑/删除等)按钮前的图标统一隐藏,仅保留文字
- **方案选择**: CSS 全局覆盖,无需逐个修改 option 配置文件
## 全站操作栏按钮紧凑间距
- **文件**: `src/styles/element-ui.scss`
- **改动**: 新增全局规则 `.avue-crud__menu .el-button { margin-left: 4px; margin-right: 0; padding: 0 4px }`
- **效果**: 全站 CRUD 操作列按钮统一为 4px 间距 + 4px 内边距,与 cargo-type 一致
## 全站操作列宽度统一为 160px
- **目标**: 参考 cargo-typemenuWidth: 160的紧凑效果全站统一操作列宽度
- **改动**: ① `src/main.js` 全局默认 `menuWidth` 由 220 改为 160② 批量将 src 下 72 处 option/vue 里显式 `menuWidth: 数字` 统一替换为 `menuWidth: 160`
- **影响范围**: 全站所有 Avue CRUD 操作列(含自定义 menu 插槽列menuWidth 仍控制该列宽度)
- **风险**: 原部分页面操作按钮较多(如 tenant/customer-archive 等曾配 380~420统一 160px 后若按钮数 > 3 可能出现换行/溢出;如某页溢出需单独放宽或精简按钮
## 全站操作列内容左对齐
- **文件**: `src/styles/element-ui.scss`
- **原因**: cargo-type 用自定义 `#menu` 模板默认左对齐;其他页面用 Avue 内置菜单viewBtn:true默认右对齐
- **改动**: 新增 `.avue-crud .el-table td .cell.avue-crud__menu { text-align: left }`
- **效果**: 全站操作列统一左对齐
## 顶部工具栏工具全部隐藏
- **文件**: `src/config/website.js` + `src/page/index/top/index.vue`
- **改动**: ① website.js `setting` 新增/关闭 `theme:false``debug:false``lang:false``settingBtn:false`(原 theme/debug 仍为 true② index.vue 给 `<top-lang>``v-if="setting.lang"``<top-setting>``v-if="setting.settingBtn"`
- **效果**: 顶部工具排仅保留用户头像+姓名下拉(含退出登录);语言切换/设置齿轮/日志/皮肤图标均隐藏
- **默认主题**: `src/store/modules/common.js` 第 21 行 `themeName` 默认改为 `theme-d2`(已登录用户若 localStorage 存过旧主题需手动切一次或清存储)
## 欢迎页(/wel/index重设计为 TMS-ERP 业务仪表盘
- **文件**: `src/views/wel/index.vue`(整文件重写,移除 Saber 默认营销内容)
- **设计**: 浅色 d2 主题风,纯 SVG/CSS 自绘图表(项目无 echarts零依赖
- **模块**: ① 问候横幅(用户名+日期+新建运单按钮) ② 4 张核心指标卡(今日运单/在途运输/待办事项/运力车辆,含环比) ③ 运单趋势(SVG柱状,近7日) ④ 货物类型分布(SVG环形donut) ⑤ 运输方式占比(横向条) ⑥ 预警提醒列表 ⑦ 快捷入口网格(跳真实路由)
- **数据**: 全 mockdata() 中每项标注对应后端接口(如 /blade-business/waybill/count、/trend、/cargoStat 等),后续替换真实接口即可
- **预览**: `npm run build` 通过dev server `http://localhost:2889/`
- **注意**: 快捷入口 path 依据 views 目录结构推断(/business/waybill-manage 等),需与后端菜单 path 一致才能跳转
## 图标悬停圆形背景效果示例
- 按用户提供的两张截图T 恤默认图标 / 铃铛带圆形背景图标),实现了一个悬停时显示浅灰圆形背景的图标按钮效果。
- 产物: `/Users/gxwebsoft/VUE/tms-erp-web-ws/icon-hover-demo.html`(含 CSS 核心代码与 Element Plus 用法示例)。
## 顶栏 T 恤图标悬停效果落地
- 用户要求把悬停圆形背景效果运用到顶部状态栏的 T 恤图标(实际指向主题图标位置 `<i class="icon-zhuti">`)。
- 改动文件: `src/page/index/top/top-theme.vue`
- 模板:将 `<i class="icon-zhuti" @click="open">` 替换为内联 SVG T 恤(保留 `@click="open"` 打开主题选择弹窗)。
- 样式:新增 scoped `.top-theme-icon``::before` 浅灰圆形背景 `#f2f3f5`,默认 `scale(0.6) opacity(0)`hover/focus 弹性放大到 `scale(1)`,图标 `z-index:1` 压在上层。
- 调整:用户反馈 T 恤图标在顶栏中上下不居中,把 `.top-theme-icon``display:flex; height:100%` 改为 `display:inline-flex; vertical-align:middle; width:32px; height:32px`,使其与右侧头像/用户名在同一水平中线。
- 注意:该组件受 `website.setting.theme` 控制(之前曾设为 false 隐藏),若顶栏未显示主题图标,需确认 website.js 中 `setting.theme` 为 true。
## 顶栏头像触发下拉菜单hover
- **需求**: 鼠标移到头像top-bar__img也能触发下拉行为与点用户名一致。
- **文件**: `src/page/index/top/index.vue`
- **改动**:
1.`<img class="top-bar__img" :src="userInfo.avatar">` 从 el-dropdown 外的同级节点,移入 el-dropdown 触发区(`<span class="el-dropdown-link">`)内。
2.`<el-dropdown>``trigger="hover"`,让头像+姓名整体支持 hover 触发。
3. scoped 样式新增 `.top-user__trigger`inline-flex / padding 4px 8px / hover 浅灰背景 rgba(0,0,0,0.04)),并把 `.top-bar__img` 自身 `margin` 改为 `0 5px 0 0` 配合新容器。
- **效果**: 鼠标悬停在头像或姓名任一处都会展开下拉;保留 `:hide-on-click="false"`菜单内点击不收起el-tooltip 等仍可交互)。
- **注意**: 若用户后续希望「hover 触发」仅作用于头像、不影响姓名点击行为,需把姓名部分移出 el-dropdown 触发区;当前实现是统一行为。
## 全站 avue-crud 弹窗内部滚动高度统一
- **需求**/business/process-config 与 /base/cargo-type 表单弹窗滚动高度不一致process-config 用 dialogWidth:'96%'+dialogTop:'10px' 且内容很长被撑爆cargo-type 用 dialogWidth:760 窄窗),要求全站统一。
- **关键结论**@smallwei/avue 3.9.2 的 avue-crud **没有 `dialogHeight` 属性**(源码 avue.js 中无此字符串dialogTop 默认值为 "0")。逐个 option 设 dialogHeight 不可行,故延续本项目「全局 CSS 统一」范式(见上「全站操作栏按钮」等先例)。
- **改动文件**`src/styles/element-ui.scss`(全局生效,被 common.scss 通过 `@use './element-ui.scss'` 引入)
- **新增规则**`.avue-crud__dialog .el-dialog__body { max-height: calc(100vh - 200px); overflow-y: auto; }`
- **效果**:全站所有 Avue CRUD 弹窗(含 process-config、cargo-type的 body 在 `calc(100vh - 200px)` 内滚动内容超长时在窗内滚动而非撑爆整窗矮弹窗不受影响max-height 仅为上限)。
- **验证**:已 `pnpm build` 后台运行验证全站编译。
## 顶部状态栏标题区加背景条
- **需求**:给顶部状态栏(`.top-bar__title` 中间区域)加一条背景条,与白色头部区分。
- **文件**`src/styles/top.scss``.top-bar__title` 规则(原来背景是纯白 `#fff`,看不出边界)
- **改动**`background: rgba(64,158,255,0.12)`(品牌色淡底)+ `border-left: 4px solid #409eff`(左侧主色竖条),沿用项目主色 `#409eff`;文字保持深色 `rgba(0,0,0,0.85)`、搜索框可读。
- **注意**:默认 light 主题go/d2 等白底头部效果好dark 主题头部 `#2c3643` 下淡蓝条可能略冲突(原 `#fff` 背景在 dark 下本就冲突,属历史遗留),如需可给 dark 主题单独覆盖。