81 lines
2.5 KiB
Vue
81 lines
2.5 KiB
Vue
<!-- 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>
|