- 顶部状态栏 `.top-bar__title` 增加品牌色淡底背景和左侧主色竖条 - 文字颜色调整为深色,保持搜索框可读性 - 调整主题相关样式,处理 light 主题和 dark 主题下背景条效果差异 - 优化多个主题下 Logo 背景和文字颜色,提升整体视觉一致性 - 修改欢迎页背景颜色及相关元素颜色,增强视觉层次感 - 调整部分组件和布局的内边距与边框颜色,提升界面细节表现 - 隐藏顶部主题切换项,调整 hover 背景颜色以适应新视觉风格
125 lines
12 KiB
Markdown
125 lines
12 KiB
Markdown
# 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-type(menuWidth: 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) ⑤ 运输方式占比(横向条) ⑥ 预警提醒列表 ⑦ 快捷入口网格(跳真实路由)
|
||
- **数据**: 全 mock,data() 中每项标注对应后端接口(如 /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 主题单独覆盖。
|