feat: 表格展示优化

app/components/dashboard/QaRecordDetail.vue

@@ -10,6 +10,7 @@ import {
   DialogTitle
 } from "@/components/ui/dialog";
 import { useAnswerStore } from "@/stores/answer";
+import { getOptionLines } from "@/utils";
 
 const answerStore = useAnswerStore();
 const { selectedRecord } = storeToRefs(answerStore);
@@ -26,6 +27,15 @@ const dialogOpen = computed({
     if (!open) close();
   }
 });
+
+/** 格式化后按行拆分选项，标记每行是否为正确答案 */
+const formattedOptionLines = computed(() => {
+  if (!selectedRecord.value?.options) return null;
+  return getOptionLines(
+    selectedRecord.value.options,
+    selectedRecord.value.answer ?? ""
+  );
+});
 </script>
 
 <template>
@@ -36,26 +46,46 @@ const dialogOpen = computed({
         <DialogDescription>{{ selectedRecord?.time }}</DialogDescription>
       </DialogHeader>
 
-      <div v-if="selectedRecord" class="grid max-h-[70vh] gap-4 overflow-auto pr-1">
+      <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>
+            >{{ 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
+            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>
+            >{{ selectedRecord.answer }}</pre
+          >
         </div>
       </div>
     </DialogContent>