# 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()` 排除材料标题避免破坏既有布局