From 65d4751509ee88c05164de5607c285b3a70fe8e6 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Mon, 9 Jun 2025 23:34:34 +0800
Subject: [PATCH] feat: add cover for post list (#7519)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/kind feature
/area ui
/milestone 2.21.x

#### What this PR does / why we need it:

<img width="508" alt="image" src="https://github.com/user-attachments/assets/3d7a9ac0-1e0a-4a4f-a658-03af7ff89904" />

#### Which issue(s) this PR fixes:

Fixes #7437

#### Special notes for your reviewer:

#### Does this PR introduce a user-facing change?

```release-note
文章管理列表支持显示封面图
```
---
 .../pages/components/SinglePageListItem.vue   | 11 ++++++++
 .../posts/components/PostListItem.vue         | 10 ++++++++
 .../components/entity-fields/CoverField.vue   | 25 +++++++++++++++++++
 ui/src/utils/thumbnail.ts                     |  5 ++++
 4 files changed, 51 insertions(+)
 create mode 100644 ui/console-src/modules/contents/posts/components/entity-fields/CoverField.vue
 create mode 100644 ui/src/utils/thumbnail.ts

diff --git a/ui/console-src/modules/contents/pages/components/SinglePageListItem.vue b/ui/console-src/modules/contents/pages/components/SinglePageListItem.vue
index 9390ea20f..0ef9daa7e 100644
--- a/ui/console-src/modules/contents/pages/components/SinglePageListItem.vue
+++ b/ui/console-src/modules/contents/pages/components/SinglePageListItem.vue
@@ -3,6 +3,7 @@ import PostContributorList from "@/components/user/PostContributorList.vue";
 import { singlePageLabels } from "@/constants/labels";
 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 { coreApiClient } from "@halo-dev/api-client";
 import {
@@ -131,6 +132,16 @@ const handleDelete = async () => {
       />
     </template>
     <template #start>
+      <VEntityField v-if="singlePage.page.spec.cover">
+        <template #description>
+          <div class="aspect-h-2 rounded-md overflow-hidden aspect-w-3 w-20">
+            <img
+              class="object-cover w-full h-full"
+              :src="generateThumbnailUrl(singlePage.page.spec.cover, 's')"
+            />
+          </div>
+        </template>
+      </VEntityField>
       <VEntityField
         :title="singlePage.page.spec.title"
         :route="{
diff --git a/ui/console-src/modules/contents/posts/components/PostListItem.vue b/ui/console-src/modules/contents/posts/components/PostListItem.vue
index 234b0a0f7..7c1fbf694 100644
--- a/ui/console-src/modules/contents/posts/components/PostListItem.vue
+++ b/ui/console-src/modules/contents/posts/components/PostListItem.vue
@@ -22,6 +22,7 @@ import { computed, inject, markRaw, ref, toRefs } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
 import ContributorsField from "./entity-fields/ContributorsField.vue";
+import CoverField from "./entity-fields/CoverField.vue";
 import PublishStatusField from "./entity-fields/PublishStatusField.vue";
 import PublishTimeField from "./entity-fields/PublishTimeField.vue";
 import TitleField from "./entity-fields/TitleField.vue";
@@ -160,6 +161,15 @@ const { startFields, endFields } = useEntityFieldItemExtensionPoint<ListedPost>(
     {
       priority: 10,
       position: "start",
+      component: markRaw(CoverField),
+      hidden: !props.post.post.spec.cover,
+      props: {
+        post: props.post,
+      },
+    },
+    {
+      priority: 20,
+      position: "start",
       component: markRaw(TitleField),
       props: {
         post: props.post,
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
new file mode 100644
index 000000000..9f6e4882c
--- /dev/null
+++ b/ui/console-src/modules/contents/posts/components/entity-fields/CoverField.vue
@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import { generateThumbnailUrl } from "@/utils/thumbnail";
+import type { ListedPost } from "@halo-dev/api-client";
+import { VEntityField } from "@halo-dev/components";
+
+withDefaults(
+  defineProps<{
+    post: ListedPost;
+  }>(),
+  {}
+);
+</script>
+
+<template>
+  <VEntityField v-if="post.post.spec.cover">
+    <template #description>
+      <div class="aspect-h-2 rounded-md overflow-hidden aspect-w-3 w-20">
+        <img
+          class="object-cover w-full h-full"
+          :src="generateThumbnailUrl(post.post.spec.cover, 's')"
+        />
+      </div>
+    </template>
+  </VEntityField>
+</template>
diff --git a/ui/src/utils/thumbnail.ts b/ui/src/utils/thumbnail.ts
new file mode 100644
index 000000000..faa9aeace
--- /dev/null
+++ b/ui/src/utils/thumbnail.ts
@@ -0,0 +1,5 @@
+export function generateThumbnailUrl(url: string, size: string) {
+  return `/apis/api.storage.halo.run/v1alpha1/thumbnails/-/via-uri?uri=${encodeURI(
+    url
+  )}&size=${size}`;
+}