Merge branch 'master' of http://192.168.1.222:3000/hnsh-smart-steward/smart-steward-admin

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

@@ -60,6 +60,50 @@ const localRoutes: RouteRecordStringComponent[] = [
     path: '/examManage/myExamPaper/view/:id',
   },
   {
+    component: '/examManage/questionBank/cpn/questionEdit/index',
+    meta: {
+      activePath: '/examManage/questionBank',
+      icon: 'carbon:edit',
+      title: '试题编辑',
+      hideInMenu: true,
+    },
+    name: 'QuestionEdit',
+    path: '/examManage/questionBank/questionEdit/:id?',
+  },
+  {
+    component: '/examManage/questionBank/cpn/questionPreview/index',
+    meta: {
+      activePath: '/examManage/questionBank',
+      icon: 'carbon:view',
+      title: '试题预览',
+      hideInMenu: true,
+    },
+    name: 'QuestionPreview',
+    path: '/examManage/questionBank/questionPreview/:id',
+  },
+  {
+    component: '/examManage/examPaper/cpn/examEdit/index',
+    meta: {
+      activePath: '/examManage/examPaper',
+      icon: 'carbon:edit',
+      title: '试卷编辑',
+      hideInMenu: true,
+    },
+    name: 'ExamEdit',
+    path: '/examManage/examEdit/:id?',
+  },
+  {
+    component: '/examManage/examPaper/cpn/examPreview/index',
+    meta: {
+      activePath: '/examManage/examPaper',
+      icon: 'carbon:view',
+      title: '试卷预览',
+      hideInMenu: true,
+    },
+    name: 'ExamPreview',
+    path: '/examManage/examPaper/examPreview/:id',
+  },
+  {
     component: '/monitor/job/job-log/index',
     meta: {
       activePath: '/monitor/job',
@@ -106,7 +150,7 @@ const localRoutes: RouteRecordStringComponent[] = [
     component: '/knowledge/edit/index',
     meta: {
       activePath: '/knowledge/edit',
-      icon: 'carbon:data-base', 
+      icon: 'carbon:data-base',
       title: '知识库编辑',
       hideInMenu: true,
     },

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

@@ -0,0 +1,499 @@
+<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/questionBank/cpn/questionEdit/index.vue

@@ -0,0 +1,583 @@
+<template>
+  <div class="question-edit">
+    <div class="p-4 bg-white rounded-lg shadow-sm">
+      <div class="flex items-center justify-between mb-4">
+        <h2 class="text-lg font-semibold text-gray-800">
+          {{ id ? '编辑试题' : '新增试题' }}
+        </h2>
+      </div>
+      
+      <!-- 试题类型标签页 -->
+      <el-tabs v-model="activeTab" class="mb-6">
+        <el-tab-pane label="单选题" name="1">
+          <!-- 单选题内容 -->
+          <div class="space-y-6">
+            <!-- 试题属性 -->
+            <div class="p-4 rounded-lg">
+              <h3 class="text-md font-medium text-gray-700 mb-3">试题属性</h3>
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <el-form-item label="试题分类" label-width="80px">
+                  <el-select v-model="formData.category" 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-form-item label="试题难度" label-width="80px">
+                  <el-select v-model="formData.difficulty" placeholder="请选择试题难度">
+                    <el-option label="简单" value="1" />
+                    <el-option label="中等" value="2" />
+                    <el-option label="困难" value="3" />
+                  </el-select>
+                </el-form-item>
+              </div>
+            </div>
+            
+            <!-- 题目（题干内容） -->
+            <div>
+              <h3 class="text-md font-medium text-gray-700 mb-3" style="border-left: 4px solid #007bff; padding-left: 10px;">题目（题干内容）</h3>
+              <TinymceEditor v-model="formData.content" :height="300" />
+            </div>
+            
+            <!-- 选项 -->
+            <div>
+              <h3 class="text-md font-medium text-gray-700 mb-3" style="border-left: 4px solid #007bff; padding-left: 10px;">选项</h3>
+              <div class="space-y-3">
+                <div 
+                  v-for="(option, index) in formData.options" 
+                  :key="index"
+                  class="rounded-lg"
+                >
+                  <div class="items-start gap-2">
+                    <div class="flex items-center">
+                      <span class="ml-2 font-medium" style="margin-right: 15px;">{{ String.fromCharCode(65 + index) }}.</span>
+                      <el-radio 
+                        v-model="formData.correctAnswer" 
+                        :label="String.fromCharCode(65 + index)"
+                        class="mt-1"
+                      />
+                    </div>
+                    <div class="flex-1">
+                      <!-- 选项内容 -->
+                      <div class="mb-2">
+                        <TinymceEditor v-model="option.content" :height="200" />
+                      </div>
+                      <!-- 删除选项按钮 -->
+                      <div class="flex justify-end">
+                        <el-button 
+                          type="danger" 
+                          text 
+                          size="small"
+                          @click="removeOption(index)"
+                          :disabled="formData.options.length <= 2"
+                        >
+                          删除选项
+                        </el-button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <!-- 添加选项按钮 -->
+                <div class="flex justify-center">
+                  <el-button type="primary" plain @click="addOption">
+                    添加一个新选项
+                  </el-button>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 答案解析 -->
+            <div>
+              <h3 class="text-md font-medium text-gray-700 mb-3"  style="border-left: 4px solid #007bff; padding-left: 10px;">答案解析</h3>
+              <div class="flex items-center gap-2 mb-2">
+                <el-button type="primary" plain size="small">
+                  引用
+                </el-button>
+              </div>
+              <TinymceEditor v-model="formData.analysis" :height="300" />
+            </div>
+            
+            <!-- 操作按钮 -->
+            <div class="flex justify-start gap-3 pt-4 border-t">
+              <el-button type="primary" @click="handleSaveAndContinue">
+                保存并继续添加
+              </el-button>
+              <el-button type="primary" plain @click="handleSaveAndClose">
+                保存并关闭
+              </el-button>
+            </div>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="多选题" name="2">
+          <!-- 多选题内容 -->
+          <div class="space-y-6">
+            <!-- 试题属性 -->
+            <div class="p-4 rounded-lg">
+              <h3 class="text-md font-medium text-gray-700 mb-3">试题属性</h3>
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <el-form-item label="试题分类" label-width="80px">
+                  <el-select v-model="formData.category" 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-form-item label="试题难度" label-width="80px">
+                  <el-select v-model="formData.difficulty" placeholder="请选择试题难度">
+                    <el-option label="简单" value="1" />
+                    <el-option label="中等" value="2" />
+                    <el-option label="困难" value="3" />
+                  </el-select>
+                </el-form-item>
+              </div>
+            </div>
+            
+            <!-- 题目（题干内容） -->
+            <div>
+              <h3 class="text-md font-medium text-gray-700 mb-3" style="border-left: 4px solid #007bff; padding-left: 10px;">题目（题干内容）</h3>
+              <TinymceEditor v-model="formData.content" :height="300" />
+            </div>
+            
+            <!-- 选项 -->
+            <div>
+              <h3 class="text-md font-medium text-gray-700 mb-3" style="border-left: 4px solid #007bff; padding-left: 10px;">选项</h3>
+              <div class="space-y-3">
+                <div 
+                  v-for="(option, index) in formData.options" 
+                  :key="index"
+                  class="rounded-lg"
+                >
+                  <div class="items-start gap-2">
+                    <div class="flex items-center">
+                      <span class="ml-2 font-medium" style="margin-right: 15px;">{{ String.fromCharCode(65 + index) }}.</span>
+                      <el-checkbox 
+                        v-model="formData.correctAnswers" 
+                        :label="String.fromCharCode(65 + index)"
+                        class="mt-1"
+                      />
+                    </div>
+                    <div class="flex-1">
+                      <!-- 选项内容 -->
+                      <div class="mb-2">
+                        <TinymceEditor v-model="option.content" :height="200" />
+                      </div>
+                      <!-- 删除选项按钮 -->
+                      <div class="flex justify-end">
+                        <el-button 
+                          type="danger" 
+                          text 
+                          size="small"
+                          @click="removeOption(index)"
+                          :disabled="formData.options.length <= 2"
+                        >
+                          删除选项
+                        </el-button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <!-- 添加选项按钮 -->
+                <div class="flex justify-center">
+                  <el-button type="primary" plain @click="addOption">
+                    添加一个新选项
+                  </el-button>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 答案解析 -->
+            <div>
+              <h3 class="text-md font-medium text-gray-700 mb-3"  style="border-left: 4px solid #007bff; padding-left: 10px;">答案解析</h3>
+              <div class="flex items-center gap-2 mb-2">
+                <el-button type="primary" plain size="small">
+                  引用
+                </el-button>
+              </div>
+              <TinymceEditor v-model="formData.analysis" :height="300" />
+            </div>
+            
+            <!-- 操作按钮 -->
+            <div class="flex justify-start gap-3 pt-4 border-t">
+              <el-button type="primary" @click="handleSaveAndContinue">
+                保存并继续添加
+              </el-button>
+              <el-button type="primary" plain @click="handleSaveAndClose">
+                保存并关闭
+              </el-button>
+            </div>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="判断题" name="3">
+          <!-- 判断题内容 -->
+          <div class="space-y-6">
+            <!-- 试题属性 -->
+            <div class="p-4 rounded-lg">
+              <h3 class="text-md font-medium text-gray-700 mb-3">试题属性</h3>
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <el-form-item label="试题分类" label-width="80px">
+                  <el-select v-model="formData.category" 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-form-item label="试题难度" label-width="80px">
+                  <el-select v-model="formData.difficulty" placeholder="请选择试题难度">
+                    <el-option label="简单" value="1" />
+                    <el-option label="中等" value="2" />
+                    <el-option label="困难" value="3" />
+                  </el-select>
+                </el-form-item>
+              </div>
+            </div>
+            
+            <!-- 题目（题干内容） -->
+            <div>
+              <h3 class="text-md font-medium text-gray-700 mb-3" style="border-left: 4px solid #007bff; padding-left: 10px;">题目（题干内容）</h3>
+              <TinymceEditor v-model="formData.content" :height="300" />
+            </div>
+            
+            <!-- 选项 -->
+            <div>
+              <h3 class="text-md font-medium text-gray-700 mb-3" style="border-left: 4px solid #007bff; padding-left: 10px;">选项</h3>
+              <div class="space-y-3">
+                <!-- 正确选项 -->
+                <div class="rounded-lg">
+                  <div class="items-start gap-2">
+                    <div class="flex items-center">
+                      <el-radio v-model="formData.correctAnswer" label="正确" class="mt-1" />
+                       <el-radio v-model="formData.correctAnswer" label="错误" class="mt-1" />
+                    </div>
+                    <div class="flex-1">
+                      <!-- 选项内容 -->
+                      <div class="mb-2">
+                        <TinymceEditor v-model="formData.options[0].content" :height="200" />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 答案解析 -->
+            <div>
+              <h3 class="text-md font-medium text-gray-700 mb-3"  style="border-left: 4px solid #007bff; padding-left: 10px;">答案解析</h3>
+              <div class="flex items-center gap-2 mb-2">
+                <el-button type="primary" plain size="small">
+                  引用
+                </el-button>
+              </div>
+              <TinymceEditor v-model="formData.analysis" :height="300" />
+            </div>
+            
+            <!-- 操作按钮 -->
+            <div class="flex justify-start gap-3 pt-4 border-t">
+              <el-button type="primary" @click="handleSaveAndContinue">
+                保存并继续添加
+              </el-button>
+              <el-button type="primary" plain @click="handleSaveAndClose">
+                保存并关闭
+              </el-button>
+            </div>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="填空题" name="4">
+          <!-- 填空题内容 -->
+          <div class="space-y-6">
+            <!-- 试题属性 -->
+            <div class="p-4 rounded-lg">
+              <h3 class="text-md font-medium text-gray-700 mb-3">试题属性</h3>
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <el-form-item label="试题分类" label-width="80px">
+                  <el-select v-model="formData.category" 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-form-item label="试题难度" label-width="80px">
+                  <el-select v-model="formData.difficulty" placeholder="请选择试题难度">
+                    <el-option label="简单" value="1" />
+                    <el-option label="中等" value="2" />
+                    <el-option label="困难" value="3" />
+                  </el-select>
+                </el-form-item>
+              </div>
+            </div>
+            
+            <!-- 题目（题干内容） -->
+            <div>
+              <h3 class="text-md font-medium text-gray-700 mb-3" style="border-left: 4px solid #007bff; padding-left: 10px;">题目（题干内容）</h3>
+              <TinymceEditor v-model="formData.content" :height="300" />
+            </div>
+            
+            <!-- 答案 -->
+            <div>
+              <h3 class="text-md font-medium text-gray-700 mb-3" style="border-left: 4px solid #007bff; padding-left: 10px;">答案</h3>
+              <div class="space-y-3">
+                <div v-for="(blank, index) in formData.blanks" :key="index" class="flex items-center space-x-2">
+                  <span class="text-gray-600">填空{{ index + 1 }}：</span>
+                  <el-input 
+                    v-model="blank.answer" 
+                    placeholder="请输入答案" 
+                    class="flex-1"
+                  />
+                  <el-button 
+                    type="danger" 
+                    size="small" 
+                    :icon="Delete" 
+                    @click="removeBlank(index)"
+                    :disabled="formData.blanks.length <= 2"
+                  />
+                </div>
+                <el-button 
+                  type="primary" 
+                  size="small" 
+                  :icon="Plus" 
+                  @click="addBlank"
+                >
+                  添加填空
+                </el-button>
+              </div>
+            </div>
+            
+            <!-- 答案解析 -->
+            <div>
+              <h3 class="text-md font-medium text-gray-700 mb-3"  style="border-left: 4px solid #007bff; padding-left: 10px;">答案解析</h3>
+              <div class="flex items-center gap-2 mb-2">
+                <el-button type="primary" plain size="small">
+                  引用
+                </el-button>
+              </div>
+              <TinymceEditor v-model="formData.analysis" :height="300" />
+            </div>
+            
+            <!-- 操作按钮 -->
+            <div class="flex justify-start gap-3 pt-4 border-t">
+              <el-button type="primary" @click="handleSaveAndContinue">
+                保存并继续添加
+              </el-button>
+              <el-button type="primary" plain @click="handleSaveAndClose">
+                保存并关闭
+              </el-button>
+            </div>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="简答题" name="5">
+          <!-- 简答题内容 -->
+          <div class="space-y-6">
+            <!-- 试题属性 -->
+            <div class="p-4 rounded-lg">
+              <h3 class="text-md font-medium text-gray-700 mb-3">试题属性</h3>
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <el-form-item label="试题分类" label-width="80px">
+                  <el-select v-model="formData.category" 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-form-item label="试题难度" label-width="80px">
+                  <el-select v-model="formData.difficulty" placeholder="请选择试题难度">
+                    <el-option label="简单" value="1" />
+                    <el-option label="中等" value="2" />
+                    <el-option label="困难" value="3" />
+                  </el-select>
+                </el-form-item>
+              </div>
+            </div>
+            
+            <!-- 题目（题干内容） -->
+            <div>
+              <h3 class="text-md font-medium text-gray-700 mb-3" style="border-left: 4px solid #007bff; padding-left: 10px;">题目（题干内容）</h3>
+              <TinymceEditor v-model="formData.content" :height="300" />
+            </div>
+            
+            <!-- 答案 -->
+            <div>
+              <h3 class="text-md font-medium text-gray-700 mb-3" style="border-left: 4px solid #007bff; padding-left: 10px;">答案</h3>
+              <div class="space-y-3">
+                <div>
+                  <TinymceEditor v-model="formData.correctAnswer" :height="200" />
+                </div>
+              </div>
+            </div>
+            
+            <!-- 答案解析 -->
+            <div>
+              <h3 class="text-md font-medium text-gray-700 mb-3"  style="border-left: 4px solid #007bff; padding-left: 10px;">答案解析</h3>
+              <div class="flex items-center gap-2 mb-2">
+                <el-button type="primary" plain size="small">
+                  引用
+                </el-button>
+              </div>
+              <TinymceEditor v-model="formData.analysis" :height="300" />
+            </div>
+            
+            <!-- 操作按钮 -->
+            <div class="flex justify-start gap-3 pt-4 border-t">
+              <el-button type="primary" @click="handleSaveAndContinue">
+                保存并继续添加
+              </el-button>
+              <el-button type="primary" plain @click="handleSaveAndClose">
+                保存并关闭
+              </el-button>
+            </div>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import TinymceEditor from '#/components/tinymce/src/editor.vue';
+import { Plus, Delete } from '@element-plus/icons-vue';
+
+const route = useRoute();
+const router = useRouter();
+const id = route.params.id as string;
+
+// 激活的标签页
+const activeTab = ref('1');
+
+// 表单数据
+const formData = ref({
+  category: '',
+  difficulty: '',
+  content: '',
+  options: [
+    { content: '' },
+    { content: '' }
+  ],
+  blanks: [
+    { answer: '' },
+    { answer: '' }
+  ],
+  correctAnswer: 'A',
+  correctAnswers: ['A'],
+  analysis: ''
+});
+
+// 添加选项
+const addOption = () => {
+  formData.value.options.push({ content: '' });
+};
+
+// 删除选项
+const removeOption = (index: number) => {
+  if (formData.value.options.length > 2) {
+    const optionLabel = String.fromCharCode(65 + index);
+    formData.value.options.splice(index, 1);
+    // 如果删除的是当前选中的答案，重新设置选中第一个选项
+    if (optionLabel === formData.value.correctAnswer) {
+      formData.value.correctAnswer = 'A';
+    }
+    // 如果删除的是多选题的正确答案之一，从数组中移除
+    if (formData.value.correctAnswers) {
+      formData.value.correctAnswers = formData.value.correctAnswers.filter(
+        answer => answer !== optionLabel
+      );
+    }
+  }
+};
+
+// 添加填空
+const addBlank = () => {
+  formData.value.blanks.push({ answer: '' });
+};
+
+// 删除填空
+const removeBlank = (index: number) => {
+  if (formData.value.blanks.length > 2) {
+    formData.value.blanks.splice(index, 1);
+  }
+};
+
+// 加载试题数据
+const loadQuestionData = async () => {
+  if (id) {
+    // 这里应该调用API获取试题详情
+    // 暂时使用模拟数据
+    formData.value = {
+      category: '1',
+      difficulty: '2',
+      content: '这是一道单选题测试题，用于展示编辑功能。',
+      options: [
+        { content: '选项A内容' },
+        { content: '选项B内容' },
+        { content: '选项C内容' }
+      ],
+      correctAnswer: 'B',
+      analysis: '这是答案解析，解释为什么选择B选项。'
+    };
+  }
+};
+
+// 保存并继续添加
+const handleSaveAndContinue = async () => {
+  // 这里应该调用API保存试题
+  console.log('保存试题:', formData.value);
+  // 保存成功后重置表单
+  formData.value = {
+    category: formData.value.category, // 保持分类和难度不变
+    difficulty: formData.value.difficulty,
+    content: '',
+    options: [
+      { content: '' },
+      { content: '' }
+    ],
+    blanks: [
+      { answer: '' },
+      { answer: '' }
+    ],
+    correctAnswer: 'A',
+    correctAnswers: ['A'],
+    analysis: ''
+  };
+};
+
+// 保存并关闭
+const handleSaveAndClose = async () => {
+  // 这里应该调用API保存试题
+  console.log('保存试题:', formData.value);
+  // 保存成功后返回上一页
+  router.push('/examManage/questionBank');
+};
+
+onMounted(() => {
+  loadQuestionData();
+});
+</script>
+
+<style scoped>
+.question-edit {
+  min-height: 100vh;
+  background-color: #f5f7fa;
+  padding: 20px;
+}
+
+/* 富文本编辑器样式 */
+:deep(.el-textarea) {
+  font-family: inherit;
+}
+
+:deep(.el-textarea__inner) {
+  border: none;
+  resize: none;
+  padding: 0;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+:deep(.el-textarea__inner:focus) {
+  box-shadow: none;
+}
+</style>
+
+
+
+
+

apps/web-ele/src/views/examManage/questionBank/cpn/questionPreview/index.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="question-preview">
+    <div class="p-4 bg-white rounded-lg shadow-sm">
+      <div class="flex items-center justify-between mb-4">
+        <h2 class="text-lg font-semibold text-gray-800">
+          试题预览
+        </h2>
+        <el-button @click="handleBack">返回列表</el-button>
+      </div>
+      
+      <!-- 试题预览内容 -->
+      <div v-if="questionData" class="question-content">
+        <div class="mb-4">
+          <h3 class="text-lg font-medium text-gray-900 mb-2">
+            试题内容
+          </h3>
+          <p class="text-gray-700">{{ questionData.content }}</p>
+        </div>
+        
+        <div class="mb-4">
+          <h3 class="text-lg font-medium text-gray-900 mb-2">
+            试题信息
+          </h3>
+          <el-descriptions :column="2" border>
+            <el-descriptions-item label="试题类型">
+              {{ getQuestionTypeText(questionData.questionType) }}
+            </el-descriptions-item>
+            <el-descriptions-item label="难度等级">
+              {{ getDifficultyText(questionData.difficulty) }}
+            </el-descriptions-item>
+            <el-descriptions-item label="所属章节">
+              {{ questionData.chapterName }}
+            </el-descriptions-item>
+            <el-descriptions-item label="分值">
+              {{ questionData.score }}分
+            </el-descriptions-item>
+          </el-descriptions>
+        </div>
+      </div>
+      
+      <div v-else class="text-center py-10 text-gray-500">
+        加载中...
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+const route = useRoute();
+const router = useRouter();
+const id = route.params.id as string;
+
+// 试题数据
+const questionData = ref(null);
+
+// 加载试题数据
+const loadQuestionData = async () => {
+  if (id) {
+    // 这里应该调用API获取试题详情
+    // 暂时使用模拟数据
+    questionData.value = {
+      id: id,
+      content: '这是一道测试题，用于预览功能展示。',
+      questionType: '1',
+      difficulty: '2',
+      chapterId: '1',
+      chapterName: '第一章 基础知识',
+      score: 10,
+    };
+  }
+};
+
+// 获取试题类型文本
+const getQuestionTypeText = (type) => {
+  const typeMap = {
+    '1': '单选题',
+    '2': '多选题',
+    '3': '判断题',
+    '4': '填空题',
+    '5': '简答题',
+  };
+  return typeMap[type] || '未知类型';
+};
+
+// 获取难度等级文本
+const getDifficultyText = (difficulty) => {
+  const difficultyMap = {
+    '1': '简单',
+    '2': '中等',
+    '3': '困难',
+  };
+  return difficultyMap[difficulty] || '未知难度';
+};
+
+// 返回列表
+const handleBack = () => {
+  router.push('/examManage/questionBank');
+};
+
+onMounted(() => {
+  loadQuestionData();
+});
+</script>
+
+<style scoped>
+.question-preview {
+  min-height: 100vh;
+  background-color: #f5f7fa;
+  padding: 20px;
+}
+
+.question-content {
+  line-height: 1.6;
+}
+</style>

apps/web-ele/src/views/examManage/questionBank/index.vue.bak

@@ -1,812 +0,0 @@
-<script lang="ts" setup>
-// 首先导入必要的依赖
-import { Page } from '@vben/common-ui';
-import { ref, onMounted, onUnmounted } from 'vue';
-
-// 定义分类接口
-interface Category {
-  id: number;
-  name: string;
-  updateTime: string;
-  count: number;
-}
-
-// 然后定义并初始化题库分类数据
-const categories = ref<Category[]>([
-  { id: 1, name: '人员管理题库', updateTime: '2025-11-11', count: 199 },
-  { id: 2, name: '运营管理题库', updateTime: '2025-11-11', count: 199 },
-  { id: 3, name: '消防知识题库', updateTime: '2025-11-11', count: 199 },
-  { id: 4, name: '日常操作题库', updateTime: '2025-11-11', count: 199 },
-  { id: 5, name: '安全管理题库', updateTime: '2025-11-11', count: 199 },
-  { id: 6, name: '质量管理题库', updateTime: '2025-11-11', count: 199 },
-  { id: 7, name: '设备维护题库', updateTime: '2025-11-11', count: 199 },
-  { id: 8, name: '环境管理题库', updateTime: '2025-11-11', count: 199 }
-]);
-
-// 模拟题目数据
-const questions = ref([
-  {
-    id: 1,
-    type: 'single_choice',
-    content: '1.题目题目题目题目题目题目题目题目题目题目。',
-    options: ['选项A', '选项B', '选项C', '选项D'],
-    answer: '选项A'
-  },
-  {
-    id: 2,
-    type: 'single_choice',
-    content: '2.题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目。',
-    options: ['选项A', '选项B', '选项C', '选项D'],
-    answer: '选项A'
-  },
-  {
-    id: 3,
-    type: 'multiple_choice',
-    content: '3.题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目。',
-    options: ['选项A', '选项B', '选项C', '选项D'],
-    answer: '选项A、选项B、选项C'
-  },
-  {
-    id: 4,
-    type: 'multiple_choice',
-    content: '4.题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目。',
-    options: ['选项A', '选项B', '选项C', '选项D'],
-    answer: '选项A、选项B、选项C'
-  },
-  {
-    id: 5,
-    type: 'fill_blank',
-    content: '5.题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目。',
-    answer: '答案答案答案答案答案答案答案答案答案 ______ 答案答案答案答案答案答案答案答案答案答案答案答案。'
-  },
-  {
-    id: 6,
-    type: 'fill_blank',
-    content: '6.题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目。',
-    answer: '答案答案答案答案答案答案答案 ______、______、______ 答案答案答案答案答案答案答案。'
-  },
-  {
-    id: 7,
-    type: 'short_answer',
-    content: '7.题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目。',
-    answer: '答案答案答案答案答案...'
-  }
-]);
-
-// 分页数据
-const currentPage = ref(1);
-const pageSize = ref(7);
-const total = ref(50);
-
-// 填空题替换方法
-const replaceBlanks = (content : string) => {
-  return content.replace(/______/g, '<input type="text" class="blank-input" />');
-};
-
-// 分页方法
-const handlePageChange = (page: number) => {
-  currentPage.value = page;
-  // 这里可以添加加载数据的逻辑
-};
-
-// 弹窗相关
-const isModalVisible = ref(false);
-const modalTitle = ref('');
-const currentQuestion = ref(null);
-
-// 选中的题库分类
-const selectedCategory = ref(1);
-
-// 选择题库分类
-const selectCategory = (id: number) => {
-  selectedCategory.value = id;
-};
-
-// 获取题型标签
-const getQuestionTypeLabel = (type: string): string => {
-  const typeMap: any = {
-    'single_choice': '(单项选择题)',
-    'multiple_choice': '(多项选择题)',
-    'fill_blank': '(填空题)',
-    'short_answer': '(简答题)'
-  };
-  return typeMap[type] || '';
-};
-
-// 打开新增题目弹窗
-const openAddModal = () => {
-  modalTitle.value = '添加题目';
-  currentQuestion.value = null;
-  isModalVisible.value = true;
-};
-
-// 打开编辑题目弹窗
-const openEditModal = (question: any) => {
-  modalTitle.value = '编辑题目';
-  currentQuestion.value = { ...question };
-  isModalVisible.value = true;
-};
-
-// 关闭弹窗
-const closeModal = () => {
-  isModalVisible.value = false;
-  currentQuestion.value = null;
-};
-
-// 滚动加载相关
-const categoryListRef = ref<HTMLElement | null>(null);
-const isLoading = ref(false);
-const hasMore = ref(true);
-
-// 滚动事件处理
-const handleScroll = (e: Event) => {
-  const target = e.target as HTMLElement;
-  const { scrollTop, scrollHeight, clientHeight } = target;
-  
-  // 当滚动到底部20px内时触发加载
-  if (scrollTop + clientHeight >= scrollHeight - 20 && !isLoading.value && hasMore.value) {
-    loadMoreCategories();
-  }
-};
-
-// 加载更多分类
-const loadMoreCategories = async () => {
-  if (isLoading.value || !hasMore.value) return;
-  
-  isLoading.value = true;
-  
-  // 模拟异步加载
-  await new Promise(resolve => setTimeout(resolve, 1000));
-  
-  // 添加新的模拟数据
-  const newCategories = Array.from({ length: 4 }, (_, index) => ({
-    id: categories.value.length + index + 1,
-    name: `新题库${categories.value.length + index + 1}`,
-    updateTime: '2025-11-11',
-    count: 199
-  }));
-  
-  categories.value = [...categories.value, ...newCategories];
-  
-  // 模拟没有更多数据
-  if (categories.value.length >= 20) {
-    hasMore.value = false;
-  }
-  
-  isLoading.value = false;
-};
-
-// 组件挂载时添加滚动监听
-onMounted(() => {
-  if (categoryListRef.value) {
-    categoryListRef.value.addEventListener('scroll', handleScroll);
-  }
-});
-
-// 组件卸载时移除滚动监听
-onUnmounted(() => {
-  if (categoryListRef.value) {
-    categoryListRef.value.removeEventListener('scroll', handleScroll);
-  }
-});
-
-
-</script>
-
-<template>
-  <Page>
-    <div class="question-bank-container">
-      <!-- 左侧题库分类 -->
-      <div class="left-panel">
-        <div class="panel-header">
-          <h2>题库分类</h2>
-          <button class="add-btn">添加题目类型</button>
-        </div>
-        <div class="category-list" ref="categoryListRef">
-          <div 
-            v-for="category in categories" 
-            :key="category.id" 
-            class="category-card"
-            :class="{ active: selectedCategory === category.id }"
-            @click="selectCategory(category.id)"
-          >
-            <div class="category-name">{{ category.name }}</div>
-            <div class="category-info">
-              <span>更新时间: {{ category.updateTime }}</span>
-              <span>题库数量: {{ category.count }}</span>
-            </div>
-          </div>
-          
-          <!-- 加载更多提示 -->
-          <div v-if="isLoading" class="loading">加载中...</div>
-          <div v-else-if="!hasMore" class="no-more">没有更多数据了</div>
-        </div>
-      </div>
-      
-      <!-- 右侧题目列表 -->
-      <div class="right-panel">
-        <div class="panel-header">
-          <h2>题目列表</h2>
-          <button class="add-btn">添加题目</button>
-        </div>
-        <div class="question-list">
-          <div 
-            v-for="question in questions" 
-            :key="question.id" 
-            class="question-item"
-          >
-            <!-- 题目左侧内容 -->
-            <div class="question-content">
-              <div class="question-text" :data-type="getQuestionTypeLabel(question.type)">{{ question.content }}</div>
-              
-              <!-- 单选题 -->
-              <div v-if="question.type === 'single_choice'" class="options">
-                <div v-for="(option, index) in question.options" :key="index" class="option-item">
-                  <input type="radio" :id="`q${question.id}_option${index}`" :name="`q${question.id}`" />
-                  <label :for="`q${question.id}_option${index}`">{{ option }}</label>
-                </div>
-              </div>
-              
-              <!-- 多选题 -->
-              <div v-else-if="question.type === 'multiple_choice'" class="options">
-                <div v-for="(option, index) in question.options" :key="index" class="option-item">
-                  <input type="checkbox" :id="`q${question.id}_option${index}`" />
-                  <label :for="`q${question.id}_option${index}`">{{ option }}</label>
-                </div>
-              </div>
-              
-              <!-- 填空题 -->
-              <div v-else-if="question.type === 'fill_blank'" class="fill-blank">
-                 <div v-html="replaceBlanks(question.content)"></div>
-              </div>
-              
-              <!-- 简答题 -->
-              <div v-else-if="question.type === 'short_answer'" class="short-answer">
-                <textarea class="answer-input" rows="4" placeholder="请输入答案"></textarea>
-              </div>
-            </div>
-            
-            <!-- 题目右侧内容 -->
-            <div class="question-right">
-              <div class="answer">
-                <span class="answer-label">答案：</span>
-                <span class="answer-content">{{ question.answer }}</span>
-              </div>
-              
-              <div class="question-actions">
-                <button class="edit-btn" @click="openEditModal(question)">编辑</button>
-                <button class="quote-btn">引用</button>
-                <button class="delete-btn">删除</button>
-              </div>
-            </div>
-          </div>
-          
-          <!-- 分页 -->
-          <div class="pagination">
-            <span class="total">共 {{ total }} 条</span>
-            <div class="page-numbers">
-              <button class="page-btn" :disabled="currentPage === 1">&lt;</button>
-              <button 
-                v-for="page in 5" 
-                :key="page" 
-                class="page-btn" 
-                :class="{ active: page === currentPage }"
-                @click="handlePageChange(page)"
-              >
-                {{ page }}
-              </button>
-              <button class="page-btn">&gt;</button>
-            </div>
-            <div class="page-input">
-              <span>跳至</span>
-              <input type="number" class="page-input-box" :value="currentPage" min="1" :max="Math.ceil(total/pageSize)" />
-              <span>页</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    
-    <!-- 弹窗组件 -->
-    <div v-if="isModalVisible" class="modal-overlay">
-      <div class="modal">
-        <div class="modal-header">
-          <h3>{{ modalTitle }}</h3>
-          <button class="close-btn" @click="closeModal">&times;</button>
-        </div>
-        <div class="modal-body">
-          <!-- 弹窗内容先为空，后续可以根据需要添加表单 -->
-          <div class="empty-content">
-            <p>题目编辑表单将在这里实现</p>
-          </div>
-        </div>
-        <div class="modal-footer">
-          <button class="cancel-btn" @click="closeModal">取消</button>
-          <button class="confirm-btn">确定</button>
-        </div>
-      </div>
-    </div>
-  </Page>
-</template>
-
-<style lang="scss" scoped>
-.question-bank-container {
-  display: grid;
-  grid-template-columns: 300px 1fr;
-  gap: 20px;
-  padding: 16px;
-  height: calc(100vh - 80px);
-  overflow: hidden;
-}
-
-.left-panel,
-.right-panel {
-  background-color: #ffffff;
-  border-radius: 6px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  display: flex;
-  flex-direction: column;
-}
-
-.panel-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px;
-  border-bottom: 1px solid #e8e8e8;
-}
-
-.panel-header h2 {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 600;
-  color: #333;
-}
-
-.add-btn {
-  padding: 6px 16px;
-  background-color: #1890ff;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-  transition: background-color 0.3s;
-  
-  &:hover {
-    background-color: #40a9ff;
-  }
-}
-
-.category-list,
-.question-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 16px;
-}
-
-.category-card {
-  background-color: #f5f5f5;
-  border-radius: 6px;
-  padding: 12px;
-  margin-bottom: 12px;
-  cursor: pointer;
-  transition: all 0.3s;
-  border: 2px solid transparent;
-  
-  &:hover {
-    background-color: #e6f7ff;
-    box-shadow: 0 2px 8px rgba(24, 144, 255, 0.15);
-  }
-  
-  &.active {
-    background-color: #e6f7ff;
-    border-color: #1890ff;
-    box-shadow: 0 2px 8px rgba(24, 144, 255, 0.15);
-  }
-}
-
-.category-name {
-  font-weight: 600;
-  color: #333;
-  margin-bottom: 8px;
-  font-size: 14px;
-}
-
-.category-info {
-  display: flex;
-  flex-direction: column;
-  font-size: 12px;
-  color: #666;
-  gap: 4px;
-}
-
-.loading,
-.no-more {
-  text-align: center;
-  padding: 12px;
-  color: #999;
-  font-size: 14px;
-}
-
-/* 题目列表样式 */
-.question-item {
-  display: flex;
-  border: 1px solid #e8e8e8;
-  border-radius: 6px;
-  margin-bottom: 16px;
-  overflow: hidden;
-  background-color: #fff;
-  transition: box-shadow 0.3s;
-  
-  &:hover {
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  }
-}
-
-.question-content {
-  flex: 1;
-  padding: 16px;
-  border-right: 1px solid #e8e8e8;
-}
-
-.question-text {
-  font-size: 14px;
-  line-height: 1.5;
-  margin-bottom: 12px;
-  color: #333;
-  
-  /* 添加题型标签 */
-  &::after {
-    content: attr(data-type);
-    font-size: 12px;
-    padding: 2px 8px;
-    border-radius: 4px;
-    background-color: #e8f4ff;
-    color: #1890ff;
-    margin-left: 8px;
-  }
-}
-
-.options {
-  display: flex;
-  gap: 50px;
-}
-
-.option-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 14px;
-  color: #666;
-}
-
-.fill-blank {
-  margin-top: 8px;
-  
-  .blank-input {
-    width: 100px;
-    margin: 0 4px;
-    padding: 4px 8px;
-    border: 1px solid #d9d9d9;
-    border-radius: 4px;
-    font-size: 14px;
-  }
-}
-
-.short-answer {
-  margin-top: 8px;
-  
-  .answer-input {
-    width: 100%;
-    padding: 8px;
-    border: 1px solid #d9d9d9;
-    border-radius: 4px;
-    font-size: 14px;
-    resize: vertical;
-  }
-}
-
-.question-right {
-  width: 300px;
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  background-color: #fafafa;
-}
-
-.answer {
-  margin-bottom: 16px;
-  
-  .answer-label {
-    font-weight: 600;
-    color: #333;
-    font-size: 14px;
-  }
-  
-  .answer-content {
-    color: #666;
-    font-size: 14px;
-    word-break: break-word;
-  }
-}
-
-.question-actions {
-  display: flex;
-  gap: 8px;
-}
-
-.edit-btn,
-.quote-btn,
-.delete-btn {
-  padding: 6px 12px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-  transition: background-color 0.3s;
-}
-
-.edit-btn {
-  background-color: #1890ff;
-  color: white;
-  
-  &:hover {
-    background-color: #40a9ff;
-  }
-}
-
-.quote-btn {
-  background-color: #52c41a;
-  color: white;
-  
-  &:hover {
-    background-color: #73d13d;
-  }
-}
-
-.delete-btn {
-  background-color: #ff4d4f;
-  color: white;
-  
-  &:hover {
-    background-color: #ff7875;
-  }
-}
-
-/* 分页样式 */
-.pagination {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 0;
-  border-top: 1px solid #e8e8e8;
-  margin-top: 16px;
-}
-
-.total {
-  font-size: 14px;
-  color: #666;
-}
-
-.page-numbers {
-  display: flex;
-  gap: 4px;
-}
-
-.page-btn {
-  padding: 4px 12px;
-  border: 1px solid #d9d9d9;
-  background-color: white;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-  transition: all 0.3s;
-  
-  &:hover {
-    border-color: #1890ff;
-    color: #1890ff;
-  }
-  
-  &.active {
-    background-color: #1890ff;
-    color: white;
-    border-color: #1890ff;
-  }
-  
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    
-    &:hover {
-      border-color: #d9d9d9;
-      color: #666;
-    }
-  }
-}
-
-.page-input {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 14px;
-  color: #666;
-  
-  .page-input-box {
-    width: 50px;
-    padding: 4px 8px;
-    border: 1px solid #d9d9d9;
-    border-radius: 4px;
-    font-size: 14px;
-    text-align: center;
-  }
-}
-
-/* 滚动条样式优化 */
-.category-list::-webkit-scrollbar,
-.question-list::-webkit-scrollbar,
-.modal::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-.category-list::-webkit-scrollbar-track,
-.question-list::-webkit-scrollbar-track,
-.modal::-webkit-scrollbar-track {
-  background: #f1f1f1;
-  border-radius: 4px;
-}
-
-.category-list::-webkit-scrollbar-thumb,
-.question-list::-webkit-scrollbar-thumb,
-.modal::-webkit-scrollbar-thumb {
-  background: #c1c1c1;
-  border-radius: 4px;
-}
-
-.category-list::-webkit-scrollbar-thumb:hover,
-.question-list::-webkit-scrollbar-thumb:hover,
-.modal::-webkit-scrollbar-thumb:hover {
-  background: #a8a8a8;
-}
-
-/* 弹窗样式 */
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 1000;
-  animation: fadeIn 0.3s ease;
-}
-
-.modal {
-  background-color: white;
-  border-radius: 8px;
-  width: 600px;
-  max-width: 90%;
-  max-height: 90vh;
-  overflow-y: auto;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-  animation: slideUp 0.3s ease;
-}
-
-/* 动画效果 */
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-@keyframes slideUp {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.modal {
-  background-color: white;
-  border-radius: 8px;
-  width: 600px;
-  max-width: 90%;
-  max-height: 90vh;
-  overflow-y: auto;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-}
-
-.modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 20px;
-  border-bottom: 1px solid #e8e8e8;
-}
-
-.modal-header h3 {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 600;
-  color: #333;
-}
-
-.close-btn {
-  background: none;
-  border: none;
-  font-size: 24px;
-  color: #999;
-  cursor: pointer;
-  padding: 0;
-  width: 32px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 4px;
-  transition: all 0.3s;
-  
-  &:hover {
-    background-color: #f5f5f5;
-    color: #666;
-  }
-}
-
-.modal-body {
-  padding: 20px;
-}
-
-.empty-content {
-  text-align: center;
-  padding: 40px 20px;
-  color: #999;
-  font-size: 14px;
-}
-
-.modal-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-  padding: 16px 20px;
-  border-top: 1px solid #e8e8e8;
-  background-color: #fafafa;
-}
-
-.cancel-btn,
-.confirm-btn {
-  padding: 8px 20px;
-  border: 1px solid #d9d9d9;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-  transition: all 0.3s;
-}
-
-.cancel-btn {
-  background-color: white;
-  color: #666;
-  
-  &:hover {
-    border-color: #1890ff;
-    color: #1890ff;
-  }
-}
-
-.confirm-btn {
-  background-color: #1890ff;
-  color: white;
-  border-color: #1890ff;
-  
-  &:hover {
-    background-color: #40a9ff;
-  }
-}
-</style>

apps/web-ele/src/views/examManage/questionBank/index.vue.old

@@ -1,810 +0,0 @@
-<script setup>
-// 首先导入必要的依赖
-import { Page } from '@vben/common-ui';
-import { ref, onMounted, onUnmounted } from 'vue';
-
-// 定义并初始化题库分类数据
-const categories = ref([
-  { id: 1, name: '人员管理题库', updateTime: '2025-11-11', count: 199 },
-  { id: 2, name: '运营管理题库', updateTime: '2025-11-11', count: 199 },
-  { id: 3, name: '消防知识题库', updateTime: '2025-11-11', count: 199 },
-  { id: 4, name: '日常操作题库', updateTime: '2025-11-11', count: 199 },
-  { id: 5, name: '安全管理题库', updateTime: '2025-11-11', count: 199 },
-  { id: 6, name: '质量管理题库', updateTime: '2025-11-11', count: 199 },
-  { id: 7, name: '设备维护题库', updateTime: '2025-11-11', count: 199 },
-  { id: 8, name: '环境管理题库', updateTime: '2025-11-11', count: 199 }
-]);
-
-// 模拟题目数据
-const questions = ref([
-  {
-    id: 1,
-    type: 'single_choice',
-    content: '1.题目题目题目题目题目题目题目题目题目题目。',
-    options: ['选项A', '选项B', '选项C', '选项D'],
-    answer: '选项A'
-  },
-  {
-    id: 2,
-    type: 'single_choice',
-    content: '2.题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目。',
-    options: ['选项A', '选项B', '选项C', '选项D'],
-    answer: '选项A'
-  },
-  {
-    id: 3,
-    type: 'multiple_choice',
-    content: '3.题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目。',
-    options: ['选项A', '选项B', '选项C', '选项D'],
-    answer: '选项A、选项B、选项C'
-  },
-  {
-    id: 4,
-    type: 'multiple_choice',
-    content: '4.题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目。',
-    options: ['选项A', '选项B', '选项C', '选项D'],
-    answer: '选项A、选项B、选项C'
-  },
-  {
-    id: 5,
-    type: 'fill_blank',
-    content: '5.题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目。',
-    answer: '答案答案答案答案答案答案答案答案答案 ______ 答案答案答案答案答案答案答案答案答案答案答案答案。'
-  },
-  {
-    id: 6,
-    type: 'fill_blank',
-    content: '6.题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目。',
-    answer: '答案答案答案答案答案答案答案 ______、______、______ 答案答案答案答案答案答案答案。'
-  },
-  {
-    id: 7,
-    type: 'short_answer',
-    content: '7.题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目。',
-    answer: '答案答案答案答案答案...'
-  }
-]);
-
-// 分页数据
-const currentPage = ref(1);
-const pageSize = ref(7);
-const total = ref(50);
-
-// 填空题替换方法
-const replaceBlanks = (content) => {
-  return content.replace(/______/g, '<input type="text" class="blank-input" />');
-};
-
-// 分页方法
-const handlePageChange = (page) => {
-  currentPage.value = page;
-  // 这里可以添加加载数据的逻辑
-};
-
-// 弹窗相关
-const isModalVisible = ref(false);
-const modalTitle = ref('');
-const currentQuestion = ref(null);
-
-// 选中的题库分类
-const selectedCategory = ref(1);
-
-// 选择题库分类
-const selectCategory = (id) => {
-  selectedCategory.value = id;
-};
-
-// 获取题型标签
-const getQuestionTypeLabel = (type) => {
-  const typeMap = {
-    'single_choice': '(单项选择题)',
-    'multiple_choice': '(多项选择题)',
-    'fill_blank': '(填空题)',
-    'short_answer': '(简答题)'
-  };
-  return typeMap[type] || '';
-};
-
-// 打开新增题目弹窗
-const openAddModal = () => {
-  modalTitle.value = '添加题目';
-  currentQuestion.value = null;
-  isModalVisible.value = true;
-};
-
-// 打开编辑题目弹窗
-const openEditModal = (question: any) => {
-  modalTitle.value = '编辑题目';
-  currentQuestion.value = { ...question };
-  isModalVisible.value = true;
-};
-
-// 关闭弹窗
-const closeModal = () => {
-  isModalVisible.value = false;
-  currentQuestion.value = null;
-};
-
-// 滚动加载相关
-const categoryListRef = ref<HTMLElement | null>(null);
-const isLoading = ref(false);
-const hasMore = ref(true);
-
-// 滚动事件处理
-const handleScroll = (e: Event) => {
-  const target = e.target as HTMLElement;
-  const { scrollTop, scrollHeight, clientHeight } = target;
-  
-  // 当滚动到底部20px内时触发加载
-  if (scrollTop + clientHeight >= scrollHeight - 20 && !isLoading.value && hasMore.value) {
-    loadMoreCategories();
-  }
-};
-
-// 加载更多分类
-const loadMoreCategories = async () => {
-  if (isLoading.value || !hasMore.value) return;
-  
-  isLoading.value = true;
-  
-  // 模拟异步加载
-  await new Promise(resolve => setTimeout(resolve, 1000));
-  
-  // 添加新的模拟数据
-  const newCategories = Array.from({ length: 4 }, (_, index) => ({
-    id: categories.value.length + index + 1,
-    name: `新题库${categories.value.length + index + 1}`,
-    updateTime: '2025-11-11',
-    count: 199
-  }));
-  
-  categories.value = [...categories.value, ...newCategories];
-  
-  // 模拟没有更多数据
-  if (categories.value.length >= 20) {
-    hasMore.value = false;
-  }
-  
-  isLoading.value = false;
-};
-
-// 组件挂载时添加滚动监听
-onMounted(() => {
-  if (categoryListRef.value) {
-    categoryListRef.value.addEventListener('scroll', handleScroll);
-  }
-});
-
-// 组件卸载时移除滚动监听
-onUnmounted(() => {
-  if (categoryListRef.value) {
-    categoryListRef.value.removeEventListener('scroll', handleScroll);
-  }
-});
-
-// 显式暴露变量给模板
-defineExpose({
-  categories,
-  selectedCategory,
-  selectCategory
-});
-
-</script>
-
-<template>
-  <Page>
-    <div class="question-bank-container">
-      <!-- 左侧题库分类 -->
-      <div class="left-panel">
-        <div class="panel-header">
-          <h2>题库分类</h2>
-          <button class="add-btn">添加题目类型</button>
-        </div>
-        <div class="category-list" ref="categoryListRef">
-          <div 
-            v-for="category in categories"
-            :key="category.id" 
-            class="category-card"
-            :class="{ active: selectedCategory === category.id }"
-            @click="selectCategory(category.id)"
-          >
-            <div class="category-name">{{ category.name }}</div>
-            <div class="category-info">
-              <span>更新时间: {{ category.updateTime }}</span>
-              <span>题库数量: {{ category.count }}</span>
-            </div>
-          </div>
-          
-          <!-- 加载更多提示 -->
-          <div v-if="isLoading" class="loading">加载中...</div>
-          <div v-else-if="!hasMore" class="no-more">没有更多数据了</div>
-        </div>
-      </div>
-      
-      <!-- 右侧题目列表 -->
-      <div class="right-panel">
-        <div class="panel-header">
-          <h2>题目列表</h2>
-          <button class="add-btn">添加题目</button>
-        </div>
-        <div class="question-list">
-          <div 
-            v-for="question in questions" 
-            :key="question.id" 
-            class="question-item"
-          >
-            <!-- 题目左侧内容 -->
-            <div class="question-content">
-              <div class="question-text" :data-type="getQuestionTypeLabel(question.type)">{{ question.content }}</div>
-              
-              <!-- 单选题 -->
-              <div v-if="question.type === 'single_choice'" class="options">
-                <div v-for="(option, index) in question.options" :key="index" class="option-item">
-                  <input type="radio" :id="`q${question.id}_option${index}`" :name="`q${question.id}`" />
-                  <label :for="`q${question.id}_option${index}`">{{ option }}</label>
-                </div>
-              </div>
-              
-              <!-- 多选题 -->
-              <div v-else-if="question.type === 'multiple_choice'" class="options">
-                <div v-for="(option, index) in question.options" :key="index" class="option-item">
-                  <input type="checkbox" :id="`q${question.id}_option${index}`" />
-                  <label :for="`q${question.id}_option${index}`">{{ option }}</label>
-                </div>
-              </div>
-              
-              <!-- 填空题 -->
-              <div v-else-if="question.type === 'fill_blank'" class="fill-blank">
-                 <div v-html="replaceBlanks(question.content)"></div>
-              </div>
-              
-              <!-- 简答题 -->
-              <div v-else-if="question.type === 'short_answer'" class="short-answer">
-                <textarea class="answer-input" rows="4" placeholder="请输入答案"></textarea>
-              </div>
-            </div>
-            
-            <!-- 题目右侧内容 -->
-            <div class="question-right">
-              <div class="answer">
-                <span class="answer-label">答案：</span>
-                <span class="answer-content">{{ question.answer }}</span>
-              </div>
-              
-              <div class="question-actions">
-                <button class="edit-btn" @click="openEditModal(question)">编辑</button>
-                <button class="quote-btn">引用</button>
-                <button class="delete-btn">删除</button>
-              </div>
-            </div>
-          </div>
-          
-          <!-- 分页 -->
-          <div class="pagination">
-            <span class="total">共 {{ total }} 条</span>
-            <div class="page-numbers">
-              <button class="page-btn" :disabled="currentPage === 1">&lt;</button>
-              <button 
-                v-for="page in 5" 
-                :key="page" 
-                class="page-btn" 
-                :class="{ active: page === currentPage }"
-                @click="handlePageChange(page)"
-              >
-                {{ page }}
-              </button>
-              <button class="page-btn">&gt;</button>
-            </div>
-            <div class="page-input">
-              <span>跳至</span>
-              <input type="number" class="page-input-box" :value="currentPage" min="1" :max="Math.ceil(total/pageSize)" />
-              <span>页</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    
-    <!-- 弹窗组件 -->
-    <div v-if="isModalVisible" class="modal-overlay">
-      <div class="modal">
-        <div class="modal-header">
-          <h3>{{ modalTitle }}</h3>
-          <button class="close-btn" @click="closeModal">&times;</button>
-        </div>
-        <div class="modal-body">
-          <!-- 弹窗内容先为空，后续可以根据需要添加表单 -->
-          <div class="empty-content">
-            <p>题目编辑表单将在这里实现</p>
-          </div>
-        </div>
-        <div class="modal-footer">
-          <button class="cancel-btn" @click="closeModal">取消</button>
-          <button class="confirm-btn">确定</button>
-        </div>
-      </div>
-    </div>
-  </Page>
-</template>
-
-<style lang="scss" scoped>
-.question-bank-container {
-  display: grid;
-  grid-template-columns: 300px 1fr;
-  gap: 20px;
-  padding: 16px;
-  height: calc(100vh - 80px);
-  overflow: hidden;
-}
-
-.left-panel,
-.right-panel {
-  background-color: #ffffff;
-  border-radius: 6px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  display: flex;
-  flex-direction: column;
-}
-
-.panel-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px;
-  border-bottom: 1px solid #e8e8e8;
-}
-
-.panel-header h2 {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 600;
-  color: #333;
-}
-
-.add-btn {
-  padding: 6px 16px;
-  background-color: #1890ff;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-  transition: background-color 0.3s;
-  
-  &:hover {
-    background-color: #40a9ff;
-  }
-}
-
-.category-list,
-.question-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 16px;
-}
-
-.category-card {
-  background-color: #f5f5f5;
-  border-radius: 6px;
-  padding: 12px;
-  margin-bottom: 12px;
-  cursor: pointer;
-  transition: all 0.3s;
-  border: 2px solid transparent;
-  
-  &:hover {
-    background-color: #e6f7ff;
-    box-shadow: 0 2px 8px rgba(24, 144, 255, 0.15);
-  }
-  
-  &.active {
-    background-color: #e6f7ff;
-    border-color: #1890ff;
-    box-shadow: 0 2px 8px rgba(24, 144, 255, 0.15);
-  }
-}
-
-.category-name {
-  font-weight: 600;
-  color: #333;
-  margin-bottom: 8px;
-  font-size: 14px;
-}
-
-.category-info {
-  display: flex;
-  flex-direction: column;
-  font-size: 12px;
-  color: #666;
-  gap: 4px;
-}
-
-.loading,
-.no-more {
-  text-align: center;
-  padding: 12px;
-  color: #999;
-  font-size: 14px;
-}
-
-/* 题目列表样式 */
-.question-item {
-  display: flex;
-  border: 1px solid #e8e8e8;
-  border-radius: 6px;
-  margin-bottom: 16px;
-  overflow: hidden;
-  background-color: #fff;
-  transition: box-shadow 0.3s;
-  
-  &:hover {
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  }
-}
-
-.question-content {
-  flex: 1;
-  padding: 16px;
-  border-right: 1px solid #e8e8e8;
-}
-
-.question-text {
-  font-size: 14px;
-  line-height: 1.5;
-  margin-bottom: 12px;
-  color: #333;
-  
-  /* 添加题型标签 */
-  &::after {
-    content: attr(data-type);
-    font-size: 12px;
-    padding: 2px 8px;
-    border-radius: 4px;
-    background-color: #e8f4ff;
-    color: #1890ff;
-    margin-left: 8px;
-  }
-}
-
-.options {
-  display: flex;
-  gap: 50px;
-}
-
-.option-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 14px;
-  color: #666;
-}
-
-.fill-blank {
-  margin-top: 8px;
-  
-  .blank-input {
-    width: 100px;
-    margin: 0 4px;
-    padding: 4px 8px;
-    border: 1px solid #d9d9d9;
-    border-radius: 4px;
-    font-size: 14px;
-  }
-}
-
-.short-answer {
-  margin-top: 8px;
-  
-  .answer-input {
-    width: 100%;
-    padding: 8px;
-    border: 1px solid #d9d9d9;
-    border-radius: 4px;
-    font-size: 14px;
-    resize: vertical;
-  }
-}
-
-.question-right {
-  width: 300px;
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  background-color: #fafafa;
-}
-
-.answer {
-  margin-bottom: 16px;
-  
-  .answer-label {
-    font-weight: 600;
-    color: #333;
-    font-size: 14px;
-  }
-  
-  .answer-content {
-    color: #666;
-    font-size: 14px;
-    word-break: break-word;
-  }
-}
-
-.question-actions {
-  display: flex;
-  gap: 8px;
-}
-
-.edit-btn,
-.quote-btn,
-.delete-btn {
-  padding: 6px 12px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-  transition: background-color 0.3s;
-}
-
-.edit-btn {
-  background-color: #1890ff;
-  color: white;
-  
-  &:hover {
-    background-color: #40a9ff;
-  }
-}
-
-.quote-btn {
-  background-color: #52c41a;
-  color: white;
-  
-  &:hover {
-    background-color: #73d13d;
-  }
-}
-
-.delete-btn {
-  background-color: #ff4d4f;
-  color: white;
-  
-  &:hover {
-    background-color: #ff7875;
-  }
-}
-
-/* 分页样式 */
-.pagination {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 0;
-  border-top: 1px solid #e8e8e8;
-  margin-top: 16px;
-}
-
-.total {
-  font-size: 14px;
-  color: #666;
-}
-
-.page-numbers {
-  display: flex;
-  gap: 4px;
-}
-
-.page-btn {
-  padding: 4px 12px;
-  border: 1px solid #d9d9d9;
-  background-color: white;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-  transition: all 0.3s;
-  
-  &:hover {
-    border-color: #1890ff;
-    color: #1890ff;
-  }
-  
-  &.active {
-    background-color: #1890ff;
-    color: white;
-    border-color: #1890ff;
-  }
-  
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    
-    &:hover {
-      border-color: #d9d9d9;
-      color: #666;
-    }
-  }
-}
-
-.page-input {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 14px;
-  color: #666;
-  
-  .page-input-box {
-    width: 50px;
-    padding: 4px 8px;
-    border: 1px solid #d9d9d9;
-    border-radius: 4px;
-    font-size: 14px;
-    text-align: center;
-  }
-}
-
-/* 滚动条样式优化 */
-.category-list::-webkit-scrollbar,
-.question-list::-webkit-scrollbar,
-.modal::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-.category-list::-webkit-scrollbar-track,
-.question-list::-webkit-scrollbar-track,
-.modal::-webkit-scrollbar-track {
-  background: #f1f1f1;
-  border-radius: 4px;
-}
-
-.category-list::-webkit-scrollbar-thumb,
-.question-list::-webkit-scrollbar-thumb,
-.modal::-webkit-scrollbar-thumb {
-  background: #c1c1c1;
-  border-radius: 4px;
-}
-
-.category-list::-webkit-scrollbar-thumb:hover,
-.question-list::-webkit-scrollbar-thumb:hover,
-.modal::-webkit-scrollbar-thumb:hover {
-  background: #a8a8a8;
-}
-
-/* 弹窗样式 */
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 1000;
-  animation: fadeIn 0.3s ease;
-}
-
-.modal {
-  background-color: white;
-  border-radius: 8px;
-  width: 600px;
-  max-width: 90%;
-  max-height: 90vh;
-  overflow-y: auto;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-  animation: slideUp 0.3s ease;
-}
-
-/* 动画效果 */
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-@keyframes slideUp {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.modal {
-  background-color: white;
-  border-radius: 8px;
-  width: 600px;
-  max-width: 90%;
-  max-height: 90vh;
-  overflow-y: auto;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-}
-
-.modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 20px;
-  border-bottom: 1px solid #e8e8e8;
-}
-
-.modal-header h3 {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 600;
-  color: #333;
-}
-
-.close-btn {
-  background: none;
-  border: none;
-  font-size: 24px;
-  color: #999;
-  cursor: pointer;
-  padding: 0;
-  width: 32px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 4px;
-  transition: all 0.3s;
-  
-  &:hover {
-    background-color: #f5f5f5;
-    color: #666;
-  }
-}
-
-.modal-body {
-  padding: 20px;
-}
-
-.empty-content {
-  text-align: center;
-  padding: 40px 20px;
-  color: #999;
-  font-size: 14px;
-}
-
-.modal-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-  padding: 16px 20px;
-  border-top: 1px solid #e8e8e8;
-  background-color: #fafafa;
-}
-
-.cancel-btn,
-.confirm-btn {
-  padding: 8px 20px;
-  border: 1px solid #d9d9d9;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-  transition: all 0.3s;
-}
-
-.cancel-btn {
-  background-color: white;
-  color: #666;
-  
-  &:hover {
-    border-color: #1890ff;
-    color: #1890ff;
-  }
-}
-
-.confirm-btn {
-  background-color: #1890ff;
-  color: white;
-  border-color: #1890ff;
-  
-  &:hover {
-    background-color: #40a9ff;
-  }
-}
-</style>

apps/web-ele/src/views/examManage/questionBank/test.js

@@ -1,31 +0,0 @@
-import { ref } from 'vue';
-
-// 定义并初始化题库分类数据
-const categories = ref([
-  { id: 1, name: '人员管理题库', updateTime: '2025-11-11', count: 199 },
-  { id: 2, name: '运营管理题库', updateTime: '2025-11-11', count: 199 },
-  { id: 3, name: '消防知识题库', updateTime: '2025-11-11', count: 199 },
-  { id: 4, name: '日常操作题库', updateTime: '2025-11-11', count: 199 },
-  { id: 5, name: '安全管理题库', updateTime: '2025-11-11', count: 199 },
-  { id: 6, name: '质量管理题库', updateTime: '2025-11-11', count: 199 },
-  { id: 7, name: '设备维护题库', updateTime: '2025-11-11', count: 199 },
-  { id: 8, name: '环境管理题库', updateTime: '2025-11-11', count: 199 }
-]);
-
-// 选择题库分类
-const selectCategory = (id) => {
-  console.log('Selected category:', id);
-};
-
-// 获取题型标签
-const getQuestionTypeLabel = (type) => {
-  const typeMap = {
-    'single_choice': '(单项选择题)',
-    'multiple_choice': '(多项选择题)',
-    'fill_blank': '(填空题)',
-    'short_answer': '(简答题)'
-  };
-  return typeMap[type] || '';
-};
-
-console.log('Test completed successfully!');