refactor(transportCapacity): 使用 section-card 重构司机管理弹窗布局

- 将司机管理页面新增/编辑弹窗中四个分组改为使用标准 section-card 组件包裹
- 删除手写的扁平样式和红色竖条，统一使用全局 element-ui 样式维护弹窗视觉风格
- 调整司机证件上传区尺寸为 240x151 px，保持身份证比例并左对齐显示
- 优化弹窗中各表单项布局，提高视觉层次与一致性
- 更新 scoped 样式，移除无用的 section-title 样式，保持代码清洁

.workbuddy/memory/MEMORY.md

@@ -1,16 +1,66 @@
 # 项目长期记忆（tms-erp-web-ws / Saber3 客商模块）
 
 ## 设计约定（经用户确认的决策）
-- 弹窗内多字段表单分组：**「灰色分组块 + 白色内层卡片」双色方案**（用户最终确认）。
-  - 外层 `.archive-form__group`：灰底 `#f0f2f5` + 8px 圆角 + `16px 20px` 内边距，分组标题（`.dialog-section-title`，自带 4px 主色竖条）浮于灰底上。
-  - 内层字段区：直接把分组内唯一的 `> .el-row` 设为白底（`#fff` + 6px 圆角 + 极淡阴影 `0 1px 2px rgba(0,0,0,.04)` + `18px 16px 4px` 内边距），形成「白卡片浮于灰底」的层次，而非逐个输入框强制白底。
-  - 理由：契合 AGENTS.md「去卡片化」哲学（不嵌套 `el-card`），同时用户明确要灰底+白内容对比，全局 `.dialog-section-title` 直接复用即可。
-  - 适用：新增/编辑弹窗中字段超过 ~10 个、需按业务语义分组时。
+
+### 弹窗内多字段表单分组：使用全局 `<section-card>` 组件（项目统一标准）
+
+**整体结构**：
+- 整个弹窗 body 由 `src/styles/element-ui.scss` 全局 `.el-dialog__body { background: #f5f6fa; padding: 16px }` 统一灰底（无需页面再覆盖）。
+- 每个业务分组 = 一张白底卡片。用全局组件 `<section-card title="分组名">...</section-card>`，自动渲染 4px 主色竖条 + 8px 间距的卡头与白底 body（圆角 6px + 极淡阴影），与 `loading-manage.vue` / `customer-archive.vue` 等已落地页面一致。
+- 严禁再手写 `.xxx-form__block` + `.dialog-section-title` override 拼凑卡片（项目已有 `<section-card>` 标准组件）。
+
+**HTML 结构**（每组三件套）：
+```vue
+<section-card title="分组标题">
+  <el-row :gutter="18">
+    <el-col :span="8">...</el-col>
+  </el-row>
+  <!-- 同一组的所有 row 都放同一张白卡内 -->
+</section-card>
+```
+
+**适用**：新增/编辑弹窗中字段超过 ~10 个、需按业务语义分组时。
+
+### 简单分组（仅 3 项）
 - 联系信息等仅 3 项的分组，可用 `el-col :span="8"` 让三项均分一行，避免 4 列网格留白。
 
+### 上传证件区域尺寸规范（transportCapacity 模块强制）
+- **比例**：中国二代身份证标准尺寸 85.6 × 53.98 mm → 宽:高 = **1.586 : 1**（横放）
+- **尺寸**：取真实身份证的 ~75% → 固定 **240 × 151 px**（1.586:1 精确：151 × 1.586 ≈ 240）
+- **位置**：在 el-col 列内 `margin: 0` 左对齐显示（不再 `width: 100%` 占满整栏，也不再居中）
+- **适用范围**：所有 `<image-upload-field large>` 上传区，包括身份证正反面、大头照、机动车行驶证主页正/反面/副页正/反面、道路运输证、机动车登记本、船舶所有权/安全环保/国籍/最低安全配员/光船租赁/营业运输 等所有 cert 图片
+- **实现方式**：在每个页面 scoped 样式里覆盖 class-prefix 对应的 `--large` 选择器（`.driver-uploader--large` / `.vehicle-uploader--large` / `.ship-uploader--large`）：
+  ```scss
+  :deep(.xxx-uploader) { display: block; }  // 不再 width:100%
+  :deep(.xxx-uploader--large) {
+    display: block;
+    width: 240px;
+    margin: 0;
+  }
+  :deep(.xxx-uploader--large .el-upload),
+  :deep(.xxx-uploader--large.el-upload) {
+    width: 100%;
+    height: 151px;
+  }
+  ```
+- **CSS 顺序要点**：`.xxx-uploader`（特定性 0,0,1,0）必须写在 `.xxx-uploader--large`（同为 0,0,1,0）之前，源码位置决定覆盖生效。
+
+### 上传图片点击放大预览（全局组件 `image-upload-field` 已实现）
+- **组件**：`src/components/image-upload-field/main.vue`。原裸 `<img>` 改为 `<el-image :preview-src-list="[value]" fit="contain" preview-teleported :z-index="3000" @click.stop>`。点击图片即全屏预览（滚轮缩放 / 旋转 / 下载），零额外依赖。
+- **预览与上传分离**：图片 `@click.stop` 阻止冒泡到 `el-upload`（否则会触发重传）；"更换"入口（form 模式图片下方 `el-link`、card 模式 head 的 `actionText`）通过 `el-upload` 内部隐藏 `input.el-upload__input` 的 `.click()` 触发文件框。
+- **为什么用 DOM click**：Element Plus `el-upload` 仅 expose `abort/submit/clearFiles/handleStart/handleRemove`，**没有** `openFileDialog`，故用 `this.$refs.uploadRef.$el.querySelector('.el-upload__input').click()`。
+- **readonly 模式**：仅渲染 `el-image` 预览，不显示上传入口（查看档案时也能放大看证件）。
+- **z-index 注意**：务必 `preview-teleported`（预览层挂 body）+ `:z-index="3000"`，否则会被 `el-dialog` 遮罩（2000 区间）盖住。
+- **适用范围**：全仓通用组件，driver / vehicle / ship 三个页面自动获得该能力（改动一次组件即可）。
+
 ## 关键文件
-- 客商档案弹窗：`src/views/vehicle/customer-archive.vue`（手写 `el-form`，非 Avue option 驱动；分组结构见 `.archive-form__group`）。
-- 全局弹窗分区标题规范：`src/styles/element-ui.scss` 的 `.dialog-section-title`。
+- 通用分组白卡组件：`src/components/section-card/main.vue`（已全局注册为 `<section-card>`，支持 `title` / `#title` / `#extra` slot）。
+- 弹窗灰底 body + section-card 全局样式：`src/styles/element-ui.scss`（`.el-dialog__body`、`.section-card { &__header / &__bar / &__title / &__extra / &__body }`）。
+- 司机档案弹窗：`src/views/transportCapacity/driver.vue`（手写 `el-form` + `<section-card>` 4 大分组：基础身份信息 / 驾驶证信息 / 从业资格证信息 / 司机联系信息）。
+- 车辆档案弹窗：`src/views/transportCapacity/vehicle.vue`（手写 `el-form` + `<section-card>` 2 大分组：基础车辆信息 / 车辆资质图片；6 张大图按身份证比例 240×151 左对齐）。
+- 船舶档案弹窗：`src/views/transportCapacity/ship.vue`（手写 `el-form` + `<section-card>` 2 大分组：基础船舶信息 / 船舶证书信息；内部 6 张 cert 图片按身份证比例 240×151 左对齐；子证书分段用 `.cert-block` + border-top）。
+- 客商档案弹窗：`src/views/vehicle/customer-archive.vue`（工商信息 / 联系信息 / 财务/信用信息 / 其他信息 等分组也用 `<section-card>`）。
+- 项目补录弹窗：`src/views/business/project-apply.vue`（手写 `__grid` / `__table` / `__textarea-list` 同款白卡结构，先于 `<section-card>` 组件化之前落地，可视为视觉参照）。
 
 ## 环境注意
 - Vite 代理跨域：Saber3 axios 开 `withCredentials=true`，直连绝对地址后端须让 CORS `Allow-Origin` 为具体域名（不能用 `*`），否则浏览器拒绝。改 `.env`/`vite.config.mjs` 必须重启 dev。