工程化实践：工程配置化设计
文内项目 Github：XIAOJUSURVEY
配置化是很灵活且很常见的使用，那 XIAOJUSURVEY 里有哪些地方应用到了呢？
基础模板
问卷模板
在创建问卷时，我们提供了多种问卷类型选择，例如普通问卷、投票、报名、NPS 等。
为了实现这些问卷类型的配置，我们使用了一份默认的模板文件（templateBase.json），以及每种问卷类型专属的 JSON 文件。这两份 JSON 文件会进行合并，生成初始的问卷配置数据，最终存储在数据库中供初始化使用。以下是相关文件的路径：
默认问卷模板
普通问卷模板
报名问卷模板
投票问卷模板
模板文件的合并操作允许我们创建不同类型的问卷，并根据用户选择的类型初始化问卷配置。这种灵活性使得问卷创建和管理变得更加方便和可扩展。
题型模板
在需要添加一个新题目时，我们需要访问相关题型的 meta.js 文件以获取题型默认字段。基于配置文件，我们可以根据题型生成新的题目。
字段说明参考：《问卷业务协议规范-题型字段》
题型菜单
题型菜单功能如下
在系统中，要显示如上图所示的题型列表，我们通过两个配置文件灵活管理和展示不同题型，以及根据需要定制它们的外观和行为。
单题型配置
assets.js 主要用于定义所有的题型以及每个题型的基本信息：
字段说明：
text: 表示题型的类型（type），与字段 type 的值一致。
snapshot: 题型的预览图，用于展示题型的外观。
path: 题型的组件路径，指定了题型的实际实现。
icon: 题型的图标，用于标识题型。
title: 题型的中文介绍，提供对题型的简短描述。
题型菜单配置
具体要展示哪些题型以及它们在列表中的显示顺序，我们定义在 questionTypeListConfig.js 文件中：
在目前的系统中，我们仅展示一个题型列表，因此我们使用一个数组来表示所要展示的题型，并按照数组的顺序来显示它们。
属性设置器
一份问卷内容主要由以下几部分组成：
属性面板可以通过不同设置器进行各部分相应属性的管理，查看 预置设置器列表。
头图设置器配置
头图配置
默认尺寸：750*260
顶部图片地址: 输入框，用于指定顶部图片的地址。
顶部视频地址: 输入框，用于指定顶部视频的地址。
视频海报地址: 输入框，用于指定视频的海报地址。
头图跳转
点击图片跳转到新链接: 开关，用于启用或禁用点击图片后的跳转。
跳转链接: 输入框，用于指定点击图片后跳转的链接。此选项在启用跳转时可用。
题型属性配置
参考：《题型物料属性配置》
Logo 设置器配置
自定义 Logo
自定义 Logo: 输入框，用于指定自定义 Logo 的地址。
Logo 大小: 输入框，填写宽度百分比，例如 30%。
提交按钮设置器配置
提交按钮文案
提交按钮文案: 输入框，用于自定义提交按钮的文本内容。
提交确认弹窗
是否配置该项: 开关，用于启用或禁用提交确认弹窗。
二次确认文案:
输入框，用于自定义提交确认弹窗中的文本内容。此选项在启用提交确认弹窗时可用。
提交文案配置
已提交: 输入框，用于自定义已提交状态下的文本提示。
提交结束: 输入框，用于自定义提交已满额时的文本提示。
其他提交失败: 输入框，用于自定义其他提交失败时的文本提示。
关于我们
感谢看到最后，我们是一个多元、包容的社区，我们已有非常多的小伙伴在共建，欢迎你的加入。
Github：XIAOJUSURVEY
社区交流群
Star
开源不易，请star一下 ❤️❤️❤️，你的支持是我们最大的动力。
版权声明: 本文为 InfoQ 作者【XIAOJUSURVEY】的原创文章。
原文链接:【http://xie.infoq.cn/article/ef4e780230d41b37c21ea407d】。
本文遵守【CC-BY 4.0】协议，转载请保留原文出处及本版权声明。
@滴滴 github.com/didi/xiaoju-survey 2024-05-20 加入
「快速」打造「专属」问卷系统, 让调研「更轻松」
评论