From c66b355a5ad443fb727b35bceed1222cf77a95e6 Mon Sep 17 00:00:00 2001
From: yuliang_guo <anonymous@qq.com>
Date: Tue, 3 Feb 2026 11:16:46 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E9=94=99=E9=A2=98?=
 =?UTF-8?q?=E5=88=86=E6=9E=90=E7=AD=9B=E9=80=89=E6=A1=86UI=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 重新设计筛选工具栏布局，采用flex横向排列
- 搜索框改为圆角胶囊形状，添加hover聚焦效果
- 下拉选择框使用统一的圆角灰底设计
- 添加emoji图标前缀增加辨识度
- 筛选标签改为胶囊形状
- 重置按钮仅在有筛选条件时显示
- 整体视觉更加现代简洁

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

diff --git a/frontend/src/views/analysis/mistakes.vue b/frontend/src/views/analysis/mistakes.vue
index f460ab6..e418d6f 100644
--- a/frontend/src/views/analysis/mistakes.vue
+++ b/frontend/src/views/analysis/mistakes.vue
@@ -58,93 +58,113 @@
 
     <!-- 搜索和筛选 -->
     <div class="filter-section card">
-      <el-form :inline="true" :model="filterForm" class="filter-form">
-        <el-form-item label="关键词">
+      <div class="filter-toolbar">
+        <!-- 搜索框 -->
+        <div class="search-box">
           <el-input 
             v-model="filterForm.keyword" 
-            placeholder="搜索错题内容或知识点"
+            placeholder="搜索错题内容或知识点..."
             clearable
             @input="handleRealTimeSearch"
-            style="width: 200px"
+            class="search-input"
           >
             <template #prefix>
-              <el-icon><Search /></el-icon>
+              <el-icon class="search-icon"><Search /></el-icon>
             </template>
           </el-input>
-        </el-form-item>
-        <el-form-item label="题目类型">
+        </div>
+        
+        <!-- 筛选项 -->
+        <div class="filter-items">
           <el-select 
             v-model="filterForm.type" 
-            placeholder="全部类型" 
+            placeholder="题目类型" 
             clearable
             @change="handleRealTimeSearch"
-            style="width: 120px"
+            class="filter-select"
           >
+            <template #prefix>
+              <span class="select-prefix-icon">📝</span>
+            </template>
             <el-option label="单选题" value="single" />
             <el-option label="多选题" value="multiple" />
             <el-option label="判断题" value="judge" />
             <el-option label="填空题" value="fill" />
             <el-option label="简答题" value="essay" />
           </el-select>
-        </el-form-item>
-        <el-form-item label="难度等级">
+
           <el-select 
             v-model="filterForm.difficulty" 
-            placeholder="全部难度" 
+            placeholder="难度等级" 
             clearable
             @change="handleRealTimeSearch"
-            style="width: 120px"
+            class="filter-select"
           >
+            <template #prefix>
+              <span class="select-prefix-icon">⭐</span>
+            </template>
             <el-option label="简单" value="easy" />
             <el-option label="中等" value="medium" />
             <el-option label="困难" value="hard" />
           </el-select>
-        </el-form-item>
-        <el-form-item label="掌握状态">
+
           <el-select 
             v-model="filterForm.status" 
-            placeholder="全部状态" 
+            placeholder="掌握状态" 
             clearable
             @change="handleRealTimeSearch"
-            style="width: 120px"
+            class="filter-select"
           >
+            <template #prefix>
+              <span class="select-prefix-icon">📊</span>
+            </template>
             <el-option label="未掌握" value="unmastered" />
             <el-option label="已掌握" value="mastered" />
             <el-option label="需巩固" value="review" />
           </el-select>
-        </el-form-item>
-        <el-form-item label="时间周期">
+
           <el-select 
             v-model="filterForm.timePeriod" 
-            placeholder="全部时间" 
+            placeholder="时间周期" 
             clearable
             @change="handleRealTimeSearch"
-            style="width: 120px"
+            class="filter-select"
           >
+            <template #prefix>
+              <span class="select-prefix-icon">📅</span>
+            </template>
             <el-option label="最近一周" value="week" />
             <el-option label="最近一月" value="month" />
             <el-option label="最近三月" value="quarter" />
             <el-option label="自定义" value="custom" />
           </el-select>
-        </el-form-item>
-        <el-form-item v-if="filterForm.timePeriod === 'custom'" label="自定义时间">
+
           <el-date-picker
+            v-if="filterForm.timePeriod === 'custom'"
             v-model="customDateRange"
             type="daterange"
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
+            range-separator="~"
+            start-placeholder="开始"
+            end-placeholder="结束"
             @change="handleRealTimeSearch"
-            style="width: 240px"
+            class="date-picker"
+            format="MM/DD"
+            value-format="YYYY-MM-DD"
           />
-        </el-form-item>
-        <el-form-item>
-          <el-button @click="handleReset">
-            <el-icon class="el-icon--left"><Refresh /></el-icon>
-            重置
-          </el-button>
-        </el-form-item>
-      </el-form>
+        </div>
+
+        <!-- 重置按钮 -->
+        <el-button 
+          v-if="hasActiveFilters"
+          @click="handleReset" 
+          class="reset-btn"
+          type="info"
+          plain
+        >
+          <el-icon><Refresh /></el-icon>
+          重置
+        </el-button>
+      </div>
 
       <!-- 当前筛选条件显示 -->
       <div v-if="hasActiveFilters" class="filter-tags">
@@ -882,15 +902,105 @@ console.log('错题分析页面已加载')
   }
 
   .filter-section {
-    .filter-form {
-      .el-form-item {
-        margin-bottom: 0;
+    padding: 16px 20px;
+
+    .filter-toolbar {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      flex-wrap: wrap;
+
+      .search-box {
+        flex: 0 0 280px;
+
+        .search-input {
+          :deep(.el-input__wrapper) {
+            border-radius: 20px;
+            background: #f5f7fa;
+            box-shadow: none;
+            border: 1px solid transparent;
+            padding: 4px 16px;
+            transition: all 0.3s ease;
+
+            &:hover, &:focus-within {
+              background: #fff;
+              border-color: #409eff;
+              box-shadow: 0 2px 12px rgba(64, 158, 255, 0.15);
+            }
+          }
+
+          .search-icon {
+            color: #909399;
+            font-size: 16px;
+          }
+        }
+      }
+
+      .filter-items {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        flex-wrap: wrap;
+        flex: 1;
+
+        .filter-select {
+          width: 130px;
+
+          :deep(.el-select__wrapper) {
+            border-radius: 8px;
+            background: #f5f7fa;
+            box-shadow: none;
+            border: 1px solid transparent;
+            transition: all 0.2s ease;
+            min-height: 36px;
+
+            &:hover {
+              background: #fff;
+              border-color: #dcdfe6;
+            }
+
+            &.is-focused {
+              background: #fff;
+              border-color: #409eff;
+              box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
+            }
+          }
+
+          .select-prefix-icon {
+            font-size: 14px;
+            margin-right: 4px;
+          }
+        }
+
+        .date-picker {
+          :deep(.el-input__wrapper) {
+            border-radius: 8px;
+            background: #f5f7fa;
+            box-shadow: none;
+            border: 1px solid transparent;
+
+            &:hover {
+              background: #fff;
+              border-color: #dcdfe6;
+            }
+          }
+        }
+      }
+
+      .reset-btn {
+        border-radius: 8px;
+        padding: 8px 16px;
+        font-size: 13px;
+        
+        .el-icon {
+          margin-right: 4px;
+        }
       }
     }
 
     .filter-tags {
-      margin-top: 16px;
-      padding-top: 16px;
+      margin-top: 14px;
+      padding-top: 14px;
       border-top: 1px solid #f0f0f0;
       display: flex;
       align-items: center;
@@ -898,42 +1008,62 @@ console.log('错题分析页面已加载')
       gap: 8px;
 
       .filter-label {
-        color: #666;
-        font-size: 14px;
-        margin-right: 8px;
+        color: #606266;
+        font-size: 13px;
+        font-weight: 500;
+      }
+
+      .el-tag {
+        border-radius: 16px;
+        padding: 0 12px;
+        height: 28px;
+        line-height: 26px;
+        font-size: 12px;
       }
 
       .clear-all-btn {
-        margin-left: 8px;
+        margin-left: auto;
+        font-size: 12px;
       }
     }
 
     .search-result-info {
-      margin-top: 12px;
-      padding-top: 12px;
+      margin-top: 14px;
+      padding-top: 14px;
       border-top: 1px solid #f0f0f0;
       display: flex;
       justify-content: space-between;
       align-items: center;
 
       .result-count {
-        color: #666;
+        color: #606266;
         font-size: 14px;
+        display: flex;
+        align-items: center;
+        gap: 4px;
 
         strong {
           color: #409eff;
           font-weight: 600;
+          font-size: 18px;
         }
       }
 
       .filter-hint {
         color: #e6a23c;
         font-size: 12px;
+        background: #fdf6ec;
+        padding: 2px 8px;
+        border-radius: 10px;
+        margin-left: 8px;
       }
 
       .category-info {
-        color: #666;
-        font-size: 14px;
+        color: #606266;
+        font-size: 13px;
+        background: #f0f9eb;
+        padding: 4px 12px;
+        border-radius: 16px;
 
         strong {
           color: #67c23a;