feat:增加训练场和错题集模块

src/views/Mistakes.vue

@@ -1,11 +1,105 @@
 <template>
-  <div>
-    <h2>错题本</h2>
-    <p style="color:#94a3b8;margin-top:8px;">回顾错题，查漏补缺</p>
-    <el-divider />
-    <el-empty description="错题本页面 - 待开发" />
+  <div class="mistake-view common-view">
+    <div class="view-header">
+      <div class="view-content">
+        <h2 class="view-title">错题本</h2>
+        <p class="view-subtitle">回顾错题，查漏补缺</p>
+      </div>
+    </div>
+
+    <div class="mistake-record">
+      <div class="mistake-list">
+        <el-card
+            v-for="item in mistakeStore.mistakeList"
+            :key="item.id"
+            class="mistake-card"
+            shadow="never"
+        >
+          <div class="library">
+            <el-tag type="primary" effect="dark">{{ item.subject }} · {{ item.module }}</el-tag>
+            <el-tag type="danger" effect="dark">错 {{ item.wrongCount }} 次</el-tag>
+          </div>
+
+          <div class="question">{{ item.question }}</div>
+
+          <div class="option-list">
+            <div v-for="(opt, index) in item.options" :key="index" class="option"
+                 :class="optionClass(item, index)">
+              {{ letter(index) }}．{{ opt }}
+            </div>
+          </div>
+        </el-card>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-</script>
+import { onMounted } from 'vue'
+import { useMistakeStore } from '@/stores/mistake.ts'
+
+const mistakeStore = useMistakeStore()
+
+onMounted(async () => {
+  await mistakeStore.queryMistakeList()
+})
+
+const letter = (i: number) => String.fromCharCode(65 + i)
+
+const optionClass = (item: any, index: number) => {
+  const letters = ['A', 'B', 'C', 'D']
+  const isCorrect = item.answer.includes(letters[index])
+  return {
+    correct: isCorrect
+  }
+}
+</script>
+
+<style lang="scss">
+.mistake-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px;
+  background: #f7f8fa;
+}
+
+.mistake-card {
+  .el-card__body {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .library {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .question {
+    font-size: 15px;
+    font-weight: 500;
+    line-height: 1.6;
+  }
+
+  .option-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    .option {
+      padding: 10px 12px;
+      border-radius: 8px;
+      border: 1px solid #e5e6eb;
+      font-size: 14px;
+      background: #fff;
+    }
+
+    .option.correct {
+      border-color: #52c41a;
+      background: #f6ffed;
+      color: #389e0d;
+    }
+  }
+}
+</style>