feat: 表格展示优化

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 }">