tms-erp-web/.workbuddy/memory/2026-08-21.md

2026-08-21

process-config 弹窗卡片间隔（对齐 project-apply 风格）

• 需求：process-config 新增/编辑弹窗内三张 <section-card>（基本信息 / 现行过程节点 / 节点设置）要像 project-apply 表单页一样独立成卡、卡间露出灰底（12px）。
• 根因：全站规则 .el-dialog .avue-form { background:#fff; padding:8px 16px 4px }（element-ui.scss ~246 行）把 Avue 弹窗表单整体包成一张白卡，section-card 白卡叠在其上看不出间隔。
• 改动（仅 2 文件）：
  1. src/option/business/process-config.js：option 顶层加 dialogCustomClass: 'process-config-dialog'。
  2. src/styles/element-ui.scss（contract-manage-dialog 规则块后新增）：
     • .process-config-dialog .avue-form { background:transparent; box-shadow:none; padding:0 } —— 白卡透明化，灰底（.el-dialog__body 全局 #f2f2f2）露出，section-card 自带 margin-bottom:12px 形成卡距。
     • .process-config-dialog .avue-form__group > .el-col > .el-form-item { margin-bottom:0 } —— formslot 外层 form-item margin 与卡片 margin 叠加会拉大卡距，归零统一 12px。
     • .process-config-dialog .avue-dialog__footer + .avue-crud__dialog .process-config-dialog .avue-dialog__footer { margin-top:0 !important } —— 抵消全局 947 行 .avue-crud__dialog .avue-dialog__footer { margin-top:-30px !important }（form 透明化后会上移压卡）。双选择器兼顾 dialog 未 teleport / teleport 两种挂载。
• 已验证：Vite 2889 编译通过、HMR 生效。
• 备注：menu-form-before 插槽（保存草稿/保存并启用按钮）渲染在 .avue-dialog__footer 内（avue 源码 dialog-form3.mjs 确认），不受 form 透明化影响，仍处白底底栏。

合同管理表单页：多分组卡片风格（对齐 project-apply 风格）

• 需求：合同管理新增/编辑表单页（/business/contract-manage/form?mode=add|edit）的 7 个业务分组（基本信息 / 合同文件 / 计费信息 / 结算单规则 / 付款比例设置 / 其它附件 / 变更记录）要像 project-apply 一样独立成白底卡、卡间 12px 间距、标题 4px 主色蓝条。
• 关键事实（容易踩坑）：
  • 合同表单走 PageAvueForm 组件（src/views/business/components/business-crud-page.vue:5577），render 函数 h('div', { class: option.dialogCustomClass }, [h('avue-form', ...)])，不包 el-dialog（所以底部按钮天然不浮动贴底，会随内容滚动——这点与 project-apply 的 el-dialog #footer 浮动有差异）。
  • option 顶层在 isStandaloneFormPage 时已设 dialogCustomClass: 'contract-manage-form-dialog'、dialogAppendToBody: false、dialogModal: false、dialogTop: '0'、dialogWidth: '100%'（5897-5914 行）。
  • 7 个分区标题列在 option.column 里以 order 升序分块（basicInfoTitle=200 → contractFileTitle=30 → billingInfoTitle=10 → settlementRuleTitle=-10 → paymentRatioTitle=-30 → attachmentTitle=-50 → changeRecordTitle=-70），其余字段 order 在每对标题列之间。
• 实施方案（已提交 63256a9）：
  1. buildContractFormGroupOption(option)（business-crud-page.vue 新增方法）：按 order 降序遍历 option.column，遇到 7 个 *Title 列就切片分组；groups.length<=1 时回退原 option（不影响其他业务弹窗）。返回 { ...option, column: groups[0], group: groups.slice(1).map(g=>({ label:'', arrow:false, column:g })) }。
  2. pageFormOption（6205 行）isContractFormPage 时调用上述方法。
  3. CSS（business-crud-page.vue scoped 末尾）：
     • .contract-manage-form-dialog 设 padding:20px 24px 96px; background:#f5f6fa; box-sizing:border-box;（外层灰底）
     • .business-crud-page--contract-form .avue-form { background:transparent; padding:0 }（表单白卡透明化）
     • .business-crud-page--contract-form .avue-form > .el-form > .avue-form__group 和 .avue-group 都设白底 + 6px 圆角 + 0 1px 2px 阴影 + 12px margin-bottom + 14px 16px 4px padding（两张选择器分别覆盖第 1 组 column 与第 2-7 组 group 渲染）
• 验证（agent-browser + 系统 Chrome，已登录后截图核对）：
  • 合同表单 7 张白底卡清晰分隔，每张卡左侧 4px 主色蓝条 + 标题（基本信息 / 合同文件 / 计费信息 / 结算单规则 / 付款比例设置 / 其它附件 / 变更记录），卡间约 12px 灰底露白。
  • 底部 5 个按钮（提交 / 关闭 / 保存 / 提交临时合同 / 提交正式合同）随内容滚动（非浮动贴底）。
  • 与 project-apply 滚动后的"客户信息 / 承运商信息"卡风格完全一致。
• 与 project-apply 的已知差异（用户本次未要求改）：
  • 合同表单底部按钮非浮动贴底（PageAvueForm 不包 el-dialog，avue-form 的 form_menu 渲染在内部）
  • 合同表单无"返回"按钮（用"关闭"代替）
  • 合同表单无独立页面标题（page-header 区域在 breadcrumb 处，不在 main 标题区）
• 行为验证码：登录页拼图/旋转求解基础设施已搭好——/tmp/captcha_solve.py（CORS 修复后支持 puzzle+rotate 双模式）、/tmp/ab-install/node_modules/.bin/agent-browser --browser-channel chrome。登录流程：访问 → 切"账号密码登录" → 点登录 → 检测 .puzzle-stage/.rotate-image → POST 至 http://127.0.0.1:8765 → 取 xDisp/angle → JS PointerEvent 模拟拖动 .track-handle 即可。
• 提交：63256a9 feat(business-crud-page): 合同管理表单页改为多分组卡片风格（1 file, +86/-2）。未提交改动（process-config.js、element-ui.scss、master-order-editor.vue、loading-manage.vue、project-apply.vue、formal-settlement.vue、customer-archive.vue）与本任务无关，未纳入。