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

1. 重新设计答案对比区域UI： - 添加渐变色背景和圆角边框 - 添加图标徽章（✓/✗）区分正确和错误答案 - 添加hover悬浮效果增强交互感 - 响应式布局适配移动端 2. 优化错题详情弹窗： - 重新设计弹窗头部为渐变色 - 答案对比采用卡片式布局 - 知识点使用标签样式展示 - 整体视觉更加专业美观 3. 新增formatAnswer函数： - 支持JSON数组格式解析 - 多选答案用顿号分隔显示 - 空值友好显示"未作答" Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-03 10:49:32 +08:00
parent ac686c27e7
commit 078117807d
1 changed files with 325 additions and 34 deletions
--- a/frontend/src/views/analysis/mistakes.vue
+++ b/frontend/src/views/analysis/mistakes.vue
@@ -259,19 +259,29 @@
          </div>

          <div class="card-content">
-            <div class="question-content">
-              <h4 class="question-title">{{ mistake.title }}</h4>
-              <div class="answer-comparison">
-                <div class="answer-item wrong">
-                  <span class="answer-label">你的答案：</span>
-                  <span class="answer-value">{{ mistake.yourAnswer }}</span>
+          <div class="question-content">
+            <h4 class="question-title">{{ mistake.title }}</h4>
+            <div class="answer-comparison">
+              <div class="answer-item wrong">
+                <div class="answer-header">
+                  <span class="answer-icon wrong-icon">✗</span>
+                  <span class="answer-label">你的答案</span>
                </div>
-                <div class="answer-item correct">
-                  <span class="answer-label">正确答案：</span>
-                  <span class="answer-value">{{ mistake.correctAnswer }}</span>
+                <div class="answer-body">
+                  <span class="answer-value">{{ formatAnswer(mistake.yourAnswer) || '未作答' }}</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('h4', '题目'),
-      h('p', mistake.title),
-      h('h4', '你的答案'),
-      h('p', { style: 'color: #f56c6c' }, mistake.yourAnswer || '未作答'),
-      h('h4', '正确答案'),
-      h('p', { style: 'color: #67c23a' }, mistake.correctAnswer),
-      h('h4', '知识点'),
-      h('p', mistake.knowledge)
+    h('div', { class: 'mistake-detail-content' }, [
+      // 题目区域
+      h('div', { class: 'detail-section question-section' }, [
+        h('div', { class: 'section-label' }, '📝 题目内容'),
+        h('div', { class: 'section-content question-text' }, mistake.title)
+      ]),
+      // 答案对比区域
+      h('div', { class: 'detail-section answers-section' }, [
+        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;
-            margin-bottom: 12px;
+            gap: 16px;
+            margin-bottom: 16px;
+
+            @media (max-width: 640px) {
+              grid-template-columns: 1fr;
+            }

            .answer-item {
-              padding: 8px 12px;
-              border-radius: 6px;
+              border-radius: 12px;
+              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;
-                border: 1px solid #fcdede;
+                background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
+                border: 1px solid #ffccc7;
+
+                .answer-header {
+                  background: linear-gradient(90deg, #ff7875 0%, #ff9c9c 100%);
+                }
+
+                .answer-icon {
+                  background: #fff;
+                  color: #ff4d4f;
+                }
              }

              &.correct {
-                background: #f0f9ff;
-                border: 1px solid #b3d8ff;
+                background: linear-gradient(135deg, #f6ffed 0%, #d9f7be 100%);
+                border: 1px solid #b7eb8f;
+
+                .answer-header {
+                  background: linear-gradient(90deg, #52c41a 0%, #73d13d 100%);
+                }
+
+                .answer-icon {
+                  background: #fff;
+                  color: #52c41a;
+                }
              }

-              .answer-label {
-                font-size: 12px;
-                color: #666;
-                margin-right: 8px;
+              .answer-header {
+                display: flex;
+                align-items: center;
+                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 {
-                font-weight: 500;
-                color: #333;
+              .answer-body {
+                padding: 14px 16px;
+                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;
+                }
              }
            }
          }
@@ -1113,4 +1227,181 @@ 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>