diff --git a/src/router/index.ts b/src/router/index.ts
index c142670..3d82d34 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -67,6 +67,8 @@ import ExamLibrary from '@/views/teacher/ExamPages/ExamLibrary.vue'
 import MarkingCenter from '@/views/teacher/ExamPages/MarkingCenter.vue'
 import AddExam from '@/views/teacher/ExamPages/AddExam.vue'
 import AddQuestion from '@/views/teacher/ExamPages/AddQuestion.vue'
+import StudentList from '@/views/teacher/ExamPages/StudentList.vue'
+import GradingPage from '@/views/teacher/ExamPages/GradingPage.vue'
 
 import ChapterEditor from '@/views/teacher/course/ChapterEditor.vue'
 
@@ -289,8 +291,29 @@ const routes: RouteRecordRaw[] = [
           {
             path: 'marking-center',
             name: 'MarkingCenter',
-            component: MarkingCenter,
-            meta: { title: '阅卷中心' }
+            component: ExamManagement,
+            meta: { title: '阅卷中心' },
+            redirect: '/teacher/exam-management/marking-center/list',
+            children: [
+              {
+                path: 'list',
+                name: 'MarkingList',
+                component: MarkingCenter,
+                meta: { title: '试卷列表' }
+              },
+              {
+                path: 'student-list/:paperId',
+                name: 'StudentList',
+                component: StudentList,
+                meta: { title: '阅卷页面' }
+              },
+              {
+                path: 'grading/:examId/:studentId',
+                name: 'GradingPage',
+                component: GradingPage,
+                meta: { title: '批阅试卷' }
+              }
+            ]
           },
           {
             path: 'add',
@@ -298,6 +321,12 @@ const routes: RouteRecordRaw[] = [
             component: AddExam,
             meta: { title: '添加试卷' }
           },
+          {
+            path: 'preview',
+            name: 'ExamPreview',
+            component: () => import('../views/teacher/ExamPages/ExamPreview.vue'),
+            meta: { title: '试卷预览' }
+          },
           {
             path: 'add-question/:id?',
             name: 'AddQuestionPage',
diff --git a/src/views/teacher/AdminDashboard.vue b/src/views/teacher/AdminDashboard.vue
index 62b49c1..e700f0a 100644
--- a/src/views/teacher/AdminDashboard.vue
+++ b/src/views/teacher/AdminDashboard.vue
@@ -45,7 +45,7 @@
               :class="{ active: activeSubNavItem === 'exam-library' }" @click="setActiveSubNavItem('exam-library')">
               <span>试卷管理</span>
             </router-link>
-            <router-link to="/teacher/exam-management/marking-center" class="submenu-item"
+            <router-link to="/teacher/exam-management/marking-center/list" class="submenu-item"
               :class="{ active: activeSubNavItem === 'marking-center' }" @click="setActiveSubNavItem('marking-center')">
               <span>阅卷中心</span>
             </router-link>
@@ -429,11 +429,10 @@ const updateActiveNavItem = () => {
   } else if (path.includes('exam-management')) {
     activeNavItem.value = 4; // 考试管理
     examMenuExpanded.value = true;
-
-    // 获取路由的最后一层路径（不包含/）
-    const pathSegments = path.split('/');
-    const lastSegment = pathSegments[pathSegments.length - 1];
-    activeSubNavItem.value = lastSegment || '';
+    
+    const arr = ['question-management', 'exam-library', 'marking-center'];
+    const found = arr.find(item => path.includes(item));
+    activeSubNavItem.value = found || '';
   }
 }
 
diff --git a/src/views/teacher/ExamPages/AddExam.vue b/src/views/teacher/ExamPages/AddExam.vue
index 98c4913..83e58ab 100644
--- a/src/views/teacher/ExamPages/AddExam.vue
+++ b/src/views/teacher/ExamPages/AddExam.vue
@@ -17,6 +17,14 @@
                         </template>
                     </n-button>
                     <h1>添加试卷</h1>
+                    <span v-if="isAutoSaved" class="auto-save-indicator">
+                        <n-icon size="14" color="#52c41a">
+                            <svg viewBox="0 0 24 24" fill="currentColor">
+                                <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                            </svg>
+                        </n-icon>
+                        已自动保存
+                    </span>
                 </div>
             </div>
             <n-card size="small">
@@ -55,7 +63,7 @@
             <template v-for="(item, index) in examForm.questions" :key="index">
                 <n-card size="small">
                     <div class="group">
-                        <n-row>第{{ index + 1 }}题：</n-row>
+                        <n-row>第{{ index + 1 }}大题：</n-row>
                         <div class="questionRow">
                             <n-input class="input-title" v-model:value="item.title" placeholder="请输入题目名称" />
                             <n-button strong quaternary @click="deleteBigQuestion(index)">
@@ -119,7 +127,7 @@
                             class="sub-question-item">
                             <!-- 小题标题栏 -->
                             <div class="sub-question-header">
-                                <span class="sub-question-number">*{{ index + 1 }}.{{ subIndex + 1 }} {{
+                                <span class="sub-question-number">*{{ subIndex + 1 }} {{
                                     getQuestionTypeName(subQuestion.type) }}</span>
                             </div>
 
@@ -422,7 +430,7 @@
                                 </template>
                                 试卷设置
                             </n-button>
-                            <n-button type="primary" ghost size="large">
+                            <n-button type="primary" ghost size="large" @click="previewExam">
                                 预览试卷
                             </n-button>
                         </n-space>
@@ -467,7 +475,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, reactive, ref } from 'vue';
+import { computed, reactive, ref, onMounted, onUnmounted, watch } from 'vue';
 import { createDiscreteApi } from 'naive-ui';
 import { useRouter } from 'vue-router';
 import { AddCircle, SettingsOutline, TrashOutline, ChevronUpSharp, BookSharp, ArrowBackOutline } from '@vicons/ionicons5'
@@ -483,7 +491,32 @@ const router = useRouter()
 
 // 返回上一个页面
 const goBack = () => {
-    router.back()
+    // 检查是否有未保存的内容
+    const hasContent = examForm.title.trim() || 
+                       examForm.questions.some(q => q.subQuestions.length > 0) ||
+                       examForm.description.trim()
+
+    if (hasContent) {
+        dialog.warning({
+            title: '确认返回',
+            content: '返回将清空当前编辑的试卷内容，确定要返回吗？',
+            positiveText: '确定返回',
+            negativeText: '继续编辑',
+            onPositiveClick: () => {
+                // 清空 sessionStorage 中的试卷数据
+                sessionStorage.removeItem('examPreviewData')
+                // 返回上一个页面
+                router.back()
+            },
+            onNegativeClick: () => {
+                // 用户选择继续编辑，不做任何操作
+            }
+        })
+    } else {
+        // 没有编辑内容，直接返回
+        sessionStorage.removeItem('examPreviewData')
+        router.back()
+    }
 }
 
 // 题型枚举
@@ -642,6 +675,7 @@ const addQuestion = (index: number) => {
                 { id: '4', content: '选项D', isCorrect: false }
             ];
             newSubQuestion.correctAnswer = '';
+            newSubQuestion.explanation = '';
             break;
 
         case QuestionType.MULTIPLE_CHOICE:
@@ -652,24 +686,30 @@ const addQuestion = (index: number) => {
                 { id: '4', content: '选项D', isCorrect: false }
             ];
             newSubQuestion.correctAnswer = [];
+            newSubQuestion.explanation = '';
             break;
 
         case QuestionType.TRUE_FALSE:
             newSubQuestion.trueFalseAnswer = undefined; // 初始状态不选择任何选项
+            newSubQuestion.explanation = '';
             break;
 
         case QuestionType.FILL_BLANK:
             newSubQuestion.fillBlanks = [
                 { id: '1', content: '', position: 1 }
             ];
+            newSubQuestion.explanation = '';
             break;
 
         case QuestionType.SHORT_ANSWER:
             newSubQuestion.textAnswer = '';
+            newSubQuestion.explanation = '';
             break;
 
         case QuestionType.COMPOSITE:
             newSubQuestion.subQuestions = [];
+            newSubQuestion.explanation = '';
+            break;
             break;
     }
 
@@ -1135,6 +1175,46 @@ const saveExam = () => {
     });
 }
 
+// 预览试卷
+const previewExam = () => {
+    // 先保存当前编辑状态到 sessionStorage，无论验证是否通过
+    const examData = {
+        ...examForm,
+        previewTime: new Date().toISOString()
+    };
+    sessionStorage.setItem('examPreviewData', JSON.stringify(examData));
+
+    // 验证数据
+    if (!examForm.title.trim()) {
+        dialog.warning({
+            title: '输入提示',
+            content: '请输入试卷标题',
+            positiveText: '确定'
+        });
+        return;
+    }
+
+    let hasQuestions = false;
+    for (const bigQuestion of examForm.questions) {
+        if (bigQuestion.subQuestions.length > 0) {
+            hasQuestions = true;
+            break;
+        }
+    }
+
+    if (!hasQuestions) {
+        dialog.warning({
+            title: '输入提示',
+            content: '请至少添加一道题目再进行预览',
+            positiveText: '确定'
+        });
+        return;
+    }
+
+    // 跳转到预览页面
+    router.push('/teacher/exam-management/preview');
+}
+
 // 复合题相关方法
 const addCompositeSubQuestion = (bigQuestionIndex: number, subQuestionIndex: number) => {
     const subQuestion = examForm.questions[bigQuestionIndex].subQuestions[subQuestionIndex];
@@ -1156,6 +1236,7 @@ const addCompositeSubQuestion = (bigQuestionIndex: number, subQuestionIndex: num
             { id: '4', content: '选项D', isCorrect: false }
         ],
         correctAnswer: '',
+        explanation: '这是复合题子题的答案解析示例。',
         createTime: new Date().toISOString()
     };
 
@@ -1357,6 +1438,77 @@ const previewSubQuestion = (bigQuestionIndex: number, subQuestionIndex: number)
     console.log('预览题目:', subQuestion);
     // 这里可以实现题目预览功能，比如打开一个模态框显示题目
 }
+
+// 恢复试卷数据
+const restoreExamData = () => {
+    const storedData = sessionStorage.getItem('examPreviewData');
+    if (storedData) {
+        try {
+            const parsedData = JSON.parse(storedData);
+            
+            // 恢复试卷基本信息
+            examForm.title = parsedData.title || '';
+            examForm.type = parsedData.type || 1;
+            examForm.description = parsedData.description || '';
+            examForm.totalScore = parsedData.totalScore || 0;
+            examForm.duration = parsedData.duration || 60;
+            examForm.passScore = parsedData.passScore || 60;
+            examForm.instructions = parsedData.instructions || '';
+            examForm.useAIGrading = parsedData.useAIGrading || false;
+            
+            // 恢复试卷题目
+            if (parsedData.questions && Array.isArray(parsedData.questions)) {
+                examForm.questions = parsedData.questions;
+            }
+            
+            console.log('试卷数据已恢复:', examForm);
+        } catch (error) {
+            console.error('恢复试卷数据失败:', error);
+        }
+    }
+}
+
+// 页面挂载时尝试恢复数据
+onMounted(() => {
+    restoreExamData();
+});
+
+// 页面卸载时清理定时器
+onUnmounted(() => {
+    if (autoSaveTimer) {
+        clearTimeout(autoSaveTimer);
+    }
+});
+
+// 监听试卷数据变化，自动保存到 sessionStorage
+watch(
+    () => examForm,
+    (newValue) => {
+        // 防抖处理，避免频繁保存
+        isAutoSaved.value = false; // 数据变化时标记为未保存
+        clearTimeout(autoSaveTimer);
+        autoSaveTimer = setTimeout(() => {
+            const examData = {
+                ...newValue,
+                lastModified: new Date().toISOString()
+            };
+            sessionStorage.setItem('examPreviewData', JSON.stringify(examData));
+            isAutoSaved.value = true; // 保存完成后标记为已保存
+            
+            // 3秒后隐藏保存提示
+            setTimeout(() => {
+                isAutoSaved.value = false;
+            }, 3000);
+        }, 1000); // 1秒后保存
+    },
+    { deep: true }
+);
+
+// 自动保存定时器
+let autoSaveTimer: NodeJS.Timeout;
+
+// 自动保存状态指示
+const isAutoSaved = ref(false);
 </script>
 
 <style scoped>
@@ -1386,6 +1538,29 @@ const previewSubQuestion = (bigQuestionIndex: number, subQuestionIndex: number)
     color: #333;
 }
 
+.auto-save-indicator {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 12px;
+    color: #52c41a;
+    padding: 2px 8px;
+    background: rgba(82, 196, 26, 0.1);
+    border-radius: 12px;
+    animation: fadeIn 0.3s ease-in-out;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(-4px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
 .back-button {
     color: #666;
     transition: all 0.3s ease;
diff --git a/src/views/teacher/ExamPages/ExamLibrary.vue b/src/views/teacher/ExamPages/ExamLibrary.vue
index a18296a..08a49f2 100644
--- a/src/views/teacher/ExamPages/ExamLibrary.vue
+++ b/src/views/teacher/ExamPages/ExamLibrary.vue
@@ -168,11 +168,12 @@ const paginationConfig = computed(() => ({
     pageSizes: [10, 20, 50, 100],
     showSizePicker: true,
     showQuickJumper: true,
-    prefix: (info: { startIndex: number; endIndex: number; page: number; pageSize: number; pageCount: number; itemCount?: number }) => {
+    goto: ()=>{
+        return '跳转'
+    },
+    prefix: (info: { itemCount?: number }) => {
         const itemCount = info.itemCount || 0;
-        const start = (currentPage.value - 1) * pageSize.value + 1;
-        const end = Math.min(currentPage.value * pageSize.value, itemCount);
-        return `显示 ${start}-${end} 条，共 ${itemCount} 条`;
+        return `共 ${itemCount} 条`;
     },
     onUpdatePage: (page: number) => {
         currentPage.value = page;
diff --git a/src/views/teacher/ExamPages/ExamPreview.vue b/src/views/teacher/ExamPages/ExamPreview.vue
new file mode 100644
index 0000000..977eb93
--- /dev/null
+++ b/src/views/teacher/ExamPages/ExamPreview.vue
@@ -0,0 +1,704 @@
+<template>
+    <div class="exam-preview-container">
+        <!-- 左侧时间和题目导航 -->
+        <div class="exam-sidebar">
+            <div class="exam-title">
+                <n-button quaternary circle size="large" @click="goBack" class="back-button">
+                    <template #icon>
+                        <n-icon>
+                            <ArrowBackOutline />
+                        </n-icon>
+                    </template>
+                </n-button>
+                <h1 class="exam-title">{{ examData?.examName || '试卷预览' }}</h1>
+            </div>
+            <n-divider />
+            <div class="time-section">
+                <div class="time-label">剩余时间</div>
+                <div class="time-display">{{ formatTime(examData?.duration * 60 || 3600) }}</div>
+                <div class="time-units">
+                    <span>时</span>
+                    <span>分</span>
+                    <span>秒</span>
+                </div>
+            </div>
+
+            <div class="question-nav">
+                <div class="nav-title">答题卡</div>
+                <div class="nav-grid">
+                    <div v-for="(_, index) in allQuestions" :key="index" class="nav-item"
+                        :class="{ 'answered': false }">
+                        {{ index + 1 }}
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 右侧主要内容区域 -->
+        <div class="exam-main">
+            <div class="header-content">
+                <div class="exam-info">
+                    <div class="exam-meta">
+                        <span>总分：{{ examData?.totalScore || 0 }}分</span>
+                        <span>题目数量：{{ totalQuestions }}题</span>
+                        <span>考试时长：{{ examData?.duration || 0 }}分钟</span>
+                    </div>
+                </div>
+            </div>
+
+            <div class="exam-content" v-if="examData">
+                <!-- 大题循环 -->
+                <div v-for="(bigQuestion, bigIndex) in examData.questions" :key="bigQuestion.id" class="big-question">
+                    <div class="big-question-header">
+                        <span class="question-desc">{{ bigQuestion.title }}</span>
+                        <span class="question-count">共{{ bigQuestion.subQuestions.length }}题</span>
+                    </div>
+
+                    <!-- 小题循环 -->
+                    <div v-for="(subQuestion, subIndex) in bigQuestion.subQuestions" :key="subQuestion.id"
+                        class="sub-question">
+                        <div class="question-header">
+                            <span class="question-number">第{{ getQuestionNumber(bigIndex, subIndex) }}题 {{
+                                getQuestionTypeName(subQuestion.type) }}</span>
+                            <span class="question-score">{{ subQuestion.score }}分</span>
+                        </div>
+
+                        <div class="question-title">{{ subQuestion.title }}</div>
+
+                        <!-- 单选题 -->
+                        <div v-if="subQuestion.type === 'single_choice'" class="question-content">
+                            <div class="options">
+                                <div v-for="(option, optIndex) in subQuestion.options" :key="option.id"
+                                    class="option-item" :class="{ 'correct-option': option.isCorrect }">
+                                    <span class="option-label">{{ String.fromCharCode(65 + optIndex) }}</span>
+                                    <span class="option-content">{{ option.content }}</span>
+                                    <span v-if="option.isCorrect" class="correct-mark">✓</span>
+                                </div>
+                            </div>
+                            <!-- 答案解析 -->
+                            <div class="answer-analysis">
+                                <div class="correct-answer">
+                                    <span class="label">正确答案：</span>
+                                    <span class="answer">{{ getCorrectAnswerText(subQuestion) }}</span>
+                                </div>
+                                <div v-if="subQuestion.explanation" class="explanation">
+                                    <span class="label">答案解析：</span>
+                                    <p>{{ subQuestion.explanation }}</p>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- 多选题 -->
+                        <div v-if="subQuestion.type === 'multiple_choice'" class="question-content">
+                            <div class="options">
+                                <div v-for="(option, optIndex) in subQuestion.options" :key="option.id"
+                                    class="option-item" :class="{ 'correct-option': option.isCorrect }">
+                                    <span class="option-label">{{ String.fromCharCode(65 + optIndex) }}</span>
+                                    <span class="option-content">{{ option.content }}</span>
+                                    <span v-if="option.isCorrect" class="correct-mark">✓</span>
+                                </div>
+                            </div>
+                            <!-- 答案解析 -->
+                            <div class="answer-analysis">
+                                <div class="correct-answer">
+                                    <span class="label">正确答案：</span>
+                                    <span class="answer">{{ getCorrectAnswerText(subQuestion) }}</span>
+                                </div>
+                                <div v-if="subQuestion.explanation" class="explanation">
+                                    <span class="label">答案解析：</span>
+                                    <p>{{ subQuestion.explanation }}</p>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- 判断题 -->
+                        <div v-if="subQuestion.type === 'true_false'" class="question-content">
+                            <div class="true-false-options">
+                                <div class="option-item"
+                                    :class="{ 'correct-option': subQuestion.trueFalseAnswer === true }">
+                                    <span class="option-label">A</span>
+                                    <span class="option-content">正确</span>
+                                    <span v-if="subQuestion.trueFalseAnswer === true" class="correct-mark">✓</span>
+                                </div>
+                                <div class="option-item"
+                                    :class="{ 'correct-option': subQuestion.trueFalseAnswer === false }">
+                                    <span class="option-label">B</span>
+                                    <span class="option-content">错误</span>
+                                    <span v-if="subQuestion.trueFalseAnswer === false" class="correct-mark">✓</span>
+                                </div>
+                            </div>
+                            <!-- 答案解析 -->
+                            <div class="answer-analysis">
+                                <div class="correct-answer">
+                                    <span class="label">正确答案：</span>
+                                    <span class="answer">{{ subQuestion.trueFalseAnswer ? 'A 正确' : 'B 错误' }}</span>
+                                </div>
+                                <div v-if="subQuestion.explanation" class="explanation">
+                                    <span class="label">答案解析：</span>
+                                    <p>{{ subQuestion.explanation }}</p>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- 填空题 -->
+                        <div v-if="subQuestion.type === 'fill_blank'" class="question-content">
+                            <div class="fill-blanks">
+                                <div v-for="blank in subQuestion.fillBlanks" :key="blank.id" class="blank-item">
+                                    <span>第{{ blank.position }}空：</span>
+                                    <div class="blank-answer">{{ blank.content || '未设置' }}</div>
+                                </div>
+                            </div>
+                            <!-- 答案解析 -->
+                            <div class="answer-analysis">
+                                <div class="correct-answer">
+                                    <span class="label">正确答案：</span>
+                                    <div class="answer">
+                                        <div v-for="blank in subQuestion.fillBlanks" :key="blank.id">
+                                            第{{ blank.position }}空：{{ blank.content || '未设置' }}
+                                        </div>
+                                    </div>
+                                </div>
+                                <div v-if="subQuestion.explanation" class="explanation">
+                                    <span class="label">答案解析：</span>
+                                    <p>{{ subQuestion.explanation }}</p>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- 简答题 -->
+                        <div v-if="subQuestion.type === 'short_answer'" class="question-content">
+                            <div class="answer-area">
+                                <div class="answer-text">{{ subQuestion.textAnswer || '未设置参考答案' }}</div>
+                            </div>
+                            <!-- 答案解析 -->
+                            <div class="answer-analysis">
+                                <div class="correct-answer">
+                                    <span class="label">参考答案：</span>
+                                    <p class="answer">{{ subQuestion.textAnswer || '未设置参考答案' }}</p>
+                                </div>
+                                <div v-if="subQuestion.explanation" class="explanation">
+                                    <span class="label">答案解析：</span>
+                                    <p>{{ subQuestion.explanation }}</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div v-else class="no-data">
+                <n-empty description="没有找到试卷数据">
+                    <template #extra>
+                        <n-button @click="goBack">返回</n-button>
+                    </template>
+                </n-empty>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { NButton, NEmpty } from 'naive-ui'
+import { ArrowBackOutline } from '@vicons/ionicons5'
+
+
+const router = useRouter()
+const examData = ref<any>(null)
+
+// 计算所有题目数量和列表
+const allQuestions = computed(() => {
+    if (!examData.value) return []
+    const questions: any[] = []
+    examData.value.questions.forEach((bigQ: any) => {
+        bigQ.subQuestions.forEach((subQ: any) => {
+            if (subQ.type === 'composite') {
+                subQ.subQuestions?.forEach((compSubQ: any) => {
+                    questions.push(compSubQ)
+                })
+            } else {
+                questions.push(subQ)
+            }
+        })
+    })
+    return questions
+})
+
+const totalQuestions = computed(() => {
+    return allQuestions.value.length
+})
+
+// 时间格式化函数
+const formatTime = (seconds: number) => {
+    const hours = Math.floor(seconds / 3600)
+    const minutes = Math.floor((seconds % 3600) / 60)
+    const secs = seconds % 60
+    return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
+}
+
+// 获取题型名称
+const getQuestionTypeName = (type: string) => {
+    const typeMap: Record<string, string> = {
+        'single_choice': '单选题',
+        'multiple_choice': '多选题',
+        'true_false': '判断题',
+        'fill_blank': '填空题',
+        'short_answer': '简答题',
+        'composite': '复合题'
+    }
+    return typeMap[type] || '未知题型'
+}
+
+// 获取题目编号
+const getQuestionNumber = (bigIndex: number, subIndex: number) => {
+    let number = 1
+    for (let i = 0; i < bigIndex; i++) {
+        number += examData.value.questions[i].subQuestions.length
+    }
+    return number + subIndex
+}
+
+// 获取正确答案文本
+const getCorrectAnswerText = (question: any) => {
+    if (question.type === 'single_choice') {
+        const correctOption = question.options?.find((opt: any) => opt.isCorrect)
+        if (correctOption) {
+            const index = question.options.findIndex((opt: any) => opt.isCorrect)
+            return `${String.fromCharCode(65 + index)}`
+        }
+        return '未设置正确答案'
+    } else if (question.type === 'multiple_choice') {
+        const correctOptions = question.options?.filter((opt: any) => opt.isCorrect)
+        if (correctOptions?.length > 0) {
+            return correctOptions.map((opt: any) => {
+                const optIndex = question.options.findIndex((o: any) => o.id === opt.id)
+                return `${String.fromCharCode(65 + optIndex)}`
+            }).join('、')
+        }
+        return '未设置正确答案'
+    }
+    return ''
+}
+
+const goBack = () => {
+    router.back()
+}
+
+onMounted(() => {
+    // 从 sessionStorage 获取试卷数据
+    const savedData = sessionStorage.getItem('examPreviewData')
+    if (savedData) {
+        try {
+            examData.value = JSON.parse(savedData)
+        } catch (error) {
+            console.error('解析试卷数据失败:', error)
+        }
+    }
+})
+</script>
+
+<style scoped>
+.exam-preview-container {
+    display: flex;
+    min-height: 100vh;
+    background: #f8f9fa;
+}
+
+/* 左侧边栏样式 */
+.exam-sidebar {
+    width: 280px;
+    background: white;
+    padding: 10px;
+    border-right: 1px solid #e8e8e8;
+    overflow-y: auto;
+}
+
+.exam-title {
+    display: flex;
+    align-items: center;
+    font-size: 24px;
+    color: #333;
+    font-weight: bold;
+}
+
+.time-section {
+    background: #f0f9ff;
+    padding: 20px;
+    border-radius: 8px;
+    margin-bottom: 20px;
+    text-align: center;
+}
+
+.time-label {
+    font-size: 14px;
+    color: #666;
+    margin-bottom: 10px;
+}
+
+.time-display {
+    font-size: 28px;
+    font-weight: bold;
+    color: #1890ff;
+    font-family: 'Courier New', monospace;
+    margin-bottom: 8px;
+}
+
+.time-units {
+    display: flex;
+    justify-content: space-around;
+    font-size: 12px;
+    color: #999;
+}
+
+.question-nav {
+    background: white;
+}
+
+.nav-title {
+    font-size: 16px;
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 15px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #e8e8e8;
+}
+
+.nav-grid {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    gap: 8px;
+    margin-bottom: 20px;
+}
+
+.nav-item {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    font-size: 12px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.nav-item.answered {
+    background: #1890ff;
+    color: white;
+    border-color: #1890ff;
+}
+
+.nav-legend {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    font-size: 12px;
+    color: #666;
+}
+
+.legend-item {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+.legend-color {
+    width: 12px;
+    height: 12px;
+    border-radius: 2px;
+}
+
+.legend-color.answered {
+    background: #1890ff;
+}
+
+/* 右侧主要内容区域 */
+.exam-main {
+    flex: 1;
+    padding: 0 20px;
+}
+
+
+.header-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+}
+
+.exam-info {
+    flex: 1;
+}
+
+.exam-meta {
+    display: flex;
+    gap: 24px;
+    color: #666;
+    font-size: 14px;
+    margin-bottom: 16px;
+    justify-content: flex-end
+}
+
+.preview-note {
+    margin-top: 16px;
+}
+
+.header-actions {
+    display: flex;
+    gap: 12px;
+}
+
+.exam-content {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.big-question {
+    background: white;
+    border-radius: 8px;
+    padding: 0;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+}
+
+.big-question-header {
+    padding: 15px 20px;
+    border-bottom: 1px solid #e8e8e8;
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+
+.question-desc {
+    color: #1890ff;
+    font-weight: bold;
+    font-size: 19px;
+}
+
+.question-count {
+    color: #666;
+    font-size: 14px;
+}
+
+.sub-question {
+    padding: 20px;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.sub-question:last-child {
+    border-bottom: none;
+}
+
+.question-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
+}
+
+.question-number {
+    font-size: 16px;
+    font-weight: bold;
+    color: #333;
+}
+
+.question-score {
+    background: #f0f9ff;
+    color: #1890ff;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: bold;
+}
+
+.question-title {
+    font-size: 15px;
+    color: #333;
+    line-height: 1.6;
+    margin-bottom: 20px;
+}
+
+.question-content {
+    margin-left: 0;
+}
+
+.options {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    margin-bottom: 20px;
+}
+
+.option-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px;
+    background-color: #F5F8FB;
+    border-radius: 6px;
+    transition: all 0.3s ease;
+    position: relative;
+}
+
+.option-item.correct-option {
+    background: #f6ffed;
+    border-color: #52c41a;
+}
+
+.option-label {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border: 1px solid #d9d9d9;
+    border-radius: 50%;
+    font-size: 12px;
+    font-weight: bold;
+    color: #666;
+    flex-shrink: 0;
+}
+
+.correct-option .option-label {
+    background: #52c41a;
+    color: white;
+    border-color: #52c41a;
+}
+
+.option-content {
+    flex: 1;
+    font-size: 14px;
+    color: #333;
+    line-height: 1.5;
+}
+
+.correct-mark {
+    color: #52c41a;
+    font-size: 16px;
+    font-weight: bold;
+}
+
+.true-false-options {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    margin-bottom: 20px;
+}
+
+.fill-blanks {
+    margin-bottom: 20px;
+}
+
+.blank-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 10px;
+}
+
+.blank-answer {
+    background: #f0f9ff;
+    border: 1px solid #1890ff;
+    padding: 8px 12px;
+    border-radius: 4px;
+    min-width: 100px;
+    color: #1890ff;
+    font-weight: bold;
+}
+
+.answer-area {
+    margin-bottom: 20px;
+}
+
+.answer-text {
+    background: #f8f9fa;
+    border: 1px solid #e8e8e8;
+    padding: 15px;
+    border-radius: 6px;
+    min-height: 80px;
+    color: #333;
+    line-height: 1.6;
+}
+
+/* 答案解析样式 */
+.answer-analysis {
+    background: #fafbfc;
+    border: 1px solid #e1e4e8;
+    border-radius: 6px;
+    padding: 16px;
+    margin-top: 15px;
+}
+
+.correct-answer {
+    margin-bottom: 12px;
+}
+
+.correct-answer .label {
+    font-weight: bold;
+    color: #52c41a;
+    margin-right: 8px;
+}
+
+.correct-answer .answer {
+    color: #333;
+    font-weight: 500;
+}
+
+.explanation .label {
+    font-weight: bold;
+    color: #1890ff;
+    margin-right: 8px;
+}
+
+.explanation p {
+    margin: 4px 0 0 0;
+    color: #666;
+    line-height: 1.6;
+}
+
+.no-data {
+    background: white;
+    border-radius: 8px;
+    padding: 60px;
+    text-align: center;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+    .exam-sidebar {
+        width: 240px;
+    }
+
+    .exam-main {
+        margin-left: 240px;
+    }
+}
+
+@media (max-width: 768px) {
+    .exam-preview-container {
+        flex-direction: column;
+    }
+
+    .exam-sidebar {
+        position: relative;
+        width: 100%;
+        height: auto;
+    }
+
+    .exam-main {
+        margin-left: 0;
+    }
+
+    .nav-grid {
+        grid-template-columns: repeat(8, 1fr);
+    }
+
+    .header-content {
+        flex-direction: column;
+        gap: 16px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/teacher/ExamPages/GradingPage.vue b/src/views/teacher/ExamPages/GradingPage.vue
new file mode 100644
index 0000000..cfc9a62
--- /dev/null
+++ b/src/views/teacher/ExamPages/GradingPage.vue
@@ -0,0 +1,1070 @@
+<template>
+    <div class="grading-container">
+        <!-- 左侧面板 -->
+        <div class="left-panel">
+            <!-- 头部信息 -->
+            <div class="header-info card">
+                <div class="header-top">
+                    <n-button quaternary circle size="large" @click="goBack" class="back-button">
+                        <template #icon>
+                            <n-icon>
+                                <ArrowBackOutline />
+                            </n-icon>
+                        </template>
+                    </n-button>
+                </div>
+
+                <!-- 学生信息卡片 -->
+                <div class="student-card">
+                    <div class="score-stats">
+                        <div class="stat-group">
+                            <div class="stat-item">
+                                <span class="stat-label">学员姓名</span>
+                                <span class="stat-value">{{ studentInfo.name }}</span>
+                            </div>
+                            <div class="stat-item">
+                                <span class="stat-label">考试总成绩</span>
+                                <span class="stat-value primary">{{ currentScore }}</span>
+                            </div>
+                            <div class="stat-item">
+                                <span class="stat-label">答对题目</span>
+                                <span class="stat-value">{{ correctCount }}/{{ totalQuestions }}</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="exam-tag stat-item">
+                        <n-checkbox v-model:checked="showOnlyWrong" size="small">仅看错题</n-checkbox>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 答题卡 -->
+            <div class="answer-sheet card">
+                <div class="question-title">
+                    <h4>答题卡</h4>
+                    <div>{{ answeredCount }}/{{ totalQuestions }}</div>
+                </div>
+                <div class="question-stats">
+                    <span></span>
+                    <span class="score">{{ currentScore }}/{{ totalScore }}</span>
+                </div>
+
+                <!-- 题目类型分组 -->
+                <div class="question-groups">
+                    <div v-for="group in questionGroups" :key="group.type" class="question-group">
+                        <h5>{{ group.title }}</h5>
+                        <div class="question-numbers">
+                            <div v-for="question in group.questions" :key="question.id" class="question-number" :class="{
+                                'active': currentQuestionId === question.id,
+                                'correct': question.isCorrect === true,
+                                'incorrect': question.isCorrect === false,
+                                'ungraded': question.isCorrect === null
+                            }" @click="selectQuestion(question.id)">
+                                {{ question.number }}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="submit-section">
+                    <div class="submit-tip">
+                        <!-- <div class="tip-box active"></div> -->
+                        <div class="submit-item">
+                            <div class="tip-box correct"></div>正确
+                        </div>
+                        <div class="submit-item">
+                            <div class="tip-box incorrect"></div>错误
+                        </div>
+                        <div class="submit-item">
+                            <div class="tip-box ungraded"></div>未答
+                        </div>
+                    </div>
+                    <n-button type="primary" size="large" block @click="submitGrading">
+                        提交批阅
+                    </n-button>
+                </div>
+            </div>
+        </div>
+
+        <!-- 右侧内容区 -->
+        <div class="right-panel card">
+            <div class="question-content">
+                <!-- 题目列表 -->
+                <div class="questions-list">
+                    <div v-for="question in filteredQuestions" :key="question.id" :id="`question-${question.id}`"
+                        class="question-item" :class="{ 'active': currentQuestionId === question.id }">
+                        <!-- 题目标题 -->
+                        <div class="question-header">
+                            <h3>第{{ question.number }}题【{{ question.type }}】</h3>
+                            <div class="question-score">
+                                <span>{{ question.score }}分</span>
+                            </div>
+                        </div>
+
+                        <!-- 题目内容 -->
+                        <div class="question-body">
+                            <div class="question-text" v-html="question.content"></div>
+                            <div class="question-cont">
+                                <div class="question-cont-left">
+                                    <!-- 选择题选项 -->
+                                    <div v-if="question.type === '单选题' || question.type === '多选题'"
+                                        class="question-options">
+                                        <div v-for="option in question.options" :key="option.key" class="option-item"
+                                            :class="{
+                                                'student-selected': studentAnswers[question.id]?.includes(option.key),
+                                                'correct-answer': question.correctAnswer.includes(option.key),
+                                                'incorrect': studentAnswers[question.id]?.includes(option.key) && !question.correctAnswer.includes(option.key)
+                                            }">
+                                            <span class="option-key">{{ option.key }}</span>
+                                            <span class="option-text">{{ option.text }}</span>
+                                            <n-icon v-if="question.correctAnswer.includes(option.key)"
+                                                class="correct-icon">
+                                                <CheckmarkCircle />
+                                            </n-icon>
+                                            <n-icon
+                                                v-if="studentAnswers[question.id]?.includes(option.key) && !question.correctAnswer.includes(option.key)"
+                                                class="incorrect-icon">
+                                                <CloseCircle />
+                                            </n-icon>
+                                        </div>
+                                    </div>
+
+                                    <!-- 学生答案显示 -->
+                                    <div class="student-answer-section">
+                                        <h4>学生答案：</h4>
+                                        <div v-if="question.type === '单选题' || question.type === '多选题'"
+                                            class="selected-answer">
+                                            <n-tag v-for="answer in (studentAnswers[question.id] || [])" :key="answer"
+                                                :type="question.correctAnswer.includes(answer) ? 'success' : 'error'">
+                                                {{ answer }}
+                                            </n-tag>
+                                            <span
+                                                v-if="!studentAnswers[question.id] || studentAnswers[question.id].length === 0"
+                                                class="no-answer">未作答</span>
+                                        </div>
+                                        <div v-else class="text-answer">
+                                            <div class="answer-content">{{ studentTextAnswers[question.id] || '未作答' }}
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <!-- 正确答案 -->
+                                    <div class="correct-answer-section">
+                                        <h4>正确答案：</h4>
+                                        <div v-if="question.type === '单选题' || question.type === '多选题'"
+                                            class="correct-options">
+                                            <n-tag v-for="answer in question.correctAnswer" :key="answer"
+                                                type="success">
+                                                {{ answer }}
+                                            </n-tag>
+                                        </div>
+                                        <div v-else class="correct-text">
+                                            <div class="answer-content">{{ question.correctAnswerText }}</div>
+                                        </div>
+                                    </div>
+
+                                    <!-- 解析说明 -->
+                                    <div v-if="question.explanation" class="explanation-section">
+                                        <h4>解析说明：</h4>
+                                        <div class="explanation-content" v-html="question.explanation"></div>
+                                    </div>
+                                </div>
+                                <!-- 批阅操作 -->
+                                <div class="grading-actions">
+                                    <div class="score-input">
+                                        <div class="correct-status">
+                                            <label>对错：</label>
+                                            <n-radio-group v-model:value="question.isCorrect"
+                                                @update:value="(value: boolean | null) => updateQuestionStatus(question.id, value)">
+                                                <n-radio :value="true" size="small">对</n-radio>
+                                                <n-radio :value="false" size="small">错</n-radio>
+                                                <!-- <n-radio :value="null" size="small">未判</n-radio> -->
+                                            </n-radio-group>
+                                        </div>
+                                        <div class="correct-status">
+                                            <label>得分：</label>
+                                            <div class="score-input-wrapper">
+                                                <n-input type="number" v-model:value="question.studentScore" :min="0"
+                                                    :max="question.score"
+                                                    @update:value="(value: number | null) => updateQuestionScore(question.id, value)" />
+                                            </div>
+                                        </div>
+                                        <span class="total-score">满分：{{ question.score }}分</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="text">
+                        <QuillEditor :placeholder="'请输入阅卷评语...（300字以内）'" v-model="gradingComments" height="400px">
+                        </QuillEditor>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, nextTick, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { ArrowBackOutline, CheckmarkCircle, CloseCircle } from '@vicons/ionicons5'
+import { useMessage } from 'naive-ui'
+import QuillEditor from '@/components/common/QuillEditor.vue'
+
+// 路由
+const router = useRouter()
+const message = useMessage()
+
+// 接口定义
+interface StudentInfo {
+    name: string
+    studentId: string
+    className: string
+    avatar: string
+    examDuration: string
+    submitTime: string
+}
+
+interface Question {
+    id: string
+    number: number
+    type: string
+    content: string
+    score: number
+    options?: { key: string; text: string }[]
+    correctAnswer: string[]
+    correctAnswerText?: string
+    explanation?: string
+    isCorrect: boolean | null
+    studentScore: number,
+}
+
+interface QuestionGroup {
+    type: string
+    title: string
+    questions: Question[]
+}
+
+// 响应式数据
+const currentQuestionId = ref('1')
+
+// 仅看错题
+const showOnlyWrong = ref(false)
+
+// 学生信息
+const studentInfo = ref<StudentInfo>({
+    name: '张三',
+    studentId: '1826685554',
+    className: '计算机1班',
+    avatar: '',
+    examDuration: '10题',
+    submitTime: '2025.07.25 09:20'
+})
+
+// 阅卷评语
+const gradingComments = ref('')
+
+// 模拟题目数据
+const questions = ref<Question[]>([
+    {
+        id: '1',
+        number: 1,
+        type: '单选题',
+        content: '角色扮演学生扮演企业员工或创业者等角色，体验以企业和技术为导向，并在跨域（信息外向型）上联结，承接跨学科、跨校内外的学生组织的学习（   ）知觉学技术等联合。',
+        score: 2,
+        options: [
+            { key: 'A', text: '人体传感识别技术' },
+            { key: 'B', text: '自然健获得技术' },
+            { key: 'C', text: 'C突含辅助' },
+            { key: 'D', text: 'D产品结构法' }
+        ],
+        correctAnswer: ['A'],
+        explanation: '角色扮演学生扮演企业员工或创业者等角色，体验以企业和技术为导向，并在跨域（信息外向型）上联结，承接跨学科技术联合学生组织的学习（   ）知觉学技术联合。',
+        isCorrect: true,
+        studentScore: 2
+    },
+    {
+        id: '2',
+        number: 2,
+        type: '单选题',
+        content: '角色扮演学生扮演企业员工或创业者等角色，体验以企业和技术为导向，并在跨域（信息外向型）上联结，承接跨学科、跨校内外的学生组织的学习（   ）知觉学技术等联合。',
+        score: 2,
+        options: [
+            { key: 'A', text: '人体传感识别技术' },
+            { key: 'B', text: '自然健获得技术' },
+            { key: 'C', text: 'C突含辅助' },
+            { key: 'D', text: 'D产品结构法' }
+        ],
+        correctAnswer: ['A'],
+        explanation: '',
+        isCorrect: false,
+        studentScore: 0
+    },
+    {
+        id: '3',
+        number: 3,
+        type: '单选题',
+        content: '角色扮演学生扮演企业员工或创业者等角色，体验以企业和技术为导向，并在跨域（信息外向型）上联结，承接跨学科、跨校内外的学生组织的学习（   ）知觉学技术等联合。',
+        score: 2,
+        options: [
+            { key: 'A', text: '人体传感识别技术' },
+            { key: 'B', text: '自然健获得技术' },
+            { key: 'C', text: 'C突含辅助' },
+            { key: 'D', text: 'D产品结构法' }
+        ],
+        correctAnswer: ['A'],
+        explanation: '',
+        isCorrect: null,
+        studentScore: 0
+    },
+    {
+        id: '4',
+        number: 1,
+        type: '多选题',
+        content: '角色扮演学生扮演企业员工或创业者等角色，体验以企业和技术为导向，并在跨域（信息外向型）上联结，承接跨学科、跨校内外的学生组织的学习（   ）知觉学技术等联合。',
+        score: 2,
+        options: [
+            { key: 'A', text: '人体传感识别技术' },
+            { key: 'B', text: '自然健获得技术' },
+            { key: 'C', text: 'C突含辅助' },
+            { key: 'D', text: 'D产品结构法' }
+        ],
+        correctAnswer: ['A', 'c'],
+        explanation: '',
+        isCorrect: null,
+        studentScore: 0
+    }
+])
+
+// 学生答案
+const studentAnswers = ref<Record<string, string[]>>({
+    '1': ['A'],
+    '2': ['B']
+})
+
+const studentTextAnswers = ref<Record<string, string>>({})
+
+// 计算属性
+const totalQuestions = computed(() => questions.value.length)
+const answeredCount = computed(() => Object.keys(studentAnswers.value).length)
+const totalScore = computed(() => questions.value.reduce((sum, q) => sum + q.score, 0))
+const currentScore = computed(() => questions.value.reduce((sum, q) => sum + q.studentScore, 0))
+// 计算答对的题目数
+const correctCount = computed(() => questions.value.filter(q => q.isCorrect === true).length)
+
+// 筛选后的题目列表
+const filteredQuestions = computed(() => {
+    if (showOnlyWrong.value) {
+        return questions.value.filter(q => q.isCorrect === false)
+    }
+    return questions.value
+})
+
+const questionGroups = computed((): QuestionGroup[] => {
+    const groups: Record<string, Question[]> = {}
+
+    filteredQuestions.value.forEach(question => {
+        if (!groups[question.type]) {
+            groups[question.type] = []
+        }
+        groups[question.type].push(question)
+    })
+
+    return Object.entries(groups).map(([type, questions]) => ({
+        type,
+        title: `${type}（${questions.length}）`,
+        questions
+    }))
+})
+
+// 方法
+const goBack = () => {
+    router.back()
+}
+
+const selectQuestion = (questionId: string) => {
+    console.log('点击题目:', questionId) // 调试信息
+    currentQuestionId.value = questionId
+    // 使用 nextTick 确保 DOM 更新完成后再滚动
+    nextTick(() => {
+        const element = document.getElementById(`question-${questionId}`)
+        const rightPanel = document.querySelector('.right-panel') as HTMLElement
+        console.log('找到元素:', element) // 调试信息
+        console.log('找到右侧面板:', rightPanel) // 调试信息
+
+        if (element && rightPanel) {
+            // 计算元素相对于右侧面板的位置
+            const elementRect = element.getBoundingClientRect()
+            const panelRect = rightPanel.getBoundingClientRect()
+
+            // 计算需要滚动的距离
+            const scrollTop = rightPanel.scrollTop
+            const targetTop = scrollTop + (elementRect.top - panelRect.top) - 20 // 20px 顶部间距
+
+            // 在右侧面板内滚动
+            rightPanel.scrollTo({
+                top: targetTop,
+                behavior: 'smooth'
+            })
+            console.log('执行滚动到:', questionId, '滚动位置:', targetTop) // 调试信息
+        }
+    })
+}
+
+const updateQuestionScore = (questionId: string, value: number | null) => {
+    if (value !== null) {
+        console.log('输入值:', value, '类型:', typeof value);
+
+        const question = questions.value.find(q => q.id === questionId)
+        if (question) {
+            // 确保值为数字类型
+            const numValue = typeof value === 'string' ? parseFloat(value) : value
+            if (isNaN(numValue)) {
+                console.log('无效的数字输入')
+                return
+            }
+
+            question.studentScore = numValue
+            // 根据得分自动更新正确性状态
+            if (numValue === question.score) {
+                question.isCorrect = true
+            } else if (numValue === 0) {
+                question.isCorrect = false
+            } else if (numValue > 0 && numValue < question.score) {
+                question.isCorrect = null // 部分得分设为未判状态
+            } else {
+                question.isCorrect = null
+            }
+        }
+    }
+}
+
+const updateQuestionStatus = (questionId: string, status: boolean | null) => {
+    const question = questions.value.find(q => q.id === questionId)
+    if (question) {
+        question.isCorrect = status
+        // 根据对错状态自动更新得分
+        if (status === true) {
+            question.studentScore = question.score // 对：满分
+        } else if (status === false) {
+            question.studentScore = 0 // 错：0分
+        }
+        // 未判状态不自动更新得分，保持当前得分
+    }
+}
+
+const submitGrading = () => {
+    // 检查是否所有题目都已批阅
+    const ungradedQuestions = questions.value.filter(q => q.isCorrect === null)
+    if (ungradedQuestions.length > 0) {
+        message.warning(`还有 ${ungradedQuestions.length} 道题目未批阅完成，请先完成批阅后再提交。`)
+        return
+    }
+
+    // 提交批阅结果
+    const gradingResult = {
+        studentId: studentInfo.value.studentId,
+        studentName: studentInfo.value.name,
+        totalScore: totalScore.value,
+        currentScore: currentScore.value,
+        correctCount: correctCount.value,
+        questions: questions.value.map(q => ({
+            id: q.id,
+            number: q.number,
+            type: q.type,
+            isCorrect: q.isCorrect,
+            studentScore: q.studentScore,
+            maxScore: q.score
+        })),
+        gradingComments: gradingComments.value,
+        submitTime: new Date().toISOString()
+    }
+
+    console.log('提交批阅结果:', gradingResult)
+
+    // 这里可以调用 API 提交批阅结果
+    // await submitGradingAPI(gradingResult)
+
+    message.success('批阅已提交成功！')
+    router.back()
+}
+
+// const saveGrading = () => {
+//     message.success('批阅已保存')
+// }
+
+// const submitGrading = () => {
+//     message.success('批阅已提交')
+//     router.back()
+// }
+
+// 组件挂载
+onMounted(() => {
+    // 初始化第一个题目为当前题目
+    if (questions.value.length > 0) {
+        currentQuestionId.value = questions.value[0].id
+    }
+})
+
+// 监听筛选状态变化
+watch(showOnlyWrong, () => {
+    // 当筛选状态改变时，检查当前选中的题目是否在筛选结果中
+    const currentInFiltered = filteredQuestions.value.find(q => q.id === currentQuestionId.value)
+    if (!currentInFiltered && filteredQuestions.value.length > 0) {
+        // 如果当前选中的题目不在筛选结果中，选择第一个可用的题目
+        currentQuestionId.value = filteredQuestions.value[0].id
+        // 滚动到新选中的题目
+        nextTick(() => {
+            selectQuestion(filteredQuestions.value[0].id)
+        })
+    }
+}, { immediate: false })
+</script>
+
+<style scoped>
+.grading-container {
+    display: flex;
+    height: 100vh;
+    background-color: #f5f5f5;
+}
+
+/* 左侧面板 */
+.left-panel {
+    width: 350px;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+}
+
+.card {
+    margin: 6px;
+    background-color: #fff;
+}
+
+.header-info {
+    padding: 20px;
+    border-bottom: 1px solid #e6e6e6;
+}
+
+.header-top {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 6px;
+}
+
+.back-button {
+    color: #666;
+}
+
+.exam-info h3 {
+    margin: 0 0 8px 0;
+    font-size: 16px;
+    font-weight: 500;
+}
+
+.meta-info {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    color: #666;
+    font-size: 14px;
+}
+
+.student-card {
+    background-color: #fff;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.stat-group {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 8px;
+}
+
+.stat-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex: 1;
+    border: 1px solid #e6e6e6;
+    padding: 6px 0;
+}
+
+.stat-label {
+    font-size: 12px;
+    color: #999;
+    text-align: center;
+}
+
+.stat-value {
+    font-size: 18px;
+    color: #333;
+}
+
+.stat-value.primary {
+    color: #ff4d4f;
+}
+
+.exam-tag {
+    display: flex;
+    justify-content: flex-start;
+    align-content: flex-start;
+    flex-wrap: wrap;
+    padding: 6px 10px;
+}
+
+.tag-text {
+    padding: 6px 12px;
+    background-color: #f0f0f0;
+    color: #666;
+    font-size: 12px;
+    border-radius: 4px;
+}
+
+/* 答题卡 */
+.answer-sheet {
+    padding: 20px;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.answer-sheet h4 {
+    margin: 0 0 16px 0;
+    font-size: 16px;
+}
+
+.question-stats {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20px;
+    font-size: 14px;
+}
+
+.score {
+    font-weight: 500;
+    color: #1890ff;
+}
+
+.question-groups {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    flex: 1;
+}
+
+.question-title {
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px solid #e6e6e6;
+}
+
+.question-group h5 {
+    margin: 0 0 12px 0;
+    font-size: 14px;
+    color: #666;
+}
+
+.question-numbers {
+    display: grid;
+    grid-template-columns: repeat(8, 1fr);
+    gap: 8px;
+}
+
+.question-number {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+    transition: all 0.2s;
+}
+
+.question-number.active {
+    background-color: #1890ff;
+    color: white;
+}
+
+.question-number.correct {
+    background-color: #0088D1;
+    color: white;
+}
+
+.question-number.incorrect {
+    background-color: #FF304B;
+    color: white;
+}
+
+.question-number.ungraded {
+    background-color: #f0f0f0;
+    color: #666;
+}
+
+.question-number:hover {
+    opacity: 0.8;
+}
+
+/* 提交按钮区域 */
+.submit-section {
+    margin-top: 20px;
+    padding-top: 16px;
+    border-top: 1px solid #e6e6e6;
+}
+
+.submit-tip {
+    display: flex;
+    justify-content: space-between;
+    padding: 6px;
+}
+
+.submit-item{
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+.tip-box {
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+    transition: all 0.2s;
+}
+
+
+.tip-box.active {
+    background-color: #1890ff;
+    color: white;
+}
+
+.tip-box.correct {
+    background-color: #0088D1;
+    color: white;
+}
+
+.tip-box.incorrect {
+    background-color: #FF304B;
+    color: white;
+}
+
+.tip-box.ungraded {
+    background-color: #f0f0f0;
+    color: #666;
+}
+
+/* 右侧内容区 */
+.right-panel {
+    flex: 1;
+    background-color: #fff;
+    overflow-y: auto;
+}
+
+.question-content {
+    padding: 0;
+    height: 100%;
+}
+
+.questions-list {
+    display: flex;
+    flex-direction: column;
+}
+
+.question-item {
+    padding: 24px;
+    border-bottom: 2px solid #f0f0f0;
+    transition: all 0.3s ease;
+}
+
+.question-item:last-child {
+    border-bottom: none;
+}
+
+.question-item.active {
+    background-color: #f8fffe;
+    /* border-left: 4px solid #1890ff; */
+}
+
+.question-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 24px;
+    padding-bottom: 16px;
+    border-bottom: 1px solid #e6e6e6;
+}
+
+.question-header h3 {
+    margin: 0;
+    font-size: 18px;
+    color: #1890ff;
+}
+
+.question-score {
+    font-size: 16px;
+    font-weight: 500;
+    color: #666;
+}
+
+.question-body {
+    margin-bottom: 24px;
+}
+
+.question-text {
+    font-size: 16px;
+    line-height: 1.6;
+    margin-bottom: 20px;
+    color: #333;
+}
+
+.question-cont {
+    display: flex;
+}
+
+.question-cont-left {
+    flex: 1;
+}
+
+
+.question-options {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    margin-bottom: 24px;
+}
+
+.option-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 16px;
+    border-radius: 8px;
+    transition: all 0.2s;
+    position: relative;
+}
+
+.option-item.student-selected {
+    background-color: #f0f9ff;
+}
+
+.option-item.correct-answer {
+    background-color: #EEF9FF;
+}
+
+.option-item.incorrect {
+    background-color: #fff2f0;
+}
+
+.option-key {
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #f0f0f0;
+    border-radius: 50%;
+    font-weight: 500;
+    font-size: 14px;
+}
+
+.option-item.student-selected .option-key {
+    background-color: #1890ff;
+    color: white;
+}
+
+.option-item.correct-answer .option-key {
+    background-color: #0088D1;
+    color: white;
+}
+
+.option-item.incorrect .option-key {
+    background-color: #FF304B;
+    color: white;
+}
+
+.option-text {
+    flex: 1;
+    font-size: 14px;
+    line-height: 1.5;
+}
+
+.correct-icon {
+    color: #52c41a;
+    font-size: 20px;
+}
+
+.incorrect-icon {
+    color: #ff4d4f;
+    font-size: 20px;
+}
+
+.student-answer-section,
+.correct-answer-section,
+.explanation-section {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.student-answer-section h4,
+.correct-answer-section h4,
+.explanation-section h4 {
+    font-size: 14px;
+    color: #666;
+}
+
+.selected-answer,
+.correct-options {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
+
+.no-answer {
+    color: #999;
+    font-style: italic;
+}
+
+.text-answer,
+.correct-text {
+    padding: 12px;
+    background-color: #f8f9fa;
+    border-radius: 6px;
+    border: 1px solid #e6e6e6;
+}
+
+.answer-content {
+    font-size: 14px;
+    line-height: 1.5;
+    color: #333;
+}
+
+.explanation-content {
+    padding: 12px;
+    background-color: #fffbe6;
+    border: 1px solid #ffe58f;
+    border-radius: 6px;
+    font-size: 14px;
+    line-height: 1.5;
+    color: #333;
+}
+
+/* 批阅操作 */
+.grading-actions {
+    display: flex;
+    padding: 20px;
+    flex-direction: column;
+    margin: 0 10px;
+    background-color: #F5F6F8;
+    width: 200px;
+    height: fit-content;
+}
+
+.score-input {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.correct-status {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    align-items: center;
+    width: 150px;
+}
+
+.correct-status label {
+    font-size: 14px;
+    font-weight: 500;
+}
+
+.score-input-wrapper {
+    width: 80px;
+    position: relative;
+}
+
+/* 修复number输入框的宽度问题 */
+.score-input-wrapper :deep(.n-input) {
+    width: 100% !important;
+}
+
+.score-input-wrapper :deep(.n-input-wrapper) {
+    width: 100% !important;
+    box-sizing: border-box !important;
+}
+
+.score-input-wrapper :deep(.n-input__input) {
+    box-sizing: border-box !important;
+    padding-right: 24px !important;
+    /* 为spinner按钮留出空间 */
+}
+
+/* 确保spinner按钮在容器内 */
+.score-input-wrapper :deep(.n-input-number-suffix) {
+    right: 2px !important;
+    width: 20px !important;
+}
+
+.total-score {
+    font-size: 14px;
+    color: #666;
+}
+
+.action-buttons {
+    display: flex;
+    gap: 12px;
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+    .left-panel {
+        width: 300px;
+    }
+
+    .question-numbers {
+        grid-template-columns: repeat(6, 1fr);
+    }
+}
+
+@media (max-width: 768px) {
+    .grading-container {
+        flex-direction: column;
+        height: auto;
+    }
+
+    .left-panel {
+        width: 100%;
+        max-height: 400px;
+    }
+
+    .question-numbers {
+        grid-template-columns: repeat(5, 1fr);
+    }
+
+    .grading-actions {
+        flex-direction: column;
+        gap: 16px;
+        align-items: stretch;
+    }
+
+    .action-buttons {
+        justify-content: center;
+    }
+}
+</style>
diff --git a/src/views/teacher/ExamPages/MarkingCenter.vue b/src/views/teacher/ExamPages/MarkingCenter.vue
index a3d6489..e20e6bc 100644
--- a/src/views/teacher/ExamPages/MarkingCenter.vue
+++ b/src/views/teacher/ExamPages/MarkingCenter.vue
@@ -125,7 +125,6 @@
         :page-size="pageSize"
         show-size-picker
         :page-sizes="[10, 20, 50]"
-        show-quick-jumper
         :item-count="totalItems"
         @update:page="handlePageChange"
         @update:page-size="handlePageSizeChange"
@@ -136,6 +135,7 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
 import { PersonOutline, CalendarOutline } from '@vicons/ionicons5'
 
 // 接口定义
@@ -151,6 +151,9 @@ interface ExamItem {
   gradedCount: number
 }
 
+// 路由
+const router = useRouter()
+
 // 响应式数据
 const activeTab = ref('all')
 const examFilter = ref('')
@@ -275,7 +278,11 @@ const handleDelete = (exam: ExamItem) => {
 }
 
 const handleAction = (exam: ExamItem) => {
-  console.log('执行操作:', exam)
+  // 跳转到学生列表页面，传递考试ID
+  router.push({ 
+    name: 'StudentList', 
+    params: { paperId: exam.id } 
+  })
 }
 
 const handlePageChange = (page: number) => {
diff --git a/src/views/teacher/ExamPages/QuestionManagement.vue b/src/views/teacher/ExamPages/QuestionManagement.vue
index db7de6e..8a5cd60 100644
--- a/src/views/teacher/ExamPages/QuestionManagement.vue
+++ b/src/views/teacher/ExamPages/QuestionManagement.vue
@@ -241,11 +241,12 @@ const paginationConfig = computed(() => ({
     pageSizes: [10, 20, 50, 100],
     showSizePicker: true,
     showQuickJumper: true,
-    prefix: (info: { startIndex: number; endIndex: number; page: number; pageSize: number; pageCount: number; itemCount?: number }) => {
+    goto: ()=>{
+        return '跳转'
+    },
+    prefix: (info: { itemCount?: number }) => {
         const itemCount = info.itemCount || 0;
-        const start = (pagination.page - 1) * pagination.pageSize + 1;
-        const end = Math.min(pagination.page * pagination.pageSize, itemCount);
-        return `显示 ${start}-${end} 条，共 ${itemCount} 条`;
+        return `共 ${itemCount} 条`;
     },
     onUpdatePage: (page: number) => {
         pagination.page = page;
diff --git a/src/views/teacher/ExamPages/StudentList.vue b/src/views/teacher/ExamPages/StudentList.vue
new file mode 100644
index 0000000..af6e007
--- /dev/null
+++ b/src/views/teacher/ExamPages/StudentList.vue
@@ -0,0 +1,765 @@
+<template>
+    <div class="student-list-container">
+        <!-- 页面头部 -->
+        <div class="header-section">
+            <div class="header-left">
+                <n-button quaternary circle size="large" @click="goBack" class="back-button">
+                    <template #icon>
+                        <n-icon>
+                            <ArrowBackOutline />
+                        </n-icon>
+                    </template>
+                </n-button>
+                <div class="header-info">
+                    <h1 class="page-title">{{ examInfo.title || '试卷名' }}</h1>
+                    <div class="exam-meta">
+                        <n-tag :type="getStatusType(examInfo.status)" :bordered="false" size="small">
+                            {{ getStatusText(examInfo.status) }}
+                        </n-tag>
+                    </div>
+                </div>
+            </div>
+
+            <div class="actions-group">
+                <n-button type="primary" @click="publishExam">
+                    发布补考
+                </n-button>
+                <n-button ghost @click="importStudents">
+                    导入
+                </n-button>
+                <n-button ghost @click="exportResults">
+                    导出
+                </n-button>
+                <n-select v-model:value="classFilter" :options="classFilterOptions" placeholder="班级名称"
+                    style="width: 120px;" clearable />
+                <n-input v-model:value="searchKeyword" placeholder="请输入学生姓名"
+                    style="width: 200px;" clearable>
+                </n-input>
+                <n-button type="primary" @click="handleSearch">搜索</n-button>
+            </div>
+        </div>
+
+        <!-- Tab切换 -->
+        <div class="tab-container">
+            <n-tabs v-model:value="activeTab" type="line" animated @update:value="handleTabChange">
+                <n-tab-pane name="all" tab="全部">
+                </n-tab-pane>
+                <n-tab-pane name="submitted" tab="已交">
+                </n-tab-pane>
+                <n-tab-pane name="not-submitted" tab="未交">
+                </n-tab-pane>
+            </n-tabs>
+        </div>
+
+        <!-- 学生表格 -->
+        <n-data-table :columns="columns" :data="filteredStudents" :pagination="paginationReactive"
+            :loading="loading" size="medium" striped :scroll-x="1400" :single-line="false"
+            class="student-table" /> 
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, onMounted, h } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { ArrowBackOutline } from '@vicons/ionicons5'
+import { NButton, NTag, NIcon, useMessage } from 'naive-ui'
+import type { DataTableColumns } from 'naive-ui'
+
+// 路由
+const router = useRouter()
+const route = useRoute()
+const message = useMessage()
+
+// 接口定义
+interface StudentExamInfo {
+    id: string
+    studentId: string
+    studentName: string
+    className: string
+    startTime: string | null
+    submitTime: string | null
+    examDuration: string | null
+    score: number | null
+    status: 'not-started' | 'in-progress' | 'submitted' | 'graded'
+    gradingStatus: 'pending' | 'graded'
+    totalQuestions: number
+    answeredQuestions: number
+}
+
+interface ExamInfo {
+    id: string
+    title: string
+    duration: string
+    status: 'not-started' | 'in-progress' | 'completed'
+    totalStudents: number
+    submittedCount: number
+    gradedCount: number
+}
+
+// 响应式数据
+const loading = ref(false)
+const searchKeyword = ref('')
+const statusFilter = ref('')
+const gradeFilter = ref('')
+
+// Tab相关
+const activeTab = ref('all')
+
+// 新增筛选相关
+const classFilter = ref('')
+
+// 考试信息
+const examInfo = ref<ExamInfo>({
+    id: '',
+    title: '',
+    duration: '',
+    status: 'in-progress',
+    totalStudents: 0,
+    submittedCount: 0,
+    gradedCount: 0
+})
+
+// 学生列表
+const studentList = ref<StudentExamInfo[]>([])
+
+// 新增班级筛选选项
+const classFilterOptions = [
+    { label: '全部班级', value: '' },
+    { label: '计算机1班', value: '计算机1班' },
+    { label: '计算机2班', value: '计算机2班' },
+    { label: '软件工程1班', value: '软件工程1班' }
+]
+
+// 分页配置
+const paginationReactive = reactive({
+    page: 1,
+    pageSize: 10,
+    showSizePicker: true,
+    pageSizes: [10, 20, 50],
+    onChange: (page: number) => {
+        paginationReactive.page = page
+    },
+    onUpdatePageSize: (pageSize: number) => {
+        paginationReactive.pageSize = pageSize
+        paginationReactive.page = 1
+    }
+})
+
+// 表格列定义
+const columns: DataTableColumns<StudentExamInfo> = [
+    {
+        title: '序号',
+        key: 'index',
+        width: 80,
+        render: (_, index) => {
+            return (paginationReactive.page - 1) * paginationReactive.pageSize + index + 1
+        }
+    },
+    {
+        title: '姓名',
+        key: 'studentName',
+        width: 120,
+        ellipsis: {
+            tooltip: true
+        }
+    },
+    {
+        title: '学号',
+        key: 'studentId',
+        width: 150
+    },
+    {
+        title: '班级',
+        key: 'className',
+        width: 120
+    },
+    {
+        title: '开始时间',
+        key: 'startTime',
+        width: 180,
+        render: (row) => {
+            return row.startTime || '-'
+        }
+    },
+    {
+        title: '提交时间',
+        key: 'submitTime',
+        width: 180,
+        render: (row) => {
+            return row.submitTime || '-'
+        }
+    },
+    {
+        title: '考试用时',
+        key: 'examDuration',
+        width: 120,
+        render: (row) => {
+            return row.examDuration || '-'
+        }
+    },
+    {
+        title: '正确率',
+        key: 'accuracy',
+        width: 100,
+        render: (row) => {
+            if (row.score === null) return '-'
+            return `${row.score}%`
+        }
+    },
+    {
+        title: '状态',
+        key: 'status',
+        width: 100,
+        render: (row) => {
+            return h(NTag, {
+                type: getStudentStatusType(row.status),
+                bordered: false,
+                size: 'small'
+            }, {
+                default: () => getStudentStatusText(row.status)
+            })
+        }
+    },
+    {
+        title: '批阅时间',
+        key: 'gradingTime',
+        width: 180,
+        render: (row) => {
+            return row.gradingStatus === 'graded' ? '2025.07.25 09:20' : '-'
+        }
+    },
+    {
+        title: '得分',
+        key: 'score',
+        width: 80,
+        render: (row) => {
+            return row.score !== null ? `${row.score}` : '-'
+        }
+    },
+    {
+        title: '操作',
+        key: 'actions',
+        width: 120,
+        fixed: 'right',
+        render: (row) => {
+            return h('div', { style: 'display: flex; gap: 8px;' }, [
+                h(NButton, {
+                    type: 'primary',
+                    size: 'small',
+                    onClick: () => handleViewAnswer(row)
+                }, { default: () => '查看' }),
+                h(NButton, {
+                    type: 'primary',
+                    size: 'small',
+                    disabled: row.status !== 'submitted',
+                    onClick: () => handleGrade(row)
+                }, { default: () => '批阅' })
+            ])
+        }
+    }
+]
+
+// 计算属性
+const filteredStudents = computed(() => {
+    let filtered = studentList.value
+
+    // Tab 过滤
+    if (activeTab.value === 'submitted') {
+        filtered = filtered.filter(student => student.status === 'submitted' || student.status === 'graded')
+    } else if (activeTab.value === 'not-submitted') {
+        filtered = filtered.filter(student => student.status === 'not-started' || student.status === 'in-progress')
+    }
+
+    // 搜索过滤
+    if (searchKeyword.value) {
+        const keyword = searchKeyword.value.toLowerCase()
+        filtered = filtered.filter(student =>
+            student.studentName.toLowerCase().includes(keyword) ||
+            student.studentId.toLowerCase().includes(keyword)
+        )
+    }
+
+    // 班级过滤
+    if (classFilter.value) {
+        filtered = filtered.filter(student => student.className === classFilter.value)
+    }
+
+    // 状态过滤
+    if (statusFilter.value) {
+        filtered = filtered.filter(student => student.status === statusFilter.value)
+    }
+
+    // 批阅状态过滤
+    if (gradeFilter.value) {
+        filtered = filtered.filter(student => student.gradingStatus === gradeFilter.value)
+    }
+
+    return filtered
+})
+
+// 方法
+const goBack = () => {
+    router.back()
+}
+
+const getStatusType = (status: string) => {
+    switch (status) {
+        case 'not-started':
+            return 'default'
+        case 'in-progress':
+            return 'warning'
+        case 'completed':
+            return 'success'
+        default:
+            return 'default'
+    }
+}
+
+const getStatusText = (status: string) => {
+    switch (status) {
+        case 'not-started':
+            return '未开始'
+        case 'in-progress':
+            return '进行中'
+        case 'completed':
+            return '已结束'
+        default:
+            return '未知'
+    }
+}
+
+const getStudentStatusType = (status: string) => {
+    switch (status) {
+        case 'not-started':
+            return 'primary'
+        case 'in-progress':
+            return 'warning'
+        case 'submitted':
+            return 'info'
+        case 'graded':
+            return 'success'
+        default:
+            return 'primary'
+    }
+}
+
+const getStudentStatusText = (status: string) => {
+    switch (status) {
+        case 'not-started':
+            return '待考试'
+        case 'in-progress':
+            return '考试中'
+        case 'submitted':
+            return '已提交'
+        case 'graded':
+            return '已批阅'
+        default:
+            return '未知'
+    }
+}
+
+const handleViewAnswer = (student: StudentExamInfo) => {
+    // 跳转到答题详情页面
+    router.push(`/teacher/exam-management/marking-center/answer-detail/${examInfo.value.id}/${student.id}`)
+}
+
+const handleGrade = (student: StudentExamInfo) => {
+    // 跳转到批阅页面
+    router.push(`/teacher/exam-management/marking-center/grading/${examInfo.value.id}/${student.id}`)
+}
+
+const exportResults = () => {
+    message.info('导出功能开发中...')
+}
+
+// 新增方法
+const handleTabChange = (value: string) => {
+    activeTab.value = value
+}
+
+const publishExam = () => {
+    message.info('发布补考功能开发中...')
+}
+
+const importStudents = () => {
+    message.info('导入学生功能开发中...')
+}
+
+const handleSearch = () => {
+    // 搜索已经通过 computed 属性自动实现
+    message.info('搜索已应用')
+}
+
+// 加载数据
+const loadExamInfo = async (examId: string) => {
+    loading.value = true
+    try {
+        // 模拟API调用
+        await new Promise(resolve => setTimeout(resolve, 500))
+
+        // 模拟数据
+        examInfo.value = {
+            id: examId,
+            title: '试卷名称试卷名称试卷名称试卷名称试卷名称',
+            duration: '考试时间：2025.07.25 09:00 - 2025.07.25 09:20',
+            status: 'in-progress',
+            totalStudents: 12,
+            submittedCount: 8,
+            gradedCount: 5
+        }
+    } catch (error) {
+        message.error('加载考试信息失败')
+    } finally {
+        loading.value = false
+    }
+}
+
+const loadStudentList = async (_examId: string) => {
+    loading.value = true
+    try {
+        // 模拟API调用
+        await new Promise(resolve => setTimeout(resolve, 500))
+
+        // 模拟学生数据
+        studentList.value = [
+            {
+                id: '1',
+                studentId: '1826685554',
+                studentName: '张张',
+                className: '待考试',
+                startTime: '2025.07.25 09:20',
+                submitTime: '2025.07.25 09:20',
+                examDuration: '9分钟29秒',
+                score: 70,
+                status: 'graded',
+                gradingStatus: 'graded',
+                totalQuestions: 10,
+                answeredQuestions: 8
+            },
+            {
+                id: '2',
+                studentId: '1826685554',
+                studentName: '张张',
+                className: '待考试',
+                startTime: null,
+                submitTime: null,
+                examDuration: null,
+                score: null,
+                status: 'submitted',
+                gradingStatus: 'pending',
+                totalQuestions: 10,
+                answeredQuestions: 0
+            },
+            {
+                id: '3',
+                studentId: '1826685554',
+                studentName: '张张',
+                className: '已提交',
+                startTime: '2025.07.25 09:20',
+                submitTime: '2025.07.25 09:20',
+                examDuration: '9分钟29秒',
+                score: 60,
+                status: 'graded',
+                gradingStatus: 'graded',
+                totalQuestions: 10,
+                answeredQuestions: 9
+            },
+            {
+                id: '4',
+                studentId: '1826685554',
+                studentName: '张张',
+                className: '待考试',
+                startTime: '2025.07.25 09:20',
+                submitTime: '2025.07.25 09:20',
+                examDuration: '9分钟29秒',
+                score: 70,
+                status: 'graded',
+                gradingStatus: 'graded',
+                totalQuestions: 10,
+                answeredQuestions: 10
+            },
+            {
+                id: '5',
+                studentId: '1826685554',
+                studentName: '张张',
+                className: '待考试',
+                startTime: null,
+                submitTime: null,
+                examDuration: null,
+                score: null,
+                status: 'not-started',
+                gradingStatus: 'pending',
+                totalQuestions: 10,
+                answeredQuestions: 0
+            },
+            {
+                id: '6',
+                studentId: '1826685554',
+                studentName: '张张',
+                className: '已提交',
+                startTime: '2025.07.25 09:20',
+                submitTime: '2025.07.25 09:20',
+                examDuration: '9分钟29秒',
+                score: 60,
+                status: 'graded',
+                gradingStatus: 'graded',
+                totalQuestions: 10,
+                answeredQuestions: 8
+            },
+            {
+                id: '7',
+                studentId: '1826685554',
+                studentName: '张张',
+                className: '待考试',
+                startTime: '2025.07.25 09:20',
+                submitTime: '2025.07.25 09:20',
+                examDuration: '9分钟29秒',
+                score: 70,
+                status: 'graded',
+                gradingStatus: 'graded',
+                totalQuestions: 10,
+                answeredQuestions: 10
+            },
+            {
+                id: '8',
+                studentId: '1826685554',
+                studentName: '张张',
+                className: '待考试',
+                startTime: null,
+                submitTime: null,
+                examDuration: null,
+                score: null,
+                status: 'not-started',
+                gradingStatus: 'pending',
+                totalQuestions: 10,
+                answeredQuestions: 0
+            },
+            {
+                id: '9',
+                studentId: '1826685554',
+                studentName: '张张',
+                className: '已提交',
+                startTime: '2025.07.25 09:20',
+                submitTime: '2025.07.25 09:20',
+                examDuration: '9分钟29秒',
+                score: 90,
+                status: 'graded',
+                gradingStatus: 'graded',
+                totalQuestions: 10,
+                answeredQuestions: 10
+            },
+            {
+                id: '10',
+                studentId: '1826685554',
+                studentName: '张张',
+                className: '待考试',
+                startTime: '2025.07.25 09:20',
+                submitTime: '2025.07.25 09:20',
+                examDuration: '9分钟29秒',
+                score: 70,
+                status: 'graded',
+                gradingStatus: 'graded',
+                totalQuestions: 10,
+                answeredQuestions: 9
+            },
+            {
+                id: '11',
+                studentId: '1826685554',
+                studentName: '张张',
+                className: '待考试',
+                startTime: null,
+                submitTime: null,
+                examDuration: null,
+                score: null,
+                status: 'not-started',
+                gradingStatus: 'pending',
+                totalQuestions: 10,
+                answeredQuestions: 0
+            },
+            {
+                id: '12',
+                studentId: '1826685554',
+                studentName: '张张',
+                className: '已提交',
+                startTime: '2025.07.25 09:20',
+                submitTime: '2025.07.25 09:20',
+                examDuration: '9分钟29秒',
+                score: 90,
+                status: 'graded',
+                gradingStatus: 'graded',
+                totalQuestions: 10,
+                answeredQuestions: 10
+            }
+        ]
+    } catch (error) {
+        message.error('加载学生列表失败')
+    } finally {
+        loading.value = false
+    }
+}
+
+// 组件挂载
+onMounted(async () => {
+    const examId = route.params.paperId as string
+    if (examId) {
+        await Promise.all([
+            loadExamInfo(examId),
+            loadStudentList(examId)
+        ])
+    }
+})
+</script>
+
+<style scoped>
+.student-list-container {
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 8px;
+}
+
+/* 页面头部 */
+.header-section {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 20px;
+    border-bottom: 1px solid #E6E6E6;
+}
+
+.header-left {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+.back-button {
+    color: #666;
+}
+
+.back-button:hover {
+    background-color: #f5f5f5;
+}
+
+.header-info {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.page-title {
+    margin: 0;
+    font-size: 20px;
+    font-weight: 500;
+}
+
+.exam-meta {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.actions-group {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+/* Tab 切换区域 */
+.tab-container {
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
+.tab-container :deep(.n-tabs) {
+    --n-tab-text-color: #666;
+    --n-tab-text-color-active: #1890ff;
+    --n-tab-text-color-hover: #1890ff;
+    --n-bar-color: #1890ff;
+}
+
+.tab-container :deep(.n-tabs-tab) {
+    padding: 16px 0;
+    margin-right: 32px;
+    font-weight: 500;
+    font-size: 16px;
+}
+
+/* 表格样式 */
+.student-table {
+    margin-top: 0;
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+    .header-section {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 16px;
+    }
+    
+    .actions-group {
+        justify-content: center;
+        flex-wrap: wrap;
+    }
+}
+
+@media (max-width: 768px) {
+    .student-list-container {
+        padding: 12px;
+    }
+    
+    .header-left {
+        justify-content: space-between;
+    }
+    
+    .page-title {
+        font-size: 18px;
+    }
+    
+    .actions-group {
+        gap: 8px;
+    }
+    
+    .actions-group .n-input {
+        width: 150px !important;
+    }
+    
+    .actions-group .n-select {
+        width: 100px !important;
+    }
+    
+    .tab-container :deep(.n-tabs-tab) {
+        margin-right: 24px;
+        font-size: 14px;
+    }
+}
+
+@media (max-width: 480px) {
+    .header-section {
+        padding: 12px 0;
+    }
+    
+    .header-info {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 8px;
+    }
+    
+    .actions-group {
+        justify-content: space-around;
+    }
+    
+    .actions-group .n-input {
+        width: 120px !important;
+    }
+    
+    .actions-group .n-select {
+        width: 80px !important;
+    }
+    
+    .tab-container :deep(.n-tabs-tab) {
+        margin-right: 16px;
+        font-size: 14px;
+    }
+}
+</style>