feat(grade): 添加年级列表及分页功能

- 前端新增年级列表展示表格和分页组件，同时支持加载状态显示
- 新增 grade.js 接口调用，支持分页查询年级数据
- 后端新增 GradeController 提供分页查询接口 /grade/list
- 实现 GradeService 新增分页查询和总数量统计方法
- 添加 GradeDOMapper 新增分页查询及计数 SQL 语句
- 定义请求与响应VO类用于年级分页查询接口数据传输
- 页面 onMounted 时同时请求班级列表和年级列表数据，提升数据展示完整性

enlish-vue/src/api/grade.js

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

enlish-vue/src/pages/class.vue

@@ -7,24 +7,21 @@
 
             <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 class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 lg:col-span-1 lg:row-span-2">
@@ -32,11 +29,19 @@
                         <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 class="bg-white dark:bg-gray-800 rounded-lg shadow p-6" v-loading="gradeLoading">
+                        <div class="text-lg font-semibold mb-4">年级列表</div>
+                        <el-table :data="grades" border class="w-full">
+                            <el-table-column prop="id" label="ID" width="80" />
+                            <el-table-column prop="title" label="年级名称" min-width="160" />
+                        </el-table>
+                        <div class="mt-4 flex justify-end">
+                            <el-pagination background layout="prev, pager, next, sizes, total" :total="gradeTotalCount"
+                                :page-size="gradePageSize" :current-page="gradePageNo"
+                                @current-change="handleGradePageChange" @size-change="handleGradeSizeChange" />
+                        </div>
                     </div>
-                    
+
                 </div>
             </el-main>
 
@@ -48,12 +53,18 @@
 import Header from '@/layouts/components/Header.vue'
 import { ref, onMounted } from 'vue'
 import { getClassList } from '@/api/class'
+import { getGradeList } from '@/api/grade'
 
 const classes = ref([])
 const pageNo = ref(1)
 const pageSize = ref(10)
 const totalCount = ref(0)
 const loading = ref(false)
+const grades = ref([])
+const gradePageNo = ref(1)
+const gradePageSize = ref(10)
+const gradeTotalCount = ref(0)
+const gradeLoading = ref(false)
 
 async function fetchClasses() {
     loading.value = true
@@ -69,6 +80,20 @@ async function fetchClasses() {
     }
 }
 
+async function fetchGrades() {
+    gradeLoading.value = true
+    try {
+        const res = await getGradeList(gradePageNo.value, gradePageSize.value)
+        const d = res.data
+        grades.value = Array.isArray(d.data) ? d.data : []
+        gradeTotalCount.value = d.totalCount || 0
+        gradePageNo.value = d.pageNo || gradePageNo.value
+        gradePageSize.value = d.pageSize || gradePageSize.value
+    } finally {
+        gradeLoading.value = false
+    }
+}
+
 function handlePageChange(p) {
     pageNo.value = p
     fetchClasses()
@@ -79,7 +104,18 @@ function handleSizeChange(s) {
     fetchClasses()
 }
 
+function handleGradePageChange(p) {
+    gradePageNo.value = p
+    fetchGrades()
+}
+function handleGradeSizeChange(s) {
+    gradePageSize.value = s
+    gradePageNo.value = 1
+    fetchGrades()
+}
+
 onMounted(() => {
     fetchClasses()
+    fetchGrades()
 })
 </script>