From d2b4a65b1682fe1580028b8306e2efb1d66cbceb Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Mon, 5 Sep 2022 17:10:38 +0800
Subject: [PATCH] perf: improve dashboard page ui

---
 src/modules/dashboard/Dashboard.vue               |  7 ++++++-
 src/modules/dashboard/widgets/PostStatsWidget.vue | 14 +++++++++++++-
 src/modules/dashboard/widgets/UserStatsWidget.vue |  6 +++++-
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/modules/dashboard/Dashboard.vue b/src/modules/dashboard/Dashboard.vue
index 8520b0d90..a9daa0e6c 100644
--- a/src/modules/dashboard/Dashboard.vue
+++ b/src/modules/dashboard/Dashboard.vue
@@ -54,7 +54,12 @@
     </grid-layout>
   </div>
 
-  <VModal v-model:visible="widgetsModal" :width="1280" title="小组件">
+  <VModal
+    v-model:visible="widgetsModal"
+    height="calc(100vh - 20px)"
+    :width="1280"
+    title="小组件"
+  >
     <VTabbar
       v-model:active-id="activeId"
       :items="
diff --git a/src/modules/dashboard/widgets/PostStatsWidget.vue b/src/modules/dashboard/widgets/PostStatsWidget.vue
index 6b0dc4bbe..5d1a4ae07 100644
--- a/src/modules/dashboard/widgets/PostStatsWidget.vue
+++ b/src/modules/dashboard/widgets/PostStatsWidget.vue
@@ -1,9 +1,21 @@
 <script lang="ts" name="PostStatsWidget" setup>
 import { VCard } from "@halo-dev/components";
+import { onMounted, ref } from "vue";
+import { apiClient } from "@halo-dev/admin-shared";
+
+const postTotal = ref<number>(0);
+
+const handleFetchPosts = async () => {
+  const { data } =
+    await apiClient.extension.post.listcontentHaloRunV1alpha1Post();
+  postTotal.value = data.total;
+};
+
+onMounted(handleFetchPosts);
 </script>
 <template>
   <VCard class="h-full">
     <dt class="truncate text-sm font-medium text-gray-500">文章</dt>
-    <dd class="mt-1 text-3xl font-semibold text-gray-900">123</dd>
+    <dd class="mt-1 text-3xl font-semibold text-gray-900">{{ postTotal }}</dd>
   </VCard>
 </template>
diff --git a/src/modules/dashboard/widgets/UserStatsWidget.vue b/src/modules/dashboard/widgets/UserStatsWidget.vue
index e283cd764..085c97d96 100644
--- a/src/modules/dashboard/widgets/UserStatsWidget.vue
+++ b/src/modules/dashboard/widgets/UserStatsWidget.vue
@@ -1,9 +1,13 @@
 <script lang="ts" name="UserStatsWidget" setup>
 import { VCard } from "@halo-dev/components";
+import { useUserFetch } from "@/modules/system/users/composables/use-user";
+const { users } = useUserFetch();
 </script>
 <template>
   <VCard class="h-full">
     <dt class="truncate text-sm font-medium text-gray-500">用户</dt>
-    <dd class="mt-1 text-3xl font-semibold text-gray-900">5</dd>
+    <dd class="mt-1 text-3xl font-semibold text-gray-900">
+      {{ users.length }}
+    </dd>
   </VCard>
 </template>