From bd0e72d22bb7e1f09de09d80e937b287c9cf578c Mon Sep 17 00:00:00 2001
From: zhonghua <zhonghua>
Date: Wed, 11 Mar 2026 18:27:28 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=88=86=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/school/classes/ClassListView.vue    | 150 +++++++-----------
 1 file changed, 59 insertions(+), 91 deletions(-)

diff --git a/reading-platform-frontend/src/views/school/classes/ClassListView.vue b/reading-platform-frontend/src/views/school/classes/ClassListView.vue
index 10d34aa..cd60868 100644
--- a/reading-platform-frontend/src/views/school/classes/ClassListView.vue
+++ b/reading-platform-frontend/src/views/school/classes/ClassListView.vue
@@ -28,13 +28,8 @@
     <!-- 操作栏 -->
     <div class="action-bar">
       <div class="search-box">
-        <a-input-search
-          v-model:value="searchKeyword"
-          placeholder="搜索班级名称"
-          style="width: 250px;"
-          @search="handleSearch"
-          allow-clear
-        >
+        <a-input-search v-model:value="searchKeyword" placeholder="搜索班级名称" style="width: 250px;" @search="handleSearch"
+          allow-clear>
           <template #prefix>
             <SearchOutlined style="color: #B2BEC3;" />
           </template>
@@ -48,12 +43,7 @@
 
     <!-- 班级卡片网格 -->
     <div class="class-grid" v-if="!loading && classes.length > 0">
-      <div
-        v-for="cls in classes"
-        :key="cls.id"
-        class="class-card"
-        :class="'grade-' + getGradeKey(cls.grade)"
-      >
+      <div v-for="cls in classes" :key="cls.id" class="class-card" :class="'grade-' + getGradeKey(cls.grade)">
         <div class="card-header">
           <div class="class-icon">
             <component :is="getGradeIcon(cls.grade)" class="icon-component" />
@@ -122,11 +112,7 @@
             <EditOutlined />
             编辑
           </a-button>
-          <a-popconfirm
-            title="确定要删除这个班级吗？"
-            :disabled="cls.studentCount > 0"
-            @confirm="handleDelete(cls.id)"
-          >
+          <a-popconfirm title="确定要删除这个班级吗？" :disabled="cls.studentCount > 0" @confirm="handleDelete(cls.id)">
             <a-tooltip v-if="cls.studentCount > 0" title="班级内有学生，无法删除">
               <a-button type="link" size="small" disabled class="disabled-btn">
                 <DeleteOutlined />
@@ -160,21 +146,9 @@
     </div>
 
     <!-- 添加/编辑班级模态框 -->
-    <a-modal
-      v-model:open="modalVisible"
-      :title="isEdit ? modalEditTitle : modalAddTitle"
-      @ok="handleModalOk"
-      @cancel="handleModalCancel"
-      :confirm-loading="submitting"
-      :width="480"
-    >
-      <a-form
-        ref="formRef"
-        :model="formState"
-        :rules="rules"
-        :label-col="{ span: 6 }"
-        :wrapper-col="{ span: 16 }"
-      >
+    <a-modal v-model:open="modalVisible" :title="isEdit ? modalEditTitle : modalAddTitle" @ok="handleModalOk"
+      @cancel="handleModalCancel" :confirm-loading="submitting" :width="480">
+      <a-form ref="formRef" :model="formState" :rules="rules" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
         <a-form-item label="班级名称" name="name">
           <a-input v-model:value="formState.name" placeholder="请输入班级名称">
             <template #prefix>
@@ -205,12 +179,7 @@
           </a-select>
         </a-form-item>
         <a-form-item label="班主任" name="teacherId">
-          <a-select
-            v-model:value="formState.teacherId"
-            placeholder="请选择班主任"
-            :loading="teachersLoading"
-            allow-clear
-          >
+          <a-select v-model:value="formState.teacherId" placeholder="请选择班主任" :loading="teachersLoading" allow-clear>
             <a-select-option v-for="teacher in teachers" :key="teacher.id" :value="teacher.id">
               {{ teacher.name }}
             </a-select-option>
@@ -220,12 +189,7 @@
     </a-modal>
 
     <!-- 班级学生列表模态框 -->
-    <a-modal
-      v-model:open="studentsModalVisible"
-      :title="studentsModalTitle"
-      :footer="null"
-      width="700px"
-    >
+    <a-modal v-model:open="studentsModalVisible" :title="studentsModalTitle" :footer="null" width="700px">
       <div class="students-modal-content">
         <div class="class-info-header">
           <div class="class-emoji">
@@ -244,11 +208,7 @@
         </div>
 
         <div class="students-list" v-if="!studentsLoading && classStudents.length > 0">
-          <div
-            v-for="student in classStudents"
-            :key="student.id"
-            class="student-item"
-          >
+          <div v-for="student in classStudents" :key="student.id" class="student-item">
             <div class="student-avatar" :class="student.gender === '男' ? 'boy' : 'girl'">
               <BoyOutlined v-if="student.gender === '男'" class="student-gender-icon" />
               <GirlOutlined v-else class="student-gender-icon" />
@@ -276,35 +236,22 @@
         </div>
 
         <div class="pagination-wrapper" v-if="studentsPagination.total > studentsPagination.pageSize">
-          <a-pagination
-            v-model:current="studentsPagination.current"
-            v-model:pageSize="studentsPagination.pageSize"
-            :total="studentsPagination.total"
-            :show-total="(total: number) => `共 ${total} 条`"
-            size="small"
-            @change="handleStudentsPageChange"
-          />
+          <a-pagination v-model:current="studentsPagination.current" v-model:pageSize="studentsPagination.pageSize"
+            :total="studentsPagination.total" :show-total="(total: number) => `共 ${total} 条`" size="small"
+            @change="handleStudentsPageChange" />
         </div>
       </div>
     </a-modal>
 
     <!-- 班级教师管理模态框 -->
-    <a-modal
-      v-model:open="teachersModalVisible"
-      :title="`管理 ${currentClass?.name || ''} 教师团队`"
-      :footer="null"
-      width="600px"
-    >
+    <a-modal v-model:open="teachersModalVisible" :title="`管理 ${currentClass?.name || ''} 教师团队`" :footer="null"
+      width="600px">
       <div class="teachers-modal-content">
         <!-- 添加教师表单 -->
         <div class="add-teacher-form">
           <div class="form-row">
-            <a-select
-              v-model:value="teacherFormState.teacherId"
-              placeholder="选择教师"
-              style="width: 150px;"
-              :loading="teachersLoading"
-            >
+            <a-select v-model:value="teacherFormState.teacherId" placeholder="选择教师" style="width: 150px;"
+              :loading="teachersLoading">
               <a-select-option v-for="teacher in teachers" :key="teacher.id" :value="teacher.id">
                 {{ teacher.name }}
               </a-select-option>
@@ -326,20 +273,14 @@
           <div v-for="teacher in classTeachers" :key="teacher.teacherId" class="teacher-item">
             <div class="teacher-info">
               <span class="teacher-name">{{ teacher.teacherName }}</span>
-              <a-select
-                v-model:value="teacher.role"
-                size="small"
-                style="width: 80px; margin-left: 8px;"
-                @change="handleUpdateTeacherRole(teacher)"
-              >
+              <a-select v-model:value="teacher.role" size="small" style="width: 80px; margin-left: 8px;"
+                @change="handleUpdateTeacherRole(teacher)">
                 <a-select-option value="MAIN">主班</a-select-option>
                 <a-select-option value="ASSIST">配班</a-select-option>
                 <a-select-option value="CARE">保育员</a-select-option>
               </a-select>
-              <a-checkbox
-                v-model:checked="teacher.isPrimary"
-                @change="handleUpdateTeacherRole(teacher)"
-              >班主任</a-checkbox>
+              <a-checkbox v-model:checked="teacher.isPrimary"
+                @change="handleUpdateTeacherRole(teacher)">班主任</a-checkbox>
             </div>
             <a-button type="link" danger size="small" @click="handleRemoveTeacher(teacher.teacherId)">
               移除
@@ -509,8 +450,8 @@ const getProgressWidth = (count: number) => {
 const loadClasses = async () => {
   loading.value = true;
   try {
-    const result = await getClasses();
-    let classList = result;
+    const { items } = await getClasses();
+    let classList = items;
     if (searchKeyword.value) {
       classList = classList.filter((cls: ClassInfo) =>
         cls.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
@@ -881,9 +822,17 @@ onMounted(() => {
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
 }
 
-.class-card.grade-small { border-top: 4px solid #43e97b; }
-.class-card.grade-middle { border-top: 4px solid #4facfe; }
-.class-card.grade-big { border-top: 4px solid #FF8C42; }
+.class-card.grade-small {
+  border-top: 4px solid #43e97b;
+}
+
+.class-card.grade-middle {
+  border-top: 4px solid #4facfe;
+}
+
+.class-card.grade-big {
+  border-top: 4px solid #FF8C42;
+}
 
 .class-card .card-header {
   display: flex;
@@ -902,9 +851,17 @@ onMounted(() => {
   justify-content: center;
 }
 
-.class-card.grade-small .class-icon { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
-.class-card.grade-middle .class-icon { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
-.class-card.grade-big .class-icon { background: linear-gradient(135deg, #FF8C42 0%, #FFB347 100%); }
+.class-card.grade-small .class-icon {
+  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
+}
+
+.class-card.grade-middle .class-icon {
+  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+}
+
+.class-card.grade-big .class-icon {
+  background: linear-gradient(135deg, #FF8C42 0%, #FFB347 100%);
+}
 
 .icon-component {
   font-size: 24px;
@@ -932,9 +889,20 @@ onMounted(() => {
   font-weight: 500;
 }
 
-.grade-badge.grade-small { background: #E8F5E9; color: #43A047; }
-.grade-badge.grade-middle { background: #E3F2FD; color: #1976D2; }
-.grade-badge.grade-big { background: #FFF8F0; color: #FF8C42; }
+.grade-badge.grade-small {
+  background: #E8F5E9;
+  color: #43A047;
+}
+
+.grade-badge.grade-middle {
+  background: #E3F2FD;
+  color: #1976D2;
+}
+
+.grade-badge.grade-big {
+  background: #FFF8F0;
+  color: #FF8C42;
+}
 
 .card-body {
   padding: 16px 20px;