From eeeb48d0480444a90f584cd06c54d2e63cb0efae Mon Sep 17 00:00:00 2001
From: lbw <1192299468@qq.com>
Date: Wed, 17 Dec 2025 17:34:41 +0800
Subject: [PATCH] =?UTF-8?q?feat(student):=20=E6=B7=BB=E5=8A=A0=E5=AD=A6?=
 =?UTF-8?q?=E7=94=9F=E8=AF=A6=E6=83=85=E9=A1=B5=E5=8F=8A=E7=9B=B8=E5=85=B3?=
 =?UTF-8?q?=E8=B7=AF=E7=94=B1=E5=92=8C=E8=B7=B3=E8=BD=AC=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在 class.vue 中增加“详情”按钮，可跳转至对应学生详情页
- 使用 vue-router 的 useRouter 实现页面跳转功能
- 添加 /student/:id 路由，绑定学生详情组件 student.vue
- 新增 student.vue 组件，展示学生详细信息
- 精简 Header.vue, 移除多余导航链接，优化界面展示
---
 enlish-vue/src/layouts/components/Header.vue | 12 -----
 enlish-vue/src/pages/class.vue               |  8 ++-
 enlish-vue/src/pages/student.vue             | 55 ++++++++++++++++++++
 enlish-vue/src/router/index.js               |  8 +++
 4 files changed, 70 insertions(+), 13 deletions(-)
 create mode 100644 enlish-vue/src/pages/student.vue

diff --git a/enlish-vue/src/layouts/components/Header.vue b/enlish-vue/src/layouts/components/Header.vue
index 7b7733d..27a7a44 100644
--- a/enlish-vue/src/layouts/components/Header.vue
+++ b/enlish-vue/src/layouts/components/Header.vue
@@ -51,18 +51,6 @@
                                 学案
                             </router-link>
                         </li>
-                        <li>
-                            <a href="#"
-                                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">
-                                Features
-                            </a>
-                        </li>
-                        <li>
-                            <a href="#"
-                                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">
-                                Team
-                            </a>
-                        </li>
                         <li>
                             <router-link
                                 to="/uploadpng"
diff --git a/enlish-vue/src/pages/class.vue b/enlish-vue/src/pages/class.vue
index 58e47ba..cf275e5 100644
--- a/enlish-vue/src/pages/class.vue
+++ b/enlish-vue/src/pages/class.vue
@@ -61,8 +61,9 @@
                             <el-table-column prop="name" label="姓名" min-width="120" />
                             <el-table-column prop="classId" label="班级ID" width="100" />
                             <el-table-column prop="gradeId" label="年级ID" width="100" />
-                            <el-table-column label="操作" width="120" fixed="right">
+                            <el-table-column label="操作" width="180" fixed="right">
                                 <template #default="{ row }">
+                                    <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>
@@ -167,6 +168,7 @@ import AddStudentDialog from '@/layouts/components/AddStudentDialog.vue'
 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'
 
 const classes = ref([])
 const pageNo = ref(1)
@@ -207,6 +209,7 @@ const unitTotalCount = ref(0)
 const unitLoading = ref(false)
 const unitTableRef = ref(null)
 const showAddUnitDialog = ref(false)
+const router = useRouter()
 
 async function fetchClasses() {
     loading.value = true
@@ -289,6 +292,9 @@ function handleStudentSizeChange(s) {
 function onStudentSelectionChange(rows) {
     selectedStudentIds.value = rows.map(r => r.id)
 }
+function onViewStudent(row) {
+    router.push(`/student/${row.id}`)
+}
 function onClassRowClick(row) {
     selectedClassId.value = row.id
     selectedClassTitle.value = row.title
diff --git a/enlish-vue/src/pages/student.vue b/enlish-vue/src/pages/student.vue
new file mode 100644
index 0000000..72ce05d
--- /dev/null
+++ b/enlish-vue/src/pages/student.vue
@@ -0,0 +1,55 @@
+<template>
+    <div class="common-layout">
+        <el-container>
+            <el-header>
+                <Header></Header>
+            </el-header>
+
+            <el-main class="p-4">
+                <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6" v-loading="loading">
+                    <div class="text-lg font-semibold mb-4">学生详情</div>
+                    <template v-if="detail">
+                        <el-descriptions :column="1" border>
+                            <el-descriptions-item label="ID">{{ detail.id }}</el-descriptions-item>
+                            <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>
+                    </template>
+                    <template v-else>
+                        <el-empty description="暂无数据" />
+                    </template>
+                </div>
+            </el-main>
+
+        </el-container>
+    </div>
+</template>
+
+<script setup>
+import Header from '@/layouts/components/Header.vue'
+import { ref, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { getStudentDetail } from '@/api/student'
+
+const loading = ref(false)
+const detail = ref(null)
+const route = useRoute()
+
+async function fetchDetail() {
+    const id = route.params.id
+    if (!id) return
+    loading.value = true
+    try {
+        const res = await getStudentDetail(id)
+        const d = res.data
+        detail.value = d?.data || null
+    } finally {
+        loading.value = false
+    }
+}
+
+onMounted(() => {
+    fetchDetail()
+})
+</script>
diff --git a/enlish-vue/src/router/index.js b/enlish-vue/src/router/index.js
index 1215653..6a39d5f 100644
--- a/enlish-vue/src/router/index.js
+++ b/enlish-vue/src/router/index.js
@@ -3,6 +3,7 @@ import Uploadpng from '@/pages/uploadpng.vue'
 import LearningPlan from '@/pages/LearningPlan.vue'
 import Class from '@/pages/class.vue'
 import { createRouter, createWebHashHistory } from 'vue-router'
+import Student from '@/pages/student.vue'
 
 // 统一在这里声明所有路由
 const routes = [
@@ -26,6 +27,13 @@ const routes = [
         meta: { // meta 信息
             title: '学案' // 页面标题
         }
+    },
+    {
+        path: '/student/:id', // 路由地址
+        component: Student, // 对应组件
+        meta: { // meta 信息
+            title: '学生详情' // 页面标题
+        }
     }
 ]