fix

apps/web-ele/src/locales/langs/zh-CN/page.json

@@ -10,5 +10,9 @@
     "title": "概览",
     "analytics": "分析页",
     "workspace": "工作台"
+  },
+  "examManage": {
+    "title": "考试管理",
+    "examStats": "考试统计"
   }
 }

apps/web-ele/src/router/routes/modules/examManage.ts

@@ -0,0 +1,27 @@
+import type { RouteRecordRaw } from 'vue-router';
+import { $t } from '#/locales';
+
+const routes: RouteRecordRaw[] = [
+  {
+    meta: {
+      icon: 'lucide:book-open',
+      keepAlive: true,
+      title: $t('page.examManage.title'),
+    },
+    name: 'ExamManage',
+    path: '/examManage',
+    children: [
+      {
+        meta: {
+          title: $t('page.examManage.examStats'),
+        },
+        name: 'ExamStats',
+        path: '/examManage/examStats',
+        component: () => import('#/views/examManage/examStats/index.vue'),
+      },
+      // 可以添加更多考试管理相关的页面路由
+    ],
+  },
+];
+
+export default routes;

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

@@ -1,20 +1,785 @@
 <script lang="ts" setup>
+// 导入依赖
+import type { VbenFormProps } from '@vben/common-ui';
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { computed, onMounted, ref } from 'vue';
+
 import { Page } from '@vben/common-ui';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+import { ElButton } from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+
+// ========================== 类型定义 ==========================
+// 考卷分类接口
+interface ExamCategory {
+  id: number;
+  name: string;
+  updateTime: string;
+  count: number;
+}
+
+// 题目统计接口
+interface QuestionStat {
+  id: number;
+  category: string;
+  name: string;
+  correctCount: number;
+  correctRate: string;
+}
+
+// 操作日志接口
+interface OperationLog {
+  id: number;
+  department: string;
+  operator: string;
+  content: string;
+  time: string;
+}
+
+// 人员得分接口
+interface ScoreRank {
+  id: number;
+  station: string;
+  name: string;
+  score: number;
+}
+
+// ========================== 数据管理 ==========================
+// 考卷分类数据
+const categories = ref<ExamCategory[]>([
+  { id: 1, name: '新员工入职考试', updateTime: '2025-11-11', count: 10 },
+  { id: 2, name: '安全知识考核', updateTime: '2025-11-10', count: 15 },
+  { id: 3, name: '设备操作考试', updateTime: '2025-11-09', count: 8 },
+  { id: 4, name: '质量管理考试', updateTime: '2025-11-08', count: 12 },
+  { id: 5, name: '日常操作考核', updateTime: '2025-11-07', count: 20 },
+]);
+
+// 搜索关键词
+const searchKeyword = ref('');
+
+// 筛选后的分类列表
+const filteredCategories = computed(() => {
+  if (!searchKeyword.value) {
+    return categories.value;
+  }
+  return categories.value.filter((category) =>
+    category.name.toLowerCase().includes(searchKeyword.value.toLowerCase()),
+  );
+});
+
+// 选中的考卷分类
+const selectedCategory = ref(1);
+
+// ========================== 页面状态管理 ==========================
+// 右侧内容标签页切换
+const activeTab = ref('dashboard');
+
+// ========================== 事件处理 ==========================
+// 选择考卷分类
+const selectCategory = (id: number) => {
+  selectedCategory.value = id;
+};
+
+// 切换右侧标签页
+const switchTab = (tab: string) => {
+  activeTab.value = tab;
+};
+
+// ========================== 题目统计表格 ==========================
+// 列配置
+const questionStatsColumns: VxeGridProps['columns'] = [
+  { title: '序号', width: 80, field: 'id', type: 'seq' },
+  { title: '题目类别', width: 120, field: 'category' },
+  { title: '题目名称', width: 400, field: 'name' },
+  { title: '正确数', width: 100, field: 'correctCount' },
+  { title: '正确率', width: 100, field: 'correctRate' },
+];
+
+// 表格配置
+const questionStatsGridOptions: VxeGridProps = {
+  columns: questionStatsColumns,
+  size: 'medium',
+  height: '300px',
+  useSearchForm: false,
+  proxyConfig: {
+    enabled: true,
+    autoLoad: true,
+    ajax: {
+      query: async () => {
+        const mockData: QuestionStat[] = [
+          {
+            id: 1,
+            category: '单选题',
+            name: '题目名称题目名称题目名称题目名称题目名称题目名称题目名称题目名称题目名称题目名称',
+            correctCount: 89,
+            correctRate: '98.02%',
+          },
+          {
+            id: 2,
+            category: '单选题',
+            name: '题目名称题目名称题目名称题目名称题目名称题目名称题目名称题目名称题目名称题目名称',
+            correctCount: 88,
+            correctRate: '98.82%',
+          },
+          {
+            id: 3,
+            category: '多选题',
+            name: '题目名称题目名称题目名称题目名称题目名称题目名称题目名称题目名称题目名称题目名称题目名称题目名称题目名称',
+            correctCount: 90,
+            correctRate: '100%',
+          },
+          {
+            id: 4,
+            category: '多选题',
+            name: '题目名称题目名称题目名称题目名称题目名称题目名称题目名称题目名称',
+            correctCount: 90,
+            correctRate: '100%',
+          },
+          {
+            id: 5,
+            category: '简答题',
+            name: '题目名称题目名称题目名称题目名称题目名称题目名称题目名称题目名称题目名称题目名称题目名称',
+            correctCount: 86,
+            correctRate: '95.26%',
+          },
+          {
+            id: 6,
+            category: '简答题',
+            name: '题目名称题目名称题目名称题目名称题目名称题目名称题目名称题目名称',
+            correctCount: 85,
+            correctRate: '94.87%',
+          },
+          {
+            id: 7,
+            category: '简答题',
+            name: '题目名称题目名称题目名称题目名称题目名称题目名称题目名称题目名称题目名称题目名称',
+            correctCount: 85,
+            correctRate: '94.87%',
+          },
+        ];
+        return { items: mockData, total: mockData.length };
+      },
+    },
+  },
+  rowConfig: { keyField: 'id' },
+  toolbarConfig: {},
+  id: 'exam-paper-question-stats',
+};
+
+// 表单配置（无搜索表单）
+const questionStatsFormOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 80,
+    componentProps: { allowClear: true },
+  },
+  schema: [],
+};
+
+// 创建表格组件
+const [QuestionStatsTable] = useVbenVxeGrid({
+  formOptions: questionStatsFormOptions,
+  gridOptions: questionStatsGridOptions,
+});
+
+// ========================== 操作日志表格 ==========================
+// 列配置
+const operationLogsColumns: VxeGridProps['columns'] = [
+  { title: '序号', width: 80, field: 'id', type: 'seq' },
+  { title: '操作部门', width: 150, field: 'department' },
+  { title: '操作人', width: 120, field: 'operator' },
+  { title: '操作内容', width: 300, field: 'content' },
+  { title: '操作时间', width: 180, field: 'time' },
+];
+
+// 表格配置
+const operationLogsGridOptions: VxeGridProps = {
+  columns: operationLogsColumns,
+  size: 'medium',
+  height: '300px',
+  useSearchForm: false,
+  proxyConfig: {
+    enabled: true,
+    autoLoad: true,
+    ajax: {
+      query: async () => {
+        const mockData: OperationLog[] = [
+          {
+            id: 1,
+            department: '运营部',
+            operator: '张三',
+            content: '创建考试',
+            time: '2025-11-11 10:00:00',
+          },
+          {
+            id: 2,
+            department: '运营部',
+            operator: '李四',
+            content: '更新考试内容',
+            time: '2025-11-11 10:30:00',
+          },
+          {
+            id: 3,
+            department: '人事部',
+            operator: '王五',
+            content: '发送考试通知',
+            time: '2025-11-12 09:00:00',
+          },
+          {
+            id: 4,
+            department: '财务部',
+            operator: '赵六',
+            content: '查看考试结果',
+            time: '2025-11-13 14:00:00',
+          },
+          {
+            id: 5,
+            department: '运营部',
+            operator: '张三',
+            content: '导出考试数据',
+            time: '2025-11-13 15:30:00',
+          },
+        ];
+        return { items: mockData, total: mockData.length };
+      },
+    },
+  },
+  rowConfig: { keyField: 'id' },
+  toolbarConfig: {},
+  id: 'exam-paper-operation-logs',
+};
+
+// 表单配置（无搜索表单）
+const operationLogsFormOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 80,
+    componentProps: { allowClear: true },
+  },
+  schema: [],
+};
 
+// 创建表格组件
+const [OperationLogsTable] = useVbenVxeGrid({
+  formOptions: operationLogsFormOptions,
+  gridOptions: operationLogsGridOptions,
+});
+
+// ========================== 人员得分排名表格 ==========================
+// 列配置
+const scoreRanksColumns: VxeGridProps['columns'] = [
+  { title: '排名', width: 80, field: 'id', type: 'seq' },
+  { title: '所属油站', width: 150, field: 'station' },
+  { title: '人员姓名', width: 120, field: 'name' },
+  { title: '得分', width: 100, field: 'score' },
+  {
+    title: '操作',
+    width: 100,
+    field: 'action',
+    slots: { default: 'action' },
+  },
+];
+
+// 表格配置
+const scoreRanksGridOptions: VxeGridProps = {
+  columns: scoreRanksColumns,
+  size: 'medium',
+  height: '300px',
+  useSearchForm: false,
+  proxyConfig: {
+    enabled: true,
+    autoLoad: true,
+    ajax: {
+      query: async () => {
+        const mockData: ScoreRank[] = [
+          { id: 1, station: '所属油站', name: '张三', score: 100 },
+          { id: 2, station: '所属油站', name: '李四', score: 99 },
+          { id: 3, station: '所属油站', name: '王五', score: 98 },
+          { id: 4, station: '所属油站', name: '赵六', score: 97 },
+          { id: 5, station: '所属油站', name: '刘七', score: 96 },
+        ];
+        return { items: mockData, total: mockData.length };
+      },
+    },
+  },
+  rowConfig: { keyField: 'id' },
+  toolbarConfig: {},
+  id: 'exam-paper-score-ranks',
+};
+
+// 表单配置（无搜索表单）
+const scoreRanksFormOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 80,
+    componentProps: { allowClear: true },
+  },
+  schema: [],
+};
+
+// 创建表格组件
+const [ScoreRanksTable] = useVbenVxeGrid({
+  formOptions: scoreRanksFormOptions,
+  gridOptions: scoreRanksGridOptions,
+});
+
+// 查看详情操作
+const viewDetail = (id: number) => {
+  console.log('查看详情:', id);
+};
+
+// ========================== 图表配置 ==========================
+// 图表类型切换
+const chartType = ref('participation');
+
+// ECharts 引用
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+// 切换图表类型
+const switchChartType = (type: string) => {
+  chartType.value = type;
+  updateChart();
+};
+
+// 更新图表
+const updateChart = () => {
+  if (chartType.value === 'participation') {
+    // 参与情况图表
+    renderEcharts({
+      series: [
+        {
+          type: 'pie',
+          radius: ['60%', '80%'],
+          avoidLabelOverlap: false,
+          itemStyle: {
+            borderRadius: 0,
+            borderColor: '#fff',
+            borderWidth: 2,
+          },
+          label: {
+            show: true,
+            position: 'center',
+            formatter: '{b}\n{c}',
+            fontSize: 18,
+            fontWeight: 'bold',
+          },
+          emphasis: {
+            label: {
+              show: true,
+              fontSize: '20',
+              fontWeight: 'bold',
+            },
+          },
+          labelLine: { show: false },
+          data: [
+            { value: 60, name: '参与人数', itemStyle: { color: '#5ab1ef' } },
+            { value: 40, name: '未参与人数', itemStyle: { color: '#f5f7fa' } },
+          ],
+        },
+      ],
+      tooltip: {
+        formatter: '{b}: {c}<br/>参与率: 60.00%',
+      },
+    });
+  } else {
+    // 及格情况图表
+    renderEcharts({
+      series: [
+        {
+          type: 'pie',
+          radius: ['60%', '80%'],
+          avoidLabelOverlap: false,
+          itemStyle: {
+            borderRadius: 0,
+            borderColor: '#fff',
+            borderWidth: 2,
+          },
+          label: {
+            show: true,
+            position: 'center',
+            formatter: '{b}\n{c}',
+            fontSize: 18,
+            fontWeight: 'bold',
+          },
+          emphasis: {
+            label: {
+              show: true,
+              fontSize: '20',
+              fontWeight: 'bold',
+            },
+          },
+          labelLine: { show: false },
+          data: [
+            { value: 55, name: '及格人数', itemStyle: { color: '#52c41a' } },
+            { value: 5, name: '不及格人数', itemStyle: { color: '#f5f7fa' } },
+          ],
+        },
+      ],
+      tooltip: {
+        formatter: '{b}: {c}<br/>及格率: 91.67%',
+      },
+    });
+  }
+};
+
+// ========================== 生命周期钩子 ==========================
+onMounted(() => {
+  // 初始化图表
+  updateChart();
+});
 </script>
 
 <template>
   <Page>
-    <div class="wrap">
-         考卷管理
+    <div class="exam-paper-container">
+      <!-- 左侧考卷分类 -->
+      <div class="left-panel">
+        <div class="panel-header">
+          <h2>考卷分类</h2>
+        </div>
+        <div class="search-container">
+          <input
+            v-model="searchKeyword"
+            type="text"
+            class="search-input"
+            placeholder="搜索考卷分类"
+          />
+        </div>
+        <div class="category-list">
+          <div
+            v-for="category in filteredCategories"
+            :key="category.id"
+            class="category-card"
+            :class="{ active: selectedCategory === category.id }"
+            @click="selectCategory(category.id)"
+          >
+            <div class="category-name">{{ category.name }}</div>
+            <div class="category-info">
+              <span>更新时间: {{ category.updateTime }}</span>
+              <span>考卷数量: {{ category.count }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 右侧考试统计 -->
+      <div class="right-panel">
+        <div class="panel-header">
+          <h2>考试统计</h2>
+          <div class="exam-info">
+            <span>考试名称</span>
+            <span>创建时间: 2025-11-11</span>
+            <span>截止时间: 2025-11-12</span>
+            <span>发放人数: 100</span>
+            <span>参考人数: 68</span>
+            <span>提交人数: 60</span>
+          </div>
+        </div>
+
+        <!-- 数据看板和操作日志切换 -->
+        <div class="tab-container">
+          <div
+            class="tab-item"
+            :class="{ active: activeTab === 'dashboard' }"
+            @click="switchTab('dashboard')"
+          >
+            数据看板
+          </div>
+          <div
+            class="tab-item"
+            :class="{ active: activeTab === 'log' }"
+            @click="switchTab('log')"
+          >
+            操作日志
+          </div>
+        </div>
+
+        <!-- 数据看板内容 -->
+        <div v-if="activeTab === 'dashboard'" class="dashboard-content">
+          <QuestionStatsTable table-title="题目统计" />
+        </div>
+
+        <!-- 操作日志内容 -->
+        <div v-if="activeTab === 'log'" class="log-content">
+          <OperationLogsTable table-title="操作日志" />
+        </div>
+
+        <!-- 下方统计区域 -->
+        <div class="bottom-stats">
+          <!-- 数据占比圆环图 -->
+          <div class="chart-section">
+            <div class="section-header">
+              <div
+                class="tab-item"
+                :class="{ active: chartType === 'participation' }"
+                @click="switchChartType('participation')"
+              >
+                参与情况
+              </div>
+              <div
+                class="tab-item"
+                :class="{ active: chartType === 'pass' }"
+                @click="switchChartType('pass')"
+              >
+                及格情况
+              </div>
+            </div>
+            <div class="chart-container">
+              <EchartsUI ref="chartRef" />
+              <div class="total-count">
+                <div class="count-label">发放人数</div>
+                <div class="count-value">100</div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 人员得分排名 -->
+          <div class="rank-section">
+            <div class="section-header">
+              <h3>人员得分排名</h3>
+            </div>
+            <ScoreRanksTable table-title="人员得分排名">
+              <template #action="{ row }">
+                <ElButton size="small" @click="viewDetail(row.id)">
+                  查看
+                </ElButton>
+              </template>
+            </ScoreRanksTable>
+          </div>
+        </div>
+      </div>
     </div>
   </Page>
 </template>
 
 <style lang="scss" scoped>
-.wrap {
+.exam-paper-container {
+  display: grid;
+  grid-template-columns: 300px 1fr;
+  gap: 20px;
+  height: calc(100vh - 120px);
+  padding: 0;
+  overflow: hidden;
+}
+
+.left-panel,
+.right-panel {
+  display: flex;
+  flex-direction: column;
+  background-color: #fff;
+  border-radius: 6px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.panel-header {
+  display: flex;
+  gap: 16px;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.search-container {
   padding: 16px;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.search-input {
+  width: 100%;
+  padding: 8px 12px;
+  font-size: 14px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  transition: all 0.3s;
+  box-sizing: border-box;
+
+  &:focus {
+    outline: none;
+    border-color: #1890ff;
+    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+  }
+}
+
+.panel-header h2 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+
+.exam-info {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  font-size: 12px;
+  color: #666;
+}
+
+.category-list {
+  height: calc(100vh - 160px);
+  padding: 16px;
+  overflow-y: auto;
+}
+
+.right-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.category-card {
+  position: relative;
+  padding: 12px;
+  margin-bottom: 12px;
+  cursor: pointer;
+  background-color: #f5f5f5;
+  border: 2px solid transparent;
+  border-radius: 6px;
+  transition: all 0.3s;
+
+  &:hover {
+    background-color: #e6f7ff;
+    box-shadow: 0 2px 8px rgba(24, 144, 255, 0.15);
+  }
+
+  &.active {
+    background-color: #e6f7ff;
+    border-color: #1890ff;
+    box-shadow: 0 2px 8px rgba(24, 144, 255, 0.15);
+  }
+}
+
+.category-name {
+  margin-bottom: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+}
+
+.category-info {
+  font-size: 12px;
+  color: #666;
+}
+
+.category-info span {
+  display: block;
+  margin-bottom: 4px;
+}
+
+/* 右侧占位符样式 */
+.placeholder {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  font-size: 16px;
+  color: #999;
+  background-color: #fafafa;
+  border-radius: 4px;
+}
+
+/* 标签页样式 */
+.tab-container {
+  display: flex;
+  padding: 0 16px;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.tab-item {
+  padding: 12px 20px;
+  font-size: 14px;
+  cursor: pointer;
+  color: #666;
+  border-bottom: 2px solid transparent;
+  transition: all 0.3s;
+
+  &:hover {
+    color: #1890ff;
+  }
+
+  &.active {
+    color: #1890ff;
+    border-bottom-color: #1890ff;
+    font-weight: 500;
+  }
+}
+
+/* 数据看板和操作日志内容 */
+.dashboard-content,
+.log-content {
+  flex: 1;
+  padding: 16px;
+  overflow-y: auto;
+  min-height: 300px;
+}
+
+/* 下方统计区域 */
+.bottom-stats {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  padding: 16px;
+  border-top: 1px solid #e8e8e8;
+}
+
+/* 图表部分 */
+.chart-section,
+.rank-section {
+  display: flex;
+  flex-direction: column;
+  background-color: #fafafa;
   border-radius: 6px;
-  background-color: #ffffff;
+  padding: 16px;
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.section-header h3 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: #333;
+}
+
+.chart-container {
+  position: relative;
+  height: 250px;
+}
+
+.total-count {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+}
+
+.count-label {
+  font-size: 12px;
+  color: #666;
+}
+
+.count-value {
+  font-size: 24px;
+  font-weight: bold;
+  color: #333;
+}
+
+/* 表格样式 */
+:deep(.vben-basic-table) {
+  .vben-table-wrapper {
+    border: 1px solid #e8e8e8;
+    border-radius: 4px;
+  }
 }
-</style>
+</style>

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

@@ -1,20 +1,198 @@
 <script lang="ts" setup>
+import { computed, ref } from 'vue';
+
 import { Page } from '@vben/common-ui';
 
+// 定义考卷分类接口
+interface ExamCategory {
+  id: number;
+  name: string;
+  updateTime: string;
+  count: number;
+}
+
+// 初始化考卷分类数据
+const categories = ref<ExamCategory[]>([
+  { id: 1, name: '新员工入职考试', updateTime: '2025-11-11', count: 10 },
+  { id: 2, name: '安全知识考核', updateTime: '2025-11-10', count: 15 },
+  { id: 3, name: '设备操作考试', updateTime: '2025-11-09', count: 8 },
+  { id: 4, name: '质量管理考试', updateTime: '2025-11-08', count: 12 },
+  { id: 5, name: '日常操作考核', updateTime: '2025-11-07', count: 20 },
+]);
+
+// 搜索功能
+const searchKeyword = ref('');
+
+// 筛选后的分类列表
+const filteredCategories = computed(() => {
+  if (!searchKeyword.value) {
+    return categories.value;
+  }
+  return categories.value.filter((category) =>
+    category.name.toLowerCase().includes(searchKeyword.value.toLowerCase()),
+  );
+});
+
+// 选中的考卷分类
+const selectedCategory = ref(1);
+
+// 选择考卷分类
+const selectCategory = (id: number) => {
+  selectedCategory.value = id;
+};
 </script>
 
 <template>
   <Page>
-    <div class="wrap">
-         我的考卷
+    <div class="exam-paper-container">
+      <!-- 左侧考卷分类 -->
+      <div class="left-panel">
+        <div class="panel-header">
+          <h2>考卷分类</h2>
+        </div>
+        <div class="category-list">
+          <div
+            v-for="category in filteredCategories"
+            :key="category.id"
+            class="category-card"
+            :class="{ active: selectedCategory === category.id }"
+            @click="selectCategory(category.id)"
+          >
+            <div class="category-name">{{ category.name }}</div>
+            <div class="category-info">
+              <span>更新时间: {{ category.updateTime }}</span>
+              <span>考卷数量: {{ category.count }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 右侧考卷列表（暂时为空） -->
+      <div class="right-panel">
+        <div class="panel-header">
+          <h2>考卷列表</h2>
+        </div>
+        <div class="exam-paper-list">
+          <!-- 右侧内容暂未实现 -->
+          <div class="placeholder">右侧我的问卷内容暂未实现</div>
+        </div>
+      </div>
     </div>
+
+    <!-- 抽屉组件 -->
   </Page>
 </template>
 
 <style lang="scss" scoped>
-.wrap {
+.exam-paper-container {
+  display: grid;
+  grid-template-columns: 300px 1fr;
+  gap: 20px;
+  height: calc(100vh - 120px);
+  padding: 0;
+  overflow: hidden;
+}
+
+.left-panel,
+.right-panel {
+  display: flex;
+  flex-direction: column;
+  background-color: #fff;
+  border-radius: 6px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.panel-header {
+  display: flex;
+  gap: 16px;
+  justify-content: space-between;
   padding: 16px;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.search-container {
+  padding: 16px;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.search-input {
+  width: 100%;
+  padding: 8px 12px;
+  font-size: 14px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  transition: all 0.3s;
+  box-sizing: border-box;
+
+  &:focus {
+    outline: none;
+    border-color: #1890ff;
+    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+  }
+}
+
+.panel-header h2 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+
+.category-list,
+.exam-paper-list {
+  height: calc(100vh - 160px);
+  padding: 16px;
+  overflow-y: auto;
+}
+
+.category-card {
+  position: relative;
+  padding: 12px;
+  margin-bottom: 12px;
+  cursor: pointer;
+  background-color: #f5f5f5;
+  border: 2px solid transparent;
   border-radius: 6px;
-  background-color: #ffffff;
+  transition: all 0.3s;
+
+  &:hover {
+    background-color: #e6f7ff;
+    box-shadow: 0 2px 8px rgba(24, 144, 255, 0.15);
+  }
+
+  &.active {
+    background-color: #e6f7ff;
+    border-color: #1890ff;
+    box-shadow: 0 2px 8px rgba(24, 144, 255, 0.15);
+  }
+}
+
+.category-name {
+  margin-bottom: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+}
+
+.category-info {
+  font-size: 12px;
+  color: #666;
+}
+
+.category-info span {
+  display: block;
+  margin-bottom: 4px;
+}
+
+/* 右侧占位符样式 */
+.placeholder {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  font-size: 16px;
+  color: #999;
+  background-color: #fafafa;
+  border-radius: 4px;
 }
-</style>
+</style>

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

@@ -1,20 +1,198 @@
 <script lang="ts" setup>
+import { computed, ref } from 'vue';
+
 import { Page } from '@vben/common-ui';
 
+// 定义考卷分类接口
+interface ExamCategory {
+  id: number;
+  name: string;
+  updateTime: string;
+  count: number;
+}
+
+// 初始化考卷分类数据
+const categories = ref<ExamCategory[]>([
+  { id: 1, name: '新员工入职考试', updateTime: '2025-11-11', count: 10 },
+  { id: 2, name: '安全知识考核', updateTime: '2025-11-10', count: 15 },
+  { id: 3, name: '设备操作考试', updateTime: '2025-11-09', count: 8 },
+  { id: 4, name: '质量管理考试', updateTime: '2025-11-08', count: 12 },
+  { id: 5, name: '日常操作考核', updateTime: '2025-11-07', count: 20 },
+]);
+
+// 搜索功能
+const searchKeyword = ref('');
+
+// 筛选后的分类列表
+const filteredCategories = computed(() => {
+  if (!searchKeyword.value) {
+    return categories.value;
+  }
+  return categories.value.filter((category) =>
+    category.name.toLowerCase().includes(searchKeyword.value.toLowerCase()),
+  );
+});
+
+// 选中的考卷分类
+const selectedCategory = ref(1);
+
+// 选择考卷分类
+const selectCategory = (id: number) => {
+  selectedCategory.value = id;
+};
 </script>
 
 <template>
   <Page>
-    <div class="wrap">
-         问卷打分
+    <div class="exam-paper-container">
+      <!-- 左侧考卷分类 -->
+      <div class="left-panel">
+        <div class="panel-header">
+          <h2>考卷分类</h2>
+        </div>
+        <div class="category-list">
+          <div
+            v-for="category in filteredCategories"
+            :key="category.id"
+            class="category-card"
+            :class="{ active: selectedCategory === category.id }"
+            @click="selectCategory(category.id)"
+          >
+            <div class="category-name">{{ category.name }}</div>
+            <div class="category-info">
+              <span>更新时间: {{ category.updateTime }}</span>
+              <span>考卷数量: {{ category.count }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 右侧考卷列表（暂时为空） -->
+      <div class="right-panel">
+        <div class="panel-header">
+          <h2>考卷列表</h2>
+        </div>
+        <div class="exam-paper-list">
+          <!-- 右侧内容暂未实现 -->
+          <div class="placeholder">问卷得分内容暂未实现</div>
+        </div>
+      </div>
     </div>
+
+    <!-- 抽屉组件 -->
   </Page>
 </template>
 
 <style lang="scss" scoped>
-.wrap {
+.exam-paper-container {
+  display: grid;
+  grid-template-columns: 300px 1fr;
+  gap: 20px;
+  height: calc(100vh - 120px);
+  padding: 0;
+  overflow: hidden;
+}
+
+.left-panel,
+.right-panel {
+  display: flex;
+  flex-direction: column;
+  background-color: #fff;
+  border-radius: 6px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.panel-header {
+  display: flex;
+  gap: 16px;
+  justify-content: space-between;
   padding: 16px;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.search-container {
+  padding: 16px;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.search-input {
+  width: 100%;
+  padding: 8px 12px;
+  font-size: 14px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  transition: all 0.3s;
+  box-sizing: border-box;
+
+  &:focus {
+    outline: none;
+    border-color: #1890ff;
+    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+  }
+}
+
+.panel-header h2 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+
+.category-list,
+.exam-paper-list {
+  height: calc(100vh - 160px);
+  padding: 16px;
+  overflow-y: auto;
+}
+
+.category-card {
+  position: relative;
+  padding: 12px;
+  margin-bottom: 12px;
+  cursor: pointer;
+  background-color: #f5f5f5;
+  border: 2px solid transparent;
   border-radius: 6px;
-  background-color: #ffffff;
+  transition: all 0.3s;
+
+  &:hover {
+    background-color: #e6f7ff;
+    box-shadow: 0 2px 8px rgba(24, 144, 255, 0.15);
+  }
+
+  &.active {
+    background-color: #e6f7ff;
+    border-color: #1890ff;
+    box-shadow: 0 2px 8px rgba(24, 144, 255, 0.15);
+  }
+}
+
+.category-name {
+  margin-bottom: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+}
+
+.category-info {
+  font-size: 12px;
+  color: #666;
+}
+
+.category-info span {
+  display: block;
+  margin-bottom: 4px;
+}
+
+/* 右侧占位符样式 */
+.placeholder {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  font-size: 16px;
+  color: #999;
+  background-color: #fafafa;
+  border-radius: 4px;
 }
-</style>
+</style>

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

@@ -96,8 +96,6 @@ const questions = ref<Question[]>([
   },
 ]);
 
-
-
 // 填空题替换方法
 const replaceBlanks = (content: string) => {
   return content.replaceAll(
@@ -106,13 +104,11 @@ const replaceBlanks = (content: string) => {
   );
 };
 
-
-
 // 弹窗相关
 const isModalVisible = ref(false);
 const modalTitle = ref('');
 const currentQuestion = ref<null | Question>(null);
-const currentCategory = ref<null | Category>(null);
+const currentCategory = ref<Category | null>(null);
 const newCategoryName = ref('');
 const inputError = ref('');
 
@@ -161,7 +157,6 @@ const selectCategory = (id: number) => {
   selectedCategory.value = id;
 };
 
-
 // 打开新增题目弹窗
 const openAddModal = () => {
   modalTitle.value = '添加题目';
@@ -177,8 +172,12 @@ const createNewQuestion = (type: QuestionType): Question => {
     id: 0, // 临时ID，保存时会生成
     type,
     content: '',
-    options: type === 'true_false' ? ['正确', '错误'] : 
-            type === 'single_choice' || type === 'multiple_choice' ? [''] : undefined,
+    options:
+      type === 'true_false'
+        ? ['正确', '错误']
+        : (type === 'single_choice' || type === 'multiple_choice'
+          ? ['']
+          : undefined),
     answer: '',
   };
 };
@@ -200,25 +199,29 @@ const validateQuestion = (question: Question): boolean => {
     alert('请输入题目内容');
     return false;
   }
-  
-  if (question.type === 'single_choice' || question.type === 'multiple_choice' || question.type === 'true_false') {
+
+  if (
+    question.type === 'single_choice' ||
+    question.type === 'multiple_choice' ||
+    question.type === 'true_false'
+  ) {
     if (!question.options || question.options.length < 2) {
       alert('请至少添加两个选项');
       return false;
     }
-    
-    const hasEmptyOption = question.options.some(option => !option.trim());
+
+    const hasEmptyOption = question.options.some((option) => !option.trim());
     if (hasEmptyOption) {
       alert('选项内容不能为空');
       return false;
     }
   }
-  
+
   if (!question.answer.trim()) {
     alert('请输入答案');
     return false;
   }
-  
+
   return true;
 };
 
@@ -230,9 +233,9 @@ const saveAllQuestions = () => {
       return;
     }
   }
-  
+
   // 为每个新题目生成唯一ID
-  const maxId = Math.max(...questions.value.map(q => q.id), 0);
+  const maxId = Math.max(...questions.value.map((q) => q.id), 0);
   newQuestions.value.forEach((q, index) => {
     q.id = maxId + index + 1;
     questions.value.push(q);
@@ -242,14 +245,14 @@ const saveAllQuestions = () => {
 
 // 保存单个编辑的题目
 const saveSingleQuestion = () => {
-  if (currentQuestion.value) {
-    if (validateQuestion(currentQuestion.value)) {
-      const index = questions.value.findIndex(q => q.id === currentQuestion.value!.id);
-      if (index !== -1) {
-        questions.value[index] = { ...currentQuestion.value };
-      }
-      closeModal();
+  if (currentQuestion.value && validateQuestion(currentQuestion.value)) {
+    const index = questions.value.findIndex(
+      (q) => q.id === currentQuestion.value!.id,
+    );
+    if (index !== -1) {
+      questions.value[index] = { ...currentQuestion.value };
     }
+    closeModal();
   }
 };
 
@@ -274,7 +277,9 @@ const openEditCategoryModal = (category: Category) => {
 // 删除题目类型
 const deleteCategory = (id: number) => {
   if (confirm('确定要删除这个题目类型吗？')) {
-    categories.value = categories.value.filter(category => category.id !== id);
+    categories.value = categories.value.filter(
+      (category) => category.id !== id,
+    );
     // 如果删除的是当前选中的分类，切换到第一个分类
     if (selectedCategory.value === id && categories.value.length > 0) {
       selectedCategory.value = categories.value[0].id;
@@ -287,28 +292,30 @@ const saveCategory = () => {
   if (!validateInput(newCategoryName.value)) {
     return;
   }
-  
+
   if (currentCategory.value) {
     // 修改现有分类
-    const index = categories.value.findIndex(cat => cat.id === currentCategory.value!.id);
+    const index = categories.value.findIndex(
+      (cat) => cat.id === currentCategory.value!.id,
+    );
     if (index !== -1) {
       categories.value[index] = {
         ...categories.value[index],
         name: newCategoryName.value,
-        updateTime: new Date().toISOString().split('T')[0]
+        updateTime: new Date().toISOString().split('T')[0],
       };
     }
   } else {
     // 添加新分类
-    const newId = Math.max(...categories.value.map(cat => cat.id), 0) + 1;
+    const newId = Math.max(...categories.value.map((cat) => cat.id), 0) + 1;
     categories.value.push({
       id: newId,
       name: newCategoryName.value,
       updateTime: new Date().toISOString().split('T')[0],
-      count: 0
+      count: 0,
     });
   }
-  
+
   closeModal();
 };
 
@@ -404,18 +411,19 @@ onUnmounted(() => {
   if (categoryListRef.value) {
     categoryListRef.value.removeEventListener('scroll', handleScroll);
   }
-}); 
+});
 </script>
 
 <template>
   <Page>
-  
     <div class="question-bank-container">
       <!-- 左侧题库分类 -->
       <div class="left-panel">
         <div class="panel-header">
           <h2>题库分类</h2>
-          <button class="add-btn" @click="openAddCategoryModal">添加题目类型</button>
+          <button class="add-btn" @click="openAddCategoryModal">
+            添加题目类型
+          </button>
         </div>
         <div class="category-list" ref="categoryListRef">
           <!-- @ts-ignore -->
@@ -432,8 +440,18 @@ onUnmounted(() => {
               <span>题库数量: {{ category.count }}</span>
             </div>
             <div class="category-actions">
-              <button class="edit-category-btn" @click.stop="openEditCategoryModal(category)">修改</button>
-              <button class="delete-category-btn" @click.stop="deleteCategory(category.id)">删除</button>
+              <button
+                class="edit-category-btn"
+                @click.stop="openEditCategoryModal(category)"
+              >
+                修改
+              </button>
+              <button
+                class="delete-category-btn"
+                @click.stop="deleteCategory(category.id)"
+              >
+                删除
+              </button>
             </div>
           </div>
 
@@ -539,8 +557,6 @@ onUnmounted(() => {
               </div>
             </div>
           </div>
-
-
         </div>
       </div>
     </div>
@@ -553,205 +569,220 @@ onUnmounted(() => {
         <button class="close-btn" @click="closeModal">&times;</button>
       </div>
       <div class="drawer-body">
-          <!-- 题目类型表单 -->
-          <div v-if="modalTitle.includes('题目类型')" class="category-form">
-            <div class="form-item">
-              <label class="form-label">题目类型名称</label>
-              <input 
-                type="text" 
-                class="form-input" 
-                v-model="newCategoryName" 
-                placeholder="请输入题目类型名称（最多50个字）"
-                maxlength="50"
-                @input="validateInput(newCategoryName)"
-              />
-              <div v-if="inputError" class="error-message">{{ inputError }}</div>
-              <div class="char-count">{{ newCategoryName.length }}/50</div>
-            </div>
+        <!-- 题目类型表单 -->
+        <div v-if="modalTitle.includes('题目类型')" class="category-form">
+          <div class="form-item">
+            <label class="form-label">题目类型名称</label>
+            <input
+              type="text"
+              class="form-input"
+              v-model="newCategoryName"
+              placeholder="请输入题目类型名称（最多50个字）"
+              maxlength="50"
+              @input="validateInput(newCategoryName)"
+            />
+            <div v-if="inputError" class="error-message">{{ inputError }}</div>
+            <div class="char-count">{{ newCategoryName.length }}/50</div>
           </div>
-          <!-- 题目编辑表单 -->
-          <div v-else-if="modalTitle === '编辑题目' && currentQuestion" class="question-form">
-            <!-- 题目类型 -->
-            <div class="form-item">
-              <label class="form-label">题目类型</label>
-              <div class="type-tabs">
-                <button 
-                  v-for="type in questionTypes" 
-                  :key="type.value"
-                  class="type-tab"
-                  :class="{ active: currentQuestion.type === type.value }"
-                  @click="currentQuestion.type = type.value as QuestionType; 
-                          if ((type.value === 'single_choice' || type.value === 'multiple_choice' || type.value === 'true_false') && !currentQuestion.options) { 
-                            currentQuestion.options = type.value === 'true_false' ? ['正确', '错误'] : ['']; 
-                          } else if (type.value !== 'single_choice' && type.value !== 'multiple_choice' && type.value !== 'true_false') { 
-                            currentQuestion.options = undefined; 
-                          }"
-                >
-                  {{ type.label }}
-                </button>
-              </div>
-            </div>
-            
-            <!-- 题目内容 -->
-            <div class="form-item">
-              <label class="form-label">题目内容</label>
-              <textarea 
-                class="form-textarea" 
-                v-model="currentQuestion.content" 
-                placeholder="请输入题目内容"
-              ></textarea>
+        </div>
+        <!-- 题目编辑表单 -->
+        <div
+          v-else-if="modalTitle === '编辑题目' && currentQuestion"
+          class="question-form"
+        >
+          <!-- 题目类型 -->
+          <div class="form-item">
+            <label class="form-label">题目类型</label>
+            <div class="type-tabs">
+              <button
+                v-for="type in questionTypes"
+                :key="type.value"
+                class="type-tab"
+                :class="{ active: currentQuestion.type === type.value }"
+                @click="
+                  currentQuestion.type = type.value as QuestionType;
+                  if (
+                    (type.value === 'single_choice' ||
+                      type.value === 'multiple_choice' ||
+                      type.value === 'true_false') &&
+                    !currentQuestion.options
+                  ) {
+                    currentQuestion.options =
+                      type.value === 'true_false' ? ['正确', '错误'] : [''];
+                  } else if (
+                    type.value !== 'single_choice' &&
+                    type.value !== 'multiple_choice' &&
+                    type.value !== 'true_false'
+                  ) {
+                    currentQuestion.options = undefined;
+                  }
+                "
+              >
+                {{ type.label }}
+              </button>
             </div>
-            
-            <!-- 选项 -->
-            <div v-if="currentQuestion.options" class="form-item">
-              <label class="form-label">选项</label>
-              <div class="options-list">
-                <div 
-                  v-for="(option, index) in currentQuestion.options" 
-                  :key="index"
-                  class="option-item"
-                >
-                  <input 
-                    type="text" 
-                    class="form-input"
-                    v-model="currentQuestion.options![index]"
-                    placeholder="请输入选项内容"
-                  />
-                  <button 
-                    class="remove-option-btn"
-                    @click="removeOption(currentQuestion, index)"
-                    :disabled="currentQuestion.options.length <= 1"
-                  >
-                    删除
-                  </button>
-                </div>
-                <button 
-                  class="add-option-btn"
-                  @click="addOption(currentQuestion)"
+          </div>
+
+          <!-- 题目内容 -->
+          <div class="form-item">
+            <label class="form-label">题目内容</label>
+            <textarea
+              class="form-textarea"
+              v-model="currentQuestion.content"
+              placeholder="请输入题目内容"
+            ></textarea>
+          </div>
+
+          <!-- 选项 -->
+          <div v-if="currentQuestion.options" class="form-item">
+            <label class="form-label">选项</label>
+            <div class="options-list">
+              <div
+                v-for="(option, index) in currentQuestion.options"
+                :key="index"
+                class="option-item"
+              >
+                <input
+                  type="text"
+                  class="form-input"
+                  v-model="currentQuestion.options![index]"
+                  placeholder="请输入选项内容"
+                />
+                <button
+                  class="remove-option-btn"
+                  @click="removeOption(currentQuestion, index)"
+                  :disabled="currentQuestion.options.length <= 1"
                 >
-                  + 添加选项
+                  删除
                 </button>
               </div>
+              <button
+                class="add-option-btn"
+                @click="addOption(currentQuestion)"
+              >
+                + 添加选项
+              </button>
             </div>
-            
-            <!-- 答案 -->
-            <div class="form-item">
-              <label class="form-label">答案</label>
-              <textarea 
-                class="form-textarea" 
-                v-model="currentQuestion.answer" 
-                placeholder="请输入答案"
-              ></textarea>
+          </div>
+
+          <!-- 答案 -->
+          <div class="form-item">
+            <label class="form-label">答案</label>
+            <textarea
+              class="form-textarea"
+              v-model="currentQuestion.answer"
+              placeholder="请输入答案"
+            ></textarea>
+          </div>
+        </div>
+
+        <!-- 添加题目表单 -->
+        <div v-else-if="modalTitle === '添加题目'" class="question-form">
+          <!-- 题目类型选择 -->
+          <div class="form-item">
+            <label class="form-label">选择题目类型</label>
+            <div class="type-tabs">
+              <button
+                v-for="type in questionTypes"
+                :key="type.value"
+                class="type-tab"
+                @click="addNewQuestion(type.value as QuestionType)"
+              >
+                {{ type.label }}
+              </button>
             </div>
           </div>
-          
-          <!-- 添加题目表单 -->
-          <div v-else-if="modalTitle === '添加题目'" class="question-form">
-            <!-- 题目类型选择 -->
-            <div class="form-item">
-              <label class="form-label">选择题目类型</label>
-              <div class="type-tabs">
-                <button 
-                  v-for="type in questionTypes" 
-                  :key="type.value"
-                  class="type-tab"
-                  @click="addNewQuestion(type.value as QuestionType)"
+
+          <!-- 所有题目编辑区域 -->
+          <div v-if="newQuestions.length > 0" class="all-questions">
+            <div
+              v-for="(question, qIndex) in newQuestions"
+              :key="qIndex"
+              class="question-item-container"
+            >
+              <div class="question-header">
+                <h4>
+                  题目{{ qIndex + 1 }} {{ getQuestionTypeLabel(question.type) }}
+                </h4>
+                <button
+                  class="delete-question-btn"
+                  @click="newQuestions.splice(qIndex, 1)"
                 >
-                  {{ type.label }}
+                  删除题目
                 </button>
               </div>
-            </div>
-            
-            <!-- 所有题目编辑区域 -->
-            <div v-if="newQuestions.length > 0" class="all-questions">
-              <div 
-                v-for="(question, qIndex) in newQuestions" 
-                :key="qIndex"
-                class="question-item-container"
-              >
-                <div class="question-header">
-                  <h4>题目{{ qIndex + 1 }} {{ getQuestionTypeLabel(question.type) }}</h4>
-                  <button 
-                    class="delete-question-btn"
-                    @click="newQuestions.splice(qIndex, 1)"
+
+              <div class="form-item">
+                <label class="form-label">题目内容</label>
+                <textarea
+                  class="form-textarea"
+                  v-model="question.content"
+                  placeholder="请输入题目内容"
+                ></textarea>
+              </div>
+
+              <!-- 选项 -->
+              <div v-if="question.options" class="form-item">
+                <label class="form-label">选项</label>
+                <div class="options-list">
+                  <div
+                    v-for="(option, optIndex) in question.options"
+                    :key="optIndex"
+                    class="option-item"
                   >
-                    删除题目
-                  </button>
-                </div>
-                
-                <div class="form-item">
-                  <label class="form-label">题目内容</label>
-                  <textarea 
-                    class="form-textarea" 
-                    v-model="question.content" 
-                    placeholder="请输入题目内容"
-                  ></textarea>
-                </div>
-                
-                <!-- 选项 -->
-                <div v-if="question.options" class="form-item">
-                  <label class="form-label">选项</label>
-                  <div class="options-list">
-                    <div 
-                      v-for="(option, optIndex) in question.options" 
-                      :key="optIndex"
-                      class="option-item"
-                    >
-                      <input 
-                        type="text" 
-                        class="form-input"
-                        v-model="question.options![optIndex]"
-                        placeholder="请输入选项内容"
-                      />
-                      <button 
-                        class="remove-option-btn"
-                        @click="removeOption(question, optIndex)"
-                        :disabled="question.options.length <= 1"
-                      >
-                        删除
-                      </button>
-                    </div>
-                    <button 
-                      class="add-option-btn"
-                      @click="addOption(question)"
+                    <input
+                      type="text"
+                      class="form-input"
+                      v-model="question.options![optIndex]"
+                      placeholder="请输入选项内容"
+                    />
+                    <button
+                      class="remove-option-btn"
+                      @click="removeOption(question, optIndex)"
+                      :disabled="question.options.length <= 1"
                     >
-                      + 添加选项
+                      删除
                     </button>
                   </div>
-                </div>
-                
-                <!-- 答案 -->
-                <div class="form-item">
-                  <label class="form-label">答案</label>
-                  <textarea 
-                    class="form-textarea" 
-                    v-model="question.answer" 
-                    placeholder="请输入答案"
-                  ></textarea>
+                  <button class="add-option-btn" @click="addOption(question)">
+                    + 添加选项
+                  </button>
                 </div>
               </div>
+
+              <!-- 答案 -->
+              <div class="form-item">
+                <label class="form-label">答案</label>
+                <textarea
+                  class="form-textarea"
+                  v-model="question.answer"
+                  placeholder="请输入答案"
+                ></textarea>
+              </div>
             </div>
           </div>
-        
-      </div>
-      <div class="drawer-footer">
+        </div>
+        <div class="drawer-footer">
           <button class="cancel-btn" @click="closeModal">取消</button>
-          <button 
-            class="confirm-btn" 
-            @click="modalTitle.includes('题目类型') ? saveCategory() : 
-                  modalTitle.includes('编辑') ? saveSingleQuestion() : saveAllQuestions()"
+          <button
+            class="confirm-btn"
+            @click="
+              modalTitle.includes('题目类型')
+                ? saveCategory()
+                : modalTitle.includes('编辑')
+                  ? saveSingleQuestion()
+                  : saveAllQuestions()
+            "
           >
             确定
           </button>
+        </div>
       </div>
     </div>
-    
-  
   </Page>
 </template>
 
 <style lang="scss" scoped>
-
 @keyframes fadeIn {
   from {
     opacity: 0;
@@ -876,7 +907,8 @@ onUnmounted(() => {
   opacity: 1;
 }
 
-.edit-category-btn, .delete-category-btn {
+.edit-category-btn,
+.delete-category-btn {
   padding: 4px 8px;
   font-size: 12px;
   cursor: pointer;
@@ -888,7 +920,7 @@ onUnmounted(() => {
 .edit-category-btn {
   color: #1890ff;
   background-color: rgb(24 144 255 / 10%);
-  
+
   &:hover {
     background-color: rgb(24 144 255 / 20%);
   }
@@ -897,7 +929,7 @@ onUnmounted(() => {
 .delete-category-btn {
   color: #ff4d4f;
   background-color: rgb(255 77 79 / 10%);
-  
+
   &:hover {
     background-color: rgb(255 77 79 / 20%);
   }
@@ -1072,8 +1104,6 @@ onUnmounted(() => {
   }
 }
 
-
-
 /* 滚动条样式优化 */
 .category-list::-webkit-scrollbar,
 .question-list::-webkit-scrollbar,
@@ -1198,7 +1228,7 @@ onUnmounted(() => {
   border: 1px solid #d9d9d9;
   border-radius: 4px;
   transition: all 0.3s;
-  
+
   &:focus {
     border-color: #1890ff;
     outline: none;
@@ -1215,7 +1245,7 @@ onUnmounted(() => {
   border: 1px solid #d9d9d9;
   border-radius: 4px;
   transition: all 0.3s;
-  
+
   &:focus {
     border-color: #1890ff;
     outline: none;
@@ -1253,12 +1283,12 @@ onUnmounted(() => {
   border: 1px solid #d9d9d9;
   border-radius: 4px;
   transition: all 0.3s;
-  
+
   &:hover {
     color: #1890ff;
     border-color: #1890ff;
   }
-  
+
   &.active {
     color: #1890ff;
     background-color: #e6f7ff;
@@ -1331,11 +1361,11 @@ onUnmounted(() => {
   border: 1px solid #ffccc7;
   border-radius: 4px;
   transition: all 0.3s;
-  
+
   &:hover:not(:disabled) {
     background-color: #ffccc7;
   }
-  
+
   &:disabled {
     cursor: not-allowed;
     opacity: 0.5;
@@ -1351,7 +1381,7 @@ onUnmounted(() => {
   border: none;
   border-radius: 4px;
   transition: all 0.3s;
-  
+
   &:hover {
     color: #40a9ff;
     text-decoration: underline;

packages/effects/plugins/src/vxe-table/use-vxe-grid.vue

@@ -129,7 +129,7 @@ const toolbarOptions = computed(() => {
     tools: (gridOptions.value?.toolbarConfig?.tools ??
       []) as VxeToolbarPropTypes.ToolConfig[],
   };
-  if (gridOptions.value?.toolbarConfig?.search && !!formOptions.value) {
+  if (gridOptions.value?.toolbarConfig?.search !== false && !!formOptions.value) {
     toolbarConfig.tools = Array.isArray(toolbarConfig.tools)
       ? [...toolbarConfig.tools, searchBtn]
       : [searchBtn];