pref: attachments preview image styles (#374)

halo-dev · Nov 9, 2021 · d3eb288 · d3eb288
1 parent b59dd62
commit d3eb288
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>