tms-erp-web/.workbuddy/memory/MEMORY.md

项目长期记忆（tms-erp-web-ws / Saber3 客商模块）

设计约定（已确认）

弹窗分组：统一用全局 <section-card>

• 弹窗 body 背景由 src/styles/element-ui.scss 全局 .el-dialog__body { background:#f5f6fa; padding:16px } 统一灰底。
• 每组 = 白底卡片：4px 主色竖条 + 8px 间距 + 圆角 6px + 淡阴影。组件全局注册 <section-card title="...">，支持 #title / #extra slot。
• 仅 3 项的小分组用 el-col :span="8" 均分一行。

Avue 内置弹窗用 section-card：dialogCustomClass 透明化 avue-form

• option 顶层加 dialogCustomClass:'xxx-dialog'，再在 element-ui.scss 写三条：
  1. .xxx-dialog .avue-form { background:transparent; box-shadow:none; padding:0 }
  2. .xxx-dialog .avue-form__group > .el-col > .el-form-item { margin-bottom:0 }
  3. .xxx-dialog .avue-dialog__footer, .avue-crud__dialog .xxx-dialog .avue-dialog__footer { margin-top:0 !important }

弹窗底部操作栏浮动（全局 CSS）

• .el-dialog__body { max-height:calc(100vh - 200px); overflow-y:auto; overflow-x:hidden }
• .el-dialog__footer { margin:0; padding:12px 20px; background:#fff; border-top:1px solid #ebeef5; box-shadow:0 -2px 8px rgba(0,0,0,.04) }
• Avue 内置弹窗 footer 真实 class 是 .avue-dialog__footer，须 position:sticky; bottom:0; flex:none; background:#fff 贴底。

上传证件区域尺寸（transportCapacity）

• 身份证/行驶证/道路运输证等固定 240×151px（1.586:1）。
• scoped 覆盖 .xxx-uploader--large { width:240px } 与 --large .el-upload { width:100%; height:151px }。

上传图片点击放大预览

• src/components/image-upload-field/main.vue 用 <el-image preview-src-list fit="contain" preview-teleported :z-index="3000" @click.stop>，阻止冒泡到 el-upload。

独立表单页标题 archive-page-form__title

• 样式全局化到 src/styles/element-ui.scss：18px/600/#303133 + margin-bottom:20px + 4px 主色竖条 + 8px 间距。
• business-crud-page 系列通过 formPageTitle prop 注入；loading-manage / master-order 手写前置标题。

表格列内嵌输入控件全宽

• element-ui.scss 全局兜底：.el-table .el-table__body td.el-table__cell .cell > .el-input-number/.el-input/.el-select/.el-date-editor/.el-cascader { width:100% }。

业务状态标签文字化

• 全站"状态语义"的 el-tag 加 class="status-text"，转为普通文字，不带颜色/背景/边框/圆点。
• 实现：element-ui.scss 末尾 .el-tag.status-text { ... }。

弹窗 / 独立表单页底栏按钮统一规则

• 排序：从左到右按次→主排（次要居左、主操作居右），主操作永远放最后。
  • 顺序模板：[可选辅助工具(如同步/导入)][取消][保存草稿][提交/确认]
• 容器布局（2026-08-27 改为「去 gap」）：display:flex; justify-content:flex-end;（不写 gap）。按钮间距统一由 Element Plus 全局默认的相邻按钮 .el-button+.el-button{margin-left:12px} 提供，全站恒为 12px。原各 footer 写死的 gap:8/12px 已全部移除。src/styles/element-ui.scss 里 .el-dialog__footer .el-button + .el-button 也已从 8px 改 12px，与之一致。弹窗关闭按钮继承 Element Plus 自带 .el-dialog__footer 全局规则（见上条），独立页用 .archive-form__footer 配 .archive-page-form & { position:fixed; right:0; left:230px; bottom:0; z-index:10; margin:0; padding:12px 24px; border-top:1px solid #eff1f7; background:#fff; box-shadow:0 -2px 8px rgba(0,0,0,.06); }。
• ⚠️ 浮动底部必须用 position:fixed，不能用 position:sticky：本项目布局 .app-main / .basic-container 祖先带 overflow:hidden，会导致 sticky 永不触发（footer 不吸底）。固定写法照搬 customer-archive：

  .xxx-actions {
    position: fixed; right: 0; left: 230px; bottom: 0; margin: 0; z-index: 10;
    /* flex-end + padding + border-top + 白底 + 上投影 */
  }
  :global(.avue--collapse .xxx-actions) { left: 60px; }      /* 侧栏折叠 */
  :global(.avue-layout--horizontal .xxx-actions) { left: 0; } /* 横向布局 */
  

  注意 :global() 要把「整个选择器」包进去（customer-archive 写法），不要只包前缀，否则 scoped 会在中间选择器上追加 data 属性导致不匹配。
• 颜色层级 3 档：

  语义	type	备注
  次要（取消 / 关闭）	不写 type（默认）	灰描边

  • 全站底部操作栏「返回」已统一改为「取消」：独立表单页返回列表、弹窗关闭、主从编辑器返回等场景一律写「取消」；仅只读查看 / 纯关闭场景保留「关闭」。 | 中间步骤（保存草稿 / 按匹配结果更新） | type="primary" plain | 蓝描边 | | 主操作（提交 / 完成对账 / 复评确认） | type="primary" | 蓝实心 |
• 禁区：
  • 保存草稿和主操作不允许同为 type="primary"，否则两个蓝实心无视觉层级。
  • 主操作禁止用 type="success"（绿）。全站统一深蓝实心。
• 生效页面（已按规则统一）：
  • business/project-apply.vue（footer + 变更 footer）
  • vehicle/customer-archive.vue 全部 5 处 footer（archive-form__footer 主表单页 + contact-dialog/receipt-dialog/invoice-dialog 子弹窗 + score-detail-dialog 含总分合计）
  • business/components/business-crud-page.vue 的 PageAvueForm 独立表单页（#menu-form-before slot 新增 取消 按钮，shipping-template 模式验证通过；影响 /business/waybill-manage/form、/business/transport-plan/form、/business/shipping-template/form 三处独立表单页）
  • business/components/master-order-editor.vue 主 <footer>（取消 default + 暂存/确认创建 plain + 创建并调度 primary；position:fixed 浮动，含 avue--collapse/avue-layout--horizontal 左偏移）
  • payment 模块表单页（__actions 均 flex-end + position:fixed 浮动，含 avue--collapse/avue-layout--horizontal 左偏移）：
    • payment-application-form.vue（[取消][保存 plain][提交]）
    • invoice-application-form.vue / invoice-receipt-form.vue（[取消][同步 plain][保存 plain][提交]）
    • bill-ledger-form.vue（[取消][确认 primary]）
    • bill-payment-form.vue（[取消][保存 plain][提交]）
    • receipt-flow-form.vue（[取消][确认 primary]）
    • receipt-claim-record-form.vue（单「关闭」按钮，居中→右对齐浮动）
  • settlement 模块：
    • settlement/components/pre-settlement-editor.vue（弹窗 + pageMode 两处 footer：保存加 plain；&__page-actions 加 position:fixed 浮动，含 avue--collapse/avue-layout--horizontal 左偏移）
    • settlement/components/formal-settlement-editor.vue（.formal-editor__page-actions 加 position:fixed 浮动，含 avue--collapse/avue-layout--horizontal 左偏移；按钮已 [取消][提交] 合规）
    • settlement/receivable-payable-detail.vue（生成费用弹窗「上一步」改 plain）
• 已合规未动：settlement/components/transport-reconciliation-editor.vue（[取消][保存草稿 plain][按匹配结果更新账单 plain][完成对账 primary]）、settlement/components/settlement-adjustment-editor.vue（弹窗 [取消][保存 primary]）、business/temporary-credit-limit.vue。
• Avue-form footer 结构注意：#menu-form-before slot 内容在 Avue 内置按钮之左；#menu-form slot 在 Avue 内置按钮之右。要实现 [次要][Avue 主操作] 顺序，把次要按钮放进 #menu-form-before，主操作保留 Avue 内置即可。
• Avue 表单 footer 按钮去图标（统一纯文字）：Avue 的 avue-form 提交/清空按钮内置图标（submitIcon: 'el-icon-check'、emptyIcon: 'el-icon-delete'），且 Avue 源码用 || 'el-icon-xxx' 兜底，无法通过 option 配置去掉。已在 business-crud-page.vue 样式里用 :global(.business-crud-form-page-dialog .avue-form__menu .el-icon){display:none} 统一隐藏，仅作用于独立表单页（PageAvueForm 容器），不影响其它弹窗。新增/编辑弹窗内的 Avue 表单若也要去图标，复用此选择器即可。
• 复杂 footer 例外：当 footer 需要在按钮组左侧展示「总分合计 / 数量统计」等聚合信息时，块用 flex:1 推自己到最左，按钮组按上述规则排在右半边（参考 score-detail-dialog）。

关键文件

• src/components/section-card/main.vue
• src/styles/element-ui.scss
• src/views/vehicle/customer-archive.vue
• src/views/transportCapacity/{driver,vehicle,ship}.vue
• src/views/business/project-apply.vue

环境注意

• Vite 代理跨域：axios.withCredentials=true，改 .env/vite.config.mjs 须重启 dev。

business-crud-page 复用模式

• option 由 prop crudOption 经 cloneOption 克隆。
• 独立表单页走 PageAvueForm，不包 el-dialog。
• 自定义详情弹窗：config.detailButton=true + detailSections:[{title, fields}]。