mod: 考试

apps/web-ele/.env.development

@@ -5,7 +5,7 @@ VITE_BASE=/
 
 # 接口地址
 
-VITE_GLOB_API_URL=http://39.164.159.226:8088
+VITE_GLOB_API_URL=http://localhost:8080
 # VITE_GLOB_API_URL=http://192.168.1.7:8080
 # VITE_GLOB_API_URL=http://192.168.1.170:8080
 # VITE_GLOB_FLOW_URL=http://192.168.31.160:8082

apps/web-ele/src/api/exam/exam/category.ts

@@ -0,0 +1,54 @@
+import { requestClient } from '#/api/request';
+
+enum Api {
+  base = '/examCategory/category',
+  tree = '/examCategory/category/list',
+}
+
+export interface ExamCategory {
+  children: ExamCategory[];
+  id: number;
+  name: string;
+  parentId: number;
+  icon: string;
+  description: string;
+  sortOrder: number;
+  delFlag: string;
+}
+
+/**
+ * 获取试题分类树形图
+ */
+async function examCategoryTree() {
+  return requestClient.get<ExamCategory[]>(Api.tree);
+}
+
+async function examCategoryOne(id: number) {
+  return requestClient.get<ExamCategory>(`${Api.base}/${id}`);
+}
+// 新增试题分类
+function addExamCategory(category: ExamCategory) {
+  return requestClient.post(Api.base, category, {
+    successMessageMode: 'message',
+  });
+}
+// 修改试题分类
+function updateExamCategory(category: ExamCategory) {
+  return requestClient.put(Api.base, category, {
+    successMessageMode: 'message',
+  });
+}
+// 删除试题分类
+function deleteExamCategory(categoryId: number) {
+  return requestClient.delete(`${Api.base}/${categoryId}`, {
+    successMessageMode: 'message',
+  });
+}
+
+export {
+  addExamCategory,
+  deleteExamCategory,
+  examCategoryOne,
+  examCategoryTree,
+  updateExamCategory,
+};

apps/web-ele/src/api/exam/exam/exam.ts

@@ -0,0 +1,63 @@
+import { requestClient } from '#/api/request';
+
+enum Api {
+  base = '/exam/exam',
+  list = '/exam/exam/list',
+}
+
+export interface Exam {
+  id: number;
+  categoryId: number;
+  categoryName: string;
+  examName: string;
+  paperId: number;
+  examStartTime: string;
+  examEndTime: string;
+  examDuration: number;
+  passScore: number;
+  isLimit: number;
+  isSubjective: number;
+  examStatus: string;
+  createTime: string;
+  updateTime: string;
+  delFlag: string;
+}
+
+/**
+ * 获取试卷列表
+ */
+async function examList(params?: any) {
+  return requestClient.get<Exam>(Api.list, { params });
+}
+
+/**
+ * 获取试卷详情
+ */
+async function examDetail(id: number) {
+  return requestClient.get<Exam>(`${Api.base}/${id}`);
+}
+
+/**
+ * 新增试卷
+ */
+function addExam(params: any) {
+  return requestClient.post(Api.base, params, {
+    successMessageMode: 'message',
+  });
+}
+/**
+ * 修改试卷
+ */
+function updateExam(params: any) {
+  return requestClient.put(Api.base, params, {
+    successMessageMode: 'message',
+  });
+}
+// 删除试卷分类
+function deleteExam(ids: number[]) {
+  return requestClient.delete(`${Api.base}/${ids.join(',')}`, {
+    successMessageMode: 'message',
+  });
+}
+
+export { addExam, deleteExam, examDetail, examList, updateExam };

apps/web-ele/src/api/system/user/user.ts

@@ -23,6 +23,7 @@ enum Api {
   exportUser = '/system/user/export',
   menuList = '/system/user/list',
   modifyPwd = '/system/user/resetPwd',
+  selectUsersApi = '/system/user/list',
   updateAvatar = '/system/user/profile/avatar',
   updateProfilePwd = '/system/user/profile/updatePwd',
   updateUser = '/system/user/changeStatus',
@@ -87,6 +88,11 @@ export function addUser(user: User) {
     successMessageMode: 'message',
   });
 }
+
+export function selectUserList(params?: any) {
+  return requestClient.post<BaseResult<User[]>>(Api.selectUsersApi, { params });
+}
+
 // 批量删除用户
 export function deleteUsers(ids: number[]) {
   return requestClient.delete(`${Api.baseUser}/${ids}`, {

apps/web-ele/src/components/selectUsers/index.ts

@@ -0,0 +1 @@
+export { default, default as SelectUsers } from './src/index.vue';

apps/web-ele/src/utils/dicts.ts

@@ -16,6 +16,14 @@ export const difficultyOptions = [
   { label: '困难', value: 'hard', color: 'red' },
 ];
 
+// p=pending-待发布、ongoing-已发布、finished-已结束、cancelled-已关闭
+export const examStatusOptions = [
+  { label: '已发布', value: 'ongoing', color: 'success' },
+  { label: '待发布', value: 'pending', color: 'primary' },
+  { label: '已关闭', value: 'cancelled', color: 'danger' },
+  { label: '已结束', value: 'finished', color: 'info' },
+];
+
 export const getLabel = (dict: any[], value: string) => {
   const item = dict.find((item) => item.value === value);
   return item?.label || value;

apps/web-ele/src/utils/render.tsx

@@ -39,7 +39,7 @@ import { getDictOptions } from './dict';
  * @param color 颜色
  * @returns render
  */
-function renderTag(text: string, color?: string) {
+export function renderTag(text: string, color?: string) {
   return <ElTag color={color}>{text}</ElTag>;
 }
 
@@ -234,5 +234,3 @@ export function renderBrowserIcon(browser: string, center = false) {
   const icon = current ? current.icon : DefaultBrowserIcon;
   return renderIconSpan(icon, browser, center, '5px');
 }
-
-

apps/web-ele/src/views/examManage/exam/config-data.tsx

@@ -0,0 +1,56 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { examStatusOptions } from '#/utils/dicts';
+import { renderTag } from '#/utils/render';
+
+/**
+ * 查询表单schema
+ */
+export const queryFormSchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'examName',
+    label: '考试名称',
+    componentProps: {
+      placeholder: '请输入考试名称',
+    },
+  },
+];
+
+/**
+ * 表格列配置
+ */
+export const tableColumns: VxeGridProps['columns'] = [
+  { type: 'checkbox', width: 80 },
+  { field: 'examName', title: '考试名称', minWidth: 200 },
+  { field: 'categoryName', title: '类别', minWidth: 120 },
+  { field: 'examStartTime', title: '开始时间', minWidth: 120 },
+  { field: 'examEndTime', title: '结束时间', minWidth: 120 },
+  { field: 'examDuration', title: '考试时长', minWidth: 120 },
+  { field: 'passScore', title: '及格分数线', minWidth: 120 },
+  { field: 'createBy', title: '创建人', minWidth: 120 },
+  { field: 'totalScore', title: '考试总分', minWidth: 100 },
+  { field: 'questionCount', title: '试题总数', minWidth: 100 },
+  { field: 'updateTime', title: '更新日期', minWidth: 120 },
+  {
+    field: 'examStatus',
+    title: '考试状态',
+    minWidth: 120,
+    slots: {
+      default: ({ row }) => {
+        const status = examStatusOptions.find(
+          (item) => item.value === row.examStatus,
+        );
+        return renderTag(status?.label || row.examStatus, status?.color);
+      },
+    },
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    width: 240,
+  },
+];

apps/web-ele/src/views/examManage/exam/cpn/chapter/config-data.tsx

@@ -0,0 +1,54 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+
+import { examCategoryTree } from '#/api/exam/exam/category';
+
+export const drawerFormSchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'id',
+  },
+  {
+    component: 'ApiTreeSelect',
+    componentProps: {
+      api: async () => {
+        const data: any = await examCategoryTree();
+        // 增加一个根目录
+        data.rows = [
+          {
+            id: 0,
+            name: '根目录',
+            children: [],
+          },
+          ...data.rows,
+        ];
+        return data.rows;
+      },
+      labelField: 'name',
+      valueField: 'id',
+      childrenField: 'children',
+      checkStrictly: true,
+    },
+    dependencies: {
+      if(values: any) {
+        return values.parentId !== 0 || !values.isUpdate;
+      },
+      triggerFields: ['parentId'],
+    },
+    fieldName: 'parentId',
+    label: '上级分类',
+    rules: 'selectRequired',
+  },
+  {
+    component: 'Input',
+    fieldName: 'name',
+    componentProps: {
+      maxlength: 30,
+    },
+    label: '分类名称',
+    rules: 'required',
+  },
+];

apps/web-ele/src/views/examManage/exam/cpn/chapter/drawer.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+// @ts-ignore
+import type { Department } from '#/api/system/dept/model';
+
+import { ref } from 'vue';
+
+// @ts-ignore
+import { useVbenDrawer } from '@vben/common-ui';
+
+// @ts-ignore
+import { useVbenForm } from '#/adapter/form';
+import {
+  addExamCategory,
+  examCategoryOne,
+  updateExamCategory,
+  // @ts-ignore
+} from '#/api/exam/exam/category';
+
+import { drawerFormSchema } from './config-data';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const [Form, formApi] = useVbenForm({
+  // 不显示提交和重置按钮
+  showDefaultActions: false,
+  // 垂直布局，label和input在不同行，值为vertical
+  // 水平布局，label和input在同一行
+  layout: 'horizontal',
+  schema: drawerFormSchema(),
+});
+const isUpdateRef = ref<boolean>(false);
+const [Drawer, drawerApi] = useVbenDrawer({
+  async onOpenChange(isOpen: any) {
+    if (!isOpen) {
+      return;
+    }
+    try {
+      drawerApi.drawerLoading(true);
+      let { id, isUpdate, parentId } = drawerApi.getData();
+      isUpdateRef.value = isUpdate;
+      if (isUpdate) {
+        const deptData = await examCategoryOne(id);
+        await formApi.setValues({ ...deptData, isUpdate });
+      } else {
+        // 如果父节点是0的话说明是根节点，将本节点id复制给根节点用于侧拉显示根节点。
+        if (parentId === 0) {
+          parentId = id;
+        }
+        await formApi.setValues({ parentId, isUpdate });
+      }
+    } catch (error) {
+      console.error(error);
+    } finally {
+      drawerApi.drawerLoading(false);
+    }
+  },
+  onClosed() {
+    formApi.resetForm();
+  },
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    try {
+      this.confirmLoading = true;
+      const data = await formApi.getValues<Department>();
+      // 动态判断调用新增还是修改
+      isUpdateRef.value
+        ? await updateExamCategory(data)
+        : await addExamCategory(data);
+      emit('reload');
+      drawerApi.close();
+    } catch (error) {
+      console.error(error);
+    } finally {
+      this.confirmLoading = false;
+    }
+  },
+});
+</script>
+
+<template>
+  <Drawer :title="isUpdateRef ? '编辑' : '新增'">
+    <Form />
+  </Drawer>
+</template>
+<style scoped lang="scss">
+:deep(.el-input-number) {
+  width: 100%;
+}
+</style>

apps/web-ele/src/views/examManage/exam/cpn/edit/drawer.vue

@@ -0,0 +1,560 @@
+<script lang="ts" setup>
+import { computed, onMounted, reactive, ref } from 'vue';
+
+// @ts-ignore
+import { useVbenDrawer, useVbenModal } from '@vben/common-ui';
+
+import dayjs from 'dayjs';
+import { ElMessage } from 'element-plus';
+
+import {
+  examCategoryTree,
+  // @ts-ignore
+} from '#/api/exam/exam/category';
+// @ts-ignore
+import { addExam, examDetail, updateExam } from '#/api/exam/exam/exam';
+import {
+  PaperCategoryTree,
+  // @ts-ignore
+} from '#/api/exam/paper/category';
+// @ts-ignore
+import { paperList } from '#/api/exam/paper/paper';
+// @ts-ignore
+import { SelectUsers } from '#/components/selectUsers';
+
+const emit = defineEmits<{ reload: [] }>();
+
+// 抽屉可见性
+const drawerVisible = ref(false);
+
+const isUpdateRef = ref<boolean>(false);
+const [Drawer, drawerApi] = useVbenDrawer({
+  async onOpenChange(isOpen: any) {
+    if (!isOpen) {
+      return;
+    }
+    try {
+      drawerApi.drawerLoading(true);
+      let { id, isUpdate, parentId } = drawerApi.getData();
+      isUpdateRef.value = isUpdate;
+      if (isUpdate) {
+        const examInfo: any = await examDetail(id);
+        if (examInfo) {
+          examForm = {
+            ...examInfo,
+            selectExecutors: examInfo.users || [],
+            executorCount: examInfo.users?.length || 0,
+          };
+
+          // 试卷列表
+          const paperListRes: any = await paperList({
+            id: examInfo.paperId,
+          });
+          if (paperListRes?.rows?.length) {
+            selectedPapers.value = paperListRes.rows || [];
+          }
+        }
+      } else {
+        // 如果父节点是0的话说明是根节点，将本节点id复制给根节点用于侧拉显示根节点。
+        if (parentId === 0) {
+          parentId = id;
+        }
+      }
+    } catch (error) {
+      console.error(error);
+    } finally {
+      drawerApi.drawerLoading(false);
+    }
+  },
+  onClosed() {
+    // formApi.resetForm();
+  },
+  async onConfirm() {
+    try {
+      this.confirmLoading = true;
+
+      // 表单验证
+      if (!examForm.examName) {
+        ElMessage.error('请输入考试名称');
+        return;
+      }
+      if (!examForm.categoryId) {
+        ElMessage.error('请选择考试分类');
+        return;
+      }
+      if (!examForm.passScore) {
+        ElMessage.error('请输入及格分');
+        return;
+      }
+      if (examForm.paperId === '') {
+        ElMessage.error('请选择试卷');
+        return;
+      }
+
+      const params: any = {
+        categoryId: examForm.categoryId,
+        passScore: examForm.passScore,
+        paperId: examForm.paperId,
+        examName: examForm.examName,
+        remark: examForm.remark,
+        examStartTime: examForm.examStartTime
+          ? dayjs(examForm.examStartTime).format('YYYY-MM-DD HH:mm:ss')
+          : '',
+        examEndTime: examForm.examEndTime
+          ? dayjs(examForm.examEndTime).format('YYYY-MM-DD HH:mm:ss')
+          : '',
+        examDuration: examForm.examDuration,
+        examStatus: 'ongoing',
+        isLimit: examForm?.executorUsers?.length > 0 ? 1 : 0,
+        users: null,
+      };
+
+      if (params.isLimit && examForm.executorUsers.length > 0) {
+        params.users = JSON.stringify(
+          examForm.executorUsers.map((user: any) => {
+            return {
+              id: user.id,
+              name: user.name,
+            };
+          }),
+        );
+      }
+
+      if (isUpdateRef.value && !drawerApi.getData().isCopy) {
+        params.id = drawerApi.getData().id;
+      }
+
+      await (isUpdateRef.value ? updateExam(params) : addExam(params));
+
+      emit('reload');
+      drawerApi.close();
+    } catch (error) {
+      console.error(error);
+    } finally {
+      this.confirmLoading = false;
+    }
+  },
+});
+
+// 考试设置表单数据
+let examForm = reactive({
+  examName: '',
+  categoryId: '',
+  remark: '',
+  paperId: '',
+  passScore: '',
+  examStartTime: '',
+  examEndTime: '',
+  examDuration: '',
+  executorCount: 0, // 模拟已选择23人
+  executorUsers: [],
+  paperCategoryId: '',
+});
+
+// 已选择的试卷
+let selectedPapers: any = ref([]);
+
+// 打开抽屉
+const openDrawer = () => {
+  drawerVisible.value = true;
+};
+
+// 选择考试执行人
+const selectExecutors = () => {
+  executorModalApi.open();
+};
+
+// 删除已选择的试卷
+const removePaper = () => {
+  selectedPapers.value = [];
+  examForm.paperId = '';
+};
+
+const executorUserIds = computed(() => {
+  return examForm.executorUsers.map((o: any) => o.id);
+});
+
+const papers: any = ref([]);
+
+const getPapers = async () => {
+  const params = {
+    categoryId: examForm.paperCategoryId,
+  };
+
+  const res: any = await paperList(params);
+  if (res?.rows?.length > 0) {
+    papers.value = res.rows;
+  }
+};
+
+const handlePaperCategoryChange = () => {
+  getPapers().then();
+};
+
+// 监听试卷名称选择变化
+const handlePaperNameChange = (values: any) => {
+  const paperInfo = papers.value.find((paper: any) => paper.id === values);
+  if (paperInfo) {
+    examForm.paperId = paperInfo.id;
+
+    selectedPapers.value.push(paperInfo);
+  } else {
+    selectedPapers.value = [];
+  }
+};
+
+// 暴露方法给父组件
+defineExpose({
+  openDrawer,
+});
+
+// 获取试卷分类树
+const categoryTree = ref([]);
+const getCategoryOptions = async () => {
+  const res: any = await examCategoryTree();
+  categoryTree.value = res.rows || [];
+};
+
+const executorRef: any = ref(null);
+
+const [ExecutorModal, executorModalApi] = useVbenModal({
+  title: '选择考试执行人',
+  width: 1000,
+  height: 800,
+  showCancelBtn: false,
+  onConfirm: async () => {
+    const users = await executorRef.value.confirmSelection();
+    if (users?.length) {
+      examForm.executorCount = users.length;
+      examForm.executorUsers = users;
+      executorModalApi.close();
+    }
+  },
+});
+
+const paperCategoryTree = ref([]);
+
+const getPaperCategoryOptions = async () => {
+  const res: any = await PaperCategoryTree();
+  paperCategoryTree.value = res.rows || [];
+};
+
+onMounted(async () => {
+  getCategoryOptions().then();
+  getPaperCategoryOptions().then();
+});
+</script>
+
+<template>
+  <div>
+    <!-- 发布考试抽屉 -->
+    <Drawer class="w-[800px]">
+      <div class="exam-publish-drawer">
+        <!-- 第一部分：考试设置 -->
+        <div class="exam-setting-section">
+          <h3 class="section-title">考试设置</h3>
+
+          <ElForm
+            :model="examForm"
+            label-position="top"
+            class="grid-cols-1 gap-4 md:grid-cols-2"
+          >
+            <!-- 考试名称 -->
+            <ElFormItem label="考试名称" class="form-item-with-border" required>
+              <ElInput
+                v-model="examForm.examName"
+                placeholder="请输入考试名称"
+                maxlength="30"
+                show-word-limit
+              />
+            </ElFormItem>
+
+            <!-- 考试分类 -->
+            <ElFormItem label="考试分类" class="form-item-with-border" required>
+              <!-- <ElSelect
+                v-model="examForm.categoryId"
+                placeholder="请选择考试分类"
+                style="width: 100%"
+              >
+                <ElOption
+                  v-for="option in categoryOptions"
+                  :key="option.value"
+                  :label="option.label"
+                  :value="option.value"
+                />
+              </ElSelect> -->
+              <ElTreeSelect
+                v-model="examForm.categoryId"
+                :data="categoryTree"
+                :props="{
+                  label: 'name',
+                  value: 'id',
+                  children: 'children',
+                }"
+                placeholder="请选择分类"
+                class="select"
+              />
+            </ElFormItem>
+
+            <!-- 考试说明 -->
+            <ElFormItem
+              label="考试说明"
+              class="form-item-with-border md:col-span-2"
+            >
+              <ElInput
+                v-model="examForm.remark"
+                type="textarea"
+                placeholder="请输入考试说明"
+                rows="3"
+              />
+            </ElFormItem>
+
+            <!-- 考试总分 -->
+            <!-- <ElFormItem label="考试总分" class="form-item-with-border">
+              <ElInput
+                v-model="examForm.totalScore"
+                placeholder="请输入考试总分"
+                type="number"
+                min="1"
+              >
+                <template #append>分</template>
+              </ElInput>
+            </ElFormItem> -->
+
+            <!-- 及格分 -->
+            <ElFormItem label="及格分" class="form-item-with-border" required>
+              <ElInput
+                v-model="examForm.passScore"
+                placeholder="请输入及格分"
+                type="number"
+                min="1"
+              >
+                <template #append>分</template>
+              </ElInput>
+            </ElFormItem>
+
+            <!-- 答卷时长 -->
+            <ElFormItem label="答卷时长" class="form-item-with-border">
+              <ElInput
+                v-model="examForm.examDuration"
+                placeholder="请输入答卷时长"
+                type="number"
+                min="1"
+              >
+                <template #append>分钟</template>
+              </ElInput>
+            </ElFormItem>
+
+            <!-- 考试时间 -->
+            <ElFormItem
+              label="考试时间"
+              class="form-item-with-border md:col-span-2"
+            >
+              <ElDatePicker
+                v-model="examForm.examStartTime"
+                type="datetime"
+                placeholder="开始时间"
+                style="width: calc(50% - 15px)"
+              />
+              <span style="margin: 0 6px">至</span>
+              <ElDatePicker
+                v-model="examForm.examEndTime"
+                type="datetime"
+                placeholder="结束时间"
+                style="width: calc(50% - 15px)"
+              />
+            </ElFormItem>
+
+            <!-- 考试执行人 -->
+            <ElFormItem
+              label="考试执行人"
+              class="form-item-with-border md:col-span-2"
+            >
+              <ElButton @click="selectExecutors"> 选择考试执行人 </ElButton>
+              <span
+                style="margin-left: 10px; color: #86909c"
+                v-if="examForm.executorCount > 0"
+              >
+                已选择{{ examForm.executorCount }}人
+              </span>
+              <span style="margin-left: 10px; color: #86909c" v-else>
+                未选择执行人，将不限制考试人员
+              </span>
+            </ElFormItem>
+          </ElForm>
+        </div>
+
+        <!-- 第二部分：选择试卷 -->
+        <div class="select-paper-section">
+          <h3 class="section-title">选择试卷</h3>
+
+          <div class="mb-4 grid-cols-1 gap-4 md:grid-cols-2">
+            <!-- 选择试卷分类 -->
+            <ElFormItem label="选择试卷分类" class="form-item-with-border">
+              <ElTreeSelect
+                v-model="examForm.paperCategoryId"
+                :data="paperCategoryTree"
+                @change="handlePaperCategoryChange"
+                :props="{
+                  label: 'name',
+                  value: 'id',
+                  children: 'children',
+                }"
+              />
+            </ElFormItem>
+
+            <!-- 选择试卷名称 -->
+            <ElFormItem label="选择试卷名称" class="form-item-with-border">
+              <ElSelect
+                v-model="examForm.paperId"
+                filterable
+                allow-create
+                default-first-option
+                placeholder="请选择试卷名称"
+                style="width: 100%"
+                @change="handlePaperNameChange"
+              >
+                <ElOption
+                  v-for="option in papers"
+                  :key="option.id"
+                  :label="option.paperName"
+                  :value="option.id"
+                />
+              </ElSelect>
+            </ElFormItem>
+          </div>
+
+          <!-- 选择的试卷列表 -->
+          <div class="selected-papers-list" v-if="selectedPapers.length > 0">
+            <ElTable
+              :data="selectedPapers"
+              style="width: 100%"
+              :header-cell-style="{ backgroundColor: '#F7F9FA', color: '#000' }"
+            >
+              <ElTableColumn
+                prop="paperName"
+                label="试卷名称"
+                min-width="200"
+              />
+              <ElTableColumn prop="categoryName" label="类别" min-width="120" />
+              <ElTableColumn prop="createBy" label="创建人" min-width="120" />
+              <ElTableColumn
+                prop="totalScore"
+                label="试卷总分"
+                min-width="100"
+              />
+              <ElTableColumn
+                prop="questionCount"
+                label="试题总数"
+                min-width="100"
+              />
+              <ElTableColumn
+                prop="updateTime"
+                label="更新时间"
+                min-width="120"
+              />
+              <ElTableColumn label="操作" width="80" fixed="right">
+                <template #default>
+                  <ElButton
+                    link
+                    type="warning"
+                    size="small"
+                    @click="removePaper"
+                    class="custom-delete-btn"
+                  >
+                    删除
+                  </ElButton>
+                </template>
+              </ElTableColumn>
+            </ElTable>
+          </div>
+        </div>
+      </div>
+    </Drawer>
+
+    <ExecutorModal class="w-[700px]">
+      <SelectUsers ref="executorRef" :model-value="executorUserIds" />
+    </ExecutorModal>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.exam-publish-drawer {
+  padding: 20px;
+}
+
+:deep(.el-drawer__header) {
+  .el-drawer__title {
+    color: #000;
+  }
+}
+
+.section-title {
+  position: relative;
+  padding-left: 12px;
+  margin-bottom: 20px;
+  font-size: 16px;
+  font-weight: 500;
+  color: #303133;
+
+  &::before {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 3px;
+    content: '';
+    background-color: #409eff;
+    border-radius: 2px;
+  }
+}
+
+:deep(.form-item-with-border) {
+  .el-form-item__label {
+    position: relative;
+    padding-left: 12px;
+    font-weight: 500;
+    color: #000;
+  }
+}
+
+.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 {
+  display: flex;
+  gap: 12px;
+  justify-content: flex-start;
+  margin-top: 30px;
+}
+
+.selected-papers-list {
+  margin-top: 20px;
+}
+
+.custom-delete-btn {
+  color: #f0864d;
+}
+</style>

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

@@ -1,111 +1,61 @@
 <script lang="ts" setup>
+// @ts-ignore
 import type { VbenFormProps } from '@vben/common-ui';
 
+// @ts-ignore
 import type { VxeGridProps } from '#/adapter/vxe-table';
 
 import { onMounted, ref } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+import { useRouter } from 'vue-router';
 
-import { Page } from '@vben/common-ui';
+// @ts-ignore
+import { Page, useVbenDrawer, useVbenModal } from '@vben/common-ui';
 
 import {
   CopyDocument,
   DArrowLeft,
   Delete,
-  Download,
   Edit,
   Expand,
   Plus,
 } from '@element-plus/icons-vue';
-import {
-  ElButton,
-  ElDialog,
-  ElIcon,
-  ElMessage,
-  ElMessageBox,
-  ElSpace,
-  ElTree,
-} from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 
+// @ts-ignore
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
-
-// 导入预览组件
-import ExamPreview from './cpn/examPreview.vue';
+import {
+  deleteExamCategory,
+  examCategoryTree,
+  // @ts-ignore
+} from '#/api/exam/exam/category';
+// @ts-ignore
+// @ts-ignore
+import { deleteExam, examList } from '#/api/exam/exam/exam';
+// @ts-ignore
+import PaperPreview from '#/components/paper';
+// @ts-ignore
+
+import { queryFormSchema, tableColumns } from './config-data';
+// @ts-ignore
+import chapterDrawer from './cpn/chapter/drawer.vue';
+// @ts-ignore
+import examDrawer from './cpn/edit/drawer.vue';
 
 // 路由实例
 const router = useRouter();
-const route = useRoute();
-const classId = route.params.classId;
-
+// const route = useRoute();
 // 菜单折叠状态
 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 chapterData = ref([]);
 
 // 选中的章节
 const selectedChapter = ref({
-  id: '1',
-  label: '第一章 基础知识',
+  id: '',
+  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: {
@@ -114,16 +64,7 @@ const formOptions: VbenFormProps = {
       allowClear: true,
     },
   },
-  schema: [
-    {
-      component: 'Input',
-      fieldName: 'name',
-      label: '试卷名称',
-      componentProps: {
-        placeholder: '请输入试卷名称',
-      },
-    },
-  ],
+  schema: queryFormSchema(),
   wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
 };
 
@@ -134,49 +75,7 @@ const gridOptions: VxeGridProps = {
     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: 300,
-    },
-  ],
+  columns: tableColumns,
   size: 'medium',
   // 固定表格高度，避免高度不断增加
   height: 800,
@@ -197,28 +96,18 @@ const gridOptions: VxeGridProps = {
     },
     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);
-
+        // 当前选择的章节ID
+        const categoryId = selectedChapter.value.id || 0;
+        const data: any = await examList({
+          categoryId,
+          ...formValues,
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+        });
         // 确保返回格式正确，使用 items 作为数据键
         return {
-          items: paginatedData,
-          total: filteredData.length,
+          items: data.rows,
+          total: data.total,
         };
       },
     },
@@ -239,8 +128,19 @@ const [BasicTable, basicTableApi] = useVbenVxeGrid({
   gridOptions,
 });
 
+// 章节抽屉组件
+const [ChapterVbenDrawer, chapterVbenDrawerApi] = useVbenDrawer({
+  connectedComponent: chapterDrawer,
+});
+
+// 添加组件
+const [ExamDrawer, drawerApi] = useVbenDrawer({
+  connectedComponent: examDrawer,
+  title: '发布考试',
+});
+
 // 点击章节
-const handleChapterClick = (node) => {
+const handleChapterClick = (node: any) => {
   selectedChapter.value = {
     id: node.id,
     label: node.label,
@@ -250,34 +150,56 @@ const handleChapterClick = (node) => {
 };
 
 // 添加章节
-const addChapter = (parentId = null) => {
-  ElMessage.info('添加章节功能待实现');
+const addChapter = (chapter: any = {}) => {
+  chapterVbenDrawerApi.setData({ ...chapter, isUpdate: false }).open();
 };
 
 // 编辑章节
-const editChapter = (node) => {
-  ElMessage.info('编辑章节功能待实现');
+const editChapter = (chapter: any) => {
+  chapterVbenDrawerApi.setData({ ...chapter, isUpdate: true }).open();
 };
 
 // 删除章节
-const deleteChapter = (node) => {
-  ElMessage.info('删除章节功能待实现');
+const deleteChapter = (chapter: any) => {
+  ElMessageBox.confirm('确认删除该章节吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(async () => {
+    await deleteExamCategory(chapter.id);
+    await getChapterTree();
+  });
 };
 
-// 新增试卷
-const addExam = () => {
-  // 跳转到新页面
-  router.push('/examManage/examEdit/0');
+// 获取章节树
+const getChapterTree = async () => {
+  const data: any = await examCategoryTree();
+  chapterData.value = data.rows || [];
 };
 
-// 添加时间
-const addTime = () => {
-  ElMessage.info('添加时间功能待实现');
-};
+// // 新增试卷
+// const addExam = () => {
+//   // 打开抽屉
+//   paperDrawerRef.value.openDrawer();
+// };
+
+// // 添加时间
+// const addTime = () => {
+//   ElMessage.info('添加时间功能待实现');
+// };
 
 // 删除试卷
-const deleteExam = (row) => {
-  ElMessage.info('删除试卷功能待实现');
+const deleteExams = (row: any) => {
+  // 进行二次确认
+  ElMessageBox.confirm('确认删除该试卷吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(async () => {
+    await deleteExam([row.id]);
+    // 刷新表格数据
+    await basicTableApi.reload();
+  });
 };
 
 // 批量删除试卷
@@ -285,6 +207,8 @@ const deleteHandle = () => {
   const checkRecords = basicTableApi.grid.getCheckboxRecords();
   const ids = checkRecords.map((item: any) => item.id);
   if (ids.length <= 0) {
+    // 提示用户选择要删除的试卷
+    ElMessage.warning('请选择要删除的试卷');
     return;
   }
 
@@ -294,164 +218,57 @@ const deleteHandle = () => {
     type: 'warning',
   }).then(async () => {
     // 模拟批量删除操作
-    console.log('批量删除试卷:', ids);
+    await deleteExam(ids);
     await basicTableApi.reload();
   });
 };
 
 // 编辑试卷
-const editExam = (row) => {
+const editExam = (row: any) => {
   // 跳转到编辑页面，并传递试卷ID
-  router.push(`/examManage/examEdit/${row.id}`);
+  router.push({ name: 'PaperEdit', params: { id: 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 previewPaperId = ref('');
+// 预览试题模态框
+const [PreviewModal, previewModalApi] = useVbenModal({
+  // connectedComponent: QuestionPreview,
+  title: '预览',
+  width: 800,
+  height: 600,
+  showCancelBtn: false,
+});
+
+const previewExam = (row: any) => {
+  previewPaperId.value = row.paperId || '';
+  previewModalApi.open();
 };
 
 // 复制试卷
-const copyExam = (row) => {
-  ElMessage.info('复制试卷功能待实现');
+const copyExam = (row: any) => {
+  // 跳转到添加试卷页面
+  drawerApi.setData({ ...row, isUpdate: true, isCopy: true }).open();
+};
+
+const addExam = () => {
+  // 跳转到添加试卷页面
+  drawerApi.setData({}).open();
 };
 
-// 下载试卷
-const downloadExam = (row) => {
-  ElMessage.info('下载试卷功能待实现');
+const updateExam = (row: any) => {
+  drawerApi.setData({ ...row, isUpdate: true }).open();
 };
 
 // 页面加载时获取数据
 onMounted(() => {
-  // 默认选中第一个章节
-  if (chapterData.value.length > 0) {
-    handleChapterClick(chapterData.value[0]);
-  }
+  // 获取试卷分类树形图
+  getChapterTree().then(() => {
+    // 默认选中第一个章节
+    if (chapterData.value.length > 0) {
+      handleChapterClick(chapterData.value[0]);
+    }
+  });
 });
 </script>
 
@@ -473,6 +290,7 @@ onMounted(() => {
               <ElTree
                 :data="chapterData"
                 node-key="id"
+                :props="{ label: 'name' }"
                 default-expand-all
                 :expand-on-click-node="false"
                 @node-click="handleChapterClick"
@@ -485,8 +303,8 @@ onMounted(() => {
                         type="text"
                         size="small"
                         circle
-                        @click.stop="addExam"
-                        title="添加试卷"
+                        @click.stop="addChapter(data)"
+                        title="添加章节"
                       >
                         <ElIcon><Plus /></ElIcon>
                       </ElButton>
@@ -511,6 +329,18 @@ onMounted(() => {
                     </div>
                   </div>
                 </template>
+                <template #empty>
+                  <div class="tree-empty">
+                    <span class="el-tree__empty-text">暂无分类</span>
+                    <ElButton
+                      type="primary"
+                      class="mt-10 w-full"
+                      @click="addChapter()"
+                    >
+                      <ElIcon><Plus /></ElIcon> 添加分类
+                    </ElButton>
+                  </div>
+                </template>
               </ElTree>
             </div>
           </div>
@@ -533,6 +363,9 @@ onMounted(() => {
             <BasicTable table-title="试卷管理列表">
               <template #toolbar-tools>
                 <ElSpace>
+                  <ElButton type="primary" @click="addExam">
+                    发布考试
+                  </ElButton>
                   <ElButton
                     type="danger"
                     :disabled="
@@ -542,9 +375,9 @@ onMounted(() => {
                   >
                     批量删除
                   </ElButton>
-                  <ElButton type="primary" @click="addExam">
-                    新增试卷
-                  </ElButton>
+                  <!-- <ElButton type="primary" @click="addExam">
+                    发布考试
+                  </ElButton> -->
                 </ElSpace>
               </template>
               <template #action="{ row }">
@@ -566,7 +399,17 @@ onMounted(() => {
                     <ElIcon><CopyDocument /></ElIcon>
                     复制
                   </ElButton>
-                  <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)"
@@ -574,22 +417,23 @@ onMounted(() => {
                   >
                     <ElIcon><Download /></ElIcon>
                     下载
-                  </ElButton>
+                  </ElButton> -->
                   <ElButton
                     type="text"
                     size="small"
-                    @click="editExam(row)"
+                    @click="updateExam(row)"
                     style="margin-left: 0px"
                   >
                     <ElIcon><Edit /></ElIcon>
                     编辑
                   </ElButton>
                   <ElButton
-                    type="text"
+                    type="danger"
                     size="small"
-                    @click="deleteExam(row)"
+                    @click="deleteExams(row)"
                     class="text-red-500"
                     style="margin-left: 0px"
+                    link
                   >
                     <ElIcon><Delete /></ElIcon>
                     删除
@@ -602,19 +446,18 @@ onMounted(() => {
       </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>
+    <!-- 试卷抽屉组件 -->
+    <!-- <PaperDrawer ref="paperDrawerRef" /> -->
+    <!-- 章节抽屉组件 -->
+    <ChapterVbenDrawer @reload="getChapterTree" />
+
+    <!-- 添加考试抽屉组件 -->
+    <ExamDrawer @reload="basicTableApi.reload()" />
+
+    <!-- 预览试题模态框 -->
+    <PreviewModal>
+      <PaperPreview :paper-id="previewPaperId" />
+    </PreviewModal>
   </Page>
 </template>
 
@@ -689,6 +532,28 @@ onMounted(() => {
   overflow-y: auto;
 }
 
+.tree-empty {
+  display: contents;
+  // flex-direction: column;
+  align-items: center;
+  // justify-content: center;
+  padding: 20px 20px;
+  text-align: center;
+  min-height: 300px;
+}
+
+.tree-empty .el-tree__empty-text {
+  margin-top: 0px;
+  font-size: 16px;
+  color: #909399;
+}
+
+.tree-empty .el-button {
+  margin-top: 100px;
+  width: 200px;
+  margin-bottom: 0px;
+}
+
 .tree-node-content {
   display: flex;
   align-items: center;

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

@@ -1,948 +0,0 @@
-<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

@@ -1,212 +0,0 @@
-<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/paperManage/cpn/paper-drawer.vue

@@ -1,526 +0,0 @@
-<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 executorDialogVisible = ref(false);
-
-// 执行人树数据
-const executorTreeData = ref([
-  {
-    label: '部门一',
-    value: 'dept1',
-    children: [
-      {
-        label: '组1',
-        value: 'group1',
-        children: [
-          { label: '张三', value: 'user1' },
-          { label: '张三', value: 'user2' },
-          { label: '张三', value: 'user3' },
-          { label: '张三', value: 'user4' },
-          { label: '张三', value: 'user5' },
-          { label: '张三', value: 'user6' },
-          { label: '张三', value: 'user7' },
-          { label: '张三', value: 'user8' },
-          { label: '张三', value: 'user9' },
-          { label: '张三', value: 'user10' },
-          { label: '张三', value: 'user11' },
-          { label: '张三', value: 'user12' },
-          { label: '张三', value: 'user13' },
-          { label: '张三', value: 'user14' },
-          { label: '张三', value: 'user15' },
-        ],
-      },
-      {
-        label: '组2',
-        value: 'group2',
-        children: [],
-      },
-    ],
-  },
-  {
-    label: '部门二',
-    value: 'dept2',
-    children: [
-      {
-        label: '组1',
-        value: 'group3',
-        children: [
-          { label: '1-1-1-1-1', value: 'user16' },
-        ],
-      },
-    ],
-  },
-]);
-
-// 已选择的执行人
-const selectedExecutors = ref(['dept1', 'group1', 'user1', 'user2', 'user3', 'user4', 'user5', 'user6', 'user7', 'user8', 'user9', 'user10', 'user11', 'user12', 'user13', 'user14', 'user15']);
-
-// 选择考试执行人
-const selectExecutors = () => {
-  executorDialogVisible.value = true;
-};
-
-// 提交执行人选择
-const submitExecutorSelection = () => {
-  // 统计已选择的用户数量
-  const getUserCount = (nodes, selectedKeys) => {
-    let count = 0;
-    nodes.forEach(node => {
-      if (node.children && node.children.length > 0) {
-        count += getUserCount(node.children, selectedKeys);
-      } else if (selectedKeys.includes(node.value)) {
-        count++;
-      }
-    });
-    return count;
-  };
-  
-  const userCount = getUserCount(executorTreeData.value, selectedExecutors.value);
-  examForm.executorCount = userCount;
-  executorDialogVisible.value = false;
-  ElMessage.success('已选择' + userCount + '人');
-};
-
-// 取消执行人选择
-const cancelExecutorSelection = () => {
-  executorDialogVisible.value = false;
-};
-
-// 删除已选择的试卷
-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">
-              <el-date-picker
-                v-model="examForm.startTime"
-                type="datetime"
-                placeholder="开始时间"
-                style="width: calc(50% - 15px)"
-              />
-              <span style="margin: 0 6px;">至</span>
-              <el-date-picker
-                v-model="examForm.endTime"
-                type="datetime"
-                placeholder="结束时间"
-                style="width: calc(50% - 15px)"
-              />
-            </el-form-item>
-            
-            <!-- 答卷时长 -->
-            <el-form-item label="答卷时长" class="form-item-with-border">
-              <el-input
-                v-model="examForm.duration"
-                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-button @click="selectExecutors">
-                选择考试执行人
-              </el-button>
-              <span style="margin-left: 10px; color: #86909c;">已选择{{ examForm.executorCount }}人</span> 
-            </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: '#F7F9FA', color: '#000' }">
-              <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
-                    link
-                    type="warning"
-                    size="small"
-                    @click="removePaper(row.id)"
-                    class="custom-delete-btn"
-                  >
-                    删除
-                  </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>
-
-    <!-- 选择考试执行人弹框 -->
-    <el-dialog
-      v-model="executorDialogVisible"
-      :title="`考试执行人 已选择 ${examForm.executorCount} 人`"
-      width="400px"
-      top="200px"
-      append-to-body
-    >
-      <el-tree
-        v-model="selectedExecutors"
-        :data="executorTreeData"
-        show-checkbox
-        node-key="value"
-        default-expand-all
-        style="max-height: 500px; overflow-y: auto;"
-      />
-      <template #footer>
-        <div style="display: flex; gap: 12px; justify-content: flex-end;">
-          <el-button @click="cancelExecutorSelection">取消</el-button>
-          <el-button type="primary" @click="submitExecutorSelection">提交</el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.exam-publish-drawer {
-  padding: 20px;
-}
-
-:deep(.el-drawer__header) {
-
-  .el-drawer__title {
-    color: #000;
-  }
-}
-
-.section-title {
-  position: relative;
-  padding-left: 12px;
-  margin-bottom: 20px;
-  font-size: 16px;
-  font-weight: 500;
-  color: #303133;
-  
-  &::before {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    width: 3px;
-    content: '';
-    background-color: #409eff;
-    border-radius: 2px;
-  }
-}
-
-:deep(.form-item-with-border) {
-  .el-form-item__label {
-    position: relative;
-    padding-left: 12px;
-    font-weight: 500;
-    color: #000;
-    
-  }
-}
-
-.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 {
-  display: flex;
-  gap: 12px;
-  justify-content: flex-start;
-  margin-top: 30px;
-}
-
-.selected-papers-list {
-  margin-top: 20px;
-}
-
-.custom-delete-btn {
-  color: #F0864D;
-}
-</style>

apps/web-ele/src/views/examManage/questionBank/cpn/chapter/config-data.tsx

@@ -16,7 +16,16 @@ export const drawerFormSchema: FormSchemaGetter = () => [
     componentProps: {
       api: async () => {
         const data: any = await questionCategoryTree();
-        return data?.rows;
+        // 增加一个根目录
+        data.rows = [
+          {
+            id: 0,
+            name: '根目录',
+            children: [],
+          },
+          ...data.rows,
+        ];
+        return data.rows;
       },
       labelField: 'name',
       valueField: 'id',

apps/web-ele/src/views/examManage/questionBank/cpn/chapter/drawer.vue

@@ -1,15 +1,19 @@
 <script setup lang="ts">
+// @ts-ignore
 import type { Department } from '#/api/system/dept/model';
 
-import { defineEmits, ref } from 'vue';
+import { ref } from 'vue';
 
+// @ts-ignore
 import { useVbenDrawer } from '@vben/common-ui';
 
+// @ts-ignore
 import { useVbenForm } from '#/adapter/form';
 import {
   addQuestionCategory,
   questionCategoryOne,
   updateQuestionCategory,
+  // @ts-ignore
 } from '#/api/exam/question/category';
 
 import { drawerFormSchema } from './config-data';
@@ -26,7 +30,7 @@ const [Form, formApi] = useVbenForm({
 });
 const isUpdateRef = ref<boolean>(false);
 const [Drawer, drawerApi] = useVbenDrawer({
-  async onOpenChange(isOpen) {
+  async onOpenChange(isOpen: any) {
     if (!isOpen) {
       return;
     }

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

@@ -67,7 +67,7 @@ const removeOption = (index: number) => {
 
     // 如果删除后没有正确答案，默认选择第一个选项
     if (formData.value.correctAnswer.length === 0) {
-      formData.value.correctAnswer = [0];
+      formData.value.correctAnswer = ['0'];
     }
   }
 };

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

@@ -1,118 +0,0 @@
-<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

@@ -1,11 +1,14 @@
 <script lang="ts" setup>
+// @ts-ignore
 import type { VbenFormProps } from '@vben/common-ui';
 
+// @ts-ignore
 import type { VxeGridProps } from '#/adapter/vxe-table';
 
 import { onMounted, ref } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+import { useRouter } from 'vue-router';
 
+// @ts-ignore
 import { Page, useVbenDrawer, useVbenModal } from '@vben/common-ui';
 
 import {
@@ -15,31 +18,29 @@ import {
   Expand,
   Plus,
 } from '@element-plus/icons-vue';
-import {
-  ElButton,
-  ElIcon,
-  ElMessage,
-  ElMessageBox,
-  ElSpace,
-  ElTree,
-} from 'element-plus';
+import { ElButton, ElIcon, ElMessageBox, ElSpace, ElTree } from 'element-plus';
 
+// @ts-ignore
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
   deleteQuestionCategory,
   questionCategoryTree,
+  // @ts-ignore
 } from '#/api/exam/question/category';
+// @ts-ignore
 import { deleteQuestion, questionList } from '#/api/exam/question/question';
 // 导入预览组件
+// @ts-ignore
 import QuestionPreview from '#/components/question';
 
 import { queryFormSchema, tableColumns } from './config-data';
+// @ts-ignore
 import ChapterDrawer from './cpn/chapter/drawer.vue';
 
 // 路由实例
 const router = useRouter();
-const route = useRoute();
-const classId = route.params.classId;
+// const route = useRoute();
+// const classId = route.params.classId;
 
 // 菜单折叠状态
 const isCollapse = ref(false);
@@ -125,7 +126,7 @@ const [BasicTable, basicTableApi] = useVbenVxeGrid({
 });
 
 // 点击章节
-const handleChapterClick = (node) => {
+const handleChapterClick = (node: any) => {
   selectedChapter.value = {
     id: node.id,
     label: node.label,
@@ -165,14 +166,9 @@ const addQuestion = () => {
 };
 
 // 导入试题
-const importQuestions = () => {
-  ElMessage.info('导入试题功能待实现');
-};
-
-// 导出试题
-const exportQuestions = () => {
-  ElMessage.info('导出试题功能待实现');
-};
+// const importQuestions = () => {
+//   ElMessage.info('导入试题功能待实现');
+// };
 
 // 编辑试题
 const editQuestion = (row: any) => {
@@ -306,6 +302,18 @@ onMounted(() => {
                     </div>
                   </div>
                 </template>
+                <template #empty>
+                  <div class="tree-empty">
+                    <span class="el-tree__empty-text">暂无分类</span>
+                    <ElButton
+                      type="primary"
+                      class="mt-10 w-full"
+                      @click="addChapter"
+                    >
+                      <ElIcon><Plus /></ElIcon> 添加分类
+                    </ElButton>
+                  </div>
+                </template>
               </ElTree>
             </div>
           </div>
@@ -340,9 +348,9 @@ onMounted(() => {
                   <ElButton type="primary" @click="addQuestion">
                     新增试题
                   </ElButton>
-                  <ElButton type="primary" @click="importQuestions">
+                  <!-- <ElButton type="primary" @click="importQuestions">
                     导入
-                  </ElButton>
+                  </ElButton> -->
                   <!-- <ElButton type="primary" @click="exportQuestions">
                     导出
                   </ElButton> -->
@@ -515,4 +523,26 @@ onMounted(() => {
   display: flex;
   //gap: 8px;
 }
+
+.tree-empty {
+  display: contents;
+  // flex-direction: column;
+  align-items: center;
+  // justify-content: center;
+  padding: 20px 20px;
+  text-align: center;
+  min-height: 300px;
+}
+
+.tree-empty .el-tree__empty-text {
+  margin-top: 0px;
+  font-size: 16px;
+  color: #909399;
+}
+
+.tree-empty .el-button {
+  margin-top: 100px;
+  width: 200px;
+  margin-bottom: 0px;
+}
 </style>