背景
1.什么是云巧动态表单
云巧动态表单是一个面向企业级表单的解决方案,它提供完整的表单生命周期,包括从表单的创建、可视化搭建、预览、发布、填报、数据统计到下架的完整产品链路。
2.动态表单解决什么问题,价值是什么
对行业用户:
- 【减少维护工作量】降低企业运营成本
- 【设计便利】提供所见即所得、Web拖拽的方式设计表单,满足快速定制业务的需求,表单视图可以按需调整
- 【满足各种负责业务】表单引擎提供丰富的控件库,能够做到“零代码”
对ISV:
- 【接入成本低】依托云巧可组装体系,方便快捷和业务集成
- 【扩展能力强】支持多维度能力扩展和定开,提供编辑器的源码级定开能力和控件级的扩展定开能力
- 【底层能力强】提供丰富的表单控件,易用的可视化搭建,表单数据的存储、搜索和管理能力,跨端渲染能力
3.为什么要做国际化
GTS作为全球技术服务部门,需要面向海内外的项目交付,同时我们服务的企业也拥有大量的国际用户,因此动态表单的搭建和填报场景均需要国际化支持。
4.国际化能力介绍
【可视化配置】支持可视化配置表单字段在不同语言环境下的国际化配置并预览实时效果
【多语言切换】表单填报侧支持多语言切换能力
国际化整体方案
表单国际化-全链路架构图
国际化整体方案设计
核心模块
- 【语言环境管理模块】负责语言环境的管理
- 【语言包管理模块】负责表单国际化语言包的管理
- 【国际化包装器】负责表单控件的国际化属性封装和映射
方案设计
- 动态表单设计器在表单的设计阶段引入「国际化包装器」,对创建的表单控件逐一进行初始国际化包装
- 「国际化包装器」通过订阅「语言环境管理模块」和「语言包管理模块」,追踪语言环境的变化和语言包的更新
- 表单设计器通过外部切换语言从而set当前语言环境,「语言环境管理模块」再将变化派发给国际化包装器,触发表单字段的重新包装
- 表单设计器通过国际化setter,对当前语言环境下的表单字段进行增量更新语言包,「国际化包装器」接收到来自「语言包管理模块」的派发广播,触发表单字段的重新包装
- 「国际化包装器」输出更新后的表单,在表单设计器进行预览
- 同上,动态表单渲染器通过这套「语言切换-动态更新」的模式,渲染出最终表单国际化效果,并支持多语言切换
技术难点
难点1:国际化包装器如何包装表单控件?
国际化包装器内部会针对每一个表单控件的「文本展示类属性」进行国际化映射,包括控件的通用属性和个性化属性,经过映射后的表单控件即可根据当前语言环境展示对应的国际化配置。
难点2:国际化包装器在什么时机对表单字段进行包装?
国际化包装器会在表单字段的 onFieldReact 副作用钩子的回调事件进行包装,它会在字段初始化的时候执行一次包装的回调函数,同时自动追踪依赖,当依赖数据发生变化时包装的回调函数会再次执行,因此依赖的国际化数据更新时表单字段得以重新包装和输出。
难点3:国际化包装器如何与语言环境管理模块以及语言包管理模块进行交互?
语言环境管理模块和语言包管理模块均通过 @formily/reactive 创建一个可订阅对象来存储各自的数据,在每次操作该对象的属性数据时,会自动通知订阅者,国际化包装器引用该对象后成为订阅者从而获得语言环境和语言包的更新。
难点4:表单设计器对于国际化setter的设计
表单设计阶段需要支持对表单字段进行可视化地配置当前语言环境下的属性文案,因此需要一个「国际化setter配置器」来支持,setter内部核心能力就是 支持对表单字段属性在当前语言环境下的读写操作:通过语言环境管理模块和语言包管理模块读取国际化内容,在用户修改内容后增量更新到语言包对象上,从而完成可视化的国际化配置能力。
效果展示
可视化配置表单国际化
表单填报国际化展示和多语言切换