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.

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>

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>

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>

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>

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>

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}`;

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>