From 9f3021438e3b461eef5ef07fd079f6e4c97121b6 Mon Sep 17 00:00:00 2001
From: raoyongjun <785755591@qq.com>
Date: Fri, 26 Apr 2024 09:49:32 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A7=A3=E5=86=B3=E5=86=B2=E7=AA=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                    |  23 ++++
 src/views/home/content/Content.vue | 204 ++++++++++++++---------------
 2 files changed, 125 insertions(+), 102 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index ddd3db7..298dbe9 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -10,17 +10,40 @@ declare module 'vue' {
     Application: typeof import('./src/components/Application/Application.vue')['default']
     BasicModal: typeof import('./src/components/Modal/BasicModal.vue')['default']
     DataHeader: typeof import('./src/components/DataHeader/index.vue')['default']
+    NAvatar: typeof import('naive-ui')['NAvatar']
     NButton: typeof import('naive-ui')['NButton']
+    NCard: typeof import('naive-ui')['NCard']
     NCheckbox: typeof import('naive-ui')['NCheckbox']
+    NCollapse: typeof import('naive-ui')['NCollapse']
+    NCollapseItem: typeof import('naive-ui')['NCollapseItem']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
+    NDatePicker: typeof import('naive-ui')['NDatePicker']
     NDialogProvider: typeof import('naive-ui')['NDialogProvider']
+    NDivider: typeof import('naive-ui')['NDivider']
+    NDropdown: typeof import('naive-ui')['NDropdown']
     NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']
+    NGrid: typeof import('naive-ui')['NGrid']
+    NGridItem: typeof import('naive-ui')['NGridItem']
+    NImage: typeof import('naive-ui')['NImage']
     NInput: typeof import('naive-ui')['NInput']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
     NModal: typeof import('naive-ui')['NModal']
     NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
     NotPassed: typeof import('./src/components/NotPassed.vue')['default']
+    NPopover: typeof import('naive-ui')['NPopover']
+    NPopselect: typeof import('naive-ui')['NPopselect']
+    NProgress: typeof import('naive-ui')['NProgress']
+    NScrollbar: typeof import('naive-ui')['NScrollbar']
+    NSelect: typeof import('naive-ui')['NSelect']
+    NSlider: typeof import('naive-ui')['NSlider']
+    NSpace: typeof import('naive-ui')['NSpace']
+    NSpin: typeof import('naive-ui')['NSpin']
+    NSwitch: typeof import('naive-ui')['NSwitch']
+    NTag: typeof import('naive-ui')['NTag']
+    NTooltip: typeof import('naive-ui')['NTooltip']
+    NUpload: typeof import('naive-ui')['NUpload']
+    NUploadDragger: typeof import('naive-ui')['NUploadDragger']
     Quill: typeof import('./src/components/RichEditor/Quill.vue')['default']
     Robot: typeof import('./src/components/Robot/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
diff --git a/src/views/home/content/Content.vue b/src/views/home/content/Content.vue
index 3805e0c..56a51e1 100644
--- a/src/views/home/content/Content.vue
+++ b/src/views/home/content/Content.vue
@@ -739,117 +739,117 @@ defineExpose({
           <span style="color: #507afd; font-weight: 500">{{ totalCount }}</span> 项</span>
       </div>
 
-      <!-- <n-spin :show="loading"> -->
-      <div ref="el" class="scroll" :style="listStyle">
-        <waterfall :col="8" :data="listData" :gutter-width="10" @finish="finish">
-          <div
-            v-for="(item, index) in listData"
-            :key="item.calHeight"
-            :style="{ height: gridHeight }"
-            class="grid-item"
-          >
-            <img
-              :key="item.thumburl"
-              v-lazy="item.thumburl"
-              :class="{
-                'img-fit': viewMode === 'horizontalVersion',
-                'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
-              }"
-              :style="{ height: `${`${item.calHeight}px`}` }"
-              class="img"
-              alt="加载错误"
-            >
-
-            <n-image
-              ref="imageRef"
-              :key="item.imgUrl"
-              class="img"
-              :img-props="{
-                onClick: ($event) => {
-                  hideDownload($event);
-                  showClose = true;
-                },
-              }"
-              :class="{
-                'img-fit': viewMode === 'horizontalVersion',
-                'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
-              }"
-              :preview-src="item.imgUrl"
-              :src="item.thumburl"
-              :fallback-src="bgLoadingImg"
-              :style="{ backgroundImage: `url(${loading ? bgLoadingImg : 'none'})` }"
-              style="display: none"
-            />
-
-            <img
-              v-if="item.states == 3"
-              class="tag-status"
-              src="@/assets/images/task/tag-pass.png"
-              alt=""
-            >
-            <img
-              v-if="item.states == 5"
-              class="tag-status"
-              src="@/assets/images/task/tag-not-pass.png"
-              alt=""
+      <n-spin :show="loading">
+        <div ref="el" class="scroll" :style="listStyle">
+          <waterfall :col="8" :data="listData" :gutter-width="10" @finish="finish">
+            <div
+              v-for="(item, index) in listData"
+              :key="item.calHeight"
+              :style="{ height: gridHeight }"
+              class="grid-item"
             >
+              <img
+                :key="item.thumburl"
+                v-lazy="item.thumburl"
+                :class="{
+                  'img-fit': viewMode === 'horizontalVersion',
+                  'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
+                }"
+                :style="{ height: `${`${item.calHeight}px`}` }"
+                class="img"
+                alt="加载错误"
+              >
+
+              <n-image
+                ref="imageRef"
+                :key="item.imgUrl"
+                class="img"
+                :img-props="{
+                  onClick: ($event) => {
+                    hideDownload($event);
+                    showClose = true;
+                  },
+                }"
+                :class="{
+                  'img-fit': viewMode === 'horizontalVersion',
+                  'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
+                }"
+                :preview-src="item.imgUrl"
+                :src="item.thumburl"
+                :fallback-src="bgLoadingImg"
+                :style="{ backgroundImage: `url(${loading ? bgLoadingImg : 'none'})` }"
+                style="display: none"
+              />
 
-            <div v-if="item.similar != -1" class="percent">
-              <SvgIcon size="42" :name="item.similar == 100 ? 'error_tag' : 'tag'" />
-              <div class="val">
-                {{ `${item.similar}%` }}
+              <img
+                v-if="item.states == 3"
+                class="tag-status"
+                src="@/assets/images/task/tag-pass.png"
+                alt=""
+              >
+              <img
+                v-if="item.states == 5"
+                class="tag-status"
+                src="@/assets/images/task/tag-not-pass.png"
+                alt=""
+              >
+
+              <div v-if="item.similar != -1" class="percent">
+                <SvgIcon size="42" :name="item.similar == 100 ? 'error_tag' : 'tag'" />
+                <div class="val">
+                  {{ `${item.similar}%` }}
+                </div>
+              </div>
+              <div v-if="isAllowDownload" class="glass">
+                <SvgIcon
+                  size="16"
+                  name="download"
+                  style="margin-top: -6px; cursor: pointer"
+                  @click="downloadImage(item)"
+                />
               </div>
-            </div>
-            <div v-if="isAllowDownload" class="glass">
-              <SvgIcon
-                size="16"
-                name="download"
-                style="margin-top: -6px; cursor: pointer"
-                @click="downloadImage(item)"
-              />
-            </div>
 
-            <div class="info">
-              <div class="footer">
-                <div class="img-name">
-                  <n-tooltip trigger="hover">
-                    <template #trigger>
-                      <span>{{ item.imgName }}</span>
-                    </template>
-                    <span
-                      style="font-size: 12px; margin-top: 4px; margin-bottom: 16px"
-                    >{{ item.imgName }}</span>
-                  </n-tooltip>
+              <div class="info">
+                <div class="footer">
+                  <div class="img-name">
+                    <n-tooltip trigger="hover">
+                      <template #trigger>
+                        <span>{{ item.imgName }}</span>
+                      </template>
+                      <span
+                        style="font-size: 12px; margin-top: 4px; margin-bottom: 16px"
+                      >{{ item.imgName }}</span>
+                    </n-tooltip>
+                  </div>
+                  <div
+                    class="icon-wrap"
+                    @click="
+                      ($event) => {
+                        previewHandler(index, $event);
+                        hideDownload($event);
+                      }
+                    "
+                  >
+                    <SvgIcon
+                      size="13"
+                      name="magnifying-2"
+                      style="cursor: pointer; color: #898481"
+                    />
+                  </div>
                 </div>
-                <div
-                  class="icon-wrap"
-                  @click="
-                    ($event) => {
-                      previewHandler(index, $event);
-                      hideDownload($event);
-                    }
-                  "
-                >
-                  <SvgIcon
-                    size="13"
-                    name="magnifying-2"
-                    style="cursor: pointer; color: #898481"
+                <div class="left">
+                  <n-avatar
+                    :src="(item.uphead && getAvatar(item.uphead)) || defaultAvatar"
+                    class="avatar"
+                    round
                   />
+                  <span>{{ item.upname }}</span>
                 </div>
               </div>
-              <div class="left">
-                <n-avatar
-                  :src="(item.uphead && getAvatar(item.uphead)) || defaultAvatar"
-                  class="avatar"
-                  round
-                />
-                <span>{{ item.upname }}</span>
-              </div>
             </div>
-          </div>
-        </waterfall>
-      </div>
-      <!-- </n-spin> -->
+          </waterfall>
+        </div>
+      </n-spin>
     </div>
     <PackageSettingsModal ref="packageModalRef" @commit="commitHandler" />
     <GeneratePackageModal ref="generateModalRef" />