b2894lxlx/tms-erp-web
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity
Files
819a59e6fc62c8ab212a173bb440f3dc6fde8a82
tms-erp-web/.workbuddy/memory/2026-08-05.md
赵忠林 ef417a0290 style(ui): 优化分页箭头及project-apply弹窗样式 
- 撤销分页中“上一页/下一页”按钮隐藏，恢复原生箭头图标显示
- 重新删除element-ui.scss中多余的分页箭头文字注入和display:none规则
- 全局Avue CRUD弹窗内容区背景改为灰色 #f5f6fa，提升视觉层次感
- project-apply弹窗背景改为灰色底，分组区块改为白色卡片风格，统一界面风格
- 分区标题与内容区域合并为单张白色卡片，调整圆角和阴影实现视觉统一
- 相应区域内边距、圆角和阴影细节优化，保持结构和功能不变
2026-08-05 20:53:48 +08:00

5.5 KiB
Raw Blame History

2026-08-05 工作记录

排查：改线上接口后前端"运行不了"（CORS 根因）

  • 现象：用户将 .env.development 的 VITE_APP_API 改为 http://172.16.203.228:8000/api（直连线上/测试后端）后仍运行不了。
  • 根因：Saber3 的 axios 配了 withCredentials = true（src/axios.js:79）。该后端（openresty + blade-gateway）对跨域请求返回 Access-Control-Allow-Origin: * 且 Access-Control-Allow-Credentials: true，浏览器规定 credentials 模式下 Allow-Origin 不能是 *，非法组合会被直接拒绝 → 所有接口失败。
  • 之前用 /api 能跑是因为走 Vite 代理，浏览器请求同源 localhost:2888，不触发跨域。
  • 已改动：
    1. .env.development 的 VITE_APP_API 改回 /api，并加注释说明两种模式。
    2. vite.config.mjs 的 server.proxy['/api'] target 改为 http://172.16.203.228:8000，并去掉 rewrite 去掉 /api 的逻辑（保留 /api 前缀，对齐 openresty 期望路径）。
  • 注意：改 .env / vite.config.mjs 后必须重启 npm run dev（Vite 启动时加载环境变量，运行中改动不会热更新）。
  • 若确需直连绝对地址（如生产/部署）：必须让后端 CORS 把 Allow-Origin 改为具体前端域名（blade-gateway 的 CorsConfig 用 setAllowedOriginPatterns 或显式域名），不可用 * 配合 credentials。

调整：货物类型导入失败原因展示格式

  • 文件：src/views/base/cargo-type.vue
  • 修改 decorateCargoTypeFailDetail：
    • 移除「第N行：」前缀；
    • 失败原因编号从 A. B. C. 改为 1. 2. 3.；
    • 备注超长兜底提示也同步使用数字编号。

UI 优化：客商档案弹窗「基本信息」分组（vehicle/customer-archive.vue）

  • 背景：原弹窗「基本信息」是一整块 el-row 平铺 20 个字段，信息密度过高。
  • 方案（与用户确认）：采用「分区标题平铺 + 浅色背景块」而非嵌套卡片（契合 AGENTS.md 去卡片化哲学；全局 .dialog-section-title 已自带 4px 主色竖条）。
  • 改动：
    • 模板：将单一 el-row 拆分为 4 个 .archive-form__group：工商信息 / 联系信息(3项 span=8) / 财务·信用信息 / 其他信息(备注 span=24)；字段顺序重组但全部保留，地址、备注保持 span=24。
    • 样式：新增 .archive-form__group（#fafafa 背景、8px 圆角、16px/20px 内边距、组间距 16px），子标题复用 .dialog-section-title（14px/500）。
  • 校验：@vue/compiler-sfc 解析 0 错误；标签闭合平衡。
  • 注：此前讨论中提及的「Tab 内容加内边距」「材料区标题竖条」未纳入本次（材料区已用 dialog-section-title）；如需可后续追加。

排查：分页「上一页/下一页原生箭头」样式被还原

  • 现象：昨日（08-04）已对 src/styles/element-ui.scss 三处历史遗留规则做删除（隐藏 .el-icon 箭头、用 ::before 注入「上一页/下一页」文字、整体 display:none 隐藏 .btn-prev/.btn-next），今早用户反馈效果被覆盖。
  • 排查：重新 Grep 确认 element-ui.scss 三处原隐藏规则全部恢复成原始状态；而 src/utils/pagination.js 的注释（"统一展示为原生箭头图标"）未被还原，说明只有该样式文件被外部覆盖（疑似 git 还原 / 重新拉取 / 某生成流程），并非逻辑层问题。
  • 已重新逐条应用三处删除（单条提交，避开并行编辑的缓存冲突），并验证无遗留 display:none/content:'上一页'；pagination.js 无需再改。
  • 提醒：element-ui.scss 若处于版本控制或生成流程中，可能被再次还原；如需长期生效，建议把该改动提交入 git，或排查是否有自动覆盖该文件的脚本。

UI 调整：Avue CRUD 弹窗内容区背景改为灰色 #f5f6fa

  • 文件：src/styles/element-ui.scss 第 225 行附近 .avue-crud__dialog .el-dialog__body
  • 改动：在原 max-height/overflow-y 规则中新增 background: #f5f6fa;
  • 范围：全局生效（所有 Avue CRUD 弹窗的内容区都会变灰）。起因是用户想在货物类型（cargo-type）新增弹窗用灰底衬托。
  • 注意：弹窗默认 append-to-body，scoped 样式选不到；如需仅货物类型单页变灰，需给 option 加 dialogCustomClass 再单独写选择器。用户未要求收窄，暂保持全局。

UI 改造：project-apply 弹窗灰底+白卡片布局

  • 文件：src/views/business/project-apply.vue
  • 需求：弹窗背景色 #f5f6fa，每个分组区域用白色卡片
  • 改动：
    • 弹窗 body（global 选择器）：加 background: #f5f6fa
    • __grid、__table、__textarea-list、__material-head、__upload、__change-textarea 统一加白底 + 6px 圆角 + 极淡阴影 + 内边距
  • 效果：灰蓝底弹窗上浮白色分组卡片，与客商档案弹窗的「灰色分组块+白色内层卡片」方案一致

二次优化：project-apply 分区标题也包进白色卡片

  • 文件：src/views/business/project-apply.vue
  • 需求：把「项目基本信息」这类分区标题也装进白色卡片内（标题+内容合一张白卡）
  • 改动：
    • .dialog-section-title（排除 material 标题）加白底 + 上圆角 6px 6px 0 0 + z-index:1，紧接内容块
    • __grid/__table/__textarea-list/__change-textarea 圆角改为下圆角 0 0 6px 6px，与标题拼接成完整白卡
    • 材料区（__material-head/__upload）标题与按钮本就在白卡内，不受影响
  • 纯 CSS 改动，未动模板结构；用 :not() 排除材料标题避免破坏既有布局