💊 优化增加附件图片类型预览

src/pages/collect/assessment/components/EvaluationFormBlock.vue

@@ -74,42 +74,45 @@
           message="请先保存评估表后再上传佐证资料"
           show-icon
         />
-        <template v-else-if="readonly">
-          <a-empty v-if="!getAnnexFileList(item.id).length" description="暂无佐证资料" />
-          <ul v-else class="annex-list pl-5 mt-2">
-            <li v-for="file in getAnnexFileList(item.id)" :key="file.uid">
-              <a :href="file.url" target="_blank" rel="noopener noreferrer">{{ file.name }}</a>
-            </li>
-          </ul>
-        </template>
-        <a-upload
-          v-else
-          class="flex flex-row items-center gap-2 mt-2"
-          :file-list="getAnnexFileList(item.id)"
-          :multiple="true"
-          :custom-request="(options: any) => annexCustomRequest(item.id, options)"
-          :before-upload="beforeAnnexUpload"
-          @remove="(file: any) => handleAnnexRemove(item.id, file)"
-          @update:file-list="(list: any) => setAnnexFileList(item.id, list)"
-        >
-          <template #itemRender="{ originNode, file }">
-            <div class="flex flex-row items-center gap-2">
-              <div class="flex-1 min-w-0">
-                <component :is="originNode" />
+        <template v-else>
+          <a-upload
+            class="flex flex-row items-center gap-2 mt-2"
+            :file-list="getAnnexFileList(item.id)"
+            :multiple="true"
+            :disabled="readonly"
+            :custom-request="(options: any) => annexCustomRequest(item.id, options)"
+            :before-upload="beforeAnnexUpload"
+            @remove="(file: any) => handleAnnexRemove(item.id, file)"
+            @update:file-list="(list: any) => setAnnexFileList(item.id, list)"
+          >
+            <template #itemRender="{ originNode, file }">
+              <div class="flex flex-row items-center gap-2">
+                <a-image
+                  v-if="isImageFile(file)"
+                  :src="file.response?.url ?? file.url"
+                  :width="48"
+                  :height="48"
+                  class="annex-thumbnail"
+                  :preview="{ mask: false }"
+                  :fallback="IMAGE_FALLBACK"
+                />
+                <div class="flex-1 min-w-0">
+                  <component :is="originNode" />
+                </div>
+                <a-button
+                  type="link"
+                  size="small"
+                  class="mt-2!"
+                  :disabled="file?.status !== 'done'"
+                  @click.prevent.stop="editAnnexDesc(item.id, file)"
+                >
+                  编辑
+                </a-button>
               </div>
-              <a-button
-                type="link"
-                size="small"
-                class="mt-2!"
-                :disabled="file?.status !== 'done'"
-                @click.prevent.stop="editAnnexDesc(item.id, file)"
-              >
-                编辑
-              </a-button>
-            </div>
-          </template>
-          <a-button type="default" size="small" class="ml-3">选择文件上传</a-button>
-        </a-upload>
+            </template>
+            <a-button type="default" size="small" class="ml-3">选择文件上传</a-button>
+          </a-upload>
+        </template>
       </div>
     </div>
     <a-divider />
@@ -133,6 +136,7 @@ import { ArrayUtils } from '@imengyu/imengyu-utils';
 import type { UploadProps } from 'ant-design-vue';
 import { Input, message, Modal } from 'ant-design-vue';
 import type { FormInstance } from 'ant-design-vue';
+import { CameraOutlined } from '@ant-design/icons-vue';
 import {
   getCheckAnnexType,
   default as AssessmentContentApi,
@@ -156,6 +160,17 @@ const props = withDefaults(defineProps<{
   readonly: false,
 });
 
+const IMAGE_FALLBACK = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjQ4IiBoZWlnaHQ9IjQ4IiBmaWxsPSIjZjVmNWY1Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZpbGw9IiNjY2MiIGZvbnQtc2l6ZT0iMTIiPuWbvuePhzwvdGV4dD48L3N2Zz4=';
+const IMAGE_MIME_RE = /^image\//i;
+
+function isImageFile(file: any): boolean {
+  const mime = String(file?.response?.mimetype ?? file?.type ?? '');
+  if (IMAGE_MIME_RE.test(mime))
+    return true;
+  const url = String(file?.response?.url ?? file?.url ?? file?.name ?? '');
+  return /\.(jpe?g|png|gif|webp|bmp|svg|ico|avif)(\?|$)/i.test(url);
+}
+
 const mainFormRef = ref<IDynamicFormRef | null>(null);
 const tailFormRef = ref<IDynamicFormRef | null>(null);
 const annexUploadCo = useAliOssUploadCo('assessment/annex');
@@ -682,4 +697,9 @@ defineExpose({ validate });
   gap: 12px;
   margin-bottom: 8px;
 }
+.annex-thumbnail {
+  flex-shrink: 0;
+  border-radius: 4px;
+  object-fit: cover;
+}
 </style>