64 lines
2.0 KiB
Vue
64 lines
2.0 KiB
Vue
<!-- 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>
|