筛选优化

web/src/views/GradeAnalyticsView.vue

@@ -136,6 +136,15 @@ async function loadClasses(reset = false) {
   }
 }
 
+function resetFilters() {
+  termId.value = defaultAcademicTermId(terms.value)
+  collegeId.value = undefined
+  keyword.value = ''
+  teacherKeyword.value = ''
+  riskOnly.value = false
+  loadClasses(true)
+}
+
 async function loadReport(item = selected.value) {
   if (!item) return
   selected.value = item
@@ -428,6 +437,7 @@ onBeforeUnmount(() => {
       <el-input v-model="teacherKeyword" clearable placeholder="任课教师姓名或工号" :prefix-icon="Search" @keyup.enter="loadClasses(true)" @clear="loadClasses(true)" />
       <el-checkbox v-model="riskOnly" @change="loadClasses(true)">仅看预警班</el-checkbox>
       <el-button type="primary" @click="loadClasses(true)">查询</el-button>
+      <el-button :icon="Refresh" @click="resetFilters">重置</el-button>
     </section>
 
     <section class="analytics-shell">
@@ -521,7 +531,9 @@ onBeforeUnmount(() => {
 <style scoped>
 .grade-analytics { --ink: #18324f; --blue: #204f87; --line: #dce3ec; }
 .analytics-intro { align-items: flex-end; }
-.filter-bar { display: grid; grid-template-columns: 240px minmax(260px, 560px) auto; gap: 12px; align-items: center; padding: 16px 18px; background: #f7f9fc; border: 1px solid var(--line); }
+.filter-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 16px 18px; background: #f7f9fc; border: 1px solid var(--line); }
+.filter-bar > :deep(.el-input) { width: min(100%, 280px); }
+.filter-bar > :deep(.el-checkbox) { margin-right: 4px; }
 .analytics-shell { display: grid; grid-template-columns: 292px minmax(0, 1fr); gap: 18px; align-items: start; }
 .class-rail { position: sticky; top: 18px; max-height: calc(100vh - 36px); overflow: auto; background: #f6f8fb; border: 1px solid var(--line); }
 .class-rail > header { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; gap: 8px; padding: 15px 16px; background: #eef2f7; border-bottom: 1px solid var(--line); }
@@ -575,7 +587,7 @@ onBeforeUnmount(() => {
   .chart-card-wide { grid-column: auto; }
 }
 @media (max-width: 820px) {
-  .filter-bar { grid-template-columns: 1fr; }
+  .filter-bar { display: grid; grid-template-columns: 1fr; }
   .filter-bar :deep(.el-select) { width: 100% !important; }
   .analytics-shell { grid-template-columns: 1fr; }
   .class-rail { position: static; max-height: 390px; }