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

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' } }"

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"

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:

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:

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:

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: