• 皮影為不同框架提供統一的表單開發體驗
• 使開發者更加關注於邏輯和佈局,從瑣碎事物中解放出來
• 皮影的相關設置更加語義化,減少開發心智;並允許自定義封裝
• 皮影完全兼容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