feat(layout): 为多页面添加侧边栏布局组件

- 在admid页面和class页面包裹el-container，插入Sidebar侧边栏组件
- 在LearningPlan和PlanTTS页面同样新增侧边栏布局
- 重构Header组件样式，采用fluent风格透明卡片和按钮样式
- 增加main.css中panel-shell的样式定义以支持新布局视觉效果
- 优化部分按钮及菜单交互样式，提升整体一致性与视觉体验

enlish-vue/src/assets/main.css

@@ -1,3 +1,19 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer components {
+  .panel-shell {
+    border-radius: 0.75rem;
+    border: 1px solid rgba(255, 255, 255, 0.4);
+    background: rgba(255, 255, 255, 0.6);
+    backdrop-filter: blur(8px);
+    box-shadow:
+      0 4px 6px -1px rgba(0, 0, 0, 0.1),
+      0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  }
+  .dark .panel-shell {
+    border-color: rgba(255, 255, 255, 0.1);
+    background: rgba(55, 65, 81, 0.4);
+  }
+}

enlish-vue/src/layouts/components/Header.vue

@@ -1,41 +1,36 @@
 <template>
     <header>
-        <nav class="bg-white border-gray-200 px-4 lg:px-6 py-2.5 dark:bg-gray-800">
+        <div class="p-2">
-            <div class="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl">
+            <div class="panel-shell">
+                <nav class="fluent-nav px-4 lg:px-6 py-2.5">
+            <div class="flex flex-wrap justify-between items-center">
                 <a href="#" class="flex items-center">
                     <img src="https://flowbite.com/docs/images/logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo" />
-                    <span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
+                    <span class="self-center text-xl font-semibold whitespace-nowrap">Flowbite</span>
                 </a>
                 <div class="flex items-center lg:order-2">
                     <template v-if="userName">
                         <div class="relative" ref="menuRef">
-                            <button
+                            <button @click="menuOpen = !menuOpen"
-                                @click="menuOpen = !menuOpen"
+                                class="fluent-btn font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 flex items-center">
-                                class="text-gray-800 dark:text-white font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 flex items-center">
                                 <span class="mr-2">{{ userName }}</span>
                                 <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                        d="M19 9l-7 7-7-7" />
                                 </svg>
                             </button>
-                            <div
+                            <div v-if="menuOpen" class="fluent-card absolute right-0 mt-2 z-50">
-                                v-if="menuOpen"
+                                <router-link to="/admid" @click="menuOpen = false" class="block px-4 py-2 fluent-link">
-                                class="absolute right-0 mt-2 w-40 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded shadow z-50">
-                                <router-link
-                                    to="/admid"
-                                    @click="menuOpen = false"
-                                    class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
                                     后台
                                 </router-link>
-                                <button
+                                <button @click="handleLogout" class="w-full text-left block px-4 py-2 fluent-link">
-                                    @click="handleLogout"
-                                    class="w-full text-left block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
                                     登出
                                 </button>
                             </div>
                         </div>
                     </template>
                     <button data-collapse-toggle="mobile-menu-2" type="button"
-                        class="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+                        class="inline-flex items-center p-2 ml-1 text-sm rounded-lg lg:hidden fluent-btn"
                         aria-controls="mobile-menu-2" aria-expanded="false">
                         <span class="sr-only">Open main menu</span>
                         <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
@@ -52,34 +47,12 @@
                     </button>
                 </div>
                 <div class="hidden justify-between items-center w-full lg:flex lg:w-auto lg:order-1" id="mobile-menu-2">
-                    <ul class="flex flex-col mt-4 font-medium lg:flex-row lg:space-x-8 lg:mt-0">
+
-                        <li>
-                            <a href="#"
-                                class="block py-2 pr-4 pl-3 text-white rounded bg-primary-700 lg:bg-transparent lg:text-primary-700 lg:p-0 dark:text-white"
-                                aria-current="page">Home</a>
-                        </li>
-                        <li>
-                            <router-link to="/"
-                                class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">
-                                班级
-                            </router-link>
-                        </li>
-                        <li>
-                            <router-link to="/learningplan"
-                                class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">
-                                学案
-                            </router-link>
-                        </li>
-                        <li>
-                            <router-link to="/uploadpng"
-                                class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">
-                                上传图片
-                            </router-link>
-                        </li>
-                    </ul>
                 </div>
             </div>
                 </nav>
+            </div>
+        </div>
         <LoginDialog v-model="showLogin" @success="refreshUser" />
     </header>
 </template>
@@ -131,3 +104,68 @@ onBeforeUnmount(() => {
     document.removeEventListener('click', onDocClick)
 })
 </script>
+<style scoped>
+.fluent-nav {
+    background: transparent;
+    border-bottom: 0;
+    backdrop-filter: none;
+}
+:global(.dark) .fluent-nav {
+    background: transparent;
+    border-bottom: 0;
+}
+.fluent-card {
+    background: rgba(255, 255, 255, 0.6);
+    border: 1px solid rgba(255, 255, 255, 0.4);
+    border-radius: 12px;
+    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
+    backdrop-filter: blur(16px);
+    transition: box-shadow 200ms ease, transform 200ms ease;
+}
+:global(.dark) .fluent-card {
+    background: rgba(55, 65, 81, 0.4);
+    border-color: rgba(148, 163, 184, 0.25);
+}
+.fluent-card:hover {
+    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
+    transform: translateY(-1px);
+}
+.fluent-btn {
+    color: #0f172a;
+    background: rgba(255, 255, 255, 0.6);
+    border: 1px solid rgba(255, 255, 255, 0.4);
+    border-radius: 10px;
+    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
+    transition: background 200ms ease, box-shadow 200ms ease, transform 200ms ease;
+}
+.fluent-btn:hover {
+    background: rgba(255, 255, 255, 0.7);
+    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
+}
+:global(.dark) .fluent-btn {
+    color: #e5e7eb;
+    background: rgba(55, 65, 81, 0.4);
+    border-color: rgba(148, 163, 184, 0.25);
+}
+.fluent-link {
+    color: #2563eb;
+    border-radius: 10px;
+    transition: color 200ms ease, background 200ms ease, box-shadow 200ms ease;
+}
+.fluent-link:hover {
+    color: #1d4ed8;
+    background: rgba(255, 255, 255, 0.35);
+    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.25);
+}
+:global(.dark) .fluent-link:hover {
+    background: rgba(55, 65, 81, 0.35);
+    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.25);
+}
+.fluent-card {
+    overflow: visible;
+}
+:global(.el-header) {
+    overflow: visible;
+    padding: 0;
+}
+</style>

enlish-vue/src/layouts/components/Sidebar.vue

@@ -0,0 +1,50 @@
+<template>
+    <div class="h-full p-2">
+        <div class="h-full panel-shell">
+            <el-menu router :default-active="activePath" class="h-full rounded-xl bg-transparent" :collapse="false">
+                <el-menu-item index="/">
+                    <span>班级列表</span>
+                </el-menu-item>
+                <el-menu-item index="/learningplan">
+                    <span>学案</span>
+                </el-menu-item>
+                <el-menu-item index="/uploadpng">
+                    <span>上传图片</span>
+                </el-menu-item>
+            </el-menu>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import router from '@/router'
+const route = useRoute()
+const activePath = computed(() => route.path)
+const allRoutes = router.getRoutes()
+const menuItems = computed(() => {
+    return allRoutes
+        .filter(r => r.meta && r.meta.title)
+        .filter(r => !r.path.includes(':'))
+        .filter(r => r.path !== '/login')
+        .map(r => ({ path: r.path, title: r.meta.title }))
+        .sort((a, b) => a.title.localeCompare(b.title, 'zh-CN'))
+})
+</script>
+
+<style scoped>
+/* Fluent 2 气质的轻盈质感：柔和玻璃、圆角、细描边 */
+.el-menu {
+    --el-menu-bg-color: transparent;
+    --el-menu-hover-bg-color: rgba(255, 255, 255, 0.35);
+    --el-menu-active-color: #2563eb;
+}
+.el-menu-item {
+    border-radius: 10px;
+    transition: all 0.2s ease;
+}
+.el-menu-item:hover {
+    backdrop-filter: saturate(1.2);
+}
+</style>

enlish-vue/src/pages/LearningPlan.vue

@@ -5,6 +5,12 @@
                 <Header></Header>
             </el-header>
 
+            <el-container>
+
+                <el-aside width="200px" class="pt-4">
+                    <Sidebar />
+                </el-aside>
+
                 <el-main class="p-4">
                     <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                         <div class="text-lg font-semibold mb-4">学案查询</div>
@@ -22,27 +28,21 @@
                                             <el-table-column prop="title" label="标题" min-width="280" />
                                             <el-table-column label="状态" width="120">
                                                 <template #default="{ row: plan }">
-                                                <el-tag :type="plan.isFinished === 1 ? 'success' : 'info'" effect="plain">
+                                                    <el-tag :type="plan.isFinished === 1 ? 'success' : 'info'"
+                                                        effect="plain">
                                                         {{ plan.isFinished === 1 ? '已完成' : '未完成' }}
                                                     </el-tag>
                                                 </template>
                                             </el-table-column>
                                             <el-table-column label="操作" width="200" fixed="right">
                                                 <template #default="{ row: plan }">
-                                                <el-button
+                                                    <el-button type="primary" size="small"
-                                                    type="primary"
-                                                    size="small"
                                                         :loading="downloadingIds.includes(plan.id)"
-                                                    @click="onDownload(plan)"
+                                                        @click="onDownload(plan)">下载</el-button>
-                                                >下载</el-button>
+                                                    <el-button class="ml-2" type="success" size="small"
-                                                <el-button
-                                                    class="ml-2"
-                                                    type="success"
-                                                    size="small"
                                                         :disabled="plan.isFinished === 1"
                                                         :loading="finishingIds.includes(plan.id)"
-                                                    @click="onFinish(row.id, plan.id, plan)"
+                                                        @click="onFinish(row.id, plan.id, plan)">完成</el-button>
-                                                >完成</el-button>
                                                 </template>
                                             </el-table-column>
                                         </el-table>
@@ -60,6 +60,8 @@
                         </div>
                     </div>
                 </el-main>
+            </el-container>
+
 
         </el-container>
     </div>
@@ -71,6 +73,7 @@ import { ref, onMounted } from 'vue'
 import { findStudentLessonPlans, finishLessonPlan } from '@/api/studentLessonPlans'
 import { downloadLessonPlan } from '@/api/plan'
 import { showMessage } from '@/composables/util'
+import Sidebar from '@/layouts/components/Sidebar.vue'
 
 const rows = ref([])
 const loading = ref(false)

enlish-vue/src/pages/PlanTTS.vue

@@ -4,6 +4,12 @@
 			<el-header>
 				<Header></Header>
 			</el-header>
+
+			<el-container>
+				<el-aside width="200px" class="pt-4">
+					<Sidebar />
+				</el-aside>
+
 				<el-main class="p-4">
 					<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
 						<div class="text-lg font-semibold mb-4">TTS</div>
@@ -49,6 +55,7 @@
 					</div>
 				</el-main>
 			</el-container>
+		</el-container>
 	</div>
 </template>
 
@@ -59,7 +66,7 @@ import { useRoute } from 'vue-router'
 import { getLessonPlanWords } from '@/api/plan'
 import { synthesizeOpenAITTS } from '@/api/tts'
 import { showMessage } from '@/composables/util'
-
+import Sidebar from '@/layouts/components/Sidebar.vue'
 const route = useRoute()
 const planIdInput = ref(route.query.planId ? String(route.query.planId) : '')
 const words = ref([])

enlish-vue/src/pages/admid/admid.vue

@@ -5,6 +5,7 @@
 				<Header></Header>
 			</el-header>
 
+			<el-container>
 				<el-main class="p-4">
 					<el-card>
 						<div class="flex items-center mb-4">
@@ -19,15 +20,9 @@
 							<el-table-column prop="roleName" label="角色" />
 						</el-table>
 						<div class="mt-4 flex justify-end">
-						<el-pagination
+							<el-pagination background :current-page="page" :page-size="pageSize" :total="totalCount"
-							background
+								layout="prev, pager, next, sizes, total" @current-change="onPageChange"
-							:current-page="page"
+								@size-change="onSizeChange" />
-							:page-size="pageSize"
-							:total="totalCount"
-							layout="prev, pager, next, sizes, total"
-							@current-change="onPageChange"
-							@size-change="onSizeChange"
-						/>
 						</div>
 					</el-card>
 
@@ -45,7 +40,8 @@
 								<el-input-number v-model="inviteForm.expire" :min="1" :max="3650" />
 							</el-form-item>
 							<el-form-item>
-							<el-button type="primary" :loading="inviteLoading" @click="submitInvite">生成邀请码</el-button>
+								<el-button type="primary" :loading="inviteLoading"
+									@click="submitInvite">生成邀请码</el-button>
 								<el-button class="ml-2" @click="resetInvite">重置</el-button>
 							</el-form-item>
 						</el-form>
@@ -72,6 +68,7 @@
 						</template>
 					</el-dialog>
 				</el-main>
+			</el-container>
 
 		</el-container>
 	</div>
@@ -82,6 +79,7 @@ import Header from '@/layouts/components/Header.vue'
 import { ref, reactive, onMounted } from 'vue'
 import { getUserList, createUser, createInvitationCode } from '@/api/admin'
 import { showMessage } from '@/composables/util.js'
+import Sidebar from '@/layouts/components/Sidebar.vue'
 
 const loading = ref(false)
 const list = ref([])

enlish-vue/src/pages/class.vue

@@ -5,26 +5,33 @@
                 <Header></Header>
             </el-header>
 
+            <el-container>
+                <el-aside width="200px" class="pt-4">
+                    <Sidebar></Sidebar>
+                </el-aside>
+
                 <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 ref="classTableRef" :data="classes" border class="w-full" v-loading="loading" highlight-current-row
+                                <el-table ref="classTableRef" :data="classes" border class="w-full" v-loading="loading"
-                                row-key="id" :current-row-key="selectedClassId" @row-click="onClassRowClick">
+                                    highlight-current-row row-key="id" :current-row-key="selectedClassId"
+                                    @row-click="onClassRowClick">
                                     <el-table-column prop="title" label="班级名称" min-width="120" />
                                     <el-table-column prop="gradeName" label="年级" min-width="120" />
                                     <el-table-column label="操作" width="120" fixed="right">
                                         <template #default="{ row }">
-                                        <el-button type="danger" size="small" @click.stop="onDeleteClass(row)">删除</el-button>
+                                            <el-button type="danger" size="small"
+                                                @click.stop="onDeleteClass(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="totalCount"
+                                    <el-pagination background layout="prev, pager, next, sizes, total"
-                                    :page-size="pageSize" :current-page="pageNo" @current-change="handlePageChange"
+                                        :total="totalCount" :page-size="pageSize" :current-page="pageNo"
-                                    @size-change="handleSizeChange" />
+                                        @current-change="handlePageChange" @size-change="handleSizeChange" />
                                 </div>
                                 <div class="mt-3 flex justify-end">
                                     <el-button type="primary" @click="showAddClassDialog = true">新增班级</el-button>
@@ -37,7 +44,8 @@
                         <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" />
+                                <el-input v-model="studentName" placeholder="按姓名查询" clearable
+                                    style="max-width: 220px" />
                                 <el-tag v-if="selectedClassId" effect="plain">班级：{{ selectedClassTitle }} (ID: {{
                                     selectedClassId }})</el-tag>
                                 <el-tag v-if="selectedGradeId" effect="plain">年级：{{ selectedGradeTitle }} (ID: {{
@@ -63,12 +71,14 @@
                                     <template #default="{ row }">
                                         <template v-if="generatingPercents[row.id] !== undefined">
                                             <div class="flex items-center gap-2">
-                                            <el-progress :percentage="generatingPercents[row.id]" :stroke-width="8" />
+                                                <el-progress :percentage="generatingPercents[row.id]"
+                                                    :stroke-width="8" />
                                             </div>
                                         </template>
                                         <template v-else>
                                             <div class="flex items-center gap-2">
-                                            <el-button type="primary" size="small" @click="planStudentId = row.id; showPlanListDialog = true">查看学案</el-button>
+                                                <el-button type="primary" size="small"
+                                                    @click="planStudentId = row.id; showPlanListDialog = true">查看学案</el-button>
                                             </div>
                                         </template>
                                     </template>
@@ -76,37 +86,31 @@
                                 <el-table-column label="操作" width="240" fixed="right">
                                     <template #default="{ row }">
                                         <!-- 学情分析 -->
-                                    <el-button type="info" size="small" @click.stop="onShowAnalysis(row)">学情分析</el-button>
+                                        <el-button type="info" size="small"
-                                    <el-button type="primary" size="small" @click.stop="onViewStudent(row)">详情</el-button>
+                                            @click.stop="onShowAnalysis(row)">学情分析</el-button>
-                                    <el-button type="danger" size="small" @click.stop="onDeleteStudent(row)">删除</el-button>
+                                        <el-button type="primary" size="small"
+                                            @click.stop="onViewStudent(row)">详情</el-button>
+                                        <el-button type="danger" size="small"
+                                            @click.stop="onDeleteStudent(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="studentTotalCount" :page-size="studentPageSize" :current-page="studentPageNo"
+                                    :total="studentTotalCount" :page-size="studentPageSize"
-                                @current-change="handleStudentPageChange" @size-change="handleStudentSizeChange" />
+                                    :current-page="studentPageNo" @current-change="handleStudentPageChange"
+                                    @size-change="handleStudentSizeChange" />
                             </div>
                             <ExamGenerateDialog v-model="showGenerateDialog" :student-ids="selectedStudentIds"
                                 :default-grade-id="selectedGradeId" />
                             <div class="mt-3 flex justify-end">
                                 <el-button type="primary" @click="showAddStudentDialog = true">新增学生</el-button>
                             </div>
-                        <AddStudentDialog
+                            <AddStudentDialog v-model="showAddStudentDialog" :default-class-id="selectedClassId"
-                            v-model="showAddStudentDialog"
+                                :default-grade-id="selectedGradeId" @success="fetchStudents" />
-                            :default-class-id="selectedClassId"
+                            <LessonPlanDialog v-model="showLessonPlanDialog" :student-id="selectedStudentIds[0]"
-                            :default-grade-id="selectedGradeId"
+                                @success="onLessonPlanGenerateSuccess" />
-                            @success="fetchStudents"
+                            <StudentPlanListDialog v-model="showPlanListDialog" :student-id="planStudentId" />
-                        />
-                        <LessonPlanDialog
-                            v-model="showLessonPlanDialog"
-                            :student-id="selectedStudentIds[0]"
-                            @success="onLessonPlanGenerateSuccess"
-                        />
-                        <StudentPlanListDialog
-                            v-model="showPlanListDialog"
-                            :student-id="planStudentId"
-                        />
                             <el-dialog v-model="showAnalysisDialog" title="学情分析" width="60%">
                                 <StudyAnalysis v-if="showAnalysisDialog" :student-id="analysisStudentId" />
                             </el-dialog>
@@ -119,14 +123,15 @@
                                 <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"
+                                <el-pagination background layout="prev, pager, next, sizes, total"
-                                :page-size="gradePageSize" :current-page="gradePageNo"
+                                    :total="gradeTotalCount" :page-size="gradePageSize" :current-page="gradePageNo"
                                     @current-change="handleGradePageChange" @size-change="handleGradeSizeChange" />
                             </div>
                         </div>
 
                     </div>
                 </el-main>
+            </el-container>
 
         </el-container>
     </div>
@@ -134,6 +139,7 @@
 
 <script setup>
 import Header from '@/layouts/components/Header.vue'
+import Sidebar from '@/layouts/components/Sidebar.vue'
 import { ref, onMounted, onUnmounted } from 'vue'
 import { getClassList, deleteClass } from '@/api/class'
 import { getGradeList, deleteGrade } from '@/api/grade'

enlish-vue/src/pages/student.vue

@@ -5,6 +5,10 @@
                 <Header></Header>
             </el-header>
 
+            <el-container>
+                <el-aside width="200px" class="pt-4">
+                    <Sidebar />
+                </el-aside>
                 <el-main class="p-4">
                     <div class="grid grid-cols-1 lg:grid-cols-2 gap-6" v-loading="loading">
                         <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
@@ -15,7 +19,8 @@
                                     <el-descriptions-item label="姓名">{{ detail.name }}</el-descriptions-item>
                                     <el-descriptions-item label="班级">{{ detail.className }}</el-descriptions-item>
                                     <el-descriptions-item label="年级">{{ detail.gradeName }}</el-descriptions-item>
-                                <el-descriptions-item label="学生实际水平年级">{{ detail.actualGrade }}</el-descriptions-item>
+                                    <el-descriptions-item label="学生实际水平年级">{{ detail.actualGrade
+                                        }}</el-descriptions-item>
                                 </el-descriptions>
                             </template>
                             <template v-else>
@@ -27,9 +32,12 @@
                             <div class="text-lg font-semibold mb-4">学生词汇统计</div>
                             <template v-if="wordStat">
                                 <el-descriptions :column="1" border>
-                                <el-descriptions-item label="已掌握">{{ wordStat.masteredWordCount }}</el-descriptions-item>
+                                    <el-descriptions-item label="已掌握">{{ wordStat.masteredWordCount
-                                <el-descriptions-item label="未掌握">{{ wordStat.unmasteredWordCount }}</el-descriptions-item>
+                                        }}</el-descriptions-item>
-                                <el-descriptions-item label="待复习">{{ wordStat.pendingReviewWordCount }}</el-descriptions-item>
+                                    <el-descriptions-item label="未掌握">{{ wordStat.unmasteredWordCount
+                                        }}</el-descriptions-item>
+                                    <el-descriptions-item label="待复习">{{ wordStat.pendingReviewWordCount
+                                        }}</el-descriptions-item>
                                 </el-descriptions>
                             </template>
                             <template v-else>
@@ -52,7 +60,7 @@
                         <StudyAnalysis :student-id="route.params.id" />
                     </div>
                 </el-main>
-
+            </el-container>
         </el-container>
     </div>
 </template>
@@ -68,6 +76,7 @@ import ExamHistoryChart from '@/layouts/components/student/ExamHistoryChart.vue'
 import PlanHistoryChart from '@/layouts/components/student/PlanHistoryChart.vue'
 import WordMasteryHeatmap from '@/layouts/components/student/WordMasteryHeatmap.vue'
 import StudyAnalysis from '@/layouts/components/student/StudyAnalysis.vue'
+import Sidebar from '@/layouts/components/Sidebar.vue'
 
 const loading = ref(false)
 const detail = ref(null)

enlish-vue/src/pages/uploadpng.vue

@@ -5,15 +5,15 @@
                 <Header></Header>
             </el-header>
 
+            <el-container>
+                <el-aside width="200px" class="pt-4">
+                    <Sidebar />
+                </el-aside>
                 <el-main class="p-4">
                     <div class="grid grid-cols-1 lg:grid-cols-2 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-upload
+                            <el-upload :show-file-list="false" :http-request="doUpload" accept="image/*">
-                            :show-file-list="false"
-                            :http-request="doUpload"
-                            accept="image/*"
-                        >
                                 <el-button type="primary">选择图片并上传</el-button>
                             </el-upload>
                         </div>
@@ -21,23 +21,18 @@
                             <div class="text-lg font-semibold mb-4">结果集</div>
                             <el-form :inline="true" class="mb-4">
                                 <el-form-item label="班级">
-                                <el-select v-model="classId" placeholder="选择班级" clearable filterable @change="onClassChange" style="min-width: 220px">
+                                    <el-select v-model="classId" placeholder="选择班级" clearable filterable
-                                    <el-option
+                                        @change="onClassChange" style="min-width: 220px">
-                                        v-for="item in classOptions"
+                                        <el-option v-for="item in classOptions" :key="item.id"
-                                        :key="item.id"
                                             :label="`${item.title}${item.gradeName ? '（' + item.gradeName + '）' : ''}`"
-                                        :value="item.id"
+                                            :value="item.id" />
-                                    />
                                     </el-select>
                                 </el-form-item>
                                 <el-form-item label="年级">
-                                <el-select v-model="gradeId" placeholder="选择年级" clearable filterable style="min-width: 220px">
+                                    <el-select v-model="gradeId" placeholder="选择年级" clearable filterable
-                                    <el-option
+                                        style="min-width: 220px">
-                                        v-for="g in gradeOptions"
+                                        <el-option v-for="g in gradeOptions" :key="g.id" :label="g.title"
-                                        :key="g.id"
+                                            :value="g.id" />
-                                        :label="g.title"
-                                        :value="g.id"
-                                    />
                                     </el-select>
                                 </el-form-item>
                                 <el-form-item label="学生姓名">
@@ -48,13 +43,8 @@
                                     <el-button @click="handleReset">重置</el-button>
                                 </el-form-item>
                             </el-form>
-                        <el-table
+                            <el-table :data="list" border class="w-full" v-loading="loading"
-                            :data="list"
+                                @row-click="handleRowClick">
-                            border
-                            class="w-full"
-                            v-loading="loading"
-                            @row-click="handleRowClick"
-                        >
                                 <el-table-column prop="studentName" label="学生姓名" min-width="70" />
                                 <el-table-column prop="examWordsTitle" label="试题名称" min-width="100" />
                                 <el-table-column prop="correctWordCount" label="正确词数" width="110" />
@@ -74,21 +64,15 @@
                                 <el-table-column prop="msg" label="判卷结算" min-width="160" />
                             </el-table>
                             <div class="mt-4 flex justify-end">
-                            <el-pagination
+                                <el-pagination background layout="prev, pager, next, sizes, total" :total="totalCount"
-                                background
+                                    :page-size="pageSize" :current-page="pageNo" @current-change="handlePageChange"
-                                layout="prev, pager, next, sizes, total"
+                                    @size-change="handleSizeChange" />
-                                :total="totalCount"
-                                :page-size="pageSize"
-                                :current-page="pageNo"
-                                @current-change="handlePageChange"
-                                @size-change="handleSizeChange"
-                            />
                             </div>
                         </div>
                     </div>
                     <ExamWordsDetailCard v-model="showDetail" :id="selectedId" />
                 </el-main>
-
+            </el-container>
         </el-container>
     </div>
 </template>
@@ -101,6 +85,7 @@ import { ref, onMounted } from 'vue'
 import { uploadExamWordsPng, getExamWordsResult } from '@/api/exam'
 import { getClassList } from '@/api/class'
 import { getGradeList } from '@/api/grade'
+import Sidebar from '@/layouts/components/Sidebar.vue'
 
 const list = ref([])
 const pageNo = ref(1)
@@ -196,5 +181,4 @@ onMounted(() => {
 })
 </script>
 
-<style scoped>
+<style scoped></style>
-</style>