From ae264c64bc4e49d31370dbf6916aad98aca03eff Mon Sep 17 00:00:00 2001
From: felix <623337308@qq.com>
Date: Tue, 9 Nov 2021 17:32:18 +0800
Subject: [PATCH] pref: attachments preview image styles (halo-dev/console#374)

---
 .../Attachment/AttachmentSelectDrawer.vue     | 13 +++++++++----
 src/styles/global.less                        | 19 +++++++++++++++++++
 src/views/attachment/AttachmentList.vue       | 12 +++++++++---
 .../components/AttachmentDrawer.vue           | 13 +++++++++----
 4 files changed, 46 insertions(+), 11 deletions(-)

diff --git a/src/components/Attachment/AttachmentSelectDrawer.vue b/src/components/Attachment/AttachmentSelectDrawer.vue
index 5a35806462..011951a50c 100644
--- a/src/components/Attachment/AttachmentSelectDrawer.vue
+++ b/src/components/Attachment/AttachmentSelectDrawer.vue
@@ -15,17 +15,22 @@
       <a-divider />
       <a-row type="flex" align="middle">
         <a-col :span="24">
-          <a-spin :spinning="loading">
+          <a-spin :spinning="loading" class="attachments-group">
             <a-empty v-if="attachments.length === 0" />
             <div
               v-else
-              class="attach-item"
+              class="attach-item  attachments-group-item"
               v-for="(item, index) in attachments"
               :key="index"
               @click="handleSelectAttachment(item)"
             >
-              <span v-show="!handleJudgeMediaType(item)">当前格式不支持预览</span>
-              <img :src="item.thumbPath" v-show="handleJudgeMediaType(item)" loading="lazy" />
+              <span v-if="!handleJudgeMediaType(item)" class="attachments-group-item-type">{{ item.suffix }}</span>
+              <span
+                v-else
+                class="attachments-group-item-img"
+                :style="`background-image:url(${item.thumbPath})`"
+                loading="lazy"
+              />
             </div>
           </a-spin>
         </a-col>
diff --git a/src/styles/global.less b/src/styles/global.less
index dfbd9bebba..fc190934fb 100644
--- a/src/styles/global.less
+++ b/src/styles/global.less
@@ -814,6 +814,25 @@ body {
   top: 0;
 }
 
+// 附件图片样式
+.attachments-group {
+  &-item {
+    padding: 0;
+    height: 140px;
+    &-img {
+      display: block;
+      height: 100%;
+      background-repeat: no-repeat;
+      background-size: 100%;
+      background-position: center;
+    }
+    .attachments-group &-type {
+      font-size: 38px;
+      text-transform: capitalize;
+    }
+  }
+}
+
 .ant-affix {
   z-index: 1000 !important;
 }
diff --git a/src/views/attachment/AttachmentList.vue b/src/views/attachment/AttachmentList.vue
index e4c51a020b..1b93412ee1 100644
--- a/src/views/attachment/AttachmentList.vue
+++ b/src/views/attachment/AttachmentList.vue
@@ -71,6 +71,7 @@
       </a-col>
       <a-col :span="24">
         <a-list
+          class="attachments-group"
           :grid="{ gutter: 12, xs: 2, sm: 2, md: 4, lg: 6, xl: 6, xxl: 6 }"
           :dataSource="formattedDatas"
           :loading="listLoading"
@@ -82,9 +83,14 @@
               @click="handleShowDetailDrawer(item)"
               @contextmenu.prevent="handleContextMenu($event, item)"
             >
-              <div class="attach-thumb">
-                <span v-show="!handleJudgeMediaType(item)">当前格式不支持预览</span>
-                <img :src="item.thumbPath" v-show="handleJudgeMediaType(item)" loading="lazy" />
+              <div class="attach-thumb attachments-group-item">
+                <span v-if="!handleJudgeMediaType(item)" class="attachments-group-item-type">{{ item.suffix }}</span>
+                <span
+                  v-else
+                  class="attachments-group-item-img"
+                  :style="`background-image:url(${item.thumbPath})`"
+                  loading="lazy"
+                />
               </div>
               <a-card-meta class="p-3">
                 <ellipsis :length="isMobile() ? 12 : 16" tooltip slot="description">{{ item.name }}</ellipsis>
diff --git a/src/views/attachment/components/AttachmentDrawer.vue b/src/views/attachment/components/AttachmentDrawer.vue
index 322c88fa2c..6cbde412d8 100644
--- a/src/views/attachment/components/AttachmentDrawer.vue
+++ b/src/views/attachment/components/AttachmentDrawer.vue
@@ -15,18 +15,23 @@
       <a-divider />
       <a-row type="flex" align="middle">
         <a-col :span="24">
-          <a-spin :spinning="loading">
+          <a-spin :spinning="loading" class="attachments-group">
             <a-empty v-if="formattedDatas.length === 0" />
             <div
               v-else
-              class="attach-item"
+              class="attach-item attachments-group-item"
               v-for="(item, index) in formattedDatas"
               :key="index"
               @click="handleShowDetailDrawer(item)"
               @contextmenu.prevent="handleContextMenu($event, item)"
             >
-              <span v-show="!handleJudgeMediaType(item)">当前格式不支持预览</span>
-              <img :src="item.thumbPath" v-show="handleJudgeMediaType(item)" loading="lazy" />
+              <span v-if="!handleJudgeMediaType(item)" class="attachments-group-item-type">{{ item.suffix }}</span>
+              <span
+                v-else
+                class="attachments-group-item-img"
+                :style="`background-image:url(${item.thumbPath})`"
+                loading="lazy"
+              />
             </div>
           </a-spin>
         </a-col>