58 lines
1.7 KiB
Vue
58 lines
1.7 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 { useAnswerStore } from "@/stores/answer";
|
|
|
|
const answerStore = useAnswerStore();
|
|
const { dashboardErrorMessage, recordsLoading, cacheClearing } =
|
|
storeToRefs(answerStore);
|
|
</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="recordsLoading"
|
|
@click="answerStore.loadDashboard"
|
|
>
|
|
<RefreshCw
|
|
class="size-4"
|
|
:class="{ 'animate-spin': recordsLoading }"
|
|
/>
|
|
<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>
|
|
</section>
|
|
</template> |