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,63 @@
+<!-- app/components/dashboard/QaRecordDetail.vue - 最近问答记录详情弹窗 -->
+<script lang="ts" setup>
+import { storeToRefs } from "pinia";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from "@/components/ui/dialog";
+import { useAnswerStore } from "@/stores/answer";
+
+const answerStore = useAnswerStore();
+const { selectedRecord } = storeToRefs(answerStore);
+
+/** 关闭详情弹窗，只清理 store 中的选中记录 */
+const close = () => {
+  answerStore.selectRecord(undefined);
+};
+
+/** Dialog 关闭时同步清理选中的问答记录 */
+const dialogOpen = computed({
+  get: () => Boolean(selectedRecord.value),
+  set: (open: boolean) => {
+    if (!open) close();
+  }
+});
+</script>
+
+<template>
+  <Dialog v-model:open="dialogOpen">
+    <DialogContent class="max-h-[86vh] overflow-hidden sm:max-w-3xl">
+      <DialogHeader>
+        <DialogTitle>问答详情</DialogTitle>
+        <DialogDescription>{{ selectedRecord?.time }}</DialogDescription>
+      </DialogHeader>
+
+      <div v-if="selectedRecord" class="grid max-h-[70vh] gap-4 overflow-auto pr-1">
+        <div class="grid gap-2">
+          <span class="text-xs font-medium text-muted-foreground">题目</span>
+          <pre
+            class="whitespace-pre-wrap rounded-2xl bg-muted p-3 text-sm leading-6 text-foreground"
+          >{{ selectedRecord.question }}</pre>
+        </div>
+
+        <div class="grid gap-2">
+          <span class="text-xs font-medium text-muted-foreground">选项</span>
+          <pre
+            class="whitespace-pre-wrap rounded-2xl bg-muted p-3 text-sm leading-6 text-foreground"
+          >{{ selectedRecord.options || "-" }}</pre>
+        </div>
+
+        <div class="grid gap-2">
+          <span class="text-xs font-medium text-muted-foreground">答案</span>
+          <pre
+            class="whitespace-pre-wrap rounded-2xl bg-muted p-3 text-base font-semibold leading-7 text-foreground"
+          >{{ selectedRecord.answer }}</pre>
+        </div>
+      </div>
+    </DialogContent>
+  </Dialog>
+</template>
@@ -0,0 +1,150 @@
+<!-- app/components/dashboard/QaRecordsTable.vue - 最近问答记录表格，基于已准备好的 TableCom -->
+<script lang="ts" setup>
+import { Eye } from "lucide-vue-next";
+import { storeToRefs } from "pinia";
+
+import TableCom from "@/components/Table/TableCom.vue";
+import type { TableColumn } from "@/components/Table/type";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from "@/components/ui/card";
+import type { IQaRecord } from "@/interfaces";
+import { QUESTION_TYPE_LABELS, useAnswerStore } from "@/stores/answer";
+
+const answerStore = useAnswerStore();
+const {
+  pagedRecords,
+  recordCount,
+  recordsLoading,
+  recordsPage,
+  recordsPageSize
+} = storeToRefs(answerStore);
+
+/** TableCom 列配置集中在组件顶部，便于和其他项目的表格风格保持一致 */
+const columns = computed<TableColumn[]>(() => [
+  {
+    label: "时间",
+    slot: "time",
+    width: 170
+  },
+  {
+    label: "题型",
+    slot: "type",
+    width: 100,
+    cellAlign: "center",
+    headerAlign: "center"
+  },
+  {
+    label: "题目",
+    slot: "question",
+    minWidth: 280
+  },
+  {
+    label: "选项",
+    slot: "options",
+    minWidth: 220
+  },
+  {
+    label: "答案",
+    slot: "answer",
+    minWidth: 160
+  },
+  {
+    label: "操作",
+    slot: "action",
+    width: 90,
+    cellAlign: "center",
+    headerAlign: "center"
+  }
+]);
+
+/** 题型英文值兜底展示原值，避免未来 OCS 扩展题型时表格为空 */
+const getQuestionTypeLabel = (type: string) => {
+  return QUESTION_TYPE_LABELS[type] || type || "自动判断";
+};
+
+/** 空选项统一展示占位，不在表格中撑开大段空白 */
+const displayOptions = (record: IQaRecord) => {
+  return record.options || "-";
+};
+</script>
+
+<template>
+  <Card>
+    <CardHeader>
+      <CardTitle>最近问答记录</CardTitle>
+      <CardDescription>当前进程最多保留最近 100 条。</CardDescription>
+    </CardHeader>
+
+    <CardContent>
+      <TableCom
+        :data="pagedRecords"
+        :columns="columns"
+        :load="recordsLoading"
+        :buffer="true"
+        :pagination="{
+          currentPage: recordsPage,
+          total: recordCount,
+          pageSize: recordsPageSize,
+          align: 'end'
+        }"
+        cell-align="left"
+        header-align="start"
+        cell-class-name="align-top"
+        @page:change="answerStore.setRecordsPage"
+      >
+        <template #time="{ value }">
+          <span class="whitespace-nowrap text-foreground">{{ value }}</span>
+        </template>
+
+        <template #type="{ value }">
+          <Badge variant="secondary" class="text-center">
+            {{ getQuestionTypeLabel(value) }}
+          </Badge>
+        </template>
+
+        <template #question="{ value }">
+          <div class="max-w-136 truncate text-foreground" :title="value">
+            {{ value }}
+          </div>
+        </template>
+
+        <template #options="{ row }">
+          <div
+            class="max-w-md truncate text-muted-foreground"
+            :title="displayOptions(row)"
+          >
+            {{ displayOptions(row) }}
+          </div>
+        </template>
+
+        <template #answer="{ value }">
+          <div
+            class="max-w-[20rem] truncate font-medium text-foreground"
+            :title="value"
+          >
+            {{ value }}
+          </div>
+        </template>
+
+        <template #action="{ row }">
+          <Button
+            type="button"
+            variant="outline"
+            size="icon-sm"
+            title="查看详情"
+            @click.stop="answerStore.selectRecord(row)"
+          >
+            <Eye class="size-4" />
+          </Button>
+        </template>
+      </TableCom>
+    </CardContent>
+  </Card>
+</template>
@@ -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>