✨ 打卡照片按凭证类型分组，编辑弹窗去掉打卡状态开关

- 打卡记录照片按类型分组展示与上传，每个类型各自最多 9 张，组内第一张标「主图」
- 打卡照片是每个打卡节点必有的类型，不由过程配置决定，与各凭证类型并列且互不替代
- 附件区抽出 punch-record-photos 组件，运单详情与配载单详情共用；编辑态沿用 96px 固定方图
- 弹窗上传体积上限由 5MB 提到 20MB，与小程序一致
- 弹窗不再提供「打卡状态」开关：未打卡的记录点「补卡」进来，保存即补出一条已打卡流水

src/views/business/loading-manage.vue

@@ -694,22 +694,12 @@
                             >
                               备注：{{ record.remark }}
                             </div>
-                            <div
+                            <punch-record-photos
                               v-if="record.photos && record.photos.length"
-                              class="loading-detail__punch-record-photos"
-                            >
-                              <div
-                                v-for="(photo, pi) in record.photos"
-                                :key="`${record.nodeCode || index}-${pi}`"
-                                class="loading-detail__driver-upload-item"
-                                @click="previewDriverUploadPhoto(record.photos, pi)"
-                              >
-                                <el-image :src="photo.url" fit="cover" lazy />
-                                <div class="loading-detail__driver-upload-label">
-                                  {{ photo.label || `${record.nodeName}-凭证` }}
-                                </div>
-                              </div>
-                            </div>
+                              :photos="record.photos"
+                              lazy
+                              @preview="previewDriverUploadPhoto(record.photos, $event)"
+                            />
                           </template>
                           <div v-else class="loading-detail__punch-record-line">暂未打卡</div>
                         </div>
@@ -1715,6 +1705,7 @@ import {
   getVoucherImages as getProcessConfigVoucherImages,
 } from '@/api/business/process-config';
 import VoucherExecutionDetail from './components/voucher-execution-detail.vue';
+import PunchRecordPhotos from './components/punch-record-photos.vue';
 import {
   carrierTypeOptions,
   loadingManageConfig,
@@ -1925,6 +1916,7 @@ export default {
     Rank,
     Search,
     VoucherExecutionDetail,
+    PunchRecordPhotos,
   },
   data() {
     return {
@@ -4921,7 +4913,6 @@ export default {
       margin-left: 12px;
     }
   }
-  .loading-detail__punch-record-photos,
   .loading-detail__driver-upload-grid,
   .loading-detail__voucher-image-grid {
     display: grid;