From c4bd70f83214f77f3f5baa620a8570a60e09fbe3 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Tue, 30 Sep 2025 11:39:21 +0800
Subject: [PATCH] Refactor thumbnail size handling to use enum

Replaced string literals for thumbnail sizes with GetThumbnailByUriSizeEnum throughout the codebase for improved type safety and consistency. Updated generateThumbnailUrl to accept the enum and added a width map for local URLs. Improved attachment thumbnail display and link formatting.
---
 .../AttachmentSingleThumbnailItem.vue         |  3 +--
 .../contents/pages/DeletedSinglePageList.vue  | 11 ++++++++--
 .../components/entity-fields/CoverField.vue   | 12 +++++++++--
 .../contents/posts/DeletedPostList.vue        | 13 ++++++++++--
 .../components/entity-fields/CoverField.vue   | 12 +++++++++--
 ui/src/utils/thumbnail.ts                     | 20 ++++++++++++++++++-
 .../posts/components/PostListItem.vue         |  9 +++++++--
 7 files changed, 67 insertions(+), 13 deletions(-)

diff --git a/ui/console-src/modules/contents/attachments/components/AttachmentSingleThumbnailItem.vue b/ui/console-src/modules/contents/attachments/components/AttachmentSingleThumbnailItem.vue
index e8e3ef669..1056b635f 100644
--- a/ui/console-src/modules/contents/attachments/components/AttachmentSingleThumbnailItem.vue
+++ b/ui/console-src/modules/contents/attachments/components/AttachmentSingleThumbnailItem.vue
@@ -17,7 +17,6 @@ const { size, permalink } = withDefaults(
       <a :href="permalink" target="_blank" class="block flex-none">
         <img
           :src="permalink"
-          alt=""
           class="h-10 w-10 rounded-md object-cover"
           loading="lazy"
         />
@@ -29,7 +28,7 @@ const { size, permalink } = withDefaults(
         <a
           :href="permalink"
           target="_blank"
-          class="line-clamp-1 hover:text-gray-600"
+          class="line-clamp-3 break-all hover:text-gray-600"
         >
           {{ permalink }}
         </a>
diff --git a/ui/console-src/modules/contents/pages/DeletedSinglePageList.vue b/ui/console-src/modules/contents/pages/DeletedSinglePageList.vue
index cb2ce45b5..5e828c365 100644
--- a/ui/console-src/modules/contents/pages/DeletedSinglePageList.vue
+++ b/ui/console-src/modules/contents/pages/DeletedSinglePageList.vue
@@ -4,7 +4,11 @@ import { formatDatetime, relativeTimeTo } from "@/utils/date";
 import { usePermission } from "@/utils/permission";
 import { generateThumbnailUrl } from "@/utils/thumbnail";
 import type { ListedSinglePage, SinglePage } from "@halo-dev/api-client";
-import { consoleApiClient, coreApiClient } from "@halo-dev/api-client";
+import {
+  consoleApiClient,
+  coreApiClient,
+  GetThumbnailByUriSizeEnum,
+} from "@halo-dev/api-client";
 import {
   Dialog,
   IconAddCircle,
@@ -315,7 +319,10 @@ watch(
                     <img
                       class="h-full w-full object-cover"
                       :src="
-                        generateThumbnailUrl(singlePage.page.spec.cover, 's')
+                        generateThumbnailUrl(
+                          singlePage.page.spec.cover,
+                          GetThumbnailByUriSizeEnum.S
+                        )
                       "
                     />
                   </div>
diff --git a/ui/console-src/modules/contents/pages/components/entity-fields/CoverField.vue b/ui/console-src/modules/contents/pages/components/entity-fields/CoverField.vue
index 81a47065b..23fe00e3e 100644
--- a/ui/console-src/modules/contents/pages/components/entity-fields/CoverField.vue
+++ b/ui/console-src/modules/contents/pages/components/entity-fields/CoverField.vue
@@ -1,6 +1,9 @@
 <script lang="ts" setup>
 import { generateThumbnailUrl } from "@/utils/thumbnail";
-import type { ListedSinglePage } from "@halo-dev/api-client";
+import {
+  GetThumbnailByUriSizeEnum,
+  type ListedSinglePage,
+} from "@halo-dev/api-client";
 import { VEntityField } from "@halo-dev/components";
 
 withDefaults(
@@ -17,7 +20,12 @@ withDefaults(
       <div class="aspect-h-2 aspect-w-3 w-20 overflow-hidden rounded-md">
         <img
           class="h-full w-full object-cover"
-          :src="generateThumbnailUrl(singlePage.page.spec.cover, 's')"
+          :src="
+            generateThumbnailUrl(
+              singlePage.page.spec.cover,
+              GetThumbnailByUriSizeEnum.S
+            )
+          "
         />
       </div>
     </template>
diff --git a/ui/console-src/modules/contents/posts/DeletedPostList.vue b/ui/console-src/modules/contents/posts/DeletedPostList.vue
index c086b82fb..03c22eb7d 100644
--- a/ui/console-src/modules/contents/posts/DeletedPostList.vue
+++ b/ui/console-src/modules/contents/posts/DeletedPostList.vue
@@ -4,7 +4,11 @@ import { formatDatetime, relativeTimeTo } from "@/utils/date";
 import { usePermission } from "@/utils/permission";
 import { generateThumbnailUrl } from "@/utils/thumbnail";
 import type { ListedPost, Post } from "@halo-dev/api-client";
-import { consoleApiClient, coreApiClient } from "@halo-dev/api-client";
+import {
+  consoleApiClient,
+  coreApiClient,
+  GetThumbnailByUriSizeEnum,
+} from "@halo-dev/api-client";
 import {
   Dialog,
   IconAddCircle,
@@ -325,7 +329,12 @@ watch(
                   >
                     <img
                       class="h-full w-full object-cover"
-                      :src="generateThumbnailUrl(post.post.spec.cover, 's')"
+                      :src="
+                        generateThumbnailUrl(
+                          post.post.spec.cover,
+                          GetThumbnailByUriSizeEnum.S
+                        )
+                      "
                     />
                   </div>
                 </template>
diff --git a/ui/console-src/modules/contents/posts/components/entity-fields/CoverField.vue b/ui/console-src/modules/contents/posts/components/entity-fields/CoverField.vue
index 42c26f2d4..24b029d8c 100644
--- a/ui/console-src/modules/contents/posts/components/entity-fields/CoverField.vue
+++ b/ui/console-src/modules/contents/posts/components/entity-fields/CoverField.vue
@@ -1,6 +1,9 @@
 <script lang="ts" setup>
 import { generateThumbnailUrl } from "@/utils/thumbnail";
-import type { ListedPost } from "@halo-dev/api-client";
+import {
+  GetThumbnailByUriSizeEnum,
+  type ListedPost,
+} from "@halo-dev/api-client";
 import { VEntityField } from "@halo-dev/components";
 
 withDefaults(
@@ -17,7 +20,12 @@ withDefaults(
       <div class="aspect-h-2 aspect-w-3 w-20 overflow-hidden rounded-md">
         <img
           class="h-full w-full object-cover"
-          :src="generateThumbnailUrl(post.post.spec.cover, 's')"
+          :src="
+            generateThumbnailUrl(
+              post.post.spec.cover,
+              GetThumbnailByUriSizeEnum.S
+            )
+          "
         />
       </div>
     </template>
diff --git a/ui/src/utils/thumbnail.ts b/ui/src/utils/thumbnail.ts
index 880f70bd8..bcbc17ef0 100644
--- a/ui/src/utils/thumbnail.ts
+++ b/ui/src/utils/thumbnail.ts
@@ -1,4 +1,22 @@
-export function generateThumbnailUrl(url: string, size: string) {
+import type { GetThumbnailByUriSizeEnum } from "@halo-dev/api-client";
+
+const THUMBNAIL_WIDTH_MAP: Record<GetThumbnailByUriSizeEnum, number> = {
+  XL: 1600,
+  L: 1200,
+  M: 800,
+  S: 400,
+};
+
+export function generateThumbnailUrl(
+  url: string,
+  size: GetThumbnailByUriSizeEnum
+) {
+  const { origin } = location;
+
+  if (url.startsWith(origin) || url.startsWith("/")) {
+    return `${url}?width=${THUMBNAIL_WIDTH_MAP[size]}`;
+  }
+
   return `/apis/api.storage.halo.run/v1alpha1/thumbnails/-/via-uri?uri=${encodeURIComponent(
     url
   )}&size=${size}`;
diff --git a/ui/uc-src/modules/contents/posts/components/PostListItem.vue b/ui/uc-src/modules/contents/posts/components/PostListItem.vue
index d55271ead..6393014ca 100644
--- a/ui/uc-src/modules/contents/posts/components/PostListItem.vue
+++ b/ui/uc-src/modules/contents/posts/components/PostListItem.vue
@@ -7,7 +7,7 @@ import { formatDatetime, relativeTimeTo } from "@/utils/date";
 import { generateThumbnailUrl } from "@/utils/thumbnail";
 import PostTag from "@console/modules/contents/posts/tags/components/PostTag.vue";
 import type { ListedPost } from "@halo-dev/api-client";
-import { ucApiClient } from "@halo-dev/api-client";
+import { GetThumbnailByUriSizeEnum, ucApiClient } from "@halo-dev/api-client";
 import {
   Dialog,
   IconExternalLinkLine,
@@ -127,7 +127,12 @@ function handleDelete() {
           <div class="aspect-h-2 aspect-w-3 w-20 overflow-hidden rounded-md">
             <img
               class="h-full w-full object-cover"
-              :src="generateThumbnailUrl(post.post.spec.cover, 's')"
+              :src="
+                generateThumbnailUrl(
+                  post.post.spec.cover,
+                  GetThumbnailByUriSizeEnum.S
+                )
+              "
             />
           </div>
         </template>