动态问卷 Demo

这是一个基于 SvelteKit、TypeScript、Tailwind CSS、Vitest 和 Apache ECharts 实现的轻量级问卷演示项目。

项目模拟了一个分章节的问卷流程，支持必填与可选题，并在最终报告页中按章节展示已回答和已跳过的问题。

功能特性

• 3 个清晰的问卷章节
• 12 道模拟题目
• 支持必填题与可选题
• 可选题支持跳过
• 问卷页显示章节进度
• 报告页展示答案汇总与跳过状态
• 使用 Apache ECharts 展示章节统计图
• 包含工具函数和组件的单元测试
• 支持中英文切换

技术栈

• SvelteKit
• TypeScript
• Tailwind CSS
• Vitest
• Testing Library
• Apache ECharts

本地运行

安装依赖

npm install

启动开发环境

npm run dev

浏览器打开 http://localhost:5173 即可访问。

可用命令

npm run dev
npm run build
npm run preview
npm run test
npm run test:coverage

项目结构

src/
  lib/
    components/        可复用 UI 组件
    data/              问卷结构与模拟数据
    i18n/              语言切换与翻译文件
    utils/             问卷流转、校验与答案格式化工具
  routes/
    +page.svelte       问卷主页
    report/+page.svelte 报告页
tests/
  questionnaire.test.ts
screenshot/
  页面截图

问卷逻辑说明

• 问题被划分为 3 个章节：profile、preferences、planning。
• 当前实现采用从 q1 到 q12 的线性流程，逻辑简单直接。
• 可选题可以跳过，不会阻塞问卷继续进行。
• “是否已回答”的判断统一由公共工具函数处理，避免页面表现不一致。
• 报告页会把单选题的内部值转换为用户可读的展示文案，而不是直接显示原始 value。

页面截图

测试

运行全部测试：

npm run test

生成覆盖率报告：

npm run test:coverage

覆盖率报告输出目录：

coverage/index.html

说明

• 当前 npm run build 可以正常通过，但构建过程中仍会出现一组 SvelteKit / Svelte 版本不匹配的警告。
• 这些警告属于依赖版本层面的问题，不是当前问卷逻辑本身导致的。