refactor(class): 优化班级页面布局与删除功能

- 调整学生查询区域样式，使其占用两行空间
- 移除年级和单元列表中的删除按钮及新增操作相关代码
- 新增删除学生与班级前的确认弹窗提示，防止误操作
- 捕获删除确认框的取消或关闭事件，避免错误提示
- 主动导入 Element Plus 组件库样式文件，保证样式完整
- 修正角色同步代码中 Redis 写入方式，避免二次序列化问题

enlish-service/src/main/java/com/yinlihupo/enlish/service/service/role/RoleServiceImpl.java

@@ -48,6 +48,7 @@ public class RoleServiceImpl implements RoleService {
             List<RoleDO> roleDOs = roleIds.stream().map(roleId2RoleDO::get).toList();
             List<String> user2RoleKeys = roleDOs.stream().map(RoleDO::getRoleKey).toList();
             log.info("将用户 {} 的角色同步到 redis 中, {}", userId, roleKeys);
+            // 不要使用 JsonUtils.toJsonString(user2RoleKeys); 会造成二次序列化
             redisTemplate.opsForValue().set(RoleConstants.buildUserRoleKey(userId), user2RoleKeys);
         });
     }

enlish-vue/src/main.js

@@ -1,5 +1,6 @@
 import '@/assets/main.css'
 import 'nprogress/nprogress.css'
+import 'element-plus/dist/index.css'
 // 导入路由
 import router from '@/router'
 // 导入全局路由守卫

enlish-vue/src/pages/class.vue

@@ -35,7 +35,7 @@
                         </div>
                     </div>
 
-                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 lg:col-span-1 lg:row-span-1">
+                    <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="flex flex-wrap items-center gap-3 mb-4">
                             <el-input v-model="studentName" placeholder="按姓名查询" clearable style="max-width: 220px" />
@@ -96,56 +96,12 @@
                             row-key="id" :current-row-key="selectedGradeId" @row-click="onGradeRowClick">
                             <el-table-column prop="id" label="ID" width="80" />
                             <el-table-column prop="title" label="年级名称" min-width="160" />
-                            <el-table-column label="操作" width="120" fixed="right">
-                                <template #default="{ row }">
-                                    <el-button type="danger" size="small"
-                                        @click.stop="onDeleteGrade(row)">删除</el-button>
-                                </template>
-                            </el-table-column>
                         </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 class="mt-3 flex justify-end">
-                            <el-button type="primary" @click="showAddGradeDialog = true">新增年级</el-button>
-                        </div>
-                        <AddGradeDialog v-model="showAddGradeDialog" @success="fetchGrades" />
-                    </div>
-
-                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6" v-loading="unitLoading">
-                        <div class="text-lg font-semibold mb-4">单元列表</div>
-                        <el-table ref="unitTableRef" :data="units" border class="w-full">
-                            <el-table-column prop="id" label="ID" width="80" />
-                            <el-table-column prop="title" label="单元名称" min-width="200" />
-                            <el-table-column prop="version" label="版本" min-width="120" />
-                            <el-table-column prop="createAt" label="创建时间" min-width="160" />
-                            <el-table-column label="操作" width="120" fixed="right">
-                                <template #default="{ row }">
-                                    <el-button type="danger" size="small" @click.stop="onDeleteUnit(row)">删除</el-button>
-                                </template>
-                            </el-table-column>
-                        </el-table>
-                        <div class="mt-4 flex justify-end">
-                            <el-pagination
-                                background
-                                layout="prev, pager, next, sizes, total"
-                                :total="unitTotalCount"
-                                :page-size="unitPageSize"
-                                :current-page="unitPageNo"
-                                @current-change="handleUnitPageChange"
-                                @size-change="handleUnitSizeChange"
-                            />
-                        </div>
-                        <div class="mt-3 flex justify-end">
-                            <el-button type="primary" :disabled="!selectedGradeId" @click="showAddUnitDialog = true">新增单元</el-button>
-                        </div>
-                        <AddUnitDialog
-                            v-model="showAddUnitDialog"
-                            :default-grade-id="selectedGradeId"
-                            @success="fetchUnits"
-                        />
                     </div>
 
                 </div>
@@ -169,6 +125,7 @@ import LessonPlanDialog from '@/layouts/components/LessonPlanDialog.vue'
 import { getUnitList, deleteUnit } from '@/api/unit'
 import AddUnitDialog from '@/layouts/components/AddUnitDialog.vue'
 import { useRouter } from 'vue-router'
+import { ElMessageBox } from 'element-plus'
 
 const classes = ref([])
 const pageNo = ref(1)
@@ -311,6 +268,11 @@ function onGradeRowClick(row) {
 }
 async function onDeleteStudent(row) {
     try {
+        await ElMessageBox.confirm('确认删除该学生？', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+        })
         await deleteStudent(row.id)
         ElMessage.success('删除成功')
         if (selectedStudentIds.value?.length) {
@@ -319,11 +281,17 @@ async function onDeleteStudent(row) {
         }
         await fetchStudents()
     } catch (e) {
+        if (e === 'cancel' || e === 'close') return
         ElMessage.error('删除失败')
     }
 }
 async function onDeleteClass(row) {
     try {
+        await ElMessageBox.confirm('确认删除该班级？', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+        })
         await deleteClass(row.id)
         ElMessage.success('删除成功')
         if (selectedClassId.value === row.id) {
@@ -333,6 +301,7 @@ async function onDeleteClass(row) {
         }
         await fetchClasses()
     } catch (e) {
+        if (e === 'cancel' || e === 'close') return
         ElMessage.error('删除失败')
     }
 }