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>

app/components/dashboard/QaRecordsTable.vue

@@ -5,6 +5,7 @@ import { storeToRefs } from "pinia";
 
 import TableCom from "@/components/Table/TableCom.vue";
 import type { TableColumn } from "@/components/Table/type";
+import TooltipCom from "@/components/TooltipCom.vue";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
@@ -21,12 +22,12 @@ import {
   SelectTrigger,
   SelectValue
 } from "@/components/ui/select";
-import type { IQaRecord } from "@/interfaces";
 import {
   DASHBOARD_PAGE_SIZE_OPTIONS,
   QUESTION_TYPE_LABELS,
   useAnswerStore
 } from "@/stores/answer";
+import { getOptionLines } from "@/utils";
 
 const answerStore = useAnswerStore();
 const {
@@ -79,11 +80,6 @@ const columns = computed<TableColumn[]>(() => [
 const getQuestionTypeLabel = (type: string) => {
   return QUESTION_TYPE_LABELS[type] || type || "自动判断";
 };
-
-/** 空选项统一展示占位，不在表格中撑开大段空白 */
-const displayOptions = (record: IQaRecord) => {
-  return record.options || "-";
-};
 </script>
 
 <template>
@@ -148,12 +144,49 @@ const displayOptions = (record: IQaRecord) => {
         </template>
 
         <template #options="{ row }">
-          <div
-            class="max-w-md truncate text-muted-foreground"
-            :title="displayOptions(row)"
-          >
-            {{ displayOptions(row) }}
-          </div>
+          <TooltipCom side="top" align="start">
+            <template #trigger>
+              <div class="max-w-md cursor-default truncate">
+                <template v-if="row.options">
+                  <template
+                    v-for="(line, i) in getOptionLines(
+                      row.options,
+                      row.answer ?? ''
+                    )"
+                    :key="i"
+                  >
+                    <span v-if="i > 0" class="text-muted-foreground"
+                      >&nbsp;</span
+                    >
+                    <span
+                      :class="
+                        line.isCorrect
+                          ? 'text-green-500 font-medium'
+                          : 'text-muted-foreground'
+                      "
+                      >{{ line.text }}</span
+                    >
+                  </template>
+                </template>
+                <span v-else class="text-muted-foreground">-</span>
+              </div>
+            </template>
+            <div
+              v-if="row.options"
+              class="max-w-sm whitespace-pre-wrap px-3 py-1 text-xs leading-5"
+            >
+              <div
+                v-for="(line, i) in getOptionLines(
+                  row.options,
+                  row.answer ?? ''
+                )"
+                :key="i"
+                :class="line.isCorrect ? 'text-green-500 font-medium' : ''"
+              >
+                {{ line.text }}
+              </div>
+            </div>
+          </TooltipCom>
         </template>
 
         <template #answer="{ value }">