* form: add custom component support in form schema and implement rendering logic

Author: catouse

lib/form-builder/dev.ts

@@ -1,7 +1,7 @@
 import 'zui-dev';
 import type {ComponentType} from 'preact';
 import yaml from 'js-yaml';
-import {$} from '@zui/core';
+import {$, jsx} from '@zui/core';
 import '@zui/button';
 import '@zui/icons';
 import '@zui/btn-group';
@@ -37,6 +37,9 @@ onPageUpdate(() => {
         defaultData,
         widgets: {
             progressCircle: ({value}) => [ProgressCircle as unknown as ComponentType, {percent: value || 0}],
+            customComponent: [(props: Record<string, unknown>) => {
+                return jsx`<div class="form-static-text">${props.value}</div>`;
+            }],
         },
         onSubmit: (event, data) => {
             console.log('onSubmit', event, data);

lib/form-builder/dev/form-schema-standard.ts

@@ -251,6 +251,12 @@ export const schema = {
                     },
                     extra: {html: '此处为了展示进度环的值的改变会触发表单项 <code>specials.progressCircle</code> 值的改变，使<strong>进度环</strong>显示新的值。'},
                 },
+                customComponent: {
+                    title: '自定义组件',
+                    type: 'string',
+                    defaultValue: '这是自定义组件的默认值',
+                    widget: 'customComponent'
+                }
             },
         },
     },