94 lines
2.8 KiB
Vue
94 lines
2.8 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";
|
|
import { getOptionLines } from "@/utils";
|
|
|
|
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();
|
|
}
|
|
});
|
|
|
|
/** 格式化后按行拆分选项，标记每行是否为正确答案 */
|
|
const formattedOptionLines = computed(() => {
|
|
if (!selectedRecord.value?.options) return null;
|
|
return getOptionLines(
|
|
selectedRecord.value.options,
|
|
selectedRecord.value.answer ?? ""
|
|
);
|
|
});
|
|
</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>
|
|
<div
|
|
class="whitespace-pre-wrap rounded-2xl bg-muted p-3 text-sm leading-6"
|
|
>
|
|
<template v-if="formattedOptionLines">
|
|
<div
|
|
v-for="(line, i) in formattedOptionLines"
|
|
:key="i"
|
|
:class="
|
|
line.isCorrect
|
|
? 'text-(--color-primary) font-medium'
|
|
: 'text-foreground'
|
|
"
|
|
>
|
|
{{ line.text }}
|
|
</div>
|
|
</template>
|
|
<span v-else class="text-foreground">-</span>
|
|
</div>
|
|
</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>
|