feat: 优化图片展示方式并新增上传提示

web/src/views/transaction/invoice/index.vue

@@ -1,7 +1,18 @@
 <script setup>
 import { h, onMounted, ref } from 'vue'
 import dayjs from 'dayjs'
-import { NButton, NInput, NTag, NSelect, NDatePicker, useMessage, useDialog } from 'naive-ui'
+import {
+  NButton,
+  NInput,
+  NTag,
+  NSelect,
+  NDatePicker,
+  NPopover,
+  NImage,
+  NImageGroup,
+  useMessage,
+  useDialog,
+} from 'naive-ui'
 
 import CommonPage from '@/components/page/CommonPage.vue'
 import QueryBarItem from '@/components/query-bar/QueryBarItem.vue'
@@ -92,18 +103,87 @@ const columns = [
       const urls = list.map((item) => item?.url).filter(Boolean)
 
       if (!urls.length) return '-'
-      return h(
+      const maxThumb = 3
-        'div',
+      const extraCount = urls.length - maxThumb
-        { style: 'display:flex; gap:6px; justify-content:center; align-items: center;' },
+
-        urls.slice(0, 3).map((url, idx) =>
+      const triggerNode = () =>
-          h('img', {
+        h(
-            src: url,
+          'div',
+          {
             style:
-              'width:40px;height:40px;object-fit:cover;border-radius:4px;border:1px solid #e5e6eb;cursor:pointer;',
+              'display:flex; gap:6px; justify-content:center; align-items:center; flex-wrap:wrap;',
-            alt: '付款凭证',
+          },
-            onClick: () => window.open(url, '_blank'),
+          [
-          })
+            ...urls.slice(0, maxThumb).map((url, idx) =>
+              h(NImage, {
+                key: `${url}_${idx}`,
+                src: url,
+                width: 40,
+                height: 40,
+                objectFit: 'cover',
+                previewDisabled: true,
+                style:
+                  'border-radius:4px;border:1px solid #e5e6eb;cursor:pointer;overflow:hidden;',
+              })
+            ),
+            extraCount > 0
+              ? h(
+                  'div',
+                  {
+                    style:
+                      'width:40px;height:40px;border-radius:4px;border:1px dashed #d3d3d3;display:flex;align-items:center;justify-content:center;color:#666;font-size:12px;background:#fafafa;cursor:default;',
+                  },
+                  `+${extraCount}`
+                )
+              : null,
+          ]
         )
+
+      const popContent = () =>
+        h(
+          'div',
+          { style: 'padding:8px; max-width:360px;' },
+          [
+            h(
+              NImageGroup,
+              null,
+              {
+                default: () =>
+                  urls.map((url, idx) =>
+                    h(NImage, {
+                      key: `${url}_preview_${idx}`,
+                      src: url,
+                      width: 120,
+                      height: 120,
+                      objectFit: 'cover',
+                      style:
+                        'margin:6px;border-radius:6px;border:1px solid #e5e6eb;overflow:hidden;',
+                    })
+                  ),
+              }
+            ),
+            h(
+              'div',
+              {
+                style: 'margin-top:6px;font-size:12px;color:#666;text-align:right;',
+              },
+              `共${urls.length}张，点击图片可预览原图`
+            ),
+          ]
+        )
+
+      return h(
+        NPopover,
+        {
+          trigger: 'hover',
+          placement: 'top',
+          showArrow: false,
+          displayDirective: 'show', // keep content mounted so image preview won't flash close
+        },
+        {
+          trigger: triggerNode,
+          default: popContent,
+        }
       )
     },
   },

web1/src/views/pages/index.vue

@@ -290,22 +290,25 @@
           </n-form-item-gi>
           <n-form-item-gi
             :span="24"
-            class="form-item"
+            class="form-item upload-item"
             label="非遗传承人等级证书"
             path="inheritor_certificates"
           >
-            <n-upload
+            <div class="upload-row">
-              :action="actionUrl"
+              <n-upload
-              :default-file-list="modalForm.inheritor_certificates"
+                :action="actionUrl"
-              list-type="image-card"
+                :default-file-list="modalForm.inheritor_certificates"
-              @finish="handleFinish3"
+                list-type="image-card"
-              @remove="delete3"
+                @finish="handleFinish3"
-            >
+                @remove="delete3"
-              <div>
+              >
-                <img style="width: 24px; height: 24px" src="@/assets/images/upload.png" alt="" />
+                <div>
-                <p style="font-size: 12px">添加图片</p>
+                  <img style="width: 24px; height: 24px" src="@/assets/images/upload.png" alt="" />
-              </div>
+                  <p style="font-size: 12px">添加图片</p>
-            </n-upload>
+                </div>
+              </n-upload>
+              <div class="upload-tip">只支持JPG/PNG，单张不超过20M，最多上传10张</div>
+            </div>
           </n-form-item-gi>
           <n-form-item-gi :span="10" class="form-item" label="非遗等级" path="heritage_level">
             <template #label>
@@ -380,7 +383,7 @@
           </n-form-item-gi>
           <n-form-item-gi
             :span="24"
-            class="form-item"
+            class="form-item upload-item"
             label="非遗资产所用专利的证书"
             path="patent_certificates"
           >
@@ -395,20 +398,28 @@
                 </n-tooltip>
               </div>
             </template>
-            <n-upload
+            <div class="upload-row">
-              :action="actionUrl"
+              <n-upload
-              :default-file-list="modalForm.patent_certificates"
+                :action="actionUrl"
-              @finish="handleFinish1"
+                :default-file-list="modalForm.patent_certificates"
-              @remove="delete1"
+                @finish="handleFinish1"
-              list-type="image-card"
+                @remove="delete1"
-            >
+                list-type="image-card"
-              <div>
+              >
-                <img style="width: 24px; height: 24px" src="@/assets/images/upload.png" alt="" />
+                <div>
-                <p style="font-size: 12px">添加图片</p>
+                  <img style="width: 24px; height: 24px" src="@/assets/images/upload.png" alt="" />
-              </div>
+                  <p style="font-size: 12px">添加图片</p>
-            </n-upload>
+                </div>
+              </n-upload>
+              <div class="upload-tip">只支持JPG/PNG，单张不超过20M，最多上传10张</div>
+            </div>
           </n-form-item-gi>
-          <n-form-item-gi :span="24" class="form-item" label="非遗纹样图片" path="pattern_images">
+          <n-form-item-gi
+            :span="24"
+            class="form-item upload-item"
+            label="非遗纹样图片"
+            path="pattern_images"
+          >
             <template #label>
               <div class="flex items-center gap-4">
                 <span>非遗纹样图片</span>
@@ -420,18 +431,21 @@
                 </n-tooltip>
               </div>
             </template>
-            <n-upload
+            <div class="upload-row">
-              :action="actionUrl"
+              <n-upload
-              :default-file-list="modalForm.pattern_images"
+                :action="actionUrl"
-              @finish="handleFinish2"
+                :default-file-list="modalForm.pattern_images"
-              @remove="delete2"
+                @finish="handleFinish2"
-              list-type="image-card"
+                @remove="delete2"
-            >
+                list-type="image-card"
-              <div>
+              >
-                <img style="width: 24px; height: 24px" src="@/assets/images/upload.png" alt="" />
+                <div>
-                <p style="font-size: 12px">添加图片</p>
+                  <img style="width: 24px; height: 24px" src="@/assets/images/upload.png" alt="" />
-              </div>
+                  <p style="font-size: 12px">添加图片</p>
-            </n-upload>
+                </div>
+              </n-upload>
+              <div class="upload-tip">只支持JPG/PNG，单张不超过20M，最多上传10张</div>
+            </div>
           </n-form-item-gi>
         </n-grid>
         <n-grid v-if="currentStep == 3" :cols="24" :x-gap="0">
@@ -1821,6 +1835,9 @@ onMounted(async () => {
   width: 330px;
   margin-left: 20px;
 }
+.upload-item {
+  width: 100%;
+}
 .form-title-box {
   margin: auto;
   margin-top: 40px;
@@ -1977,6 +1994,18 @@ onMounted(async () => {
   margin-left: 25px;
   color: #303133;
 }
+.upload-tip {
+  margin-top: 0;
+  font-size: 12px;
+  color: #9c9c9c;
+}
+.upload-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-top: 8px;
+}
 
 /* 移除number类型输入框的箭头 */
 input[type='number']::-webkit-outer-spin-button,