From 99ded5461644233028badd9af081620848ba77c7 Mon Sep 17 00:00:00 2001
From: yuliang_guo <anonymous@qq.com>
Date: Tue, 3 Feb 2026 13:19:43 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E9=94=99=E9=A2=98?=
 =?UTF-8?q?=E5=8D=A1=E7=89=87=E6=93=8D=E4=BD=9C=E6=8C=89=E9=92=AEUI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 操作按钮改为实心渐变样式，更加醒目
- 添加View和Check图标增强辨识度
- 按钮hover时上浮+阴影效果
- 查看解析：蓝色渐变，hover变深蓝
- 标记已掌握：绿色渐变，hover变深绿
- 表格视图按钮同步优化

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 frontend/src/views/analysis/mistakes.vue | 107 ++++++++++++++++++++---
 1 file changed, 95 insertions(+), 12 deletions(-)

diff --git a/frontend/src/views/analysis/mistakes.vue b/frontend/src/views/analysis/mistakes.vue
index e418d6f..a428a09 100644
--- a/frontend/src/views/analysis/mistakes.vue
+++ b/frontend/src/views/analysis/mistakes.vue
@@ -322,10 +322,22 @@
           </div>
 
           <div class="card-actions">
-            <el-button link type="primary" size="small" @click="viewDetail(mistake)">
+            <el-button 
+              type="primary" 
+              plain 
+              @click="viewDetail(mistake)"
+              class="action-btn view-btn"
+            >
+              <el-icon class="btn-icon"><View /></el-icon>
               查看解析
             </el-button>
-            <el-button link type="success" size="small" @click="markMastered(mistake)">
+            <el-button 
+              type="success" 
+              plain 
+              @click="markMastered(mistake)"
+              class="action-btn master-btn"
+            >
+              <el-icon class="btn-icon"><Check /></el-icon>
               标记已掌握
             </el-button>
           </div>
@@ -359,14 +371,28 @@
               </el-tag>
             </template>
           </el-table-column>
-          <el-table-column label="操作" width="150">
+          <el-table-column label="操作" width="220">
             <template #default="scope">
-              <el-button link type="primary" size="small" @click="viewDetail(scope.row)">
-                查看解析
-              </el-button>
-              <el-button link type="success" size="small" @click="markMastered(scope.row)">
-                标记已掌握
-              </el-button>
+              <div class="table-actions">
+                <el-button 
+                  type="primary" 
+                  size="small" 
+                  @click="viewDetail(scope.row)"
+                  class="table-action-btn"
+                >
+                  <el-icon><View /></el-icon>
+                  解析
+                </el-button>
+                <el-button 
+                  type="success" 
+                  size="small" 
+                  @click="markMastered(scope.row)"
+                  class="table-action-btn"
+                >
+                  <el-icon><Check /></el-icon>
+                  已掌握
+                </el-button>
+              </div>
             </template>
           </el-table-column>
         </el-table>
@@ -406,7 +432,7 @@
 <script setup lang="ts">
 import { ref, reactive, computed, onMounted, h } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Refresh, Grid, List, Search } from '@element-plus/icons-vue'
+import { Refresh, Grid, List, Search, View, Check } from '@element-plus/icons-vue'
 import { getMistakesList, getMistakesStatistics, markMistakeMastered } from '@/api/exam'
 import type { MistakeListItem, MistakesStatisticsResponse } from '@/api/exam'
 
@@ -1175,6 +1201,21 @@ console.log('错题分析页面已加载')
 
     .mistake-table {
       margin-top: 20px;
+
+      .table-actions {
+        display: flex;
+        gap: 8px;
+
+        .table-action-btn {
+          border-radius: 6px;
+          font-size: 12px;
+          padding: 6px 12px;
+
+          .el-icon {
+            margin-right: 4px;
+          }
+        }
+      }
     }
 
     .mistake-cards {
@@ -1341,11 +1382,53 @@ console.log('错题分析页面已加载')
         }
 
         .card-actions {
-          padding: 12px 16px;
-          background: #fafafa;
+          padding: 14px 16px;
+          background: linear-gradient(135deg, #f8f9fa 0%, #f0f2f5 100%);
           border-top: 1px solid #e4e7ed;
           display: flex;
           gap: 12px;
+
+          .action-btn {
+            flex: 1;
+            border-radius: 8px;
+            font-weight: 500;
+            padding: 10px 16px;
+            transition: all 0.25s ease;
+
+            .btn-icon {
+              margin-right: 6px;
+              font-size: 16px;
+            }
+
+            &:hover {
+              transform: translateY(-2px);
+              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            }
+          }
+
+          .view-btn {
+            background: linear-gradient(135deg, #e6f4ff 0%, #bae0ff 100%);
+            border-color: #91caff;
+            color: #1677ff;
+
+            &:hover {
+              background: linear-gradient(135deg, #1677ff 0%, #4096ff 100%);
+              border-color: #1677ff;
+              color: #fff;
+            }
+          }
+
+          .master-btn {
+            background: linear-gradient(135deg, #f6ffed 0%, #d9f7be 100%);
+            border-color: #b7eb8f;
+            color: #52c41a;
+
+            &:hover {
+              background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
+              border-color: #52c41a;
+              color: #fff;
+            }
+          }
         }
       }
     }