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>