考试相关

apps/web-ele/.env.analyze

@@ -2,6 +2,7 @@
 VITE_BASE=/
 
 # Basic interface address SPA
-VITE_GLOB_API_URL=/api
+# VITE_GLOB_API_URL=/api
+VITE_GLOB_API_URL=http://39.164.159.226:8088
 
 VITE_VISUALIZER=true

apps/web-ele/.env.production

@@ -1,7 +1,8 @@
 VITE_BASE=/
 
 # 接口地址
-VITE_GLOB_API_URL=/api
+# VITE_GLOB_API_URL=/api
+VITE_GLOB_API_URL=http://39.164.159.226:8088
 
 # 是否开启压缩，可以设置为 none, brotli, gzip
 VITE_COMPRESS=none

apps/web-ele/src/router/routes/local.ts

@@ -82,7 +82,7 @@ const localRoutes: RouteRecordStringComponent[] = [
     path: '/examManage/questionBank/questionPreview/:id',
   },
   {
-    component: '/examManage/examPaper/cpn/examEdit/index',
+    component: '/examManage/examPaper/cpn/examEdit',
     meta: {
       activePath: '/examManage/examPaper',
       icon: 'carbon:edit',
@@ -93,7 +93,7 @@ const localRoutes: RouteRecordStringComponent[] = [
     path: '/examManage/examEdit/:id?',
   },
   {
-    component: '/examManage/examPaper/cpn/examPreview/index',
+    component: '/examManage/examPaper/cpn/examPreview',
     meta: {
       activePath: '/examManage/examPaper',
       icon: 'carbon:view',

apps/web-ele/src/views/examManage/examPaper/cpn/examEdit.vue

@@ -0,0 +1,948 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { ElAnchor, ElAnchorLink, ElCollapse, ElCollapseItem, ElTable } from 'element-plus';
+import ExamPreview from './examPreview.vue';
+
+// 试卷表单数据
+const examForm = ref({
+  examName: '',
+  examCategory: '',
+});
+
+// 试卷题目数据
+const examQuestions = ref([
+  {
+    title: '第一题 选择题',
+    fixedQuestions: [
+      { type: '填空题', count: 120, score: 0 },
+      { type: '简答题', count: 120, score: 0 },
+      { type: '单选题', count: 120, score: 0 },
+      { type: '多选题', count: 120, score: 0 },
+    ],
+    randomQuestions: [
+      { type: '填空题', count: 120, score: 0 },
+      { type: '简答题', count: 120, score: 0 },
+      { type: '单选题', count: 120, score: 0 },
+      { type: '多选题', count: 120, score: 0 },
+    ],
+  },
+  {
+    title: '第二题 填空题',
+    fixedQuestions: [],
+    randomQuestions: [],
+  },
+  {
+    title: '第三题 判断题',
+    fixedQuestions: [],
+    randomQuestions: [],
+  },
+]);
+
+// 折叠面板状态，默认展开所有面板
+const activeCollapse = ref<(string | number | boolean)[]>(examQuestions.value.map((_, index) => index));
+
+// 计算总题数
+const totalQuestions = computed(() => examQuestions.value.length);
+
+// 计算小题总数
+const totalSubQuestions = computed(() => {
+  return examQuestions.value.reduce((total, question) => {
+    return (
+      total + question.fixedQuestions.length + question.randomQuestions.length
+    );
+  }, 0);
+});
+
+// 计算总分
+const totalScore = computed(() => {
+  let score = 0;
+  examQuestions.value.forEach((question) => {
+    question.fixedQuestions.forEach((item) => {
+      score += item.score;
+    });
+    question.randomQuestions.forEach((item) => {
+      score += item.score;
+    });
+  });
+  return score;
+});
+
+// 获取单个题目总分
+const getQuestionTotalScore = (index: number) => {
+  const question = examQuestions.value[index];
+  let score = 0;
+  question.fixedQuestions.forEach((item) => {
+    score += item.score;
+  });
+  question.randomQuestions.forEach((item) => {
+    score += item.score;
+  });
+  return score;
+};
+
+// 添加大题
+const addBigQuestion = () => {
+  examQuestions.value.push({
+    title: `第${examQuestions.value.length + 1}题 新题目`,
+    fixedQuestions: [],
+    randomQuestions: [],
+  });
+};
+// 容器引用
+const containerRef = ref<HTMLElement | null>(null);
+// 试题表格引用
+const questionTable = ref<InstanceType<typeof ElTable> | null>(null);
+
+const handleClick = (e: MouseEvent) => {
+  e.preventDefault();
+};
+
+// 弹框相关
+const dialogVisible = ref(false);
+const currentQuestionIndex = ref(-1);
+const currentQuestionType = ref(''); // 'fixed' or 'random'
+
+// 搜索表单
+const searchForm = ref({
+  questionName: '',
+  questionType: '',
+  questionCategory: '',
+  questionDifficulty: '',
+});
+
+// 模拟试题数据
+const questionList = ref([
+  { id: 1, name: '题目1', type: '单选题', category: '分类1', difficulty: '简单' },
+  { id: 2, name: '题目2', type: '多选题', category: '分类2', difficulty: '中等' },
+  { id: 3, name: '题目3', type: '填空题', category: '分类1', difficulty: '困难' },
+  { id: 4, name: '题目4', type: '简答题', category: '分类3', difficulty: '简单' },
+  { id: 5, name: '题目5', type: '判断题', category: '分类2', difficulty: '中等' },
+]);
+
+// 分页数据
+const currentPage = ref(1);
+const pageSize = ref(20);
+const total = ref(37);
+
+// 存储选中的试题
+const selectedQuestions = ref<any[]>([]);
+
+// 处理选择变化
+const handleSelectionChange = (val: any[]) => {
+  selectedQuestions.value = val;
+};
+
+// 打开弹框
+const openDialog = (index: number, type: string) => {
+  currentQuestionIndex.value = index;
+  currentQuestionType.value = type;
+  // 清空之前的选择
+  selectedQuestions.value = [];
+  dialogVisible.value = true;
+};
+
+// 关闭弹框
+const closeDialog = () => {
+  dialogVisible.value = false;
+};
+
+// 查询
+const handleSearch = () => {
+  // 实际项目中这里会调用API获取数据
+  console.log('搜索参数:', searchForm.value);
+};
+
+// 重置
+const handleReset = () => {
+  searchForm.value = {
+    questionName: '',
+    questionType: '',
+    questionCategory: '',
+    questionDifficulty: '',
+  };
+};
+
+// 预览
+const previewQuestion = (id: number) => {
+  console.log('预览题目:', id);
+};
+
+// 分页方法
+const handleSizeChange = (size: number) => {
+  pageSize.value = size;
+  // 实际项目中这里会重新调用API获取数据
+  console.log('每页条数:', size);
+};
+
+const handleCurrentChange = (current: number) => {
+  currentPage.value = current;
+  // 实际项目中这里会重新调用API获取数据
+  console.log('当前页码:', current);
+};
+
+// 保存选中的试题
+const saveQuestions = () => {
+  if (currentQuestionIndex.value === -1 || !currentQuestionType.value) {
+    return;
+  }
+
+  // 使用通过handleSelectionChange方法存储的选中数据
+  const selectedRows = selectedQuestions.value;
+  
+  if (selectedRows.length === 0) {
+    return;
+  }
+
+  // 根据类型添加到对应的试题列表
+  const question = examQuestions.value[currentQuestionIndex.value];
+  if (currentQuestionType.value === 'fixed') {
+    // 为每个选中的试题创建一个新的对象，包含必要的字段
+    selectedRows.forEach((row: any) => {
+      question.fixedQuestions.push({
+        type: row.type,
+        count: 1, // 每个试题算1个
+        score: 0 // 默认分数为0
+      });
+    });
+  } else if (currentQuestionType.value === 'random') {
+    // 为每个选中的试题创建一个新的对象，包含必要的字段
+    selectedRows.forEach((row: any) => {
+      question.randomQuestions.push({
+        type: row.type,
+        count: 1, // 每个试题算1个
+        score: 0 // 默认分数为0
+      });
+    });
+  }
+
+  // 关闭弹框
+  closeDialog();
+};
+
+// 随机试题设置表单
+const randomQuestionForm = ref({
+  questionTypes: [] as string[],
+  questionCategories: [] as string[],
+  questionDifficulty: '',
+  questionCount: 1,
+});
+
+// 题型选项
+const questionTypeOptions = [
+  { label: '单选题', value: '单选题' },
+  { label: '多选题', value: '多选题' },
+  { label: '填空题', value: '填空题' },
+  { label: '简答题', value: '简答题' },
+  { label: '判断题', value: '判断题' },
+];
+
+// 分类选项
+const questionCategoryOptions = [
+  { label: '分类1', value: '分类1' },
+  { label: '分类2', value: '分类2' },
+  { label: '分类3', value: '分类3' },
+];
+
+// 难度选项
+const questionDifficultyOptions = [
+  { label: '简单', value: '简单' },
+  { label: '中等', value: '中等' },
+  { label: '困难', value: '困难' },
+];
+
+// 预览相关
+const previewDialogVisible = ref(false);
+const previewQuestions = ref<any[]>([]);
+
+// 打开预览弹框
+const openPreviewDialog = (index: number, questionType: string, questionIndex: number) => {
+  const question = examQuestions.value[index];
+  const targetQuestions = questionType === 'fixed' ? question.fixedQuestions : question.randomQuestions;
+  const selectedQuestion = targetQuestions[questionIndex];
+  
+  // 模拟生成预览数据
+  generatePreviewData(selectedQuestion.type, selectedQuestion.count);
+  
+  previewDialogVisible.value = true;
+};
+
+// 关闭预览弹框
+const closePreviewDialog = () => {
+  previewDialogVisible.value = false;
+};
+
+// 生成预览数据
+const generatePreviewData = (type: string, count: number) => {
+  previewQuestions.value = [];
+  
+  for (let i = 0; i < count; i++) {
+    switch (type) {
+      case '单选题':
+        previewQuestions.value.push({
+          id: `single-${i}`,
+          questionType: '单选题',
+          questionTitle: '这是本题的题目，请选择',
+          options: [
+            { content: '答案1', isCorrect: true },
+            { content: '答案2', isCorrect: false },
+            { content: '答案3', isCorrect: false },
+            { content: '答案4', isCorrect: false }
+          ],
+          score: 2
+        });
+        break;
+      case '多选题':
+        previewQuestions.value.push({
+          id: `multiple-${i}`,
+          questionType: '多选题',
+          questionTitle: '这是本题的题目，请选择',
+          options: [
+            { content: '答案1', isCorrect: true },
+            { content: '答案2', isCorrect: true },
+            { content: '答案3', isCorrect: false },
+            { content: '答案4', isCorrect: false }
+          ],
+          score: 4
+        });
+        break;
+      case '判断题':
+        previewQuestions.value.push({
+          id: `judge-${i}`,
+          questionType: '判断题',
+          questionTitle: '这是本题的题目，请判断',
+          options: [
+            { content: '正确', isCorrect: true },
+            { content: '错误', isCorrect: false }
+          ],
+          score: 1
+        });
+        break;
+      case '填空题':
+        previewQuestions.value.push({
+          id: `fill-${i}`,
+          questionType: '填空题',
+          questionTitle: '这是本题的题目，请作答',
+          correctAnswer: '这是正确答案这是正确答案这是正确答案这是正确答案这是正确答案这是正确答案。这是正确答案这是正确答案这是正确答案这是正确答案这是正确答案这是正确答案这是正确答案',
+          score: 3
+        });
+        break;
+      case '简答题':
+        previewQuestions.value.push({
+          id: `essay-${i}`,
+          questionType: '简答题',
+          questionTitle: '这是本题的题目，请作答',
+          correctAnswer: '这是正确答案这是正确答案这是正确答案这是正确答案这是正确答案这是正确答案。这是正确答案这是正确答案这是正确答案这是正确答案这是正确答案这是正确答案这是正确答案',
+          score: 6
+        });
+        break;
+    }
+  }
+};
+
+// 保存随机试题设置
+const saveRandomQuestions = () => {
+  if (currentQuestionIndex.value === -1) {
+    return;
+  }
+
+  // 获取当前设置的随机试题参数
+  const { questionTypes, questionCategories, questionDifficulty, questionCount } = randomQuestionForm.value;
+
+  // 确保至少选择了一种题型
+  if (!questionTypes || questionTypes.length === 0) {
+    return;
+  }
+
+  // 根据类型添加到对应的试题列表
+  const question = examQuestions.value[currentQuestionIndex.value];
+  
+  // 为每种选中的题型创建一个随机试题设置
+  questionTypes.forEach((type: string) => {
+    question.randomQuestions.push({
+      type: type,
+      count: questionCount,
+      score: 0 // 默认分数为0
+    });
+  });
+
+  // 关闭弹框
+  closeDialog();
+};
+</script>
+
+<template>
+  <div class="exam-edit-container">
+    <!-- 顶部区域 -->
+    <div class="top-section">
+      <div class="left-section">
+        <div class="form-item">
+          <label class="label">试卷名称：</label>
+          <el-input
+            v-model="examForm.examName"
+            placeholder="请输入试卷名称"
+            :maxlength="30"
+            show-word-limit
+            class="input"
+          />
+        </div>
+        <div class="form-item">
+          <label class="label">试卷分类：</label>
+          <el-select
+            v-model="examForm.examCategory"
+            placeholder="请选择"
+            class="select"
+          >
+            <el-option label="选择题" value="1" />
+            <el-option label="填空题" value="2" />
+            <el-option label="简答题" value="3" />
+            <el-option label="判断题" value="4" />
+          </el-select>
+        </div>
+      </div>
+      <div class="right-section">
+        <div class="stats">
+          <span>{{ totalQuestions }}大题</span>
+          <span class="separator">|</span>
+          <span>{{ totalSubQuestions }}小题</span>
+          <span class="separator">|</span>
+          <span>总分：{{ totalScore }}</span>
+        </div>
+        <el-button type="primary" size="default" class="save-btn">
+          保存
+        </el-button>
+      </div>
+    </div>
+
+    <!-- 主体区域 -->
+    <div class="main-section">
+      <!-- 左侧导航 -->
+      <div class="left-nav">
+        <div class="nav-title">大题导航</div>
+        <ElAnchor  
+            :container="containerRef"
+            direction="vertical"
+            default-active="question-0"
+            type="default"
+            :offset="30"
+            @click="handleClick">
+            <ElAnchorLink
+              v-for="(question, index) in examQuestions"
+              :key="index"
+              :href="`#question-${index}`"
+              :title="question.title"
+            />
+        </ElAnchor>
+      </div>
+      <!-- 右侧内容 -->
+      <div class="right-content" ref="containerRef">
+        <div
+          v-for="(question, index) in examQuestions"
+          :key="index"
+          :id="`question-${index}`"
+          class="question-block"
+        >
+          <!-- 移除原来的question-header -->
+          <el-collapse v-model="activeCollapse">
+            <el-collapse-item :name="index">
+              <template #title>
+                <div style="display: flex; justify-content: space-between; align-items: center; font-size: 18px; width: 100%;">
+                  <span>{{question.title}}</span>
+                  <span>合计：{{getQuestionTotalScore(index)}}分</span>
+                </div>
+              </template>
+              <!-- 固定试题区块 -->
+              <div class="question-type-section">
+                <div class="section-title">固定试题</div>
+                <el-table :data="question.fixedQuestions" style="width: 100%" :header-cell-style="{ backgroundColor: '#F7F9FA', color: '#31373D' }">
+                  <el-table-column prop="type" label="试题类型" />
+                  <el-table-column prop="count" label="试题数" />
+                  <el-table-column prop="score" label="每道题分数" >
+                    <template #default="scope">
+                      <el-input-number
+                        v-model="scope.row.score"
+                        :min="0"
+                        :max="100"
+                        size="small"
+                      />
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="操作" >
+                    <template #default="scope">
+                      <el-button type="text" size="small" class="preview-btn" @click="openPreviewDialog(index, 'fixed', scope.$index)">
+                        预览
+                      </el-button>
+                      <el-button type="text" size="small" class="delete-btn">
+                        删除
+                      </el-button>
+                    </template>
+                  </el-table-column>
+                </el-table>
+                <el-button type="text" icon="Plus" class="add-question-btn" @click="openDialog(index, 'fixed')">
+                  + 试题库中选题
+                </el-button>
+              </div>
+              
+              <!-- 随机试题区块 -->
+              <div class="question-type-section">
+                <div class="section-title">随机试题</div>
+                <el-table :data="question.randomQuestions" style="width: 100%" :header-cell-style="{ backgroundColor: '#F7F9FA', color: '#31373D' }">
+                  <el-table-column prop="type" label="试题类型" />
+                  <el-table-column prop="count" label="试题数" />
+                  <el-table-column prop="score" label="每道题分数" >
+                    <template #default="scope">
+                      <el-input-number
+                        v-model="scope.row.score"
+                        :min="0"
+                        :max="100"
+                        size="small"
+                      />
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="操作" >
+                    <template #default="scope">
+                      <el-button type="text" size="small" class="preview-btn" @click="openPreviewDialog(index, 'random', scope.$index)">
+                        预览
+                      </el-button>
+                      <el-button type="text" size="small" class="delete-btn">
+                        删除
+                      </el-button>
+                    </template>
+                  </el-table-column>
+                </el-table>
+                <el-button type="text" icon="Plus" class="add-question-btn" @click="openDialog(index, 'random')">
+                  + 试题库中选题
+                </el-button>
+              </div>
+            </el-collapse-item>
+          </el-collapse>
+        </div>
+
+        <el-button
+          type="dashed"
+          icon="Plus"
+          class="add-big-question-btn"
+          @click="addBigQuestion"
+        >
+          + 添加大题
+        </el-button>
+      </div>
+    </div>
+  </div>
+
+  <!-- 添加固定试题弹框 -->
+  <el-dialog
+    v-if="currentQuestionType === 'fixed'"
+    title="添加固定试题"
+    v-model="dialogVisible"
+    width="1000px"
+  >
+    <!-- 搜索表单 -->
+    <div class="search-form" style="margin-bottom: 20px;">
+      <el-form :model="searchForm" label-width="80px">
+        <el-row :gutter="20">
+          <el-col :span="6">
+            <el-form-item label="题目名称">
+              <el-input v-model="searchForm.questionName" placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="试题题型">
+              <el-select v-model="searchForm.questionType" placeholder="请选择">
+                <el-option label="单选题" value="单选题" />
+                <el-option label="多选题" value="多选题" />
+                <el-option label="填空题" value="填空题" />
+                <el-option label="简答题" value="简答题" />
+                <el-option label="判断题" value="判断题" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="试题分类">
+              <el-select v-model="searchForm.questionCategory" placeholder="请选择">
+                <el-option label="分类1" value="分类1" />
+                <el-option label="分类2" value="分类2" />
+                <el-option label="分类3" value="分类3" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="试题难度">
+              <el-select v-model="searchForm.questionDifficulty" placeholder="请选择">
+                <el-option label="简单" value="简单" />
+                <el-option label="中等" value="中等" />
+                <el-option label="困难" value="困难" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24" style="text-align: right;">
+            <el-button type="primary" @click="handleSearch">查询</el-button>
+            <el-button @click="handleReset">重置</el-button>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+
+    <!-- 试题列表 -->
+    <el-table ref="questionTable" :data="questionList" style="width: 100%" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" />
+      <el-table-column prop="name" label="题目名称" />
+      <el-table-column prop="type" label="试题题型" />
+      <el-table-column prop="category" label="试题分类" />
+      <el-table-column prop="difficulty" label="试题难度" />
+      <el-table-column label="操作" width="100">
+        <template #default="scope">
+          <el-button type="text" size="small" @click="previewQuestion(scope.row.id)">预览</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页 -->
+    <div class="pagination" style="margin-top: 20px; text-align: right;">
+      <el-pagination
+        v-model:current-page="currentPage"
+        v-model:page-size="pageSize"
+        :page-sizes="[20, 50, 100]"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+
+    <!-- 底部按钮 -->
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="closeDialog">取消</el-button>
+        <el-button type="primary" @click="saveQuestions">保存</el-button>
+      </span>
+    </template>
+  </el-dialog>
+
+  <!-- 添加随机试题弹框 -->
+  <el-dialog
+    v-if="currentQuestionType === 'random'"
+    title="添加随机试题"
+    v-model="dialogVisible"
+    width="500px"
+  >
+    <el-form :model="randomQuestionForm" label-width="100px">
+      <el-form-item label="试题类型">
+        <el-select
+          v-model="randomQuestionForm.questionTypes"
+          multiple
+          placeholder="请选择试题类型"
+          style="width: 100%"
+        >
+          <el-option
+            v-for="option in questionTypeOptions"
+            :key="option.value"
+            :label="option.label"
+            :value="option.value"
+          />
+        </el-select>
+      </el-form-item>
+      
+      <el-form-item label="试题分类">
+        <el-select
+          v-model="randomQuestionForm.questionCategories"
+          multiple
+          placeholder="请选择试题分类"
+          style="width: 100%"
+        >
+          <el-option
+            v-for="option in questionCategoryOptions"
+            :key="option.value"
+            :label="option.label"
+            :value="option.value"
+          />
+        </el-select>
+      </el-form-item>
+      
+      <el-form-item label="试题难度">
+        <el-select
+          v-model="randomQuestionForm.questionDifficulty"
+          placeholder="请选择试题难度"
+          style="width: 100%"
+        >
+          <el-option
+            v-for="option in questionDifficultyOptions"
+            :key="option.value"
+            :label="option.label"
+            :value="option.value"
+          />
+        </el-select>
+      </el-form-item>
+      
+      <el-form-item label="试题数量">
+        <el-input-number
+          v-model="randomQuestionForm.questionCount"
+          :min="1"
+          :max="100"
+          placeholder="请输入试题数量"
+          style="width: 100%"
+        />
+      </el-form-item>
+    </el-form>
+
+    <!-- 底部按钮 -->
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="closeDialog">取消</el-button>
+        <el-button type="primary" @click="saveRandomQuestions">保存</el-button>
+      </span>
+    </template>
+  </el-dialog>
+
+<!-- 预览弹框 -->
+<el-dialog
+  title="试题预览"
+  v-model="previewDialogVisible"
+  width="800px"
+>
+  <ExamPreview :questions="previewQuestions" />
+</el-dialog>
+</template>
+
+<style scoped>
+  
+  .exam-edit-container {
+    padding: 1rem;
+    background-color: #f5f7fa;
+    height: calc(100vh - 90px);
+  }
+
+  /* 顶部区域 */
+  .top-section {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 10px;
+    background-color: white;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+
+  .left-section {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    flex: 1;
+  }
+
+  .form-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .label {
+    font-size: 14px;
+    color: #000;
+    min-width: 80px;
+    font-weight: 400;
+    text-align: right;
+  }
+
+  .input {
+    width: 400px;
+  }
+
+  .select {
+    width: 230px;
+  }
+
+  .right-section {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 15px;
+  }
+
+  .stats {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    font-size: 14px;
+    color: #303133;
+  }
+
+  .separator {
+    color: #dcdfe6;
+    font-size: 16px;
+  }
+
+  .save-btn {
+    width: 100px;
+    margin-top: 18px;
+  }
+
+  /* 主体区域 */
+  .main-section {
+    display: flex;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+
+  /* 左侧导航 */
+  .left-nav {
+    width: 350px;
+    padding: 20px;
+    margin-right: 10px;
+    background-color: white;
+    height: calc(100vh - 245px);
+  }
+
+  .nav-title {
+    font-size: 16px;
+    font-weight: bold;
+    margin-bottom: 15px;
+    color: #303133;
+  }
+
+  /* ElAnchor and ElAnchorLink styles */
+  :deep(.el-anchor) {
+    padding-left: 0;
+  }
+  :deep(.el-anchor__list) {
+    padding-left: 0 !important;
+  }
+
+  :deep(.el-anchor__link) { 
+    padding-left: 15px;
+    margin-bottom: 10px;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.3s;
+    background-color: #ffffff;
+    border: 1px solid #e6e8eb;
+    position: relative;
+    width: 315px;
+    height: 34px;
+    color: #303133;
+    box-sizing: border-box;
+  }
+
+  :deep(.el-anchor__link:hover) {
+    background-color: #ecf5ff;
+    color: #409eff;
+  }
+
+  :deep(.el-anchor__link.is-active) {
+    background-color: #ecf5ff;
+    color: #409eff;
+    border-left: 3px solid #409eff;
+  }
+  :deep(.el-anchor__link-title) {
+    font-size: 14px;
+    font-weight: 400;
+    color: #303133;
+    padding: 0;
+    white-space: normal;
+    line-height: 1.4;
+  }
+
+  :deep(.el-anchor__link.active .el-anchor__link-title) { 
+    color: #409eff;
+  }
+
+  :deep(.el-anchor-fix) {
+    display: none;
+  }
+
+  /* 右侧内容 */
+  .right-content {
+    flex: 1;
+    background-color: white;
+    border-radius: 8px;
+    height: calc(100vh - 245px);
+    overflow-y: auto;
+    /* 隐藏滚动条 */
+    -ms-overflow-style: none;  /* Internet Explorer 10+ */
+    scrollbar-width: none;  /* Firefox */
+    ::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  /* 题目块 */
+  .question-block {
+    margin-bottom: 20px;
+    padding: 0px 20px;
+    background-color: #ffffff;
+    border-radius: 8px;
+  }
+
+  /* 题目类型区块 */
+  .question-type-section {
+    margin-bottom: 20px;
+    padding: 15px;
+    background-color: white;
+    border-radius: 6px;
+  }
+
+  .section-title {
+    font-size: 16px;
+    font-weight: bold;
+    margin-bottom: 15px;
+    color: #303133;
+  }
+
+  .add-question-btn {
+    color: #409eff;
+    margin-top: 10px;
+  }
+
+  /* 添加大题按钮 */
+  .add-big-question-btn {
+    width: 100%;
+    margin-top: 20px;
+  }
+
+  /* 操作按钮样式 */
+  .preview-btn {
+    color: #409eff;
+    margin-right: 10px;
+  }
+
+  .delete-btn {
+    color: #f56c6c;
+  }
+
+  /* 响应式设计 */
+  @media (max-width: 1200px) {
+    .input,
+    .select {
+      width: 250px;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .top-section {
+      flex-direction: column;
+    }
+
+    .right-section {
+      align-items: flex-start;
+    }
+
+    .main-section {
+      flex-direction: column;
+    }
+
+    .left-nav {
+      width: 100%;
+      border-right: none;
+      border-bottom: 1px solid #e6e8eb;
+      padding-right: 0;
+      padding-bottom: 20px;
+      margin-bottom: 20px;
+    }
+
+    .right-content {
+      padding-left: 0;
+    }
+  }
+</style>

apps/web-ele/src/views/examManage/examPaper/cpn/examPreview.vue

@@ -0,0 +1,212 @@
+<template>
+  <div v-if="displayQuestions.length > 0" class="questions-container">
+    <div v-for="(question, index) in displayQuestions" :key="question.id" class="preview-question-item">
+      
+      <!-- 单选题、多选题、判断题 -->
+      <div v-if="question.options" class="question-content">
+        <p class="question-title">{{ index + 1 }}. {{ question.title }}</p>
+        <div class="options-list">
+          <div 
+            v-for="(option, optIndex) in question.options" 
+            :key="optIndex" 
+            class="option-item"
+            :class="{ 'correct-option': option.isCorrect }"
+          >
+            <input 
+              :type="['单选题', '判断题'].includes(getQuestionType(question.type)) ? 'radio' : 'checkbox'" 
+              :name="['单选题', '判断题'].includes(getQuestionType(question.type)) ? question.id : `${question.id}_${optIndex}`" 
+              :disabled="true"
+              :checked="option.isCorrect"
+            >
+            <span class="option-content">{{ String.fromCharCode(65 + optIndex) }}. {{ option.text }}</span>
+          </div>
+        </div>
+      </div>
+      
+      <!-- 填空题、简答题 -->
+      <div v-else class="question-content">
+        <p class="question-title">{{ index + 1 }}. {{ question.title }}</p>
+        <div class="answer-section">
+          <p class="answer-label">正确答案：</p>
+          <p class="answer-content">{{ question.correctAnswer }}</p>
+        </div>
+      </div>
+    </div>
+    <!-- 如果有更多题目，显示提示 -->
+    <div v-if="questions.length > maxQuestions" class="more-questions-hint">
+      注：仅显示前 {{ maxQuestions }} 题，共 {{ questions.length }} 题
+    </div>
+  </div>
+  <div v-else class="no-questions">
+    暂无预览数据
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+// 定义组件属性
+interface Option {
+  id: number;
+  text: string;
+  isCorrect: boolean;
+}
+
+interface Question {
+  id: number;
+  type: number;
+  title: string;
+  options?: Option[];
+  correctAnswer?: string;
+  score: number;
+}
+
+const props = defineProps<{
+  questions: Question[];
+  maxQuestions?: number;
+}>();
+
+// 设置默认显示题数为5
+const maxQuestions = props.maxQuestions || 30;
+
+// 计算要显示的题目
+const displayQuestions = computed(() => {
+  return props.questions.slice(0, maxQuestions);
+});
+
+// 根据类型ID获取题目类型名称
+const getQuestionType = (type: number): string => {
+  switch(type) {
+    case 1: return '单选题';
+    case 2: return '多选题';
+    case 3: return '判断题';
+    case 4: return '填空题';
+    case 5: return '简答题';
+    default: return '其他题型';
+  }
+};
+</script>
+
+<style scoped>
+  .questions-container {
+    max-height:600px;
+    overflow-y: auto;
+    padding-right: 10px;
+  }
+
+  .preview-question-item {
+    margin-bottom: 20px;
+    padding-bottom: 20px;
+    border-bottom: 1px solid #e6e8eb;
+  }
+
+  .preview-question-item:last-child {
+    border-bottom: none;
+    margin-bottom: 0;
+    padding-bottom: 0;
+  }
+
+  .question-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+
+  .question-type {
+    font-weight: bold;
+    color: #303133;
+    margin-right: 10px;
+  }
+
+  .question-score {
+    color: #909399;
+    font-size: 14px;
+  }
+
+  .question-content {
+    margin-left: 20px;
+  }
+
+  .question-title {
+    font-size: 16px;
+    color: #303133;
+    margin-bottom: 15px;
+    line-height: 1.5;
+  }
+
+  .options-list {
+    margin-left: 20px;
+  }
+
+  .option-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+    padding: 8px 12px;
+    border-radius: 4px;
+    transition: all 0.3s;
+  }
+
+  .option-item:hover {
+    background-color: #f5f7fa;
+  }
+
+  .option-item input[type="radio"],
+  .option-item input[type="checkbox"] {
+    margin-right: 10px;
+  }
+
+  .option-content {
+    font-size: 14px;
+    color: #606266;
+    line-height: 1.5;
+  }
+
+  .correct-option {
+    background-color: #f0f9eb;
+    border-left: 3px solid #67c23a;
+  }
+
+  .correct-option .option-content {
+    color: #303133;
+    font-weight: 500;
+  }
+
+  .answer-section {
+    margin-top: 10px;
+    padding: 12px;
+    background-color: #f5f7fa;
+    border-radius: 4px;
+  }
+
+  .answer-label {
+    font-weight: bold;
+    color: #303133;
+    margin-bottom: 8px;
+  }
+
+  .answer-content {
+    font-size: 14px;
+    color: #606266;
+    line-height: 1.5;
+    white-space: pre-wrap;
+    word-break: break-all;
+  }
+
+  .no-questions {
+    text-align: center;
+    color: #909399;
+    padding: 40px 0;
+  }
+
+  .more-questions-hint {
+    text-align: center;
+    color: #909399;
+    font-size: 14px;
+    margin-top: 20px;
+    padding: 10px;
+    background-color: #f5f7fa;
+    border-radius: 4px;
+  }
+</style>
+

apps/web-ele/src/views/examManage/examPaper/cpns/examEdit/index.vue

@@ -1,499 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue';
-
-// 试卷表单数据
-const examForm = ref({
-  examName: '',
-  examCategory: '',
-});
-
-// 当前选中的题目索引
-const currentQuestionIndex = ref(0);
-
-// 新题目标题
-const newQuestionTitle = ref('');
-
-// 试卷题目数据
-const examQuestions = ref([
-  {
-    title: '第一题 选择题',
-    fixedQuestions: [
-      { type: '填空题', count: 120, score: 0 },
-      { type: '简答题', count: 120, score: 0 },
-      { type: '单选题', count: 120, score: 0 },
-      { type: '多选题', count: 120, score: 0 },
-    ],
-    randomQuestions: [
-      { type: '填空题', count: 120, score: 0 },
-      { type: '简答题', count: 120, score: 0 },
-      { type: '单选题', count: 120, score: 0 },
-      { type: '多选题', count: 120, score: 0 },
-    ],
-  },
-  {
-    title: '第二题 填空题',
-    fixedQuestions: [],
-    randomQuestions: [],
-  },
-  {
-    title: '第三题 判断题',
-    fixedQuestions: [],
-    randomQuestions: [],
-  },
-]);
-
-// 计算总题数
-const totalQuestions = computed(() => examQuestions.value.length);
-
-// 计算小题总数
-const totalSubQuestions = computed(() => {
-  return examQuestions.value.reduce((total, question) => {
-    return (
-      total + question.fixedQuestions.length + question.randomQuestions.length
-    );
-  }, 0);
-});
-
-// 计算总分
-const totalScore = computed(() => {
-  let score = 0;
-  examQuestions.value.forEach((question) => {
-    question.fixedQuestions.forEach((item) => {
-      score += item.score;
-    });
-    question.randomQuestions.forEach((item) => {
-      score += item.score;
-    });
-  });
-  return score;
-});
-
-// 获取单个题目总分
-const getQuestionTotalScore = (index: number) => {
-  const question = examQuestions.value[index];
-  let score = 0;
-  question.fixedQuestions.forEach((item) => {
-    score += item.score;
-  });
-  question.randomQuestions.forEach((item) => {
-    score += item.score;
-  });
-  return score;
-};
-
-// 计算分数变化
-const calculateScore = () => {
-  // 分数计算逻辑已通过computed属性实现
-};
-
-// 添加大题
-const addBigQuestion = () => {
-  examQuestions.value.push({
-    title: `第${examQuestions.value.length + 1}题 新题目`,
-    fixedQuestions: [],
-    randomQuestions: [],
-  });
-  currentQuestionIndex.value = examQuestions.value.length - 1;
-};
-</script>
-
-<template>
-  <div class="exam-edit-container">
-    <!-- 顶部区域 -->
-    <div class="top-section">
-      <div class="left-section">
-        <div class="form-item">
-          <label class="label">试卷名称：</label>
-          <el-input
-            v-model="examForm.examName"
-            placeholder="请输入试卷名称"
-            :maxlength="30"
-            show-word-limit
-            class="input"
-          />
-        </div>
-        <div class="form-item">
-          <label class="label">试卷分类：</label>
-          <el-select
-            v-model="examForm.examCategory"
-            placeholder="请选择"
-            class="select"
-          >
-            <el-option label="选择题" value="1" />
-            <el-option label="填空题" value="2" />
-            <el-option label="简答题" value="3" />
-            <el-option label="判断题" value="4" />
-          </el-select>
-        </div>
-      </div>
-      <div class="right-section">
-        <div class="stats">
-          <span>{{ totalQuestions }}大题</span>
-          <span class="separator">|</span>
-          <span>{{ totalSubQuestions }}小题</span>
-          <span class="separator">|</span>
-          <span>总分：{{ totalScore }}</span>
-        </div>
-        <el-button type="primary" size="default" class="save-btn">
-          保存
-        </el-button>
-      </div>
-    </div>
-
-    <!-- 主体区域 -->
-    <div class="main-section">
-      <!-- 左侧导航 -->
-      <div class="left-nav">
-        <div class="nav-title">大题导航</div>
-        <div
-          v-for="(question, index) in examQuestions"
-          :key="index"
-          class="nav-item"
-          :class="{ active: currentQuestionIndex === index }"
-          @click="currentQuestionIndex = index"
-        >
-          {{ question.title }}
-        </div>
-        <el-input
-          v-model="newQuestionTitle"
-          placeholder="大题名称"
-          class="new-question-input"
-        />
-      </div>
-
-      <!-- 右侧内容 -->
-      <div class="right-content">
-        <!-- 题目编辑区域 -->
-        <div
-          v-for="(question, index) in examQuestions"
-          :key="index"
-          class="question-block"
-          v-show="currentQuestionIndex === index"
-        >
-          <div class="question-header">
-            <span class="question-title">{{ question.title }}</span>
-            <el-button type="text" icon="EditPen" class="edit-btn">
-              编辑
-            </el-button>
-          </div>
-
-          <!-- 固定试题 -->
-          <div class="question-type-section">
-            <div class="section-title">固定试题</div>
-            <el-table :data="question.fixedQuestions" style="width: 100%">
-              <el-table-column prop="type" label="试题类型" width="120" />
-              <el-table-column prop="count" label="试题数" width="100" />
-              <el-table-column prop="score" label="每道题分数" width="120">
-                <template #default="scope">
-                  <el-input-number
-                    v-model="scope.row.score"
-                    :min="0"
-                    :max="100"
-                    size="small"
-                    @change="calculateScore"
-                  />
-                </template>
-              </el-table-column>
-              <el-table-column label="操作" width="120">
-                <template #default="scope">
-                  <el-button type="text" size="small" class="preview-btn">
-                    预览
-                  </el-button>
-                  <el-button type="text" size="small" class="delete-btn">
-                    删除
-                  </el-button>
-                </template>
-              </el-table-column>
-            </el-table>
-            <el-button type="text" icon="Plus" class="add-question-btn">
-              + 试题库中选题
-            </el-button>
-          </div>
-
-          <!-- 随机试题 -->
-          <div class="question-type-section">
-            <div class="section-title">随机试题</div>
-            <el-table :data="question.randomQuestions" style="width: 100%">
-              <el-table-column prop="type" label="试题类型" width="120" />
-              <el-table-column prop="count" label="试题数" width="100" />
-              <el-table-column prop="score" label="每道题分数" width="120">
-                <template #default="scope">
-                  <el-input-number
-                    v-model="scope.row.score"
-                    :min="0"
-                    :max="100"
-                    size="small"
-                    @change="calculateScore"
-                  />
-                </template>
-              </el-table-column>
-              <el-table-column label="操作" width="120">
-                <template #default="scope">
-                  <el-button type="text" size="small" class="preview-btn">
-                    预览
-                  </el-button>
-                  <el-button type="text" size="small" class="delete-btn">
-                    删除
-                  </el-button>
-                </template>
-              </el-table-column>
-            </el-table>
-            <el-button type="text" icon="Plus" class="add-question-btn">
-              + 试题库中选题
-            </el-button>
-          </div>
-
-          <div class="question-footer">
-            <span class="question-score"
-              >合计：{{ getQuestionTotalScore(index) }}分</span
-            >
-          </div>
-        </div>
-
-        <!-- 添加大题按钮 -->
-        <el-button
-          type="dashed"
-          icon="Plus"
-          class="add-big-question-btn"
-          @click="addBigQuestion"
-        >
-          + 添加大题
-        </el-button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.exam-edit-container {
-  padding: 20px;
-  background-color: #f5f7fa;
-  min-height: 100vh;
-}
-
-/* 顶部区域 */
-.top-section {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 20px;
-  background-color: white;
-  padding: 20px;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.left-section {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  flex: 1;
-}
-
-.form-item {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.label {
-  font-size: 14px;
-  color: #606266;
-  min-width: 80px;
-  text-align: right;
-}
-
-.input {
-  width: 300px;
-}
-
-.select {
-  width: 300px;
-}
-
-.right-section {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 15px;
-}
-
-.stats {
-  display: flex;
-  align-items: center;
-  gap: 15px;
-  font-size: 14px;
-  color: #303133;
-}
-
-.separator {
-  color: #dcdfe6;
-  font-size: 16px;
-}
-
-.save-btn {
-  width: 100px;
-}
-
-/* 主体区域 */
-.main-section {
-  display: flex;
-  gap: 20px;
-  background-color: white;
-  padding: 20px;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-/* 左侧导航 */
-.left-nav {
-  width: 250px;
-  border-right: 1px solid #e6e8eb;
-  padding-right: 20px;
-}
-
-.nav-title {
-  font-size: 16px;
-  font-weight: bold;
-  margin-bottom: 15px;
-  color: #303133;
-}
-
-.nav-item {
-  padding: 10px 15px;
-  margin-bottom: 10px;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: all 0.3s;
-  background-color: #f5f7fa;
-}
-
-.nav-item:hover {
-  background-color: #ecf5ff;
-  color: #409eff;
-}
-
-.nav-item.active {
-  background-color: #ecf5ff;
-  color: #409eff;
-  border-left: 3px solid #409eff;
-}
-
-.new-question-input {
-  margin-top: 10px;
-}
-
-/* 右侧内容 */
-.right-content {
-  flex: 1;
-  padding-left: 20px;
-}
-
-/* 题目块 */
-.question-block {
-  margin-bottom: 30px;
-  padding: 20px;
-  background-color: #fafafa;
-  border-radius: 8px;
-}
-
-.question-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
-}
-
-.question-title {
-  font-size: 18px;
-  font-weight: bold;
-  color: #303133;
-}
-
-.edit-btn {
-  color: #409eff;
-}
-
-/* 题目类型区块 */
-.question-type-section {
-  margin-bottom: 20px;
-  padding: 15px;
-  background-color: white;
-  border-radius: 6px;
-}
-
-.section-title {
-  font-size: 16px;
-  font-weight: bold;
-  margin-bottom: 15px;
-  color: #303133;
-}
-
-.add-question-btn {
-  color: #409eff;
-  margin-top: 10px;
-}
-
-.question-footer {
-  text-align: right;
-  margin-top: 15px;
-  font-size: 14px;
-  color: #606266;
-}
-
-.question-score {
-  font-weight: bold;
-  color: #303133;
-}
-
-/* 添加大题按钮 */
-.add-big-question-btn {
-  width: 100%;
-  margin-top: 20px;
-}
-
-/* 操作按钮样式 */
-.preview-btn {
-  color: #409eff;
-  margin-right: 10px;
-}
-
-.delete-btn {
-  color: #f56c6c;
-}
-
-/* 响应式设计 */
-@media (max-width: 1200px) {
-  .input,
-  .select {
-    width: 250px;
-  }
-}
-
-@media (max-width: 768px) {
-  .top-section {
-    flex-direction: column;
-  }
-
-  .right-section {
-    align-items: flex-start;
-  }
-
-  .main-section {
-    flex-direction: column;
-  }
-
-  .left-nav {
-    width: 100%;
-    border-right: none;
-    border-bottom: 1px solid #e6e8eb;
-    padding-right: 0;
-    padding-bottom: 20px;
-    margin-bottom: 20px;
-  }
-
-  .right-content {
-    padding-left: 0;
-  }
-}
-</style>

apps/web-ele/src/views/examManage/examPaper/index.vue

@@ -19,6 +19,7 @@ import {
 } from '@element-plus/icons-vue';
 import {
   ElButton,
+  ElDialog,
   ElIcon,
   ElMessage,
   ElMessageBox,
@@ -28,6 +29,9 @@ import {
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 
+// 导入预览组件
+import ExamPreview from './cpn/examPreview.vue';
+
 // 路由实例
 const router = useRouter();
 const route = useRoute();
@@ -298,13 +302,137 @@ const deleteHandle = () => {
 // 编辑试卷
 const editExam = (row) => {
   // 跳转到编辑页面，并传递试卷ID
-  router.push(`/examManage/examEdit?id=${row.id}`);
+  router.push(`/examManage/examEdit/${row.id}`);
 };
 
+// 预览弹框状态
+const previewDialogVisible = ref(false);
+const previewExamData = ref(null);
+
 // 预览试卷
 const previewExam = (row) => {
-  // 跳转到预览页面，并传递试卷ID
-  router.push(`/examManage/examPreview?id=${row.id}`);
+  // 模拟试卷数据，实际项目中应该通过API获取
+  previewExamData.value = {
+    id: row.id,
+    name: row.name,
+    questions: [
+      {
+        id: 1,
+        type: 1,
+        title: '以下哪个是Vue的核心特性？',
+        score: 5,
+        options: [
+          { id: 1, text: '响应式数据绑定', isCorrect: true },
+          { id: 2, text: '命令式编程', isCorrect: false },
+          { id: 3, text: '双向数据流', isCorrect: false },
+          { id: 4, text: '静态模板', isCorrect: false }
+        ],
+        correctAnswer: 'A'
+      },
+      {
+        id: 2,
+        type: 2,
+        title: 'Vue组件的生命周期钩子中，哪个在组件挂载后调用？',
+        score: 5,
+        options: [
+          { id: 1, text: 'beforeCreate', isCorrect: false },
+          { id: 2, text: 'created', isCorrect: false },
+          { id: 3, text: 'mounted', isCorrect: true },
+          { id: 4, text: 'beforeMount', isCorrect: false }
+        ],
+        correctAnswer: 'C'
+      },
+      {
+        id: 3,
+        type: 3,
+        title: 'Vuex是Vue的状态管理库。',
+        score: 2,
+        options: [
+          { id: 1, text: '正确', isCorrect: true },
+          { id: 2, text: '错误', isCorrect: false }
+        ],
+        correctAnswer: '正确'
+      },
+      {
+        id: 4,
+        type: 1,
+        title: 'Vue中，哪个指令用于条件渲染？',
+        score: 5,
+        options: [
+          { id: 1, text: 'v-for', isCorrect: false },
+          { id: 2, text: 'v-if', isCorrect: true },
+          { id: 3, text: 'v-bind', isCorrect: false },
+          { id: 4, text: 'v-on', isCorrect: false }
+        ],
+        correctAnswer: 'B'
+      },
+      {
+        id: 5,
+        type: 2,
+        title: '以下哪些是Vue的内置指令？（多选）',
+        score: 8,
+        options: [
+          { id: 1, text: 'v-model', isCorrect: true },
+          { id: 2, text: 'v-show', isCorrect: true },
+          { id: 3, text: 'v-class', isCorrect: false },
+          { id: 4, text: 'v-style', isCorrect: false }
+        ],
+        correctAnswer: 'A,B'
+      },
+      {
+        id: 6,
+        type: 3,
+        title: 'Vue 3兼容Vue 2的所有语法。',
+        score: 2,
+        options: [
+          { id: 1, text: '正确', isCorrect: false },
+          { id: 2, text: '错误', isCorrect: true }
+        ],
+        correctAnswer: '错误'
+      },
+      {
+        id: 7,
+        type: 4,
+        title: 'Vue中，______是用于在组件之间传递数据的属性。',
+        score: 3,
+        correctAnswer: 'props'
+      },
+      {
+        id: 8,
+        type: 5,
+        title: '请简述Vue的响应式原理。',
+        score: 10,
+        correctAnswer: 'Vue的响应式原理基于Object.defineProperty()方法，通过对数据对象的属性进行getter和setter的劫持，实现数据变化时自动更新视图。当数据被访问时触发getter，当数据被修改时触发setter，setter会通知依赖收集器更新相关的视图。'
+      },
+      {
+        id: 9,
+        type: 1,
+        title: 'Vue Router的模式中，哪种需要后端配置支持？',
+        score: 5,
+        options: [
+          { id: 1, text: 'hash', isCorrect: false },
+          { id: 2, text: 'history', isCorrect: true },
+          { id: 3, text: 'abstract', isCorrect: false },
+          { id: 4, text: 'memory', isCorrect: false }
+        ],
+        correctAnswer: 'B'
+      },
+      {
+        id: 10,
+        type: 2,
+        title: 'Vue 3中新增的Composition API包括哪些？（多选）',
+        score: 8,
+        options: [
+          { id: 1, text: 'setup()', isCorrect: true },
+          { id: 2, text: 'ref()', isCorrect: true },
+          { id: 3, text: 'reactive()', isCorrect: true },
+          { id: 4, text: 'watchEffect()', isCorrect: true }
+        ],
+        correctAnswer: 'A,B,C,D'
+      }
+    ]
+  };
+  previewDialogVisible.value = true;
 };
 
 // 复制试卷
@@ -472,6 +600,17 @@ onMounted(() => {
         </div>
       </div>
     </div>
+
+    <!-- 预览弹框 -->
+    <ElDialog
+      v-model="previewDialogVisible"
+      :title="`试卷预览 - ${previewExamData?.name || ''}`"
+      width="800px"
+      top="5vh"
+      :close-on-click-modal="false"
+    >
+      <ExamPreview v-if="previewExamData" :questions="previewExamData.questions" />
+    </ElDialog>
   </Page>
 </template>
 
@@ -606,3 +745,7 @@ onMounted(() => {
   display: flex;
 }
 </style>
+
+
+
+

apps/web-ele/src/views/examManage/paperManage/cpn/paper-drawer.vue

@@ -0,0 +1,426 @@
+<script lang="ts" setup>
+import { ref, reactive } from 'vue';
+import { ElMessage } from 'element-plus';
+
+// 抽屉可见性
+const drawerVisible = ref(false);
+
+// 考试设置表单数据
+const examForm = reactive({
+  name: '',
+  category: '',
+  description: '',
+  totalScore: '',
+  passingScore: '',
+  startTime: '',
+  endTime: '',
+  duration: '',
+  executorCount: 23, // 模拟已选择23人
+});
+
+// 考试分类选项
+const categoryOptions = [
+  { label: '基础知识', value: 'basic' },
+  { label: '框架知识', value: 'framework' },
+  { label: '前端基础', value: 'frontend' },
+  { label: '后端基础', value: 'backend' },
+  { label: '综合测试', value: 'comprehensive' },
+];
+
+// 试卷分类选项
+const paperCategoryOptions = [
+  { label: '基础知识', value: 'basic' },
+  { label: '框架知识', value: 'framework' },
+  { label: '前端基础', value: 'frontend' },
+  { label: '后端基础', value: 'backend' },
+  { label: '综合测试', value: 'comprehensive' },
+];
+
+// 试卷名称选项
+const paperNameOptions = [
+  { label: '基础知识测试卷', value: '1', category: '基础知识', creator: '管理员', totalScore: 100, questionCount: 20, updateDate: '2024-01-15' },
+  { label: 'Vue框架测试卷', value: '2', category: '框架知识', creator: '教师1', totalScore: 120, questionCount: 25, updateDate: '2024-01-16' },
+  { label: '前端综合测试卷', value: '3', category: '前端基础', creator: '教师2', totalScore: 150, questionCount: 30, updateDate: '2024-01-17' },
+  { label: '后端综合测试卷', value: '4', category: '后端基础', creator: '教师3', totalScore: 120, questionCount: 25, updateDate: '2024-01-18' },
+  { label: '全栈综合测试卷', value: '5', category: '综合测试', creator: '管理员', totalScore: 200, questionCount: 40, updateDate: '2024-01-19' },
+];
+
+// 已选择的试卷
+const selectedPapers = ref([
+  { id: '1', name: '基础知识测试卷', category: '基础知识', creator: '管理员', totalScore: 100, questionCount: 20, updateDate: '2024-01-15' },
+  { id: '2', name: 'Vue框架测试卷', category: '框架知识', creator: '教师1', totalScore: 120, questionCount: 25, updateDate: '2024-01-16' },
+]);
+
+// 选中的试卷分类
+const selectedPaperCategory = ref('');
+
+// 选中的试卷名称
+const selectedPaperNames = ref([]);
+
+// 打开抽屉
+const openDrawer = () => {
+  drawerVisible.value = true;
+};
+
+// 关闭抽屉
+const closeDrawer = () => {
+  drawerVisible.value = false;
+};
+
+// 选择考试执行人
+const selectExecutors = () => {
+  ElMessage.info('选择考试Executor的功能待实现');
+};
+
+// 删除已选择的试卷
+const removePaper = (id) => {
+  selectedPapers.value = selectedPapers.value.filter(paper => paper.id !== id);
+};
+
+// 发布考试
+const publishExam = () => {
+  // 表单验证
+  if (!examForm.name) {
+    ElMessage.error('请输入考试名称');
+    return;
+  }
+  if (!examForm.category) {
+    ElMessage.error('请选择考试分类');
+    return;
+  }
+  if (!examForm.totalScore) {
+    ElMessage.error('请输入考试总分');
+    return;
+  }
+  if (!examForm.passingScore) {
+    ElMessage.error('请输入及格分');
+    return;
+  }
+  if (!examForm.startTime || !examForm.endTime) {
+    ElMessage.error('请选择考试时间');
+    return;
+  }
+  if (!examForm.duration) {
+    ElMessage.error('请输入答卷时长');
+    return;
+  }
+  if (selectedPapers.value.length === 0) {
+    ElMessage.error('请选择至少一张试卷');
+    return;
+  }
+  
+  // 模拟发布考试
+  console.log('发布考试:', examForm);
+  console.log('选择的试卷:', selectedPapers.value);
+  ElMessage.success('考试发布成功');
+  closeDrawer();
+};
+
+// 监听试卷名称选择变化
+const handlePaperNameChange = (values) => {
+  // 模拟根据选择的试卷名称获取试卷信息
+  selectedPapers.value = paperNameOptions
+    .filter(paper => values.includes(paper.value))
+    .map(paper => ({
+      id: paper.value,
+      name: paper.label,
+      category: paper.category,
+      creator: paper.creator,
+      totalScore: paper.totalScore,
+      questionCount: paper.questionCount,
+      updateDate: paper.updateDate,
+    }));
+};
+
+// 暴露方法给父组件
+defineExpose({
+  openDrawer,
+});
+</script>
+
+<template>
+  <div>
+    <!-- 发布考试抽屉 -->
+    <el-drawer
+      v-model="drawerVisible"
+      title="发布考试"
+      size="1200px"
+      destroy-on-close
+    >
+      <div class="exam-publish-drawer">
+        <!-- 第一部分：考试设置 -->
+        <div class="exam-setting-section">
+          <h3 class="section-title">考试设置</h3>
+          
+          <el-form
+            :model="examForm"
+            label-position="top"
+            class="grid-cols-1 md:grid-cols-2 gap-4"
+          >
+            <!-- 考试名称 -->
+            <el-form-item label="考试名称" class="form-item-with-border">
+              <el-input
+                v-model="examForm.name"
+                placeholder="请输入考试名称"
+                maxlength="30"
+                show-word-limit
+              />
+            </el-form-item>
+            
+            <!-- 考试分类 -->
+            <el-form-item label="考试分类" class="form-item-with-border">
+              <el-select
+                v-model="examForm.category"
+                placeholder="请选择考试分类"
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="option in categoryOptions"
+                  :key="option.value"
+                  :label="option.label"
+                  :value="option.value"
+                />
+              </el-select>
+            </el-form-item>
+            
+            <!-- 考试说明 -->
+            <el-form-item label="考试说明" class="form-item-with-border md:col-span-2">
+              <el-input
+                v-model="examForm.description"
+                type="textarea"
+                placeholder="请输入考试说明"
+                rows="3"
+              />
+            </el-form-item>
+            
+            <!-- 考试总分 -->
+            <el-form-item label="考试总分" class="form-item-with-border">
+              <el-input
+                v-model="examForm.totalScore"
+                placeholder="请输入考试总分"
+                type="number"
+                min="1"
+              >
+                <template #append>分</template>
+              </el-input>
+            </el-form-item>
+            
+            <!-- 及格分 -->
+            <el-form-item label="及格分" class="form-item-with-border">
+              <el-input
+                v-model="examForm.passingScore"
+                placeholder="请输入及格分"
+                type="number"
+                min="1"
+              >
+                <template #append>分</template>
+              </el-input>
+            </el-form-item>
+            
+            <!-- 考试时间 -->
+            <el-form-item label="考试时间" class="form-item-with-border md:col-span-2">
+              <el-date-picker
+                v-model="examForm.startTime"
+                type="datetime"
+                placeholder="开始时间"
+                style="width: 48%"
+              />
+              <span class="mx-2">至</span>
+              <el-date-picker
+                v-model="examForm.endTime"
+                type="datetime"
+                placeholder="结束时间"
+                style="width: 48%"
+              />
+            </el-form-item>
+            
+            <!-- 答卷时长 -->
+            <el-form-item label="答卷时长" class="form-item-with-border md:col-span-2">
+              <el-input
+                v-model="examForm.duration"
+                placeholder="请输入答卷时长"
+                type="number"
+                min="1"
+                style="width: 300px"
+              >
+                <template #append>分钟</template>
+              </el-input>
+            </el-form-item>
+            
+            <!-- 考试执行人 -->
+            <el-form-item label="考试执行人" class="form-item-with-border md:col-span-2">
+              <el-button @click="selectExecutors">
+                选择考试Executor（已选择{{ examForm.executorCount }}人）
+              </el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+        
+        <!-- 第二部分：选择试卷 -->
+        <div class="select-paper-section">
+          <h3 class="section-title">选择试卷</h3>
+          
+          <div class="grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+            <!-- 选择试卷分类 -->
+            <el-form-item label="选择试卷分类" class="form-item-with-border">
+              <el-select
+                v-model="selectedPaperCategory"
+                placeholder="请选择试卷分类"
+                filterable
+                allow-create
+                default-first-option
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="option in paperCategoryOptions"
+                  :key="option.value"
+                  :label="option.label"
+                  :value="option.value"
+                />
+              </el-select>
+            </el-form-item>
+            
+            <!-- 选择试卷名称 -->
+            <el-form-item label="选择试卷名称" class="form-item-with-border">
+              <el-select
+                v-model="selectedPaperNames"
+                multiple
+                filterable
+                allow-create
+                default-first-option
+                placeholder="请选择试卷名称"
+                style="width: 100%"
+                @change="handlePaperNameChange"
+              >
+                <el-option
+                  v-for="option in paperNameOptions"
+                  :key="option.value"
+                  :label="option.label"
+                  :value="option.value"
+                />
+              </el-select>
+            </el-form-item>
+          </div>
+          
+          <!-- 选择的试卷列表 -->
+          <div class="selected-papers-list" v-if="selectedPapers.length > 0">
+            <el-table :data="selectedPapers" style="width: 100%" :header-cell-style="{ backgroundColor: '#409EFF', color: '#fff' }">
+              <el-table-column prop="name" label="试卷名称" min-width="200" />
+              <el-table-column prop="category" label="类别" min-width="120" />
+              <el-table-column prop="creator" label="创建人" min-width="120" />
+              <el-table-column prop="totalScore" label="试卷总分" min-width="100" />
+              <el-table-column prop="questionCount" label="试题总数" min-width="100" />
+              <el-table-column prop="updateDate" label="更新日期" min-width="120" />
+              <el-table-column label="操作" width="80" fixed="right">
+                <template #default="{ row }">
+                  <el-button
+                    type="text"
+                    size="small"
+                    @click="removePaper(row.id)"
+                    class="text-red-500"
+                  >
+                    删除
+                  </el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+        
+        <!-- 操作按钮 -->
+        <div class="action-buttons">
+          <el-button @click="closeDrawer">取消</el-button>
+          <el-button type="primary" @click="publishExam">发布</el-button>
+        </div>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.exam-publish-drawer {
+  padding: 20px;
+}
+
+:deep(.el-drawer__header) {
+
+  .el-drawer__title {
+    color: #000;
+  }
+}
+
+.section-title {
+  position: relative;
+  margin-bottom: 20px;
+  padding-left: 12px;
+  font-size: 16px;
+  font-weight: 500;
+  color: #303133;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 3px;
+    background-color: #409eff;
+    border-radius: 2px;
+  }
+}
+
+.form-item-with-border {
+  .el-form-item__label {
+    position: relative;
+    padding-left: 12px;
+    
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 3px;
+      height: 12px;
+      background-color: #409eff;
+      border-radius: 2px;
+    }
+  }
+}
+
+.grid-cols-1 {
+  display: grid;
+  grid-template-columns: 1fr;
+}
+
+.md\:grid-cols-2 {
+  @media (min-width: 768px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.md\:col-span-2 {
+  @media (min-width: 768px) {
+    grid-column: span 2;
+  }
+}
+
+.gap-4 {
+  gap: 1rem;
+}
+
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
+.action-buttons {
+  margin-top: 30px;
+  display: flex;
+  justify-content: flex-start;
+  gap: 12px;
+}
+
+.selected-papers-list {
+  margin-top: 20px;
+}
+</style>

apps/web-ele/src/views/examManage/paperManage/index.vue

@@ -0,0 +1,755 @@
+<script lang="ts" setup>
+import type { VbenFormProps } from '@vben/common-ui';
+
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { Page } from '@vben/common-ui';
+
+import {
+  CopyDocument,
+  DArrowLeft,
+  Delete,
+  Download,
+  Edit,
+  Expand,
+  Link,
+  Plus,
+} from '@element-plus/icons-vue';
+import {
+  ElButton,
+  ElDialog,
+  ElIcon,
+  ElMessage,
+  ElMessageBox,
+  ElSpace,
+  ElTree,
+} from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import PaperDrawer from './cpn/paper-drawer.vue';
+
+// 路由实例
+const router = useRouter();
+const route = useRoute();
+const classId = route.params.classId;
+
+// 菜单折叠状态
+const isCollapse = ref(false);
+
+// 章节数据
+const chapterData = ref([
+  {
+    id: 1,
+    label: '第一章 基础知识',
+    children: [
+      { id: 2, label: '1.1 概述', saved: true },
+      { id: 3, label: '1.2 基本概念', saved: false },
+      { id: 4, label: '1.3 核心原理', saved: true },
+    ],
+  },
+  {
+    id: 5,
+    label: '第二章 进阶知识',
+    children: [
+      { id: 6, label: '2.1 高级特性', saved: true },
+      { id: 7, label: '2.2 最佳实践', saved: true },
+    ],
+  },
+  {
+    id: 8,
+    label: '第三章 案例分析',
+    children: [
+      { id: 9, label: '3.1 案例一', saved: false },
+      { id: 10, label: '3.2 案例二', saved: true },
+    ],
+  },
+]);
+
+// 选中的章节
+const selectedChapter = ref({
+  id: '1',
+  label: '第一章 基础知识',
+});
+
+// 模拟试卷数据
+const mockExamData = ref([
+  {
+    id: 1,
+    name: '基础知识测试卷',
+    category: '基础知识',
+    creator: '管理员',
+    totalScore: 100,
+    questionCount: 20,
+    updateDate: '2024-01-15',
+  },
+  {
+    id: 2,
+    name: 'Vue框架测试卷',
+    category: '框架知识',
+    creator: '教师1',
+    totalScore: 120,
+    questionCount: 25,
+    updateDate: '2024-01-16',
+  },
+  {
+    id: 3,
+    name: '前端综合测试卷',
+    category: '前端基础',
+    creator: '教师2',
+    totalScore: 150,
+    questionCount: 30,
+    updateDate: '2024-01-17',
+  },
+]);
+
+// 表单配置
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 80,
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '试卷名称',
+      componentProps: {
+        placeholder: '请输入试卷名称',
+      },
+    },
+  ],
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
+};
+
+// 表格配置
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    highlight: true,
+    reserve: true,
+    trigger: 'default',
+  },
+  columns: [
+    {
+      type: 'checkbox',
+      width: 80,
+    },
+    {
+      field: 'name',
+      title: '试卷名称',
+      minWidth: 200,
+    },
+    {
+      field: 'category',
+      title: '类别',
+      minWidth: 120,
+    },
+    {
+      field: 'creator',
+      title: '创建人',
+      minWidth: 120,
+    },
+    {
+      field: 'totalScore',
+      title: '试卷总分',
+      minWidth: 100,
+    },
+    {
+      field: 'questionCount',
+      title: '试题总数',
+      minWidth: 100,
+    },
+    {
+      field: 'updateDate',
+      title: '更新日期',
+      minWidth: 120,
+    },
+    {
+      field: 'action',
+      fixed: 'right',
+      slots: { default: 'action' },
+      title: '操作',
+      width: 330,
+    },
+  ],
+  size: 'medium',
+  // 固定表格高度，避免高度不断增加
+  height: 800,
+  // 确保表格有唯一ID
+  id: 'unique-exam-paper-table',
+  // 分页配置
+  pagerConfig: {
+    pageSize: 20,
+    currentPage: 1,
+    pageSizes: [10, 20, 50, 100],
+  },
+  proxyConfig: {
+    enabled: true,
+    autoLoad: true,
+    page: {
+      currentKey: 'currentPage',
+      sizeKey: 'pageSize',
+    },
+    ajax: {
+      query: async ({ page }, formValues = {}) => {
+        // 模拟API请求
+        console.log('查询参数:', formValues, page);
+
+        // 模拟搜索过滤
+        let filteredData = [...mockExamData.value];
+
+        if (formValues.name) {
+          filteredData = filteredData.filter((item) =>
+            item.name.includes(formValues.name),
+          );
+        }
+
+        // 模拟分页
+        const start = (page.currentPage - 1) * page.pageSize;
+        const end = start + page.pageSize;
+        const paginatedData = filteredData.slice(start, end);
+        console.log('分页数据:', paginatedData);
+
+        // 确保返回格式正确，使用 items 作为数据键
+        return {
+          items: paginatedData,
+          total: filteredData.length,
+        };
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  toolbarConfig: {
+    custom: true,
+    refresh: true,
+    zoom: true,
+  },
+};
+
+// 使用表格
+const [BasicTable, basicTableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+// 试卷抽屉组件引用
+const paperDrawerRef = ref(null);
+
+// 点击章节
+const handleChapterClick = (node) => {
+  selectedChapter.value = {
+    id: node.id,
+    label: node.label,
+  };
+  // 触发表格刷新，模拟获取对应章节的试卷
+  basicTableApi.reload();
+};
+
+// 添加章节
+const addChapter = (parentId = null) => {
+  ElMessage.info('添加章节功能待实现');
+};
+
+// 编辑章节
+const editChapter = (node) => {
+  ElMessage.info('编辑章节功能待实现');
+};
+
+// 删除章节
+const deleteChapter = (node) => {
+  ElMessage.info('删除章节功能待实现');
+};
+
+// 新增试卷
+const addExam = () => {
+  // 打开抽屉
+  paperDrawerRef.value.openDrawer();
+};
+
+// 添加时间
+const addTime = () => {
+  ElMessage.info('添加时间功能待实现');
+};
+
+// 删除试卷
+const deleteExam = (row) => {
+  ElMessage.info('删除试卷功能待实现');
+};
+
+// 批量删除试卷
+const deleteHandle = () => {
+  const checkRecords = basicTableApi.grid.getCheckboxRecords();
+  const ids = checkRecords.map((item: any) => item.id);
+  if (ids.length <= 0) {
+    return;
+  }
+
+  ElMessageBox.confirm(`确认删除选中的${ids.length}条数据吗?`, '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(async () => {
+    // 模拟批量删除操作
+    console.log('批量删除试卷:', ids);
+    await basicTableApi.reload();
+  });
+};
+
+// 编辑试卷
+const editExam = (row) => {
+  // 跳转到编辑页面，并传递试卷ID
+  router.push(`/examManage/examEdit/${row.id}`);
+};
+
+// 预览弹框状态
+const previewDialogVisible = ref(false);
+const previewExamData = ref(null);
+
+// 预览试卷
+const previewExam = (row) => {
+  // 模拟试卷数据，实际项目中应该通过API获取
+  previewExamData.value = {
+    id: row.id,
+    name: row.name,
+    questions: [
+      {
+        id: 1,
+        type: 1,
+        title: '以下哪个是Vue的核心特性？',
+        score: 5,
+        options: [
+          { id: 1, text: '响应式数据绑定', isCorrect: true },
+          { id: 2, text: '命令式编程', isCorrect: false },
+          { id: 3, text: '双向数据流', isCorrect: false },
+          { id: 4, text: '静态模板', isCorrect: false }
+        ],
+        correctAnswer: 'A'
+      },
+      {
+        id: 2,
+        type: 2,
+        title: 'Vue组件的生命周期钩子中，哪个在组件挂载后调用？',
+        score: 5,
+        options: [
+          { id: 1, text: 'beforeCreate', isCorrect: false },
+          { id: 2, text: 'created', isCorrect: false },
+          { id: 3, text: 'mounted', isCorrect: true },
+          { id: 4, text: 'beforeMount', isCorrect: false }
+        ],
+        correctAnswer: 'C'
+      },
+      {
+        id: 3,
+        type: 3,
+        title: 'Vuex是Vue的状态管理库。',
+        score: 2,
+        options: [
+          { id: 1, text: '正确', isCorrect: true },
+          { id: 2, text: '错误', isCorrect: false }
+        ],
+        correctAnswer: '正确'
+      },
+      {
+        id: 4,
+        type: 1,
+        title: 'Vue中，哪个指令用于条件渲染？',
+        score: 5,
+        options: [
+          { id: 1, text: 'v-for', isCorrect: false },
+          { id: 2, text: 'v-if', isCorrect: true },
+          { id: 3, text: 'v-bind', isCorrect: false },
+          { id: 4, text: 'v-on', isCorrect: false }
+        ],
+        correctAnswer: 'B'
+      },
+      {
+        id: 5,
+        type: 2,
+        title: '以下哪些是Vue的内置指令？（多选）',
+        score: 8,
+        options: [
+          { id: 1, text: 'v-model', isCorrect: true },
+          { id: 2, text: 'v-show', isCorrect: true },
+          { id: 3, text: 'v-class', isCorrect: false },
+          { id: 4, text: 'v-style', isCorrect: false }
+        ],
+        correctAnswer: 'A,B'
+      },
+      {
+        id: 6,
+        type: 3,
+        title: 'Vue 3兼容Vue 2的所有语法。',
+        score: 2,
+        options: [
+          { id: 1, text: '正确', isCorrect: false },
+          { id: 2, text: '错误', isCorrect: true }
+        ],
+        correctAnswer: '错误'
+      },
+      {
+        id: 7,
+        type: 4,
+        title: 'Vue中，______是用于在组件之间传递数据的属性。',
+        score: 3,
+        correctAnswer: 'props'
+      },
+      {
+        id: 8,
+        type: 5,
+        title: '请简述Vue的响应式原理。',
+        score: 10,
+        correctAnswer: 'Vue的响应式原理基于Object.defineProperty()方法，通过对数据对象的属性进行getter和setter的劫持，实现数据变化时自动更新视图。当数据被访问时触发getter，当数据被修改时触发setter，setter会通知依赖收集器更新相关的视图。'
+      },
+      {
+        id: 9,
+        type: 1,
+        title: 'Vue Router的模式中，哪种需要后端配置支持？',
+        score: 5,
+        options: [
+          { id: 1, text: 'hash', isCorrect: false },
+          { id: 2, text: 'history', isCorrect: true },
+          { id: 3, text: 'abstract', isCorrect: false },
+          { id: 4, text: 'memory', isCorrect: false }
+        ],
+        correctAnswer: 'B'
+      },
+      {
+        id: 10,
+        type: 2,
+        title: 'Vue 3中新增的Composition API包括哪些？（多选）',
+        score: 8,
+        options: [
+          { id: 1, text: 'setup()', isCorrect: true },
+          { id: 2, text: 'ref()', isCorrect: true },
+          { id: 3, text: 'reactive()', isCorrect: true },
+          { id: 4, text: 'watchEffect()', isCorrect: true }
+        ],
+        correctAnswer: 'A,B,C,D'
+      }
+    ]
+  };
+  previewDialogVisible.value = true;
+};
+
+// 复制试卷
+const copyExam = (row) => {
+  ElMessage.info('复制试卷功能待实现');
+};
+// 生成试卷链接
+const generateLink = (row) => {
+  ElMessage.info('生成试卷链接功能待实现');
+};
+// 下载试卷
+const downloadExam = (row) => {
+  ElMessage.info('下载试卷功能待实现');
+};
+
+// 页面加载时获取数据
+onMounted(() => {
+  // 默认选中第一个章节
+  if (chapterData.value.length > 0) {
+    handleChapterClick(chapterData.value[0]);
+  }
+});
+</script>
+
+<template>
+  <Page :auto-content-height="true">
+    <div class="knowledge-detail">
+      <!-- 主体内容区 -->
+      <div class="main-content">
+        <!-- 左侧目录 -->
+        <div class="left-sidebar" :class="{ collapsed: isCollapse }">
+          <!-- 折叠按钮 -->
+          <div class="collapse-btn" @click="isCollapse = true">
+            <ElIcon><DArrowLeft /></ElIcon>
+          </div>
+
+          <div class="sidebar-content">
+            <!-- 章节树 -->
+            <div class="chapter-tree">
+              <ElTree
+                :data="chapterData"
+                node-key="id"
+                default-expand-all
+                :expand-on-click-node="false"
+                @node-click="handleChapterClick"
+              >
+                <template #default="{ node, data }">
+                  <div class="tree-node-content">
+                    <span>{{ node.label }}</span>
+                    <div class="tree-node-actions">
+                      <ElButton
+                        type="text"
+                        size="small"
+                        circle
+                        @click.stop="addExam"
+                        title="添加试卷"
+                      >
+                        <ElIcon><Plus /></ElIcon>
+                      </ElButton>
+                      <ElButton
+                        type="text"
+                        size="small"
+                        circle
+                        @click.stop="editChapter(data)"
+                        title="编辑章节"
+                      >
+                        <ElIcon><Edit /></ElIcon>
+                      </ElButton>
+                      <ElButton
+                        type="text"
+                        size="small"
+                        circle
+                        @click.stop="deleteChapter(data)"
+                        title="删除章节"
+                      >
+                        <ElIcon><Delete /></ElIcon>
+                      </ElButton>
+                    </div>
+                  </div>
+                </template>
+              </ElTree>
+            </div>
+          </div>
+        </div>
+
+        <!-- 中间内容 -->
+        <div class="center-content">
+          <ElIcon
+            v-if="isCollapse"
+            :size="20"
+            class="collapse-control-btn"
+            @click="isCollapse = false"
+          >
+            <Expand />
+          </ElIcon>
+
+          <!-- 试卷列表区域 -->
+          <div class="question-list">
+            <!-- 试卷列表 -->
+            <BasicTable table-title="试卷管理列表">
+              <template #toolbar-tools>
+                <ElSpace>
+                  <ElButton
+                    type="danger"
+                    :disabled="
+                      !(basicTableApi?.grid?.getCheckboxRecords?.()?.length > 0)
+                    "
+                    @click="deleteHandle"
+                  >
+                    批量删除
+                  </ElButton>
+                  <ElButton type="primary" @click="addExam">
+                    发布考试
+                  </ElButton>
+                </ElSpace>
+              </template>
+              <template #action="{ row }">
+                <div class="action-buttons">
+                  <ElButton
+                    type="text"
+                    size="small"
+                    @click="previewExam(row)"
+                    style="margin-left: 0px"
+                  >
+                    预览
+                  </ElButton>
+                  <ElButton
+                    type="text"
+                    size="small"
+                    @click="copyExam(row)"
+                    style="margin-left: 0px"
+                  >
+                    
+                    <ElIcon><CopyDocument /></ElIcon>
+                    复制
+                  </ElButton>
+                  <ElButton
+                    type="text"
+                    size="small"
+                    @click="generateLink(row)"
+                    style="margin-left: 0px"
+                  >
+                    <ElIcon><Link /></ElIcon>
+                    生成链接
+                  </ElButton>
+
+                  <ElButton
+                    type="text"
+                    size="small"
+                    @click="downloadExam(row)"
+                    style="margin-left: 0px"
+                  >
+                    <ElIcon><Download /></ElIcon>
+                    下载
+                  </ElButton>
+                  <ElButton
+                    type="text"
+                    size="small"
+                    @click="editExam(row)"
+                    style="margin-left: 0px"
+                  >
+                    <ElIcon><Edit /></ElIcon>
+                    编辑
+                  </ElButton>
+                  <ElButton
+                    type="text"
+                    size="small"
+                    @click="deleteExam(row)"
+                    class="text-red-500"
+                    style="margin-left: 0px"
+                  >
+                    <ElIcon><Delete /></ElIcon>
+                    删除
+                  </ElButton>
+                </div>
+              </template>
+            </BasicTable>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- 试卷抽屉组件 -->
+    <PaperDrawer ref="paperDrawerRef" />
+  </Page>
+</template>
+
+<style lang="scss" scoped>
+.knowledge-detail {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 122px);
+}
+
+/* 顶部导航 */
+.top-nav {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 16px 20px;
+  margin-bottom: 10px;
+  background-color: #fff;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.nav-right {
+  display: flex;
+  gap: 12px;
+}
+
+/* 主体内容区 */
+.main-content {
+  display: flex;
+  flex: 1;
+  gap: 10px;
+}
+
+/* 左侧边栏 */
+.left-sidebar {
+  position: relative;
+  width: 250px;
+  overflow: hidden;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
+  transition: all 0.3s ease;
+}
+
+.left-sidebar.collapsed {
+  width: 0;
+  padding: 0;
+  margin: 0;
+}
+
+.collapse-btn {
+  width: 24px;
+  height: 24px;
+  padding: 15px;
+  line-height: 24px;
+  text-align: center;
+  cursor: pointer;
+}
+
+.sidebar-content {
+  padding: 15px;
+  transition: opacity 0.3s ease;
+}
+
+.left-sidebar.collapsed .sidebar-content {
+  pointer-events: none;
+  opacity: 0;
+}
+
+.chapter-tree {
+  max-height: calc(100vh - 300px);
+  overflow-y: auto;
+}
+
+.tree-node-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.tree-node-actions {
+  display: none;
+  gap: 4px;
+}
+
+.tree-node-content:hover .tree-node-actions {
+  display: flex;
+}
+
+.tree-node-actions button {
+  margin-left: 0 !important;
+}
+
+/* 中间内容区 */
+.center-content {
+  position: relative;
+  flex: 1;
+  overflow-y: auto;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
+}
+
+.collapse-control-btn {
+  position: absolute;
+  top: 15px;
+  left: 10px;
+  z-index: 10;
+  padding: 4px;
+  margin-right: 10px;
+  font-size: 20px;
+  color: #666;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: color 0.3s;
+}
+
+.collapse-control-btn:hover {
+  color: #1890ff;
+  background-color: #f0f9ff;
+}
+
+.question-list-title {
+  margin-bottom: 20px;
+  font-size: 18px;
+  font-weight: 500;
+  color: #303133;
+}
+
+.action-buttons {
+  display: flex;
+}
+</style>

packages/@core/preferences/src/config.ts

@@ -95,7 +95,7 @@ const defaultPreferences: Preferences = {
     colorPrimary: 'hsl(212 100% 45%)',
     colorSuccess: 'hsl(144 57% 58%)',
     colorWarning: 'hsl(42 84% 61%)',
-    mode: 'dark',
+    mode: 'light',
     radius: '0.5',
     semiDarkHeader: false,
     semiDarkSidebar: false,
@@ -118,4 +118,4 @@ const defaultPreferences: Preferences = {
   },
 };
 
-export { defaultPreferences };
+export { defaultPreferences };