style: 优化错题分析页面的答案选项显示格式

1. 重新设计答案对比区域UI：
   - 添加渐变色背景和圆角边框
   - 添加图标徽章（✓/✗）区分正确和错误答案
   - 添加hover悬浮效果增强交互感
   - 响应式布局适配移动端

2. 优化错题详情弹窗：
   - 重新设计弹窗头部为渐变色
   - 答案对比采用卡片式布局
   - 知识点使用标签样式展示
   - 整体视觉更加专业美观

3. 新增formatAnswer函数：
   - 支持JSON数组格式解析
   - 多选答案用顿号分隔显示
   - 空值友好显示"未作答"

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/views/analysis/mistakes.vue

@@ -259,19 +259,29 @@
           </div>
 
           <div class="card-content">
-            <div class="question-content">
+          <div class="question-content">
-              <h4 class="question-title">{{ mistake.title }}</h4>
+            <h4 class="question-title">{{ mistake.title }}</h4>
-              <div class="answer-comparison">
+            <div class="answer-comparison">
-                <div class="answer-item wrong">
+              <div class="answer-item wrong">
-                  <span class="answer-label">你的答案：</span>
+                <div class="answer-header">
-                  <span class="answer-value">{{ mistake.yourAnswer }}</span>
+                  <span class="answer-icon wrong-icon">✗</span>
+                  <span class="answer-label">你的答案</span>
                 </div>
-                <div class="answer-item correct">
+                <div class="answer-body">
-                  <span class="answer-label">正确答案：</span>
+                  <span class="answer-value">{{ formatAnswer(mistake.yourAnswer) || '未作答' }}</span>
-                  <span class="answer-value">{{ mistake.correctAnswer }}</span>
+                </div>
+              </div>
+              <div class="answer-item correct">
+                <div class="answer-header">
+                  <span class="answer-icon correct-icon">✓</span>
+                  <span class="answer-label">正确答案</span>
+                </div>
+                <div class="answer-body">
+                  <span class="answer-value">{{ formatAnswer(mistake.correctAnswer) }}</span>
                 </div>
               </div>
             </div>
+          </div>
 
             <div class="mistake-meta">
               <div class="detail-item">
@@ -550,19 +560,38 @@ const loadMistakes = async () => {
  */
 const viewDetail = (mistake: any) => {
   ElMessageBox.alert(
-    h('div', { class: 'mistake-detail' }, [
+    h('div', { class: 'mistake-detail-content' }, [
-      h('h4', '题目'),
+      // 题目区域
-      h('p', mistake.title),
+      h('div', { class: 'detail-section question-section' }, [
-      h('h4', '你的答案'),
+        h('div', { class: 'section-label' }, '📝 题目内容'),
-      h('p', { style: 'color: #f56c6c' }, mistake.yourAnswer || '未作答'),
+        h('div', { class: 'section-content question-text' }, mistake.title)
-      h('h4', '正确答案'),
+      ]),
-      h('p', { style: 'color: #67c23a' }, mistake.correctAnswer),
+      // 答案对比区域
-      h('h4', '知识点'),
+      h('div', { class: 'detail-section answers-section' }, [
-      h('p', mistake.knowledge)
+        h('div', { class: 'answer-box wrong-answer' }, [
+          h('div', { class: 'answer-badge wrong' }, [
+            h('span', { class: 'badge-icon' }, '✗'),
+            h('span', { class: 'badge-text' }, '你的答案')
+          ]),
+          h('div', { class: 'answer-text' }, formatAnswer(mistake.yourAnswer) || '未作答')
+        ]),
+        h('div', { class: 'answer-box correct-answer' }, [
+          h('div', { class: 'answer-badge correct' }, [
+            h('span', { class: 'badge-icon' }, '✓'),
+            h('span', { class: 'badge-text' }, '正确答案')
+          ]),
+          h('div', { class: 'answer-text' }, formatAnswer(mistake.correctAnswer))
+        ])
+      ]),
+      // 知识点区域
+      h('div', { class: 'detail-section knowledge-section' }, [
+        h('div', { class: 'section-label' }, '💡 关联知识点'),
+        h('div', { class: 'section-content knowledge-tag' }, mistake.knowledge || '未关联')
+      ])
     ]),
     '错题详情',
     {
-      confirmButtonText: '关闭',
+      confirmButtonText: '我知道了',
       customClass: 'mistake-detail-dialog'
     }
   )
@@ -790,6 +819,33 @@ const getStatusTagType = (status: string) => {
   return map[status] || 'info'
 }
 
+/**
+ * 格式化答案显示
+ * 处理多选答案（逗号分隔）和选项格式
+ */
+const formatAnswer = (answer: string | null | undefined) => {
+  if (!answer) return ''
+  
+  // 如果是JSON数组格式，解析并格式化
+  if (answer.startsWith('[') && answer.endsWith(']')) {
+    try {
+      const arr = JSON.parse(answer)
+      if (Array.isArray(arr)) {
+        return arr.join('、')
+      }
+    } catch {
+      // 解析失败，使用原始字符串
+    }
+  }
+  
+  // 如果是逗号分隔的多选答案，用顿号分隔显示
+  if (answer.includes(',')) {
+    return answer.split(',').map(s => s.trim()).join('、')
+  }
+  
+  return answer
+}
+
 // 初始化加载数据
 onMounted(() => {
   loadStatistics()
@@ -1036,32 +1092,90 @@ console.log('错题分析页面已加载')
           .answer-comparison {
             display: grid;
             grid-template-columns: 1fr 1fr;
-            gap: 12px;
+            gap: 16px;
-            margin-bottom: 12px;
+            margin-bottom: 16px;
+
+            @media (max-width: 640px) {
+              grid-template-columns: 1fr;
+            }
 
             .answer-item {
-              padding: 8px 12px;
+              border-radius: 12px;
-              border-radius: 6px;
+              overflow: hidden;
+              transition: transform 0.2s ease, box-shadow 0.2s ease;
+
+              &:hover {
+                transform: translateY(-2px);
+                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+              }
 
               &.wrong {
-                background: #fef0f0;
+                background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
-                border: 1px solid #fcdede;
+                border: 1px solid #ffccc7;
+
+                .answer-header {
+                  background: linear-gradient(90deg, #ff7875 0%, #ff9c9c 100%);
+                }
+
+                .answer-icon {
+                  background: #fff;
+                  color: #ff4d4f;
+                }
               }
 
               &.correct {
-                background: #f0f9ff;
+                background: linear-gradient(135deg, #f6ffed 0%, #d9f7be 100%);
-                border: 1px solid #b3d8ff;
+                border: 1px solid #b7eb8f;
+
+                .answer-header {
+                  background: linear-gradient(90deg, #52c41a 0%, #73d13d 100%);
+                }
+
+                .answer-icon {
+                  background: #fff;
+                  color: #52c41a;
+                }
               }
 
-              .answer-label {
+              .answer-header {
-                font-size: 12px;
+                display: flex;
-                color: #666;
+                align-items: center;
-                margin-right: 8px;
+                gap: 10px;
+                padding: 10px 14px;
+
+                .answer-icon {
+                  width: 24px;
+                  height: 24px;
+                  border-radius: 50%;
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                  font-size: 14px;
+                  font-weight: bold;
+                  flex-shrink: 0;
+                }
+
+                .answer-label {
+                  font-size: 13px;
+                  font-weight: 600;
+                  color: #fff;
+                  letter-spacing: 0.5px;
+                }
               }
 
-              .answer-value {
+              .answer-body {
-                font-weight: 500;
+                padding: 14px 16px;
-                color: #333;
+                min-height: 48px;
+                display: flex;
+                align-items: center;
+
+                .answer-value {
+                  font-size: 15px;
+                  font-weight: 500;
+                  color: #333;
+                  line-height: 1.6;
+                  word-break: break-word;
+                }
               }
             }
           }
@@ -1114,3 +1228,180 @@ console.log('错题分析页面已加载')
   }
 }
 </style>
+
+<!-- 全局样式用于弹窗 -->
+<style lang="scss">
+.mistake-detail-dialog {
+  max-width: 600px !important;
+  border-radius: 16px !important;
+  overflow: hidden;
+
+  .el-message-box__header {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    padding: 16px 20px;
+
+    .el-message-box__title {
+      color: #fff !important;
+      font-size: 18px;
+      font-weight: 600;
+    }
+
+    .el-message-box__headerbtn {
+      .el-message-box__close {
+        color: #fff !important;
+      }
+    }
+  }
+
+  .el-message-box__content {
+    padding: 0 !important;
+  }
+
+  .el-message-box__btns {
+    padding: 16px 20px;
+    border-top: 1px solid #f0f0f0;
+
+    .el-button--primary {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border: none;
+      border-radius: 8px;
+      padding: 10px 24px;
+      font-weight: 500;
+
+      &:hover {
+        opacity: 0.9;
+      }
+    }
+  }
+}
+
+.mistake-detail-content {
+  .detail-section {
+    padding: 16px 20px;
+    border-bottom: 1px solid #f5f5f5;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    .section-label {
+      font-size: 13px;
+      font-weight: 600;
+      color: #666;
+      margin-bottom: 10px;
+    }
+
+    .section-content {
+      font-size: 15px;
+      color: #333;
+      line-height: 1.6;
+    }
+  }
+
+  .question-section {
+    background: #fafafa;
+
+    .question-text {
+      font-size: 16px;
+      font-weight: 500;
+      color: #1a1a1a;
+    }
+  }
+
+  .answers-section {
+    display: flex;
+    gap: 16px;
+    padding: 20px;
+    background: #fff;
+
+    @media (max-width: 500px) {
+      flex-direction: column;
+    }
+
+    .answer-box {
+      flex: 1;
+      border-radius: 12px;
+      overflow: hidden;
+      transition: transform 0.2s ease;
+
+      &:hover {
+        transform: translateY(-2px);
+      }
+
+      &.wrong-answer {
+        background: linear-gradient(135deg, #fff5f5 0%, #ffebeb 100%);
+        border: 1px solid #ffccc7;
+
+        .answer-badge {
+          background: linear-gradient(90deg, #ff7875 0%, #ff9c9c 100%);
+        }
+      }
+
+      &.correct-answer {
+        background: linear-gradient(135deg, #f6ffed 0%, #e8f8e0 100%);
+        border: 1px solid #b7eb8f;
+
+        .answer-badge {
+          background: linear-gradient(90deg, #52c41a 0%, #73d13d 100%);
+        }
+      }
+
+      .answer-badge {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 10px 14px;
+        color: #fff;
+
+        .badge-icon {
+          width: 22px;
+          height: 22px;
+          background: rgba(255, 255, 255, 0.95);
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 12px;
+          font-weight: bold;
+        }
+
+        &.wrong .badge-icon {
+          color: #ff4d4f;
+        }
+
+        &.correct .badge-icon {
+          color: #52c41a;
+        }
+
+        .badge-text {
+          font-size: 13px;
+          font-weight: 600;
+        }
+      }
+
+      .answer-text {
+        padding: 14px 16px;
+        font-size: 15px;
+        font-weight: 500;
+        color: #333;
+        line-height: 1.5;
+        min-height: 44px;
+      }
+    }
+  }
+
+  .knowledge-section {
+    background: linear-gradient(135deg, #e6f7ff 0%, #f0f9ff 100%);
+
+    .knowledge-tag {
+      display: inline-block;
+      background: #1890ff;
+      color: #fff;
+      padding: 6px 14px;
+      border-radius: 20px;
+      font-size: 13px;
+      font-weight: 500;
+    }
+  }
+}
+</style>