perf: improve dashboard page ui

pull/605/head
Ryan Wang 2022-09-05 17:10:38 +08:00
parent 95f6b8b77a
commit 3f53680e7b
3 changed files with 24 additions and 3 deletions

View File

@ -54,7 +54,12 @@
</grid-layout> </grid-layout>
</div> </div>
<VModal v-model:visible="widgetsModal" :width="1280" title="小组件"> <VModal
v-model:visible="widgetsModal"
height="calc(100vh - 20px)"
:width="1280"
title="小组件"
>
<VTabbar <VTabbar
v-model:active-id="activeId" v-model:active-id="activeId"
:items=" :items="

View File

@ -1,9 +1,21 @@
<script lang="ts" name="PostStatsWidget" setup> <script lang="ts" name="PostStatsWidget" setup>
import { VCard } from "@halo-dev/components"; 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> </script>
<template> <template>
<VCard class="h-full"> <VCard class="h-full">
<dt class="truncate text-sm font-medium text-gray-500">文章</dt> <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> </VCard>
</template> </template>

View File

@ -1,9 +1,13 @@
<script lang="ts" name="UserStatsWidget" setup> <script lang="ts" name="UserStatsWidget" setup>
import { VCard } from "@halo-dev/components"; import { VCard } from "@halo-dev/components";
import { useUserFetch } from "@/modules/system/users/composables/use-user";
const { users } = useUserFetch();
</script> </script>
<template> <template>
<VCard class="h-full"> <VCard class="h-full">
<dt class="truncate text-sm font-medium text-gray-500">用户</dt> <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> </VCard>
</template> </template>