From ca361d6d2b6cd2464d13a3c218a3f793f252c4f8 Mon Sep 17 00:00:00 2001
From: zhonghua <zhonghua>
Date: Wed, 4 Mar 2026 14:14:15 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E7=A7=BB=E5=8A=A8=E7=AB=AF):=20=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E6=95=99=E5=B8=88=E7=AB=AF=E4=B8=8A=E8=AF=BE=E8=AE=B0?=
 =?UTF-8?q?=E5=BD=95=E7=AD=9B=E9=80=89=E6=8E=92=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 筛选区改为可换行/移动端堆叠布局，避免按钮被挤压或横向溢出

Made-with: Cursor
---
 .../views/teacher/lessons/LessonListView.vue  | 58 +++++++++++++++++--
 1 file changed, 53 insertions(+), 5 deletions(-)

diff --git a/reading-platform-frontend/src/views/teacher/lessons/LessonListView.vue b/reading-platform-frontend/src/views/teacher/lessons/LessonListView.vue
index e74dc9b..bd70954 100644
--- a/reading-platform-frontend/src/views/teacher/lessons/LessonListView.vue
+++ b/reading-platform-frontend/src/views/teacher/lessons/LessonListView.vue
@@ -8,11 +8,11 @@
 
     <!-- 筛选区域 -->
     <div class="filter-section">
-      <a-space :size="16">
+      <div class="filter-row">
         <a-select
           v-model:value="filters.status"
           placeholder="课程状态"
-          style="width: 140px;"
+          class="filter-status"
           allowClear
           @change="loadLessons"
         >
@@ -23,11 +23,11 @@
         </a-select>
         <a-range-picker
           v-model:value="filters.dateRange"
-          style="width: 260px;"
+          class="filter-range"
           @change="loadLessons"
         />
-        <a-button @click="resetFilters">重置</a-button>
-      </a-space>
+        <a-button class="filter-reset" @click="resetFilters">重置</a-button>
+      </div>
     </div>
 
     <!-- 记录列表 -->
@@ -367,6 +367,9 @@ onMounted(() => {
 
 <style scoped lang="scss">
 .lesson-list-view {
+  overflow-x: hidden;
+  min-width: 0;
+
   .page-header {
     margin-bottom: 24px;
 
@@ -391,6 +394,51 @@ onMounted(() => {
     border-radius: 8px;
   }
 
+  .filter-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 12px;
+    min-width: 0;
+  }
+
+  .filter-status {
+    width: 140px;
+    min-width: 0;
+  }
+
+  .filter-range {
+    width: 260px;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .filter-reset {
+    white-space: nowrap;
+  }
+
+  @media (max-width: 768px) {
+    .filter-row {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    .filter-status,
+    .filter-range {
+      width: 100% !important;
+    }
+
+    .filter-reset {
+      width: 100%;
+    }
+
+    /* RangePicker 内部输入避免撑出容器 */
+    :deep(.ant-picker) {
+      width: 100%;
+      max-width: 100%;
+    }
+  }
+
   .lesson-list {
     display: flex;
     flex-direction: column;