feat(class): 实现班级列表分页查询功能

- 新增班级后端分页接口及相关服务实现
- 实现班级与年级关联数据查询及映射
- 新增分页请求和响应VO类支持前后端数据传输
- 修改前端class.vue，增加班级列表分页展示组件
- 增加前端分页逻辑及状态管理，支持切换页码和页面大小
- 创建GradeClassDO实体及对应Mapper实现关联查询
- 优化数据库Mapper XML，增加分页查询及计数SQL语句
- 调整MyBatis配置生成grade_class表实体类和Mapper接口

enlish-vue/src/api/class.js

@@ -0,0 +1,8 @@
+import axios from "@/axios";
+
+export function getClassList(page, size) {
+    return axios.post('/class/list', {
+        page: page,
+        pageSize: size
+    })
+}

enlish-vue/src/pages/class.vue

@@ -5,15 +5,38 @@
                 <Header></Header>
             </el-header>
 
-            <el-main>
-                <div class="flex">
-                    <div>
-                        班级
+            <el-main class="p-4">
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                    <div class="lg:col-span-1 flex flex-col gap-6">
+                        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
+                            <div class="text-lg font-semibold mb-4">班级列表</div>
+
+                            <el-table :data="classes" border class="w-full" v-loading="loading">
+                                <el-table-column prop="id" label="ID" width="80" />
+                                <el-table-column prop="title" label="班级名称" min-width="120" />
+                                <el-table-column prop="gradeName" label="年级" min-width="120" />
+                            </el-table>
+
+                            <div class="mt-4 flex justify-end">
+                                <el-pagination background layout="prev, pager, next, sizes, total" :total="totalCount"
+                                    :page-size="pageSize" :current-page="pageNo" @current-change="handlePageChange"
+                                    @size-change="handleSizeChange" />
+                            </div>
+
+                        </div>
+
                     </div>
 
-                    <div>
-                        hellow
+                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 lg:col-span-1 lg:row-span-2">
+                        <div class="text-lg font-semibold mb-4">右侧卡片</div>
+                        <div class="text-gray-500">内容待完善</div>
                     </div>
+
+                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
+                        <div class="text-lg font-semibold mb-4">左下卡片</div>
+                        <div class="text-gray-500">内容待完善</div>
+                    </div>
+                    
                 </div>
             </el-main>
 
@@ -23,4 +46,40 @@
 
 <script setup>
 import Header from '@/layouts/components/Header.vue'
-</script>
+import { ref, onMounted } from 'vue'
+import { getClassList } from '@/api/class'
+
+const classes = ref([])
+const pageNo = ref(1)
+const pageSize = ref(10)
+const totalCount = ref(0)
+const loading = ref(false)
+
+async function fetchClasses() {
+    loading.value = true
+    try {
+        const res = await getClassList(pageNo.value, pageSize.value)
+        const d = res.data
+        classes.value = Array.isArray(d.data) ? d.data : []
+        totalCount.value = d.totalCount || 0
+        pageNo.value = d.pageNo || pageNo.value
+        pageSize.value = d.pageSize || pageSize.value
+    } finally {
+        loading.value = false
+    }
+}
+
+function handlePageChange(p) {
+    pageNo.value = p
+    fetchClasses()
+}
+function handleSizeChange(s) {
+    pageSize.value = s
+    pageNo.value = 1
+    fetchClasses()
+}
+
+onMounted(() => {
+    fetchClasses()
+})
+</script>