feat:更新训练场模块

src/views/Mistakes.vue

@@ -9,15 +9,11 @@
 
     <div class="mistake-record">
       <div v-if="mistakeStore.mistakeList.length" class="mistake-list">
-        <el-card
-            v-for="item in mistakeStore.mistakeList"
-            :key="item.id"
-            class="mistake-card"
-            shadow="never"
-        >
+        <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>
+            <el-button type="success" size="small" @click="deleteClick(item.id)">已掌握</el-button>
           </div>
 
           <div class="question">{{ item.question }}</div>
@@ -25,7 +21,7 @@
           <div class="option-list">
             <div v-for="(opt, index) in item.options" :key="index" class="option"
                  :class="optionClass(item, index)">
-              {{ letter(index) }}．{{ opt }}
+              {{ optLetter(index) }}．{{ opt }}
             </div>
           </div>
         </el-card>
@@ -39,6 +35,9 @@
 <script setup lang="ts">
 import { onMounted } from 'vue'
 import { useMistakeStore } from '@/stores/mistake.ts'
+import { optLetter } from '@/utils/practiceUtil.ts'
+import type { IMistake } from '@/types/mistake.ts'
+import { ElMessageBox } from 'element-plus'
 
 const mistakeStore = useMistakeStore()
 
@@ -46,15 +45,24 @@ onMounted(async () => {
   await mistakeStore.queryMistakeList()
 })
 
-const letter = (i: number) => String.fromCharCode(65 + i)
-
-const optionClass = (item: any, index: number) => {
+const optionClass = (item: IMistake, index: number) => {
   const letters = ['A', 'B', 'C', 'D']
   const isCorrect = item.answer.includes(letters[index])
   return {
     correct: isCorrect
   }
 }
+
+const deleteClick = (id: number) => {
+  ElMessageBox.confirm('确定已掌握该错题？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(async () => {
+    await mistakeStore.deleteMistakeById(id)
+    await mistakeStore.queryMistakeList()
+  })
+}
 </script>
 
 <style lang="scss">
@@ -62,7 +70,6 @@ const optionClass = (item: any, index: number) => {
   display: flex;
   flex-direction: column;
   gap: 16px;
-  padding: 16px;
   background: #f7f8fa;
 }