From f3f302da49111140c6c7962767d36647e582021f Mon Sep 17 00:00:00 2001
From: chenqiang <chenqiang@h024.cn>
Date: Wed, 3 Sep 2025 14:20:29 +0800
Subject: [PATCH] =?UTF-8?q?ExamingView.vue=E8=80=83=E8=AF=95=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=EF=BC=8C=E5=90=8C=E6=97=B6=E8=AE=BE=E7=BD=AE=E4=BA=86?=
 =?UTF-8?q?=E8=BD=AF=E4=BB=B6=E6=A0=87=E9=A2=98=EF=BC=8C=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E4=BA=86=E9=80=80=E5=87=BA=E6=8F=90=E9=86=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/background/db/examing.js             |   46 +-
 src/background/main.js                   |   69 +-
 src/background/service/examingService.js |   18 +-
 src/components/user/ExamineeLayout.vue   |    1 +
 src/preload.js                           |    3 +-
 src/router/index.js                      |    4 +
 src/store/index.js                       |   11 +-
 src/views/user/ExamineeHomeView.vue      |   51 +-
 src/views/user/ExamingView.vue           | 1185 ++++++++++++++++++++++
 vue.config.js                            |    9 +
 10 files changed, 1348 insertions(+), 49 deletions(-)
 create mode 100644 src/views/user/ExamingView.vue

diff --git a/src/background/db/examing.js b/src/background/db/examing.js
index b469314..7da34a6 100644
--- a/src/background/db/examing.js
+++ b/src/background/db/examing.js
@@ -15,6 +15,48 @@ function formatDateTime(date) {
   return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
 }
 
+/**
+ * 批量插入数据到指定表
+ * @param {sqlite3.Database} db - 数据库连接对象
+ * @param {string} tableName - 表名
+ * @param {Array} dataArray - 要插入的数据数组
+ * @returns {Promise<void>}
+ */
+async function batchInsert(db, tableName, dataArray) {
+  if (!dataArray || dataArray.length === 0) {
+    return;
+  }
+
+  // 开始事务以提高性能
+  await db.runAsync('BEGIN TRANSACTION');
+
+  try {
+    // 获取第一个对象的字段名
+    const fields = Object.keys(dataArray[0]);
+    const placeholders = dataArray.map(() => `(${fields.map(() => '?').join(', ')})`).join(', ');
+    const sql = `INSERT INTO ${tableName} (${fields.join(', ')}) VALUES ${placeholders}`;
+
+    // 扁平化所有值
+    const values = [];
+    dataArray.forEach(item => {
+      fields.forEach(field => {
+        values.push(item[field]);
+      });
+    });
+
+    // 执行批量插入
+    await db.runAsync(sql, values);
+
+    // 提交事务
+    await db.runAsync('COMMIT');
+  } catch (error) {
+    // 发生错误时回滚事务
+    await db.runAsync('ROLLBACK');
+    console.error(`批量插入数据到${tableName}失败:`, error);
+    throw error;
+  }
+}
+
 /**
  * 生成考生试卷
  * @param {Object} examineeData - 考生数据
@@ -398,6 +440,7 @@ async function generateExamineePaper(examineeData, examData) {
  * @returns {Promise<Array>} - 包含试题序列的数组
  */
 async function loadPaperSerial(paperId) {
+  console.log('0903调试（loadPaperSerial）: ', paperId);
   try {
     // 1. 获取数据库连接
     const userDb = await getDbConnection(getUserDbPath());
@@ -827,7 +870,7 @@ async function processPaper(paperId) {
       `SELECT * FROM examinee_papers WHERE id = ?`,
       [paperId]
     );
-    console.log('更新试卷最后操作时间成功:', paper);
+    // console.log('更新试卷最后操作时间成功:', paper);
     return {
       success: true,
       message: '试卷处理时间已更新',
@@ -1162,6 +1205,7 @@ async function getPaper(paperId) {
 // 在文件末尾添加所有导出
 module.exports = {
   formatDateTime,
+  batchInsert,
   generateExamineePaper,
   loadPaperSerial,
   getQuestionByRelatedId,
diff --git a/src/background/main.js b/src/background/main.js
index 47ab92c..66e99f0 100644
--- a/src/background/main.js
+++ b/src/background/main.js
@@ -1,6 +1,6 @@
 'use strict'
 
-import { app, protocol, BrowserWindow, ipcMain } from 'electron'
+import { app, protocol, BrowserWindow, ipcMain, dialog } from 'electron'
 import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
 import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
 // 替换argon2为bcryptjs
@@ -29,9 +29,12 @@ protocol.registerSchemesAsPrivileged([
   { scheme: 'app', privileges: { secure: true, standard: true } }
 ])
 
+// 添加全局变量保存窗口引用
+let mainWindow = null
+
 async function createWindow() {
   // Create the browser window.
-  const win = new BrowserWindow({
+  mainWindow = new BrowserWindow({
     width: 800,  // 默认宽度（实际会被最大化覆盖）
     height: 600, // 默认高度（实际会被最大化覆盖）
     show: false, // 先隐藏窗口，避免闪烁
@@ -44,21 +47,21 @@ async function createWindow() {
   })
 
   // 设置隐藏菜单栏
-  win.setMenu(null);
+  mainWindow.setMenu(null);
 
   // 在窗口显示前设置最大化
-  win.maximize();
+  mainWindow.maximize();
   // 然后显示窗口
-  win.show();
+  mainWindow.show();
 
   if (process.env.WEBPACK_DEV_SERVER_URL) {
     // Load the url of the dev server if in development mode
-    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
-    if (!process.env.IS_TEST) win.webContents.openDevTools()
+    await mainWindow.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
+    if (!process.env.IS_TEST) mainWindow.webContents.openDevTools()
   } else {
     createProtocol('app')
     // Load the index.html when not in development
-    win.loadURL('app://./index.html')
+    mainWindow.loadURL('app://./index.html')
   }
 }
 
@@ -77,6 +80,39 @@ app.on('activate', () => {
   if (BrowserWindow.getAllWindows().length === 0) createWindow()
 })
 
+// 添加退出确认逻辑
+app.on('before-quit', (event) => {
+  // 如果是MacOS系统，让系统默认处理
+  if (process.platform === 'darwin') {
+    return
+  }
+
+  // 如果没有窗口，直接退出
+  if (!mainWindow) {
+    return
+  }
+
+  // 阻止默认的退出行为
+  event.preventDefault()
+
+  // 显示确认对话框
+  dialog.showMessageBox(mainWindow, {
+    type: 'warning',
+    title: '确认关闭',
+    message: '系统关闭后，已进行的试题将不会被保存，是否确认要关闭？',
+    buttons: ['取消', '确认关闭'],
+    defaultId: 0,
+    cancelId: 0
+  }).then((result) => {
+    // 如果用户确认关闭，则退出应用
+    if (result.response === 1) {
+      app.exit(0)
+    }
+  }).catch((err) => {
+    console.error('显示退出确认对话框失败:', err)
+  })
+})
+
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
@@ -85,6 +121,8 @@ const sqlite3 = require('sqlite3').verbose();
 
 // 在app.on('ready')事件中添加
 app.on('ready', async () => {
+  // 禁用Vue DevTools扩展
+  /*
   if (isDevelopment && !process.env.IS_TEST) {
     // Install Vue Devtools
     try {
@@ -93,6 +131,7 @@ app.on('ready', async () => {
       console.error('Vue Devtools failed to install:', e.toString())
     }
   }
+  */
 
   // 初始化配置相关的IPC处理程序
   initConfigIpc(ipcMain);
@@ -109,8 +148,18 @@ app.on('ready', async () => {
   // 初始化文件相关的IPC处理程序
   initFileIpc(ipcMain);
 
-  createWindow();
-});
+  // 检查数据库是否初始化
+  try {
+    const isInitialized = await checkDatabaseInitialized();
+    if (!isInitialized) {
+      await initializeDatabase();
+    }
+  } catch (error) {
+    console.error('数据库初始化失败:', error);
+  }
+
+  createWindow()
+})
 
 // Exit cleanly on request from parent process in development mode.
 if (isDevelopment) {
diff --git a/src/background/service/examingService.js b/src/background/service/examingService.js
index 2297bce..95ab075 100644
--- a/src/background/service/examingService.js
+++ b/src/background/service/examingService.js
@@ -143,6 +143,7 @@ async function updatePaperStatusService(paperId, statusData) {
  * @returns {Promise<Array>} - 包含试题序列的数组
  */
 async function loadPaperSerialService(paperId) {
+  console.log("0903调试（loadPaperSerialService）: ", paperId);
   try {
     if (!paperId || paperId <= 0) {
       throw new Error("试卷ID必须为正数");
@@ -372,8 +373,9 @@ function initExamingIpc(ipcMain) {
   );
 
   // 加载试卷试题序列
-  ipcMain.handle("examing-load-paper-serial", async (event, paperId) => {
+  ipcMain.handle("examing-load-paper-serial", async (event, { paperId }) => {
     try {
+      console.log("0903调试：", paperId);
       return await loadPaperSerialService(paperId);
     } catch (error) {
       console.error("加载试卷试题序列失败:", error);
@@ -387,9 +389,9 @@ function initExamingIpc(ipcMain) {
   // 根据表名和ID获取完整的试题数据
   ipcMain.handle(
     "examing-get-question-by-related-id",
-    async (event, { tableName, id }) => {
+    async (event, { tableName, relatedId }) => {
       try {
-        return await getQuestionByRelatedIdService(tableName, id);
+        return await getQuestionByRelatedIdService(tableName, relatedId);
       } catch (error) {
         console.error("获取试题数据失败:", error);
         return {
@@ -417,7 +419,7 @@ function initExamingIpc(ipcMain) {
   );
 
   // 开始考试
-  ipcMain.handle("examing-start-paper", async (event, paperId) => {
+  ipcMain.handle("examing-start-paper", async (event, { paperId }) => {
     try {
       return await startPaperService(paperId);
     } catch (error) {
@@ -430,7 +432,7 @@ function initExamingIpc(ipcMain) {
   });
 
   // 提交考试
-  ipcMain.handle("examing-submit-paper", async (event, paperId) => {
+  ipcMain.handle("examing-submit-paper", async (event, { paperId }) => {
     try {
       return await submitPaperService(paperId);
     } catch (error) {
@@ -443,7 +445,7 @@ function initExamingIpc(ipcMain) {
   });
 
   // 结束考试
-  ipcMain.handle("examing-end-paper", async (event, paperId) => {
+  ipcMain.handle("examing-end-paper", async (event, { paperId }) => {
     try {
       return await endPaperService(paperId);
     } catch (error) {
@@ -456,7 +458,7 @@ function initExamingIpc(ipcMain) {
   });
 
   // 处理试卷
-  ipcMain.handle("examing-process-paper", async (event, paperId) => {
+  ipcMain.handle("examing-process-paper", async (event, { paperId }) => {
     try {
       return await processPaperService(paperId);
     } catch (error) {
@@ -469,7 +471,7 @@ function initExamingIpc(ipcMain) {
   });
 
   // 检查试卷答案并计算得分
-  ipcMain.handle("examing-check-paper-answers", async (event, paperId) => {
+  ipcMain.handle("examing-check-paper-answers", async (event, { paperId }) => {
     try {
       return await checkPaperAnswersService(paperId);
     } catch (error) {
diff --git a/src/components/user/ExamineeLayout.vue b/src/components/user/ExamineeLayout.vue
index 79092c0..5a6e72e 100644
--- a/src/components/user/ExamineeLayout.vue
+++ b/src/components/user/ExamineeLayout.vue
@@ -37,5 +37,6 @@ export default {
   flex: 1;
   padding: 20px;
   overflow-y: auto;
+  background-color: #f0f2f5;
 }
 </style>
\ No newline at end of file
diff --git a/src/preload.js b/src/preload.js
index fc69451..e9f0159 100644
--- a/src/preload.js
+++ b/src/preload.js
@@ -78,7 +78,8 @@ contextBridge.exposeInMainWorld('electronAPI', {
   examingUpdatePaperStatus: ({ paperId, status }) => ipcRenderer.invoke('examing-update-paper-status', { paperId, status }),
   examingLoadPaperSerial: ({ paperId }) => ipcRenderer.invoke('examing-load-paper-serial', { paperId }),
   examingGetQuestionByRelatedId: ({ tableName, relatedId }) => ipcRenderer.invoke('examing-get-question-by-related-id', { tableName, relatedId }),
-  examingUpdateAnswer: ({ paperId, questionId, answer }) => ipcRenderer.invoke('examing-update-answer', { paperId, questionId, answer }),
+  // 修复：examingUpdateAnswer接口的参数结构
+  examingUpdateAnswer: ({ tableName, id, answers }) => ipcRenderer.invoke('examing-update-answer', { tableName, id, answers }),
   examingStartPaper: ({ paperId }) => ipcRenderer.invoke('examing-start-paper', { paperId }),
   examingSubmitPaper: ({ paperId }) => ipcRenderer.invoke('examing-submit-paper', { paperId }),
   examingEndPaper: ({ paperId }) => ipcRenderer.invoke('examing-end-paper', { paperId }),
diff --git a/src/router/index.js b/src/router/index.js
index 321a347..36c81c5 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -9,6 +9,8 @@ import ExamineeManagementView from '../views/admin/ExamineeManagementView.vue'
 import ExamManagementView from '../views/admin/ExamManagementView.vue'
 // 导入考生相关组件
 import ExamineeHomeView from '../views/user/ExamineeHomeView.vue'
+// 添加ExamingView组件导入
+import ExamingView from '../views/user/ExamingView.vue'
 
 Vue.use(VueRouter)
 
@@ -38,6 +40,8 @@ const routes = [
     meta: { requiresAuth: true },
     children: [
       { path: 'home', name: 'ExamineeHome', component: ExamineeHomeView },
+      // 添加考试页面路由
+      { path: 'exam/:paperId', name: 'Examing', component: ExamingView },
       // 可以在这里添加更多考生相关的路由
     ]
   }
diff --git a/src/store/index.js b/src/store/index.js
index ac5f09d..77dfee7 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -8,7 +8,8 @@ export default new Vuex.Store({
     examinee: null, // 保存考生信息
     admin: null,    // 保存管理员信息
     isLoggedIn: false, // 通用登录状态
-    userType: null  // 用户类型: 'examinee' 或 'admin'
+    userType: null,  // 用户类型: 'examinee' 或 'admin'
+    paper: null // 新增：保存当前考试的试卷信息
   },
   mutations: {
     setExaminee(state, examineeInfo) {
@@ -28,6 +29,14 @@ export default new Vuex.Store({
       state.admin = null
       state.isLoggedIn = false
       state.userType = null
+    },
+    // 新增：设置试卷信息
+    setPaper(state, paperInfo) {
+      state.paper = paperInfo
+    },
+    // 新增：清除试卷信息
+    clearPaper(state) {
+      state.paper = null
     }
   },
   actions: {
diff --git a/src/views/user/ExamineeHomeView.vue b/src/views/user/ExamineeHomeView.vue
index fbdae80..08c531d 100644
--- a/src/views/user/ExamineeHomeView.vue
+++ b/src/views/user/ExamineeHomeView.vue
@@ -3,9 +3,9 @@
   <div class="student-home-container">
     <div class="content-wrapper">
       <!-- 考试须知卡片 -->
-      <div class="exam-card rounded-lg shadow-lg p-4 border-2">
-        <div class="flex justify-between text-center mb-2">
-          <h2 class="text-2xl font-bold text-primary">考生信息</h2>
+      <div class="exam-card rounded-lg shadow-lg p-4 border">
+        <div class="flex justify-between text-center">
+          <h3 class="font-bold text-primary">考生信息</h3>
         </div>
         <!-- 考生信息部分 -->
         <el-descriptions class="margin-top" :column="3" :size="size" border>
@@ -38,8 +38,8 @@
           </el-descriptions-item>
         </el-descriptions>
         <el-divider />
-        <div class="flex justify-between text-center mt-4 mb-2">
-          <h2 class="text-2xl font-bold text-primary">考试信息</h2>
+        <div class="flex justify-between text-center mt-2">
+          <h3 class="font-bold text-primary">考试信息</h3>
         </div>
         <div class="space-y-4">
           <el-descriptions class="margin-top" :column="2" :size="size" border>
@@ -82,8 +82,8 @@
           </el-descriptions>
         </div>
         <el-divider />
-        <div class="flex justify-between text-center mt-4 mb-4">
-          <h2 class="text-2xl font-bold text-primary">考试须知</h2>
+        <div class="flex justify-between text-center mt-2">
+          <h3 class="font-bold text-primary">考试须知</h3>
         </div>
         <div class="space-y-4">
           <div v-if="!examLoading && examNotices.length > 0" class="space-y-2 pl-4">
@@ -262,17 +262,17 @@ export default {
         return
       }
 
-      if (!this.examinee) {
-        this.$message.warning('未获取到考生信息')
+      if (!this.examinee || !this.examinee.id || !this.examinee.examinee_name) {
+        this.$message.warning('未获取到完整的考生信息')
         return
       }
 
       this.isLoading = true
 
       try {
-        console.log('开始生成试卷...')
+        console.log('开始生成试卷...', { examinee: this.examinee, exam: this.lastExam })
 
-        // 创建可序列化的考生数据对象
+        // 创建可序列化的完整考生数据对象
         const examineeData = {
           id: this.examinee.id,
           examinee_name: this.examinee.examinee_name || '',
@@ -296,15 +296,18 @@ export default {
           exam_notice: this.lastExam.exam_notice || []
         }))
 
-        // 调用生成试卷API
-        const result = await window.electronAPI.examingGeneratePaper({
-          examineeId: examineeData.id,
-          examId: examData.id
+        // 直接调用ipcRenderer接口，跳过preload.js中定义的不匹配方法
+        const result = await window.electronAPI.ipcRenderer.invoke('examing-generate-paper', {
+          examineeData: examineeData,
+          examData: examData
         })
 
         if (result && result.success) {
           console.log('生成试卷成功:', result)
-          // 由于Vuex store中没有setPaper方法，这里可以考虑添加或者直接传递参数
+
+          // 新增：保存试卷信息到store
+          this.$store.commit('setPaper', result.data)
+
           this.$alert(
             '已完成组卷，点击"进入考试"开始答题',
             '组卷完成',
@@ -313,9 +316,9 @@ export default {
               type: 'success'
             }
           ).then(() => {
-            // 使用命名路由传递参数
+            // 使用正确的路由名称进行跳转
             this.$router.push({
-              name: 'examinee-examing',
+              name: 'Examing',
               params: { paperId: result.data.id }
             })
           })
@@ -348,7 +351,6 @@ export default {
 /* 确保容器占满可用空间 */
 .student-home-container {
   height: 100%;
-  min-height: 100vh;
   display: flex;
   flex-direction: column;
 }
@@ -357,17 +359,17 @@ export default {
 .content-wrapper {
   flex: 1;
   width: 100%;
+  height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 1rem;
   box-sizing: border-box;
 }
 
 /* 考试卡片样式 - 响应式设计 */
 .exam-card {
   width: 100%;
-  min-height: calc(100vh - 4rem);
+  margin: 0px 0px 20px 0px;
   background-color: white;
   display: flex;
   flex-direction: column;
@@ -378,11 +380,6 @@ export default {
 @media (max-width: 768px) {
   .exam-card {
     max-width: 100%;
-    min-height: calc(100vh - 2rem);
-  }
-
-  .content-wrapper {
-    padding: 0.5rem;
   }
 }
 
@@ -390,7 +387,6 @@ export default {
 @media (min-width: 1200px) {
   .exam-card {
     max-width: 80vw;
-    max-height: 90vh;
   }
 }
 
@@ -398,7 +394,6 @@ export default {
 @media (min-width: 1600px) {
   .exam-card {
     max-width: 90vw;
-    max-height: 90vh;
   }
 }
 
diff --git a/src/views/user/ExamingView.vue b/src/views/user/ExamingView.vue
new file mode 100644
index 0000000..ad02f27
--- /dev/null
+++ b/src/views/user/ExamingView.vue
@@ -0,0 +1,1185 @@
+<template>
+  <div v-if="isReady" class="student-home-container">
+    <div class="exam-content">
+      <!-- 顶栏：考生信息和考试信息 -->
+      <div class="exam-top-bar rounded shadow-sm mb-2">
+        <div class="left-info">
+          <div class="info-item"><span class="label">考生姓名：</span><span class="value">{{ examinee && examinee.examinee_name }}</span></div>
+          <div class="info-item"><span class="label">身份证号：</span><span class="value">{{ formatIdCard(examinee && examinee.examinee_id_card) }}</span></div>
+          <div class="info-item"><span class="label">准考证号：</span><span class="value">{{ examinee && examinee.examinee_admission_ticket }}</span></div>
+        </div>
+        <div class="right-info">
+          <div class="info-item"><span class="label">考试总分：</span><span class="value">{{ paper && paper.paper_score }}分</span></div>
+          <div class="info-item"><span class="label">总时长：</span><span class="value">{{ paper && paper.paper_minutes }}分钟</span></div>
+          <div class="info-item"><span class="label">最小时长：</span><span class="value">{{ paper && paper.paper_minutes_min }}分钟</span></div>
+          <div class="info-item timer"><span class="label">倒计时：</span><span class="value">{{ countdown }}</span></div>
+        </div>
+      </div>
+
+      <div class="exam-main rounded shadow-sm">
+        <!-- 左侧边栏：试题序号列表 -->
+        <div class="exam-sidebar">
+          <div class="sidebar-title">试题列表</div>
+          <div class="question-list">
+            <div v-for="item in questionList" :key="item.serial_no" class="question-item" :class="{ 'current': item.serial_no === currentQuestion, 'answered': item.answered === 1 }" @click="goToQuestion(item.serial_no)">{{ item.serial_no }}</div>
+          </div>
+        </div>
+
+        <!-- 主体部分：试题内容 -->
+        <div class="exam-question-content">
+          <div v-if="questionList.length > 0">
+            <div class="question-header">
+              <span class="question-number">第 {{ currentQuestion }} 题</span>
+              <span class="question-score">({{ currentQuestionData.question_detail && currentQuestionData.question_detail.score || 0 }}分)</span>
+            </div>
+            <div class="question-body">
+              <div class="question-type">{{ currentQuestionData.question && currentQuestionData.question.type_info && currentQuestionData.question.type_info.item_name || '' }}</div>
+              <div class="question-text" v-html="currentQuestionData.question && currentQuestionData.question.question_description || ''"></div>
+
+              <!-- 题目图片 -->
+              <div class="question-images" v-if="currentQuestionData.question && currentQuestionData.question.images && currentQuestionData.question.images.length > 0">
+                <div v-for="(image, index) in currentQuestionData.question.images" :key="index" class="question-image">
+                  <img :src="image.image_base64" :alt="image.image_name" @click="viewImage(image.image_base64)" style="max-height:300px;max-width:500px;">
+                </div>
+              </div>
+
+              <!-- 题目数据集 -->
+              <div class="question-datasets" v-if="currentQuestionData.question && currentQuestionData.question.datasets && currentQuestionData.question.datasets.length > 0">
+                <div v-for="(dataset, index) in currentQuestionData.question.datasets" :key="index" class="question-dataset">
+                  <h4>{{ dataset.dataset_name }}</h4>
+                  <pre>{{ dataset.dataset_data }}</pre>
+                </div>
+              </div>
+
+              <!-- 问题详情 -->
+              <div v-if="currentQuestionData.question_detail">
+                <!-- 选择题选项 -->
+                <div class="question-options" v-if="currentQuestionData.question && currentQuestionData.question.question_type === 'choice'">
+                  <!-- 显示choice_description -->
+                  <div style="font-weight:bold" v-html="currentQuestionData.question_detail.choice_description || ''"></div>
+                  <div class="option-item" v-for="(option, oIndex) in currentQuestionData.question_detail.choice_options || []" :key="oIndex" :class="{ 'selected': option.selected }" @click="selectOption(oIndex)">
+                    <span class="option-letter">{{ String.fromCharCode(65 + oIndex) }}</span>
+                    <span class="option-text" v-html="option.content || option"></span>
+                  </div>
+                </div>
+
+                <!-- 填空题输入框 -->
+                <div class="question-answer" v-else-if="currentQuestionData.question && currentQuestionData.question.question_type === 'fill_blank'">
+                  <!-- 显示fill_blank_description -->
+                  <p style="font-weight:bold" v-html="currentQuestionData.question_detail.blank_description || ''"></p>
+
+                  <input type="text" placeholder="请在此填写答案" v-model="currentQuestionData.question_detail.examinee_answers" @input="saveFillAnswer">
+                  <p style="color: #9f9f9f; line-height: 200%">{{ blankAnswerTip }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 底栏：操作按钮 -->
+      <div class="exam-bottom-bar rounded shadow-sm mt-2">
+        <el-button type="primary" size="small" @click="prevQuestion" :disabled="currentQuestion === 1">上一题</el-button>
+        <el-button type="primary" size="small" @click="nextQuestion" :disabled="currentQuestion === questionList.length">下一题</el-button>
+        <el-button type="danger" size="small" @click="submitExam" :disabled="!canSubmit">交卷</el-button>
+      </div>
+    </div>
+
+    <!-- 图片查看模态框 -->
+    <div v-if="showImageViewer" class="image-viewer-mask" @click="closeImageViewer">
+      <div class="image-viewer-container" @click.stop>
+        <img :src="currentImage" class="viewer-image">
+        <button class="close-btn" @click="closeImageViewer">关闭</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ExamingView',
+  components: {
+    ElButton: require('element-ui').Button
+  },
+  data() {
+    return {
+      isReady: false,
+      currentQuestion: 1,
+      questionList: [],
+      questionDataMap: {},
+      countdown: '01:59:59', // 初始倒计时120分钟
+      canSubmit: false, // 控制交卷按钮是否可用
+      showImageViewer: false,
+      currentImage: '',
+      timer: null,
+      processTimer: null,
+      paperId: ''
+    }
+  },
+  computed: {
+    // 从store中获取考生信息
+    examinee() {
+      return this.$store.state.examinee
+    },
+    // 从store中获取试卷信息
+    paper() {
+      return this.$store.state.paper
+    },
+    // 当前题目数据
+    currentQuestionData() {
+      return this.questionDataMap[this.currentQuestion] || { question: null, question_detail: null, answer: '' }
+    }
+  },
+  created() {
+    // 获取路由参数
+    if (this.$route.params && this.$route.params.paperId) {
+      this.paperId = this.$route.params.paperId
+    }
+  },
+  mounted() {
+    // 检查是否已登录
+    if (!this.$store.state.isLoggedIn || !this.paperId) {
+      this.$router.push('/')
+      return
+    }
+
+    this.initializeExam()
+  },
+  beforeDestroy() {
+    // 清理定时器
+    if (this.timer) {
+      clearInterval(this.timer)
+      this.timer = null
+    }
+    if (this.processTimer) {
+      clearInterval(this.processTimer)
+      this.processTimer = null
+    }
+    // 清除试卷信息
+    this.$store.commit('clearPaper')
+  },
+  methods: {
+    // 初始化考试
+    async initializeExam() {
+      try {
+        console.warn(this.paper)
+        console.warn(this.paperId)
+        // 1. 检查store中是否已有试卷信息
+        if (!this.paper || !this.paper.id) {
+          // 如果store中没有，尝试从后端获取
+          await this.loadPaperInfo(this.paperId)
+        }
+
+        // 2. 加载试题列表
+        await this.loadQuestionList(this.paperId)
+
+        // 3. 初始化计时器
+        if (this.paper && this.paper.paper_minutes) {
+          this.initializeTimer(this.paper.paper_minutes * 60)
+        } else {
+          this.initializeTimer(120 * 60) // 默认120分钟
+        }
+
+        // 4. 启动自动保存定时器
+        this.startProcessTimer(this.paperId)
+
+        this.isReady = true
+        this.canSubmit = this.paper && this.paper.paper_minutes_min ?
+          false : true // 根据最小时长决定初始提交状态
+      } catch (error) {
+        console.error('初始化考试失败:', error)
+        this.$message.error(`初始化考试失败: ${error.message || '未知错误'}`)
+      }
+    },
+
+    // 身份证号格式化方法
+    formatIdCard(idCard) {
+      if (!idCard || idCard.length !== 18) return idCard
+      return idCard.substring(0, 9) + '*****' + idCard.substring(14)
+    },
+
+    // 初始化计时器方法
+    initializeTimer(totalSeconds) {
+      let remainingSeconds = totalSeconds
+      this.countdown = this.formatTime(remainingSeconds)
+
+      this.timer = setInterval(() => {
+        remainingSeconds--
+        if (remainingSeconds <= 0) {
+          // 时间到，自动提交
+          if (this.timer) {
+            clearInterval(this.timer)
+            this.timer = null
+          }
+          this.autoSubmitExam()
+        } else {
+          this.countdown = this.formatTime(remainingSeconds)
+
+          // 剩余10分钟时提示
+          if (remainingSeconds === 10 * 60) {
+            this.$message.warning('考试时间剩余10分钟')
+          }
+
+          // 检查是否达到最小交卷时间
+          if (this.paper && this.paper.paper_minutes_min &&
+              remainingSeconds <= totalSeconds - (this.paper.paper_minutes_min * 60)) {
+            this.canSubmit = true
+          }
+        }
+      }, 1000)
+    },
+
+    // 格式化时间方法
+    formatTime(seconds) {
+      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')}`
+    },
+
+    // 启动自动保存定时器方法
+    startProcessTimer(paperId) {
+      // 清除可能存在的旧定时器
+      if (this.processTimer) {
+        clearInterval(this.processTimer)
+        this.processTimer = null
+      }
+
+      // 每15秒调用一次processPaper接口
+      this.processTimer = setInterval(async () => {
+        try {
+          // 正确传递对象参数 { paperId: paperId }
+          const result = await window.electronAPI.examingProcessPaper({ paperId: paperId })
+          // 将返回的paper对象同步到store中
+          if (result.success && result.data) {
+            this.$store.commit('setPaper', result.data)
+          }
+        } catch (error) {
+          console.error('自动更新试卷状态失败:', error)
+          // 错误不中断定时器，继续尝试下一次
+        }
+      }, 15000) // 15秒 = 15000毫秒
+    },
+
+    // 加载试卷信息的方法
+    async loadPaperInfo(paperId) {
+      try {
+        console.log('开始加载试卷信息，paperId:', paperId)
+        // 修复：使用直接调用方式
+        const result = await window.electronAPI.examingProcessPaper({ paperId: paperId })
+        console.log('loadPaperInfo结果:', result)
+
+        if (result && result.success && result.data) {
+          // 将返回的paper对象同步到store中
+          this.$store.commit('setPaper', result.data)
+          this.canSubmit = result.data.paper_minutes_min ? false : true
+        } else {
+          console.error('加载试卷信息失败: 返回数据无效')
+          // 如果无法获取试卷信息，创建一个默认的试卷对象以避免页面白屏
+          this.$store.commit('setPaper', {
+            id: paperId,
+            paper_score: 100,
+            paper_minutes: 120,
+            paper_minutes_min: 60
+          })
+          this.canSubmit = false
+        }
+      } catch (error) {
+        console.error('加载试卷信息失败:', error)
+        // 错误情况下也创建一个默认的试卷对象
+        this.$store.commit('setPaper', {
+          id: paperId,
+          paper_score: 100,
+          paper_minutes: 120,
+          paper_minutes_min: 60
+        })
+        this.canSubmit = false
+      }
+    },
+
+    // 加载试题数据 - 结合high_version的改进
+    async loadQuestionList(paperId) {
+      try {
+        console.log('开始加载试题数据，paperId:', paperId)
+        // 修复：使用直接调用方式
+        const result = await window.electronAPI.examingLoadPaperSerial({ paperId: paperId })
+        console.log('loadPaperSerial结果:', result)
+
+        if (result && result.success && result.data) {
+          // 存储题号序列
+          this.questionList = result.data
+          console.log('试题列表长度:', this.questionList.length)
+
+          // 添加详细日志输出，检查每个item的结构
+          if (this.questionList.length > 0) {
+            console.log('第一个试题item的完整结构:', JSON.stringify(this.questionList[0], null, 2))
+            // 打印所有可能的ID字段
+            this.questionList.forEach((item, index) => {
+              console.log(`第${index + 1}题ID字段信息:`, {
+                serial_no: item.serial_no,
+                id: item.id,
+                choice_id: item.choice_id,
+                fill_blank_id: item.fill_blank_id,
+                table_name: item.table_name,
+                question_id: item.question_id
+              })
+            })
+          }
+
+          // 初始化题目数据映射
+          this.questionList.forEach(item => {
+            this.$set(this.questionDataMap, item.serial_no, {
+              question: null,
+              question_detail: null,
+              answer: ''
+            })
+          })
+          console.log('初始化题目数据映射成功')
+          // 设置初始题目
+          if (this.questionList.length > 0) {
+            this.currentQuestion = 1
+            // 加载第一题的详细数据
+            await this.loadQuestionDetail(1)
+          }
+        } else {
+          console.error('加载试题失败: 返回数据无效')
+          this.$message.error('加载试题失败，返回数据无效')
+        }
+      } catch (error) {
+        console.error('加载试题失败:', error)
+        this.$message.error(`加载试题失败: ${error.message || '未知错误'}`)
+      }
+    },
+
+    // 加载题目详细数据 - 结合high_version中处理已保存答案的改进
+    async loadQuestionDetail(serialNo) {
+      try {
+        // 查找当前题目的信息
+        const questionItem = this.questionList.find(item => item.serial_no === serialNo)
+        console.log(`查找题号${serialNo}的结果:`, questionItem)
+
+        if (!questionItem) {
+          console.error(`未找到题号${serialNo}的题目信息`)
+          return
+        }
+
+        // 打印questionItem的完整结构
+        console.log(`题号${serialNo}的完整结构:`, JSON.stringify(questionItem, null, 2))
+
+        // 关键修复：使用正确的ID字段
+        // 应该使用id字段（来自question_choices或question_fill_blanks表），而不是question_id（来自paper_questions表）
+        let relatedId = questionItem.id // 这是正确的ID字段
+
+        // 如果id不存在，尝试使用题型特定的ID字段
+        if (!relatedId) {
+          relatedId = questionItem.choice_id || questionItem.fill_blank_id
+        }
+
+        console.log(`最终使用的relatedId:`, relatedId, `(tableName: ${questionItem.table_name})`)
+
+        if (!relatedId) {
+          console.error(`题号${serialNo}没有找到有效的ID值`)
+          return
+        }
+
+        // 修复：使用直接调用方式
+        const result = await window.electronAPI.examingGetQuestionByRelatedId({
+          tableName: questionItem.table_name,
+          relatedId: relatedId
+        })
+
+        if (result && result.success && result.data) {
+          // 更新题目数据
+          this.$set(this.questionDataMap, serialNo, {
+            question: result.data.question,
+            question_detail: result.data.question_detail || {},
+            answer: ''
+          })
+
+          // 如果是选择题，设置已选中的选项（来自high_version的改进）
+          if (result.data.question.question_type === 'choice') {
+            try {
+              const currentData = this.questionDataMap[serialNo]
+              // 确保选项是数组格式
+              let choiceOptions = currentData.question_detail.choice_options
+              if (!Array.isArray(choiceOptions)) {
+                try {
+                  choiceOptions = JSON.parse(choiceOptions)
+                } catch (e) {
+                  console.error('解析选项失败:', e)
+                  // 如果解析失败，使用空数组
+                  choiceOptions = []
+                }
+              }
+
+              // 处理已保存的答案，兼容数组和字符串类型
+              const answers = currentData.question_detail.examinee_answers
+              let examineeAnswers = []
+              if (Array.isArray(answers)) {
+                examineeAnswers = answers
+              } else if (typeof answers === 'string' && answers.trim()) {
+                try {
+                  // 尝试解析JSON字符串
+                  const parsedAnswers = JSON.parse(answers)
+                  examineeAnswers = Array.isArray(parsedAnswers) ? parsedAnswers : [parsedAnswers]
+                } catch (e) {
+                  console.error('解析已保存答案失败:', e)
+                  // 如果解析失败，尝试直接使用字符串（可能是字母格式的旧数据）
+                  examineeAnswers = [answers]
+                }
+              }
+
+              console.log('已保存的答案:', examineeAnswers)
+              console.log('选项列表:', choiceOptions)
+
+              // 创建副本以确保响应式更新
+              const questionDetailCopy = { ...currentData.question_detail }
+              questionDetailCopy.choice_options = choiceOptions.map((option, index) => {
+                // 确保选项是对象
+                const optionObj = typeof option === 'string' ? { content: option, selected: false } : { ...option }
+
+                // 检查选项内容是否在已保存的答案中
+                let isSelected = false
+                if (examineeAnswers && examineeAnswers.length > 0) {
+                  // 支持两种匹配方式：
+                  // 1. 匹配选项内容（新格式）
+                  // 2. 匹配字母（旧格式，向后兼容）
+                  isSelected = examineeAnswers.some(answer => {
+                    // 方式1：匹配选项内容
+                    const answerStr = typeof answer === 'string' ? answer : JSON.stringify(answer)
+                    const optionContentStr = typeof optionObj.content === 'string' ? optionObj.content : JSON.stringify(optionObj.content)
+
+                    // 方式2：匹配字母（向后兼容）
+                    const optionLetter = String.fromCharCode(65 + index)
+                    const isLetterMatch = typeof answer === 'string' && answer.toUpperCase() === optionLetter
+
+                    return answerStr === optionContentStr || isLetterMatch
+                  })
+                }
+
+                return { ...optionObj, selected: isSelected }
+              })
+
+              // 使用$set确保响应式更新
+              this.$set(this.questionDataMap[serialNo], 'question_detail', questionDetailCopy)
+              console.log('更新后的选项状态:', questionDetailCopy.choice_options)
+            } catch (e) {
+              console.error('解析已保存答案失败:', e)
+            }
+          }
+          console.log('加载题目详细数据成功，题号:', serialNo)
+        } else {
+          console.error('加载题目详细数据失败:', result)
+          this.$message.error('加载题目详细数据失败')
+        }
+      } catch (error) {
+        console.error('加载题目详细数据异常:', error)
+      }
+    },
+
+    // 上一题方法
+    async prevQuestion() {
+      if (this.currentQuestion > 1) {
+        this.currentQuestion--
+        await this.loadQuestionDetail(this.currentQuestion)
+      }
+    },
+
+    // 下一题方法
+    async nextQuestion() {
+      if (this.currentQuestion < this.questionList.length) {
+        this.currentQuestion++
+        await this.loadQuestionDetail(this.currentQuestion)
+      }
+    },
+
+    // 跳转到指定题目
+    async goToQuestion(serialNo) {
+      this.currentQuestion = serialNo
+      await this.loadQuestionDetail(serialNo)
+    },
+
+    // 交卷方法
+    async submitExam() {
+      try {
+        if (!this.canSubmit) {
+          this.$message.warning('暂不能交卷，请先完成考试或等待最小时长')
+          return
+        }
+
+        // 显示确认对话框
+        this.$confirm('确定要交卷吗？交卷后将无法修改答案。', '确认交卷', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(async () => {
+          // 保存当前题目的答案
+          await this.saveCurrentAnswer()
+
+          // 修复：使用直接调用方式
+          const result = await window.electronAPI.examingSubmitPaper({ paperId: this.paperId })
+
+          if (result && result.success) {
+            this.$message.success('交卷成功！')
+            // 清理定时器
+            if (this.timer) {
+              clearInterval(this.timer)
+              this.timer = null
+            }
+            if (this.processTimer) {
+              clearInterval(this.processTimer)
+              this.processTimer = null
+            }
+            // 跳转到结果页面
+            this.$router.push('/user/exam-result/' + this.paperId)
+          } else {
+            this.$message.error('交卷失败: ' + (result.message || '未知错误'))
+          }
+        }).catch(() => {
+          // 用户取消交卷
+          this.$message.info('已取消交卷')
+        })
+      } catch (error) {
+        console.error('交卷过程异常:', error)
+        this.$message.error('交卷失败: ' + error.message)
+      }
+    },
+
+    // 自动交卷方法（时间到了自动调用）
+    async autoSubmitExam() {
+      try {
+        this.$message.info('考试时间已结束，系统将自动为您交卷')
+
+        // 保存当前题目的答案
+        await this.saveCurrentAnswer()
+
+        // 修复：使用直接调用方式
+        const result = await window.electronAPI.examingSubmitPaper({ paperId: this.paperId })
+
+        if (result && result.success) {
+          // 清理定时器
+          if (this.processTimer) {
+            clearInterval(this.processTimer)
+            this.processTimer = null
+          }
+          // 跳转到结果页面
+          this.$router.push('/user/exam-result/' + this.paperId)
+        } else {
+          this.$message.error('自动交卷失败，请手动交卷')
+        }
+      } catch (error) {
+        console.error('自动交卷过程异常:', error)
+        this.$message.error('自动交卷失败，请手动交卷')
+      }
+    },
+
+    // 查看图片方法
+    viewImage(imageBase64) {
+      this.currentImage = imageBase64
+      this.showImageViewer = true
+    },
+
+    // 关闭图片查看器
+    closeImageViewer() {
+      this.showImageViewer = false
+      this.currentImage = ''
+    },
+
+    // 选择题选择选项
+    async selectOption(optionIndex) {
+      const currentData = this.currentQuestionData
+      if (currentData.question && currentData.question_detail && currentData.question.question_type === 'choice') {
+        // 清除之前的选择
+        currentData.question_detail.choice_options.forEach(option => {
+          option.selected = false
+        })
+        // 设置新的选择
+        currentData.question_detail.choice_options[optionIndex].selected = true
+
+        // 修复：保存选项内容而不是字母，包装为JSON数组格式
+        const selectedOption = currentData.question_detail.choice_options[optionIndex]
+        const answerContent = selectedOption.content
+        // 包装为数组并转换为JSON字符串
+        const answerToSave = JSON.stringify([answerContent])
+        await this.saveAnswer(this.currentQuestion, answerToSave)
+
+        // 废弃：原来保存字母的代码
+        // const answer = String.fromCharCode(65 + optionIndex) // A, B, C, D...
+        // await this.saveAnswer(this.currentQuestion, answer)
+      }
+    },
+
+    // 保存填空题答案
+    async saveFillAnswer() {
+      const currentData = this.currentQuestionData
+      if (currentData.question && currentData.question.question_type === 'fill_blank') {
+        const answer = currentData.question_detail.examinee_answers || ''
+        // 修复：将填空题答案也包装为JSON数组字符串
+        const answerToSave = JSON.stringify([answer])
+        await this.saveAnswer(this.currentQuestion, answerToSave)
+      }
+    },
+
+    // 保存当前题目的答案
+    async saveCurrentAnswer() {
+      const currentData = this.currentQuestionData
+      if (!currentData.question) return
+
+      if (currentData.question.question_type === 'choice' && currentData.question_detail) {
+        // 查找选中的选项
+        const selectedIndex = currentData.question_detail.choice_options.findIndex(option => option.selected)
+        if (selectedIndex !== -1) {
+          // 修复：保存选项内容而不是字母，包装为JSON数组格式
+          const selectedOption = currentData.question_detail.choice_options[selectedIndex]
+          const answerContent = selectedOption.content
+          // 包装为数组并转换为JSON字符串
+          const answerToSave = JSON.stringify([answerContent])
+          await this.saveAnswer(this.currentQuestion, answerToSave)
+        }
+      } else if (currentData.question.question_type === 'fill_blank' && currentData.question_detail) {
+        const answer = currentData.question_detail.examinee_answers || ''
+        // 修复：将填空题答案也包装为JSON数组字符串
+        const answerToSave = JSON.stringify([answer])
+        await this.saveAnswer(this.currentQuestion, answerToSave)
+      }
+    },
+
+    // 保存答案到后端
+    async saveAnswer(questionSerialNo, answer) {
+      try {
+        // 查找对应的题目ID
+        const questionItem = this.questionList.find(item => item.serial_no === questionSerialNo)
+        if (!questionItem) return
+
+        // 修复：移除重复的JSON.stringify，因为答案在调用前已经是正确格式的JSON字符串
+        // const answerToSave = JSON.stringify(answer)
+
+        // 修复：传递正确的参数结构，包含tableName
+        const result = await window.electronAPI.examingUpdateAnswer({
+          tableName: questionItem.table_name, // 添加表名参数
+          id: questionItem.id, // 使用id而不是questionId
+          answers: answer // 直接使用已经格式化好的答案
+        })
+
+        if (result && result.success) {
+          console.log('保存答案成功:', questionSerialNo, answer)
+          // 更新题目回答状态
+          const index = this.questionList.findIndex(item => item.serial_no === questionSerialNo)
+          if (index !== -1) {
+            this.$set(this.questionList[index], 'answered', 1)
+          }
+        } else {
+          console.error('保存答案失败:', result)
+        }
+      } catch (error) {
+        console.error('保存答案异常:', error)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+/* 整体布局容器 - 确保占满整个可用空间 */
+.student-home-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* 考试内容容器 - 作为flex容器管理顶栏、中间内容和底栏 */
+.exam-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  padding: 0;
+  margin: 0;
+}
+
+/* 顶栏：考生信息和考试信息 - 设置固定高度 */
+.exam-top-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 1.5rem;
+  background-color: #fff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-bottom: var(--gap-between-sections);
+  gap: 1rem;
+  height: var(--exam-top-bar-height);
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
+
+.left-info, .right-info {
+  display: flex;
+  gap: 1.5rem;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.info-item {
+  display: flex;
+  align-items: center;
+  font-size: 0.875rem;
+}
+
+.label {
+  color: #606266;
+  margin-right: 0.25rem;
+}
+
+.value {
+  color: #303133;
+  font-weight: 500;
+}
+
+.timer .value {
+  color: #f56c6c;
+  font-weight: bold;
+  font-size: 1rem;
+}
+
+/* 主体内容区 - 计算得出的动态高度，填满剩余空间 */
+.exam-main {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+  padding: var(--content-padding);
+  gap: var(--gap-between-sections);
+  margin: 0;
+  background-color: #f0f2f5;
+}
+
+/* 左侧边栏：试题序号列表 - 固定宽度，可垂直滚动 */
+.exam-sidebar {
+  width: 300px;
+  background-color: #fff;
+  border-radius: 4px;
+  padding: 1rem;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  flex-shrink: 0;
+}
+
+/* 左侧边栏自定义滚动条 */
+.exam-sidebar::-webkit-scrollbar {
+  width: 6px;
+}
+
+.exam-sidebar::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+.exam-sidebar::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+
+.exam-sidebar::-webkit-scrollbar-thumb:hover {
+  background: #a1a1a1;
+}
+
+.sidebar-title {
+  font-weight: bold;
+  color: #303133;
+  margin-bottom: 1rem;
+  text-align: center;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid #e4e7ed;
+}
+
+.question-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  flex: 1;
+}
+
+.question-item {
+  width: 40px;
+  height: 40px;
+  border-radius: 4px;
+  background-color: #f5f7fa;
+  border: 1px solid #dcdfe6;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-size: 0.875rem;
+  font-weight: bold;
+}
+
+.question-item:hover {
+  background-color: #e6f7ff;
+  border-color: #409eff;
+}
+
+.question-item.current {
+  background-color: #409eff!important;
+  color: white!important;
+  border-color: #409eff;
+}
+
+.question-item.answered {
+  background-color: #9ffa7b;
+  color:#2faf33;
+  border-color: #2faf33;
+  border-width: 2px;
+}
+
+/* 主体部分：试题内容 - 自动适应剩余空间，可垂直滚动 */
+.exam-question-content {
+  flex: 1;
+  background-color: white;
+  border-radius: 4px;
+  padding: 20px;
+  overflow-y: auto;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+/* 自定义滚动条 */
+.exam-question-content::-webkit-scrollbar {
+  width: 8px;
+}
+
+.exam-question-content::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+
+.exam-question-content::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 4px;
+}
+
+.exam-question-content::-webkit-scrollbar-thumb:hover {
+  background: #a1a1a1;
+}
+
+/* 题目头部 */
+.question-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+  padding-bottom: 10px;
+  border-bottom: 2px solid #e4e7ed;
+}
+
+.question-number {
+  font-size: 18px;
+  font-weight: bold;
+  color: #303133;
+  margin-right: 10px;
+}
+
+.question-score {
+  font-size: 14px;
+  color: #f56c6c;
+  font-weight: 500;
+}
+
+/* 题目主体 */
+.question-body {
+  font-size: 15px;
+  line-height: 1.6;
+  color: #303133;
+}
+
+/* 题型标签 */
+.question-type {
+  display: inline-block;
+  background-color: #ecf5ff;
+  color: #409eff;
+  padding: 2px 8px;
+  border-radius: 3px;
+  font-size: 12px;
+  margin-bottom: 10px;
+}
+
+/* 题目文本 */
+.question-text {
+  margin-bottom: 15px;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+/* 题目图片 */
+.question-images {
+  margin-bottom: 15px;
+}
+
+.question-image {
+  margin-bottom: 10px;
+  text-align: center;
+}
+
+.question-image img {
+  max-width: 100%;
+  max-height: 400px;
+  border-radius: 4px;
+  border: 1px solid #e4e7ed;
+  cursor: pointer;
+  transition: transform 0.2s;
+}
+
+.question-image img:hover {
+  transform: scale(1.02);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* 题目数据集 */
+.question-datasets {
+  margin-bottom: 15px;
+}
+
+.question-dataset {
+  margin-bottom: 10px;
+}
+
+.question-dataset h4 {
+  font-size: 14px;
+  margin: 0 0 5px 0;
+  color: #606266;
+}
+
+.question-dataset pre {
+  background-color: #f8f8f8;
+  padding: 10px;
+  border-radius: 4px;
+  border: 1px solid #e4e7ed;
+  font-size: 13px;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+/* 选择题选项 */
+.question-options {
+  margin-top: 15px;
+}
+
+.option-item {
+  display: flex;
+  align-items: flex-start;
+  padding: 12px 15px;
+  margin-bottom: 10px;
+  background-color: #f8f9fa;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+  border: 1px solid transparent;
+}
+
+.option-item:hover {
+  background-color: #f0f2f5;
+  border-color: #dcdfe6;
+}
+
+.option-item.selected {
+  background-color: #bcffb3;
+  border-color: #007c11;
+  font-weight:bold;
+}
+
+.option-letter {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  background-color: #409eff;
+  color: white;
+  border-radius: 50%;
+  font-size: 12px;
+  font-weight: bold;
+  margin-right: 12px;
+  flex-shrink: 0;
+}
+
+.option-item.selected .option-letter {
+  background-color: #006e25;
+}
+
+.option-text {
+  flex: 1;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+/* 填空题答案 */
+.question-answer {
+  margin-top: 15px;
+}
+
+.question-answer input {
+  width: 100%;
+  padding: 10px 15px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  font-size: 14px;
+  margin-top: 10px;
+  margin-bottom: 5px;
+  transition: border-color 0.2s;
+}
+
+.question-answer input:focus {
+  outline: none;
+  border-color: #409eff;
+}
+
+/* 表格样式优化 - 针对试题中的表格 */
+.question-text table,
+.option-text table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 10px 0;
+}
+
+.question-text th,
+.option-text th,
+.question-text td,
+.option-text td {
+  border: 1px solid #dcdfe6;
+  padding: 8px 12px;
+  text-align: center;
+}
+
+.question-text th,
+.option-text th {
+  background-color: #f8f9fa;
+  font-weight: 600;
+  color: #303133;
+}
+
+.question-text tr:nth-child(even),
+.option-text tr:nth-child(even) {
+  background-color: #fafafa;
+}
+
+.question-text tr:hover,
+.option-text tr:hover {
+  background-color: #f5f7fa;
+}
+
+/* 底栏：操作按钮 */
+.exam-bottom-bar {
+  display: flex;
+  justify-content: center;
+  gap: 15px;
+  padding: 15px;
+  background-color: white;
+  margin-top: 10px;
+}
+
+/* 图片查看器样式 */
+.image-viewer-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  cursor: pointer;
+}
+
+.image-viewer-container {
+  position: relative;
+  max-width: 90%;
+  max-height: 90%;
+  background-color: white;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  cursor: default;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.viewer-image {
+  max-width: 100%;
+  max-height: calc(90vh - 80px); /* 减去padding和按钮高度 */
+  object-fit: contain;
+  border-radius: 4px;
+}
+
+.close-btn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 30px;
+  height: 30px;
+  background-color: rgba(255, 255, 255, 0.8);
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+}
+
+.close-btn:hover {
+  background-color: white;
+  transform: scale(1.1);
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  :root {
+    --exam-top-bar-height: 120px;
+    --sidebar-width: 100%;
+  }
+
+  .exam-top-bar {
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+  }
+
+  .left-info, .right-info {
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    justify-content: center;
+  }
+
+  .exam-main {
+    flex-direction: column;
+  }
+
+  .exam-sidebar {
+    max-height: 150px;
+  }
+
+  .question-list {
+    justify-content: center;
+  }
+}
+
+/* 确保整个页面布局正确 */
+html, body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+/* 确保ExamineeLayout中的content-container不显示滚动条 */
+.content-container {
+  overflow: hidden !important;
+}
+
+/* 其他原有样式保持不变 */
+</style>
\ No newline at end of file
diff --git a/vue.config.js b/vue.config.js
index 90df805..5c19788 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,4 +1,13 @@
 module.exports = {
+  // 添加应用标题配置
+  chainWebpack: config => {
+    config
+      .plugin('html')
+      .tap(args => {
+        args[0].title = '统计数据考试系统'
+        return args
+      })
+  },
   pluginOptions: {
     electronBuilder: {
       nodeIntegration: false,