From 73b7f10d56ccbf3498313d349d3ac8e9651a6f2d Mon Sep 17 00:00:00 2001
From: zhonghua <zhonghua>
Date: Wed, 4 Mar 2026 14:31:32 +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=E8=AF=BE=E8=A1=A8=E4=B8=8E?=
 =?UTF-8?q?=E7=BB=9F=E8=AE=A1=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/classes/ClassListView.vue   |  44 ++++--
 .../views/teacher/feedback/FeedbackView.vue   |  85 ++++++++++-
 .../views/teacher/schedule/ScheduleView.vue   | 143 ++++++++++++------
 .../src/views/teacher/tasks/TaskListView.vue  |  85 ++++++++++-
 4 files changed, 292 insertions(+), 65 deletions(-)

diff --git a/reading-platform-frontend/src/views/teacher/classes/ClassListView.vue b/reading-platform-frontend/src/views/teacher/classes/ClassListView.vue
index 38f7e32..4a22c8b 100644
--- a/reading-platform-frontend/src/views/teacher/classes/ClassListView.vue
+++ b/reading-platform-frontend/src/views/teacher/classes/ClassListView.vue
@@ -1,27 +1,27 @@
 <template>
-  <div class="min-h-[calc(100vh-120px)] bg-[linear-gradient(180deg,#FFF8F0_0%,#FFFFFF_100%)] p-6 rounded-2xl">
+  <div class="class-list-view min-h-[calc(100vh-120px)] bg-[linear-gradient(180deg,#FFF8F0_0%,#FFFFFF_100%)] p-4 md:p-6 rounded-2xl overflow-x-hidden min-w-0">
     <!-- 页面标题区域 -->
-    <div class="relative bg-[linear-gradient(135deg,#FF8C42_0%,#FFB347_100%)] rounded-2xl py-6 px-8 mb-6 overflow-hidden flex justify-between items-center">
+    <div class="class-list-header relative bg-[linear-gradient(135deg,#FF8C42_0%,#FFB347_100%)] rounded-2xl py-6 px-6 md:px-8 mb-6 overflow-hidden flex flex-wrap justify-between items-center gap-4">
       <div class="absolute top-0 right-0 w-[200px] h-full pointer-events-none">
         <div class="absolute rounded-full opacity-15 bg-white w-[120px] h-[120px] -top-[30px] right-5 c1"></div>
         <div class="absolute rounded-full opacity-15 bg-white w-20 h-20 top-10 right-20 c2"></div>
         <div class="absolute rounded-full opacity-15 bg-white w-10 h-10 bottom-2.5 right-10 c3"></div>
       </div>
-      <div class="flex items-center relative z-1">
+      <div class="header-left flex items-center relative z-1 min-w-0">
         <div class="w-14 h-14 rounded-[14px] flex items-center justify-center text-[26px] mr-4 flex-shrink-0 bg-white/25 text-white icon-wrapper orange"><HomeOutlined /></div>
-        <div class="text-white header-text">
-          <h1 class="text-[28px] font-700 m-0 text-white page-title">我的班级</h1>
+        <div class="text-white header-text min-w-0">
+          <h1 class="text-[22px] md:text-[28px] font-700 m-0 text-white page-title">我的班级</h1>
           <p class="text-sm mt-1 mb-0 opacity-90 text-white page-subtitle">管理您的班级，开启精彩的阅读课堂</p>
         </div>
       </div>
-      <div class="flex items-center gap-5 relative z-1">
-        <div class="text-center text-white stats-item">
-          <span class="block text-[32px] font-700 leading-tight stats-value">{{ classes.length }}</span>
+      <div class="class-list-header-stats flex items-center gap-4 md:gap-5 relative z-1 flex-shrink-0">
+        <div class="text-center text-white stats-item min-w-[4rem]">
+          <span class="block text-[28px] md:text-[32px] font-700 leading-tight stats-value">{{ classes.length }}</span>
           <span class="text-[13px] opacity-85 stats-label">个班级</span>
         </div>
         <div class="w-px h-10 bg-white/30 stats-divider"></div>
-        <div class="text-center text-white stats-item">
-          <span class="block text-[32px] font-700 leading-tight stats-value">{{ totalStudents }}</span>
+        <div class="text-center text-white stats-item min-w-[4rem]">
+          <span class="block text-[28px] md:text-[32px] font-700 leading-tight stats-value">{{ totalStudents }}</span>
           <span class="text-[13px] opacity-85 stats-label">名学生</span>
         </div>
       </div>
@@ -265,7 +265,31 @@ const viewHistory = (cls: ClassInfo) => {
 }
 
 
+/* 标题卡：移动端堆叠，统计区留足间距，整体左对齐 */
 @media (max-width: 768px) {
+  .class-list-header {
+    flex-direction: column;
+    align-items: stretch;
+    text-align: left;
+    gap: 20px;
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+
+  .class-list-header .header-text {
+    text-align: left;
+  }
+
+  .class-list-header .header-left {
+    justify-content: flex-start;
+  }
+
+  .class-list-header-stats {
+    justify-content: flex-start;
+    padding-top: 8px;
+    border-top: 1px solid rgba(255, 255, 255, 0.25);
+  }
+
   .page-header-wrapper {
     flex-direction: column;
     text-align: center;
diff --git a/reading-platform-frontend/src/views/teacher/feedback/FeedbackView.vue b/reading-platform-frontend/src/views/teacher/feedback/FeedbackView.vue
index d8442fc..1a3e29f 100644
--- a/reading-platform-frontend/src/views/teacher/feedback/FeedbackView.vue
+++ b/reading-platform-frontend/src/views/teacher/feedback/FeedbackView.vue
@@ -39,7 +39,7 @@
         <a-input-search
           v-model:value="filters.keyword"
           placeholder="搜索课程名称"
-          style="width: 200px;"
+          class="feedback-search-input"
           @search="handleFilter"
           allow-clear
         />
@@ -350,6 +350,8 @@ onMounted(() => {
 .feedback-view {
   min-height: 100%;
   padding: 0;
+  overflow-x: hidden;
+  min-width: 0;
 }
 
 /* 页面头部 */
@@ -364,12 +366,16 @@ onMounted(() => {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  flex-wrap: wrap;
+  gap: 20px;
+  min-width: 0;
 }
 
 .header-title {
   display: flex;
   align-items: center;
   gap: 16px;
+  min-width: 0;
 }
 
 .title-icon-wrapper {
@@ -382,6 +388,11 @@ onMounted(() => {
   justify-content: center;
   font-size: 32px;
   color: white;
+  flex-shrink: 0;
+}
+
+.title-text {
+  min-width: 0;
 }
 
 .title-text h2 {
@@ -395,15 +406,19 @@ onMounted(() => {
   color: rgba(255, 255, 255, 0.8);
   font-size: 14px;
   margin: 4px 0 0 0;
+  word-break: break-word;
 }
 
 .header-stats {
   display: flex;
   gap: 32px;
+  flex-wrap: wrap;
+  min-width: 0;
 }
 
 .stat-item {
   text-align: center;
+  white-space: nowrap;
 }
 
 .stat-value {
@@ -445,6 +460,74 @@ onMounted(() => {
 .filters {
   display: flex;
   gap: 12px;
+  flex: 1;
+  min-width: 0;
+}
+
+.feedback-search-input {
+  width: 200px;
+  min-width: 0;
+  max-width: 100%;
+}
+
+@media (max-width: 768px) {
+  .page-header {
+    padding: 20px 16px;
+  }
+
+  .header-content {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 20px;
+  }
+
+  .header-title {
+    gap: 12px;
+  }
+
+  .title-icon-wrapper {
+    width: 52px;
+    height: 52px;
+    font-size: 26px;
+  }
+
+  .title-text h2 {
+    font-size: 20px;
+  }
+
+  .title-text p {
+    font-size: 13px;
+  }
+
+  .header-stats {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 12px 16px;
+  }
+
+  .stat-item {
+    min-width: 0;
+  }
+
+  .stat-value {
+    font-size: 22px;
+  }
+
+  .stat-label {
+    font-size: 11px;
+  }
+
+  .action-bar {
+    padding: 12px 16px;
+  }
+
+  .filters {
+    width: 100%;
+  }
+
+  .feedback-search-input {
+    width: 100%;
+  }
 }
 
 /* 反馈卡片网格 */
diff --git a/reading-platform-frontend/src/views/teacher/schedule/ScheduleView.vue b/reading-platform-frontend/src/views/teacher/schedule/ScheduleView.vue
index b4b4e03..afe281b 100644
--- a/reading-platform-frontend/src/views/teacher/schedule/ScheduleView.vue
+++ b/reading-platform-frontend/src/views/teacher/schedule/ScheduleView.vue
@@ -70,53 +70,56 @@
     <!-- 课表 -->
     <div class="timetable-container">
       <a-spin :spinning="loading">
-        <div class="timetable-header">
-          <div
-            v-for="day in weekDays"
-            :key="day.date"
-            class="day-header"
-            :class="{ 'is-today': day.isToday }"
-          >
-            <div class="day-name">{{ day.dayName }}</div>
-            <div class="day-date">{{ day.dateDisplay }}</div>
-          </div>
-        </div>
-
-        <div class="timetable-body">
-          <div class="timetable-grid">
+        <!-- 横向滚动容器：表头与内容同步滚动 -->
+        <div class="timetable-scroll">
+          <div class="timetable-header">
             <div
               v-for="day in weekDays"
               :key="day.date"
-              class="day-column"
+              class="day-header"
               :class="{ 'is-today': day.isToday }"
             >
+              <div class="day-name">{{ day.dayName }}</div>
+              <div class="day-date">{{ day.dateDisplay }}</div>
+            </div>
+          </div>
+
+          <div class="timetable-body">
+            <div class="timetable-grid">
               <div
-                v-for="schedule in day.schedules"
-                :key="schedule.id"
-                class="schedule-card"
-                :class="{
-                  'school-schedule': schedule.source === 'SCHOOL',
-                  'teacher-schedule': schedule.source === 'TEACHER',
-                  'has-lesson': schedule.hasLesson,
-                }"
-                @click="showScheduleDetail(schedule)"
+                v-for="day in weekDays"
+                :key="day.date"
+                class="day-column"
+                :class="{ 'is-today': day.isToday }"
               >
-                <div class="schedule-time">{{ schedule.scheduledTime || '待定' }}</div>
-                <div class="schedule-course">{{ schedule.courseName }}</div>
-                <div class="schedule-class">{{ schedule.className }}</div>
-                <div class="schedule-source">
-                  <a-tag v-if="schedule.source === 'SCHOOL'" color="orange" size="small">学校排课</a-tag>
-                  <a-tag v-else color="purple" size="small">自主预约</a-tag>
+                <div
+                  v-for="schedule in day.schedules"
+                  :key="schedule.id"
+                  class="schedule-card"
+                  :class="{
+                    'school-schedule': schedule.source === 'SCHOOL',
+                    'teacher-schedule': schedule.source === 'TEACHER',
+                    'has-lesson': schedule.hasLesson,
+                  }"
+                  @click="showScheduleDetail(schedule)"
+                >
+                  <div class="schedule-time">{{ schedule.scheduledTime || '待定' }}</div>
+                  <div class="schedule-course">{{ schedule.courseName }}</div>
+                  <div class="schedule-class">{{ schedule.className }}</div>
+                  <div class="schedule-source">
+                    <a-tag v-if="schedule.source === 'SCHOOL'" color="orange" size="small">学校排课</a-tag>
+                    <a-tag v-else color="purple" size="small">自主预约</a-tag>
+                  </div>
+                  <div v-if="schedule.hasLesson" class="lesson-status">
+                    <a-tag :color="getLessonStatusColor(schedule.lessonStatus)" size="small">
+                      {{ getLessonStatusText(schedule.lessonStatus) }}
+                    </a-tag>
+                  </div>
                 </div>
-                <div v-if="schedule.hasLesson" class="lesson-status">
-                  <a-tag :color="getLessonStatusColor(schedule.lessonStatus)" size="small">
-                    {{ getLessonStatusText(schedule.lessonStatus) }}
-                  </a-tag>
+                <div v-if="!day.schedules.length" class="empty-day">
+                  暂无排课
                 </div>
               </div>
-              <div v-if="!day.schedules.length" class="empty-day">
-                暂无排课
-              </div>
             </div>
           </div>
         </div>
@@ -502,6 +505,11 @@ onMounted(() => {
 
 <style scoped lang="scss">
 .teacher-schedule-view {
+  overflow-x: hidden;
+  min-width: 0;
+
+  --day-col-width: 140px;
+
   .page-header {
     display: flex;
     justify-content: space-between;
@@ -561,19 +569,37 @@ onMounted(() => {
     overflow: hidden;
   }
 
+  .timetable-scroll {
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* 细一点的横向滚动条（仅 WebKit） */
+  .timetable-scroll::-webkit-scrollbar {
+    height: 6px;
+  }
+  .timetable-scroll::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.18);
+    border-radius: 6px;
+  }
+  .timetable-scroll::-webkit-scrollbar-thumb:hover {
+    background: rgba(0, 0, 0, 0.28);
+  }
+
   .timetable-header {
-    display: table;
-    width: 100%;
-    table-layout: fixed;
+    display: flex;
+    width: max-content;
+    min-width: calc(var(--day-col-width) * 7);
     background: linear-gradient(135deg, #FF8C42 0%, #E67635 100%);
     color: white;
 
     .day-header {
-      display: table-cell;
+      flex: 0 0 var(--day-col-width);
       padding: 12px 8px;
       text-align: center;
       border-right: 1px solid rgba(255, 255, 255, 0.2);
-      vertical-align: middle;
+      box-sizing: border-box;
 
       &:last-child {
         border-right: none;
@@ -599,17 +625,17 @@ onMounted(() => {
   }
 
   .timetable-grid {
-    display: table;
-    width: 100%;
-    table-layout: fixed;
+    display: flex;
+    width: max-content;
+    min-width: calc(var(--day-col-width) * 7);
 
     .day-column {
-      display: table-cell;
+      flex: 0 0 var(--day-col-width);
       min-height: 300px;
       padding: 8px;
       border-right: 1px solid #e8e8e8;
       background: #fafafa;
-      vertical-align: top;
+      box-sizing: border-box;
 
       &:last-child {
         border-right: none;
@@ -680,5 +706,28 @@ onMounted(() => {
     padding: 20px;
     font-size: 12px;
   }
+
+  @media (max-width: 768px) {
+    --day-col-width: 120px;
+
+    .week-navigation :deep(.ant-space) {
+      width: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+
+    .week-navigation .week-range {
+      margin-left: 0;
+      width: 100%;
+      text-align: right;
+    }
+
+    /* 今日课程：移动端 2 列 */
+    .today-section :deep(.ant-col) {
+      flex: 0 0 50%;
+      max-width: 50%;
+    }
+  }
 }
 </style>
diff --git a/reading-platform-frontend/src/views/teacher/tasks/TaskListView.vue b/reading-platform-frontend/src/views/teacher/tasks/TaskListView.vue
index e3aaf62..36b3d3c 100644
--- a/reading-platform-frontend/src/views/teacher/tasks/TaskListView.vue
+++ b/reading-platform-frontend/src/views/teacher/tasks/TaskListView.vue
@@ -43,11 +43,11 @@
 
     <!-- 筛选区域 -->
     <div class="filter-section">
-      <a-space :size="16">
+      <div class="filter-row">
         <a-select
           v-model:value="filters.status"
           placeholder="任务状态"
-          style="width: 120px;"
+          class="filter-select"
           allowClear
           @change="loadTasks"
         >
@@ -58,7 +58,7 @@
         <a-select
           v-model:value="filters.taskType"
           placeholder="任务类型"
-          style="width: 120px;"
+          class="filter-select"
           allowClear
           @change="loadTasks"
         >
@@ -69,11 +69,11 @@
         <a-input-search
           v-model:value="filters.keyword"
           placeholder="搜索任务标题"
-          style="width: 200px;"
+          class="filter-search"
           @search="loadTasks"
           allow-clear
         />
-      </a-space>
+      </div>
     </div>
 
     <a-spin :spinning="loading">
@@ -758,6 +758,9 @@ onMounted(() => {
 
 <style scoped lang="scss">
 .task-list-view {
+  overflow-x: hidden;
+  min-width: 0;
+
   .page-header {
     display: flex;
     justify-content: space-between;
@@ -783,12 +786,12 @@ onMounted(() => {
   }
 
   .stats-row {
-    display: flex;
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 16px;
     margin-bottom: 24px;
 
     .stat-card {
-      flex: 1;
       background: white;
       border-radius: 12px;
       padding: 20px;
@@ -796,6 +799,7 @@ onMounted(() => {
       align-items: center;
       gap: 16px;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+      min-width: 0;
 
       .stat-icon {
         width: 48px;
@@ -831,6 +835,73 @@ onMounted(() => {
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
   }
 
+  .filter-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 12px;
+    min-width: 0;
+  }
+
+  .filter-select {
+    width: 120px;
+    min-width: 0;
+  }
+
+  .filter-search {
+    width: 200px;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  @media (max-width: 768px) {
+    .page-header {
+      flex-direction: column;
+      gap: 12px;
+      align-items: stretch;
+    }
+
+    .page-header > .ant-btn {
+      width: 100%;
+    }
+
+    .stats-row {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 12px;
+    }
+
+    /* 第三张卡片占满一行，避免被裁切 */
+    .stats-row .stat-card:nth-child(3) {
+      grid-column: 1 / -1;
+    }
+
+    .stats-row .stat-card {
+      padding: 14px;
+      gap: 12px;
+    }
+
+    .stats-row .stat-card .stat-icon {
+      width: 42px;
+      height: 42px;
+      border-radius: 10px;
+      font-size: 22px;
+    }
+
+    .stats-row .stat-card .stat-info .stat-value {
+      font-size: 22px;
+    }
+
+    .filter-row {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    .filter-select,
+    .filter-search {
+      width: 100% !important;
+    }
+  }
+
   .task-list {
     display: flex;
     flex-direction: column;