通用表单解决方案—皮影

• 皮影为不同框架提供统一的表单开发体验
• 使开发者更加关注于逻辑和布局,从琐碎事物中解放出来
• 皮影的相关设置更加语义化,减少开发心智;并允许自定义封装
• 皮影完全兼容valibot的所有Action,可以完美的利用其验证及转换机制

文档

• 感性的认识可能会让您更快的体验到皮影的魅力,网站上实现了大量的用例,方便您快速了解皮影
• https://piying-org.github.io/website/

当前支持

• Angular
• Vue
• React

为什么使用皮影?

如果您符合以下条件,那么皮影就适合您

• 减少代码编写与维护成本
• 表单的类型安全实现
• 视图逻辑分离
• 减少对底层框架依赖使得代码更加通用
• 更加方便的验证机制

如果您符合以下条件,那么您可以尝试以下皮影

• 页面之间有一些相似的逻辑,或某些代码看起来相似
• 希望未来代码拥有不同框架的可迁移性

皮影解决了哪些问题?

• 皮影对于大多数普通的表单功能都已经完全覆盖,所以下面列举的问题是皮影相较于主流库而言解决

类型安全

• 市面上绝大多数的表单,都没有类型,往往设计表单后,还需要重新写一个类型来对输入输出进行约束
• 通过valibot定义,可以天然的获取到类型,并且获得最基础的类型验证,保证任何情况下,数据的类型没有问题

统一前后端的类型及验证

• 当前后端均使用js开发时,往往遇到一个问题,就是后端的类型已经定义,但是后端返回的接口往往只有interface/type,更甚者可能连类型都没有,只是告诉有哪些字段
• valibot的可以同时提供类型与验证
• 通过皮影的解析加持后,相关验证可以完美的反馈到表单上,使前后端的检查相同,减少维护成本,提高了数据的安全性

定义结构通用

• 不同框架的组件实现不同,所以需要单独实现
• 但是经过注册之后,逻辑部分完全不依赖视图中的任何内容,方便未来的迁移与维护

布局移动

• 绝大多数表单,都没有类型安全,即使使用了元数据定义,也无法随意移动,只能根据定义顺序来显示组件
• 皮影成功解决了这个问题,使得定义与视图并非耦合关系,允许任意显示与调整

  这样,你就可以定制属于设计要求的表单而不是有限的展示

逻辑或/与

• 绝大多数表单,只做了Group,Array,Control三种控件,但是缺少了逻辑或/与,这就让某些逻辑实现变得复杂
• 比如JsonSchema中的anyOf,oneOf,可以轻松使用v.intersect,v.union对应的FieldLogicGroup进行动态切换处理

表单控件的model-view/view-model分离

• 大部分的表单控件,输入输出是等价的,也就是控件输入a=>发射输出a,传入a=>写入到控件中a
• 皮影允许在这两个阶段内分别进行处理,完成更复杂的业务逻辑

测试覆盖率

✔ Browser application bundle generation complete.
29 07 2025 22:17:37.889:INFO [karma-server]: Karma v6.4.4 server started at http://localhost:9876/
29 07 2025 22:17:37.891:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
29 07 2025 22:17:37.910:INFO [launcher]: Starting browser Chrome
29 07 2025 22:17:38.530:INFO [Chrome 138.0.0.0 (Windows 10)]: Connected on socket VqecE5a27WYED9lwAAAB with id 10611162
Chrome 138.0.0.0 (Windows 10): Executed 452 of 454 (skipped 2) SUCCESS (0.944 secs / 0.854 secs)
TOTAL: 452 SUCCESS

=============================== Coverage summary ===============================
Statements   : 90.44% ( 1315/1454 )
Branches     : 82.19% ( 457/556 )
Functions    : 86.16% ( 411/477 )
Lines        : 90.69% ( 1258/1387 )
================================================================================

关于开源

• 目前由于仓库比较多,有部分代码需要整理,所以需要约一周左右;欢迎关注网站
• 如果您有什么意见或建议欢迎联系我wszgrcy@gmail.com