创建ExamingView考试页模板

src/router/index.js

@@ -1,6 +1,8 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import WelcomeView from '@/views/WelcomeView.vue'
+import ExamingView from '@/views/user/ExamingView.vue'
 import ExamineeHomeView from '@/views/user/ExamineeHomeView.vue'
+
 import AdminHomeView from '@/views/admin/AdminHomeView.vue'
 // 导入QuestionManagementView
 import QuestionManagementView from '@/views/admin/QuestionManagementView.vue'
@@ -26,6 +28,12 @@ const router = createRouter({
       name: 'examinee-home',
       component: ExamineeHomeView,
     },
+    // Modify the examing route to use lazy loading
+    {
+      path: '/examinee/examing',
+      name: 'examinee-examing',
+      component: ExamingView,
+    },
     // admin/AdminHomeView路由
     {
       path: '/admin/home',

src/views/user/ExamineeHomeView.vue

@@ -256,7 +256,7 @@ const startExam = async () => {
   }
 
   console.log('开始考试 - 调用接口')
-  isLoading.value = true
+  // isLoading.value = true
 
   try {
     // 这里可以添加开始考试的逻辑
@@ -268,7 +268,7 @@ const startExam = async () => {
       console.log('开始考试 - 成功')
       ElMessage.success('即将开始考试！')
       // 跳转到考试页面
-      // router.push('/exam')
+      router.push('/examinee/examing')
       isLoading.value = false
     }, 1000)
   } catch (error) {

src/views/user/ExamingView.vue

@@ -0,0 +1,398 @@
+<template>
+  <div v-if="isReady" class="examing-container">
+    <el-container>
+      <!-- 头部 -->
+      <Header />
+
+      <!-- 主要内容区域 -->
+      <el-main class="exam-content">
+        <!-- 顶栏：考生信息和考试信息 -->
+        <div class="exam-top-bar">
+          <div class="left-info">
+            <div class="info-item"><span class="label">考生姓名：</span><span class="value">张三</span></div>
+            <div class="info-item"><span class="label">身份证号：</span><span class="value">2104XXXXXXXXXXXX1234</span></div>
+            <div class="info-item"><span class="label">准考证号：</span><span class="value">20230001</span></div>
+          </div>
+          <div class="right-info">
+            <div class="info-item"><span class="label">考试总分：</span><span class="value">100分</span></div>
+            <div class="info-item"><span class="label">总时长：</span><span class="value">120分钟</span></div>
+            <div class="info-item"><span class="label">最小时长：</span><span class="value">60分钟</span></div>
+            <div class="info-item timer"><span class="label">倒计时：</span><span class="value">{{ countdown }}</span></div>
+          </div>
+        </div>
+
+        <div class="exam-main">
+          <!-- 左侧边栏：试题序号列表 -->
+          <div class="exam-sidebar">
+            <div class="sidebar-title">试题列表</div>
+            <div class="question-list">
+              <div v-for="i in 20" :key="i" class="question-item" :class="{ 'current': i === currentQuestion }"
+                   @click="goToQuestion(i)">{{ i }}</div>
+            </div>
+          </div>
+
+          <!-- 主体部分：试题内容 -->
+          <div class="exam-question-content">
+            <div class="question-header">
+              <span class="question-number">第 {{ currentQuestion }} 题</span>
+              <span class="question-score">({{ questionScore }}分)</span>
+            </div>
+            <div class="question-body">
+              <div class="question-type">选择题</div>
+              <div class="question-text">
+                以下关于统计法的描述，正确的是？
+              </div>
+              <div class="question-options" v-if="questionType === 'choice'">
+                <div class="option-item" v-for="(option, index) in ['A', 'B', 'C', 'D']" :key="index"
+                     @click="selectOption(index)">
+                  <span class="option-letter">{{ option }}</span>
+                  <span class="option-text">{{ getOptionText(option) }}</span>
+                </div>
+              </div>
+              <div class="question-answer" v-else-if="questionType === 'fill_blank'">
+                <input type="text" placeholder="请在此填写答案">
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 底栏：操作按钮 -->
+        <div class="exam-bottom-bar">
+          <el-button type="default" @click="prevQuestion" :disabled="currentQuestion === 1">上一题</el-button>
+          <el-button type="primary" @click="nextQuestion" :disabled="currentQuestion === totalQuestions">下一题</el-button>
+          <el-button type="danger" @click="submitExam">交卷</el-button>
+        </div>
+      </el-main>
+
+      <!-- 底部 -->
+      <Footer />
+    </el-container>
+  </div>
+</template>
+
+<script setup>
+// 导入组件
+import Header from '@/components/common/Header.vue'
+import Footer from '@/components/common/Footer.vue'
+import { ElButton } from 'element-plus'
+import { ref, onUnmounted, onMounted } from 'vue'
+
+// 响应式数据
+const currentQuestion = ref(1)
+const totalQuestions = ref(20)
+const questionScore = ref(5)
+const questionType = ref('choice') // 'choice' 或 'fill_blank'
+const countdown = ref('01:59:59') // 初始倒计时120分钟
+
+// 计时器逻辑
+let timer = null
+
+// 格式化时间
+const 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')}`
+}
+
+// 模拟选项文本
+const getOptionText = (option) => {
+  const options = {
+    'A': '统计法是调整统计关系的法律规范的总称',
+    'B': '统计法仅适用于政府统计活动',
+    'C': '统计法不包括地方性统计法规',
+    'D': '统计法制定的依据是宪法'
+  }
+  return options[option] || ''
+}
+
+// 上一题
+const prevQuestion = () => {
+  if (currentQuestion.value > 1) {
+    currentQuestion.value--
+  }
+}
+
+// 下一题
+const nextQuestion = () => {
+  if (currentQuestion.value < totalQuestions.value) {
+    currentQuestion.value++
+  }
+}
+
+// 跳转到指定题目
+const goToQuestion = (index) => {
+  currentQuestion.value = index
+}
+
+// 选择选项
+const selectOption = (index) => {
+  // 这里可以处理选项选择逻辑
+}
+
+// 交卷
+const submitExam = () => {
+  if (confirm('确定要交卷吗？交卷后将无法修改答案。')) {
+    // 这里可以处理交卷逻辑
+    alert('交卷成功！')
+  }
+}
+
+// 组件挂载时启动计时器
+// Add this line
+const isReady = ref(false)
+
+// Modify onMounted
+onMounted(() => {
+  // Set isReady to true after mount
+  isReady.value = true
+
+  // 初始化为120分钟（7200秒）
+  let remainingSeconds = 120 * 60
+
+  // 更新倒计时显示
+  countdown.value = formatTime(remainingSeconds)
+
+  // 启动计时器
+  timer = setInterval(() => {
+    remainingSeconds--
+    if (remainingSeconds <= 0) {
+      clearInterval(timer)
+      countdown.value = '00:00:00'
+      alert('考试时间已结束，系统将自动交卷。')
+      // 这里可以添加自动交卷逻辑
+    } else {
+      countdown.value = formatTime(remainingSeconds)
+    }
+  }, 1000)
+})
+
+// 组件卸载时清除计时器
+onUnmounted(() => {
+  if (timer) {
+    clearInterval(timer)
+    timer = null // Add this line to prevent memory leaks
+  }
+})
+</script>
+
+<style scoped>
+/* 自定义样式 */
+.examing-container, .el-container {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.exam-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+/* 顶栏样式 */
+.exam-top-bar {
+  display: flex;
+  justify-content: space-between;
+  padding: 0.5rem 1rem;
+  background-color: #f5f7fa;
+  border-radius: 4px;
+  margin-bottom: 1rem;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.left-info, .right-info {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.info-item {
+  display: flex;
+  align-items: center;
+}
+
+.label {
+  font-weight: bold;
+  margin-right: 0.5rem;
+  color: #606266;
+}
+
+.value {
+  color: #303133;
+}
+
+.timer .value {
+  color: #f56c6c;
+  font-weight: bold;
+}
+
+/* 主要内容区样式 */
+.exam-main {
+  display: flex;
+  flex: 1;
+  gap: 1rem;
+  overflow: hidden;
+}
+
+/* 侧边栏样式 */
+.exam-sidebar {
+  width: 240px;
+  background-color: #f5f7fa;
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.sidebar-title {
+  padding: 0.75rem 1rem;
+  font-weight: bold;
+  color: #1e40af;
+  border-bottom: 1px solid #e4e7ed;
+}
+
+.question-list {
+  padding: 1rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.question-item {
+  width: 36px;
+  height: 36px;
+  border-radius: 4px;
+  background-color: #fff;
+  border: 1px solid #dcdfe6;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.question-item:hover {
+  border-color: #409eff;
+}
+
+.question-item.current {
+  background-color: #409eff;
+  color: #fff;
+  border-color: #409eff;
+}
+
+/* 试题内容区样式 */
+.exam-question-content {
+  flex: 1;
+  background-color: #fff;
+  border-radius: 4px;
+  padding: 1rem;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  overflow-y: auto;
+}
+
+.question-header {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid #e4e7ed;
+}
+
+.question-number {
+  font-weight: bold;
+  color: #303133;
+}
+
+.question-score {
+  color: #f56c6c;
+}
+
+.question-type {
+  display: inline-block;
+  padding: 0.25rem 0.5rem;
+  background-color: #e6f7ff;
+  color: #1890ff;
+  border-radius: 4px;
+  margin-bottom: 1rem;
+  font-size: 0.875rem;
+}
+
+.question-text {
+  margin-bottom: 1.5rem;
+  line-height: 1.6;
+  color: #303133;
+}
+
+/* 选项样式 */
+.question-options {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.option-item {
+  padding: 0.75rem 1rem;
+  border-radius: 4px;
+  border: 1px solid #dcdfe6;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  align-items: flex-start;
+}
+
+.option-item:hover {
+  border-color: #409eff;
+  background-color: #f0f8ff;
+}
+
+.option-letter {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: #f5f7fa;
+  text-align: center;
+  line-height: 24px;
+  margin-right: 0.75rem;
+  flex-shrink: 0;
+}
+
+/* 填空题样式 */
+.question-answer input {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+
+/* 底栏样式 */
+.exam-bottom-bar {
+  display: flex;
+  justify-content: space-between;
+  padding: 1rem;
+  background-color: #f5f7fa;
+  border-radius: 4px;
+  margin-top: 1rem;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+/* 响应式样式 */
+@media (max-width: 992px) {
+  .exam-main {
+    flex-direction: column;
+  }
+
+  .exam-sidebar {
+    width: 100%;
+    height: 200px;
+  }
+}
+</style>