feat: 完成整体内容开发

2026-05-22 16:27:35 +08:00
parent 5e05bf4f63
commit d3cb786edb
72 changed files with 2410 additions and 29 deletions
@@ -0,0 +1,120 @@
+<!-- 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>