Refactor attachment image preview section (#7944)

Author: ruibaby

ui/console-src/modules/contents/attachments/components/AttachmentDetailModal.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
+import AttachmentImagePreview from "@/components/attachment/AttachmentImagePreview.vue";
 import AttachmentPermalinkList from "@/components/attachment/AttachmentPermalinkList.vue";
-import LazyImage from "@/components/image/LazyImage.vue";
 import { isImage } from "@/utils/image";
 import { coreApiClient } from "@halo-dev/api-client";
 import {
@@ -16,7 +16,6 @@ import { utils } from "@halo-dev/ui-shared";
 import { useQuery } from "@tanstack/vue-query";
 import prettyBytes from "pretty-bytes";
 import { computed, ref, toRefs, useTemplateRef } from "vue";
-import AttachmentThumbnailList from "./AttachmentThumbnailList.vue";
 import DisplayNameEditForm from "./DisplayNameEditForm.vue";
 
 const props = withDefaults(
@@ -99,7 +98,7 @@ const showDisplayNameForm = ref(false);
         display_name: attachment?.spec.displayName || '',
       })
     "
-    :width="1000"
+    :width="1200"
     :mount-to-body="mountToBody"
     :layer-closable="true"
     height="calc(100vh - 20px)"
@@ -116,35 +115,10 @@ const showDisplayNameForm = ref(false);
           <VDescriptionItem
             :label="$t('core.attachment.detail_modal.fields.preview')"
           >
-            <a
+            <AttachmentImagePreview
               v-if="isImage(attachment?.spec.mediaType)"
-              :href="attachment?.status?.permalink"
-              target="_blank"
-            >
-              <LazyImage
-                v-tooltip="{
-                  content: attachment?.status?.permalink,
-                  placement: 'bottom',
-                }"
-                :alt="attachment?.spec.displayName"
-                :src="
-                  attachment?.status?.thumbnails?.M ||
-                  attachment?.status?.permalink
-                "
-                classes="max-w-full cursor-pointer rounded"
-              >
-                <template #loading>
-                  <span class="text-gray-400">
-                    {{ $t("core.common.status.loading") }}...
-                  </span>
-                </template>
-                <template #error>
-                  <span class="text-red-400">
-                    {{ $t("core.common.status.loading_error") }}
-                  </span>
-                </template>
-              </LazyImage>
-            </a>
+              :attachment="attachment"
+            />
             <div v-else-if="attachment?.spec.mediaType?.startsWith('video/')">
               <video
                 :src="attachment.status?.permalink"
@@ -220,15 +194,6 @@ const showDisplayNameForm = ref(false);
           >
             <AttachmentPermalinkList :attachment="attachment" />
           </VDescriptionItem>
-          <VDescriptionItem
-            v-if="
-              isImage(attachment?.spec.mediaType) &&
-              !!attachment?.status?.thumbnails
-            "
-            :label="$t('core.attachment.detail_modal.fields.thumbnails')"
-          >
-            <AttachmentThumbnailList :attachment="attachment" />
-          </VDescriptionItem>
         </VDescription>
       </div>
     </div>

ui/console-src/modules/contents/attachments/components/AttachmentThumbnailList.vue

@@ -0,0 +1,98 @@
+<script lang="ts" setup>
+import LazyImage from "@/components/image/LazyImage.vue";
+import {
+  GetThumbnailByUriSizeEnum,
+  type Attachment,
+} from "@halo-dev/api-client";
+import { VTabbar } from "@halo-dev/components";
+import { THUMBNAIL_WIDTH_MAP } from "@halo-dev/ui-shared";
+import { computed, ref, toRefs } from "vue";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+
+const props = withDefaults(
+  defineProps<{
+    attachment?: Attachment;
+  }>(),
+  {
+    attachment: undefined,
+  }
+);
+
+const { attachment } = toRefs(props);
+
+const sizeOrder: Record<GetThumbnailByUriSizeEnum, number> = {
+  XL: 4,
+  L: 3,
+  M: 2,
+  S: 1,
+};
+
+const items = computed(
+  (): { label: string; id: string; permalink?: string }[] => {
+    return [
+      {
+        label: t("core.attachment.common.text.original"),
+        id: "original",
+        permalink: attachment.value?.status?.permalink,
+      },
+      ...Object.entries(attachment.value?.status?.thumbnails || {})
+        .sort(
+          ([sizeA], [sizeB]) =>
+            (sizeOrder[sizeB as GetThumbnailByUriSizeEnum] || 0) -
+            (sizeOrder[sizeA as GetThumbnailByUriSizeEnum] || 0)
+        )
+        .map(([size, permalink]) => ({
+          label: `${THUMBNAIL_WIDTH_MAP[size as GetThumbnailByUriSizeEnum]}w`,
+          id: size,
+          permalink,
+        })),
+    ];
+  }
+);
+
+const activeId = ref(items.value?.[0]?.id);
+</script>
+<template>
+  <VTabbar
+    v-model:active-id="activeId"
+    :items="
+      items.map((item) => ({
+        id: item.id,
+        label: item.label,
+      }))
+    "
+    type="outline"
+  ></VTabbar>
+  <div class="mt-3">
+    <a
+      v-for="item in items"
+      :key="item.permalink"
+      class="block"
+      target="_blank"
+      :href="item.permalink"
+    >
+      <LazyImage
+        v-if="item.id === activeId"
+        v-tooltip="{
+          content: item.permalink,
+          placement: 'bottom',
+        }"
+        :src="item.permalink"
+        classes="max-w-full rounded"
+      >
+        <template #loading>
+          <span class="text-gray-400">
+            {{ $t("core.common.status.loading") }}...
+          </span>
+        </template>
+        <template #error>
+          <span class="text-red-400">
+            {{ $t("core.common.status.loading_error") }}
+          </span>
+        </template>
+      </LazyImage>
+    </a>
+  </div>
+</template>

ui/src/components/attachment/AttachmentImagePreview.vue

@@ -48,5 +48,7 @@ onMounted(async () => {
   <template v-else-if="error">
     <slot name="error"> error </slot>
   </template>
-  <img v-else :src="src" :alt="alt" :class="classes" />
+  <Transition v-else appear name="fade">
+    <img :src="src" :alt="alt" :class="classes" />
+  </Transition>
 </template>

ui/src/components/image/LazyImage.vue

@@ -217,18 +217,17 @@ core:
         original_comment: Original comment
         content: Reply content
   attachment:
+    common:
+      text:
+        original: Original
     filters:
       sort:
         items:
           display_name_asc: Ascending order by display name
           display_name_desc: Descending order by display name
     detail_modal:
-      fields:
-        thumbnails: Thumbnails
       display_name_form:
         help: Custom attachment name, only for display in the management interface, does not affect the file name and access link itself
-      preview:
-        not_support_thumbnail: This image does not support generating thumbnails.
     permalink_list:
       relative: Relative path
       absolute: Absolute path
@@ -332,7 +331,7 @@ core:
   plugin:
     list:
       fields:
-        builtin: Built-in
+        system_reserved: System Reserved
     operations:
       uninstall_in_batch:
         title: Uninstall the selected plugins

ui/src/locales/_missing_translations_es.yaml

@@ -629,6 +629,7 @@ core:
     common:
       text:
         ungrouped: Ungrouped
+        original: Original
     actions:
       storage_policies: Storage Policies
     empty:
@@ -686,14 +687,12 @@ core:
         owner: Owner
         creation_time: Creation time
         permalink: Permalink
-        thumbnails: Thumbnails
       display_name_form:
         help: Custom attachment name, only for display in the management interface, does not affect the file name and access link itself
       preview:
         video_not_support: The current browser does not support video playback.
         audio_not_support: The current browser does not support audio playback.
         not_support: This file does not support preview.
-        not_support_thumbnail: This image does not support generating thumbnails.
     permalink_list:
       relative: Relative path
       absolute: Absolute path

ui/src/locales/en.yaml

@@ -598,6 +598,7 @@ core:
     common:
       text:
         ungrouped: 未分组
+        original: 原始
     actions:
       storage_policies: 存储策略
     empty:
@@ -653,14 +654,12 @@ core:
         owner: 上传者
         creation_time: 上传时间
         permalink: 链接
-        thumbnails: 缩略图
       display_name_form:
         help: 自定义附件名称，仅用于管理界面显示，不会影响文件本身名称以及访问链接
       preview:
         video_not_support: 当前浏览器不支持该视频播放
         audio_not_support: 当前浏览器不支持该音频播放
         not_support: 此文件不支持预览
-        not_support_thumbnail: 此图片不支持生成缩略图
     group_editing_modal:
       titles:
         create: 新增附件分组

ui/src/locales/zh-CN.yaml

@@ -583,6 +583,7 @@ core:
     common:
       text:
         ungrouped: 未分組
+        original: 原始
     actions:
       storage_policies: 存儲策略
     empty:
@@ -638,14 +639,12 @@ core:
         owner: 上傳者
         creation_time: 上傳時間
         permalink: 連結
-        thumbnails: 縮略圖
       display_name_form:
         help: 自定義附件名稱，僅用於管理介面顯示，不會影響文件本身名稱以及訪問連結
       preview:
         video_not_support: 當前瀏覽器不支援該影片播放
         audio_not_support: 當前瀏覽器不支援該音頻播放
         not_support: 此文件不支援預覽
-        not_support_thumbnail: 此圖片不支持生成縮略圖
     group_editing_modal:
       titles:
         create: 新增附件分組