From 8dfae708ff76800ed5d78cc17f4f501d1d8bda8b Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Tue, 10 Jun 2025 00:24:35 +0800
Subject: [PATCH] feat: add empty state for some widgets (#7522)

#### What type of PR is this?

/area ui
/kind improvement
/milestone 2.21.x

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

Add empty state for some dashboard widgets

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

```release-note
None
```
---
 .../comments/PendingCommentsWidget.vue        | 20 ++++++++++++++++--
 .../presets/posts/RecentPublishedWidget.vue   | 21 +++++++++++++++++--
 ui/src/locales/_missing_translations_es.yaml  |  4 ++++
 ui/src/locales/en.yaml                        |  4 ++++
 ui/src/locales/zh-CN.yaml                     |  4 ++++
 ui/src/locales/zh-TW.yaml                     |  4 ++++
 6 files changed, 53 insertions(+), 4 deletions(-)

diff --git a/ui/console-src/modules/dashboard/widgets/presets/comments/PendingCommentsWidget.vue b/ui/console-src/modules/dashboard/widgets/presets/comments/PendingCommentsWidget.vue
index 7f48413b8..0a1a0983b 100644
--- a/ui/console-src/modules/dashboard/widgets/presets/comments/PendingCommentsWidget.vue
+++ b/ui/console-src/modules/dashboard/widgets/presets/comments/PendingCommentsWidget.vue
@@ -2,12 +2,17 @@
 import WidgetCard from "@console/modules/dashboard/components/WidgetCard.vue";
 import type { ListedComment } from "@halo-dev/api-client";
 import { consoleApiClient } from "@halo-dev/api-client";
-import { VEntityContainer } from "@halo-dev/components";
+import {
+  VButton,
+  VEmpty,
+  VEntityContainer,
+  VLoading,
+} from "@halo-dev/components";
 import { useQuery } from "@tanstack/vue-query";
 import { OverlayScrollbarsComponent } from "overlayscrollbars-vue";
 import CommentItem from "./CommentItem.vue";
 
-const { data } = useQuery<ListedComment[]>({
+const { data, isLoading, isFetching, refetch } = useQuery<ListedComment[]>({
   queryKey: ["widget-pending-comments"],
   queryFn: async () => {
     const { data } = await consoleApiClient.content.comment.listComments({
@@ -29,6 +34,17 @@ const { data } = useQuery<ListedComment[]>({
       )
     "
   >
+    <VLoading v-if="isLoading" />
+    <VEmpty
+      v-else-if="!data?.length"
+      :title="$t('core.dashboard.widgets.presets.pending_comments.empty.title')"
+    >
+      <template #actions>
+        <VButton :loading="isFetching" @click="refetch">
+          {{ $t("core.common.buttons.refresh") }}
+        </VButton>
+      </template>
+    </VEmpty>
     <OverlayScrollbarsComponent
       element="div"
       :options="{ scrollbars: { autoHide: 'scroll' } }"
diff --git a/ui/console-src/modules/dashboard/widgets/presets/posts/RecentPublishedWidget.vue b/ui/console-src/modules/dashboard/widgets/presets/posts/RecentPublishedWidget.vue
index 50599764b..47b47a93a 100644
--- a/ui/console-src/modules/dashboard/widgets/presets/posts/RecentPublishedWidget.vue
+++ b/ui/console-src/modules/dashboard/widgets/presets/posts/RecentPublishedWidget.vue
@@ -3,12 +3,17 @@ import { postLabels } from "@/constants/labels";
 import WidgetCard from "@console/modules/dashboard/components/WidgetCard.vue";
 import type { ListedPost } from "@halo-dev/api-client";
 import { consoleApiClient } from "@halo-dev/api-client";
-import { VEntityContainer } from "@halo-dev/components";
+import {
+  VButton,
+  VEmpty,
+  VEntityContainer,
+  VLoading,
+} from "@halo-dev/components";
 import { useQuery } from "@tanstack/vue-query";
 import { OverlayScrollbarsComponent } from "overlayscrollbars-vue";
 import PostListItem from "./components/PostListItem.vue";
 
-const { data } = useQuery<ListedPost[]>({
+const { data, isLoading, isFetching, refetch } = useQuery<ListedPost[]>({
   queryKey: ["widget-recent-posts"],
   queryFn: async () => {
     const { data } = await consoleApiClient.content.post.listPosts({
@@ -25,7 +30,19 @@ const { data } = useQuery<ListedPost[]>({
     :body-class="['!overflow-auto']"
     :title="$t('core.dashboard.widgets.presets.recent_published.title')"
   >
+    <VLoading v-if="isLoading" />
+    <VEmpty
+      v-else-if="!data?.length"
+      :title="$t('core.dashboard.widgets.presets.recent_published.empty.title')"
+    >
+      <template #actions>
+        <VButton :loading="isFetching" @click="refetch">
+          {{ $t("core.common.buttons.refresh") }}
+        </VButton>
+      </template>
+    </VEmpty>
     <OverlayScrollbarsComponent
+      v-else
       element="div"
       :options="{ scrollbars: { autoHide: 'scroll' } }"
       class="h-full w-full"
diff --git a/ui/src/locales/_missing_translations_es.yaml b/ui/src/locales/_missing_translations_es.yaml
index 94f7a3b65..573085b30 100644
--- a/ui/src/locales/_missing_translations_es.yaml
+++ b/ui/src/locales/_missing_translations_es.yaml
@@ -31,6 +31,8 @@ core:
       presets:
         recent_published:
           publishTime: Publish Time {publishTime}
+          empty:
+            title: No published posts
         notification:
           title: Notifications
           empty:
@@ -42,6 +44,8 @@ core:
                 label: Enabled Items
         pending_comments:
           title: Pending Comments
+          empty:
+            title: No pending comments
         stack:
           title: Widget Stack
           operations:
diff --git a/ui/src/locales/en.yaml b/ui/src/locales/en.yaml
index b2669ce2a..e10e229ec 100644
--- a/ui/src/locales/en.yaml
+++ b/ui/src/locales/en.yaml
@@ -70,6 +70,8 @@ core:
           title: Recent Posts
           visits: "{visits} Visits"
           comments: "{comments} Comments"
+          empty:
+            title: No published posts
         notification:
           title: Notifications
           empty:
@@ -110,6 +112,8 @@ core:
           title: Comments
         pending_comments:
           title: Pending Comments
+          empty:
+            title: No pending comments
         views_stats:
           title: Visits
         stack:
diff --git a/ui/src/locales/zh-CN.yaml b/ui/src/locales/zh-CN.yaml
index e69a6bba6..848c216a0 100644
--- a/ui/src/locales/zh-CN.yaml
+++ b/ui/src/locales/zh-CN.yaml
@@ -64,6 +64,8 @@ core:
           title: 最近文章
           visits: 访问量 {visits}
           comments: 评论 {comments}
+          empty:
+            title: 暂无已发布文章
         notification:
           title: 通知
           empty:
@@ -104,6 +106,8 @@ core:
           title: 浏览量
         pending_comments:
           title: 新评论
+          empty:
+            title: 暂无待审核评论
         stack:
           title: 堆叠部件
           operations:
diff --git a/ui/src/locales/zh-TW.yaml b/ui/src/locales/zh-TW.yaml
index 456fea0e7..868f94e92 100644
--- a/ui/src/locales/zh-TW.yaml
+++ b/ui/src/locales/zh-TW.yaml
@@ -64,6 +64,8 @@ core:
           title: 最近文章
           visits: 訪問量 {visits}
           comments: 留言 {comments}
+          empty:
+            title: 沒有已發布文章
         notification:
           title: 通知
           empty:
@@ -104,6 +106,8 @@ core:
           title: 瀏覽量
         pending_comments:
           title: 新評論
+          empty:
+            title: 沒有待審核評論
         stack:
           title: 堆疊部件
           operations: