refactor: data fetching of dashboard widgets (#5280)

#### What type of PR is this?

/area console
/kind improvement
/milestone 2.12.x

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

重构 Console 仪表盘中小部件的数据获取方式。

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

```release-note
None
```

console/console-src/composables/use-dashboard-stats.ts

@@ -0,0 +1,13 @@
+import { apiClient } from "@/utils/api-client";
+import { useQuery } from "@tanstack/vue-query";
+
+export function useDashboardStats() {
+  const { data } = useQuery({
+    queryKey: ["dashboard-stats"],
+    queryFn: async () => {
+      const { data } = await apiClient.stats.getStats();
+      return data;
+    },
+  });
+  return { data };
+}

console/console-src/modules/contents/comments/widgets/CommentStatsWidget.vue

@@ -1,9 +1,8 @@
 <script lang="ts" setup>
-import type { DashboardStats } from "@halo-dev/api-client";
+import { useDashboardStats } from "@console/composables/use-dashboard-stats";
 import { VCard, IconMessage } from "@halo-dev/components";
-import { inject, type Ref } from "vue";
 
-const dashboardStats = inject<Ref<DashboardStats>>("dashboardStats");
+const { data: stats } = useDashboardStats();
 </script>
 <template>
   <VCard class="h-full" :body-class="['h-full']">
@@ -20,7 +19,7 @@ const dashboardStats = inject<Ref<DashboardStats>>("dashboardStats");
             {{ $t("core.dashboard.widgets.presets.comment_stats.title") }}
           </span>
           <p class="text-2xl font-medium text-gray-900">
-            {{ dashboardStats?.approvedComments }}
+            {{ stats?.approvedComments }}
           </p>
         </div>
       </div>

console/console-src/modules/contents/pages/widgets/SinglePageStatsWidget.vue

@@ -1,24 +1,23 @@
 <script lang="ts" setup>
 import { VCard, IconPages } from "@halo-dev/components";
-import { onMounted, ref } from "vue";
 import { apiClient } from "@/utils/api-client";
 import { singlePageLabels } from "@/constants/labels";
+import { useQuery } from "@tanstack/vue-query";
 
-const singlePageTotal = ref<number>(0);
-
-const handleFetchSinglePages = async () => {
-  const { data } = await apiClient.singlePage.listSinglePages({
-    labelSelector: [
-      `${singlePageLabels.DELETED}=false`,
-      `${singlePageLabels.PUBLISHED}=true`,
-    ],
-    page: 0,
-    size: 0,
-  });
-  singlePageTotal.value = data.total;
-};
-
-onMounted(handleFetchSinglePages);
+const { data: total } = useQuery({
+  queryKey: ["widget-singlePage-count"],
+  queryFn: async () => {
+    const { data } = await apiClient.singlePage.listSinglePages({
+      labelSelector: [
+        `${singlePageLabels.DELETED}=false`,
+        `${singlePageLabels.PUBLISHED}=true`,
+      ],
+      page: 0,
+      size: 0,
+    });
+    return data.total;
+  },
+});
 </script>
 <template>
   <VCard class="h-full" :body-class="['h-full']">
@@ -35,7 +34,7 @@ onMounted(handleFetchSinglePages);
             {{ $t("core.dashboard.widgets.presets.page_stats.title") }}
           </span>
           <p class="text-2xl font-medium text-gray-900">
-            {{ singlePageTotal || 0 }}
+            {{ total || 0 }}
           </p>
         </div>
       </div>

console/console-src/modules/contents/posts/widgets/PostStatsWidget.vue

@@ -1,9 +1,8 @@
 <script lang="ts" setup>
 import { VCard, IconBookRead } from "@halo-dev/components";
-import { inject, type Ref } from "vue";
-import type { DashboardStats } from "@halo-dev/api-client";
+import { useDashboardStats } from "@console/composables/use-dashboard-stats";
 
-const dashboardStats = inject<Ref<DashboardStats>>("dashboardStats");
+const { data: stats } = useDashboardStats();
 </script>
 <template>
   <VCard class="h-full" :body-class="['h-full']">
@@ -20,7 +19,7 @@ const dashboardStats = inject<Ref<DashboardStats>>("dashboardStats");
             {{ $t("core.dashboard.widgets.presets.post_stats.title") }}
           </span>
           <p class="text-2xl font-medium text-gray-900">
-            {{ dashboardStats?.posts || 0 }}
+            {{ stats?.posts || 0 }}
           </p>
         </div>
       </div>

console/console-src/modules/dashboard/Dashboard.vue

@@ -60,11 +60,12 @@
   </div>
 
   <VModal
-    v-model:visible="widgetsModal"
+    v-if="widgetsModal"
     height="calc(100vh - 20px)"
     :width="1280"
     :layer-closable="true"
     :title="$t('core.dashboard.widgets.modal_title')"
+    @close="widgetsModal = false"
   >
     <VTabbar
       v-model:active-id="activeId"
@@ -121,11 +122,9 @@ import {
   VSpace,
   VTabbar,
 } from "@halo-dev/components";
-import { onMounted, provide, ref, type Ref } from "vue";
+import { ref } from "vue";
 import { useStorage } from "@vueuse/core";
 import { cloneDeep } from "lodash-es";
-import { apiClient } from "@/utils/api-client";
-import type { DashboardStats } from "@halo-dev/api-client";
 import { useI18n } from "vue-i18n";
 import { usePermission } from "@/utils/permission";
 
@@ -271,25 +270,6 @@ function handleRemove(item: any) {
     };
   });
 }
-
-// Dashboard basic stats
-
-const dashboardStats = ref<DashboardStats>({
-  posts: 0,
-  comments: 0,
-  approvedComments: 0,
-  users: 0,
-  visits: 0,
-});
-
-provide<Ref<DashboardStats>>("dashboardStats", dashboardStats);
-
-const handleFetchStats = async () => {
-  const { data } = await apiClient.stats.getStats();
-  dashboardStats.value = data;
-};
-
-onMounted(handleFetchStats);
 </script>
 
 <style>

console/console-src/modules/dashboard/widgets/ViewsStatsWidget.vue

@@ -1,9 +1,8 @@
 <script lang="ts" setup>
-import type { DashboardStats } from "@halo-dev/api-client";
+import { useDashboardStats } from "@console/composables/use-dashboard-stats";
 import { VCard, IconEye } from "@halo-dev/components";
-import { inject, type Ref } from "vue";
 
-const dashboardStats = inject<Ref<DashboardStats>>("dashboardStats");
+const { data: stats } = useDashboardStats();
 </script>
 <template>
   <VCard class="h-full" :body-class="['h-full']">
@@ -20,7 +19,7 @@ const dashboardStats = inject<Ref<DashboardStats>>("dashboardStats");
             {{ $t("core.dashboard.widgets.presets.views_stats.title") }}
           </span>
           <p class="text-2xl font-medium text-gray-900">
-            {{ dashboardStats?.visits || 0 }}
+            {{ stats?.visits || 0 }}
           </p>
         </div>
       </div>

console/console-src/modules/system/users/widgets/UserStatsWidget.vue

@@ -1,9 +1,8 @@
 <script lang="ts" setup>
 import { VCard, IconUserSettings } from "@halo-dev/components";
-import { inject, type Ref } from "vue";
-import type { DashboardStats } from "@halo-dev/api-client";
+import { useDashboardStats } from "@console/composables/use-dashboard-stats";
 
-const dashboardStats = inject<Ref<DashboardStats>>("dashboardStats");
+const { data: stats } = useDashboardStats();
 </script>
 <template>
   <VCard class="h-full" :body-class="['h-full']">
@@ -20,7 +19,7 @@ const dashboardStats = inject<Ref<DashboardStats>>("dashboardStats");
             {{ $t("core.dashboard.widgets.presets.user_stats.title") }}
           </span>
           <p class="text-2xl font-medium text-gray-900">
-            {{ dashboardStats?.users }}
+            {{ stats?.users }}
           </p>
         </div>
       </div>