From 3d4fa1abb42328cd69c4a68a49ca4e1377125bb0 Mon Sep 17 00:00:00 2001
From: yuk255 <yuk255@qq.com>
Date: Fri, 29 Aug 2025 18:11:47 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E5=AF=B9naive=20ui=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E5=9B=BD=E9=99=85=E5=8C=96=E9=85=8D=E7=BD=AE=EF=BC=9B?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=80=83=E8=AF=95=E7=9B=B8=E5=85=B3api?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6=EF=BC=9B=E8=80=83=E8=AF=95=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95=E4=B8=8B=E9=80=BB=E8=BE=91=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=AE=8C=E5=96=84=EF=BC=9B6=E7=A7=8D=E9=A2=98=E5=9E=8B?=
 =?UTF-8?q?=E5=85=A8=E9=83=A8=E6=8F=90=E5=8F=96=E4=B8=BA=E7=8B=AC=E7=AB=8B?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |   36 +-
 src/api/index.ts                              |   32 +
 src/api/modules/exam.ts                       |  289 +++++
 src/api/types.ts                              |  131 ++
 .../ExamComponents/BatchSetScoreModal.vue     |  145 ++-
 .../ExamComponents/ExamSettingsModal.vue      |    9 +
 src/components/teacher/CompositeQuestion.vue  |    5 +-
 src/main.ts                                   |    2 +
 src/router/index.ts                           |   21 +-
 src/views/teacher/AdminDashboard.vue          |   12 +-
 src/views/teacher/ExamPages/AddExam.vue       |  932 +++++---------
 src/views/teacher/ExamPages/AddQuestion.vue   |  380 +++---
 src/views/teacher/ExamPages/ExamLibrary.vue   |    3 -
 src/views/teacher/ExamPages/ExamPreview.vue   |  200 ++-
 src/views/teacher/ExamPages/ExamTaking.vue    | 1104 +++++++++++++++++
 src/views/teacher/ExamPages/GradingPage.vue   |   63 +-
 .../ExamPages/QuestionBankManagement.vue      |  648 ++++++++++
 .../teacher/ExamPages/QuestionManagement.vue  |   75 +-
 src/views/teacher/ExamPages/StudentList.vue   |   10 +-
 19 files changed, 3188 insertions(+), 909 deletions(-)
 create mode 100644 src/api/modules/exam.ts
 create mode 100644 src/views/teacher/ExamPages/ExamTaking.vue
 create mode 100644 src/views/teacher/ExamPages/QuestionBankManagement.vue

diff --git a/src/App.vue b/src/App.vue
index 8b8b214..3c6f089 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,8 +3,14 @@ import { onMounted, computed } from 'vue'
 import { RouterView, useRoute } from 'vue-router'
 import { useUserStore } from '@/stores/user'
 import AppLayout from '@/components/layout/AppLayout.vue'
-import { NConfigProvider, NMessageProvider } from 'naive-ui'
+import { NConfigProvider, NMessageProvider, NDialogProvider, zhCN, dateZhCN, enUS, dateEnUS } from 'naive-ui'
 import type { GlobalThemeOverrides } from 'naive-ui';
+import { useI18n } from 'vue-i18n'
+const { locale } = useI18n()
+
+// 响应式获取naive-ui语言包
+const naiveLocale = computed(() => locale.value === 'en' ? enUS : zhCN)
+const naiveDateLocale = computed(() => locale.value === 'en' ? dateEnUS : dateZhCN)
 
 
 // 自定义naive-ui主题颜色
@@ -71,19 +77,21 @@ onMounted(() => {
 
 <template>
   <div id="app">
-    <n-config-provider :theme-overrides="themeOverrides">
-      <!-- 登录页面不使用 AppLayout，但需要 message provider -->
-      <template v-if="isLoginPage">
-        <n-message-provider>
-          <RouterView />
-        </n-message-provider>
-      </template>
-      <!-- 其他页面使用 AppLayout -->
-      <template v-else>
-        <AppLayout>
-          <RouterView />
-        </AppLayout>
-      </template>
+    <n-config-provider :theme-overrides="themeOverrides"  :locale="naiveLocale" :date-locale="naiveDateLocale">
+      <n-dialog-provider>
+        <!-- 登录页面不使用 AppLayout，但需要 message provider -->
+        <template v-if="isLoginPage">
+          <n-message-provider>
+            <RouterView />
+          </n-message-provider>
+        </template>
+        <!-- 其他页面使用 AppLayout -->
+        <template v-else>
+          <AppLayout>
+            <RouterView />
+          </AppLayout>
+        </template>
+      </n-dialog-provider>
     </n-config-provider>
   </div>
 </template>
diff --git a/src/api/index.ts b/src/api/index.ts
index d030f0f..484d7a9 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -10,6 +10,7 @@ export { default as FavoriteApi } from './modules/favorite'
 export { default as OrderApi } from './modules/order'
 export { default as UploadApi } from './modules/upload'
 export { default as StatisticsApi } from './modules/statistics'
+export { default as ExamApi } from './modules/exam'
 
 // API 基础配置
 export const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:3000/jeecgboot'
@@ -182,6 +183,37 @@ export const API_ENDPOINTS = {
     COMMENTS: '/statistics/comments',
     EXPORT: '/statistics/export/:type',
   },
+
+  // 考试题库相关
+  EXAM: {
+    // 题库管理
+    REPO_CREATE: '/biz/repo/courseAdd',
+    REPO_LIST: '/biz/repo/repoList',
+    REPO_DELETE: '/gen/repo/repo/delete',
+    REPO_EDIT: '/gen/repo/repo/edit',
+    
+    // 题目管理
+    QUESTION_LIST: '/biz/repo/questionList/:repoId',
+    QUESTION_DETAIL: '/biz/repo/repoList/:questionId',
+    QUESTION_ADD: '/gen/question/question/add',
+    QUESTION_EDIT: '/gen/question/question/edit',
+    QUESTION_DELETE: '/gen/question/question/delete',
+    
+    // 题目选项管理
+    QUESTION_OPTION_ADD: '/gen/questionoption/questionOption/add',
+    QUESTION_OPTION_EDIT: '/gen/questionoption/questionOption/edit',
+    QUESTION_OPTION_DELETE: '/gen/questionoption/questionOption/delete',
+    
+    // 题目答案管理
+    QUESTION_ANSWER_ADD: '/gen/questionanswer/questionAnswer/add',
+    QUESTION_ANSWER_EDIT: '/gen/questionanswer/questionAnswer/edit',
+    QUESTION_ANSWER_DELETE: '/gen/questionanswer/questionAnswer/delete',
+    
+    // 题库题目关联管理
+    QUESTION_REPO_ADD: '/gen/questionrepo/questionRepo/add',
+    QUESTION_REPO_EDIT: '/gen/questionrepo/questionRepo/edit',
+    QUESTION_REPO_DELETE: '/gen/questionrepo/questionRepo/delete',
+  },
   
   // 学习进度相关
   LEARNING: {
diff --git a/src/api/modules/exam.ts b/src/api/modules/exam.ts
new file mode 100644
index 0000000..6b42605
--- /dev/null
+++ b/src/api/modules/exam.ts
@@ -0,0 +1,289 @@
+// 考试题库相关API接口
+import { ApiRequest } from '../request'
+import type {
+  ApiResponse,
+  Repo,
+  Question,
+  CreateRepoRequest,
+  UpdateRepoRequest,
+  CreateQuestionRequest,
+  UpdateQuestionRequest,
+  CreateQuestionOptionRequest,
+  UpdateQuestionOptionRequest,
+  CreateQuestionAnswerRequest,
+  UpdateQuestionAnswerRequest,
+  CreateQuestionRepoRequest,
+  UpdateQuestionRepoRequest,
+} from '../types'
+
+/**
+ * 考试题库API模块
+ */
+export class ExamApi {
+  
+  // ========== 题库管理 ==========
+  
+  /**
+   * 课程新建题库
+   */
+  static async createCourseRepo(data: CreateRepoRequest): Promise<ApiResponse<string>> {
+    console.log('🚀 创建课程题库:', data)
+    const response = await ApiRequest.post<string>('/biz/repo/courseAdd', data)
+    console.log('✅ 创建课程题库成功:', response)
+    return response
+  }
+
+  /**
+   * 获取课程题库
+   */
+  static async getCourseRepoList(): Promise<ApiResponse<Repo[]>> {
+    const response = await ApiRequest.get<Repo[]>(`/biz/repo/repoList`)
+    console.log('✅ 获取课程题库列表成功:', response)
+    return response
+  }
+
+  /**
+   * 删除题库
+   */
+  static async deleteRepo(id: string): Promise<ApiResponse<string>> {
+    console.log('🚀 删除题库:', { id })
+    const response = await ApiRequest.delete<string>('/gen/repo/repo/delete', {
+      params: { id }
+    })
+    console.log('✅ 删除题库成功:', response)
+    return response
+  }
+
+  /**
+   * 编辑题库
+   */
+  static async updateRepo(data: UpdateRepoRequest): Promise<ApiResponse<string>> {
+    console.log('🚀 编辑题库:', data)
+    const response = await ApiRequest.put<string>('/gen/repo/repo/edit', data)
+    console.log('✅ 编辑题库成功:', response)
+    return response
+  }
+
+  // ========== 题目管理 ==========
+
+  /**
+   * 查询题库下题目
+   */
+  static async getQuestionsByRepo(repoId: string): Promise<ApiResponse<Question[]>> {
+    console.log('🚀 查询题库下题目:', { repoId })
+    const response = await ApiRequest.get<Question[]>(`/biz/repo/questionList/${repoId}`)
+    console.log('✅ 查询题库下题目成功:', response)
+    return response
+  }
+
+  /**
+   * 查询题目详情
+   */
+  static async getQuestionDetail(questionId: string): Promise<ApiResponse<Question>> {
+    console.log('🚀 查询题目详情:', { questionId })
+    const response = await ApiRequest.get<Question>(`/biz/repo/repoList/${questionId}`)
+    console.log('✅ 查询题目详情成功:', response)
+    return response
+  }
+
+  /**
+   * 添加题目
+   */
+  static async createQuestion(data: CreateQuestionRequest): Promise<ApiResponse<string>> {
+    console.log('🚀 添加题目:', data)
+    const response = await ApiRequest.post<string>('/gen/question/question/add', data)
+    console.log('✅ 添加题目成功:', response)
+    return response
+  }
+
+  /**
+   * 编辑题目
+   */
+  static async updateQuestion(data: UpdateQuestionRequest): Promise<ApiResponse<string>> {
+    console.log('🚀 编辑题目:', data)
+    const response = await ApiRequest.put<string>('/gen/question/question/edit', data)
+    console.log('✅ 编辑题目成功:', response)
+    return response
+  }
+
+  /**
+   * 删除题目
+   */
+  static async deleteQuestion(id: string): Promise<ApiResponse<string>> {
+    console.log('🚀 删除题目:', { id })
+    const response = await ApiRequest.delete<string>('/gen/question/question/delete', {
+      params: { id }
+    })
+    console.log('✅ 删除题目成功:', response)
+    return response
+  }
+
+  // ========== 题目选项管理 ==========
+
+  /**
+   * 添加题目选项
+   */
+  static async createQuestionOption(data: CreateQuestionOptionRequest): Promise<ApiResponse<string>> {
+    console.log('🚀 添加题目选项:', data)
+    const response = await ApiRequest.post<string>('/gen/questionoption/questionOption/add', data)
+    console.log('✅ 添加题目选项成功:', response)
+    return response
+  }
+
+  /**
+   * 编辑题目选项
+   */
+  static async updateQuestionOption(data: UpdateQuestionOptionRequest): Promise<ApiResponse<string>> {
+    console.log('🚀 编辑题目选项:', data)
+    const response = await ApiRequest.put<string>('/gen/questionoption/questionOption/edit', data)
+    console.log('✅ 编辑题目选项成功:', response)
+    return response
+  }
+
+  /**
+   * 删除题目选项
+   */
+  static async deleteQuestionOption(id: string): Promise<ApiResponse<string>> {
+    console.log('🚀 删除题目选项:', { id })
+    const response = await ApiRequest.delete<string>('/gen/questionoption/questionOption/delete', {
+      params: { id }
+    })
+    console.log('✅ 删除题目选项成功:', response)
+    return response
+  }
+
+  // ========== 题目答案管理 ==========
+
+  /**
+   * 添加题目答案
+   */
+  static async createQuestionAnswer(data: CreateQuestionAnswerRequest): Promise<ApiResponse<string>> {
+    console.log('🚀 添加题目答案:', data)
+    const response = await ApiRequest.post<string>('/gen/questionanswer/questionAnswer/add', data)
+    console.log('✅ 添加题目答案成功:', response)
+    return response
+  }
+
+  /**
+   * 编辑题目答案
+   */
+  static async updateQuestionAnswer(data: UpdateQuestionAnswerRequest): Promise<ApiResponse<string>> {
+    console.log('🚀 编辑题目答案:', data)
+    const response = await ApiRequest.put<string>('/gen/questionanswer/questionAnswer/edit', data)
+    console.log('✅ 编辑题目答案成功:', response)
+    return response
+  }
+
+  /**
+   * 删除题目答案
+   */
+  static async deleteQuestionAnswer(id: string): Promise<ApiResponse<string>> {
+    console.log('🚀 删除题目答案:', { id })
+    const response = await ApiRequest.delete<string>('/gen/questionanswer/questionAnswer/delete', {
+      params: { id }
+    })
+    console.log('✅ 删除题目答案成功:', response)
+    return response
+  }
+
+  // ========== 题库题目关联管理 ==========
+
+  /**
+   * 添加题库题目关联
+   */
+  static async createQuestionRepo(data: CreateQuestionRepoRequest): Promise<ApiResponse<string>> {
+    console.log('🚀 添加题库题目关联:', data)
+    const response = await ApiRequest.post<string>('/gen/questionrepo/questionRepo/add', data)
+    console.log('✅ 添加题库题目关联成功:', response)
+    return response
+  }
+
+  /**
+   * 编辑题库题目关联
+   */
+  static async updateQuestionRepo(data: UpdateQuestionRepoRequest): Promise<ApiResponse<string>> {
+    console.log('🚀 编辑题库题目关联:', data)
+    const response = await ApiRequest.put<string>('/gen/questionrepo/questionRepo/edit', data)
+    console.log('✅ 编辑题库题目关联成功:', response)
+    return response
+  }
+
+  /**
+   * 删除题库题目关联
+   */
+  static async deleteQuestionRepo(id: string): Promise<ApiResponse<string>> {
+    console.log('🚀 删除题库题目关联:', { id })
+    const response = await ApiRequest.delete<string>('/gen/questionrepo/questionRepo/delete', {
+      params: { id }
+    })
+    console.log('✅ 删除题库题目关联成功:', response)
+    return response
+  }
+
+  // ========== 常用工具方法 ==========
+
+  /**
+   * 题目类型映射
+   */
+  static getQuestionTypeText(type: number): string {
+    const typeMap: Record<number, string> = {
+      0: '单选题',
+      1: '多选题', 
+      2: '判断题',
+      3: '填空题',
+      4: '简答题',
+      5: '复合题'
+    }
+    return typeMap[type] || '未知类型'
+  }
+
+  /**
+   * 难度等级映射
+   */
+  static getDifficultyText(difficulty: number): string {
+    const difficultyMap: Record<number, string> = {
+      1: '简单',
+      2: '中等',
+      3: '困难'
+    }
+    return difficultyMap[difficulty] || '未知难度'
+  }
+
+  /**
+   * 批量添加题目选项
+   */
+  static async batchCreateQuestionOptions(
+    questionId: string, 
+    options: Omit<CreateQuestionOptionRequest, 'questionId'>[]
+  ): Promise<ApiResponse<string>[]> {
+    console.log('🚀 批量添加题目选项:', { questionId, options })
+    
+    const promises = options.map(option => 
+      this.createQuestionOption({ ...option, questionId })
+    )
+    
+    const responses = await Promise.all(promises)
+    console.log('✅ 批量添加题目选项成功:', responses)
+    return responses
+  }
+
+  /**
+   * 批量添加题目答案
+   */
+  static async batchCreateQuestionAnswers(
+    questionId: string,
+    answers: Omit<CreateQuestionAnswerRequest, 'questionId'>[]
+  ): Promise<ApiResponse<string>[]> {
+    console.log('🚀 批量添加题目答案:', { questionId, answers })
+    
+    const promises = answers.map(answer => 
+      this.createQuestionAnswer({ ...answer, questionId })
+    )
+    
+    const responses = await Promise.all(promises)
+    console.log('✅ 批量添加题目答案成功:', responses)
+    return responses
+  }
+}
+
+export default ExamApi
\ No newline at end of file
diff --git a/src/api/types.ts b/src/api/types.ts
index 97ad735..cf332b8 100644
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -684,3 +684,134 @@ export interface Statistics {
     count: number
   }>
 }
+
+// 考试题库相关类型
+export interface Repo {
+  id: string
+  title: string
+  remark: string
+  questionCount?: number
+  createBy: string
+  createTime: string
+  updateBy: string
+  updateTime: string
+}
+
+export interface Question {
+  id: string
+  parentId: string
+  type: number // 0单选题 1多选题 2判断题 3填空题 4简答题 5复合题
+  content: string
+  analysis: string
+  difficulty: number
+  score: number
+  createBy: string
+  createTime: string
+  updateBy: string
+  updateTime: string
+  options?: QuestionOption[]
+  answers?: QuestionAnswer[]
+}
+
+export interface QuestionOption {
+  id: string
+  questionId: string
+  content: string
+  izCorrent: number // 是否正确答案
+  orderNo: number
+  createBy: string
+  createTime: string
+  updateBy: string
+  updateTime: string
+}
+
+export interface QuestionAnswer {
+  id: string
+  questionId: string
+  answerText: string
+  orderNo: number
+  createBy: string
+  createTime: string
+  updateBy: string
+  updateTime: string
+}
+
+export interface QuestionRepo {
+  id: string
+  repoId: string
+  questionId: string
+  createBy: string
+  createTime: string
+  updateBy: string
+  updateTime: string
+}
+
+// 题库相关请求参数类型
+export interface CreateRepoRequest {
+  title: string
+  remark?: string
+}
+
+export interface UpdateRepoRequest {
+  id: string
+  title: string
+  remark?: string
+}
+
+export interface CreateQuestionRequest {
+  parentId?: string
+  type: number
+  content: string
+  analysis?: string
+  difficulty: number
+  score: number
+}
+
+export interface UpdateQuestionRequest {
+  id: string
+  parentId?: string
+  type: number
+  content: string
+  analysis?: string
+  difficulty: number
+  score: number
+}
+
+export interface CreateQuestionOptionRequest {
+  questionId: string
+  content: string
+  izCorrent: number
+  orderNo: number
+}
+
+export interface UpdateQuestionOptionRequest {
+  id: string
+  questionId: string
+  content: string
+  izCorrent: number
+  orderNo: number
+}
+
+export interface CreateQuestionAnswerRequest {
+  questionId: string
+  answerText: string
+  orderNo: number
+}
+
+export interface UpdateQuestionAnswerRequest {
+  id: string
+  questionId: string
+  answerText: string
+  orderNo: number
+}
+
+export interface CreateQuestionRepoRequest {
+  repoId: string
+  questionId: string
+}
+
+export interface UpdateQuestionRepoRequest {
+  id: string
+  repoId: string
+  questionId: string
+}
diff --git a/src/components/admin/ExamComponents/BatchSetScoreModal.vue b/src/components/admin/ExamComponents/BatchSetScoreModal.vue
index 561047a..9168882 100644
--- a/src/components/admin/ExamComponents/BatchSetScoreModal.vue
+++ b/src/components/admin/ExamComponents/BatchSetScoreModal.vue
@@ -12,24 +12,73 @@
                     class="big-question-section">
                     <div v-for="(subQuestion, subIndex) in bigQuestion.subQuestions" :key="subQuestion.id"
                         class="question-item">
-                        <div class="question-info">
-                            <span class="question-number">{{ bigIndex + 1 }}.{{ subIndex + 1 }}</span>
-                            <div class="question-content">
-                                {{ subQuestion.title }}
+                        <!-- 普通题目显示 -->
+                        <template v-if="subQuestion.type !== 'composite'">
+                            <div class="question-info">
+                                <span class="question-number">{{ bigIndex + 1 }}.{{ subIndex + 1 }}</span>
+                                <div class="question-content">
+                                    {{ subQuestion.title }}
+                                </div>
+                                <span class="question-type">{{ getQuestionTypeName(subQuestion.type) }}</span>
                             </div>
-                            <span class="question-type">{{ getQuestionTypeName(subQuestion.type) }}</span>
-                        </div>
-                        <div class="question-score">
-                            <span class="score-label">分数：</span>
-                            <n-input-number 
-                                v-model:value="subQuestion.score" 
-                                size="small" 
-                                :min="0" 
-                                :max="100"
-                                :precision="1"
-                                @update:value="updateQuestionScore(bigIndex, subIndex, $event)"
-                            />
-                        </div>
+                            <div class="question-score">
+                                <span class="score-label">分数：</span>
+                                <n-input-number 
+                                    v-model:value="subQuestion.score" 
+                                    size="small" 
+                                    :min="0" 
+                                    :max="100"
+                                    :precision="1"
+                                    @update:value="updateQuestionScore(bigIndex, subIndex, $event)"
+                                />
+                            </div>
+                        </template>
+                        
+                        <!-- 复合题目显示 -->
+                        <template v-else>
+                            <div class="composite-question-container">
+                                <!-- 复合题主体 -->
+                                <div class="composite-main">
+                                    <div class="question-info">
+                                        <span class="question-number composite">{{ bigIndex + 1 }}.{{ subIndex + 1 }}</span>
+                                        <div class="question-content">
+                                            {{ subQuestion.title }}
+                                        </div>
+                                        <span class="question-type composite">{{ getQuestionTypeName(subQuestion.type) }}</span>
+                                    </div>
+                                    <div class="question-score">
+                                        <span class="score-label">总分：</span>
+                                        <span class="total-score">{{ getCompositeQuestionTotalScore(subQuestion) }}</span>
+                                    </div>
+                                </div>
+                                
+                                <!-- 复合题的子题目 -->
+                                <div class="composite-sub-questions">
+                                    <div v-for="(compositeSubQ, compositeIndex) in (subQuestion.subQuestions || [])" 
+                                         :key="compositeSubQ.id" 
+                                         class="composite-sub-item">
+                                        <div class="question-info sub">
+                                            <span class="question-number sub">{{ bigIndex + 1 }}.{{ subIndex + 1 }}.{{ compositeIndex + 1 }}</span>
+                                            <div class="question-content sub">
+                                                {{ compositeSubQ.title }}
+                                            </div>
+                                            <span class="question-type sub">{{ getQuestionTypeName(compositeSubQ.type) }}</span>
+                                        </div>
+                                        <div class="question-score">
+                                            <span class="score-label">分数：</span>
+                                            <n-input-number 
+                                                v-model:value="compositeSubQ.score" 
+                                                size="small" 
+                                                :min="0" 
+                                                :max="100"
+                                                :precision="1"
+                                                @update:value="updateCompositeSubQuestionScore(bigIndex, subIndex, compositeIndex, $event)"
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </template>
                     </div>
                 </div>
             </div>
@@ -159,6 +208,33 @@ const updateQuestionScore = (bigIndex: number, subIndex: number, score: number)
     }
 };
 
+// 获取复合题总分
+const getCompositeQuestionTotalScore = (subQuestion: SubQuestion): number => {
+    if (subQuestion.type === QuestionType.COMPOSITE && subQuestion.subQuestions) {
+        return subQuestion.subQuestions.reduce((total, sq) => total + (sq.score || 0), 0);
+    }
+    return subQuestion.score || 0;
+};
+
+// 更新复合题子题目分数
+const updateCompositeSubQuestionScore = (bigIndex: number, subIndex: number, compositeIndex: number, score: number) => {
+    const bigQuestion = questionList.value[bigIndex];
+    const subQuestion = bigQuestion?.subQuestions[subIndex];
+    
+    if (subQuestion && subQuestion.type === QuestionType.COMPOSITE && subQuestion.subQuestions) {
+        const compositeSubQ = subQuestion.subQuestions[compositeIndex];
+        if (compositeSubQ) {
+            compositeSubQ.score = score || 0;
+            
+            // 重新计算复合题总分
+            subQuestion.score = subQuestion.subQuestions.reduce((total, sq) => total + (sq.score || 0), 0);
+            
+            // 重新计算大题总分
+            bigQuestion.totalScore = bigQuestion.subQuestions.reduce((total, sub) => total + (sub.score || 0), 0);
+        }
+    }
+};
+
 // 取消批量设置
 const cancelBatchSet = () => {
     showModal.value = false;
@@ -231,6 +307,41 @@ const confirmBatchSet = () => {
     border-color: #d1e7dd;
 }
 
+.composite-question {
+    background-color: #f0f8ff;
+    border-left: 3px solid #1890ff;
+}
+
+.composite-sub-question {
+    margin: 8px 0 8px 20px;
+    padding: 8px 12px;
+    border: 1px solid #d0d0d0;
+    border-radius: 4px;
+    background-color: #ffffff;
+    position: relative;
+}
+
+.composite-sub-question::before {
+    content: "└";
+    position: absolute;
+    left: -15px;
+    top: 8px;
+    color: #1890ff;
+    font-weight: bold;
+}
+
+.composite-sub-header {
+    font-weight: 500;
+    color: #666;
+    font-size: 14px;
+    margin-bottom: 6px;
+}
+
+.total-score {
+    font-weight: 600;
+    color: #1890ff;
+}
+
 .question-info {
     display: flex;
     align-items: center;
diff --git a/src/components/admin/ExamComponents/ExamSettingsModal.vue b/src/components/admin/ExamComponents/ExamSettingsModal.vue
index e8e772f..a96c790 100644
--- a/src/components/admin/ExamComponents/ExamSettingsModal.vue
+++ b/src/components/admin/ExamComponents/ExamSettingsModal.vue
@@ -21,6 +21,11 @@
                 </div>
             </div>
 
+            <!-- 考试人数限制 -->
+            <div class="setting-row">
+                <label class="setting-label">考试人数</label>
+                <n-input v-model:value="formData.maxParticipants" type="number" :min="1" placeholder="请输入考试人数上限" class="setting-input" />
+            </div>
             <!-- 试卷分类 -->
             <div class="setting-row">
                 <label class="setting-label">试卷分类</label>
@@ -323,6 +328,8 @@ interface ExamSettings {
         useLastScore: boolean; // 最后一次练习成绩为最终成绩
     };
     paperMode: 'show_all' | 'show_current' | 'hide_all';
+    // 新增考试人数限制字段
+    maxParticipants: number | null;
 }
 
 // Props 定义
@@ -396,6 +403,8 @@ const formData = ref<ExamSettings>({
         useLastScore: false,
     },
     paperMode: 'show_all',
+    // 新增考试人数限制字段
+    maxParticipants: null,
 });
 
 // 监听 props.examData 变化，更新本地副本
diff --git a/src/components/teacher/CompositeQuestion.vue b/src/components/teacher/CompositeQuestion.vue
index 67462d3..aab5801 100644
--- a/src/components/teacher/CompositeQuestion.vue
+++ b/src/components/teacher/CompositeQuestion.vue
@@ -166,7 +166,10 @@ let nextId = 1
 // 监听props变化
 watch(() => props.modelValue, (newValue) => {
     if (newValue?.subQuestions) {
-        subQuestions.value = newValue.subQuestions
+        subQuestions.value = newValue.subQuestions.map(sq => ({ ...sq }));
+        console.log('CompositeQuestion props 更新:', {
+            newSubQuestions: subQuestions.value.map(sq => ({ id: sq.id, title: sq.title, score: sq.score }))
+        });
     }
 }, { deep: true })
 
diff --git a/src/main.ts b/src/main.ts
index a680591..58457e9 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -85,6 +85,7 @@ import {
   NTimeline,
   NTimelineItem,
   NMessageProvider,
+  NDialogProvider,
   NPopselect
 } from 'naive-ui'
 
@@ -159,6 +160,7 @@ const naive = create({
     NTimeline,
     NTimelineItem,
     NMessageProvider,
+    NDialogProvider,
     NPopselect
   ]
 })
diff --git a/src/router/index.ts b/src/router/index.ts
index 1faa399..a4694c9 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -62,6 +62,7 @@ import HomeworkTemplateImport from '@/views/teacher/course/HomeworkTemplateImpor
 
 // 考试管理组件
 import ExamManagement from '@/views/teacher/ExamPages/ExamPage.vue'
+import ExamQuestionBankManagement from '@/views/teacher/ExamPages/QuestionBankManagement.vue'
 import QuestionManagement from '@/views/teacher/ExamPages/QuestionManagement.vue'
 import ExamLibrary from '@/views/teacher/ExamPages/ExamLibrary.vue'
 import MarkingCenter from '@/views/teacher/ExamPages/MarkingCenter.vue'
@@ -69,6 +70,7 @@ 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 ExamTaking from '@/views/teacher/ExamPages/ExamTaking.vue'
 
 import ChapterEditor from '@/views/teacher/course/ChapterEditor.vue'
 
@@ -293,10 +295,16 @@ const routes: RouteRecordRaw[] = [
         name: 'ExamManagement',
         component: ExamManagement,
         meta: { title: '考试管理' },
-        redirect: '/teacher/exam-management/question-management',
+        redirect: '/teacher/exam-management/question-bank',
         children: [
           {
-            path: 'question-management',
+            path: 'question-bank',
+            name: 'ExamQuestionBankManagement',
+            component: ExamQuestionBankManagement,
+            meta: { title: '题库管理' }
+          },
+          {
+            path: 'question-bank/:bankId/questions',
             name: 'QuestionManagement',
             component: QuestionManagement,
             meta: { title: '试题管理' }
@@ -347,7 +355,7 @@ const routes: RouteRecordRaw[] = [
             meta: { title: '试卷预览' }
           },
           {
-            path: 'add-question/:id?',
+            path: 'add-question/:id/:questionId?',
             name: 'AddQuestionPage',
             component: AddQuestion,
             meta: { title: '添加试题' }
@@ -357,7 +365,12 @@ const routes: RouteRecordRaw[] = [
       
     ]
   },
-
+  {
+    path: '/taking/:id',
+    name: 'ExamTaking',
+    component: ExamTaking,
+    meta: { title: '考试进行中' }
+  },
 
   // 帮助中心
   {
diff --git a/src/views/teacher/AdminDashboard.vue b/src/views/teacher/AdminDashboard.vue
index a6734bf..2ee9bd4 100644
--- a/src/views/teacher/AdminDashboard.vue
+++ b/src/views/teacher/AdminDashboard.vue
@@ -36,10 +36,10 @@
 
           <!-- 考试管理子菜单 -->
           <div class="submenu-container" :class="{ expanded: examMenuExpanded }">
-            <router-link to="/teacher/exam-management/question-management" class="submenu-item"
-              :class="{ active: activeSubNavItem === 'question-management' }"
-              @click="setActiveSubNavItem('question-management')">
-              <span>试题管理</span>
+            <router-link to="/teacher/exam-management/question-bank" class="submenu-item"
+              :class="{ active: activeSubNavItem === 'question-bank' }"
+              @click="setActiveSubNavItem('question-bank')">
+              <span>题库管理</span>
             </router-link>
             <router-link to="/teacher/exam-management/exam-library" class="submenu-item"
               :class="{ active: activeSubNavItem === 'exam-library' }" @click="setActiveSubNavItem('exam-library')">
@@ -505,8 +505,8 @@ const updateActiveNavItem = () => {
   } else if (path.includes('exam-management')) {
     activeNavItem.value = 4; // 考试管理
     examMenuExpanded.value = true;
-
-    const arr = ['question-management', 'exam-library', 'marking-center'];
+    
+    const arr = ['question-bank', '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 83e58ab..a944b50 100644
--- a/src/views/teacher/ExamPages/AddExam.vue
+++ b/src/views/teacher/ExamPages/AddExam.vue
@@ -3,13 +3,7 @@
         <n-space vertical>
             <div class="header-section">
                 <div class="header-content">
-                    <n-button 
-                        quaternary 
-                        circle 
-                        size="large" 
-                        @click="goBack"
-                        class="back-button"
-                    >
+                    <n-button quaternary circle size="large" @click="goBack" class="back-button">
                         <template #icon>
                             <n-icon>
                                 <ArrowBackOutline />
@@ -20,7 +14,7 @@
                     <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"/>
+                                <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                             </svg>
                         </n-icon>
                         已自动保存
@@ -40,7 +34,7 @@
                     <n-input v-model:value="examForm.title" type="textarea" placeholder="请输入试卷名称" />
                 </div>
 
-                <n-row class="flex justify-between">
+                <n-row class="flex justify-between mt-6">
                     <n-button type="primary" ghost @click="addBigQuestion">
                         <template #icon>
                             <n-icon>
@@ -63,7 +57,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 class="q-title">第{{ 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)">
@@ -111,9 +105,6 @@
 
                             <div class="total flex justify-between">
                                 共{{ item.subQuestions.length }}题，合计{{ item.totalScore }}分
-                                <n-icon class="iconRotate">
-                                    <ChevronUpSharp />
-                                </n-icon>
                             </div>
                         </div>
                     </div>
@@ -125,17 +116,16 @@
                     <div v-else>
                         <div v-for="(subQuestion, subIndex) in item.subQuestions" :key="subQuestion.id"
                             class="sub-question-item">
+                            <!-- 确保字段完整性 -->
+                            {{ ensureSubQuestionFields(subQuestion) }}
+
                             <!-- 小题标题栏 -->
                             <div class="sub-question-header">
-                                <span class="sub-question-number">*{{ subIndex + 1 }} {{
-                                    getQuestionTypeName(subQuestion.type) }}</span>
-                            </div>
-
-                            <!-- 题目内容输入 -->
-                            <div class="sub-question-content">
-                                <n-input v-model:value="subQuestion.title" type="textarea" placeholder="请输入题目内容"
-                                    style="flex: 1;" />
-                                <n-button size="small" quaternary @click="deleteSubQuestion(index, subIndex)">
+                                <span class="sub-question-number">
+                                    *{{ subIndex + 1 }} {{ getQuestionTypeName(subQuestion.type) }}
+                                </span>
+                                <n-button size="small" quaternary @click="deleteSubQuestion(index, subIndex)"
+                                    style="margin-left: 8px;">
                                     <template #icon>
                                         <n-icon>
                                             <TrashOutline />
@@ -144,220 +134,39 @@
                                 </n-button>
                             </div>
 
-                            <!-- 根据题型显示不同的编辑界面 -->
-                            <!-- 单选题 -->
-                            <div v-if="subQuestion.type === 'single_choice'" class="question-options">
-                                <div v-for="(option, optionIndex) in subQuestion.options" :key="option.id"
-                                    class="option-item">
-                                    <n-radio :checked="subQuestion.correctAnswer === option.id"
-                                        @update:checked="updateSingleChoice(index, subIndex, option.id)"
-                                        :name="`question_${subQuestion.id}`">
-                                        {{ String.fromCharCode(65 + optionIndex) }}
-                                    </n-radio>
-                                    <n-input v-model:value="option.content" placeholder="请输入选项内容"
-                                        style="flex: 1; margin-left: 8px; margin-right: 8px;" />
-                                    <n-button size="small" quaternary
-                                        @click="deleteOption(index, subIndex, optionIndex)">
-                                        <template #icon>
-                                            <n-icon>
-                                                <TrashOutline />
-                                            </n-icon>
-                                        </template>
-                                    </n-button>
-                                </div>
-                                <n-button size="small" quaternary @click="addOption(index, subIndex)"
-                                    class="add-option-btn">
-                                    + 添加选项
-                                </n-button>
-                            </div>
+                            <!-- 使用题型组件替换原有的编辑界面 -->
+                            <div class="question-component-wrapper">
+                                <!-- 单选题 -->
+                                <SingleChoiceQuestion v-if="subQuestion.type === 'single_choice'"
+                                    v-model="subQuestion.options!" v-model:correctAnswer="subQuestion.correctAnswer!"
+                                    v-model:title="subQuestion.title" v-model:explanation="subQuestion.explanation" />
 
-                            <!-- 多选题 -->
-                            <div v-if="subQuestion.type === 'multiple_choice'" class="question-options">
-                                <div v-for="(option, optionIndex) in subQuestion.options" :key="option.id"
-                                    class="option-item">
-                                    <n-checkbox
-                                        :checked="Array.isArray(subQuestion.correctAnswer) && subQuestion.correctAnswer.includes(option.id)"
-                                        @update:checked="updateMultipleChoice(index, subIndex, option.id, $event)">
-                                        {{ String.fromCharCode(65 + optionIndex) }}
-                                    </n-checkbox>
-                                    <n-input v-model:value="option.content" placeholder="请输入选项内容"
-                                        style="flex: 1; margin-left: 8px; margin-right: 8px;" />
-                                    <n-button size="small" quaternary
-                                        @click="deleteOption(index, subIndex, optionIndex)">
-                                        <template #icon>
-                                            <n-icon>
-                                                <TrashOutline />
-                                            </n-icon>
-                                        </template>
-                                    </n-button>
-                                </div>
-                                <n-button size="small" quaternary @click="addOption(index, subIndex)"
-                                    class="add-option-btn">
-                                    + 添加选项
-                                </n-button>
-                            </div>
+                                <!-- 多选题 -->
+                                <MultipleChoiceQuestion v-else-if="subQuestion.type === 'multiple_choice'"
+                                    v-model="subQuestion.options!" v-model:correctAnswers="subQuestion.correctAnswers!"
+                                    v-model:title="subQuestion.title" v-model:explanation="subQuestion.explanation" />
 
-                            <!-- 判断题 -->
-                            <div v-if="subQuestion.type === 'true_false'" class="question-options">
-                                <n-space>
-                                    <n-radio :checked="subQuestion.trueFalseAnswer === true"
-                                        @update:checked="updateTrueFalse(index, subIndex, true)"
-                                        :name="`question_${subQuestion.id}`">
-                                        正确
-                                    </n-radio>
-                                    <n-radio :checked="subQuestion.trueFalseAnswer === false"
-                                        @update:checked="updateTrueFalse(index, subIndex, false)"
-                                        :name="`question_${subQuestion.id}`">
-                                        错误
-                                    </n-radio>
-                                </n-space>
-                            </div>
+                                <!-- 判断题 -->
+                                <TrueFalseQuestion v-else-if="subQuestion.type === 'true_false'"
+                                    v-model:answer="subQuestion.trueFalseAnswer!" v-model:title="subQuestion.title"
+                                    v-model:explanation="subQuestion.explanation" />
 
-                            <!-- 填空题 -->
-                            <div v-if="subQuestion.type === 'fill_blank'" class="question-options">
-                                <div v-for="(blank, blankIndex) in subQuestion.fillBlanks" :key="blank.id"
-                                    class="fill-blank-item">
-                                    <span>第{{ blankIndex + 1 }}个填空答案：</span>
-                                    <n-input v-model:value="blank.content" placeholder="请输入正确答案"
-                                        style="flex: 1; margin-left: 8px; margin-right: 8px;" />
-                                    <n-button size="small" quaternary
-                                        @click="deleteFillBlank(index, subIndex, blankIndex)">
-                                        <template #icon>
-                                            <n-icon>
-                                                <TrashOutline />
-                                            </n-icon>
-                                        </template>
-                                    </n-button>
-                                </div>
-                                <n-button size="small" dashed @click="addFillBlank(index, subIndex)"
-                                    class="add-option-btn">
-                                    + 添加填空
-                                </n-button>
-                            </div>
+                                <!-- 填空题 -->
+                                <FillBlankQuestion v-else-if="subQuestion.type === 'fill_blank'"
+                                    v-model:answers="subQuestion.fillBlanks!" v-model:title="subQuestion.title"
+                                    v-model:explanation="subQuestion.explanation" />
 
-                            <!-- 简答题 -->
-                            <div v-if="subQuestion.type === 'short_answer'" class="question-options">
-                                <div class="answer-section">
-                                    <span>参考答案：</span>
-                                    <n-input v-model:value="subQuestion.textAnswer" type="textarea"
-                                        placeholder="请输入参考答案" :autosize="{ minRows: 3, maxRows: 8 }" />
-                                </div>
-                            </div>
+                                <!-- 简答题 -->
+                                <ShortAnswerQuestion v-else-if="subQuestion.type === 'short_answer'"
+                                    :model-value="subQuestion.textAnswer || ''" v-model:title="subQuestion.title"
+                                    v-model:explanation="subQuestion.explanation"
+                                    @update:model-value="(val: string) => subQuestion.textAnswer = val" />
 
-                            <!-- 复合题子题目 -->
-                            <div v-if="subQuestion.type === 'composite' && subQuestion.subQuestions"
-                                class="composite-sub-questions">
-                                <n-divider />
-                                <div v-for="(compositeSubQ, compSubIndex) in subQuestion.subQuestions"
-                                    :key="compositeSubQ.id" class="composite-sub-item">
-                                    <div class="composite-sub-header">
-                                        <div class="sub-question-number">
-                                            <span>{{ compSubIndex + 1 }}. </span>
-                                            <n-select v-model:value="compositeSubQ.type" :options="[
-                                                { label: '单选题', value: 'single_choice' },
-                                                { label: '多选题', value: 'multiple_choice' },
-                                                { label: '判断题', value: 'true_false' }
-                                            ]" size="small" style="width: 100px; margin-right: 8px;"
-                                                @update:value="changeCompositeSubQuestionType(index, subIndex, compSubIndex, $event)" />
-                                        </div>
-                                        <n-button size="small" quaternary
-                                            @click="deleteCompositeSubQuestion(index, subIndex, compSubIndex)">
-                                            <template #icon>
-                                                <n-icon>
-                                                    <TrashOutline />
-                                                </n-icon>
-                                            </template>
-                                        </n-button>
-                                    </div>
-
-                                    <!-- 子题目内容 -->
-                                    <div class="composite-sub-content">
-                                        <n-input v-model:value="compositeSubQ.title" type="textarea"
-                                            placeholder="请输入子题目内容" :autosize="{ minRows: 2, maxRows: 4 }"
-                                            style="margin-bottom: 12px;" />
-
-                                        <!-- 单选题选项 -->
-                                        <div v-if="compositeSubQ.type === 'single_choice'" class="composite-options">
-                                            <div v-for="(option, optionIndex) in compositeSubQ.options" :key="option.id"
-                                                class="option-item">
-                                                <n-radio :name="`composite_question_${compositeSubQ.id}`"
-                                                    :checked="compositeSubQ.correctAnswer === option.id"
-                                                    @update:checked="updateCompositeChoice(index, subIndex, compSubIndex, option.id)">
-                                                    {{ String.fromCharCode(65 + optionIndex) }}
-                                                </n-radio>
-                                                <n-input v-model:value="option.content" placeholder="请输入选项内容"
-                                                    style="flex: 1; margin-left: 8px; margin-right: 8px;" />
-                                                <n-button size="small" quaternary
-                                                    @click="deleteCompositeOption(index, subIndex, compSubIndex, optionIndex)">
-                                                    <template #icon>
-                                                        <n-icon>
-                                                            <TrashOutline />
-                                                        </n-icon>
-                                                    </template>
-                                                </n-button>
-                                            </div>
-                                            <n-button size="small" dashed
-                                                @click="addCompositeOption(index, subIndex, compSubIndex)"
-                                                class="add-option-btn">
-                                                + 添加选项
-                                            </n-button>
-                                        </div>
-
-                                        <!-- 多选题选项 -->
-                                        <div v-if="compositeSubQ.type === 'multiple_choice'" class="composite-options">
-                                            <div v-for="(option, optionIndex) in compositeSubQ.options" :key="option.id"
-                                                class="option-item">
-                                                <n-checkbox
-                                                    :checked="Array.isArray(compositeSubQ.correctAnswer) && compositeSubQ.correctAnswer.includes(option.id)"
-                                                    @update:checked="updateCompositeMultiChoice(index, subIndex, compSubIndex, option.id, $event)">
-                                                    {{ String.fromCharCode(65 + optionIndex) }}
-                                                </n-checkbox>
-                                                <n-input v-model:value="option.content" placeholder="请输入选项内容"
-                                                    style="flex: 1; margin-left: 8px; margin-right: 8px;" />
-                                                <n-button size="small" quaternary
-                                                    @click="deleteCompositeOption(index, subIndex, compSubIndex, optionIndex)">
-                                                    <template #icon>
-                                                        <n-icon>
-                                                            <TrashOutline />
-                                                        </n-icon>
-                                                    </template>
-                                                </n-button>
-                                            </div>
-                                            <n-button size="small" dashed
-                                                @click="addCompositeOption(index, subIndex, compSubIndex)"
-                                                class="add-option-btn">
-                                                + 添加选项
-                                            </n-button>
-                                        </div>
-
-                                        <!-- 判断题 -->
-                                        <div v-if="compositeSubQ.type === 'true_false'" class="composite-options">
-                                            <n-space>
-                                                <n-radio :checked="compositeSubQ.trueFalseAnswer === true"
-                                                    @update:checked="updateCompositeTrueFalse(index, subIndex, compSubIndex, true)"
-                                                    :name="`composite_question_${compositeSubQ.id}`">
-                                                    正确
-                                                </n-radio>
-                                                <n-radio :checked="compositeSubQ.trueFalseAnswer === false"
-                                                    @update:checked="updateCompositeTrueFalse(index, subIndex, compSubIndex, false)"
-                                                    :name="`composite_question_${compositeSubQ.id}`">
-                                                    错误
-                                                </n-radio>
-                                            </n-space>
-                                        </div>
-                                    </div>
-                                </div>
-                                <n-button size="small" dashed @click="addCompositeSubQuestion(index, subIndex)"
-                                    class="add-option-btn">
-                                    + 添加子题目
-                                </n-button>
-                            </div>
-
-                            <!-- 答案解析 -->
-                            <div class="explanation-section">
-                                <span>答案解析：</span>
-                                <n-input v-model:value="subQuestion.explanation" type="textarea"
-                                    placeholder="请输入答案解析（选填）" :autosize="{ minRows: 2, maxRows: 4 }" />
+                                <!-- 复合题 -->
+                                <CompositeQuestion v-else-if="subQuestion.type === 'composite'"
+                                    :model-value="convertToCompositeData(subQuestion)" v-model:title="subQuestion.title"
+                                    v-model:explanation="subQuestion.explanation"
+                                    @update:model-value="(val: any) => { updateCompositeData(subQuestion, val); updateBigQuestionScore(index); }" />
                             </div>
 
                             <!-- 底部操作按钮 -->
@@ -365,7 +174,7 @@
                                 <div class="sub-footer-item">
                                     分数：
                                     <n-input-number v-model:value="subQuestion.score" size="small" :min="0"
-                                        style="width: 80px" />
+                                        style="width: 80px" @update:value="updateBigQuestionScore(index)" />
                                 </div>
                                 <div class="sub-footer-item">
                                     难度：<n-select v-model:value="subQuestion.difficulty" size="small" style="width: 80px"
@@ -378,7 +187,7 @@
                             </div>
                         </div>
                     </div>
-                    <n-row class="flex">
+                    <n-row class="flex  mt-6">
                         <n-popselect v-model:value="questionTypeValue" :options="questionTypeOptions">
                             <n-button type="primary" @click="addQuestion(index)">
                                 <template #icon>
@@ -413,13 +222,6 @@
                             </n-button>
                             <n-button type="primary" :ghost="!examForm.useAIGrading" size="large"
                                 @click="toggleAIGrading">
-                                <!-- <template #icon>
-                                    <n-icon>
-                                        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
-                                            <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zM9.29 16.29L5.7 12.7a.996.996 0 1 1 1.41-1.41L10 14.17l6.88-6.88a.996.996 0 1 1 1.41 1.41l-7.59 7.59a.996.996 0 0 1-1.41 0z"/>
-                                        </svg>
-                                    </n-icon>
-                                </template> -->
                                 {{ examForm.useAIGrading ? '已启用AI阅卷' : '使用AI阅卷功能' }}
                             </n-button>
                             <n-button type="primary" ghost size="large" @click="openExamSettingsModal">
@@ -438,7 +240,9 @@
 
                     <!-- 中间统计信息 -->
                     <div class="footer-center">
-                        <span>题目数量：{{ examForm.questions.length }} 道</span>
+                        <span>大题数量：{{ examForm.questions.length }} 道 - 小题数量：{{examForm.questions.reduce((total, q) =>
+                            total +
+                            q.subQuestions.length, 0) }} 道</span>
                         <span>总分：{{examForm.questions.reduce((total, q) => total + q.totalScore, 0)}} 分</span>
                     </div>
 
@@ -448,9 +252,6 @@
                             <n-button strong type="primary" secondary size="large">
                                 取消
                             </n-button>
-                            <n-button strong type="primary" secondary size="large" @click="previewSubQuestion">
-                                预览
-                            </n-button>
                             <n-button strong type="primary" size="large" @click="saveExam">
                                 保存试卷
                             </n-button>
@@ -461,7 +262,7 @@
         </n-space>
 
         <!-- 批量设置分数模态框 -->
-        <BatchSetScoreModal v-model:visible="showBatchScoreModal" :questions="examForm.questions"
+        <BatchSetScoreModal v-model:visible="showBatchScoreModal" :questions="examForm.questions as any"
             @confirm="handleBatchScoreConfirm" @cancel="handleBatchScoreCancel" />
 
         <!-- 试卷设置模态框 -->
@@ -478,10 +279,16 @@
 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'
+import { AddCircle, SettingsOutline, TrashOutline, BookSharp, ArrowBackOutline } from '@vicons/ionicons5'
 import BatchSetScoreModal from '@/components/admin/ExamComponents/BatchSetScoreModal.vue';
 import ExamSettingsModal from '@/components/admin/ExamComponents/ExamSettingsModal.vue';
 import QuestionBankModal from '@/components/admin/ExamComponents/QuestionBankModal.vue';
+import SingleChoiceQuestion from '@/components/teacher/SingleChoiceQuestion.vue';
+import MultipleChoiceQuestion from '@/components/teacher/MultipleChoiceQuestion.vue';
+import TrueFalseQuestion from '@/components/teacher/TrueFalseQuestion.vue';
+import FillBlankQuestion from '@/components/teacher/FillBlankQuestion.vue';
+import ShortAnswerQuestion from '@/components/teacher/ShortAnswerQuestion.vue';
+import CompositeQuestion from '@/components/teacher/CompositeQuestion.vue';
 
 // 创建独立的 dialog API
 const { dialog } = createDiscreteApi(['dialog'])
@@ -492,9 +299,9 @@ const router = useRouter()
 // 返回上一个页面
 const goBack = () => {
     // 检查是否有未保存的内容
-    const hasContent = examForm.title.trim() || 
-                       examForm.questions.some(q => q.subQuestions.length > 0) ||
-                       examForm.description.trim()
+    const hasContent = examForm.title.trim() ||
+        examForm.questions.some(q => q.subQuestions.length > 0) ||
+        examForm.description.trim()
 
     if (hasContent) {
         dialog.warning({
@@ -529,21 +336,19 @@ enum QuestionType {
     COMPOSITE = 'composite'             // 复合题
 }
 
-// 选择题选项接口
+// 选择题选项接口（适配题型组件）
 interface ChoiceOption {
-    id: string;
     content: string;
-    isCorrect: boolean;
 }
 
-// 填空题答案接口
+// 填空题答案接口（适配题型组件）
 interface FillBlankAnswer {
-    id: string;
     content: string;
-    position: number; // 填空位置
+    score: number;
+    caseSensitive: boolean;
 }
 
-// 小题接口
+// 小题接口（适配题型组件）
 interface SubQuestion {
     id: string;
     type: QuestionType;
@@ -552,17 +357,18 @@ interface SubQuestion {
     difficulty: 'easy' | 'medium' | 'hard'; // 难度
     required: boolean;          // 题目必填
 
-    // 选择题相关字段
+    // 选择题相关字段（适配题型组件）
     options?: ChoiceOption[];   // 选择题选项
-    correctAnswer?: string | string[]; // 正确答案（单选为string，多选为string[]）
+    correctAnswer?: number | null; // 单选题正确答案索引
+    correctAnswers?: number[];  // 多选题正确答案索引数组
 
-    // 填空题相关字段
+    // 填空题相关字段（适配题型组件）
     fillBlanks?: FillBlankAnswer[]; // 填空答案
 
     // 判断题相关字段
-    trueFalseAnswer?: boolean;  // 判断题答案
+    trueFalseAnswer?: boolean | null;  // 判断题答案
 
-    // 简答题/复合题相关字段
+    // 简答题相关字段
     textAnswer?: string;        // 文本答案
     answerKeywords?: string[];  // 答案关键词
 
@@ -570,7 +376,7 @@ interface SubQuestion {
     subQuestions?: SubQuestion[]; // 复合题的子题目
 
     // 通用字段
-    explanation?: string;       // 答案解析
+    explanation: string;       // 答案解析
     tags?: string[];           // 标签
     createTime: string;
 }
@@ -662,6 +468,15 @@ const addQuestion = (index: number) => {
         score: 5, // 默认分值
         difficulty: 'medium',
         required: true, // 默认必填
+        explanation: '', // 初始化解析字段
+        textAnswer: '', // 初始化文本答案字段
+        // 为所有可能的字段提供默认值
+        options: [],
+        correctAnswer: null,
+        correctAnswers: [],
+        fillBlanks: [],
+        trueFalseAnswer: null,
+        subQuestions: [],
         createTime: new Date().toISOString()
     };
 
@@ -669,47 +484,40 @@ const addQuestion = (index: number) => {
     switch (questionType) {
         case QuestionType.SINGLE_CHOICE:
             newSubQuestion.options = [
-                { id: '1', content: '选项A', isCorrect: false },
-                { id: '2', content: '选项B', isCorrect: false },
-                { id: '3', content: '选项C', isCorrect: false },
-                { id: '4', content: '选项D', isCorrect: false }
+                { content: '' },
+                { content: '' },
+                { content: '' },
+                { content: '' }
             ];
-            newSubQuestion.correctAnswer = '';
-            newSubQuestion.explanation = '';
+            newSubQuestion.correctAnswer = null;
             break;
 
         case QuestionType.MULTIPLE_CHOICE:
             newSubQuestion.options = [
-                { id: '1', content: '选项A', isCorrect: false },
-                { id: '2', content: '选项B', isCorrect: false },
-                { id: '3', content: '选项C', isCorrect: false },
-                { id: '4', content: '选项D', isCorrect: false }
+                { content: '' },
+                { content: '' },
+                { content: '' },
+                { content: '' }
             ];
-            newSubQuestion.correctAnswer = [];
-            newSubQuestion.explanation = '';
+            newSubQuestion.correctAnswers = [];
             break;
 
         case QuestionType.TRUE_FALSE:
-            newSubQuestion.trueFalseAnswer = undefined; // 初始状态不选择任何选项
-            newSubQuestion.explanation = '';
+            newSubQuestion.trueFalseAnswer = null;
             break;
 
         case QuestionType.FILL_BLANK:
             newSubQuestion.fillBlanks = [
-                { id: '1', content: '', position: 1 }
+                { content: '', score: 1, caseSensitive: false }
             ];
-            newSubQuestion.explanation = '';
             break;
 
         case QuestionType.SHORT_ANSWER:
-            newSubQuestion.textAnswer = '';
-            newSubQuestion.explanation = '';
+            // textAnswer 已在基础对象中初始化
             break;
 
         case QuestionType.COMPOSITE:
             newSubQuestion.subQuestions = [];
-            newSubQuestion.explanation = '';
-            break;
             break;
     }
 
@@ -723,7 +531,11 @@ const addQuestion = (index: number) => {
 // 更新大题总分的辅助函数
 const updateBigQuestionScore = (bigQuestionIndex: number) => {
     const bigQuestion = examForm.questions[bigQuestionIndex];
-    bigQuestion.totalScore = bigQuestion.subQuestions.reduce((total, subQ) => total + subQ.score, 0);
+
+    // 计算小题分数，复合题按整体分数计算，不累加子题目分数
+    bigQuestion.totalScore = bigQuestion.subQuestions.reduce((total, subQ) => {
+        return total + (subQ.score || 0);
+    }, 0);
 
     // 更新试卷总分
     examForm.totalScore = examForm.questions.reduce((total, bigQ) => total + bigQ.totalScore, 0);
@@ -744,6 +556,122 @@ const addBigQuestion = () => {
     examForm.questions.push(newBigQuestion);
 }
 
+// 确保 SubQuestion 对象有所有必要的字段
+const ensureSubQuestionFields = (subQuestion: SubQuestion): void => {
+    if (!subQuestion.options) subQuestion.options = [];
+    if (!subQuestion.correctAnswers) subQuestion.correctAnswers = [];
+    if (!subQuestion.fillBlanks) subQuestion.fillBlanks = [];
+    if (!subQuestion.subQuestions) subQuestion.subQuestions = [];
+    if (subQuestion.correctAnswer === undefined) subQuestion.correctAnswer = null;
+    if (subQuestion.trueFalseAnswer === undefined) subQuestion.trueFalseAnswer = null;
+    if (!subQuestion.textAnswer) subQuestion.textAnswer = '';
+    if (!subQuestion.explanation) subQuestion.explanation = '';
+}
+
+// 复合题数据适配器
+const convertToCompositeData = (subQuestion: SubQuestion) => {
+    // 将我们的 SubQuestion 转换为复合题组件期望的格式
+    const compositeSubQuestions = (subQuestion.subQuestions || []).map((sq, index) => ({
+        id: index + 1, // 复合题组件期望数字ID
+        type: convertQuestionTypeToComposite(sq.type),
+        title: sq.title,
+        score: sq.score, // 确保分数能正确传递
+        data: convertSubQuestionData(sq),
+        correctAnswer: sq.correctAnswer,
+        correctAnswers: sq.correctAnswers,
+        answer: sq.trueFalseAnswer,
+        answers: sq.fillBlanks,
+        explanation: sq.explanation
+    }));
+
+    console.log('convertToCompositeData 调用:', {
+        subQuestionId: subQuestion.id,
+        subQuestions: compositeSubQuestions.map(sq => ({ id: sq.id, title: sq.title, score: sq.score }))
+    });
+
+    return { subQuestions: compositeSubQuestions };
+}
+
+// 将我们的题型转换为复合题组件期望的格式
+const convertQuestionTypeToComposite = (type: QuestionType): string => {
+    switch (type) {
+        case QuestionType.SINGLE_CHOICE:
+            return 'single';
+        case QuestionType.MULTIPLE_CHOICE:
+            return 'multiple';
+        case QuestionType.TRUE_FALSE:
+            return 'truefalse';
+        case QuestionType.FILL_BLANK:
+            return 'fillblank';
+        case QuestionType.SHORT_ANSWER:
+            return 'shortanswer';
+        default:
+            return 'single';
+    }
+}
+
+// 转换子题目数据
+const convertSubQuestionData = (subQuestion: SubQuestion): any => {
+    switch (subQuestion.type) {
+        case QuestionType.SINGLE_CHOICE:
+        case QuestionType.MULTIPLE_CHOICE:
+            return subQuestion.options || [];
+        case QuestionType.TRUE_FALSE:
+            return subQuestion.trueFalseAnswer;
+        case QuestionType.FILL_BLANK:
+            return subQuestion.fillBlanks || [];
+        case QuestionType.SHORT_ANSWER:
+            return subQuestion.textAnswer || '';
+        default:
+            return null;
+    }
+}
+
+// 更新复合题数据
+const updateCompositeData = (subQuestion: SubQuestion, compositeData: any) => {
+    // 将复合题组件的数据转换回我们的格式
+    if (compositeData && compositeData.subQuestions) {
+        subQuestion.subQuestions = compositeData.subQuestions.map((csq: any) => ({
+            id: `composite_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+            type: convertCompositeTypeToOurs(csq.type),
+            title: csq.title,
+            score: csq.score,
+            difficulty: 'medium' as const,
+            required: true,
+            options: csq.type === 'single' || csq.type === 'multiple' ? csq.data : [],
+            correctAnswer: csq.correctAnswer,
+            correctAnswers: csq.correctAnswers,
+            trueFalseAnswer: csq.answer,
+            fillBlanks: csq.answers,
+            textAnswer: csq.type === 'shortanswer' ? csq.data : '',
+            explanation: csq.explanation,
+            createTime: new Date().toISOString()
+        }));
+        
+        // 重新计算复合题的总分（所有子题目分数之和）
+        const newTotalScore = (subQuestion.subQuestions || []).reduce((total, sq) => total + (sq.score || 0), 0);
+        subQuestion.score = Math.round(newTotalScore * 10) / 10; // 保留一位小数
+        
+        console.log('复合题分数更新:', {
+            subQuestionId: subQuestion.id,
+            subQuestions: (subQuestion.subQuestions || []).map(sq => ({ title: sq.title, score: sq.score })),
+            totalScore: subQuestion.score
+        });
+    }
+}
+
+// 将复合题组件的题型转换回我们的格式
+const convertCompositeTypeToOurs = (type: string): QuestionType => {
+    const typeMap: { [key: string]: QuestionType } = {
+        'single': QuestionType.SINGLE_CHOICE,
+        'multiple': QuestionType.MULTIPLE_CHOICE,
+        'truefalse': QuestionType.TRUE_FALSE,
+        'fillblank': QuestionType.FILL_BLANK,
+        'shortanswer': QuestionType.SHORT_ANSWER
+    };
+    return typeMap[type] || QuestionType.SINGLE_CHOICE;
+}
+
 // 获取题型名称
 const getQuestionTypeName = (type: QuestionType): string => {
     const typeMap = {
@@ -759,108 +687,19 @@ const getQuestionTypeName = (type: QuestionType): string => {
 
 // 删除小题
 const deleteSubQuestion = (bigQuestionIndex: number, subQuestionIndex: number) => {
-    examForm.questions[bigQuestionIndex].subQuestions.splice(subQuestionIndex, 1);
-    updateBigQuestionScore(bigQuestionIndex);
-}
-
-// 更新单选题答案
-const updateSingleChoice = (bigQuestionIndex: number, subQuestionIndex: number, optionId: string) => {
     const subQuestion = examForm.questions[bigQuestionIndex].subQuestions[subQuestionIndex];
-    subQuestion.correctAnswer = optionId;
+    const questionTypeName = getQuestionTypeName(subQuestion.type);
 
-    // 更新选项的正确状态
-    if (subQuestion.options) {
-        subQuestion.options.forEach(option => {
-            option.isCorrect = option.id === optionId;
-        });
-    }
-}
-
-// 更新多选题答案
-const updateMultipleChoice = (bigQuestionIndex: number, subQuestionIndex: number, optionId: string, checked: boolean) => {
-    const subQuestion = examForm.questions[bigQuestionIndex].subQuestions[subQuestionIndex];
-    let answers = (subQuestion.correctAnswer as string[]) || [];
-
-    if (checked) {
-        if (!answers.includes(optionId)) {
-            answers.push(optionId);
+    dialog.info({
+        title: '删除确认',
+        content: `确定要删除这道${questionTypeName}吗？删除后无法恢复！`,
+        positiveText: '确定删除',
+        negativeText: '取消',
+        onPositiveClick: () => {
+            examForm.questions[bigQuestionIndex].subQuestions.splice(subQuestionIndex, 1);
+            updateBigQuestionScore(bigQuestionIndex);
         }
-    } else {
-        answers = answers.filter(id => id !== optionId);
-    }
-
-    subQuestion.correctAnswer = answers;
-
-    // 更新选项的正确状态
-    if (subQuestion.options) {
-        subQuestion.options.forEach(option => {
-            option.isCorrect = answers.includes(option.id);
-        });
-    }
-}
-
-// 更新判断题答案
-const updateTrueFalse = (bigQuestionIndex: number, subQuestionIndex: number, value: boolean) => {
-    const subQuestion = examForm.questions[bigQuestionIndex].subQuestions[subQuestionIndex];
-    subQuestion.trueFalseAnswer = value;
-}
-
-// 添加选项
-const addOption = (bigQuestionIndex: number, subQuestionIndex: number) => {
-    const subQuestion = examForm.questions[bigQuestionIndex].subQuestions[subQuestionIndex];
-    if (subQuestion.options) {
-        const newOptionId = `${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-        const optionLabels = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
-        const nextLabel = optionLabels[subQuestion.options.length] || String.fromCharCode(65 + subQuestion.options.length);
-
-        subQuestion.options.push({
-            id: newOptionId,
-            content: `选项${nextLabel}`,
-            isCorrect: false
-        });
-    }
-}
-
-// 删除选项
-const deleteOption = (bigQuestionIndex: number, subQuestionIndex: number, optionIndex: number) => {
-    const subQuestion = examForm.questions[bigQuestionIndex].subQuestions[subQuestionIndex];
-    if (subQuestion.options && subQuestion.options.length > 2) { // 至少保留2个选项
-        const deletedOption = subQuestion.options[optionIndex];
-        subQuestion.options.splice(optionIndex, 1);
-
-        // 如果删除的是正确答案，需要更新correctAnswer
-        if (subQuestion.type === QuestionType.SINGLE_CHOICE && subQuestion.correctAnswer === deletedOption.id) {
-            subQuestion.correctAnswer = '';
-        } else if (subQuestion.type === QuestionType.MULTIPLE_CHOICE && Array.isArray(subQuestion.correctAnswer)) {
-            subQuestion.correctAnswer = subQuestion.correctAnswer.filter(id => id !== deletedOption.id);
-        }
-    }
-}
-
-// 添加填空
-const addFillBlank = (bigQuestionIndex: number, subQuestionIndex: number) => {
-    const subQuestion = examForm.questions[bigQuestionIndex].subQuestions[subQuestionIndex];
-    if (subQuestion.fillBlanks) {
-        const newBlankId = `${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-        subQuestion.fillBlanks.push({
-            id: newBlankId,
-            content: '',
-            position: subQuestion.fillBlanks.length + 1
-        });
-    }
-}
-
-// 删除填空
-const deleteFillBlank = (bigQuestionIndex: number, subQuestionIndex: number, blankIndex: number) => {
-    const subQuestion = examForm.questions[bigQuestionIndex].subQuestions[subQuestionIndex];
-    if (subQuestion.fillBlanks && subQuestion.fillBlanks.length > 1) { // 至少保留1个填空
-        subQuestion.fillBlanks.splice(blankIndex, 1);
-
-        // 重新排序position
-        subQuestion.fillBlanks.forEach((blank, index) => {
-            blank.position = index + 1;
-        });
-    }
+    });
 }
 
 // 删除大题
@@ -908,7 +747,6 @@ const moveBigQuestion = (fromIndex: number, toIndex: number) => {
         // 重新排序
         examForm.questions.forEach((question, index) => {
             question.sort = index + 1;
-            question.title = `第${index + 1}大题`;
         });
     }
 }
@@ -916,14 +754,6 @@ const moveBigQuestion = (fromIndex: number, toIndex: number) => {
 // AI阅卷功能切换
 const toggleAIGrading = () => {
     examForm.useAIGrading = !examForm.useAIGrading;
-
-    // 显示状态变更提示
-    // const statusText = examForm.useAIGrading ? '已启用' : '已关闭';
-    // dialog.success({
-    //     title: 'AI阅卷功能',
-    //     content: `AI阅卷功能${statusText}`,
-    //     positiveText: '确定'
-    // });
 };
 
 // 批量设置分数相关状态和方法
@@ -957,6 +787,41 @@ const handleBatchScoreConfirm = (updatedQuestions: BigQuestion[]) => {
     // 更新试卷数据
     examForm.questions = updatedQuestions;
 
+    // 处理复合题的分数同步 - 确保复合题内部小题分数被正确更新
+    examForm.questions.forEach(bigQuestion => {
+        bigQuestion.subQuestions.forEach(subQuestion => {
+            if (subQuestion.type === QuestionType.COMPOSITE && subQuestion.subQuestions && subQuestion.subQuestions.length > 0) {
+                // 如果在BatchSetScoreModal中没有单独设置小题分数，就平均分配
+                const totalSubQuestions = subQuestion.subQuestions.length;
+                const newTotalScore = subQuestion.score;
+                
+                // 检查是否需要平均分配（当所有小题分数为0或总分不匹配时）
+                const currentSubQuestionsTotal = subQuestion.subQuestions.reduce((total, sq) => total + (sq.score || 0), 0);
+                const shouldRedistribute = Math.abs(currentSubQuestionsTotal - newTotalScore) > 0.01;
+                
+                if (shouldRedistribute && totalSubQuestions > 0) {
+                    // 平均分配分数到各个小题（保留一位小数）
+                    const averageScore = Math.round((newTotalScore / totalSubQuestions) * 10) / 10;
+                    
+                    subQuestion.subQuestions.forEach((sq, index) => {
+                        if (index === totalSubQuestions - 1) {
+                            // 最后一题承担余数，确保总分准确
+                            sq.score = Math.round((newTotalScore - averageScore * (totalSubQuestions - 1)) * 10) / 10;
+                        } else {
+                            sq.score = averageScore;
+                        }
+                    });
+                    
+                    console.log('复合题分数重新分配:', {
+                        questionId: subQuestion.id,
+                        totalScore: newTotalScore,
+                        subQuestionScores: subQuestion.subQuestions.map(sq => sq.score)
+                    });
+                }
+            }
+        });
+    });
+
     // 重新计算试卷总分
     examForm.totalScore = examForm.questions.reduce((total, bigQ) => total + bigQ.totalScore, 0);
 };
@@ -988,6 +853,7 @@ const examSettingsData = computed(() => ({
     passScore: examForm.passScore,
     participants: 'all' as 'all' | 'by_school',
     selectedClasses: [],
+    maxParticipants: 0,
     instructions: examForm.instructions,
 
     // 考试模式专用
@@ -1067,31 +933,33 @@ const handleQuestionBankConfirm = (selectedQuestions: any[]) => {
             score: question.score,
             difficulty: question.difficulty,
             required: true,
+            explanation: '', // 添加默认的解析字段
+            textAnswer: '', // 添加默认的文本答案字段
             createTime: new Date().toISOString()
         };
 
         // 根据题型初始化不同的字段
         if (questionType === 'single_choice') {
             newSubQuestion.options = [
-                { id: '1', content: '选项A', isCorrect: false },
-                { id: '2', content: '选项B', isCorrect: false },
-                { id: '3', content: '选项C', isCorrect: false },
-                { id: '4', content: '选项D', isCorrect: false }
+                { content: '选项A' },
+                { content: '选项B' },
+                { content: '选项C' },
+                { content: '选项D' }
             ];
-            newSubQuestion.correctAnswer = '';
+            newSubQuestion.correctAnswer = null;
         } else if (questionType === 'multiple_choice') {
             newSubQuestion.options = [
-                { id: '1', content: '选项A', isCorrect: false },
-                { id: '2', content: '选项B', isCorrect: false },
-                { id: '3', content: '选项C', isCorrect: false },
-                { id: '4', content: '选项D', isCorrect: false }
+                { content: '选项A' },
+                { content: '选项B' },
+                { content: '选项C' },
+                { content: '选项D' }
             ];
-            newSubQuestion.correctAnswer = [];
+            newSubQuestion.correctAnswers = [];
         } else if (questionType === 'true_false') {
-            newSubQuestion.trueFalseAnswer = undefined;
+            newSubQuestion.trueFalseAnswer = null;
         } else if (questionType === 'fill_blank') {
             newSubQuestion.fillBlanks = [
-                { id: '1', content: '', position: 1 }
+                { content: '', score: 1, caseSensitive: false }
             ];
         } else if (questionType === 'short_answer') {
             newSubQuestion.textAnswer = '';
@@ -1215,237 +1083,13 @@ const previewExam = () => {
     router.push('/teacher/exam-management/preview');
 }
 
-// 复合题相关方法
-const addCompositeSubQuestion = (bigQuestionIndex: number, subQuestionIndex: number) => {
-    const subQuestion = examForm.questions[bigQuestionIndex].subQuestions[subQuestionIndex];
-    if (!subQuestion.subQuestions) {
-        subQuestion.subQuestions = [];
-    }
-
-    const newSubSubQuestion: SubQuestion = {
-        id: `${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
-        type: QuestionType.SINGLE_CHOICE,
-        title: '',
-        score: 2,
-        difficulty: 'medium',
-        required: true,
-        options: [
-            { id: '1', content: '选项A', isCorrect: false },
-            { id: '2', content: '选项B', isCorrect: false },
-            { id: '3', content: '选项C', isCorrect: false },
-            { id: '4', content: '选项D', isCorrect: false }
-        ],
-        correctAnswer: '',
-        explanation: '这是复合题子题的答案解析示例。',
-        createTime: new Date().toISOString()
-    };
-
-    subQuestion.subQuestions.push(newSubSubQuestion);
-    updateBigQuestionScore(bigQuestionIndex);
-}
-
-const deleteCompositeSubQuestion = (bigQuestionIndex: number, subQuestionIndex: number, compSubIndex: number) => {
-    const subQuestion = examForm.questions[bigQuestionIndex].subQuestions[subQuestionIndex];
-    if (subQuestion.subQuestions) {
-        subQuestion.subQuestions.splice(compSubIndex, 1);
-        updateBigQuestionScore(bigQuestionIndex);
-    }
-}
-
-// 复合题选项管理
-const updateCompositeChoice = (bigQuestionIndex: number, subQuestionIndex: number, compSubIndex: number, optionId: string) => {
-    const compositeSubQ = examForm.questions[bigQuestionIndex].subQuestions[subQuestionIndex].subQuestions?.[compSubIndex];
-    if (compositeSubQ) {
-        compositeSubQ.correctAnswer = optionId;
-        // 更新选项的正确状态
-        if (compositeSubQ.options) {
-            compositeSubQ.options.forEach(option => {
-                option.isCorrect = option.id === optionId;
-            });
-        }
-    }
-}
-
-const updateCompositeMultiChoice = (bigQuestionIndex: number, subQuestionIndex: number, compSubIndex: number, optionId: string, checked: boolean) => {
-    const compositeSubQ = examForm.questions[bigQuestionIndex].subQuestions[subQuestionIndex].subQuestions?.[compSubIndex];
-    if (compositeSubQ) {
-        let answers = (compositeSubQ.correctAnswer as string[]) || [];
-
-        if (checked) {
-            if (!answers.includes(optionId)) {
-                answers.push(optionId);
-            }
-        } else {
-            answers = answers.filter(id => id !== optionId);
-        }
-
-        compositeSubQ.correctAnswer = answers;
-
-        // 更新选项的正确状态
-        if (compositeSubQ.options) {
-            compositeSubQ.options.forEach(option => {
-                option.isCorrect = answers.includes(option.id);
-            });
-        }
-    }
-}
-
-// 更新复合题判断题答案
-const updateCompositeTrueFalse = (bigQuestionIndex: number, subQuestionIndex: number, compSubIndex: number, value: boolean) => {
-    const compositeSubQ = examForm.questions[bigQuestionIndex].subQuestions[subQuestionIndex].subQuestions?.[compSubIndex];
-    if (compositeSubQ) {
-        compositeSubQ.trueFalseAnswer = value;
-    }
-}
-
-const addCompositeOption = (bigQuestionIndex: number, subQuestionIndex: number, compSubIndex: number) => {
-    const compositeSubQ = examForm.questions[bigQuestionIndex].subQuestions[subQuestionIndex].subQuestions?.[compSubIndex];
-    if (compositeSubQ && compositeSubQ.options) {
-        const newOptionId = `${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-        const optionLabels = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
-        const nextLabel = optionLabels[compositeSubQ.options.length] || String.fromCharCode(65 + compositeSubQ.options.length);
-
-        compositeSubQ.options.push({
-            id: newOptionId,
-            content: `选项${nextLabel}`,
-            isCorrect: false
-        });
-    }
-}
-
-const deleteCompositeOption = (bigQuestionIndex: number, subQuestionIndex: number, compSubIndex: number, optionIndex: number) => {
-    const compositeSubQ = examForm.questions[bigQuestionIndex].subQuestions[subQuestionIndex].subQuestions?.[compSubIndex];
-    if (compositeSubQ && compositeSubQ.options && compositeSubQ.options.length > 2) { // 至少保留2个选项
-        const deletedOption = compositeSubQ.options[optionIndex];
-        compositeSubQ.options.splice(optionIndex, 1);
-
-        // 如果删除的是正确答案，需要更新correctAnswer
-        if (compositeSubQ.type === QuestionType.SINGLE_CHOICE && compositeSubQ.correctAnswer === deletedOption.id) {
-            compositeSubQ.correctAnswer = '';
-        } else if (compositeSubQ.type === QuestionType.MULTIPLE_CHOICE && Array.isArray(compositeSubQ.correctAnswer)) {
-            compositeSubQ.correctAnswer = compositeSubQ.correctAnswer.filter(id => id !== deletedOption.id);
-        }
-    }
-}
-
-// 修改复合题子题目类型
-const changeCompositeSubQuestionType = (bigQuestionIndex: number, subQuestionIndex: number, compSubIndex: number, newType: string) => {
-    const compositeSubQ = examForm.questions[bigQuestionIndex].subQuestions[subQuestionIndex].subQuestions?.[compSubIndex];
-    if (compositeSubQ) {
-        compositeSubQ.type = newType as QuestionType;
-
-        // 根据新题型重新初始化相关字段
-        switch (newType as QuestionType) {
-            case QuestionType.SINGLE_CHOICE:
-                compositeSubQ.options = [
-                    { id: '1', content: '选项A', isCorrect: false },
-                    { id: '2', content: '选项B', isCorrect: false },
-                    { id: '3', content: '选项C', isCorrect: false },
-                    { id: '4', content: '选项D', isCorrect: false }
-                ];
-                compositeSubQ.correctAnswer = '';
-                delete compositeSubQ.trueFalseAnswer;
-                break;
-
-            case QuestionType.MULTIPLE_CHOICE:
-                compositeSubQ.options = [
-                    { id: '1', content: '选项A', isCorrect: false },
-                    { id: '2', content: '选项B', isCorrect: false },
-                    { id: '3', content: '选项C', isCorrect: false },
-                    { id: '4', content: '选项D', isCorrect: false }
-                ];
-                compositeSubQ.correctAnswer = [];
-                delete compositeSubQ.trueFalseAnswer;
-                break;
-
-            case QuestionType.TRUE_FALSE:
-                compositeSubQ.trueFalseAnswer = undefined; // 初始状态不选择任何选项
-                delete compositeSubQ.options;
-                delete compositeSubQ.correctAnswer;
-                break;
-        }
-    }
-}
-
-// 保存题目
-// const saveSubQuestion = (bigQuestionIndex: number, subQuestionIndex: number) => {
-//     const subQuestion = examForm.questions[bigQuestionIndex].subQuestions[subQuestionIndex];
-
-//     // 验证题目数据
-//     if (!subQuestion.title.trim()) {
-//         dialog.warning({
-//             title: '输入提示',
-//             content: '请输入题目内容',
-//             positiveText: '确定'
-//         });
-//         return;
-//     }
-
-//     // 根据题型验证必要字段
-//     switch (subQuestion.type) {
-//         case QuestionType.SINGLE_CHOICE:
-//         case QuestionType.MULTIPLE_CHOICE:
-//             if (!subQuestion.options || subQuestion.options.length < 2) {
-//                 dialog.warning({
-//                     title: '输入提示',
-//                     content: '选择题至少需要2个选项',
-//                     positiveText: '确定'
-//                 });
-//                 return;
-//             }
-//             if (!subQuestion.correctAnswer ||
-//                 (Array.isArray(subQuestion.correctAnswer) && subQuestion.correctAnswer.length === 0)) {
-//                 dialog.warning({
-//                     title: '输入提示',
-//                     content: '请设置正确答案',
-//                     positiveText: '确定'
-//                 });
-//                 return;
-//             }
-//             break;
-
-//         case QuestionType.FILL_BLANK:
-//             if (!subQuestion.fillBlanks || subQuestion.fillBlanks.length === 0) {
-//                 dialog.warning({
-//                     title: '输入提示',
-//                     content: '填空题至少需要1个填空',
-//                     positiveText: '确定'
-//                 });
-//                 return;
-//             }
-//             if (subQuestion.fillBlanks.some(blank => !blank.content.trim())) {
-//                 dialog.warning({
-//                     title: '输入提示',
-//                     content: '请填写所有填空的正确答案',
-//                     positiveText: '确定'
-//                 });
-//                 return;
-//             }
-//             break;
-//     }
-
-//     updateBigQuestionScore(bigQuestionIndex);
-//     dialog.success({
-//         title: '保存成功',
-//         content: '题目保存成功！',
-//         positiveText: '确定'
-//     });
-// }
-
-// 预览题目
-const previewSubQuestion = (bigQuestionIndex: number, subQuestionIndex: number) => {
-    const subQuestion = examForm.questions[bigQuestionIndex].subQuestions[subQuestionIndex];
-    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;
@@ -1455,12 +1099,12 @@ const restoreExamData = () => {
             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);
@@ -1494,7 +1138,7 @@ watch(
             };
             sessionStorage.setItem('examPreviewData', JSON.stringify(examData));
             isAutoSaved.value = true; // 保存完成后标记为已保存
-            
+
             // 3秒后隐藏保存提示
             setTimeout(() => {
                 isAutoSaved.value = false;
@@ -1512,8 +1156,7 @@ const isAutoSaved = ref(false);
 </script>
 
 <style scoped>
-
-.exam-container{
+.exam-container {
     background-color: #fff;
     padding: 10px;
 }
@@ -1555,6 +1198,7 @@ const isAutoSaved = ref(false);
         opacity: 0;
         transform: translateY(-4px);
     }
+
     to {
         opacity: 1;
         transform: translateY(0);
@@ -1576,6 +1220,26 @@ const isAutoSaved = ref(false);
     padding: 12px;
     margin-bottom: 15px 0;
 }
+.q-title{
+    font-size: 16px;
+    font-weight: 600;
+    /* margin-bottom: 10px; */
+}
+
+.sub-question-header{
+    display: flex;
+    justify-content: space-between;
+    padding: 10px 0;
+}
+
+.sub-question-number{
+    font-size: 18px;
+    font-weight: 600;
+}
+
+.mt-6 {
+    margin-top: 6px;
+}
 
 .required::before {
     content: '*';
@@ -1586,6 +1250,8 @@ const isAutoSaved = ref(false);
     display: flex;
 }
 
+
+
 .justify-between {
     justify-content: space-between;
     align-items: center;
diff --git a/src/views/teacher/ExamPages/AddQuestion.vue b/src/views/teacher/ExamPages/AddQuestion.vue
index 824eb0d..5aa5a8f 100644
--- a/src/views/teacher/ExamPages/AddQuestion.vue
+++ b/src/views/teacher/ExamPages/AddQuestion.vue
@@ -252,6 +252,7 @@ import { useRouter, useRoute } from 'vue-router';
 import { useMessage } from 'naive-ui';
 import { ArrowBackOutline } from '@vicons/ionicons5';
 import QuestionTypeContainer from '@/components/teacher/QuestionTypeContainer.vue';
+import { ExamApi } from '@/api';
 
 // 路由和消息
 const router = useRouter();
@@ -259,9 +260,10 @@ const route = useRoute();
 const message = useMessage();
 
 // 编辑模式判断
-const questionId = route.params.id as string | undefined;
+const questionId = route.params.questionId as string | undefined;
 const isEditMode = ref(!!questionId);
 
+
 // 表单引用
 const formRef = ref();
 const saving = ref(false);
@@ -382,6 +384,29 @@ const goBack = () => {
     router.back();
 };
 
+// 类型映射函数：将字符串类型转换为数字类型
+const getQuestionTypeNumber = (type: string): number => {
+    const typeMap: Record<string, number> = {
+        'single_choice': 0,    // 单选题
+        'multiple_choice': 1,  // 多选题
+        'true_false': 2,       // 判断题
+        'fill_blank': 3,       // 填空题
+        'short_answer': 4,     // 简答题
+        'composite': 5         // 复合题
+    };
+    return typeMap[type] || 0;
+};
+
+// 难度映射函数：将字符串难度转换为数字
+const getDifficultyNumber = (difficulty: string): number => {
+    const difficultyMap: Record<string, number> = {
+        'easy': 1,     // 简单
+        'medium': 2,   // 中等
+        'hard': 3      // 困难
+    };
+    return difficultyMap[difficulty] || 1;
+};
+
 // 保存试题
 const saveQuestion = async () => {
     try {
@@ -395,22 +420,33 @@ const saveQuestion = async () => {
 
         saving.value = true;
 
-        // 构建保存数据
-        const saveData = buildSaveData();
-
-        // 模拟保存API - 根据编辑模式调用不同接口
-        if (isEditMode.value && questionId) {
-            await mockUpdateQuestion(questionId, saveData);
-            console.log('更新试题数据:', saveData);
-            message.success('试题更新成功');
-        } else {
-            await mockCreateQuestion(saveData);
-            console.log('保存试题数据:', saveData);
-            message.success('试题保存成功');
+        // 获取题库ID（可能从路由参数或者查询参数获取）
+        // 如果从题库管理页面跳转过来，应该有bankId或者通过其他方式传递
+        let bankId = route.params.bankId as string || route.params.id as string || route.query.bankId as string;
+        
+        if (!bankId) {
+            // 尝试从浏览器历史记录或者本地存储获取
+            const referrer = document.referrer;
+            const bankIdMatch = referrer.match(/question-bank\/([^\/]+)\/questions/);
+            if (bankIdMatch) {
+                bankId = bankIdMatch[1];
+            }
+        }
+        
+        if (!bankId) {
+            message.error('缺少题库ID参数，请从题库管理页面进入');
+            return;
         }
 
-        // 返回试题管理页面
-        router.push('/teacher/exam-management/question-management');
+        // 根据编辑模式调用不同接口
+        if (isEditMode.value && questionId) {
+            // TODO: 实现编辑模式的接口调用
+            message.info('编辑模式暂未实现');
+            return;
+        } else {
+            // 新增模式 - 按照接口调用顺序执行
+            await createNewQuestion(bankId);
+        }
 
     } catch (error: any) {
         console.error('保存试题失败:', error);
@@ -439,6 +475,99 @@ const saveQuestion = async () => {
     }
 };
 
+// 创建新题目的完整流程
+const createNewQuestion = async (bankId: string) => {
+    try {
+        // 第一步：添加题干，获取questionId
+        const questionData = {
+            type: getQuestionTypeNumber(questionForm.type),
+            content: questionForm.title,
+            analysis: questionForm.explanation || '',
+            difficulty: getDifficultyNumber(questionForm.difficulty),
+            score: questionForm.score
+        };
+
+        console.log('🚀 第一步：创建题目题干:', questionData);
+        const questionResponse = await ExamApi.createQuestion(questionData);
+        
+        if (!questionResponse.data) {
+            throw new Error('创建题目失败，未返回题目ID');
+        }
+
+        const createdQuestionId = questionResponse.data;
+        console.log('✅ 题目创建成功，questionId:', createdQuestionId);
+
+        // 第二步：根据题型添加选项和答案
+        if (questionForm.type === 'single_choice') {
+            await handleSingleChoiceQuestion(createdQuestionId);
+        }
+        // TODO: 处理其他题型
+        // else if (questionForm.type === 'multiple_choice') {
+        //     await handleMultipleChoiceQuestion(createdQuestionId);
+        // } else if (questionForm.type === 'true_false') {
+        //     await handleTrueFalseQuestion(createdQuestionId);
+        // } 
+        // 其他题型暂不处理
+
+        // 最后一步：将题目绑定到题库
+        const questionRepoData = {
+            repoId: bankId,
+            questionId: createdQuestionId
+        };
+
+        console.log('🚀 最后一步：绑定题目到题库:', questionRepoData);
+        await ExamApi.createQuestionRepo(questionRepoData);
+        console.log('✅ 题目绑定到题库成功');
+
+        message.success('题目保存成功');
+        
+        // 返回题库管理页面
+        router.push(`/teacher/exam-management/question-bank/${bankId}/questions`);
+
+    } catch (error: any) {
+        console.error('创建题目流程失败:', error);
+        throw error;
+    }
+};
+
+// 处理单选题的选项和答案
+const handleSingleChoiceQuestion = async (questionId: string) => {
+    try {
+        // 添加选项
+        const optionPromises = questionForm.options.map((option, index) => {
+            const isCorrect = questionForm.correctAnswer === index ? 1 : 0;
+            return ExamApi.createQuestionOption({
+                questionId,
+                content: option.content,
+                izCorrent: isCorrect,
+                orderNo: index + 1
+            });
+        });
+
+        console.log('🚀 第二步：添加选项，选项数量:', questionForm.options.length);
+        await Promise.all(optionPromises);
+        console.log('✅ 选项添加成功');
+
+        // 添加正确答案
+        if (questionForm.correctAnswer !== null) {
+            const correctOption = questionForm.options[questionForm.correctAnswer];
+            const answerData = {
+                questionId,
+                answerText: correctOption.content,
+                orderNo: 1
+            };
+
+            console.log('🚀 第三步：添加答案:', answerData);
+            await ExamApi.createQuestionAnswer(answerData);
+            console.log('✅ 答案添加成功');
+        }
+
+    } catch (error: any) {
+        console.error('处理单选题失败:', error);
+        throw error;
+    }
+};
+
 // 验证答案设置
 const validateAnswers = (): boolean => {
     console.log(questionForm);
@@ -449,12 +578,30 @@ const validateAnswers = (): boolean => {
     
     switch (questionForm.type) {
         case 'single_choice':
+            // 检查选项内容
+            if (questionForm.options.length < 2) {
+                message.error('单选题至少需要2个选项');
+                return false;
+            }
+            if (questionForm.options.some(option => !option.content.trim())) {
+                message.error('请填写所有选项的内容');
+                return false;
+            }
             if (questionForm.correctAnswer === null) {
                 message.error('请设置单选题的正确答案');
                 return false;
             }
             break;
         case 'multiple_choice':
+            // 检查选项内容
+            if (questionForm.options.length < 2) {
+                message.error('多选题至少需要2个选项');
+                return false;
+            }
+            if (questionForm.options.some(option => !option.content.trim())) {
+                message.error('请填写所有选项的内容');
+                return false;
+            }
             if (questionForm.correctAnswers.length === 0) {
                 message.error('请设置多选题的正确答案');
                 return false;
@@ -623,51 +770,6 @@ const validateCompositeQuestion = (): boolean => {
     return true;
 };
 
-// 构建保存数据
-const buildSaveData = () => {
-    const baseData = {
-        type: questionForm.type,
-        category: questionForm.category,
-        difficulty: questionForm.difficulty,
-        score: questionForm.score,
-        title: questionForm.title,
-        explanation: questionForm.explanation
-    };
-
-    switch (questionForm.type) {
-        case 'single_choice':
-        case 'multiple_choice':
-            return {
-                ...baseData,
-                options: questionForm.options,
-                correctAnswer: questionForm.type === 'single_choice' ? questionForm.correctAnswer : undefined,
-                correctAnswers: questionForm.type === 'multiple_choice' ? questionForm.correctAnswers : undefined
-            };
-        case 'true_false':
-            return {
-                ...baseData,
-                answer: questionForm.trueFalseAnswer
-            };
-        case 'fill_blank':
-            return {
-                ...baseData,
-                answers: questionForm.fillBlankAnswers.filter(answer => answer.content.trim())
-            };
-        case 'short_answer':
-            return {
-                ...baseData,
-                answer: questionForm.shortAnswer
-            };
-        case 'composite':
-            return {
-                ...baseData,
-                compositeData: questionForm.compositeData
-            };
-        default:
-            return baseData;
-    }
-};
-
 // 组件挂载
 onMounted(async () => {
     // 如果是编辑模式，加载题目数据
@@ -676,164 +778,22 @@ onMounted(async () => {
     }
 });
 
-// 加载题目数据
+// 加载题目数据（编辑模式使用）
 const loadQuestionData = async (id: string) => {
     try {
-        // 模拟API调用
-        const response = await mockGetQuestionById(id);
-        
-        if (response.success && response.data) {
-            const questionData = response.data as any; // 使用any类型避免复杂的类型定义
-            
-            // 回显基本信息
-            questionForm.type = questionData.type;
-            questionForm.category = questionData.category;
-            questionForm.difficulty = questionData.difficulty;
-            questionForm.score = questionData.score;
-            questionForm.title = questionData.title;
-            questionForm.explanation = questionData.explanation || '';
-            
-            // 根据题型回显具体数据
-            switch (questionData.type) {
-                case 'single_choice':
-                    questionForm.options = questionData.options || [];
-                    questionForm.correctAnswer = questionData.correctAnswer;
-                    break;
-                case 'multiple_choice':
-                    questionForm.options = questionData.options || [];
-                    questionForm.correctAnswers = questionData.correctAnswers || [];
-                    break;
-                case 'true_false':
-                    questionForm.trueFalseAnswer = questionData.answer;
-                    break;
-                case 'fill_blank':
-                    questionForm.fillBlankAnswers = questionData.answers || [];
-                    break;
-                case 'short_answer':
-                    questionForm.shortAnswer = questionData.answer || '';
-                    break;
-                case 'composite':
-                    questionForm.compositeData = questionData.compositeData || { subQuestions: [] };
-                    break;
-            }
-            
-            message.success('题目数据加载成功');
-        } else {
-            message.error('加载题目数据失败');
-        }
+        // TODO: 实现编辑模式的数据加载
+        // const response = await ExamApi.getQuestionDetail(id);
+        // if (response.data) {
+        //     // 根据返回的数据回显表单
+        // }
+        console.log('加载题目数据，题目ID:', id);
+        message.info('编辑模式数据加载暂未实现');
     } catch (error) {
         console.error('加载题目数据错误:', error);
         message.error('加载题目数据失败，请检查网络连接');
     }
 };
 
-// 模拟获取题目数据的API
-const mockGetQuestionById = async (id: string) => {
-    // 模拟API延迟
-    await new Promise(resolve => setTimeout(resolve, 500));
-    
-    // 模拟返回数据
-    const mockQuestions = {
-        '1': {
-            type: 'single_choice',
-            category: 'exam',
-            difficulty: 'medium',
-            score: 5,
-            title: '以下哪个是Vue.js的核心特性？',
-            explanation: 'Vue.js的核心特性包括响应式数据绑定、组件系统等',
-            options: [
-                { content: '响应式数据绑定' },
-                { content: '虚拟DOM' },
-                { content: '组件系统' },
-                { content: '以上都是' }
-            ],
-            correctAnswer: 3
-        },
-        '2': {
-            type: 'composite',
-            category: 'exam',
-            difficulty: 'hard',
-            score: 20,
-            title: '阅读以下关于JavaScript的材料，并回答相关问题。\\n\\nJavaScript是一种高级的、解释型的编程语言，具有动态类型、原型继承等特性。它最初被设计用于网页开发，但现在已经扩展到服务器端、移动应用等多个领域。',
-            explanation: '这是一道综合性的复合题',
-            compositeData: {
-                subQuestions: [
-                    {
-                        id: 1,
-                        type: 'single',
-                        title: 'JavaScript属于什么类型的编程语言？',
-                        score: 5,
-                        data: [
-                            { option: '编译型', id: 1 },
-                            { option: '解释型', id: 2 },
-                            { option: '汇编型', id: 3 },
-                            { option: '机器型', id: 4 }
-                        ],
-                        correctAnswer: 1,
-                        explanation: 'JavaScript是解释型编程语言'
-                    },
-                    {
-                        id: 2,
-                        type: 'multiple',
-                        title: 'JavaScript有哪些特性？',
-                        score: 10,
-                        data: [
-                            { option: '动态类型', id: 1 },
-                            { option: '原型继承', id: 2 },
-                            { option: '静态类型', id: 3 },
-                            { option: '面向对象', id: 4 }
-                        ],
-                        correctAnswers: [0, 1, 3],
-                        explanation: 'JavaScript具有动态类型、原型继承和面向对象等特性'
-                    }
-                ]
-            }
-        }
-    };
-    
-    const question = mockQuestions[id as keyof typeof mockQuestions];
-    
-    if (question) {
-        return {
-            success: true,
-            data: question
-        };
-    } else {
-        return {
-            success: false,
-            message: '题目不存在'
-        };
-    }
-};
-
-// 模拟创建题目的API
-const mockCreateQuestion = async (data: any) => {
-    // 模拟API延迟
-    await new Promise(resolve => setTimeout(resolve, 1000));
-    
-    // 这里应该调用真实的API
-    console.log('创建题目:', data);
-    
-    return {
-        success: true,
-        data: { id: Math.random().toString(36).substr(2, 9) }
-    };
-};
-
-// 模拟更新题目的API
-const mockUpdateQuestion = async (id: string, data: any) => {
-    // 模拟API延迟
-    await new Promise(resolve => setTimeout(resolve, 1000));
-    
-    // 这里应该调用真实的API
-    console.log('更新题目:', id, data);
-    
-    return {
-        success: true,
-        data: { id }
-    };
-};
-
 
 const getDifficultyLabel = (difficulty: string): string => {
     const difficultyMap: { [key: string]: string } = {
diff --git a/src/views/teacher/ExamPages/ExamLibrary.vue b/src/views/teacher/ExamPages/ExamLibrary.vue
index 08a49f2..a3d159d 100644
--- a/src/views/teacher/ExamPages/ExamLibrary.vue
+++ b/src/views/teacher/ExamPages/ExamLibrary.vue
@@ -168,9 +168,6 @@ const paginationConfig = computed(() => ({
     pageSizes: [10, 20, 50, 100],
     showSizePicker: true,
     showQuickJumper: true,
-    goto: ()=>{
-        return '跳转'
-    },
     prefix: (info: { itemCount?: number }) => {
         const itemCount = info.itemCount || 0;
         return `共 ${itemCount} 条`;
diff --git a/src/views/teacher/ExamPages/ExamPreview.vue b/src/views/teacher/ExamPages/ExamPreview.vue
index 977eb93..5115b31 100644
--- a/src/views/teacher/ExamPages/ExamPreview.vue
+++ b/src/views/teacher/ExamPages/ExamPreview.vue
@@ -64,7 +64,6 @@
                         </div>
 
                         <div class="question-title">{{ subQuestion.title }}</div>
-
                         <!-- 单选题 -->
                         <div v-if="subQuestion.type === 'single_choice'" class="question-content">
                             <div class="options">
@@ -116,13 +115,13 @@
                             <div class="true-false-options">
                                 <div class="option-item"
                                     :class="{ 'correct-option': subQuestion.trueFalseAnswer === true }">
-                                    <span class="option-label">A</span>
+                                    <span class="option-label"></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-label"></span>
                                     <span class="option-content">错误</span>
                                     <span v-if="subQuestion.trueFalseAnswer === false" class="correct-mark">✓</span>
                                 </div>
@@ -131,7 +130,7 @@
                             <div class="answer-analysis">
                                 <div class="correct-answer">
                                     <span class="label">正确答案：</span>
-                                    <span class="answer">{{ subQuestion.trueFalseAnswer ? 'A 正确' : 'B 错误' }}</span>
+                                    <span class="answer">{{ subQuestion.trueFalseAnswer === undefined ? '未设置答案' : (subQuestion.trueFalseAnswer === true ? '正确' : '错误') }}</span>
                                 </div>
                                 <div v-if="subQuestion.explanation" class="explanation">
                                     <span class="label">答案解析：</span>
@@ -182,6 +181,147 @@
                                 </div>
                             </div>
                         </div>
+
+                        <!-- 复合题 -->
+                        <div v-if="subQuestion.type === 'composite'" class="question-content">
+                            <div class="composite-questions">
+                                <!-- 复合题的子题目循环 -->
+                                <div v-for="(compSubQ, compIndex) in subQuestion.subQuestions" :key="compSubQ.id" class="composite-sub-question">
+                                    <div class="comp-question-header">
+                                        <span class="comp-question-number">{{ compIndex + 1 }}. {{ getQuestionTypeName(compSubQ.type) }}</span>
+                                        <span class="comp-question-score">{{ compSubQ.score }}分</span>
+                                    </div>
+                                    
+                                    <div class="comp-question-title">{{ compSubQ.title }}</div>
+                                    
+                                    <!-- 复合题中的单选题 -->
+                                    <div v-if="compSubQ.type === 'single_choice'" class="comp-question-content">
+                                        <div class="options">
+                                            <div v-for="(option, optIndex) in compSubQ.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(compSubQ) }}</span>
+                                            </div>
+                                            <div v-if="compSubQ.explanation" class="explanation">
+                                                <span class="label">答案解析：</span>
+                                                <p>{{ compSubQ.explanation }}</p>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <!-- 复合题中的多选题 -->
+                                    <div v-if="compSubQ.type === 'multiple_choice'" class="comp-question-content">
+                                        <div class="options">
+                                            <div v-for="(option, optIndex) in compSubQ.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(compSubQ) }}</span>
+                                            </div>
+                                            <div v-if="compSubQ.explanation" class="explanation">
+                                                <span class="label">答案解析：</span>
+                                                <p>{{ compSubQ.explanation }}</p>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <!-- 复合题中的判断题 -->
+                                    <div v-if="compSubQ.type === 'true_false'" class="comp-question-content">
+                                        <div class="true-false-options">
+                                            <div class="option-item"
+                                                :class="{ 'correct-option': compSubQ.trueFalseAnswer === true }">
+                                                <span class="option-label"></span>
+                                                <span class="option-content">正确</span>
+                                                <span v-if="compSubQ.trueFalseAnswer === true" class="correct-mark">✓</span>
+                                            </div>
+                                            <div class="option-item"
+                                                :class="{ 'correct-option': compSubQ.trueFalseAnswer === false }">
+                                                <span class="option-label"></span>
+                                                <span class="option-content">错误</span>
+                                                <span v-if="compSubQ.trueFalseAnswer === false" class="correct-mark">✓</span>
+                                            </div>
+                                        </div>
+                                        <!-- 答案解析 -->
+                                        <div class="answer-analysis">
+                                            <div class="correct-answer">
+                                                <span class="label">正确答案：</span>
+                                                <span class="answer">{{ compSubQ.trueFalseAnswer === undefined ? '未设置答案' : (compSubQ.trueFalseAnswer === true ? '正确' : '错误') }}</span>
+                                            </div>
+                                            <div v-if="compSubQ.explanation" class="explanation">
+                                                <span class="label">答案解析：</span>
+                                                <p>{{ compSubQ.explanation }}</p>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <!-- 复合题中的填空题 -->
+                                    <div v-if="compSubQ.type === 'fill_blank'" class="comp-question-content">
+                                        <div class="fill-blanks">
+                                            <div v-for="(blank,index) in compSubQ.fillBlanks" :key="blank.id" class="blank-item">
+                                                <span>第{{ index + 1 }}空：</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,index) in compSubQ.fillBlanks" :key="blank.id">
+                                                        第{{ index + 1 }}空：{{ blank.content || '未设置' }}
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div v-if="compSubQ.explanation" class="explanation">
+                                                <span class="label">答案解析：</span>
+                                                <p>{{ compSubQ.explanation }}</p>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <!-- 复合题中的简答题 -->
+                                    <div v-if="compSubQ.type === 'short_answer'" class="comp-question-content">
+                                        <div class="answer-area">
+                                            <div class="answer-text">{{ compSubQ.textAnswer || '未设置参考答案' }}</div>
+                                        </div>
+                                        <!-- 答案解析 -->
+                                        <div class="answer-analysis">
+                                            <div class="correct-answer">
+                                                <span class="label">参考答案：</span>
+                                                <p class="answer">{{ compSubQ.textAnswer || '未设置参考答案' }}</p>
+                                            </div>
+                                            <div v-if="compSubQ.explanation" class="explanation">
+                                                <span class="label">答案解析：</span>
+                                                <p>{{ compSubQ.explanation }}</p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <!-- 复合题整体解析 -->
+                            <div v-if="subQuestion.explanation" class="answer-analysis">
+                                <div class="explanation">
+                                    <span class="label">整体解析：</span>
+                                    <p>{{ subQuestion.explanation }}</p>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -658,6 +798,58 @@ onMounted(() => {
     line-height: 1.6;
 }
 
+/* 复合题样式 */
+.composite-questions {
+    margin-bottom: 20px;
+}
+
+.composite-sub-question {
+    background: #f8f9fa;
+    border: 1px solid #e8e8e8;
+    border-radius: 6px;
+    padding: 16px;
+    margin-bottom: 16px;
+}
+
+.composite-sub-question:last-child {
+    margin-bottom: 0;
+}
+
+.comp-question-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #e0e0e0;
+}
+
+.comp-question-number {
+    font-size: 14px;
+    font-weight: bold;
+    color: #666;
+}
+
+.comp-question-score {
+    background: #e6f7ff;
+    color: #1890ff;
+    padding: 2px 6px;
+    border-radius: 3px;
+    font-size: 11px;
+    font-weight: bold;
+}
+
+.comp-question-title {
+    font-size: 14px;
+    color: #333;
+    line-height: 1.6;
+    margin-bottom: 15px;
+}
+
+.comp-question-content {
+    margin-left: 0;
+}
+
 .no-data {
     background: white;
     border-radius: 8px;
diff --git a/src/views/teacher/ExamPages/ExamTaking.vue b/src/views/teacher/ExamPages/ExamTaking.vue
new file mode 100644
index 0000000..1acd038
--- /dev/null
+++ b/src/views/teacher/ExamPages/ExamTaking.vue
@@ -0,0 +1,1104 @@
+<template>
+    <div class="exam-taking-container">
+        <!-- 左侧时间和题目导航 -->
+        <div class="exam-sidebar">
+            <div class="exam-title">
+                <n-button quaternary circle size="large" @click="confirmExit" 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" :class="{ 'time-warning': remainingTime <= 300 }">{{ formatTime(remainingTime) }}</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="getNavItemClass(index)"
+                         @click="scrollToQuestion(index)">
+                        {{ index + 1 }}
+                    </div>
+                </div>
+                <div class="nav-legend">
+                    <div class="legend-item">
+                        <div class="legend-color unanswered"></div>
+                        <span>未答</span>
+                    </div>
+                    <div class="legend-item">
+                        <div class="legend-color answered"></div>
+                        <span>已答</span>
+                    </div>
+                    <div class="legend-item">
+                        <div class="legend-color current"></div>
+                        <span>当前</span>
+                    </div>
+                </div>
+            </div>
+
+            <div class="submit-section">
+                <n-button type="primary" size="large" block @click="confirmSubmit">
+                    提交试卷
+                </n-button>
+                <div class="submit-info">
+                    <span>已答：{{ answeredCount }}题</span>
+                    <span>未答：{{ unansweredCount }}题</span>
+                </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" :id="`question-${getQuestionIndex(bigIndex, subIndex)}`">
+                        <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="{ 'selected': userAnswers[subQuestion.id] === option.id }"
+                                    @click="selectSingleChoice(subQuestion.id, option.id)">
+                                    <span class="option-radio">
+                                        <n-radio :checked="userAnswers[subQuestion.id] === option.id" />
+                                    </span>
+                                    <span class="option-label">{{ String.fromCharCode(65 + optIndex) }}</span>
+                                    <span class="option-content">{{ option.content }}</span>
+                                </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="{ 'selected': isMultipleChoiceSelected(subQuestion.id, option.id) }"
+                                    @click="toggleMultipleChoice(subQuestion.id, option.id)">
+                                    <span class="option-checkbox">
+                                        <n-checkbox :checked="isMultipleChoiceSelected(subQuestion.id, option.id)" />
+                                    </span>
+                                    <span class="option-label">{{ String.fromCharCode(65 + optIndex) }}</span>
+                                    <span class="option-content">{{ option.content }}</span>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- 判断题 -->
+                        <div v-if="subQuestion.type === 'true_false'" class="question-content">
+                            <div class="true-false-options">
+                                <div class="option-item"
+                                    :class="{ 'selected': userAnswers[subQuestion.id] === true }"
+                                    @click="selectTrueFalse(subQuestion.id, true)">
+                                    <span class="option-radio">
+                                        <n-radio :checked="userAnswers[subQuestion.id] === true" />
+                                    </span>
+                                    <span class="option-content">正确</span>
+                                </div>
+                                <div class="option-item"
+                                    :class="{ 'selected': userAnswers[subQuestion.id] === false }"
+                                    @click="selectTrueFalse(subQuestion.id, false)">
+                                    <span class="option-radio">
+                                        <n-radio :checked="userAnswers[subQuestion.id] === false" />
+                                    </span>
+                                    <span class="option-content">错误</span>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- 填空题 -->
+                        <div v-if="subQuestion.type === 'fill_blank'" class="question-content">
+                            <div class="fill-blanks">
+                                <div v-for="(blank, blankIndex) in subQuestion.fillBlanks" :key="blank.id" class="blank-item">
+                                    <span>第{{ blankIndex + 1 }}空：</span>
+                                    <n-input 
+                                        :value="userAnswers[subQuestion.id] && userAnswers[subQuestion.id][blankIndex] ? userAnswers[subQuestion.id][blankIndex] : ''"
+                                        @input="updateFillBlank(subQuestion.id, blankIndex, $event)"
+                                        placeholder="请输入答案"
+                                        class="blank-input"
+                                    />
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- 简答题 -->
+                        <div v-if="subQuestion.type === 'short_answer'" class="question-content">
+                            <div class="answer-area">
+                                <n-input
+                                    v-model:value="userAnswers[subQuestion.id]"
+                                    type="textarea"
+                                    placeholder="请输入答案..."
+                                    :rows="6"
+                                    show-count
+                                    maxlength="1000"
+                                />
+                            </div>
+                        </div>
+
+                        <!-- 复合题 -->
+                        <div v-if="subQuestion.type === 'composite'" class="question-content">
+                            <div class="composite-questions">
+                                <!-- 复合题的子题目循环 -->
+                                <div v-for="(compSubQ, compIndex) in subQuestion.subQuestions" :key="compSubQ.id" class="composite-sub-question">
+                                    <div class="comp-question-header">
+                                        <span class="comp-question-number">{{ compIndex + 1 }}. {{ getQuestionTypeName(compSubQ.type) }}</span>
+                                        <span class="comp-question-score">{{ compSubQ.score }}分</span>
+                                    </div>
+                                    
+                                    <div class="comp-question-title">{{ compSubQ.title }}</div>
+                                    
+                                    <!-- 复合题中的单选题 -->
+                                    <div v-if="compSubQ.type === 'single_choice'" class="comp-question-content">
+                                        <div class="options">
+                                            <div v-for="(option, optIndex) in compSubQ.options" :key="option.id"
+                                                class="option-item" 
+                                                :class="{ 'selected': userAnswers[compSubQ.id] === option.id }"
+                                                @click="selectSingleChoice(compSubQ.id, option.id)">
+                                                <span class="option-radio">
+                                                    <n-radio :checked="userAnswers[compSubQ.id] === option.id" />
+                                                </span>
+                                                <span class="option-label">{{ String.fromCharCode(65 + optIndex) }}</span>
+                                                <span class="option-content">{{ option.content }}</span>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <!-- 复合题中的多选题 -->
+                                    <div v-if="compSubQ.type === 'multiple_choice'" class="comp-question-content">
+                                        <div class="options">
+                                            <div v-for="(option, optIndex) in compSubQ.options" :key="option.id"
+                                                class="option-item" 
+                                                :class="{ 'selected': isMultipleChoiceSelected(compSubQ.id, option.id) }"
+                                                @click="toggleMultipleChoice(compSubQ.id, option.id)">
+                                                <span class="option-checkbox">
+                                                    <n-checkbox :checked="isMultipleChoiceSelected(compSubQ.id, option.id)" />
+                                                </span>
+                                                <span class="option-label">{{ String.fromCharCode(65 + optIndex) }}</span>
+                                                <span class="option-content">{{ option.content }}</span>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <!-- 复合题中的判断题 -->
+                                    <div v-if="compSubQ.type === 'true_false'" class="comp-question-content">
+                                        <div class="true-false-options">
+                                            <div class="option-item"
+                                                :class="{ 'selected': userAnswers[compSubQ.id] === true }"
+                                                @click="selectTrueFalse(compSubQ.id, true)">
+                                                <span class="option-radio">
+                                                    <n-radio :checked="userAnswers[compSubQ.id] === true" />
+                                                </span>
+                                                <span class="option-content">正确</span>
+                                            </div>
+                                            <div class="option-item"
+                                                :class="{ 'selected': userAnswers[compSubQ.id] === false }"
+                                                @click="selectTrueFalse(compSubQ.id, false)">
+                                                <span class="option-radio">
+                                                    <n-radio :checked="userAnswers[compSubQ.id] === false" />
+                                                </span>
+                                                <span class="option-content">错误</span>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <!-- 复合题中的填空题 -->
+                                    <div v-if="compSubQ.type === 'fill_blank'" class="comp-question-content">
+                                        <div class="fill-blanks">
+                                            <div v-for="(blank, blankIndex) in compSubQ.fillBlanks" :key="blank.id" class="blank-item">
+                                                <span>第{{ blankIndex + 1 }}空：</span>
+                                                <n-input 
+                                                    :value="userAnswers[compSubQ.id] && userAnswers[compSubQ.id][blankIndex] ? userAnswers[compSubQ.id][blankIndex] : ''"
+                                                    @input="updateFillBlank(compSubQ.id, blankIndex, $event)"
+                                                    placeholder="请输入答案"
+                                                    class="blank-input"
+                                                />
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <!-- 复合题中的简答题 -->
+                                    <div v-if="compSubQ.type === 'short_answer'" class="comp-question-content">
+                                        <div class="answer-area">
+                                            <n-input
+                                                v-model:value="userAnswers[compSubQ.id]"
+                                                type="textarea"
+                                                placeholder="请输入答案..."
+                                                :rows="4"
+                                                show-count
+                                                maxlength="500"
+                                            />
+                                        </div>
+                                    </div>
+                                </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>
+
+        <!-- 提交确认弹窗 -->
+        <n-modal v-model:show="showSubmitModal" :mask-closable="false">
+            <n-card
+                style="width: 500px"
+                title="提交确认"
+                :bordered="false"
+                size="huge"
+                role="dialog"
+                aria-modal="true"
+            >
+                <div class="submit-confirm-content">
+                    <p>您确定要提交试卷吗？</p>
+                    <div class="answer-summary">
+                        <div class="summary-item">
+                            <span>总题数：</span>
+                            <span>{{ totalQuestions }}题</span>
+                        </div>
+                        <div class="summary-item">
+                            <span>已答题数：</span>
+                            <span class="answered">{{ answeredCount }}题</span>
+                        </div>
+                        <div class="summary-item">
+                            <span>未答题数：</span>
+                            <span class="unanswered">{{ unansweredCount }}题</span>
+                        </div>
+                    </div>
+                    <p class="warning-text" v-if="unansweredCount > 0">
+                        还有{{ unansweredCount }}题未作答，提交后将无法修改！
+                    </p>
+                </div>
+                <template #footer>
+                    <div class="modal-actions">
+                        <n-button @click="showSubmitModal = false">取消</n-button>
+                        <n-button type="primary" @click="submitExam">确认提交</n-button>
+                    </div>
+                </template>
+            </n-card>
+        </n-modal>
+
+        <!-- 退出确认弹窗 -->
+        <n-modal v-model:show="showExitModal" :mask-closable="false">
+            <n-card
+                style="width: 400px"
+                title="退出确认"
+                :bordered="false"
+                size="huge"
+                role="dialog"
+                aria-modal="true"
+            >
+                <p>您确定要退出考试吗？当前答题进度将会丢失！</p>
+                <template #footer>
+                    <div class="modal-actions">
+                        <n-button @click="showExitModal = false">取消</n-button>
+                        <n-button type="error" @click="exitExam">确认退出</n-button>
+                    </div>
+                </template>
+            </n-card>
+        </n-modal>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed, onBeforeUnmount } from 'vue'
+import { useRouter } from 'vue-router'
+import { NButton, NEmpty, NInput, NRadio, NCheckbox, NModal, NCard } from 'naive-ui'
+import { ArrowBackOutline } from '@vicons/ionicons5'
+
+const router = useRouter()
+const examData = ref<any>(null)
+const userAnswers = ref<Record<string, any>>({})
+const remainingTime = ref(3600) // 剩余时间（秒）
+const currentQuestionIndex = ref(0)
+const showSubmitModal = ref(false)
+const showExitModal = ref(false)
+const timer = ref<NodeJS.Timeout | null>(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 answeredCount = computed(() => {
+    return allQuestions.value.filter(q => isQuestionAnswered(q)).length
+})
+
+const unansweredCount = computed(() => {
+    return totalQuestions.value - answeredCount.value
+})
+
+// 判断题目是否已答
+const isQuestionAnswered = (question: any) => {
+    const answer = userAnswers.value[question.id]
+    if (answer === undefined || answer === null) return false
+    
+    if (question.type === 'fill_blank') {
+        return Array.isArray(answer) && answer.some(item => item && item.trim())
+    }
+    if (question.type === 'multiple_choice') {
+        return Array.isArray(answer) && answer.length > 0
+    }
+    if (typeof answer === 'string') {
+        return answer.trim() !== ''
+    }
+    return true
+}
+
+// 获取导航项样式类
+const getNavItemClass = (index: number) => {
+    const question = allQuestions.value[index]
+    const isAnswered = isQuestionAnswered(question)
+    const isCurrent = index === currentQuestionIndex.value
+    
+    return {
+        'answered': isAnswered && !isCurrent,
+        'current': isCurrent,
+        'unanswered': !isAnswered && !isCurrent
+    }
+}
+
+// 时间格式化函数
+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 startTimer = () => {
+    timer.value = setInterval(() => {
+        if (remainingTime.value > 0) {
+            remainingTime.value--
+        } else {
+            // 时间到自动提交
+            submitExam()
+        }
+    }, 1000)
+}
+
+// 获取题型名称
+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 getQuestionIndex = (bigIndex: number, subIndex: number) => {
+    let index = 0
+    for (let i = 0; i < bigIndex; i++) {
+        examData.value.questions[i].subQuestions.forEach((subQ: any) => {
+            if (subQ.type === 'composite') {
+                index += subQ.subQuestions?.length || 0
+            } else {
+                index++
+            }
+        })
+    }
+    
+    for (let j = 0; j < subIndex; j++) {
+        const subQ = examData.value.questions[bigIndex].subQuestions[j]
+        if (subQ.type === 'composite') {
+            index += subQ.subQuestions?.length || 0
+        } else {
+            index++
+        }
+    }
+    
+    return index
+}
+
+// 单选题选择
+const selectSingleChoice = (questionId: string, optionId: string) => {
+    userAnswers.value[questionId] = optionId
+}
+
+// 多选题选择
+const toggleMultipleChoice = (questionId: string, optionId: string) => {
+    if (!userAnswers.value[questionId]) {
+        userAnswers.value[questionId] = []
+    }
+    const answers = userAnswers.value[questionId]
+    const index = answers.indexOf(optionId)
+    if (index > -1) {
+        answers.splice(index, 1)
+    } else {
+        answers.push(optionId)
+    }
+}
+
+// 判断多选题选项是否被选中
+const isMultipleChoiceSelected = (questionId: string, optionId: string) => {
+    const answers = userAnswers.value[questionId]
+    return Array.isArray(answers) && answers.includes(optionId)
+}
+
+// 判断题选择
+const selectTrueFalse = (questionId: string, value: boolean) => {
+    userAnswers.value[questionId] = value
+}
+
+// 填空题更新
+const updateFillBlank = (questionId: string, blankIndex: number, value: string) => {
+    if (!userAnswers.value[questionId]) {
+        userAnswers.value[questionId] = []
+    }
+    userAnswers.value[questionId][blankIndex] = value
+}
+
+// 滚动到指定题目
+const scrollToQuestion = (index: number) => {
+    currentQuestionIndex.value = index
+    const element = document.getElementById(`question-${index}`)
+    if (element) {
+        element.scrollIntoView({ behavior: 'smooth', block: 'start' })
+    }
+}
+
+// 确认提交
+const confirmSubmit = () => {
+    showSubmitModal.value = true
+}
+
+// 提交考试
+const submitExam = () => {
+    if (timer.value) {
+        clearInterval(timer.value)
+        timer.value = null
+    }
+    
+    // 这里可以调用提交接口
+    console.log('提交答案:', userAnswers.value)
+    
+    // 跳转到成绩页面或返回
+    router.push('/exam-result')
+}
+
+// 确认退出
+const confirmExit = () => {
+    showExitModal.value = true
+}
+
+// 退出考试
+const exitExam = () => {
+    if (timer.value) {
+        clearInterval(timer.value)
+        timer.value = null
+    }
+    router.back()
+}
+
+const goBack = () => {
+    router.back()
+}
+
+onMounted(() => {
+    // TODO 先从 sessionStorage 获取预览考试数据 之后对接接口
+    const savedData = sessionStorage.getItem('examPreviewData')
+    
+    if (savedData) {
+        try {
+            examData.value = JSON.parse(savedData)
+            remainingTime.value = (examData.value?.duration || 60) * 60
+            startTimer()
+        } catch (error) {
+            console.error('解析考试数据失败:', error)
+        }
+    }
+
+    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+        e.preventDefault()
+        e.returnValue = '考试正在进行中，确定要离开吗？'
+        return e.returnValue
+    }
+    
+    window.addEventListener('beforeunload', handleBeforeUnload)
+    
+    onBeforeUnmount(() => {
+        window.removeEventListener('beforeunload', handleBeforeUnload)
+        if (timer.value) {
+            clearInterval(timer.value)
+            timer.value = null
+        }
+    })
+})
+
+onBeforeUnmount(() => {
+    if (timer.value) {
+        clearInterval(timer.value)
+        timer.value = null
+    }
+})
+</script>
+
+<style scoped>
+.exam-taking-container {
+    display: flex;
+    min-height: 100vh;
+    background: #f8f9fa;
+    padding: 10px;
+}
+
+/* 左侧边栏样式 */
+.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;
+    transition: color 0.3s ease;
+}
+
+.time-display.time-warning {
+    color: #ff4d4f;
+    animation: pulse 1s infinite;
+}
+
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.7; }
+}
+
+.question-nav {
+    background: white;
+    margin-bottom: 20px;
+}
+
+.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;
+    background: white;
+}
+
+.nav-item.answered {
+    background: #52c41a;
+    color: white;
+    border-color: #52c41a;
+}
+
+.nav-item.current {
+    background: #1890ff;
+    color: white;
+    border-color: #1890ff;
+}
+
+.nav-item.unanswered {
+    background: white;
+    color: #666;
+    border-color: #d9d9d9;
+}
+
+.nav-item:hover {
+    border-color: #1890ff;
+}
+
+.nav-legend {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    font-size: 12px;
+    color: #666;
+    flex-wrap: wrap;
+}
+
+.legend-item {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+.legend-color {
+    width: 12px;
+    height: 12px;
+    border-radius: 2px;
+}
+
+.legend-color.answered {
+    background: #52c41a;
+}
+
+.legend-color.current {
+    background: #1890ff;
+}
+
+.legend-color.unanswered {
+    background: white;
+    border: 1px solid #d9d9d9;
+}
+
+.submit-section {
+    background: white;
+    padding: 16px;
+    border-radius: 8px;
+    border: 1px solid #e8e8e8;
+}
+
+.submit-info {
+    display: flex;
+    justify-content: space-between;
+    font-size: 12px;
+    color: #666;
+    margin-top: 12px;
+}
+
+/* 右侧主要内容区域 */
+.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;
+}
+
+.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: #f8f9fa;
+    border: 1px solid #e8e8e8;
+    border-radius: 6px;
+    transition: all 0.3s ease;
+    cursor: pointer;
+}
+
+.option-item:hover {
+    border-color: #1890ff;
+    background-color: #f0f9ff;
+}
+
+.option-item.selected {
+    background: #e6f7ff;
+    border-color: #1890ff;
+}
+
+.option-radio,
+.option-checkbox {
+    flex-shrink: 0;
+}
+
+.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;
+    background: white;
+}
+
+.option-item.selected .option-label {
+    background: #1890ff;
+    color: white;
+    border-color: #1890ff;
+}
+
+.option-content {
+    flex: 1;
+    font-size: 14px;
+    color: #333;
+    line-height: 1.5;
+}
+
+.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-input {
+    min-width: 150px;
+}
+
+.answer-area {
+    margin-bottom: 20px;
+}
+
+/* 复合题样式 */
+.composite-questions {
+    margin-bottom: 20px;
+}
+
+.composite-sub-question {
+    background: #f8f9fa;
+    border: 1px solid #e8e8e8;
+    border-radius: 6px;
+    padding: 16px;
+    margin-bottom: 16px;
+}
+
+.composite-sub-question:last-child {
+    margin-bottom: 0;
+}
+
+.comp-question-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #e0e0e0;
+}
+
+.comp-question-number {
+    font-size: 14px;
+    font-weight: bold;
+    color: #666;
+}
+
+.comp-question-score {
+    background: #e6f7ff;
+    color: #1890ff;
+    padding: 2px 6px;
+    border-radius: 3px;
+    font-size: 11px;
+    font-weight: bold;
+}
+
+.comp-question-title {
+    font-size: 14px;
+    color: #333;
+    line-height: 1.6;
+    margin-bottom: 15px;
+}
+
+.comp-question-content {
+    margin-left: 0;
+}
+
+.no-data {
+    background: white;
+    border-radius: 8px;
+    padding: 60px;
+    text-align: center;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* 弹窗样式 */
+.submit-confirm-content {
+    text-align: center;
+}
+
+.answer-summary {
+    background: #f8f9fa;
+    border-radius: 6px;
+    padding: 16px;
+    margin: 16px 0;
+}
+
+.summary-item {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 8px;
+}
+
+.summary-item:last-child {
+    margin-bottom: 0;
+}
+
+.summary-item .answered {
+    color: #52c41a;
+    font-weight: bold;
+}
+
+.summary-item .unanswered {
+    color: #ff4d4f;
+    font-weight: bold;
+}
+
+.warning-text {
+    color: #ff4d4f;
+    font-size: 14px;
+    margin-top: 16px;
+}
+
+.modal-actions {
+    display: flex;
+    gap: 12px;
+    justify-content: flex-end;
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+    .exam-sidebar {
+        width: 240px;
+    }
+
+    .exam-main {
+        margin-left: 240px;
+    }
+}
+
+@media (max-width: 768px) {
+    .exam-taking-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;
+    }
+
+    .nav-legend {
+        justify-content: center;
+    }
+}
+</style>
diff --git a/src/views/teacher/ExamPages/GradingPage.vue b/src/views/teacher/ExamPages/GradingPage.vue
index cfc9a62..5436e8e 100644
--- a/src/views/teacher/ExamPages/GradingPage.vue
+++ b/src/views/teacher/ExamPages/GradingPage.vue
@@ -80,7 +80,7 @@
                             <div class="tip-box ungraded"></div>未答
                         </div>
                     </div>
-                    <n-button type="primary" size="large" block @click="submitGrading">
+                    <n-button v-if="!isViewMode" type="primary" size="large" block @click="submitGrading">
                         提交批阅
                     </n-button>
                 </div>
@@ -176,6 +176,7 @@
                                         <div class="correct-status">
                                             <label>对错：</label>
                                             <n-radio-group v-model:value="question.isCorrect"
+                                                :disabled="isViewMode"
                                                 @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>
@@ -187,6 +188,7 @@
                                             <div class="score-input-wrapper">
                                                 <n-input type="number" v-model:value="question.studentScore" :min="0"
                                                     :max="question.score"
+                                                    :disabled="isViewMode"
                                                     @update:value="(value: number | null) => updateQuestionScore(question.id, value)" />
                                             </div>
                                         </div>
@@ -197,8 +199,21 @@
                         </div>
                     </div>
                     <div class="text">
-                        <QuillEditor :placeholder="'请输入阅卷评语...（300字以内）'" v-model="gradingComments" height="400px">
-                        </QuillEditor>
+                        <!-- 编辑模式：显示富文本编辑器 -->
+                        <div v-if="!isViewMode">
+                            <QuillEditor :placeholder="'请输入阅卷评语...（300字以内）'" v-model="gradingComments" height="400px">
+                            </QuillEditor>
+                        </div>
+                        <!-- 查看模式：显示评语内容 -->
+                        <div v-else class="comments-display">
+                            <h4>阅卷评语：</h4>
+                            <div class="comments-content" v-if="gradingComments">
+                                <div v-html="gradingComments"></div>
+                            </div>
+                            <div v-else class="no-comments">
+                                暂无评语
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -208,15 +223,19 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted, nextTick, watch } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } 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 route = useRoute()
 const message = useMessage()
 
+// 根据路由参数判断是查看模式还是编辑模式
+const isViewMode = computed(() => route.query.mode === 'view')
+
 // 接口定义
 interface StudentInfo {
     name: string
@@ -506,6 +525,11 @@ onMounted(() => {
     if (questions.value.length > 0) {
         currentQuestionId.value = questions.value[0].id
     }
+    
+    // 如果是查看模式，加载已有的评语
+    if (isViewMode.value) {
+        // gradingComments.value = ''
+    }
 })
 
 // 监听筛选状态变化
@@ -926,6 +950,7 @@ watch(showOnlyWrong, () => {
 .explanation-section h4 {
     font-size: 14px;
     color: #666;
+    white-space: nowrap;
 }
 
 .selected-answer,
@@ -1026,6 +1051,36 @@ watch(showOnlyWrong, () => {
     color: #666;
 }
 
+/* 评语展示样式 */
+.comments-display {
+    padding: 20px;
+    background-color: #f8f9fa;
+    border: 1px solid #e6e6e6;
+}
+
+.comments-display h4 {
+    margin: 0 0 16px 0;
+    font-size: 16px;
+    color: #333;
+}
+
+.comments-content {
+    background-color: #fff;
+    padding: 16px;
+    border-radius: 6px;
+    border: 1px solid #d9d9d9;
+    min-height: 100px;
+    line-height: 1.6;
+    color: #333;
+}
+
+.no-comments {
+    color: #999;
+    font-style: italic;
+    text-align: center;
+    padding: 20px;
+}
+
 .action-buttons {
     display: flex;
     gap: 12px;
diff --git a/src/views/teacher/ExamPages/QuestionBankManagement.vue b/src/views/teacher/ExamPages/QuestionBankManagement.vue
new file mode 100644
index 0000000..d62fb46
--- /dev/null
+++ b/src/views/teacher/ExamPages/QuestionBankManagement.vue
@@ -0,0 +1,648 @@
+<template>
+    <div class="question-bank-container">
+        <div class="header-section">
+            <h1 class="title">题库管理</h1>
+            <n-space class="actions-group">
+                <n-button type="primary" @click="addQuestionBank">新建题库</n-button>
+                <n-button ghost @click="importQuestionBank">导入题库</n-button>
+                <n-button ghost @click="exportQuestionBank">导出题库</n-button>
+                <n-button type="error" ghost @click="deleteSelected" :disabled="selectedRowKeys.length === 0">删除</n-button>
+                <n-input
+                    v-model:value="filters.keyword"
+                    placeholder="请输入想要搜索的内容"
+                    style="width: 200px"
+                    clearable
+                />
+                <n-button type="primary" @click="searchQuestionBanks">搜索</n-button>
+            </n-space>
+        </div>
+
+        <n-data-table
+            ref="tableRef"
+            :columns="columns"
+            :data="questionBankList"
+            :loading="loading"
+            :pagination="paginationConfig"
+            :row-key="(row: QuestionBank) => row.id"
+            :checked-row-keys="selectedRowKeys"
+            @update:checked-row-keys="handleCheck"
+            class="question-bank-table"
+            :single-line="false"
+        />
+
+        <!-- 新建/编辑题库弹窗 -->
+        <n-modal 
+            v-model:show="showCreateModal" 
+            preset="dialog" 
+            :title="isEditMode ? '编辑题库' : '新建题库'" 
+            style="width: 500px;"
+        >
+            <div class="create-modal-content">
+                <div class="form-item">
+                    <label>题库名称：</label>
+                    <n-input
+                        v-model:value="createForm.name"
+                        placeholder="请输入题库名称"
+                        style="width: 100%;"
+                    />
+                </div>
+                
+                <div class="form-item">
+                    <label>题库描述：</label>
+                    <n-input
+                        v-model:value="createForm.description"
+                        type="textarea"
+                        placeholder="请输入题库描述"
+                        style="width: 100%;"
+                        :rows="3"
+                    />
+                </div>
+            </div>
+            
+            <template #action>
+                <n-space>
+                    <n-button @click="closeCreateModal">取消</n-button>
+                    <n-button type="primary" @click="submitQuestionBank" :disabled="!createForm.name.trim()">
+                        {{ isEditMode ? '保存' : '创建' }}
+                    </n-button>
+                </n-space>
+            </template>
+        </n-modal>
+
+        <!-- 导入弹窗 -->
+        <ImportModal 
+            v-model:show="showImportModal"
+            template-name="question_bank_template.xlsx"
+            import-type="questionBank"
+            @success="handleImportSuccess"
+            @template-download="handleTemplateDownload"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, onMounted, h, VNode } from 'vue';
+import { NButton, NSpace, useMessage, useDialog } from 'naive-ui';
+import { useRouter } from 'vue-router';
+import ImportModal from '@/components/common/ImportModal.vue';
+import { ExamApi } from '@/api'
+
+// 消息提示和对话框
+const message = useMessage();
+const dialog = useDialog();
+
+// 路由
+const router = useRouter();
+
+// 题库数据接口
+interface QuestionBank {
+    id: string;
+    sequence: number;
+    name: string;
+    description: string;
+    questionCount: number;
+    creator: string;
+    createTime: string;
+    lastModified: string;
+}
+
+// 筛选条件
+const filters = reactive({
+    keyword: ''
+});
+
+
+// 表格相关状态
+const loading = ref(false);
+const selectedRowKeys = ref<string[]>([]);
+const questionBankList = ref<QuestionBank[]>([]);
+
+// 新建/编辑题库相关状态
+const showCreateModal = ref(false);
+const isEditMode = ref(false);
+const editingId = ref('');
+const createForm = reactive({
+    name: '',
+    description: '',
+});
+
+// 导入弹窗状态
+const showImportModal = ref(false);
+
+// 分页配置
+const pagination = reactive({
+    page: 1,
+    pageSize: 10,
+    total: 0
+});
+
+// 表格分页配置
+const paginationConfig = computed(() => ({
+    page: pagination.page,
+    pageSize: pagination.pageSize,
+    itemCount: pagination.total,
+    pageSizes: [10, 20, 50, 100],
+    showSizePicker: true,
+    showQuickJumper: true,
+    prefix: (info: { itemCount?: number }) => {
+        const itemCount = info.itemCount || 0;
+        return `共 ${itemCount} 条`;
+    },
+    onUpdatePage: (page: number) => {
+        pagination.page = page;
+        loadQuestionBanks();
+    },
+    onUpdatePageSize: (pageSize: number) => {
+        pagination.pageSize = pageSize;
+        pagination.page = 1;
+        loadQuestionBanks();
+    }
+}));
+
+// 创建表格列的函数
+const createColumns = ({
+    handleAction,
+}: {
+    handleAction: (action: string, rowData: QuestionBank) => void;
+}) => {
+    return [
+        {
+            type: 'selection',
+        },
+        {
+            title: '序号',
+            key: 'sequence',
+            width: 80,
+            align: 'center' as const
+        },
+        {
+            title: '题库名称',
+            key: 'name',
+            width: 200,
+            ellipsis: {
+                tooltip: true
+            },
+            render(row: QuestionBank) {
+                return h(
+                    'span',
+                    {
+                        style: 'color: #1890ff; cursor: pointer;',
+                        onClick: () => handleAction('进入', row)
+                    },
+                    row.name
+                );
+            }
+        },
+        {
+            title: '题库描述',
+            key: 'description',
+            width: 250,
+            ellipsis: {
+                tooltip: true
+            }
+        },
+        {
+            title: '题目数量',
+            key: 'questionCount',
+            width: 100,
+            align: 'center' as const,
+            render(row: QuestionBank) {
+                return h('span', { style: 'color: #1890ff; font-weight: 500;' }, row.questionCount.toString());
+            }
+        },
+        {
+            title: '创建人',
+            key: 'creator',
+            width: 100,
+            align: 'center' as const
+        },
+        {
+            title: '创建时间',
+            key: 'createTime',
+            width: 160,
+            align: 'center' as const
+        },
+        {
+            title: '最后修改',
+            key: 'lastModified',
+            width: 160,
+            align: 'center' as const
+        },
+        {
+            title: '操作',
+            key: 'actions',
+            width: 150,
+            align: 'center' as const,
+            render(row: QuestionBank) {
+                const buttons: VNode[] = [];
+                
+                buttons.push(
+                    h(NButton, { 
+                        size: 'small', 
+                        type: 'primary', 
+                        ghost: true, 
+                        style: 'margin: 0 3px;', 
+                        onClick: () => handleAction('进入', row) 
+                    }, { default: () => '进入' })
+                );
+                
+                buttons.push(
+                    h(NButton, { 
+                        size: 'small', 
+                        ghost: true, 
+                        style: 'margin: 0 3px;', 
+                        onClick: () => handleAction('编辑', row) 
+                    }, { default: () => '编辑' })
+                );
+                
+                buttons.push(
+                    h(NButton, { 
+                        size: 'small', 
+                        type: 'error', 
+                        ghost: true, 
+                        style: 'margin: 0 3px;', 
+                        onClick: () => handleAction('删除', row) 
+                    }, { default: () => '删除' })
+                );
+                
+                return h(NSpace, {}, { default: () => buttons });
+            }
+        }
+    ];
+};
+
+// 表格列配置
+const columns = createColumns({
+    handleAction: (action, row) => {
+        if (action === '进入') {
+            enterQuestionBank(row.id);
+        } else if (action === '编辑') {
+            editQuestionBank(row.id);
+        } else if (action === '删除') {
+            deleteQuestionBank(row.id);
+        }
+    },
+});
+
+// 生成模拟数据
+const generateMockData = (): QuestionBank[] => {
+    const mockData: QuestionBank[] = [];
+    const creators = ['王建国', '李明', '张三', '刘老师', '陈教授'];
+    const names = ['计算机基础题库', '数学专业题库', '英语考试题库', '物理练习题库', '化学综合题库'];
+    
+    for (let i = 1; i <= 20; i++) {
+        mockData.push({
+            id: '1960998116632399873',
+            sequence: i,
+            name: names[Math.floor(Math.random() * names.length)] + ` ${i}`,
+            description: `这是一个包含多种题型的综合性题库，适用于教学和考试场景...`,
+            questionCount: Math.floor(Math.random() * 500) + 50,
+            creator: creators[Math.floor(Math.random() * creators.length)],
+            createTime: '2025.08.20 09:20',
+            lastModified: '2025.08.28 15:30'
+        });
+    }
+    return mockData;
+};
+
+// 处理复选框选择
+const handleCheck = (rowKeys: string[]) => {
+    selectedRowKeys.value = rowKeys;
+};
+
+// 搜索题库
+const searchQuestionBanks = () => {
+    pagination.page = 1;
+    loadQuestionBanks();
+};
+
+// 加载题库列表
+const loadQuestionBanks = async () => {
+    loading.value = true;
+    try {
+        // TODO API调用
+        // await ExamApi.getCourseRepoList();
+        
+        const allData = generateMockData();
+        // 模拟筛选
+        let filteredData = allData;
+        
+        if (filters.keyword) {
+            filteredData = filteredData.filter(item => 
+                item.name.includes(filters.keyword) || 
+                item.description.includes(filters.keyword) ||
+                item.creator.includes(filters.keyword)
+            );
+        }
+        
+        // 分页处理
+        pagination.total = filteredData.length;
+        const start = (pagination.page - 1) * pagination.pageSize;
+        const end = start + pagination.pageSize;
+        questionBankList.value = filteredData.slice(start, end);
+        
+    } catch (error) {
+        console.error('加载题库失败:', error);
+        message.error('加载题库失败');
+    } finally {
+        loading.value = false;
+    }
+};
+
+// 操作方法
+const addQuestionBank = () => {
+    // 重置为新建模式
+    isEditMode.value = false;
+    editingId.value = '';
+    createForm.name = '';
+    createForm.description = '';
+    showCreateModal.value = true;
+};
+
+const importQuestionBank = () => {
+    showImportModal.value = true;
+};
+
+const exportQuestionBank = () => {
+    console.log('导出题库');
+    message.info('导出功能开发中...');
+};
+
+const deleteSelected = () => {
+    if (selectedRowKeys.value.length === 0) {
+        message.warning('请先选择要删除的题库');
+        return;
+    }
+
+    // 获取选中的题库信息
+    const selectedBanks = questionBankList.value.filter(item => 
+        selectedRowKeys.value.includes(item.id)
+    );
+    
+    const bankNames = selectedBanks.map(bank => bank.name).join('、');
+
+    // 二次确认弹窗
+    dialog.warning({
+        title: '批量删除确认',
+        content: `确定要删除以下 ${selectedRowKeys.value.length} 个题库吗？
+        
+题库名称：${bankNames}
+
+`,
+        positiveText: '确定删除',
+        negativeText: '取消',
+        onPositiveClick: async () => {
+            try {
+                // 批量调用删除接口
+                const deletePromises = selectedRowKeys.value.map(id => 
+                    ExamApi.deleteRepo(id)
+                );
+                
+                await Promise.all(deletePromises);
+                
+                message.success(`成功删除 ${selectedRowKeys.value.length} 个题库`);
+                
+                // 清空选中状态
+                selectedRowKeys.value = [];
+                
+                // 重新加载列表
+                loadQuestionBanks();
+                
+            } catch (error) {
+                console.error('批量删除题库失败:', error);
+                message.error('批量删除失败，请重试');
+            }
+        },
+        onNegativeClick: () => {
+            // 用户取消删除，不需要做任何操作
+        }
+    });
+};
+
+// 进入题库（跳转到试题管理页面）
+const enterQuestionBank = (bankId: string) => {
+    router.push(`/teacher/exam-management/question-bank/${bankId}/questions`);
+};
+
+const editQuestionBank = (id: string) => {
+    console.log('编辑题库:', id);
+    
+    // 查找要编辑的题库数据
+    const questionBank = questionBankList.value.find(item => item.id === id);
+    if (!questionBank) {
+        message.error('未找到要编辑的题库');
+        return;
+    }
+    
+    // 设置编辑模式
+    isEditMode.value = true;
+    editingId.value = id;
+    
+    // 回显数据
+    createForm.name = questionBank.name;
+    createForm.description = questionBank.description;
+    
+    // 显示弹窗
+    showCreateModal.value = true;
+};
+
+const deleteQuestionBank = (id: string) => {
+    // 查找要删除的题库信息
+    const questionBank = questionBankList.value.find(item => item.id === id);
+    if (!questionBank) {
+        message.error('未找到要删除的题库');
+        return;
+    }
+
+    // 二次确认弹窗
+    dialog.warning({
+        title: '确认删除',
+        content: `确定要删除题库"${questionBank.name}"吗？`,
+        positiveText: '确定删除',
+        negativeText: '取消',
+        onPositiveClick: async () => {
+            try {
+                // 调用删除接口
+                await ExamApi.deleteRepo(id);
+                message.success('题库删除成功');
+                
+                // 重新加载列表
+                loadQuestionBanks();
+                
+                // 清空选中状态
+                selectedRowKeys.value = selectedRowKeys.value.filter(key => key !== id);
+                
+            } catch (error) {
+                console.error('删除题库失败:', error);
+                message.error('删除题库失败，请重试');
+            }
+        },
+        onNegativeClick: () => {
+            // 用户取消删除，不需要做任何操作
+        }
+    });
+};
+
+// 新建/编辑题库相关方法
+const closeCreateModal = () => {
+    showCreateModal.value = false;
+    isEditMode.value = false;
+    editingId.value = '';
+    createForm.name = '';
+    createForm.description = '';
+};
+
+// 统一的提交方法
+const submitQuestionBank = async () => {
+    if (!createForm.name.trim()) {
+        message.warning('请输入题库名称');
+        return;
+    }
+    
+    try {
+        if (isEditMode.value) {
+            // 编辑模式
+            await ExamApi.updateRepo({
+                id: editingId.value,
+                title: createForm.name,
+                remark: createForm.description
+            });
+            message.success('题库更新成功');
+        } else {
+            // 新建模式
+            await ExamApi.createCourseRepo({
+                title: createForm.name,
+                remark: createForm.description
+            });
+            message.success('题库创建成功');
+        }
+        
+        closeCreateModal();
+        loadQuestionBanks();
+        
+    } catch (error) {
+        console.error('提交题库失败:', error);
+        message.error(isEditMode.value ? '更新题库失败，请重试' : '创建题库失败，请重试');
+    }
+};
+
+// 处理导入成功
+const handleImportSuccess = (result: any) => {
+    console.log('导入成功:', result);
+    message.success('题库导入成功');
+    loadQuestionBanks();
+};
+
+// 处理模板下载
+const handleTemplateDownload = (type?: string) => {
+    console.log('下载模板:', type);
+    message.info('模板下载功能开发中...');
+};
+
+// 组件挂载时加载数据
+onMounted(() => {
+    loadQuestionBanks();
+});
+</script>
+
+<style scoped>
+.question-bank-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;
+}
+
+.title {
+    margin: 0;
+    font-size: 20px;
+    font-weight: 500;
+}
+
+.actions-group {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.question-bank-table {
+    margin-top: 20px;
+}
+
+/* 新建题库弹窗样式 */
+.create-modal-content {
+    padding: 8px 0;
+}
+
+.create-modal-content .form-item {
+    margin-bottom: 16px;
+}
+
+.create-modal-content .form-item label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: 500;
+    color: #333;
+}
+
+/* 响应式设计 */
+@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) {
+    .question-bank-container {
+        padding: 12px;
+    }
+    
+    .actions-group {
+        gap: 8px;
+    }
+    
+    .actions-group .n-input {
+        width: 150px !important;
+    }
+    
+    .actions-group .n-select {
+        width: 100px !important;
+    }
+}
+
+@media (max-width: 480px) {
+    .title {
+        font-size: 18px;
+    }
+    
+    .header-section {
+        padding: 12px 0;
+    }
+    
+    .actions-group {
+        justify-content: space-around;
+    }
+    
+    .actions-group .n-input {
+        width: 120px !important;
+    }
+    
+    .actions-group .n-select {
+        width: 80px !important;
+    }
+}
+</style>
diff --git a/src/views/teacher/ExamPages/QuestionManagement.vue b/src/views/teacher/ExamPages/QuestionManagement.vue
index 8a5cd60..de07558 100644
--- a/src/views/teacher/ExamPages/QuestionManagement.vue
+++ b/src/views/teacher/ExamPages/QuestionManagement.vue
@@ -1,7 +1,17 @@
 <template>
     <div class="question-management-container">
+        <div class="breadcrumb-section">
+            <n-breadcrumb>
+                <n-breadcrumb-item @click="goToQuestionBank">
+                    <n-icon><ChevronBackOutline /></n-icon>
+                    题库管理
+                </n-breadcrumb-item>
+                <n-breadcrumb-item>{{ currentBankName }}</n-breadcrumb-item>
+            </n-breadcrumb>
+        </div>
+        
         <div class="header-section">
-            <h1 class="title">全部试题</h1>
+            <h1 class="title">{{ currentBankName }} - 试题管理</h1>
             <n-space class="actions-group">
                 <n-button type="primary" @click="addQuestion">添加试题</n-button>
                 <n-button ghost @click="importQuestions">导入</n-button>
@@ -165,15 +175,27 @@
 
 <script setup lang="ts">
 import { ref, reactive, computed, onMounted, h, VNode } from 'vue';
-import { NButton, NTag, NSpace, useMessage } from 'naive-ui';
-import { useRouter } from 'vue-router';
+import { NButton, NTag, NSpace, NBreadcrumb, NBreadcrumbItem, NIcon, useMessage } from 'naive-ui';
+import { useRouter, useRoute } from 'vue-router';
+import { ChevronBackOutline } from '@vicons/ionicons5';
 import ImportModal from '@/components/common/ImportModal.vue';
+import { ExamApi } from '@/api';
 
 // 消息提示
 const message = useMessage();
 
 // 路由
 const router = useRouter();
+const route = useRoute();
+
+// 当前题库信息
+const currentBankId = computed(() => route.params.bankId as string);
+const currentBankName = ref('加载中...');
+
+// 返回题库管理页面
+const goToQuestionBank = () => {
+    router.push('/teacher/exam-management/question-bank');
+};
 
 // 题目数据接口
 interface Question {
@@ -241,9 +263,6 @@ const paginationConfig = computed(() => ({
     pageSizes: [10, 20, 50, 100],
     showSizePicker: true,
     showQuickJumper: true,
-    goto: ()=>{
-        return '跳转'
-    },
     prefix: (info: { itemCount?: number }) => {
         const itemCount = info.itemCount || 0;
         return `共 ${itemCount} 条`;
@@ -434,7 +453,7 @@ const loadQuestions = async () => {
     loading.value = true;
     try {
         // 模拟API调用
-        await new Promise(resolve => setTimeout(resolve, 500));
+        await ExamApi.getQuestionsByRepo(currentBankId.value);
         
         const allData = generateMockData();
         // 模拟筛选
@@ -466,7 +485,7 @@ const loadQuestions = async () => {
 
 // 操作方法
 const addQuestion = () => {
-    router.push('/teacher/exam-management/add-question');
+    router.push(`/teacher/exam-management/add-question/${currentBankId.value}`);
 };
 
 const importQuestions = () => {
@@ -496,6 +515,7 @@ const deleteSelected = () => {
 
 const editQuestion = (id: string) => {
     console.log('编辑题目:', id);
+    router.push(`/teacher/exam-management/add-question/${currentBankId.value}/${id}`);
 };
 
 const deleteQuestion = (id: string) => {
@@ -504,9 +524,33 @@ const deleteQuestion = (id: string) => {
 
 // 组件挂载时加载数据
 onMounted(() => {
+    loadCurrentBankInfo();
     loadQuestions();
 });
 
+// 加载当前题库信息
+const loadCurrentBankInfo = async () => {
+    try {
+        // 模拟API调用获取题库信息
+        // await ;
+        
+        // 模拟根据bankId获取题库名称
+        const bankNames: { [key: string]: string } = {
+            'bank_1': '计算机基础题库 1',
+            'bank_2': '数学专业题库 2',
+            'bank_3': '英语考试题库 3',
+            'bank_4': '物理练习题库 4',
+            'bank_5': '化学综合题库 5'
+        };
+        
+        currentBankName.value = bankNames[currentBankId.value] || `题库 ${currentBankId.value}`;
+        
+    } catch (error) {
+        console.error('加载题库信息失败:', error);
+        currentBankName.value = '未知题库';
+    }
+};
+
 // 分类设置相关方法
 const setCategoryForSelected = () => {
     if (selectedRowKeys.value.length === 0) {
@@ -651,6 +695,21 @@ const deleteCategory = (categoryValue: string) => {
     border-radius: 8px;
 }
 
+.breadcrumb-section {
+    margin-bottom: 16px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.breadcrumb-section .n-breadcrumb-item:first-child {
+    cursor: pointer;
+    color: #1890ff;
+}
+
+.breadcrumb-section .n-breadcrumb-item:first-child:hover {
+    color: #40a9ff;
+}
+
 .header-section {
     display: flex;
     justify-content: space-between;
diff --git a/src/views/teacher/ExamPages/StudentList.vue b/src/views/teacher/ExamPages/StudentList.vue
index af6e007..91d8764 100644
--- a/src/views/teacher/ExamPages/StudentList.vue
+++ b/src/views/teacher/ExamPages/StudentList.vue
@@ -359,13 +359,13 @@ const getStudentStatusText = (status: string) => {
 }
 
 const handleViewAnswer = (student: StudentExamInfo) => {
-    // 跳转到答题详情页面
-    router.push(`/teacher/exam-management/marking-center/answer-detail/${examInfo.value.id}/${student.id}`)
+    // 跳转到答题详情页面（查看模式）
+    router.push(`/teacher/exam-management/marking-center/grading/${examInfo.value.id}/${student.id}?mode=view`)
 }
 
 const handleGrade = (student: StudentExamInfo) => {
-    // 跳转到批阅页面
-    router.push(`/teacher/exam-management/marking-center/grading/${examInfo.value.id}/${student.id}`)
+    // 跳转到批阅页面（编辑模式）
+    router.push(`/teacher/exam-management/marking-center/grading/${examInfo.value.id}/${student.id}?mode=edit`)
 }
 
 const exportResults = () => {
@@ -386,7 +386,7 @@ const importStudents = () => {
 }
 
 const handleSearch = () => {
-    // 搜索已经通过 computed 属性自动实现
+    // 搜索通过 computed 属性实现
     message.info('搜索已应用')
 }