questionnaire_web Vue3 离线版问卷系统技术分析
一、项目概述
1. 项目简介
questionnaire_web 是一个基于 Vue3 + Vite 构建的离线版问卷系统，专注于提供可嵌入现有项目的问卷设计和渲染能力。与传统的独立问卷系统不同，该项目采用组件化设计理念，只关心数据本身，不关心集成环境。
2. 核心特性
A. 多页面支持
提供 5 种核心页面模式：
- 设计问卷页面：可视化问卷设计器
- 填写问卷页面：用户答题界面
- 只读问卷页面：问卷结果查看
- 简洁填写页面：无皮肤版本的填答界面
- 简洁只读页面：无皮肤版本的结果查看
B. 数据安全机制
提交回调函数由宿主系统提供，确保数据控制权在使用方手中
C. 低代码理念
通过拖拽、配置等低代码方式快速构建问卷，降低开发成本
3. 应用场景
- 问卷系统开发：无需从零构建控件模型、事件交互、逻辑解析
- 活动系统集成：动态配置不同活动的报名信息字段
- 考试系统搭建：支持试卷设计和在线考试功能
- 表单系统构建：各类数据收集场景
二、技术栈分析
1. 前端框架
A. Vue3 组合式 API
使用 Vue3 的 Composition API 模式，提供更好的逻辑复用和类型推断
B. Vite 构建工具
采用 Vite 作为构建工具，实现快速冷启动和即时热更新
2. 状态管理
项目使用 stores 目录进行状态管理，可能采用 Pinia 作为状态管理方案
3. 路由管理
使用 Vue Router 进行页面路由管理，支持多页面模式切换
三、架构设计
1. 目录结构
graph TD
A[questionnaire_web] --> B[src]
B --> C[App.vue]
B --> D[api]
B --> E[components]
B --> F[hooks]
B --> G[router]
B --> H[stores]
B --> I[views]
F --> J[useAnimate]
F --> K[useDesignV1]
F --> L[useGlobal]
K --> M[action.js]
K --> N[common]
K --> O[materielComponents]
K --> P[materielFactory]
I --> Q[questionnaire]
Q --> R[answer]
Q --> S[design]
Q --> T[demo.vue]
2. 核心模块
A. useDesignV1 钩子
问卷设计核心逻辑，包含：
- action.js：解析动作函数
- common：常用函数集合
- materielComponents：控件源码实现
- materielFactory：控件模型工厂
B. 控件模型
通过工厂模式创建各类问卷控件，支持题型：
- 单选题
- 多选题
- 填空题
- 简答题
- 评分题
- 矩阵题
- 级联题
C. 逻辑系统
支持复杂的问卷逻辑配置：
- 显示隐藏逻辑
- 跳转逻辑
- 关联逻辑
- 校验逻辑
3. 数据流设计
sequenceDiagram
participant U as 用户
participant D as 设计页面
participant F as 工厂模型
participant C as 控件组件
participant H as 宿主系统
U->>D: 拖拽添加题目
D->>F: 创建控件实例
F->>C: 渲染控件
C-->>D: 返回配置数据
D->>D: 保存问卷配置
U->>D: 提交问卷
D->>H: 触发提交回调
H-->>D: 返回处理结果
四、功能详解
1. 设计问卷功能
A. 题型管理
支持 8 种常见题型，覆盖大部分问卷需求
B. 大纲管理
提供问卷结构大纲视图，方便整体把握问卷结构
C. 逻辑配置
可视化配置题目间的逻辑关系，无需编写代码
D. 事件系统
支持题目级别的事件绑定，扩展交互能力
E. 题库功能
设计好的题目可存储到数据库，逐步形成题库
F. 皮肤系统
提供多套问卷皮肤样式，满足不同场景需求
G. 预览功能
实时预览问卷效果，边设计边调整
2. 填写问卷功能
A. 渐进式填写
根据逻辑配置动态显示题目，提升用户体验
B. 实时校验
填写过程中实时校验答案有效性
C. 数据收集
按标准格式收集用户填写数据
3. 只读问卷功能
展示问卷结果，适用于数据审核和结果查看场景
4. 考试功能
2024/9/12 新增，支持：
- 试卷设计
- 在线考试
- 成绩统计
5. 模版库功能
2024/9/12 新增，提供常用问卷模版，快速开始
五、集成方案
1. 设计问卷集成
<template>
<DesignQuestionnaire
:config="config"
@submit="handleSubmit"
/>
</template>
<script setup>
import { DesignQuestionnaire } from 'questionnaire_web'
const handleSubmit = (data) => {
// 自定义提交逻辑
console.log('问卷数据:', data)
}
</script>2. 填写问卷集成
<template>
<AnswerQuestionnaire
:schema="schema"
@submit="handleSubmit"
/>
</template>
<script setup>
import { AnswerQuestionnaire } from 'questionnaire_web'
const schema = {
// 问卷配置数据
}
const handleSubmit = (answers) => {
// 处理答题数据
}
</script>3. 只读问卷集成
<template>
<ReadOnlyQuestionnaire
:schema="schema"
:data="answerData"
/>
</template>六、技术亮点
1. 组件化解耦
通过 hooks 机制实现核心逻辑与 UI 分离，便于定制和扩展
2. 工厂模式
控件工厂统一管理所有题型，新增题型只需实现对应接口
3. 低代码实现
拖拽式设计界面，降低问卷设计门槛
4. 离线优先
核心功能无需后端支持，可完全在浏览器中运行
5. 灵活集成
提供简洁的 API，可快速集成到现有项目
七、待完善功能
1. 已知待办
- 日期时间控件：需要寻找合适的日期时间插件
2. 潜在改进方向
- 更多题型支持
- 富文本编辑器集成
- 移动端优化
- 无障碍访问支持
- 国际化支持
八、项目评价
1. 优势
A. 定位清晰
专注于问卷设计和渲染能力，不涉及用户管理、数据存储等业务逻辑
B. 集成友好
提供标准化的组件接口，降低集成成本
C. 功能完整
覆盖问卷设计、填写、查看全流程
D. 开源许可
采用 MIT 许可证，可自由使用和修改
2. 适用场景
- 需要快速搭建问卷功能的场景
- 需要将问卷功能嵌入现有系统的场景
- 需要自定义提交逻辑的场景
- 中小型项目的问卷需求
3. 局限性
- 项目处于早期阶段，功能可能不够完善
- 缺少详细的集成文档
- 社区活跃度有待观察
九、总结
questionnaire_web 是一个定位清晰的问卷组件库项目，通过离线优先和组件化设计，为开发者提供了灵活的问卷解决方案。对于需要快速集成问卷功能的项目来说，这是一个值得考虑的选择。随着项目不断完善，有望成为 Vue 生态中有价值的问卷工具库。
参考资料
- questionnaire_web GitHub 仓库 - 官方仓库