121 lines
3.5 KiB
Vue
121 lines
3.5 KiB
Vue
<!-- app/components/dashboard/StatsOverview.vue - Dashboard 顶部状态卡片 -->
|
|
<script lang="ts" setup>
|
|
import { RefreshCw, Trash2 } from "lucide-vue-next";
|
|
import { storeToRefs } from "pinia";
|
|
|
|
import {
|
|
Alert,
|
|
AlertDescription
|
|
} from "@/components/ui/alert";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle
|
|
} from "@/components/ui/card";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
import { useAnswerStore } from "@/stores/answer";
|
|
|
|
const answerStore = useAnswerStore();
|
|
const {
|
|
health,
|
|
stats,
|
|
uptimeText,
|
|
dashboardErrorMessage,
|
|
statsLoading,
|
|
cacheClearing
|
|
} = storeToRefs(answerStore);
|
|
|
|
/** 顶部指标由 store 中的健康状态和统计信息组合而来 */
|
|
const overviewItems = computed(() => [
|
|
{
|
|
label: "服务状态",
|
|
value: health.value?.status === "ok" ? "运行中" : "-",
|
|
detail: health.value?.version ? `v${health.value.version}` : "-",
|
|
loading: statsLoading.value && !health.value
|
|
},
|
|
{
|
|
label: "模型",
|
|
value: stats.value?.model || health.value?.model || "-",
|
|
detail: stats.value?.cache_enabled ? "缓存已启用" : "缓存未启用",
|
|
loading: statsLoading.value && !stats.value
|
|
},
|
|
{
|
|
label: "缓存数量",
|
|
value: stats.value?.cache_size?.toString() ?? "0",
|
|
detail: "当前进程",
|
|
loading: statsLoading.value && !stats.value
|
|
},
|
|
{
|
|
label: "问答记录",
|
|
value: stats.value?.qa_records_count?.toString() ?? "0",
|
|
detail: uptimeText.value,
|
|
loading: statsLoading.value && !stats.value
|
|
}
|
|
]);
|
|
</script>
|
|
|
|
<template>
|
|
<section class="grid gap-4">
|
|
<div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
|
|
<div>
|
|
<h1 class="text-xl font-semibold text-foreground">Dashboard</h1>
|
|
<p class="mt-1 text-sm text-muted-foreground">
|
|
当前 Nuxt 进程的健康状态、缓存和最近问答记录。
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
:disabled="statsLoading"
|
|
@click="answerStore.loadDashboard"
|
|
>
|
|
<RefreshCw class="size-4" :class="{ 'animate-spin': statsLoading }" />
|
|
<span>刷新</span>
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
variant="destructive"
|
|
size="sm"
|
|
:disabled="cacheClearing"
|
|
@click="answerStore.clearCache"
|
|
>
|
|
<Trash2 class="size-4" />
|
|
<span>{{ cacheClearing ? "清理中" : "清空缓存" }}</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<Alert v-if="dashboardErrorMessage" variant="destructive">
|
|
<AlertDescription>{{ dashboardErrorMessage }}</AlertDescription>
|
|
</Alert>
|
|
|
|
<div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
|
|
<Card v-for="item in overviewItems" :key="item.label" size="sm">
|
|
<CardHeader>
|
|
<CardDescription>{{ item.label }}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<template v-if="item.loading">
|
|
<Skeleton class="mb-2 h-8 w-24" />
|
|
<Skeleton class="h-4 w-32" />
|
|
</template>
|
|
<template v-else>
|
|
<CardTitle class="truncate text-2xl font-semibold">
|
|
{{ item.value }}
|
|
</CardTitle>
|
|
<div class="mt-1 truncate text-xs text-muted-foreground">
|
|
{{ item.detail }}
|
|
</div>
|
|
</template>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</section>
|
|
</template>
|