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,80 @@
+<!-- app/components/home/AnswerResult.vue - 答题结果展示，只展示安全业务文案 -->
+<script lang="ts" setup>
+import { AlertCircle, CheckCircle2, Loader2 } from "lucide-vue-next";
+import { storeToRefs } from "pinia";
+
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle
+} from "@/components/ui/alert";
+import { Badge } from "@/components/ui/badge";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardHeader,
+  CardTitle
+} from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useAnswerStore } from "@/stores/answer";
+
+const answerStore = useAnswerStore();
+const { answerResult, searchErrorMessage, searchLoading } = storeToRefs(answerStore);
+</script>
+
+<template>
+  <Card>
+    <CardHeader>
+      <CardTitle>查询结果</CardTitle>
+      <CardAction>
+        <Badge variant="secondary">OCS JSON</Badge>
+      </CardAction>
+    </CardHeader>
+
+    <CardContent>
+      <div v-if="searchLoading" class="grid min-h-32 gap-3">
+        <div class="flex items-center gap-2 text-sm text-muted-foreground">
+          <Loader2 class="size-4 animate-spin" />
+          <span>正在获取答案</span>
+        </div>
+        <Skeleton class="h-5 w-2/3" />
+        <Skeleton class="h-20 w-full" />
+      </div>
+
+      <Alert v-else-if="searchErrorMessage" variant="destructive" class="min-h-32">
+        <AlertCircle class="size-4" />
+        <AlertTitle>查询失败</AlertTitle>
+        <AlertDescription>{{ searchErrorMessage }}</AlertDescription>
+      </Alert>
+
+      <div v-else-if="answerResult" class="grid gap-4">
+        <div class="flex items-center gap-2 text-sm font-medium text-foreground">
+          <CheckCircle2 class="size-4" />
+          <span>已返回答案</span>
+        </div>
+
+        <div class="grid gap-2 rounded-2xl border bg-muted/40 p-4">
+          <span class="text-xs font-medium text-muted-foreground">题目</span>
+          <p class="whitespace-pre-wrap text-sm leading-6 text-foreground">
+            {{ answerResult.question }}
+          </p>
+        </div>
+
+        <div class="grid gap-2 rounded-2xl border bg-muted/40 p-4">
+          <span class="text-xs font-medium text-muted-foreground">答案</span>
+          <p class="whitespace-pre-wrap text-base font-semibold leading-7 text-foreground">
+            {{ answerResult.answer }}
+          </p>
+        </div>
+      </div>
+
+      <div
+        v-else
+        class="flex min-h-32 items-center justify-center rounded-2xl border border-dashed text-sm text-muted-foreground"
+      >
+        等待题目提交
+      </div>
+    </CardContent>
+  </Card>
+</template>