@composy/exam-vue

在线考试与测评 Vue 3 组件库 - 基于 @composy/exam-core 核心的 Vue 3 适配层

在应用入口导入 @composy/exam-vue/index.css，并加载 packages/color 与 packages/size 提供的全局 --ld-* 变量。Exam 主题变量只作用于考试组件根节点。

安装

pnpm add @composy/exam-vue

快速开始

全局安装

import { ExamPlugin } from '@composy/exam-vue'

app.use(ExamPlugin)

按需使用

<template>
  <ExamDesigner :paper="paper" :theme="theme" @change="onPaperChange" />
  <ExamPlayer :paper="paper" :duration="120" :show-timer="true" @submit="onSubmit" />
</template>

<script setup lang="ts">
import { ExamDesigner, ExamPlayer } from '@composy/exam-vue'
import type { ExamPaper } from '@composy/exam-vue'

const paper = ref<ExamPaper>({/* ... */})
const theme = ref<'light' | 'dark'>('light')

const onPaperChange = (p: ExamPaper) => {
  /* ... */
}
const onSubmit = answers => {
  /* ... */
}
</script>

组件

ExamDesigner

| Prop | 类型 | 默认值 | 说明 | | -------------- | ------------------- | --------- | ---------------- | | paper | ExamPaper | - | 试卷数据 | | questionBank | Question[] | - | 题库数据 | | theme | 'light' \| 'dark' | 'light' | 主题 | | draggable | boolean | true | 是否允许拖拽排序 |

| Event | 参数 | 说明 | | ----------------- | ----------- | -------- | | change | ExamPaper | 试卷变更 | | question:add | Question | 添加题目 | | question:remove | string | 移除题目 |

ExamPlayer

| Prop | 类型 | 默认值 | 说明 | | ---------------- | -------------------- | --------- | ------------------------------ | | paper | ExamPaper | - | 试卷数据 | | duration | number | - | 考试时长(秒)，默认使用试卷时长 | | theme | 'light' \| 'dark' | 'light' | 主题 | | showAnswerCard | boolean | true | 显示答题卡 | | showTimer | boolean | true | 显示计时器 | | antiCheat | boolean | false | 启用防作弊 | | autoSave | boolean | true | 启用自动保存 | | schemaVersion | string | - | 题库/答卷 schema 版本 | | attemptId | string | - | 隔离本地恢复会话的考试尝试 ID | | serverDeadline | number | - | 服务端截止时间（Unix 毫秒） | | serverTime | ServerTimeSnapshot | - | 服务端校时快照 |

| Event | 参数 | 说明 | | ---------------- | ---------------------- | ---------------------------- | | answer | (questionId, answer) | 答题 | | submit | AnswerRecord[] | 提交 | | timeup | - | 时间到 | | cheat:detected | string | 作弊检测 | | cheat:signal | AntiCheatEvent | 透明审计信号，不代表最终结论 | | autosave | AnswerRecord[] | 自动保存 |

Composables

useExamDesigner

const {
  instance,
  paper,
  create,
  setPaper,
  addQuestion,
  removeQuestion,
  randomGenerate,
  addSection,
  setTheme,
  destroy,
} = useExamDesigner()

useExamPlayer

const {
  instance,
  answers,
  currentIndex,
  remainingTime,
  scoreResult,
  create,
  setAnswer,
  goToQuestion,
  next,
  prev,
  toggleFlag,
  submit,
  autoScore,
  getPaper,
  getAttemptSnapshot,
  pauseTimer,
  resumeTimer,
  setTheme,
  destroy,
} = useExamPlayer()

子路径导出

| 路径 | 说明 | | ------------------------------- | ---------- | | @composy/exam-vue | 主入口 | | @composy/exam-vue/composables | 组合式函数 | | @composy/exam-vue/plugins | Vue 插件 |

构建产物

dist/   # UMD 格式
es/     # ESM 格式
esm/    # ESM 格式
lib/    # CJS 格式

配置

Builder、ESLint 与 ESM/CJS TypeScript 权威配置位于 .ldesign/。Vue 包只提供基于 @composy/exam-core 的组件、composable 和插件；框架无关的考试逻辑由 Core 维护。

验证命令

pnpm run type-check   # Vue SFC、ESM 与 CJS TypeScript 检查
pnpm run lint:check   # 严格 ESLint 检查
pnpm run build        # 构建

依赖

• @composy/exam-core - 核心引擎
• vue ^2.7.0 || ^3.5.32 (peerDependency)

License

MIT