From 561064ce3a2af4f300db4fc294e04b86874d95d8 Mon Sep 17 00:00:00 2001
From: cipchk <cipchk@qq.com>
Date: Sat, 21 Oct 2023 14:45:11 +0800
Subject: [PATCH 1/9] refactor(form): refining low-frequency widgets

---
 packages/form/src/module.ts                   | 28 -------
 .../form/src/widgets/array/index.en-US.md     |  1 +
 .../form/src/widgets/array/index.zh-CN.md     |  1 +
 .../form/src/widgets/boolean/index.en-US.md   |  1 +
 .../form/src/widgets/boolean/index.zh-CN.md   |  1 +
 .../src/widgets/cascader/cascader.widget.html | 28 -------
 .../form/src/widgets/checkbox/demo/simple.md  |  3 +-
 .../form/src/widgets/custom/demo/simple.md    |  2 +-
 packages/form/src/widgets/index.ts            | 15 ----
 .../src/widgets/mention/mention.widget.html   | 43 -----------
 .../form/src/widgets/number/index.en-US.md    |  1 +
 .../form/src/widgets/number/index.zh-CN.md    |  1 +
 .../form/src/widgets/nz-widget.registry.ts    | 14 ----
 .../form/src/widgets/object/index.en-US.md    |  1 +
 .../form/src/widgets/object/index.zh-CN.md    |  1 +
 .../form/src/widgets/rate/rate.widget.html    | 13 ----
 .../form/src/widgets/select/index.en-US.md    |  1 +
 .../form/src/widgets/select/index.zh-CN.md    |  1 +
 .../src/widgets/slider/slider.widget.html     | 17 ----
 .../form/src/widgets/string/index.en-US.md    |  1 +
 .../form/src/widgets/string/index.zh-CN.md    |  1 +
 packages/form/src/widgets/tag/tag.widget.html | 28 -------
 packages/form/src/widgets/tag/tag.widget.ts   | 43 -----------
 .../src/widgets/transfer/transfer.widget.html | 18 -----
 .../tree-select/tree-select.widget.html       | 36 ---------
 .../{src => }/widgets/cascader/demo/simple.md |  3 +-
 .../{src => }/widgets/cascader/index.en-US.md |  6 +-
 packages/form/widgets/cascader/index.ts       | 20 +++++
 .../{src => }/widgets/cascader/index.zh-CN.md |  6 +-
 .../form/widgets/cascader/ng-package.json     |  6 ++
 .../form/{src => }/widgets/cascader/schema.ts |  4 +-
 .../cascader/widget.spec.ts}                  |  4 +-
 .../cascader/widget.ts}                       | 45 +++++++++--
 .../{src => }/widgets/mention/demo/simple.md  |  3 +-
 .../{src => }/widgets/mention/index.en-US.md  |  6 +-
 packages/form/widgets/mention/index.ts        | 22 ++++++
 .../{src => }/widgets/mention/index.zh-CN.md  |  6 +-
 .../form/{src => }/widgets/mention/schema.ts  |  4 +-
 .../mention/widget.spec.ts}                   |  6 +-
 .../mention/widget.ts}                        | 60 +++++++++++++--
 .../{src => }/widgets/rate/demo/simple.md     |  3 +-
 .../{src => }/widgets/rate/index.en-US.md     |  6 +-
 packages/form/widgets/rate/index.ts           | 21 +++++
 .../{src => }/widgets/rate/index.zh-CN.md     |  6 +-
 .../form/{src => }/widgets/rate/schema.ts     |  2 +-
 .../rate/widget.spec.ts}                      |  2 +-
 .../rate.widget.ts => widgets/rate/widget.ts} | 29 ++++++-
 .../{src => }/widgets/slider/demo/simple.md   |  3 +-
 .../{src => }/widgets/slider/index.en-US.md   |  8 +-
 packages/form/widgets/slider/index.ts         | 20 +++++
 .../{src => }/widgets/slider/index.zh-CN.md   |  8 +-
 .../form/{src => }/widgets/slider/schema.ts   |  3 +-
 .../slider/widget.spec.ts}                    |  6 +-
 .../slider/widget.ts}                         | 31 +++++++-
 .../form/{src => }/widgets/tag/demo/simple.md |  3 +-
 .../form/{src => }/widgets/tag/index.en-US.md |  6 +-
 packages/form/widgets/tag/index.ts            | 22 ++++++
 .../form/{src => }/widgets/tag/index.zh-CN.md |  6 +-
 packages/form/{src => }/widgets/tag/schema.ts |  3 +-
 .../tag/widget.spec.ts}                       |  4 +-
 packages/form/widgets/tag/widget.ts           | 77 +++++++++++++++++++
 .../{src => }/widgets/transfer/demo/simple.md |  3 +-
 .../{src => }/widgets/transfer/index.en-US.md |  6 +-
 packages/form/widgets/transfer/index.ts       | 20 +++++
 .../{src => }/widgets/transfer/index.zh-CN.md |  6 +-
 .../form/{src => }/widgets/transfer/schema.ts |  4 +-
 .../transfer/widget.spec.ts}                  |  4 +-
 .../transfer/widget.ts}                       | 35 +++++++--
 .../tree-select/demo/customized-icon.md       |  3 +-
 .../widgets/tree-select/demo/simple.md        |  3 +-
 .../tree-select/demo/virtual-scroll.md        |  3 +-
 .../widgets/tree-select/index.en-US.md        |  6 +-
 packages/form/widgets/tree-select/index.ts    | 20 +++++
 .../widgets/tree-select/index.zh-CN.md        |  6 +-
 .../{src => }/widgets/tree-select/schema.ts   |  4 +-
 .../tree-select/widget.spec.ts}               |  4 +-
 .../tree-select/widget.ts}                    | 53 +++++++++++--
 scripts/site/generate.ts                      |  4 +-
 src/app/core/startup.service.ts               |  2 +-
 .../shared/json-schema/json-schema.module.ts  | 21 ++++-
 src/app/shared/shared-zorro.module.ts         |  4 +-
 src/index.html                                |  2 +-
 src/site.config.js                            | 11 +++
 83 files changed, 615 insertions(+), 379 deletions(-)
 delete mode 100644 packages/form/src/widgets/cascader/cascader.widget.html
 delete mode 100644 packages/form/src/widgets/mention/mention.widget.html
 delete mode 100644 packages/form/src/widgets/rate/rate.widget.html
 delete mode 100644 packages/form/src/widgets/slider/slider.widget.html
 delete mode 100644 packages/form/src/widgets/tag/tag.widget.html
 delete mode 100644 packages/form/src/widgets/tag/tag.widget.ts
 delete mode 100644 packages/form/src/widgets/transfer/transfer.widget.html
 delete mode 100644 packages/form/src/widgets/tree-select/tree-select.widget.html
 rename packages/form/{src => }/widgets/cascader/demo/simple.md (95%)
 rename packages/form/{src => }/widgets/cascader/index.en-US.md (92%)
 create mode 100644 packages/form/widgets/cascader/index.ts
 rename packages/form/{src => }/widgets/cascader/index.zh-CN.md (92%)
 create mode 100644 packages/form/widgets/cascader/ng-package.json
 rename packages/form/{src => }/widgets/cascader/schema.ts (96%)
 rename packages/form/{src/widgets/cascader/cascader.widget.spec.ts => widgets/cascader/widget.spec.ts} (97%)
 rename packages/form/{src/widgets/cascader/cascader.widget.ts => widgets/cascader/widget.ts} (56%)
 rename packages/form/{src => }/widgets/mention/demo/simple.md (93%)
 rename packages/form/{src => }/widgets/mention/index.en-US.md (87%)
 create mode 100644 packages/form/widgets/mention/index.ts
 rename packages/form/{src => }/widgets/mention/index.zh-CN.md (87%)
 rename packages/form/{src => }/widgets/mention/schema.ts (93%)
 rename packages/form/{src/widgets/mention/mention.widget.spec.ts => widgets/mention/widget.spec.ts} (94%)
 rename packages/form/{src/widgets/mention/mention.widget.ts => widgets/mention/widget.ts} (59%)
 rename packages/form/{src => }/widgets/rate/demo/simple.md (90%)
 rename packages/form/{src => }/widgets/rate/index.en-US.md (75%)
 create mode 100644 packages/form/widgets/rate/index.ts
 rename packages/form/{src => }/widgets/rate/index.zh-CN.md (75%)
 rename packages/form/{src => }/widgets/rate/schema.ts (89%)
 rename packages/form/{src/widgets/rate/rate.widget.spec.ts => widgets/rate/widget.spec.ts} (98%)
 rename packages/form/{src/widgets/rate/rate.widget.ts => widgets/rate/widget.ts} (52%)
 rename packages/form/{src => }/widgets/slider/demo/simple.md (89%)
 rename packages/form/{src => }/widgets/slider/index.en-US.md (85%)
 create mode 100644 packages/form/widgets/slider/index.ts
 rename packages/form/{src => }/widgets/slider/index.zh-CN.md (82%)
 rename packages/form/{src => }/widgets/slider/schema.ts (94%)
 rename packages/form/{src/widgets/slider/slider.widget.spec.ts => widgets/slider/widget.spec.ts} (95%)
 rename packages/form/{src/widgets/slider/slider.widget.ts => widgets/slider/widget.ts} (59%)
 rename packages/form/{src => }/widgets/tag/demo/simple.md (93%)
 rename packages/form/{src => }/widgets/tag/index.en-US.md (75%)
 create mode 100644 packages/form/widgets/tag/index.ts
 rename packages/form/{src => }/widgets/tag/index.zh-CN.md (75%)
 rename packages/form/{src => }/widgets/tag/schema.ts (83%)
 rename packages/form/{src/widgets/tag/tag.widget.spec.ts => widgets/tag/widget.spec.ts} (98%)
 create mode 100644 packages/form/widgets/tag/widget.ts
 rename packages/form/{src => }/widgets/transfer/demo/simple.md (93%)
 rename packages/form/{src => }/widgets/transfer/index.en-US.md (87%)
 create mode 100644 packages/form/widgets/transfer/index.ts
 rename packages/form/{src => }/widgets/transfer/index.zh-CN.md (86%)
 rename packages/form/{src => }/widgets/transfer/schema.ts (94%)
 rename packages/form/{src/widgets/transfer/transfer.widget.spec.ts => widgets/transfer/widget.spec.ts} (98%)
 rename packages/form/{src/widgets/transfer/transfer.widget.ts => widgets/transfer/widget.ts} (71%)
 rename packages/form/{src => }/widgets/tree-select/demo/customized-icon.md (93%)
 rename packages/form/{src => }/widgets/tree-select/demo/simple.md (95%)
 rename packages/form/{src => }/widgets/tree-select/demo/virtual-scroll.md (92%)
 rename packages/form/{src => }/widgets/tree-select/index.en-US.md (93%)
 create mode 100644 packages/form/widgets/tree-select/index.ts
 rename packages/form/{src => }/widgets/tree-select/index.zh-CN.md (92%)
 rename packages/form/{src => }/widgets/tree-select/schema.ts (96%)
 rename packages/form/{src/widgets/tree-select/tree-select.widget.spec.ts => widgets/tree-select/widget.spec.ts} (97%)
 rename packages/form/{src/widgets/tree-select/tree-select.widget.ts => widgets/tree-select/widget.ts} (50%)

diff --git a/packages/form/src/module.ts b/packages/form/src/module.ts
index b72cad44af..8e1e6ecd68 100644
--- a/packages/form/src/module.ts
+++ b/packages/form/src/module.ts
@@ -6,7 +6,6 @@ import { FormsModule } from '@angular/forms';
 import { NzAutocompleteModule } from 'ng-zorro-antd/auto-complete';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzCardModule } from 'ng-zorro-antd/card';
-import { NzCascaderModule } from 'ng-zorro-antd/cascader';
 import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
 import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
 import { NzFormModule } from 'ng-zorro-antd/form';
@@ -14,18 +13,12 @@ import { NzGridModule } from 'ng-zorro-antd/grid';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 import { NzInputModule } from 'ng-zorro-antd/input';
 import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
-import { NzMentionModule } from 'ng-zorro-antd/mention';
 import { NzModalModule } from 'ng-zorro-antd/modal';
 import { NzRadioModule } from 'ng-zorro-antd/radio';
-import { NzRateModule } from 'ng-zorro-antd/rate';
 import { NzSelectModule } from 'ng-zorro-antd/select';
-import { NzSliderModule } from 'ng-zorro-antd/slider';
 import { NzSwitchModule } from 'ng-zorro-antd/switch';
-import { NzTagModule } from 'ng-zorro-antd/tag';
 import { NzTimePickerModule } from 'ng-zorro-antd/time-picker';
 import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
-import { NzTransferModule } from 'ng-zorro-antd/transfer';
-import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
 import { NzUploadModule } from 'ng-zorro-antd/upload';
 
 import { DelonLocaleModule } from '@delon/theme';
@@ -35,7 +28,6 @@ const ZORROS = [
   NzAutocompleteModule,
   NzButtonModule,
   NzCardModule,
-  NzCascaderModule,
   NzCheckboxModule,
   NzDatePickerModule,
   NzFormModule,
@@ -43,18 +35,12 @@ const ZORROS = [
   NzIconModule,
   NzInputModule,
   NzInputNumberModule,
-  NzMentionModule,
   NzModalModule,
   NzRadioModule,
-  NzRateModule,
   NzSelectModule,
-  NzSliderModule,
   NzSwitchModule,
-  NzTagModule,
   NzTimePickerModule,
   NzToolTipModule,
-  NzTransferModule,
-  NzTreeSelectModule,
   NzUploadModule
 ];
 
@@ -73,25 +59,18 @@ import { WidgetRegistry } from './widget.factory';
 import { ArrayWidget } from './widgets/array/array.widget';
 import { AutoCompleteWidget } from './widgets/autocomplete/autocomplete.widget';
 import { BooleanWidget } from './widgets/boolean/boolean.widget';
-import { CascaderWidget } from './widgets/cascader/cascader.widget';
 import { CheckboxWidget } from './widgets/checkbox/checkbox.widget';
 import { CustomWidget } from './widgets/custom/custom.widget';
 import { DateWidget } from './widgets/date/date.widget';
-import { MentionWidget } from './widgets/mention/mention.widget';
 import { NumberWidget } from './widgets/number/number.widget';
 import { NzWidgetRegistry } from './widgets/nz-widget.registry';
 import { ObjectWidget } from './widgets/object/object.widget';
 import { RadioWidget } from './widgets/radio/radio.widget';
-import { RateWidget } from './widgets/rate/rate.widget';
 import { SelectWidget } from './widgets/select/select.widget';
-import { SliderWidget } from './widgets/slider/slider.widget';
 import { StringWidget } from './widgets/string/string.widget';
-import { TagWidget } from './widgets/tag/tag.widget';
 import { TextWidget } from './widgets/text/text.widget';
 import { TextareaWidget } from './widgets/textarea/textarea.widget';
 import { TimeWidget } from './widgets/time/time.widget';
-import { TransferWidget } from './widgets/transfer/transfer.widget';
-import { TreeSelectWidget } from './widgets/tree-select/tree-select.widget';
 import { UploadWidget } from './widgets/upload/upload.widget';
 
 const WIDGETS = [
@@ -106,15 +85,8 @@ const WIDGETS = [
   BooleanWidget,
   TextareaWidget,
   SelectWidget,
-  TreeSelectWidget,
-  TagWidget,
   UploadWidget,
-  TransferWidget,
-  SliderWidget,
-  RateWidget,
   AutoCompleteWidget,
-  CascaderWidget,
-  MentionWidget,
   CustomWidget,
   TextWidget
 ];
diff --git a/packages/form/src/widgets/array/index.en-US.md b/packages/form/src/widgets/array/index.en-US.md
index 88566b5423..1129dadd3d 100644
--- a/packages/form/src/widgets/array/index.en-US.md
+++ b/packages/form/src/widgets/array/index.en-US.md
@@ -2,6 +2,7 @@
 title: array
 subtitle: Array
 type: Widgets
+order: 2
 ---
 
 Create array object, it's only valid when `schema.type="array"`.
diff --git a/packages/form/src/widgets/array/index.zh-CN.md b/packages/form/src/widgets/array/index.zh-CN.md
index fd179a3a5d..f8e4f8d5b9 100644
--- a/packages/form/src/widgets/array/index.zh-CN.md
+++ b/packages/form/src/widgets/array/index.zh-CN.md
@@ -2,6 +2,7 @@
 title: array
 subtitle: 数组
 type: Widgets
+order: 2
 ---
 
 创建对象数组，只对 `schema.type="array"` 时有效。
diff --git a/packages/form/src/widgets/boolean/index.en-US.md b/packages/form/src/widgets/boolean/index.en-US.md
index e229751769..821870a325 100644
--- a/packages/form/src/widgets/boolean/index.en-US.md
+++ b/packages/form/src/widgets/boolean/index.en-US.md
@@ -2,6 +2,7 @@
 title: boolean
 subtitle: Switch
 type: Widgets
+order: 4
 ---
 
 Switching Selector.
diff --git a/packages/form/src/widgets/boolean/index.zh-CN.md b/packages/form/src/widgets/boolean/index.zh-CN.md
index 50b568ae47..81488a03e2 100644
--- a/packages/form/src/widgets/boolean/index.zh-CN.md
+++ b/packages/form/src/widgets/boolean/index.zh-CN.md
@@ -2,6 +2,7 @@
 title: boolean
 subtitle: 开关
 type: Widgets
+order: 4
 ---
 
 开关选择器
diff --git a/packages/form/src/widgets/cascader/cascader.widget.html b/packages/form/src/widgets/cascader/cascader.widget.html
deleted file mode 100644
index 25fee31981..0000000000
--- a/packages/form/src/widgets/cascader/cascader.widget.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<sf-item-wrap [id]="id" [schema]="schema" [ui]="ui" [showError]="showError" [error]="error" [showTitle]="schema.title">
-  <nz-cascader
-    [nzDisabled]="disabled"
-    [nzSize]="ui.size!"
-    [ngModel]="value"
-    (ngModelChange)="_change($event)"
-    [nzOptions]="data"
-    [nzAllowClear]="ui.allowClear"
-    [nzAutoFocus]="ui.autoFocus"
-    [nzChangeOn]="ui.changeOn"
-    [nzChangeOnSelect]="ui.changeOnSelect"
-    [nzColumnClassName]="ui.columnClassName"
-    [nzExpandTrigger]="ui.expandTrigger!"
-    [nzMenuClassName]="ui.menuClassName"
-    [nzMenuStyle]="ui.menuStyle!"
-    [nzNotFoundContent]="ui.notFoundContent"
-    [nzLabelProperty]="ui.labelProperty || 'label'"
-    [nzValueProperty]="ui.valueProperty || 'value'"
-    [nzLoadData]="loadData"
-    [nzPlaceHolder]="ui.placeholder!"
-    [nzShowArrow]="showArrow"
-    [nzShowInput]="showInput"
-    [nzShowSearch]="ui.showSearch!"
-    (nzClear)="_clear()"
-    (nzVisibleChange)="_visibleChange($event)"
-    (nzSelectionChange)="_selectionChange($event)"
-  />
-</sf-item-wrap>
diff --git a/packages/form/src/widgets/checkbox/demo/simple.md b/packages/form/src/widgets/checkbox/demo/simple.md
index 62ff8d36e9..5a59a916b5 100644
--- a/packages/form/src/widgets/checkbox/demo/simple.md
+++ b/packages/form/src/widgets/checkbox/demo/simple.md
@@ -15,7 +15,8 @@ Simplest of usage.
 
 ```ts
 import { Component } from '@angular/core';
-import { SFCascaderWidgetSchema, SFCheckboxWidgetSchema, SFSchema } from '@delon/form';
+import { SFCheckboxWidgetSchema, SFSchema } from '@delon/form';
+import type { SFCascaderWidgetSchema } from '@delon/form/widgets/cascader';
 import { NzMessageService } from 'ng-zorro-antd/message';
 import { of, delay } from 'rxjs';
 
diff --git a/packages/form/src/widgets/custom/demo/simple.md b/packages/form/src/widgets/custom/demo/simple.md
index 697e520476..b31a7a19cf 100644
--- a/packages/form/src/widgets/custom/demo/simple.md
+++ b/packages/form/src/widgets/custom/demo/simple.md
@@ -42,7 +42,7 @@ import { NzMessageService } from 'ng-zorro-antd/message';
         </div>
       </ng-template>
       <ng-template sf-template="qr" let-i let-ui="ui" let-schema="schema">
-        <qr [value]="i.value"></qr>
+        <nz-qrcode [nzValue]="i.value" />
       </ng-template>
     </sf>
   `
diff --git a/packages/form/src/widgets/index.ts b/packages/form/src/widgets/index.ts
index 7c15132d9d..3eaf8ac1be 100644
--- a/packages/form/src/widgets/index.ts
+++ b/packages/form/src/widgets/index.ts
@@ -15,29 +15,14 @@ export * from './radio/schema';
 export * from './checkbox/checkbox.widget';
 export * from './checkbox/schema';
 export * from './boolean/boolean.widget';
-export * from './cascader/schema';
 export * from './textarea/textarea.widget';
 export * from './textarea/schema';
 export * from './select/select.widget';
 export * from './select/schema';
-export * from './tree-select/tree-select.widget';
-export * from './tree-select/schema';
-export * from './tag/tag.widget';
-export * from './tag/schema';
 export * from './upload/upload.widget';
 export * from './upload/schema';
-export * from './transfer/transfer.widget';
-export * from './transfer/schema';
-export * from './slider/slider.widget';
-export * from './slider/schema';
-export * from './rate/rate.widget';
-export * from './rate/schema';
 export * from './autocomplete/autocomplete.widget';
 export * from './autocomplete/schema';
-export * from './cascader/cascader.widget';
-export * from './cascader/schema';
-export * from './mention/mention.widget';
-export * from './mention/schema';
 export * from './text/text.widget';
 export * from './text/schema';
 export * from './custom/custom.widget';
diff --git a/packages/form/src/widgets/mention/mention.widget.html b/packages/form/src/widgets/mention/mention.widget.html
deleted file mode 100644
index 90c3c5bc23..0000000000
--- a/packages/form/src/widgets/mention/mention.widget.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<sf-item-wrap [id]="id" [schema]="schema" [ui]="ui" [showError]="showError" [error]="error" [showTitle]="schema.title">
-  <nz-mention
-    #mentions
-    [nzSuggestions]="data"
-    [nzValueWith]="i.valueWith"
-    [nzLoading]="loading"
-    [nzNotFoundContent]="i.notFoundContent"
-    [nzPlacement]="i.placement"
-    [nzPrefix]="i.prefix"
-    (nzOnSelect)="_select($event)"
-    (nzOnSearchChange)="_search($event)"
-  >
-    <input
-      *ngIf="ui.inputStyle !== 'textarea'"
-      nzMentionTrigger
-      nz-input
-      [attr.id]="id"
-      [disabled]="disabled"
-      [attr.disabled]="disabled"
-      [nzSize]="ui.size!"
-      [ngModel]="value"
-      (ngModelChange)="setValue($event)"
-      [attr.maxLength]="schema.maxLength || null"
-      [attr.placeholder]="ui.placeholder"
-      autocomplete="off"
-    />
-    <textarea
-      *ngIf="ui.inputStyle === 'textarea'"
-      nzMentionTrigger
-      nz-input
-      [attr.id]="id"
-      [disabled]="disabled"
-      [attr.disabled]="disabled"
-      [nzSize]="ui.size!"
-      [ngModel]="value"
-      (ngModelChange)="setValue($event)"
-      [attr.maxLength]="schema.maxLength || null"
-      [attr.placeholder]="ui.placeholder"
-      [nzAutosize]="i.autosize"
-    >
-    </textarea>
-  </nz-mention>
-</sf-item-wrap>
diff --git a/packages/form/src/widgets/number/index.en-US.md b/packages/form/src/widgets/number/index.en-US.md
index 60e7e01167..3add327866 100644
--- a/packages/form/src/widgets/number/index.en-US.md
+++ b/packages/form/src/widgets/number/index.en-US.md
@@ -2,6 +2,7 @@
 title: number
 subtitle: Input Number
 type: Widgets
+order: 5
 ---
 
 Enter a number within certain range with the mouse or keyboard.
diff --git a/packages/form/src/widgets/number/index.zh-CN.md b/packages/form/src/widgets/number/index.zh-CN.md
index 403e85c6f4..183f3ccc20 100644
--- a/packages/form/src/widgets/number/index.zh-CN.md
+++ b/packages/form/src/widgets/number/index.zh-CN.md
@@ -2,6 +2,7 @@
 title: number
 subtitle: 数字
 type: Widgets
+order: 5
 ---
 
 通过鼠标或键盘，输入范围内的数值
diff --git a/packages/form/src/widgets/nz-widget.registry.ts b/packages/form/src/widgets/nz-widget.registry.ts
index 0898894504..8196f71d47 100644
--- a/packages/form/src/widgets/nz-widget.registry.ts
+++ b/packages/form/src/widgets/nz-widget.registry.ts
@@ -1,24 +1,17 @@
 import { ArrayWidget } from './array/array.widget';
 import { AutoCompleteWidget } from './autocomplete/autocomplete.widget';
 import { BooleanWidget } from './boolean/boolean.widget';
-import { CascaderWidget } from './cascader/cascader.widget';
 import { CheckboxWidget } from './checkbox/checkbox.widget';
 import { CustomWidget } from './custom/custom.widget';
 import { DateWidget } from './date/date.widget';
-import { MentionWidget } from './mention/mention.widget';
 import { NumberWidget } from './number/number.widget';
 import { ObjectWidget } from './object/object.widget';
 import { RadioWidget } from './radio/radio.widget';
-import { RateWidget } from './rate/rate.widget';
 import { SelectWidget } from './select/select.widget';
-import { SliderWidget } from './slider/slider.widget';
 import { StringWidget } from './string/string.widget';
-import { TagWidget } from './tag/tag.widget';
 import { TextWidget } from './text/text.widget';
 import { TextareaWidget } from './textarea/textarea.widget';
 import { TimeWidget } from './time/time.widget';
-import { TransferWidget } from './transfer/transfer.widget';
-import { TreeSelectWidget } from './tree-select/tree-select.widget';
 import { UploadWidget } from './upload/upload.widget';
 import { WidgetRegistry } from '../widget.factory';
 
@@ -40,15 +33,8 @@ export class NzWidgetRegistry extends WidgetRegistry {
     this.register('boolean', BooleanWidget);
     this.register('textarea', TextareaWidget);
     this.register('select', SelectWidget);
-    this.register('tree-select', TreeSelectWidget);
-    this.register('tag', TagWidget);
     this.register('upload', UploadWidget);
-    this.register('transfer', TransferWidget);
-    this.register('slider', SliderWidget);
-    this.register('rate', RateWidget);
     this.register('autocomplete', AutoCompleteWidget);
-    this.register('cascader', CascaderWidget);
-    this.register('mention', MentionWidget);
     this.register('custom', CustomWidget);
 
     this.setDefault(StringWidget);
diff --git a/packages/form/src/widgets/object/index.en-US.md b/packages/form/src/widgets/object/index.en-US.md
index 03b9344dcd..ef537b2f88 100644
--- a/packages/form/src/widgets/object/index.en-US.md
+++ b/packages/form/src/widgets/object/index.en-US.md
@@ -2,6 +2,7 @@
 title: object
 subtitle: Object
 type: Widgets
+order: 1
 ---
 
 Create an object widget, valid only for `schema.type="object"`.
diff --git a/packages/form/src/widgets/object/index.zh-CN.md b/packages/form/src/widgets/object/index.zh-CN.md
index d94157f777..56739e0259 100644
--- a/packages/form/src/widgets/object/index.zh-CN.md
+++ b/packages/form/src/widgets/object/index.zh-CN.md
@@ -2,6 +2,7 @@
 title: object
 subtitle: 对象
 type: Widgets
+order: 1
 ---
 
 创建对象，只对 `schema.type="object"` 时有效。
diff --git a/packages/form/src/widgets/rate/rate.widget.html b/packages/form/src/widgets/rate/rate.widget.html
deleted file mode 100644
index a7c5e18e1d..0000000000
--- a/packages/form/src/widgets/rate/rate.widget.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<sf-item-wrap [id]="id" [schema]="schema" [ui]="ui" [showError]="showError" [error]="error" [showTitle]="schema.title">
-  <nz-rate
-    [nzDisabled]="disabled"
-    [ngModel]="value"
-    (ngModelChange)="setValue($event)"
-    [nzAllowClear]="allowClear"
-    [nzAllowHalf]="allowHalf"
-    [nzTooltips]="ui.tooltips || []"
-    [nzAutoFocus]="autoFocus"
-    [nzCount]="$any(count)"
-  />
-  <span *ngIf="hasText && formProperty.value" class="ant-rate-text">{{ text }}</span>
-</sf-item-wrap>
diff --git a/packages/form/src/widgets/select/index.en-US.md b/packages/form/src/widgets/select/index.en-US.md
index 86eb1046f3..1e47676607 100644
--- a/packages/form/src/widgets/select/index.en-US.md
+++ b/packages/form/src/widgets/select/index.en-US.md
@@ -2,6 +2,7 @@
 title: select
 subtitle: Select
 type: Widgets
+order: 6
 ---
 
 Select.
diff --git a/packages/form/src/widgets/select/index.zh-CN.md b/packages/form/src/widgets/select/index.zh-CN.md
index 063c0db520..79b45db6f9 100644
--- a/packages/form/src/widgets/select/index.zh-CN.md
+++ b/packages/form/src/widgets/select/index.zh-CN.md
@@ -2,6 +2,7 @@
 title: select
 subtitle: 选择器
 type: Widgets
+order: 6
 ---
 
 下拉选择器。
diff --git a/packages/form/src/widgets/slider/slider.widget.html b/packages/form/src/widgets/slider/slider.widget.html
deleted file mode 100644
index 5ec0c26c41..0000000000
--- a/packages/form/src/widgets/slider/slider.widget.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<sf-item-wrap [id]="id" [schema]="schema" [ui]="ui" [showError]="showError" [error]="error" [showTitle]="schema.title">
-  <nz-slider
-    [ngModel]="value"
-    (ngModelChange)="setValue($event)"
-    [nzDisabled]="disabled"
-    [nzRange]="ui.range"
-    [nzMin]="min"
-    [nzMax]="max"
-    [nzStep]="step"
-    [nzMarks]="marks"
-    [nzDots]="ui.dots"
-    [nzIncluded]="included"
-    [nzVertical]="ui.vertical"
-    [nzTipFormatter]="_formatter"
-    (nzOnAfterChange)="_afterChange($event)"
-  />
-</sf-item-wrap>
diff --git a/packages/form/src/widgets/string/index.en-US.md b/packages/form/src/widgets/string/index.en-US.md
index 0e5c69a03e..c6b191c6ef 100644
--- a/packages/form/src/widgets/string/index.en-US.md
+++ b/packages/form/src/widgets/string/index.en-US.md
@@ -2,6 +2,7 @@
 title: string
 subtitle: Input
 type: Widgets
+order: 3
 ---
 
 Default widget, A basic widget for getting the user input is a text field.
diff --git a/packages/form/src/widgets/string/index.zh-CN.md b/packages/form/src/widgets/string/index.zh-CN.md
index f68672367b..7767ec6ecf 100644
--- a/packages/form/src/widgets/string/index.zh-CN.md
+++ b/packages/form/src/widgets/string/index.zh-CN.md
@@ -2,6 +2,7 @@
 title: string
 subtitle: 文本框
 type: Widgets
+order: 3
 ---
 
 默认小部件，一般用于字符串元素。
diff --git a/packages/form/src/widgets/tag/tag.widget.html b/packages/form/src/widgets/tag/tag.widget.html
deleted file mode 100644
index feb5e91a6b..0000000000
--- a/packages/form/src/widgets/tag/tag.widget.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<sf-item-wrap [id]="id" [schema]="schema" [ui]="ui" [showError]="showError" [error]="error" [showTitle]="schema.title">
-  <ng-template #icon let-i>
-    <i
-      nz-icon
-      [nzType]="i.type"
-      [nzTheme]="i.theme"
-      [nzTwotoneColor]="i.twotoneColor"
-      [nzRotate]="i.rotate"
-      [nzIconfont]="i.iconfont"
-      [nzSpin]="i.spin"
-    ></i>
-  </ng-template>
-  <nz-tag
-    *ngFor="let i of data"
-    [nzMode]="ui.mode || 'checkable'"
-    [nzChecked]="i.checked"
-    (nzOnClose)="_close($event)"
-    (nzCheckedChange)="onChange(i)"
-  >
-    <ng-container *ngIf="i.prefixIcon">
-      <ng-template [ngTemplateOutlet]="icon" [ngTemplateOutletContext]="{ $implicit: i.prefixIcon }" />
-    </ng-container>
-    <span>{{ i.label }}</span>
-    <ng-container *ngIf="i.suffixIcon">
-      <ng-template [ngTemplateOutlet]="icon" [ngTemplateOutletContext]="{ $implicit: i.suffixIcon }" />
-    </ng-container>
-  </nz-tag>
-</sf-item-wrap>
diff --git a/packages/form/src/widgets/tag/tag.widget.ts b/packages/form/src/widgets/tag/tag.widget.ts
deleted file mode 100644
index 52a0e81aa0..0000000000
--- a/packages/form/src/widgets/tag/tag.widget.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Component, ViewEncapsulation } from '@angular/core';
-
-import { SFTagWidgetSchema } from './schema';
-import { SFValue } from '../../interface';
-import { SFSchemaEnum } from '../../schema';
-import { getData } from '../../utils';
-import { ControlUIWidget } from '../../widget';
-
-@Component({
-  selector: 'sf-tag',
-  templateUrl: './tag.widget.html',
-  preserveWhitespaces: false,
-  encapsulation: ViewEncapsulation.None
-})
-export class TagWidget extends ControlUIWidget<SFTagWidgetSchema> {
-  data: SFSchemaEnum[] = [];
-
-  reset(value: SFValue): void {
-    getData(this.schema, this.ui, value).subscribe(list => {
-      this.data = list;
-      this.detectChanges();
-    });
-  }
-
-  onChange(item: SFSchemaEnum): void {
-    item.checked = !item.checked;
-    this.updateValue();
-    if (this.ui.checkedChange) {
-      this.ui.checkedChange(item.checked);
-    }
-  }
-
-  _close(e: MouseEvent): void {
-    if (this.ui.onClose) this.ui.onClose(e);
-  }
-
-  private updateValue(): void {
-    this.formProperty.setValue(
-      this.data.filter(w => w.checked).map(i => i.value),
-      false
-    );
-  }
-}
diff --git a/packages/form/src/widgets/transfer/transfer.widget.html b/packages/form/src/widgets/transfer/transfer.widget.html
deleted file mode 100644
index 766e55b115..0000000000
--- a/packages/form/src/widgets/transfer/transfer.widget.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<sf-item-wrap [id]="id" [schema]="schema" [ui]="ui" [showError]="showError" [error]="error" [showTitle]="schema.title">
-  <nz-transfer
-    [nzDataSource]="$any(list)"
-    [nzTitles]="i.titles"
-    [nzOperations]="i.operations"
-    [nzListStyle]="ui.listStyle!"
-    [nzItemUnit]="i.itemUnit"
-    [nzItemsUnit]="i.itemsUnit"
-    [nzShowSearch]="ui.showSearch"
-    [nzFilterOption]="ui.filterOption"
-    [nzSearchPlaceholder]="ui.searchPlaceholder"
-    [nzNotFoundContent]="ui.notFoundContent"
-    [nzCanMove]="_canMove"
-    (nzChange)="_change($event)"
-    (nzSearchChange)="_searchChange($event)"
-    (nzSelectChange)="_selectChange($event)"
-  />
-</sf-item-wrap>
diff --git a/packages/form/src/widgets/tree-select/tree-select.widget.html b/packages/form/src/widgets/tree-select/tree-select.widget.html
deleted file mode 100644
index dbe3e76727..0000000000
--- a/packages/form/src/widgets/tree-select/tree-select.widget.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<sf-item-wrap [id]="id" [schema]="schema" [ui]="ui" [showError]="showError" [error]="error" [showTitle]="schema.title">
-  <nz-tree-select
-    [nzId]="id"
-    [nzAllowClear]="i.allowClear"
-    [nzPlaceHolder]="ui.placeholder!"
-    [nzDropdownStyle]="ui.dropdownStyle!"
-    [nzDropdownClassName]="ui.dropdownClassName"
-    [nzSize]="ui.size!"
-    [nzExpandedKeys]="ui.expandedKeys!"
-    [nzNotFoundContent]="ui.notFoundContent"
-    [nzMaxTagCount]="ui.maxTagCount!"
-    [nzMaxTagPlaceholder]="ui.maxTagPlaceholder || null"
-    [nzTreeTemplate]="ui.treeTemplate!"
-    [nzDisabled]="disabled"
-    [nzShowSearch]="i.showSearch"
-    [nzShowIcon]="i.showIcon"
-    [nzDropdownMatchSelectWidth]="i.dropdownMatchSelectWidth"
-    [nzMultiple]="i.multiple"
-    [nzHideUnMatched]="i.hideUnMatched"
-    [nzCheckable]="i.checkable"
-    [nzShowExpand]="i.showExpand"
-    [nzShowLine]="i.showLine"
-    [nzCheckStrictly]="i.checkStrictly"
-    [nzAsyncData]="asyncData"
-    [nzNodes]="$any(data)"
-    [nzDefaultExpandAll]="i.defaultExpandAll"
-    [nzDisplayWith]="i.displayWith!"
-    [ngModel]="value"
-    [nzVirtualHeight]="ui.virtualHeight!"
-    [nzVirtualItemSize]="ui.virtualItemSize || 28"
-    [nzVirtualMaxBufferPx]="ui.virtualMaxBufferPx || 500"
-    [nzVirtualMinBufferPx]="ui.virtualMinBufferPx || 28"
-    (ngModelChange)="change($event)"
-    (nzExpandChange)="expandChange($event)"
-  />
-</sf-item-wrap>
diff --git a/packages/form/src/widgets/cascader/demo/simple.md b/packages/form/widgets/cascader/demo/simple.md
similarity index 95%
rename from packages/form/src/widgets/cascader/demo/simple.md
rename to packages/form/widgets/cascader/demo/simple.md
index cf042d1e60..d12e5397fb 100644
--- a/packages/form/src/widgets/cascader/demo/simple.md
+++ b/packages/form/widgets/cascader/demo/simple.md
@@ -15,7 +15,8 @@ Simplest of usage.
 
 ```ts
 import { Component } from '@angular/core';
-import { SFCascaderWidgetSchema, SFSchema } from '@delon/form';
+import { SFSchema } from '@delon/form';
+import type { SFCascaderWidgetSchema } from '@delon/form/widgets/cascader';
 import { NzMessageService } from 'ng-zorro-antd/message';
 
 @Component({
diff --git a/packages/form/src/widgets/cascader/index.en-US.md b/packages/form/widgets/cascader/index.en-US.md
similarity index 92%
rename from packages/form/src/widgets/cascader/index.en-US.md
rename to packages/form/widgets/cascader/index.en-US.md
index 2133f875a4..858fa11a6b 100644
--- a/packages/form/src/widgets/cascader/index.en-US.md
+++ b/packages/form/widgets/cascader/index.en-US.md
@@ -1,11 +1,15 @@
 ---
 title: cascader
 subtitle: Cascader
-type: Widgets
+type: Non-built-in widgets
 ---
 
 Usually, it's used in province/city/district, company hierarchy, category of things, etc.
 
+## Import module
+
+Non-built-in modules, Should be import `CascaderWidgetModule` in [json-schema.module.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/shared/json-schema/json-schema.module.ts#L11).
+
 ## Note
 
 - Value of `default` or `formData` should always be an array, for example, city cascade may only save leaf node `value`, but you need to manually provide the whole data chain `value` array
diff --git a/packages/form/widgets/cascader/index.ts b/packages/form/widgets/cascader/index.ts
new file mode 100644
index 0000000000..dfd30c8898
--- /dev/null
+++ b/packages/form/widgets/cascader/index.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { DelonFormModule, WidgetRegistry } from '@delon/form';
+import { NzCascaderModule } from 'ng-zorro-antd/cascader';
+
+import { CascaderWidget } from './widget';
+
+export * from './widget';
+export * from './schema';
+
+@NgModule({
+  imports: [FormsModule, DelonFormModule, NzCascaderModule],
+  declarations: [CascaderWidget]
+})
+export class CascaderWidgetModule {
+  constructor(widgetRegistry: WidgetRegistry) {
+    widgetRegistry.register(CascaderWidget.KEY, CascaderWidget);
+  }
+}
diff --git a/packages/form/src/widgets/cascader/index.zh-CN.md b/packages/form/widgets/cascader/index.zh-CN.md
similarity index 92%
rename from packages/form/src/widgets/cascader/index.zh-CN.md
rename to packages/form/widgets/cascader/index.zh-CN.md
index 9faa425356..2d7280c692 100644
--- a/packages/form/src/widgets/cascader/index.zh-CN.md
+++ b/packages/form/widgets/cascader/index.zh-CN.md
@@ -1,11 +1,15 @@
 ---
 title: cascader
 subtitle: 级联选择
-type: Widgets
+type: Non-built-in widgets
 ---
 
 一般用于省市区，公司层级，事物分类等。
 
+## 导入模块
+
+非内置模块，需要额外在 [json-schema.module.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/shared/json-schema/json-schema.module.ts#L11) 导入 `CascaderWidgetModule`。
+
 ## 注意事项
 
 - `default` 或 `formData` 值始终应该保持一个数组，例如：城市级联可能只存储叶节点 `value`，此时需要手动处理并给出完整数据链 `value` 数组
diff --git a/packages/form/widgets/cascader/ng-package.json b/packages/form/widgets/cascader/ng-package.json
new file mode 100644
index 0000000000..9df62ad921
--- /dev/null
+++ b/packages/form/widgets/cascader/ng-package.json
@@ -0,0 +1,6 @@
+{
+  "lib": {
+    "flatModuleFile": "widget-cascader",
+    "entryFile": "index.ts"
+  }
+}
diff --git a/packages/form/src/widgets/cascader/schema.ts b/packages/form/widgets/cascader/schema.ts
similarity index 96%
rename from packages/form/src/widgets/cascader/schema.ts
rename to packages/form/widgets/cascader/schema.ts
index 09f7068c45..b3bcc9d09b 100644
--- a/packages/form/src/widgets/cascader/schema.ts
+++ b/packages/form/widgets/cascader/schema.ts
@@ -1,8 +1,8 @@
+import { SFUISchemaItem } from '@delon/form';
 import { NzCascaderExpandTrigger, NzCascaderOption, NzShowSearchOptions } from 'ng-zorro-antd/cascader';
 import { NgStyleInterface, NzSafeAny } from 'ng-zorro-antd/core/types';
 
-import { CascaderWidget } from './cascader.widget';
-import { SFUISchemaItem } from '../../schema/ui';
+import type { CascaderWidget } from './widget';
 
 export interface SFCascaderWidgetSchema extends SFUISchemaItem {
   /**
diff --git a/packages/form/src/widgets/cascader/cascader.widget.spec.ts b/packages/form/widgets/cascader/widget.spec.ts
similarity index 97%
rename from packages/form/src/widgets/cascader/cascader.widget.spec.ts
rename to packages/form/widgets/cascader/widget.spec.ts
index f0c60873a3..a5b9be2a25 100644
--- a/packages/form/src/widgets/cascader/cascader.widget.spec.ts
+++ b/packages/form/widgets/cascader/widget.spec.ts
@@ -3,8 +3,8 @@ import { ComponentFixture, fakeAsync } from '@angular/core/testing';
 
 import { createTestContext } from '@delon/testing';
 
-import { CascaderWidget } from './cascader.widget';
-import { configureSFTestSuite, SFPage, TestFormComponent } from '../../../spec/base.spec';
+import { CascaderWidget } from './widget';
+import { configureSFTestSuite, SFPage, TestFormComponent } from '../../spec/base.spec';
 
 describe('form: widget: cascader', () => {
   let fixture: ComponentFixture<TestFormComponent>;
diff --git a/packages/form/src/widgets/cascader/cascader.widget.ts b/packages/form/widgets/cascader/widget.ts
similarity index 56%
rename from packages/form/src/widgets/cascader/cascader.widget.ts
rename to packages/form/widgets/cascader/widget.ts
index 63ff4b8101..3c78f69318 100644
--- a/packages/form/src/widgets/cascader/cascader.widget.ts
+++ b/packages/form/widgets/cascader/widget.ts
@@ -1,21 +1,54 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 
+import { ControlUIWidget, SFSchemaEnum, SFValue, getData, toBool } from '@delon/form';
 import { NzCascaderOption } from 'ng-zorro-antd/cascader';
 import type { NzSafeAny } from 'ng-zorro-antd/core/types';
 
-import { SFCascaderWidgetSchema } from './schema';
-import { SFValue } from '../../interface';
-import { SFSchemaEnum } from '../../schema';
-import { getData, toBool } from '../../utils';
-import { ControlUIWidget } from '../../widget';
+import type { SFCascaderWidgetSchema } from './schema';
 
 @Component({
   selector: 'sf-cascader',
-  templateUrl: './cascader.widget.html',
+  template: `<sf-item-wrap
+    [id]="id"
+    [schema]="schema"
+    [ui]="ui"
+    [showError]="showError"
+    [error]="error"
+    [showTitle]="schema.title"
+  >
+    <nz-cascader
+      [nzDisabled]="disabled"
+      [nzSize]="ui.size!"
+      [ngModel]="value"
+      (ngModelChange)="_change($event)"
+      [nzOptions]="data"
+      [nzAllowClear]="ui.allowClear"
+      [nzAutoFocus]="ui.autoFocus"
+      [nzChangeOn]="ui.changeOn"
+      [nzChangeOnSelect]="ui.changeOnSelect"
+      [nzColumnClassName]="ui.columnClassName"
+      [nzExpandTrigger]="ui.expandTrigger!"
+      [nzMenuClassName]="ui.menuClassName"
+      [nzMenuStyle]="ui.menuStyle!"
+      [nzNotFoundContent]="ui.notFoundContent"
+      [nzLabelProperty]="ui.labelProperty || 'label'"
+      [nzValueProperty]="ui.valueProperty || 'value'"
+      [nzLoadData]="loadData"
+      [nzPlaceHolder]="ui.placeholder!"
+      [nzShowArrow]="showArrow"
+      [nzShowInput]="showInput"
+      [nzShowSearch]="ui.showSearch!"
+      (nzClear)="_clear()"
+      (nzVisibleChange)="_visibleChange($event)"
+      (nzSelectionChange)="_selectionChange($event)"
+    />
+  </sf-item-wrap>`,
   preserveWhitespaces: false,
   encapsulation: ViewEncapsulation.None
 })
 export class CascaderWidget extends ControlUIWidget<SFCascaderWidgetSchema> implements OnInit {
+  static readonly KEY = 'cascader';
+
   clearText!: string;
   showArrow!: boolean;
   showInput!: boolean;
diff --git a/packages/form/src/widgets/mention/demo/simple.md b/packages/form/widgets/mention/demo/simple.md
similarity index 93%
rename from packages/form/src/widgets/mention/demo/simple.md
rename to packages/form/widgets/mention/demo/simple.md
index 3f11d108a6..4b7446c3da 100644
--- a/packages/form/src/widgets/mention/demo/simple.md
+++ b/packages/form/widgets/mention/demo/simple.md
@@ -15,7 +15,8 @@ Simplest of usage.
 
 ```ts
 import { Component } from '@angular/core';
-import { SFMentionWidgetSchema, SFSchema } from '@delon/form';
+import { SFSchema } from '@delon/form';
+import type { SFMentionWidgetSchema } from '@delon/form/widgets/mention';
 import { MentionOnSearchTypes } from 'ng-zorro-antd/mention';
 import { NzMessageService } from 'ng-zorro-antd/message';
 import { of, delay } from 'rxjs';
diff --git a/packages/form/src/widgets/mention/index.en-US.md b/packages/form/widgets/mention/index.en-US.md
similarity index 87%
rename from packages/form/src/widgets/mention/index.en-US.md
rename to packages/form/widgets/mention/index.en-US.md
index 07032bb3b6..1629117690 100644
--- a/packages/form/src/widgets/mention/index.en-US.md
+++ b/packages/form/widgets/mention/index.en-US.md
@@ -1,11 +1,15 @@
 ---
 title: mention
 subtitle: Mention
-type: Widgets
+type: Non-built-in widgets
 ---
 
 Mention widget.
 
+## Import module
+
+Non-built-in modules, Should be import `MentionWidgetModule` in [json-schema.module.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/shared/json-schema/json-schema.module.ts#L11).
+
 ## Note
 
 - You **must** set `valueWith` parameter if there is no `label` property in data.
diff --git a/packages/form/widgets/mention/index.ts b/packages/form/widgets/mention/index.ts
new file mode 100644
index 0000000000..d6d9db8080
--- /dev/null
+++ b/packages/form/widgets/mention/index.ts
@@ -0,0 +1,22 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { DelonFormModule, WidgetRegistry } from '@delon/form';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { NzMentionModule } from 'ng-zorro-antd/mention';
+
+import { MentionWidget } from './widget';
+
+export * from './widget';
+export * from './schema';
+
+@NgModule({
+  imports: [FormsModule, DelonFormModule, NzMentionModule, NzInputModule, CommonModule],
+  declarations: [MentionWidget]
+})
+export class MentionWidgetModule {
+  constructor(widgetRegistry: WidgetRegistry) {
+    widgetRegistry.register(MentionWidget.KEY, MentionWidget);
+  }
+}
diff --git a/packages/form/src/widgets/mention/index.zh-CN.md b/packages/form/widgets/mention/index.zh-CN.md
similarity index 87%
rename from packages/form/src/widgets/mention/index.zh-CN.md
rename to packages/form/widgets/mention/index.zh-CN.md
index 4fdc7e8f1b..53dac63338 100644
--- a/packages/form/src/widgets/mention/index.zh-CN.md
+++ b/packages/form/widgets/mention/index.zh-CN.md
@@ -1,11 +1,15 @@
 ---
 title: mention
 subtitle: 提及
-type: Widgets
+type: Non-built-in widgets
 ---
 
 提及组件。
 
+## 导入模块
+
+非内置模块，需要额外在 [json-schema.module.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/shared/json-schema/json-schema.module.ts#L11) 导入 `MentionWidgetModule`。
+
 ## 注意事项
 
 - 若数据中不包括 `label` 属性，则**务必**指定 `valueWith` 参数。
diff --git a/packages/form/src/widgets/mention/schema.ts b/packages/form/widgets/mention/schema.ts
similarity index 93%
rename from packages/form/src/widgets/mention/schema.ts
rename to packages/form/widgets/mention/schema.ts
index c05b4a813f..2af590e4fb 100644
--- a/packages/form/src/widgets/mention/schema.ts
+++ b/packages/form/widgets/mention/schema.ts
@@ -1,12 +1,10 @@
 import { Observable } from 'rxjs';
 
+import type { SFSchemaEnumType, SFUISchemaItem } from '@delon/form';
 import { NzSafeAny, NzSizeLDSType } from 'ng-zorro-antd/core/types';
 import { AutoSizeType } from 'ng-zorro-antd/input';
 import { MentionOnSearchTypes } from 'ng-zorro-antd/mention';
 
-import { SFSchemaEnumType } from '../../schema';
-import { SFUISchemaItem } from '../../schema/ui';
-
 export interface SFMentionWidgetSchema extends SFUISchemaItem {
   /**
    * 异步静态数据源
diff --git a/packages/form/src/widgets/mention/mention.widget.spec.ts b/packages/form/widgets/mention/widget.spec.ts
similarity index 94%
rename from packages/form/src/widgets/mention/mention.widget.spec.ts
rename to packages/form/widgets/mention/widget.spec.ts
index ed1cf63304..8209d764ce 100644
--- a/packages/form/src/widgets/mention/mention.widget.spec.ts
+++ b/packages/form/widgets/mention/widget.spec.ts
@@ -2,12 +2,12 @@ import { DebugElement } from '@angular/core';
 import { ComponentFixture, fakeAsync } from '@angular/core/testing';
 import { of } from 'rxjs';
 
+import type { SFSchema } from '@delon/form';
 import { createTestContext } from '@delon/testing';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 
-import { MentionWidget } from './mention.widget';
-import { configureSFTestSuite, SFPage, TestFormComponent } from '../../../spec/base.spec';
-import { SFSchema } from '../../../src/schema/index';
+import { MentionWidget } from './widget';
+import { configureSFTestSuite, SFPage, TestFormComponent } from '../../spec/base.spec';
 
 const DATA = ['asdf', 'cipchk', '中文', 'にほんご'];
 
diff --git a/packages/form/src/widgets/mention/mention.widget.ts b/packages/form/widgets/mention/widget.ts
similarity index 59%
rename from packages/form/src/widgets/mention/mention.widget.ts
rename to packages/form/widgets/mention/widget.ts
index 3e1f88d725..a7db786b5d 100644
--- a/packages/form/src/widgets/mention/mention.widget.ts
+++ b/packages/form/widgets/mention/widget.ts
@@ -1,22 +1,70 @@
 import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
 import { map, tap } from 'rxjs';
 
+import { ControlUIWidget, SFSchemaEnum, SFValue, getData, getEnum } from '@delon/form';
 import type { NzSafeAny } from 'ng-zorro-antd/core/types';
 import { MentionOnSearchTypes, NzMentionComponent } from 'ng-zorro-antd/mention';
 
-import { SFMentionWidgetSchema } from './schema';
-import { SFValue } from '../../interface';
-import { SFSchemaEnum } from '../../schema';
-import { getData, getEnum } from '../../utils';
-import { ControlUIWidget } from '../../widget';
+import type { SFMentionWidgetSchema } from './schema';
 
 @Component({
   selector: 'sf-mention',
-  templateUrl: './mention.widget.html',
+  template: `<sf-item-wrap
+    [id]="id"
+    [schema]="schema"
+    [ui]="ui"
+    [showError]="showError"
+    [error]="error"
+    [showTitle]="schema.title"
+  >
+    <nz-mention
+      #mentions
+      [nzSuggestions]="data"
+      [nzValueWith]="i.valueWith"
+      [nzLoading]="loading"
+      [nzNotFoundContent]="i.notFoundContent"
+      [nzPlacement]="i.placement"
+      [nzPrefix]="i.prefix"
+      (nzOnSelect)="_select($event)"
+      (nzOnSearchChange)="_search($event)"
+    >
+      <input
+        *ngIf="ui.inputStyle !== 'textarea'"
+        nzMentionTrigger
+        nz-input
+        [attr.id]="id"
+        [disabled]="disabled"
+        [attr.disabled]="disabled"
+        [nzSize]="ui.size!"
+        [ngModel]="value"
+        (ngModelChange)="setValue($event)"
+        [attr.maxLength]="schema.maxLength || null"
+        [attr.placeholder]="ui.placeholder"
+        autocomplete="off"
+      />
+      <textarea
+        *ngIf="ui.inputStyle === 'textarea'"
+        nzMentionTrigger
+        nz-input
+        [attr.id]="id"
+        [disabled]="disabled"
+        [attr.disabled]="disabled"
+        [nzSize]="ui.size!"
+        [ngModel]="value"
+        (ngModelChange)="setValue($event)"
+        [attr.maxLength]="schema.maxLength || null"
+        [attr.placeholder]="ui.placeholder"
+        [nzAutosize]="i.autosize"
+      >
+      </textarea>
+    </nz-mention>
+  </sf-item-wrap>`,
   preserveWhitespaces: false,
   encapsulation: ViewEncapsulation.None
 })
 export class MentionWidget extends ControlUIWidget<SFMentionWidgetSchema> implements OnInit {
+  static readonly KEY = 'mention';
+
   @ViewChild('mentions', { static: true }) private mentionChild!: NzMentionComponent;
   data: SFSchemaEnum[] = [];
   i: NzSafeAny;
diff --git a/packages/form/src/widgets/rate/demo/simple.md b/packages/form/widgets/rate/demo/simple.md
similarity index 90%
rename from packages/form/src/widgets/rate/demo/simple.md
rename to packages/form/widgets/rate/demo/simple.md
index 2da2d71114..b30b278dab 100644
--- a/packages/form/src/widgets/rate/demo/simple.md
+++ b/packages/form/widgets/rate/demo/simple.md
@@ -15,7 +15,8 @@ Simplest of usage.
 
 ```ts
 import { Component } from '@angular/core';
-import { SFRateWidgetSchema, SFSchema } from '@delon/form';
+import { SFSchema } from '@delon/form';
+import type { SFRateWidgetSchema } from '@delon/form/widgets/rate';
 import { NzMessageService } from 'ng-zorro-antd/message';
 
 @Component({
diff --git a/packages/form/src/widgets/rate/index.en-US.md b/packages/form/widgets/rate/index.en-US.md
similarity index 75%
rename from packages/form/src/widgets/rate/index.en-US.md
rename to packages/form/widgets/rate/index.en-US.md
index 1effb25674..0dbe11ca9c 100644
--- a/packages/form/src/widgets/rate/index.en-US.md
+++ b/packages/form/widgets/rate/index.en-US.md
@@ -1,11 +1,15 @@
 ---
 title: rate
 subtitle: Rate
-type: Widgets
+type: Non-built-in widgets
 ---
 
 A quick rating operation on something.
 
+## Import module
+
+Non-built-in modules, Should be import `RateWidgetModule` in [json-schema.module.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/shared/json-schema/json-schema.module.ts#L11).
+
 ## API
 
 ### schema
diff --git a/packages/form/widgets/rate/index.ts b/packages/form/widgets/rate/index.ts
new file mode 100644
index 0000000000..89b91dd35f
--- /dev/null
+++ b/packages/form/widgets/rate/index.ts
@@ -0,0 +1,21 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { DelonFormModule, WidgetRegistry } from '@delon/form';
+import { NzRateModule } from 'ng-zorro-antd/rate';
+
+import { RateWidget } from './widget';
+
+export * from './widget';
+export * from './schema';
+
+@NgModule({
+  imports: [FormsModule, DelonFormModule, NzRateModule, CommonModule],
+  declarations: [RateWidget]
+})
+export class RateWidgetModule {
+  constructor(widgetRegistry: WidgetRegistry) {
+    widgetRegistry.register(RateWidget.KEY, RateWidget);
+  }
+}
diff --git a/packages/form/src/widgets/rate/index.zh-CN.md b/packages/form/widgets/rate/index.zh-CN.md
similarity index 75%
rename from packages/form/src/widgets/rate/index.zh-CN.md
rename to packages/form/widgets/rate/index.zh-CN.md
index 7e917278f4..911776498c 100644
--- a/packages/form/src/widgets/rate/index.zh-CN.md
+++ b/packages/form/widgets/rate/index.zh-CN.md
@@ -1,11 +1,15 @@
 ---
 title: rate
 subtitle: 评分
-type: Widgets
+type: Non-built-in widgets
 ---
 
 对评价进行展示，对事物进行快速的评级操作。
 
+## 导入模块
+
+非内置模块，需要额外在 [json-schema.module.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/shared/json-schema/json-schema.module.ts#L11) 导入 `RateWidgetModule`。
+
 ## API
 
 ### schema 属性
diff --git a/packages/form/src/widgets/rate/schema.ts b/packages/form/widgets/rate/schema.ts
similarity index 89%
rename from packages/form/src/widgets/rate/schema.ts
rename to packages/form/widgets/rate/schema.ts
index 6d5f7d6274..47f14d3d08 100644
--- a/packages/form/src/widgets/rate/schema.ts
+++ b/packages/form/widgets/rate/schema.ts
@@ -1,4 +1,4 @@
-import { SFUISchemaItem } from '../../schema/ui';
+import type { SFUISchemaItem } from '@delon/form';
 
 export interface SFRateWidgetSchema extends SFUISchemaItem {
   /**
diff --git a/packages/form/src/widgets/rate/rate.widget.spec.ts b/packages/form/widgets/rate/widget.spec.ts
similarity index 98%
rename from packages/form/src/widgets/rate/rate.widget.spec.ts
rename to packages/form/widgets/rate/widget.spec.ts
index 847fbf6a36..30ae9bca1d 100644
--- a/packages/form/src/widgets/rate/rate.widget.spec.ts
+++ b/packages/form/widgets/rate/widget.spec.ts
@@ -3,7 +3,7 @@ import { ComponentFixture, fakeAsync } from '@angular/core/testing';
 
 import { createTestContext } from '@delon/testing';
 
-import { configureSFTestSuite, SFPage, TestFormComponent } from '../../../spec/base.spec';
+import { configureSFTestSuite, SFPage, TestFormComponent } from '../../spec/base.spec';
 
 describe('form: widget: rate', () => {
   let fixture: ComponentFixture<TestFormComponent>;
diff --git a/packages/form/src/widgets/rate/rate.widget.ts b/packages/form/widgets/rate/widget.ts
similarity index 52%
rename from packages/form/src/widgets/rate/rate.widget.ts
rename to packages/form/widgets/rate/widget.ts
index fd4e565b91..81d6191d5f 100644
--- a/packages/form/src/widgets/rate/rate.widget.ts
+++ b/packages/form/widgets/rate/widget.ts
@@ -1,16 +1,37 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 
-import { SFRateWidgetSchema } from './schema';
-import { toBool } from '../../utils';
-import { ControlUIWidget } from '../../widget';
+import { ControlUIWidget, toBool } from '@delon/form';
+
+import type { SFRateWidgetSchema } from './schema';
 
 @Component({
   selector: 'sf-rate',
-  templateUrl: './rate.widget.html',
+  template: `<sf-item-wrap
+    [id]="id"
+    [schema]="schema"
+    [ui]="ui"
+    [showError]="showError"
+    [error]="error"
+    [showTitle]="schema.title"
+  >
+    <nz-rate
+      [nzDisabled]="disabled"
+      [ngModel]="value"
+      (ngModelChange)="setValue($event)"
+      [nzAllowClear]="allowClear"
+      [nzAllowHalf]="allowHalf"
+      [nzTooltips]="ui.tooltips || []"
+      [nzAutoFocus]="autoFocus"
+      [nzCount]="$any(count)"
+    />
+    <span *ngIf="hasText && formProperty.value" class="ant-rate-text">{{ text }}</span>
+  </sf-item-wrap>`,
   preserveWhitespaces: false,
   encapsulation: ViewEncapsulation.None
 })
 export class RateWidget extends ControlUIWidget<SFRateWidgetSchema> implements OnInit {
+  static readonly KEY = 'rate';
+
   count!: number;
   allowHalf!: boolean;
   allowClear!: boolean;
diff --git a/packages/form/src/widgets/slider/demo/simple.md b/packages/form/widgets/slider/demo/simple.md
similarity index 89%
rename from packages/form/src/widgets/slider/demo/simple.md
rename to packages/form/widgets/slider/demo/simple.md
index 1edbe73ef5..a6b4d9b326 100644
--- a/packages/form/src/widgets/slider/demo/simple.md
+++ b/packages/form/widgets/slider/demo/simple.md
@@ -15,7 +15,8 @@ Simplest of usage.
 
 ```ts
 import { Component } from '@angular/core';
-import { SFSchema, SFSliderWidgetSchema } from '@delon/form';
+import { SFSchema } from '@delon/form';
+import type { SFSliderWidgetSchema } from '@delon/form/widgets/slider';
 import { NzMessageService } from 'ng-zorro-antd/message';
 
 @Component({
diff --git a/packages/form/src/widgets/slider/index.en-US.md b/packages/form/widgets/slider/index.en-US.md
similarity index 85%
rename from packages/form/src/widgets/slider/index.en-US.md
rename to packages/form/widgets/slider/index.en-US.md
index 76837de082..616617be40 100644
--- a/packages/form/src/widgets/slider/index.en-US.md
+++ b/packages/form/widgets/slider/index.en-US.md
@@ -1,11 +1,15 @@
 ---
-title: range
+title: slider
 subtitle: Slider
-type: Widgets
+type: Non-built-in widgets
 ---
 
 A Slider component for displaying current value and intervals in range.
 
+## Import module
+
+Non-built-in modules, Should be import `SliderWidgetModule` in [json-schema.module.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/shared/json-schema/json-schema.module.ts#L11).
+
 ## Notice
 
 - Ingored `exclusiveMinimum`, `exclusiveMaximum`
diff --git a/packages/form/widgets/slider/index.ts b/packages/form/widgets/slider/index.ts
new file mode 100644
index 0000000000..b61dc1ee42
--- /dev/null
+++ b/packages/form/widgets/slider/index.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { DelonFormModule, WidgetRegistry } from '@delon/form';
+import { NzSliderModule } from 'ng-zorro-antd/slider';
+
+import { SliderWidget } from './widget';
+
+export * from './widget';
+export * from './schema';
+
+@NgModule({
+  imports: [FormsModule, DelonFormModule, NzSliderModule],
+  declarations: [SliderWidget]
+})
+export class SliderWidgetModule {
+  constructor(widgetRegistry: WidgetRegistry) {
+    widgetRegistry.register(SliderWidget.KEY, SliderWidget);
+  }
+}
diff --git a/packages/form/src/widgets/slider/index.zh-CN.md b/packages/form/widgets/slider/index.zh-CN.md
similarity index 82%
rename from packages/form/src/widgets/slider/index.zh-CN.md
rename to packages/form/widgets/slider/index.zh-CN.md
index 5527b63029..51e96a37e3 100644
--- a/packages/form/src/widgets/slider/index.zh-CN.md
+++ b/packages/form/widgets/slider/index.zh-CN.md
@@ -1,11 +1,15 @@
 ---
-title: range
+title: slider
 subtitle: 滑动输入条
-type: Widgets
+type: Non-built-in widgets
 ---
 
 滑动型输入器，展示当前值和可选范围。
 
+## 导入模块
+
+非内置模块，需要额外在 [json-schema.module.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/shared/json-schema/json-schema.module.ts#L11) 导入 `SliderWidgetModule`。
+
 ## 注意事项
 
 - 强制忽略 `exclusiveMinimum`、`exclusiveMaximum`
diff --git a/packages/form/src/widgets/slider/schema.ts b/packages/form/widgets/slider/schema.ts
similarity index 94%
rename from packages/form/src/widgets/slider/schema.ts
rename to packages/form/widgets/slider/schema.ts
index e316a843ec..3bbe805457 100644
--- a/packages/form/src/widgets/slider/schema.ts
+++ b/packages/form/widgets/slider/schema.ts
@@ -1,7 +1,6 @@
+import type { SFUISchemaItem } from '@delon/form';
 import { NzMarks, NzSliderValue } from 'ng-zorro-antd/slider';
 
-import { SFUISchemaItem } from '../../schema/ui';
-
 export interface SFSliderWidgetSchema extends SFUISchemaItem {
   /**
    * 当添加该属性时，启动双滑块模式
diff --git a/packages/form/src/widgets/slider/slider.widget.spec.ts b/packages/form/widgets/slider/widget.spec.ts
similarity index 95%
rename from packages/form/src/widgets/slider/slider.widget.spec.ts
rename to packages/form/widgets/slider/widget.spec.ts
index 190fe63969..2f715ff50b 100644
--- a/packages/form/src/widgets/slider/slider.widget.spec.ts
+++ b/packages/form/widgets/slider/widget.spec.ts
@@ -1,13 +1,13 @@
 import { DebugElement } from '@angular/core';
 import { ComponentFixture, fakeAsync } from '@angular/core/testing';
 
+import { SFSchema } from '@delon/form';
 import { createTestContext } from '@delon/testing';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 import { NzSliderComponent } from 'ng-zorro-antd/slider';
 
-import { SliderWidget } from './slider.widget';
-import { configureSFTestSuite, SFPage, TestFormComponent } from '../../../spec/base.spec';
-import { SFSchema } from '../../../src/schema/index';
+import { SliderWidget } from './widget';
+import { configureSFTestSuite, SFPage, TestFormComponent } from '../../spec/base.spec';
 
 describe('form: widget: slider', () => {
   let fixture: ComponentFixture<TestFormComponent>;
diff --git a/packages/form/src/widgets/slider/slider.widget.ts b/packages/form/widgets/slider/widget.ts
similarity index 59%
rename from packages/form/src/widgets/slider/slider.widget.ts
rename to packages/form/widgets/slider/widget.ts
index 459b4a8839..ba4d8910ea 100644
--- a/packages/form/src/widgets/slider/slider.widget.ts
+++ b/packages/form/widgets/slider/widget.ts
@@ -1,17 +1,42 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 
+import { ControlUIWidget } from '@delon/form';
 import { NzMarks, NzSliderValue } from 'ng-zorro-antd/slider';
 
-import { SFSliderWidgetSchema } from './schema';
-import { ControlUIWidget } from '../../widget';
+import type { SFSliderWidgetSchema } from './schema';
 
 @Component({
   selector: 'sf-slider',
-  templateUrl: './slider.widget.html',
+  template: `<sf-item-wrap
+    [id]="id"
+    [schema]="schema"
+    [ui]="ui"
+    [showError]="showError"
+    [error]="error"
+    [showTitle]="schema.title"
+  >
+    <nz-slider
+      [ngModel]="value"
+      (ngModelChange)="setValue($event)"
+      [nzDisabled]="disabled"
+      [nzRange]="ui.range"
+      [nzMin]="min"
+      [nzMax]="max"
+      [nzStep]="step"
+      [nzMarks]="marks"
+      [nzDots]="ui.dots"
+      [nzIncluded]="included"
+      [nzVertical]="ui.vertical"
+      [nzTipFormatter]="_formatter"
+      (nzOnAfterChange)="_afterChange($event)"
+    />
+  </sf-item-wrap>`,
   preserveWhitespaces: false,
   encapsulation: ViewEncapsulation.None
 })
 export class SliderWidget extends ControlUIWidget<SFSliderWidgetSchema> implements OnInit {
+  static readonly KEY = 'slider';
+
   min!: number;
   max!: number;
   step!: number;
diff --git a/packages/form/src/widgets/tag/demo/simple.md b/packages/form/widgets/tag/demo/simple.md
similarity index 93%
rename from packages/form/src/widgets/tag/demo/simple.md
rename to packages/form/widgets/tag/demo/simple.md
index 0ee04cce70..6fcfa18bb7 100644
--- a/packages/form/src/widgets/tag/demo/simple.md
+++ b/packages/form/widgets/tag/demo/simple.md
@@ -15,7 +15,8 @@ Simplest of usage.
 
 ```ts
 import { Component } from '@angular/core';
-import { SFIcon, SFSchema, SFTagWidgetSchema } from '@delon/form';
+import { SFIcon, SFSchema } from '@delon/form';
+import type { SFTagWidgetSchema } from '@delon/form/widgets/tag';
 import { NzMessageService } from 'ng-zorro-antd/message';
 import { of, delay } from 'rxjs';
 
diff --git a/packages/form/src/widgets/tag/index.en-US.md b/packages/form/widgets/tag/index.en-US.md
similarity index 75%
rename from packages/form/src/widgets/tag/index.en-US.md
rename to packages/form/widgets/tag/index.en-US.md
index fc0e5523fe..8514e22c8a 100644
--- a/packages/form/src/widgets/tag/index.en-US.md
+++ b/packages/form/widgets/tag/index.en-US.md
@@ -1,11 +1,15 @@
 ---
 title: tag
 subtitle: Tag
-type: Widgets
+type: Non-built-in widgets
 ---
 
 Tag for categorizing or markup, **Notice:** Just only supported `checkable` tag mode.
 
+## Import module
+
+Non-built-in modules, Should be import `TagWidgetModule` in [json-schema.module.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/shared/json-schema/json-schema.module.ts#L11).
+
 ## API
 
 ### schema
diff --git a/packages/form/widgets/tag/index.ts b/packages/form/widgets/tag/index.ts
new file mode 100644
index 0000000000..be4562e563
--- /dev/null
+++ b/packages/form/widgets/tag/index.ts
@@ -0,0 +1,22 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { DelonFormModule, WidgetRegistry } from '@delon/form';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzTagModule } from 'ng-zorro-antd/tag';
+
+import { TagWidget } from './widget';
+
+export * from './widget';
+export * from './schema';
+
+@NgModule({
+  imports: [FormsModule, DelonFormModule, NzTagModule, NzIconModule, CommonModule],
+  declarations: [TagWidget]
+})
+export class TagWidgetModule {
+  constructor(widgetRegistry: WidgetRegistry) {
+    widgetRegistry.register(TagWidget.KEY, TagWidget);
+  }
+}
diff --git a/packages/form/src/widgets/tag/index.zh-CN.md b/packages/form/widgets/tag/index.zh-CN.md
similarity index 75%
rename from packages/form/src/widgets/tag/index.zh-CN.md
rename to packages/form/widgets/tag/index.zh-CN.md
index 648512508c..d96a7329f5 100644
--- a/packages/form/src/widgets/tag/index.zh-CN.md
+++ b/packages/form/widgets/tag/index.zh-CN.md
@@ -1,11 +1,15 @@
 ---
 title: tag
 subtitle: 标签
-type: Widgets
+type: Non-built-in widgets
 ---
 
 进行标记和分类的小标签，**注：** 只支持 `checkable` 标签模式。
 
+## 导入模块
+
+非内置模块，需要额外在 [json-schema.module.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/shared/json-schema/json-schema.module.ts#L11) 导入 `TagWidgetModule`。
+
 ## API
 
 ### schema 属性
diff --git a/packages/form/src/widgets/tag/schema.ts b/packages/form/widgets/tag/schema.ts
similarity index 83%
rename from packages/form/src/widgets/tag/schema.ts
rename to packages/form/widgets/tag/schema.ts
index 46904ffb83..b4618e7b01 100644
--- a/packages/form/src/widgets/tag/schema.ts
+++ b/packages/form/widgets/tag/schema.ts
@@ -1,7 +1,6 @@
 import { Observable } from 'rxjs';
 
-import { SFSchemaEnumType } from '../../schema';
-import { SFUISchemaItem } from '../../schema/ui';
+import type { SFSchemaEnumType, SFUISchemaItem } from '@delon/form';
 
 export interface SFTagWidgetSchema extends SFUISchemaItem {
   /**
diff --git a/packages/form/src/widgets/tag/tag.widget.spec.ts b/packages/form/widgets/tag/widget.spec.ts
similarity index 98%
rename from packages/form/src/widgets/tag/tag.widget.spec.ts
rename to packages/form/widgets/tag/widget.spec.ts
index 2939caf4b4..867079e035 100644
--- a/packages/form/src/widgets/tag/tag.widget.spec.ts
+++ b/packages/form/widgets/tag/widget.spec.ts
@@ -1,12 +1,12 @@
 import { DebugElement } from '@angular/core';
 import { ComponentFixture, fakeAsync } from '@angular/core/testing';
 
+import { SFSchema } from '@delon/form';
 import { createTestContext } from '@delon/testing';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 import { NzTagComponent } from 'ng-zorro-antd/tag';
 
-import { configureSFTestSuite, SFPage, TestFormComponent } from '../../../spec/base.spec';
-import { SFSchema } from '../../../src/schema/index';
+import { configureSFTestSuite, SFPage, TestFormComponent } from '../../spec/base.spec';
 
 describe('form: widget: tag', () => {
   let fixture: ComponentFixture<TestFormComponent>;
diff --git a/packages/form/widgets/tag/widget.ts b/packages/form/widgets/tag/widget.ts
new file mode 100644
index 0000000000..0aa379fbc3
--- /dev/null
+++ b/packages/form/widgets/tag/widget.ts
@@ -0,0 +1,77 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+import { ControlUIWidget, SFSchemaEnum, SFValue, getData } from '@delon/form';
+
+import type { SFTagWidgetSchema } from './schema';
+
+@Component({
+  selector: 'sf-tag',
+  template: `<sf-item-wrap
+    [id]="id"
+    [schema]="schema"
+    [ui]="ui"
+    [showError]="showError"
+    [error]="error"
+    [showTitle]="schema.title"
+  >
+    <ng-template #icon let-i>
+      <i
+        nz-icon
+        [nzType]="i.type"
+        [nzTheme]="i.theme"
+        [nzTwotoneColor]="i.twotoneColor"
+        [nzRotate]="i.rotate"
+        [nzIconfont]="i.iconfont"
+        [nzSpin]="i.spin"
+      ></i>
+    </ng-template>
+    <nz-tag
+      *ngFor="let i of data"
+      [nzMode]="ui.mode || 'checkable'"
+      [nzChecked]="i.checked"
+      (nzOnClose)="_close($event)"
+      (nzCheckedChange)="onChange(i)"
+    >
+      <ng-container *ngIf="i.prefixIcon">
+        <ng-template [ngTemplateOutlet]="icon" [ngTemplateOutletContext]="{ $implicit: i.prefixIcon }" />
+      </ng-container>
+      <span>{{ i.label }}</span>
+      <ng-container *ngIf="i.suffixIcon">
+        <ng-template [ngTemplateOutlet]="icon" [ngTemplateOutletContext]="{ $implicit: i.suffixIcon }" />
+      </ng-container>
+    </nz-tag>
+  </sf-item-wrap>`,
+  preserveWhitespaces: false,
+  encapsulation: ViewEncapsulation.None
+})
+export class TagWidget extends ControlUIWidget<SFTagWidgetSchema> {
+  static readonly KEY = 'tag';
+
+  data: SFSchemaEnum[] = [];
+
+  reset(value: SFValue): void {
+    getData(this.schema, this.ui, value).subscribe(list => {
+      this.data = list;
+      this.detectChanges();
+    });
+  }
+
+  onChange(item: SFSchemaEnum): void {
+    item.checked = !item.checked;
+    this.updateValue();
+    if (this.ui.checkedChange) {
+      this.ui.checkedChange(item.checked);
+    }
+  }
+
+  _close(e: MouseEvent): void {
+    if (this.ui.onClose) this.ui.onClose(e);
+  }
+
+  private updateValue(): void {
+    this.formProperty.setValue(
+      this.data.filter(w => w.checked).map(i => i.value),
+      false
+    );
+  }
+}
diff --git a/packages/form/src/widgets/transfer/demo/simple.md b/packages/form/widgets/transfer/demo/simple.md
similarity index 93%
rename from packages/form/src/widgets/transfer/demo/simple.md
rename to packages/form/widgets/transfer/demo/simple.md
index 46424162df..7f431602ec 100644
--- a/packages/form/src/widgets/transfer/demo/simple.md
+++ b/packages/form/widgets/transfer/demo/simple.md
@@ -15,7 +15,8 @@ Simplest of usage.
 
 ```ts
 import { Component } from '@angular/core';
-import { SFSchema, SFTransferWidgetSchema } from '@delon/form';
+import { SFSchema } from '@delon/form';
+import { SFTransferWidgetSchema } from '@delon/form/widgets/transfer';
 import { NzMessageService } from 'ng-zorro-antd/message';
 import { of, delay } from 'rxjs';
 
diff --git a/packages/form/src/widgets/transfer/index.en-US.md b/packages/form/widgets/transfer/index.en-US.md
similarity index 87%
rename from packages/form/src/widgets/transfer/index.en-US.md
rename to packages/form/widgets/transfer/index.en-US.md
index 85b90457c8..a345fae5cc 100644
--- a/packages/form/src/widgets/transfer/index.en-US.md
+++ b/packages/form/widgets/transfer/index.en-US.md
@@ -1,11 +1,15 @@
 ---
 title: transfer
 subtitle: Transfer
-type: Widgets
+type: Non-built-in widgets
 ---
 
 Double column transfer choice box.
 
+## Import module
+
+Non-built-in modules, Should be import `TransferWidgetModule` in [json-schema.module.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/shared/json-schema/json-schema.module.ts#L11).
+
 ## Note
 
 - `default` value `direction: 'right'` indicates right column.
diff --git a/packages/form/widgets/transfer/index.ts b/packages/form/widgets/transfer/index.ts
new file mode 100644
index 0000000000..c8c388b446
--- /dev/null
+++ b/packages/form/widgets/transfer/index.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { DelonFormModule, WidgetRegistry } from '@delon/form';
+import { NzTransferModule } from 'ng-zorro-antd/transfer';
+
+import { TransferWidget } from './widget';
+
+export * from './widget';
+export * from './schema';
+
+@NgModule({
+  imports: [FormsModule, DelonFormModule, NzTransferModule],
+  declarations: [TransferWidget]
+})
+export class TransferWidgetModule {
+  constructor(widgetRegistry: WidgetRegistry) {
+    widgetRegistry.register(TransferWidget.KEY, TransferWidget);
+  }
+}
diff --git a/packages/form/src/widgets/transfer/index.zh-CN.md b/packages/form/widgets/transfer/index.zh-CN.md
similarity index 86%
rename from packages/form/src/widgets/transfer/index.zh-CN.md
rename to packages/form/widgets/transfer/index.zh-CN.md
index c6bed6c566..9006b7b0f6 100644
--- a/packages/form/src/widgets/transfer/index.zh-CN.md
+++ b/packages/form/widgets/transfer/index.zh-CN.md
@@ -1,11 +1,15 @@
 ---
 title: transfer
 subtitle: 穿梭框
-type: Widgets
+type: Non-built-in widgets
 ---
 
 双栏穿梭选择框。
 
+## 导入模块
+
+非内置模块，需要额外在 [json-schema.module.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/shared/json-schema/json-schema.module.ts#L11) 导入 `TransferWidgetModule`。
+
 ## 注意事项
 
 - `default` 值被当成 `direction: 'right'` 表示右栏中
diff --git a/packages/form/src/widgets/transfer/schema.ts b/packages/form/widgets/transfer/schema.ts
similarity index 94%
rename from packages/form/src/widgets/transfer/schema.ts
rename to packages/form/widgets/transfer/schema.ts
index f7e60aedcb..184d530c10 100644
--- a/packages/form/src/widgets/transfer/schema.ts
+++ b/packages/form/widgets/transfer/schema.ts
@@ -1,5 +1,6 @@
 import { Observable } from 'rxjs';
 
+import type { SFSchemaEnumType, SFUISchemaItem } from '@delon/form';
 import { NgStyleInterface } from 'ng-zorro-antd/core/types';
 import {
   TransferCanMove,
@@ -9,9 +10,6 @@ import {
   TransferSelectChange
 } from 'ng-zorro-antd/transfer';
 
-import { SFSchemaEnumType } from '../../schema';
-import { SFUISchemaItem } from '../../schema/ui';
-
 export interface SFTransferWidgetSchema extends SFUISchemaItem {
   /**
    * 异步数据源
diff --git a/packages/form/src/widgets/transfer/transfer.widget.spec.ts b/packages/form/widgets/transfer/widget.spec.ts
similarity index 98%
rename from packages/form/src/widgets/transfer/transfer.widget.spec.ts
rename to packages/form/widgets/transfer/widget.spec.ts
index c165946adc..b678e8f2b6 100644
--- a/packages/form/src/widgets/transfer/transfer.widget.spec.ts
+++ b/packages/form/widgets/transfer/widget.spec.ts
@@ -2,11 +2,11 @@ import { DebugElement } from '@angular/core';
 import { ComponentFixture, fakeAsync } from '@angular/core/testing';
 import { of } from 'rxjs';
 
+import { SFSchema } from '@delon/form';
 import { createTestContext } from '@delon/testing';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 
-import { configureSFTestSuite, SFPage, TestFormComponent } from '../../../spec/base.spec';
-import { SFSchema } from '../../../src/schema/index';
+import { configureSFTestSuite, SFPage, TestFormComponent } from '../../spec/base.spec';
 
 describe('form: widget: transfer', () => {
   let fixture: ComponentFixture<TestFormComponent>;
diff --git a/packages/form/src/widgets/transfer/transfer.widget.ts b/packages/form/widgets/transfer/widget.ts
similarity index 71%
rename from packages/form/src/widgets/transfer/transfer.widget.ts
rename to packages/form/widgets/transfer/widget.ts
index 7b87eb1aaa..c64397e949 100644
--- a/packages/form/src/widgets/transfer/transfer.widget.ts
+++ b/packages/form/widgets/transfer/widget.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { Observable, of } from 'rxjs';
 
+import { ControlUIWidget, SFSchemaEnum, SFValue, getData } from '@delon/form';
 import type { NzSafeAny } from 'ng-zorro-antd/core/types';
 import {
   TransferCanMove,
@@ -10,19 +11,41 @@ import {
   TransferSelectChange
 } from 'ng-zorro-antd/transfer';
 
-import { SFTransferWidgetSchema } from './schema';
-import { SFValue } from '../../interface';
-import { SFSchemaEnum } from '../../schema';
-import { getData } from '../../utils';
-import { ControlUIWidget } from '../../widget';
+import type { SFTransferWidgetSchema } from './schema';
 
 @Component({
   selector: 'sf-transfer',
-  templateUrl: './transfer.widget.html',
+  template: `<sf-item-wrap
+    [id]="id"
+    [schema]="schema"
+    [ui]="ui"
+    [showError]="showError"
+    [error]="error"
+    [showTitle]="schema.title"
+  >
+    <nz-transfer
+      [nzDataSource]="$any(list)"
+      [nzTitles]="i.titles"
+      [nzOperations]="i.operations"
+      [nzListStyle]="ui.listStyle!"
+      [nzItemUnit]="i.itemUnit"
+      [nzItemsUnit]="i.itemsUnit"
+      [nzShowSearch]="ui.showSearch"
+      [nzFilterOption]="ui.filterOption"
+      [nzSearchPlaceholder]="ui.searchPlaceholder"
+      [nzNotFoundContent]="ui.notFoundContent"
+      [nzCanMove]="_canMove"
+      (nzChange)="_change($event)"
+      (nzSearchChange)="_searchChange($event)"
+      (nzSelectChange)="_selectChange($event)"
+    />
+  </sf-item-wrap> `,
   preserveWhitespaces: false,
   encapsulation: ViewEncapsulation.None
 })
 export class TransferWidget extends ControlUIWidget<SFTransferWidgetSchema> implements OnInit {
+  static readonly KEY = 'transfer';
+
   list: SFSchemaEnum[] = [];
   i!: { titles: string[]; operations: string[]; itemUnit: string; itemsUnit: string };
   private _data: SFSchemaEnum[] = [];
diff --git a/packages/form/src/widgets/tree-select/demo/customized-icon.md b/packages/form/widgets/tree-select/demo/customized-icon.md
similarity index 93%
rename from packages/form/src/widgets/tree-select/demo/customized-icon.md
rename to packages/form/widgets/tree-select/demo/customized-icon.md
index 391b1b9764..149bd2993d 100644
--- a/packages/form/src/widgets/tree-select/demo/customized-icon.md
+++ b/packages/form/widgets/tree-select/demo/customized-icon.md
@@ -16,7 +16,8 @@ You can customize icons for different nodes.
 
 ```ts
 import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
-import { SFSchema, SFTreeSelectWidgetSchema } from '@delon/form';
+import { SFSchema } from '@delon/form';
+import type { SFTreeSelectWidgetSchema } from '@delon/form/widgets/tree-select';
 import { NzTreeNode } from 'ng-zorro-antd/tree';
 
 @Component({
diff --git a/packages/form/src/widgets/tree-select/demo/simple.md b/packages/form/widgets/tree-select/demo/simple.md
similarity index 95%
rename from packages/form/src/widgets/tree-select/demo/simple.md
rename to packages/form/widgets/tree-select/demo/simple.md
index 63bf97786d..2872430153 100644
--- a/packages/form/src/widgets/tree-select/demo/simple.md
+++ b/packages/form/widgets/tree-select/demo/simple.md
@@ -17,7 +17,8 @@ Simplest of usage.
 
 ```ts
 import { Component } from '@angular/core';
-import { SFSchema, SFTreeSelectWidgetSchema } from '@delon/form';
+import { SFSchema } from '@delon/form';
+import type { SFTreeSelectWidgetSchema } from '@delon/form/widgets/tree-select';
 import { NzMessageService } from 'ng-zorro-antd/message';
 import { of, delay } from 'rxjs';
 
diff --git a/packages/form/src/widgets/tree-select/demo/virtual-scroll.md b/packages/form/widgets/tree-select/demo/virtual-scroll.md
similarity index 92%
rename from packages/form/src/widgets/tree-select/demo/virtual-scroll.md
rename to packages/form/widgets/tree-select/demo/virtual-scroll.md
index 8bc52c39ee..906ece9e9a 100644
--- a/packages/form/src/widgets/tree-select/demo/virtual-scroll.md
+++ b/packages/form/widgets/tree-select/demo/virtual-scroll.md
@@ -15,7 +15,8 @@ Set `virtualHeight` to enable virtual scroll.
 
 ```ts
 import { Component } from '@angular/core';
-import { SFSchema, SFTreeSelectWidgetSchema } from '@delon/form';
+import { SFSchema } from '@delon/form';
+import type { SFTreeSelectWidgetSchema } from '@delon/form/widgets/tree-select';
 import { NzMessageService } from 'ng-zorro-antd/message';
 import { NzTreeNodeOptions } from 'ng-zorro-antd/tree';
 
diff --git a/packages/form/src/widgets/tree-select/index.en-US.md b/packages/form/widgets/tree-select/index.en-US.md
similarity index 93%
rename from packages/form/src/widgets/tree-select/index.en-US.md
rename to packages/form/widgets/tree-select/index.en-US.md
index ff8ce4fefc..3d8cb7f9bc 100644
--- a/packages/form/src/widgets/tree-select/index.en-US.md
+++ b/packages/form/widgets/tree-select/index.en-US.md
@@ -1,7 +1,7 @@
 ---
 title: tree-select
 subtitle: Tree Select
-type: Widgets
+type: Non-built-in widgets
 ---
 
 Tree select widget.
@@ -10,6 +10,10 @@ Tree select widget.
 
 - Data source of `tree-select` must have keys of `title`、`key`
 
+## Import module
+
+Non-built-in modules, Should be import `TreeSelectWidgetModule` in [json-schema.module.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/shared/json-schema/json-schema.module.ts#L11).
+
 ## API
 
 ### schema
diff --git a/packages/form/widgets/tree-select/index.ts b/packages/form/widgets/tree-select/index.ts
new file mode 100644
index 0000000000..d4aaa5f4dc
--- /dev/null
+++ b/packages/form/widgets/tree-select/index.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { DelonFormModule, WidgetRegistry } from '@delon/form';
+import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
+
+import { TreeSelectWidget } from './widget';
+
+export * from './widget';
+export * from './schema';
+
+@NgModule({
+  imports: [FormsModule, DelonFormModule, NzTreeSelectModule],
+  declarations: [TreeSelectWidget]
+})
+export class TreeSelectWidgetModule {
+  constructor(widgetRegistry: WidgetRegistry) {
+    widgetRegistry.register(TreeSelectWidget.KEY, TreeSelectWidget);
+  }
+}
diff --git a/packages/form/src/widgets/tree-select/index.zh-CN.md b/packages/form/widgets/tree-select/index.zh-CN.md
similarity index 92%
rename from packages/form/src/widgets/tree-select/index.zh-CN.md
rename to packages/form/widgets/tree-select/index.zh-CN.md
index 9a595be2b2..08ba1b2435 100644
--- a/packages/form/src/widgets/tree-select/index.zh-CN.md
+++ b/packages/form/widgets/tree-select/index.zh-CN.md
@@ -1,7 +1,7 @@
 ---
 title: tree-select
 subtitle: 树选择
-type: Widgets
+type: Non-built-in widgets
 ---
 
 树型选择控件。
@@ -10,6 +10,10 @@ type: Widgets
 
 - `tree-select` 的数据源必须包含 `title`、`key` 键名
 
+## 导入模块
+
+非内置模块，需要额外在 [json-schema.module.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/shared/json-schema/json-schema.module.ts#L11) 导入 `TreeSelectWidgetModule`。
+
 ## API
 
 ### schema 属性
diff --git a/packages/form/src/widgets/tree-select/schema.ts b/packages/form/widgets/tree-select/schema.ts
similarity index 96%
rename from packages/form/src/widgets/tree-select/schema.ts
rename to packages/form/widgets/tree-select/schema.ts
index 3542bbee7c..fc0d483738 100644
--- a/packages/form/src/widgets/tree-select/schema.ts
+++ b/packages/form/widgets/tree-select/schema.ts
@@ -1,12 +1,10 @@
 import { TemplateRef } from '@angular/core';
 import { Observable } from 'rxjs';
 
+import type { SFSchemaEnum, SFSchemaEnumType, SFUISchemaItem } from '@delon/form';
 import { NzFormatEmitEvent, NzTreeNode, NzTreeNodeOptions } from 'ng-zorro-antd/core/tree';
 import { NgStyleInterface, NzSizeLDSType } from 'ng-zorro-antd/core/types';
 
-import { SFSchemaEnum, SFSchemaEnumType } from '../../schema';
-import { SFUISchemaItem } from '../../schema/ui';
-
 export interface SFTreeSelectWidgetSchema extends SFUISchemaItem {
   /**
    * 异步数据源
diff --git a/packages/form/src/widgets/tree-select/tree-select.widget.spec.ts b/packages/form/widgets/tree-select/widget.spec.ts
similarity index 97%
rename from packages/form/src/widgets/tree-select/tree-select.widget.spec.ts
rename to packages/form/widgets/tree-select/widget.spec.ts
index 4fa6ebf080..1c99d29ed0 100644
--- a/packages/form/src/widgets/tree-select/tree-select.widget.spec.ts
+++ b/packages/form/widgets/tree-select/widget.spec.ts
@@ -2,11 +2,11 @@ import { DebugElement } from '@angular/core';
 import { ComponentFixture, fakeAsync } from '@angular/core/testing';
 import { of } from 'rxjs';
 
+import { SFSchema } from '@delon/form';
 import { createTestContext } from '@delon/testing';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 
-import { configureSFTestSuite, SFPage, TestFormComponent } from '../../../spec/base.spec';
-import { SFSchema } from '../../../src/schema/index';
+import { configureSFTestSuite, SFPage, TestFormComponent } from '../../spec/base.spec';
 
 describe('form: widget: tree-select', () => {
   let fixture: ComponentFixture<TestFormComponent>;
diff --git a/packages/form/src/widgets/tree-select/tree-select.widget.ts b/packages/form/widgets/tree-select/widget.ts
similarity index 50%
rename from packages/form/src/widgets/tree-select/tree-select.widget.ts
rename to packages/form/widgets/tree-select/widget.ts
index 9b67ec3ceb..9b04e5bbb7 100644
--- a/packages/form/src/widgets/tree-select/tree-select.widget.ts
+++ b/packages/form/widgets/tree-select/widget.ts
@@ -1,20 +1,61 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 
+import { ControlUIWidget, SFSchemaEnum, SFValue, getData, toBool } from '@delon/form';
 import { NzFormatEmitEvent, NzTreeNode } from 'ng-zorro-antd/core/tree';
 
-import { SFTreeSelectWidgetSchema } from './schema';
-import { SFValue } from '../../interface';
-import { SFSchemaEnum } from '../../schema';
-import { getData, toBool } from '../../utils';
-import { ControlUIWidget } from '../../widget';
+import type { SFTreeSelectWidgetSchema } from './schema';
 
 @Component({
   selector: 'sf-tree-select',
-  templateUrl: './tree-select.widget.html',
+  template: `<sf-item-wrap
+    [id]="id"
+    [schema]="schema"
+    [ui]="ui"
+    [showError]="showError"
+    [error]="error"
+    [showTitle]="schema.title"
+  >
+    <nz-tree-select
+      [nzId]="id"
+      [nzAllowClear]="i.allowClear"
+      [nzPlaceHolder]="ui.placeholder!"
+      [nzDropdownStyle]="ui.dropdownStyle!"
+      [nzDropdownClassName]="ui.dropdownClassName"
+      [nzSize]="ui.size!"
+      [nzExpandedKeys]="ui.expandedKeys!"
+      [nzNotFoundContent]="ui.notFoundContent"
+      [nzMaxTagCount]="ui.maxTagCount!"
+      [nzMaxTagPlaceholder]="ui.maxTagPlaceholder || null"
+      [nzTreeTemplate]="ui.treeTemplate!"
+      [nzDisabled]="disabled"
+      [nzShowSearch]="i.showSearch"
+      [nzShowIcon]="i.showIcon"
+      [nzDropdownMatchSelectWidth]="i.dropdownMatchSelectWidth"
+      [nzMultiple]="i.multiple"
+      [nzHideUnMatched]="i.hideUnMatched"
+      [nzCheckable]="i.checkable"
+      [nzShowExpand]="i.showExpand"
+      [nzShowLine]="i.showLine"
+      [nzCheckStrictly]="i.checkStrictly"
+      [nzAsyncData]="asyncData"
+      [nzNodes]="$any(data)"
+      [nzDefaultExpandAll]="i.defaultExpandAll"
+      [nzDisplayWith]="i.displayWith!"
+      [ngModel]="value"
+      [nzVirtualHeight]="ui.virtualHeight!"
+      [nzVirtualItemSize]="ui.virtualItemSize || 28"
+      [nzVirtualMaxBufferPx]="ui.virtualMaxBufferPx || 500"
+      [nzVirtualMinBufferPx]="ui.virtualMinBufferPx || 28"
+      (ngModelChange)="change($event)"
+      (nzExpandChange)="expandChange($event)"
+    />
+  </sf-item-wrap>`,
   preserveWhitespaces: false,
   encapsulation: ViewEncapsulation.None
 })
 export class TreeSelectWidget extends ControlUIWidget<SFTreeSelectWidgetSchema> implements OnInit {
+  static readonly KEY = 'tree-select';
+
   i!: SFTreeSelectWidgetSchema;
   data: SFSchemaEnum[] = [];
   asyncData = false;
diff --git a/scripts/site/generate.ts b/scripts/site/generate.ts
index a389b00fc7..8f005a0299 100755
--- a/scripts/site/generate.ts
+++ b/scripts/site/generate.ts
@@ -153,7 +153,7 @@ function generateModule(config: ModuleConfig): void {
       const meta: Meta = {
         name: handleExploreStr(item.key, '-'),
         i18n,
-        order: content[defaultLang].meta.order || -1,
+        order: content[defaultLang].meta.order || 100,
         cols: content[defaultLang].meta.cols || 1,
         meta: contentMetas
       };
@@ -214,7 +214,7 @@ function generateModule(config: ModuleConfig): void {
   // #region generate meta file
 
   const metaObj = { types: [], ...includeAttributes(config, {}) };
-  metaObj.list = metas;
+  metaObj.list = metas.sort((a, b) => a.order - b.order);
 
   generateDoc(
     { data: JSON.stringify(metaObj) } as MetaTemplateData,
diff --git a/src/app/core/startup.service.ts b/src/app/core/startup.service.ts
index 3dbb82bb13..bc1a6ee5e8 100644
--- a/src/app/core/startup.service.ts
+++ b/src/app/core/startup.service.ts
@@ -27,7 +27,7 @@ export class StartupService {
       if (slowEl) {
         slowEl.remove();
       }
-      this.injector.get(TitleService).suffix = 'Ng Alain';
+      this.injector.get(TitleService).suffix = 'NG-ALAIN';
       if (this.platform.isBrowser) {
         setTimeout(() => this.lazyLoad(), 100);
       }
diff --git a/src/app/shared/json-schema/json-schema.module.ts b/src/app/shared/json-schema/json-schema.module.ts
index e4c106a0a4..ba588e71fb 100644
--- a/src/app/shared/json-schema/json-schema.module.ts
+++ b/src/app/shared/json-schema/json-schema.module.ts
@@ -1,15 +1,32 @@
 import { NgModule } from '@angular/core';
 
 import { DelonFormModule, WidgetRegistry } from '@delon/form';
+import { CascaderWidgetModule } from '@delon/form/widgets/cascader';
+import { MentionWidgetModule } from '@delon/form/widgets/mention';
+import { RateWidgetModule } from '@delon/form/widgets/rate';
+import { SliderWidgetModule } from '@delon/form/widgets/slider';
+import { TagWidgetModule } from '@delon/form/widgets/tag';
+import { TransferWidgetModule } from '@delon/form/widgets/transfer';
+import { TreeSelectWidgetModule } from '@delon/form/widgets/tree-select';
+import { TinymceWidget } from '@delon/form/widgets-third/tinymce/tinymce.widget';
 
-import { TinymceWidget } from '../../../../packages/form/widgets-third/tinymce/tinymce.widget';
 import { SharedModule } from '../shared.module';
 
 export const SCHEMA_THIRDS_COMPONENTS = [TinymceWidget];
 
 @NgModule({
   declarations: SCHEMA_THIRDS_COMPONENTS,
-  imports: [SharedModule, DelonFormModule.forRoot()],
+  imports: [
+    SharedModule,
+    DelonFormModule.forRoot(),
+    CascaderWidgetModule,
+    TransferWidgetModule,
+    MentionWidgetModule,
+    RateWidgetModule,
+    SliderWidgetModule,
+    TreeSelectWidgetModule,
+    TagWidgetModule
+  ],
   exports: [...SCHEMA_THIRDS_COMPONENTS]
 })
 export class JsonSchemaModule {
diff --git a/src/app/shared/shared-zorro.module.ts b/src/app/shared/shared-zorro.module.ts
index 8cfe5bcb19..75e5f12e1a 100644
--- a/src/app/shared/shared-zorro.module.ts
+++ b/src/app/shared/shared-zorro.module.ts
@@ -26,6 +26,7 @@ import { NzMessageModule } from 'ng-zorro-antd/message';
 import { NzModalModule } from 'ng-zorro-antd/modal';
 import { NzPaginationModule } from 'ng-zorro-antd/pagination';
 import { NzPopoverModule } from 'ng-zorro-antd/popover';
+import { NzQRCodeModule } from 'ng-zorro-antd/qr-code';
 import { NzRadioModule } from 'ng-zorro-antd/radio';
 import { NzResizableModule } from 'ng-zorro-antd/resizable';
 import { NzSelectModule } from 'ng-zorro-antd/select';
@@ -77,5 +78,6 @@ export const SHARED_ZORRO_MODULES = [
   NzUploadModule,
   NzPaginationModule,
   NzEmptyModule,
-  NzHighlightModule
+  NzHighlightModule,
+  NzQRCodeModule
 ];
diff --git a/src/index.html b/src/index.html
index 84d1f87ad8..7bab1b60b6 100644
--- a/src/index.html
+++ b/src/index.html
@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="utf-8">
-  <title>Ng Alain - 一个基于 Antd 中后台前端解决方案</title>
+  <title>NG-ALAIN - 一个基于 Antd 中后台前端解决方案</title>
   <base href="/">
   <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
   <link rel="preconnect" href="https://gw.alipayobjects.com" crossorigin="anonymous">
diff --git a/src/site.config.js b/src/site.config.js
index 9c55c2a95d..30c58a8ad1 100644
--- a/src/site.config.js
+++ b/src/site.config.js
@@ -408,6 +408,10 @@ module.exports = {
           'zh-CN': '小部件',
           'en-US': 'Widgets',
         },
+        {
+          'zh-CN': '非内置小部件',
+          'en-US': 'Non-built-in widgets',
+        },
         {
           'zh-CN': '第三方小部件',
           'en-US': 'Third Widgets',
@@ -450,6 +454,13 @@ module.exports = {
           },
           hasSubDir: true,
         },
+        {
+          src: ['./packages/form/widgets'],
+          template: {
+            content: './src/templates/content.ts',
+          },
+          hasSubDir: true,
+        },
         {
           src: ['./packages/form/widgets-third'],
           template: {

From 0bf5d35b6b05701e78584fcc51e16e7cadeb9371 Mon Sep 17 00:00:00 2001
From: cipchk <cipchk@qq.com>
Date: Sat, 21 Oct 2023 15:17:28 +0800
Subject: [PATCH 2/9] chore: add `time`, `upload`

---
 packages/form/spec/base.spec.ts               | 10 ++-
 packages/form/src/module.ts                   | 10 +--
 packages/form/src/widgets/index.ts            |  4 --
 .../form/src/widgets/nz-widget.registry.ts    |  4 --
 .../form/src/widgets/time/time.widget.html    | 26 --------
 .../src/widgets/upload/upload.widget.html     | 46 --------------
 packages/form/widgets/cascader/widget.spec.ts |  3 +-
 packages/form/widgets/mention/widget.spec.ts  |  3 +-
 packages/form/widgets/rate/widget.spec.ts     |  3 +-
 packages/form/widgets/slider/widget.spec.ts   |  3 +-
 packages/form/widgets/tag/widget.spec.ts      |  3 +-
 .../{src => }/widgets/time/demo/simple.md     |  5 +-
 .../{src => }/widgets/time/index.en-US.md     |  6 +-
 packages/form/widgets/time/index.ts           | 20 ++++++
 .../{src => }/widgets/time/index.zh-CN.md     |  6 +-
 .../form/{src => }/widgets/time/schema.ts     |  2 +-
 .../time/widget.spec.ts}                      |  9 +--
 .../time.widget.ts => widgets/time/widget.ts} | 42 +++++++++++--
 packages/form/widgets/transfer/widget.spec.ts |  3 +-
 .../form/widgets/tree-select/widget.spec.ts   |  3 +-
 .../{src => }/widgets/upload/demo/simple.md   |  3 +-
 .../{src => }/widgets/upload/index.en-US.md   |  6 +-
 packages/form/widgets/upload/index.ts         | 23 +++++++
 .../{src => }/widgets/upload/index.zh-CN.md   |  6 +-
 .../form/{src => }/widgets/upload/schema.ts   |  6 +-
 .../upload/widget.spec.ts}                    |  7 ++-
 .../upload/widget.ts}                         | 62 +++++++++++++++++--
 .../validator/validator.component.ts          |  2 +-
 .../shared/json-schema/json-schema.module.ts  |  6 +-
 29 files changed, 203 insertions(+), 129 deletions(-)
 delete mode 100644 packages/form/src/widgets/time/time.widget.html
 delete mode 100644 packages/form/src/widgets/upload/upload.widget.html
 rename packages/form/{src => }/widgets/time/demo/simple.md (90%)
 rename packages/form/{src => }/widgets/time/index.en-US.md (92%)
 create mode 100644 packages/form/widgets/time/index.ts
 rename packages/form/{src => }/widgets/time/index.zh-CN.md (92%)
 rename packages/form/{src => }/widgets/time/schema.ts (97%)
 rename packages/form/{src/widgets/time/time.widget.spec.ts => widgets/time/widget.spec.ts} (95%)
 rename packages/form/{src/widgets/time/time.widget.ts => widgets/time/widget.ts} (64%)
 rename packages/form/{src => }/widgets/upload/demo/simple.md (93%)
 rename packages/form/{src => }/widgets/upload/index.en-US.md (94%)
 create mode 100644 packages/form/widgets/upload/index.ts
 rename packages/form/{src => }/widgets/upload/index.zh-CN.md (94%)
 rename packages/form/{src => }/widgets/upload/schema.ts (97%)
 rename packages/form/{src/widgets/upload/upload.widget.spec.ts => widgets/upload/widget.spec.ts} (97%)
 rename packages/form/{src/widgets/upload/upload.widget.ts => widgets/upload/widget.ts} (66%)

diff --git a/packages/form/spec/base.spec.ts b/packages/form/spec/base.spec.ts
index 17e3b67dd2..4067751453 100644
--- a/packages/form/spec/base.spec.ts
+++ b/packages/form/spec/base.spec.ts
@@ -75,10 +75,16 @@ export function builder(options?: {
   };
 }
 
-export function configureSFTestSuite(): void {
+export function configureSFTestSuite(options?: { imports?: NzSafeAny[] }): void {
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [NoopAnimationsModule, AlainThemeModule.forRoot(), DelonFormModule.forRoot(), HttpClientTestingModule],
+      imports: [
+        NoopAnimationsModule,
+        AlainThemeModule.forRoot(),
+        DelonFormModule.forRoot(),
+        HttpClientTestingModule,
+        ...(options?.imports ?? [])
+      ],
       declarations: [TestFormComponent]
     });
   });
diff --git a/packages/form/src/module.ts b/packages/form/src/module.ts
index 8e1e6ecd68..e64509fbaa 100644
--- a/packages/form/src/module.ts
+++ b/packages/form/src/module.ts
@@ -17,9 +17,7 @@ import { NzModalModule } from 'ng-zorro-antd/modal';
 import { NzRadioModule } from 'ng-zorro-antd/radio';
 import { NzSelectModule } from 'ng-zorro-antd/select';
 import { NzSwitchModule } from 'ng-zorro-antd/switch';
-import { NzTimePickerModule } from 'ng-zorro-antd/time-picker';
 import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
-import { NzUploadModule } from 'ng-zorro-antd/upload';
 
 import { DelonLocaleModule } from '@delon/theme';
 import { AlainConfigService } from '@delon/util/config';
@@ -39,9 +37,7 @@ const ZORROS = [
   NzRadioModule,
   NzSelectModule,
   NzSwitchModule,
-  NzTimePickerModule,
-  NzToolTipModule,
-  NzUploadModule
+  NzToolTipModule
 ];
 
 import { SFFixedDirective } from './sf-fixed.directive';
@@ -70,8 +66,6 @@ import { SelectWidget } from './widgets/select/select.widget';
 import { StringWidget } from './widgets/string/string.widget';
 import { TextWidget } from './widgets/text/text.widget';
 import { TextareaWidget } from './widgets/textarea/textarea.widget';
-import { TimeWidget } from './widgets/time/time.widget';
-import { UploadWidget } from './widgets/upload/upload.widget';
 
 const WIDGETS = [
   ObjectWidget,
@@ -79,13 +73,11 @@ const WIDGETS = [
   StringWidget,
   NumberWidget,
   DateWidget,
-  TimeWidget,
   RadioWidget,
   CheckboxWidget,
   BooleanWidget,
   TextareaWidget,
   SelectWidget,
-  UploadWidget,
   AutoCompleteWidget,
   CustomWidget,
   TextWidget
diff --git a/packages/form/src/widgets/index.ts b/packages/form/src/widgets/index.ts
index 3eaf8ac1be..e9804ef1e2 100644
--- a/packages/form/src/widgets/index.ts
+++ b/packages/form/src/widgets/index.ts
@@ -8,8 +8,6 @@ export * from './number/number.widget';
 export * from './number/schema';
 export * from './date/date.widget';
 export * from './date/schema';
-export * from './time/time.widget';
-export * from './time/schema';
 export * from './radio/radio.widget';
 export * from './radio/schema';
 export * from './checkbox/checkbox.widget';
@@ -19,8 +17,6 @@ export * from './textarea/textarea.widget';
 export * from './textarea/schema';
 export * from './select/select.widget';
 export * from './select/schema';
-export * from './upload/upload.widget';
-export * from './upload/schema';
 export * from './autocomplete/autocomplete.widget';
 export * from './autocomplete/schema';
 export * from './text/text.widget';
diff --git a/packages/form/src/widgets/nz-widget.registry.ts b/packages/form/src/widgets/nz-widget.registry.ts
index 8196f71d47..464c9ace28 100644
--- a/packages/form/src/widgets/nz-widget.registry.ts
+++ b/packages/form/src/widgets/nz-widget.registry.ts
@@ -11,8 +11,6 @@ import { SelectWidget } from './select/select.widget';
 import { StringWidget } from './string/string.widget';
 import { TextWidget } from './text/text.widget';
 import { TextareaWidget } from './textarea/textarea.widget';
-import { TimeWidget } from './time/time.widget';
-import { UploadWidget } from './upload/upload.widget';
 import { WidgetRegistry } from '../widget.factory';
 
 export class NzWidgetRegistry extends WidgetRegistry {
@@ -27,13 +25,11 @@ export class NzWidgetRegistry extends WidgetRegistry {
     this.register('number', NumberWidget);
     this.register('integer', NumberWidget);
     this.register('date', DateWidget);
-    this.register('time', TimeWidget);
     this.register('radio', RadioWidget);
     this.register('checkbox', CheckboxWidget);
     this.register('boolean', BooleanWidget);
     this.register('textarea', TextareaWidget);
     this.register('select', SelectWidget);
-    this.register('upload', UploadWidget);
     this.register('autocomplete', AutoCompleteWidget);
     this.register('custom', CustomWidget);
 
diff --git a/packages/form/src/widgets/time/time.widget.html b/packages/form/src/widgets/time/time.widget.html
deleted file mode 100644
index 0509498b46..0000000000
--- a/packages/form/src/widgets/time/time.widget.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<sf-item-wrap [id]="id" [schema]="schema" [ui]="ui" [showError]="showError" [error]="error" [showTitle]="schema.title">
-  <nz-time-picker
-    [nzId]="id"
-    [(ngModel)]="displayValue"
-    (ngModelChange)="_change($event)"
-    [nzDisabled]="disabled"
-    [nzSize]="$any(ui.size)"
-    [nzFormat]="i.displayFormat"
-    [nzAllowEmpty]="i.allowEmpty"
-    [nzClearText]="i.clearText"
-    [nzDefaultOpenValue]="i.defaultOpenValue"
-    [nzDisabledHours]="ui.disabledHours"
-    [nzDisabledMinutes]="ui.disabledMinutes"
-    [nzDisabledSeconds]="ui.disabledSeconds"
-    [nzHideDisabledOptions]="i.hideDisabledOptions"
-    [nzUse12Hours]="i.use12Hours"
-    [nzHourStep]="i.hourStep"
-    [nzMinuteStep]="i.minuteStep"
-    [nzSecondStep]="i.secondStep"
-    [nzPopupClassName]="ui.popupClassName!"
-    [nzPlaceHolder]="ui.placeholder!"
-    [nzNowText]="ui.nowText!"
-    [nzOkText]="ui.okText!"
-    (nzOpenChange)="_openChange($event)"
-  />
-</sf-item-wrap>
diff --git a/packages/form/src/widgets/upload/upload.widget.html b/packages/form/src/widgets/upload/upload.widget.html
deleted file mode 100644
index 7c2fb28e2d..0000000000
--- a/packages/form/src/widgets/upload/upload.widget.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<sf-item-wrap [id]="id" [schema]="schema" [ui]="ui" [showError]="showError" [error]="error" [showTitle]="schema.title">
-  <nz-upload
-    [nzType]="i.type"
-    [(nzFileList)]="fileList"
-    [nzDisabled]="disabled"
-    [nzAction]="i.action"
-    [nzDirectory]="i.directory"
-    [nzOpenFileDialogOnClick]="i.openFileDialogOnClick"
-    [nzAccept]="i.accept"
-    [nzLimit]="i.limit"
-    [nzFilter]="i.filter"
-    [nzSize]="i.size"
-    [nzFileType]="i.fileType"
-    [nzHeaders]="ui.headers"
-    [nzData]="ui.data"
-    [nzListType]="i.listType"
-    [nzMultiple]="i.multiple"
-    [nzName]="i.name"
-    [nzShowUploadList]="i.showUploadList"
-    [nzWithCredentials]="i.withCredentials"
-    [nzBeforeUpload]="i.beforeUpload"
-    [nzCustomRequest]="i.customRequest"
-    [nzRemove]="ui.remove || handleRemove"
-    [nzPreview]="handlePreview"
-    [nzPreviewFile]="ui.previewFile"
-    [nzDownload]="ui.download"
-    [nzTransformFile]="ui.transformFile"
-    (nzChange)="change($event)"
-    [nzShowButton]="fileList.length < i.limitFileCount"
-  >
-    <ng-container [ngSwitch]="btnType">
-      <ng-container *ngSwitchCase="'plus'">
-        <i nz-icon nzType="plus"></i>
-        <div class="ant-upload-text" [innerHTML]="i.text"></div>
-      </ng-container>
-      <ng-container *ngSwitchCase="'drag'">
-        <p class="ant-upload-drag-icon"><i nz-icon nzType="inbox"></i></p>
-        <p class="ant-upload-text" [innerHTML]="i.text"></p>
-        <p class="ant-upload-hint" [innerHTML]="i.hint"></p>
-      </ng-container>
-      <ng-container *ngSwitchDefault>
-        <button type="button" nz-button><i nz-icon nzType="upload"></i><span [innerHTML]="i.text"></span></button>
-      </ng-container>
-    </ng-container>
-  </nz-upload>
-</sf-item-wrap>
diff --git a/packages/form/widgets/cascader/widget.spec.ts b/packages/form/widgets/cascader/widget.spec.ts
index a5b9be2a25..509c5af744 100644
--- a/packages/form/widgets/cascader/widget.spec.ts
+++ b/packages/form/widgets/cascader/widget.spec.ts
@@ -3,6 +3,7 @@ import { ComponentFixture, fakeAsync } from '@angular/core/testing';
 
 import { createTestContext } from '@delon/testing';
 
+import { CascaderWidgetModule } from './index';
 import { CascaderWidget } from './widget';
 import { configureSFTestSuite, SFPage, TestFormComponent } from '../../spec/base.spec';
 
@@ -13,7 +14,7 @@ describe('form: widget: cascader', () => {
   let page: SFPage;
   const widget = 'cascader';
 
-  configureSFTestSuite();
+  configureSFTestSuite({ imports: [CascaderWidgetModule] });
 
   beforeEach(() => {
     ({ fixture, dl, context } = createTestContext(TestFormComponent));
diff --git a/packages/form/widgets/mention/widget.spec.ts b/packages/form/widgets/mention/widget.spec.ts
index 8209d764ce..bf32d585c2 100644
--- a/packages/form/widgets/mention/widget.spec.ts
+++ b/packages/form/widgets/mention/widget.spec.ts
@@ -6,6 +6,7 @@ import type { SFSchema } from '@delon/form';
 import { createTestContext } from '@delon/testing';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 
+import { MentionWidgetModule } from './index';
 import { MentionWidget } from './widget';
 import { configureSFTestSuite, SFPage, TestFormComponent } from '../../spec/base.spec';
 
@@ -18,7 +19,7 @@ describe('form: widget: mention', () => {
   let page: SFPage;
   const widget = 'mention';
 
-  configureSFTestSuite();
+  configureSFTestSuite({ imports: [MentionWidgetModule] });
 
   beforeEach(() => {
     ({ fixture, dl, context } = createTestContext(TestFormComponent));
diff --git a/packages/form/widgets/rate/widget.spec.ts b/packages/form/widgets/rate/widget.spec.ts
index 30ae9bca1d..d992fefa0b 100644
--- a/packages/form/widgets/rate/widget.spec.ts
+++ b/packages/form/widgets/rate/widget.spec.ts
@@ -3,6 +3,7 @@ import { ComponentFixture, fakeAsync } from '@angular/core/testing';
 
 import { createTestContext } from '@delon/testing';
 
+import { RateWidgetModule } from './index';
 import { configureSFTestSuite, SFPage, TestFormComponent } from '../../spec/base.spec';
 
 describe('form: widget: rate', () => {
@@ -12,7 +13,7 @@ describe('form: widget: rate', () => {
   let page: SFPage;
   const widget = 'rate';
 
-  configureSFTestSuite();
+  configureSFTestSuite({ imports: [RateWidgetModule] });
 
   beforeEach(() => {
     ({ fixture, dl, context } = createTestContext(TestFormComponent));
diff --git a/packages/form/widgets/slider/widget.spec.ts b/packages/form/widgets/slider/widget.spec.ts
index 2f715ff50b..bef7168123 100644
--- a/packages/form/widgets/slider/widget.spec.ts
+++ b/packages/form/widgets/slider/widget.spec.ts
@@ -6,6 +6,7 @@ import { createTestContext } from '@delon/testing';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 import { NzSliderComponent } from 'ng-zorro-antd/slider';
 
+import { SliderWidgetModule } from './index';
 import { SliderWidget } from './widget';
 import { configureSFTestSuite, SFPage, TestFormComponent } from '../../spec/base.spec';
 
@@ -16,7 +17,7 @@ describe('form: widget: slider', () => {
   let page: SFPage;
   const widget = 'slider';
 
-  configureSFTestSuite();
+  configureSFTestSuite({ imports: [SliderWidgetModule] });
 
   beforeEach(() => {
     ({ fixture, dl, context } = createTestContext(TestFormComponent));
diff --git a/packages/form/widgets/tag/widget.spec.ts b/packages/form/widgets/tag/widget.spec.ts
index 867079e035..6d87d9fe1a 100644
--- a/packages/form/widgets/tag/widget.spec.ts
+++ b/packages/form/widgets/tag/widget.spec.ts
@@ -6,6 +6,7 @@ import { createTestContext } from '@delon/testing';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 import { NzTagComponent } from 'ng-zorro-antd/tag';
 
+import { TagWidgetModule } from './index';
 import { configureSFTestSuite, SFPage, TestFormComponent } from '../../spec/base.spec';
 
 describe('form: widget: tag', () => {
@@ -14,7 +15,7 @@ describe('form: widget: tag', () => {
   let context: TestFormComponent;
   let page: SFPage;
 
-  configureSFTestSuite();
+  configureSFTestSuite({ imports: [TagWidgetModule] });
 
   beforeEach(() => {
     ({ fixture, dl, context } = createTestContext(TestFormComponent));
diff --git a/packages/form/src/widgets/time/demo/simple.md b/packages/form/widgets/time/demo/simple.md
similarity index 90%
rename from packages/form/src/widgets/time/demo/simple.md
rename to packages/form/widgets/time/demo/simple.md
index e0d0e59f40..cc0fcd7ce5 100644
--- a/packages/form/src/widgets/time/demo/simple.md
+++ b/packages/form/widgets/time/demo/simple.md
@@ -15,12 +15,13 @@ Simplest of usage.
 
 ```ts
 import { Component } from '@angular/core';
-import { SFSchema, SFTimeWidgetSchema } from '@delon/form';
+import { SFSchema } from '@delon/form';
+import type { SFTimeWidgetSchema } from '@delon/form/widgets/time';
 import { NzMessageService } from 'ng-zorro-antd/message';
 
 @Component({
   selector: 'app-demo',
-  template: ` <sf [schema]="schema" (formSubmit)="submit($event)"></sf> `,
+  template: ` <sf [schema]="schema" (formSubmit)="submit($event)"/>`,
 })
 export class DemoComponent {
   schema: SFSchema = {
diff --git a/packages/form/src/widgets/time/index.en-US.md b/packages/form/widgets/time/index.en-US.md
similarity index 92%
rename from packages/form/src/widgets/time/index.en-US.md
rename to packages/form/widgets/time/index.en-US.md
index 5254e21128..0f0d03a471 100644
--- a/packages/form/src/widgets/time/index.en-US.md
+++ b/packages/form/widgets/time/index.en-US.md
@@ -1,11 +1,15 @@
 ---
 title: time
 subtitle: Time
-type: Widgets
+type: Non-built-in widgets
 ---
 
 To select/input a time.
 
+## Import module
+
+Non-built-in modules, Should be import `TimeWidgetModule` in [json-schema.module.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/shared/json-schema/json-schema.module.ts#L11).
+
 ## Notice
 
 - Format is divided into two types: **Data format** means form data, **Display format** means display data ([nzFormat](https://ng.ant.design/components/time-picker/en#api))
diff --git a/packages/form/widgets/time/index.ts b/packages/form/widgets/time/index.ts
new file mode 100644
index 0000000000..c3ce18dec0
--- /dev/null
+++ b/packages/form/widgets/time/index.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { DelonFormModule, WidgetRegistry } from '@delon/form';
+import { NzTimePickerModule } from 'ng-zorro-antd/time-picker';
+
+import { TimeWidget } from './widget';
+
+export * from './widget';
+export * from './schema';
+
+@NgModule({
+  imports: [FormsModule, DelonFormModule, NzTimePickerModule],
+  declarations: [TimeWidget]
+})
+export class TimeWidgetModule {
+  constructor(widgetRegistry: WidgetRegistry) {
+    widgetRegistry.register(TimeWidget.KEY, TimeWidget);
+  }
+}
diff --git a/packages/form/src/widgets/time/index.zh-CN.md b/packages/form/widgets/time/index.zh-CN.md
similarity index 92%
rename from packages/form/src/widgets/time/index.zh-CN.md
rename to packages/form/widgets/time/index.zh-CN.md
index 993dd7c68b..fb7bca0c70 100644
--- a/packages/form/src/widgets/time/index.zh-CN.md
+++ b/packages/form/widgets/time/index.zh-CN.md
@@ -1,11 +1,15 @@
 ---
 title: time
 subtitle: 时间
-type: Widgets
+type: Non-built-in widgets
 ---
 
 输入或选择时间的控件。
 
+## 导入模块
+
+非内置模块，需要额外在 [json-schema.module.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/shared/json-schema/json-schema.module.ts#L11) 导入 `TimeWidgetModule`。
+
 ## 注意事项
 
 - 格式化分为：**数据格式化**表示表单数据和**显示格式化**显示数据（等同 [nzFormat](https://ng.ant.design/components/time-picker/zh#api) 值）
diff --git a/packages/form/src/widgets/time/schema.ts b/packages/form/widgets/time/schema.ts
similarity index 97%
rename from packages/form/src/widgets/time/schema.ts
rename to packages/form/widgets/time/schema.ts
index 336defd47a..f39c8df497 100644
--- a/packages/form/src/widgets/time/schema.ts
+++ b/packages/form/widgets/time/schema.ts
@@ -1,4 +1,4 @@
-import { SFDLSSize, SFUISchemaItem } from '../../schema/ui';
+import type { SFDLSSize, SFUISchemaItem } from '@delon/form';
 
 export interface SFTimeWidgetSchema extends SFUISchemaItem {
   size?: SFDLSSize;
diff --git a/packages/form/src/widgets/time/time.widget.spec.ts b/packages/form/widgets/time/widget.spec.ts
similarity index 95%
rename from packages/form/src/widgets/time/time.widget.spec.ts
rename to packages/form/widgets/time/widget.spec.ts
index 4d07cdd400..5eb051c59e 100644
--- a/packages/form/src/widgets/time/time.widget.spec.ts
+++ b/packages/form/widgets/time/widget.spec.ts
@@ -3,11 +3,12 @@ import { ComponentFixture } from '@angular/core/testing';
 
 import { format } from 'date-fns';
 
+import type { SFSchema } from '@delon/form';
 import { createTestContext } from '@delon/testing';
 
-import { TimeWidget } from './time.widget';
-import { configureSFTestSuite, SFPage, TestFormComponent } from '../../../spec/base.spec';
-import { SFSchema } from '../../../src/schema/index';
+import { TimeWidgetModule } from './index';
+import { TimeWidget } from './widget';
+import { configureSFTestSuite, SFPage, TestFormComponent } from '../../spec/base.spec';
 
 const FORMAT = 'yyyy-MM-dd HH:mm:ss';
 
@@ -18,7 +19,7 @@ describe('form: widget: time', () => {
   let dl: DebugElement;
   const widget = 'time';
 
-  configureSFTestSuite();
+  configureSFTestSuite({ imports: [TimeWidgetModule] });
 
   beforeEach(() => {
     ({ fixture, dl, context } = createTestContext(TestFormComponent));
diff --git a/packages/form/src/widgets/time/time.widget.ts b/packages/form/widgets/time/widget.ts
similarity index 64%
rename from packages/form/src/widgets/time/time.widget.ts
rename to packages/form/widgets/time/widget.ts
index e3cfbd59c8..057d05ac10 100644
--- a/packages/form/src/widgets/time/time.widget.ts
+++ b/packages/form/widgets/time/widget.ts
@@ -2,20 +2,52 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 
 import { format } from 'date-fns';
 
+import { ControlUIWidget, SFValue, toBool } from '@delon/form';
 import type { NzSafeAny } from 'ng-zorro-antd/core/types';
 
-import { SFTimeWidgetSchema } from './schema';
-import { SFValue } from '../../interface';
-import { toBool } from '../../utils';
-import { ControlUIWidget } from '../../widget';
+import type { SFTimeWidgetSchema } from './schema';
 
 @Component({
   selector: 'sf-time',
-  templateUrl: './time.widget.html',
+  template: `<sf-item-wrap
+    [id]="id"
+    [schema]="schema"
+    [ui]="ui"
+    [showError]="showError"
+    [error]="error"
+    [showTitle]="schema.title"
+  >
+    <nz-time-picker
+      [nzId]="id"
+      [(ngModel)]="displayValue"
+      (ngModelChange)="_change($event)"
+      [nzDisabled]="disabled"
+      [nzSize]="$any(ui.size)"
+      [nzFormat]="i.displayFormat"
+      [nzAllowEmpty]="i.allowEmpty"
+      [nzClearText]="i.clearText"
+      [nzDefaultOpenValue]="i.defaultOpenValue"
+      [nzDisabledHours]="ui.disabledHours"
+      [nzDisabledMinutes]="ui.disabledMinutes"
+      [nzDisabledSeconds]="ui.disabledSeconds"
+      [nzHideDisabledOptions]="i.hideDisabledOptions"
+      [nzUse12Hours]="i.use12Hours"
+      [nzHourStep]="i.hourStep"
+      [nzMinuteStep]="i.minuteStep"
+      [nzSecondStep]="i.secondStep"
+      [nzPopupClassName]="ui.popupClassName!"
+      [nzPlaceHolder]="ui.placeholder!"
+      [nzNowText]="ui.nowText!"
+      [nzOkText]="ui.okText!"
+      (nzOpenChange)="_openChange($event)"
+    />
+  </sf-item-wrap>`,
   preserveWhitespaces: false,
   encapsulation: ViewEncapsulation.None
 })
 export class TimeWidget extends ControlUIWidget<SFTimeWidgetSchema> implements OnInit {
+  static readonly KEY = 'time';
+
   private valueFormat: string | undefined;
   displayValue: Date | null = null;
   i: NzSafeAny;
diff --git a/packages/form/widgets/transfer/widget.spec.ts b/packages/form/widgets/transfer/widget.spec.ts
index b678e8f2b6..39cadd6688 100644
--- a/packages/form/widgets/transfer/widget.spec.ts
+++ b/packages/form/widgets/transfer/widget.spec.ts
@@ -6,6 +6,7 @@ import { SFSchema } from '@delon/form';
 import { createTestContext } from '@delon/testing';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 
+import { TransferWidgetModule } from './index';
 import { configureSFTestSuite, SFPage, TestFormComponent } from '../../spec/base.spec';
 
 describe('form: widget: transfer', () => {
@@ -21,7 +22,7 @@ describe('form: widget: transfer', () => {
     rightBtn: '.ant-transfer-operation .ant-btn:last-child'
   };
 
-  configureSFTestSuite();
+  configureSFTestSuite({ imports: [TransferWidgetModule] });
 
   beforeEach(() => {
     ({ fixture, dl, context } = createTestContext(TestFormComponent));
diff --git a/packages/form/widgets/tree-select/widget.spec.ts b/packages/form/widgets/tree-select/widget.spec.ts
index 1c99d29ed0..e766f817e2 100644
--- a/packages/form/widgets/tree-select/widget.spec.ts
+++ b/packages/form/widgets/tree-select/widget.spec.ts
@@ -6,6 +6,7 @@ import { SFSchema } from '@delon/form';
 import { createTestContext } from '@delon/testing';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 
+import { TreeSelectWidgetModule } from './index';
 import { configureSFTestSuite, SFPage, TestFormComponent } from '../../spec/base.spec';
 
 describe('form: widget: tree-select', () => {
@@ -15,7 +16,7 @@ describe('form: widget: tree-select', () => {
   let dl: DebugElement;
   const widget = 'tree-select';
 
-  configureSFTestSuite();
+  configureSFTestSuite({ imports: [TreeSelectWidgetModule] });
 
   beforeEach(() => {
     ({ fixture, dl, context } = createTestContext(TestFormComponent));
diff --git a/packages/form/src/widgets/upload/demo/simple.md b/packages/form/widgets/upload/demo/simple.md
similarity index 93%
rename from packages/form/src/widgets/upload/demo/simple.md
rename to packages/form/widgets/upload/demo/simple.md
index e6d733953c..072b085b30 100644
--- a/packages/form/src/widgets/upload/demo/simple.md
+++ b/packages/form/widgets/upload/demo/simple.md
@@ -15,7 +15,8 @@ Simplest of usage.
 
 ```ts
 import { Component } from '@angular/core';
-import { SFSchema, SFUploadWidgetSchema } from '@delon/form';
+import { SFSchema } from '@delon/form';
+import type { SFUploadWidgetSchema } from '@delon/form/widgets/upload';
 import { NzMessageService } from 'ng-zorro-antd/message';
 
 @Component({
diff --git a/packages/form/src/widgets/upload/index.en-US.md b/packages/form/widgets/upload/index.en-US.md
similarity index 94%
rename from packages/form/src/widgets/upload/index.en-US.md
rename to packages/form/widgets/upload/index.en-US.md
index 330c2916cd..a1c3ce0e24 100644
--- a/packages/form/src/widgets/upload/index.en-US.md
+++ b/packages/form/widgets/upload/index.en-US.md
@@ -1,11 +1,15 @@
 ---
 title: upload
 subtitle: Upload
-type: Widgets
+type: Non-built-in widgets
 ---
 
 Upload file widget by select or drag.
 
+## Import module
+
+Non-built-in modules, Should be import `UploadWidgetModule` in [json-schema.module.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/shared/json-schema/json-schema.module.ts#L11).
+
 ## Note
 
 - **Must** set `resReName` to get correct data
diff --git a/packages/form/widgets/upload/index.ts b/packages/form/widgets/upload/index.ts
new file mode 100644
index 0000000000..45fe75f501
--- /dev/null
+++ b/packages/form/widgets/upload/index.ts
@@ -0,0 +1,23 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { DelonFormModule, WidgetRegistry } from '@delon/form';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzUploadModule } from 'ng-zorro-antd/upload';
+
+import { UploadWidget } from './widget';
+
+export * from './widget';
+export * from './schema';
+
+@NgModule({
+  imports: [FormsModule, CommonModule, DelonFormModule, NzUploadModule, NzIconModule, NzButtonModule],
+  declarations: [UploadWidget]
+})
+export class UploadWidgetModule {
+  constructor(widgetRegistry: WidgetRegistry) {
+    widgetRegistry.register(UploadWidget.KEY, UploadWidget);
+  }
+}
diff --git a/packages/form/src/widgets/upload/index.zh-CN.md b/packages/form/widgets/upload/index.zh-CN.md
similarity index 94%
rename from packages/form/src/widgets/upload/index.zh-CN.md
rename to packages/form/widgets/upload/index.zh-CN.md
index 7d29236496..504ea04e0b 100644
--- a/packages/form/src/widgets/upload/index.zh-CN.md
+++ b/packages/form/widgets/upload/index.zh-CN.md
@@ -1,11 +1,15 @@
 ---
 title: upload
 subtitle: 上传
-type: Widgets
+type: Non-built-in widgets
 ---
 
 文件选择上传和拖拽上传控件。
 
+## 导入模块
+
+非内置模块，需要额外在 [json-schema.module.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/shared/json-schema/json-schema.module.ts#L11) 导入 `UploadWidgetModule`。
+
 ## 注意事项
 
 - **务必** 指定 `resReName` 来获取正确数据
diff --git a/packages/form/src/widgets/upload/schema.ts b/packages/form/widgets/upload/schema.ts
similarity index 97%
rename from packages/form/src/widgets/upload/schema.ts
rename to packages/form/widgets/upload/schema.ts
index e3b0420a43..514aa32d26 100644
--- a/packages/form/src/widgets/upload/schema.ts
+++ b/packages/form/widgets/upload/schema.ts
@@ -1,6 +1,7 @@
 import { Observable, Subscription } from 'rxjs';
 
-import {
+import type { SFSchemaEnumType, SFUISchemaItem } from '@delon/form';
+import type {
   NzShowUploadList,
   NzUploadChangeParam,
   NzUploadFile,
@@ -9,9 +10,6 @@ import {
   UploadFilter
 } from 'ng-zorro-antd/upload';
 
-import { SFSchemaEnumType } from '../../schema';
-import { SFUISchemaItem } from '../../schema/ui';
-
 export interface SFUploadWidgetSchema extends SFUISchemaItem {
   /**
    * 异步数据源
diff --git a/packages/form/src/widgets/upload/upload.widget.spec.ts b/packages/form/widgets/upload/widget.spec.ts
similarity index 97%
rename from packages/form/src/widgets/upload/upload.widget.spec.ts
rename to packages/form/widgets/upload/widget.spec.ts
index 48f7a87469..117340aa26 100644
--- a/packages/form/src/widgets/upload/upload.widget.spec.ts
+++ b/packages/form/widgets/upload/widget.spec.ts
@@ -7,8 +7,9 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types';
 import { NzModalService } from 'ng-zorro-antd/modal';
 import { NzUploadComponent } from 'ng-zorro-antd/upload';
 
-import { UploadWidget } from './upload.widget';
-import { configureSFTestSuite, SFPage, TestFormComponent } from '../../../spec/base.spec';
+import { UploadWidgetModule } from './index';
+import { UploadWidget } from './widget';
+import { configureSFTestSuite, SFPage, TestFormComponent } from '../../spec/base.spec';
 
 describe('form: widget: upload', () => {
   let fixture: ComponentFixture<TestFormComponent>;
@@ -17,7 +18,7 @@ describe('form: widget: upload', () => {
   let dl: DebugElement;
   const widget = 'upload';
 
-  configureSFTestSuite();
+  configureSFTestSuite({ imports: [UploadWidgetModule] });
 
   beforeEach(() => {
     ({ fixture, dl, context } = createTestContext(TestFormComponent));
diff --git a/packages/form/src/widgets/upload/upload.widget.ts b/packages/form/widgets/upload/widget.ts
similarity index 66%
rename from packages/form/src/widgets/upload/upload.widget.ts
rename to packages/form/widgets/upload/widget.ts
index 49ecf797b5..666a6fc1a7 100644
--- a/packages/form/src/widgets/upload/upload.widget.ts
+++ b/packages/form/widgets/upload/widget.ts
@@ -1,23 +1,75 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { of } from 'rxjs';
 
+import { ControlUIWidget, SFValue, getData, toBool } from '@delon/form';
 import { deepGet } from '@delon/util/other';
 import type { NzSafeAny } from 'ng-zorro-antd/core/types';
 import { NzModalService } from 'ng-zorro-antd/modal';
 import { NzUploadChangeParam, NzUploadFile } from 'ng-zorro-antd/upload';
 
-import { SFUploadWidgetSchema } from './schema';
-import { SFValue } from '../../interface';
-import { getData, toBool } from '../../utils';
-import { ControlUIWidget } from '../../widget';
+import type { SFUploadWidgetSchema } from './schema';
 
 @Component({
   selector: 'sf-upload',
-  templateUrl: './upload.widget.html',
+  template: `<sf-item-wrap
+    [id]="id"
+    [schema]="schema"
+    [ui]="ui"
+    [showError]="showError"
+    [error]="error"
+    [showTitle]="schema.title"
+  >
+    <nz-upload
+      [nzType]="i.type"
+      [(nzFileList)]="fileList"
+      [nzDisabled]="disabled"
+      [nzAction]="i.action"
+      [nzDirectory]="i.directory"
+      [nzOpenFileDialogOnClick]="i.openFileDialogOnClick"
+      [nzAccept]="i.accept"
+      [nzLimit]="i.limit"
+      [nzFilter]="i.filter"
+      [nzSize]="i.size"
+      [nzFileType]="i.fileType"
+      [nzHeaders]="ui.headers"
+      [nzData]="ui.data"
+      [nzListType]="i.listType"
+      [nzMultiple]="i.multiple"
+      [nzName]="i.name"
+      [nzShowUploadList]="i.showUploadList"
+      [nzWithCredentials]="i.withCredentials"
+      [nzBeforeUpload]="i.beforeUpload"
+      [nzCustomRequest]="i.customRequest"
+      [nzRemove]="ui.remove || handleRemove"
+      [nzPreview]="handlePreview"
+      [nzPreviewFile]="ui.previewFile"
+      [nzDownload]="ui.download"
+      [nzTransformFile]="ui.transformFile"
+      (nzChange)="change($event)"
+      [nzShowButton]="fileList.length < i.limitFileCount"
+    >
+      <ng-container [ngSwitch]="btnType">
+        <ng-container *ngSwitchCase="'plus'">
+          <i nz-icon nzType="plus"></i>
+          <div class="ant-upload-text" [innerHTML]="i.text"></div>
+        </ng-container>
+        <ng-container *ngSwitchCase="'drag'">
+          <p class="ant-upload-drag-icon"><i nz-icon nzType="inbox"></i></p>
+          <p class="ant-upload-text" [innerHTML]="i.text"></p>
+          <p class="ant-upload-hint" [innerHTML]="i.hint"></p>
+        </ng-container>
+        <ng-container *ngSwitchDefault>
+          <button type="button" nz-button><i nz-icon nzType="upload"></i><span [innerHTML]="i.text"></span></button>
+        </ng-container>
+      </ng-container>
+    </nz-upload>
+  </sf-item-wrap>`,
   preserveWhitespaces: false,
   encapsulation: ViewEncapsulation.None
 })
 export class UploadWidget extends ControlUIWidget<SFUploadWidgetSchema> implements OnInit {
+  static readonly KEY = 'upload';
+
   i: NzSafeAny;
   fileList: NzUploadFile[] = [];
   btnType = '';
diff --git a/src/app/routes/form-pages/validator/validator.component.ts b/src/app/routes/form-pages/validator/validator.component.ts
index ca130d0c63..c50cff221a 100644
--- a/src/app/routes/form-pages/validator/validator.component.ts
+++ b/src/app/routes/form-pages/validator/validator.component.ts
@@ -19,7 +19,7 @@ import { NzMessageService } from 'ng-zorro-antd/message';
 @Component({
   selector: 'demo',
   template: \`
-  <sf [schema]="schema" [formData]="formData" [ui]="ui" [layout]="layout"
+ <sf [schema]="schema" [formData]="formData" [ui]="ui" [layout]="layout"
       (formSubmit)="submit($event)"
       (formChange)="change($event)"
       (formError)="error($event)"></sf>
diff --git a/src/app/shared/json-schema/json-schema.module.ts b/src/app/shared/json-schema/json-schema.module.ts
index ba588e71fb..51a383bed8 100644
--- a/src/app/shared/json-schema/json-schema.module.ts
+++ b/src/app/shared/json-schema/json-schema.module.ts
@@ -6,8 +6,10 @@ import { MentionWidgetModule } from '@delon/form/widgets/mention';
 import { RateWidgetModule } from '@delon/form/widgets/rate';
 import { SliderWidgetModule } from '@delon/form/widgets/slider';
 import { TagWidgetModule } from '@delon/form/widgets/tag';
+import { TimeWidgetModule } from '@delon/form/widgets/time';
 import { TransferWidgetModule } from '@delon/form/widgets/transfer';
 import { TreeSelectWidgetModule } from '@delon/form/widgets/tree-select';
+import { UploadWidgetModule } from '@delon/form/widgets/upload';
 import { TinymceWidget } from '@delon/form/widgets-third/tinymce/tinymce.widget';
 
 import { SharedModule } from '../shared.module';
@@ -25,7 +27,9 @@ export const SCHEMA_THIRDS_COMPONENTS = [TinymceWidget];
     RateWidgetModule,
     SliderWidgetModule,
     TreeSelectWidgetModule,
-    TagWidgetModule
+    TagWidgetModule,
+    TimeWidgetModule,
+    UploadWidgetModule
   ],
   exports: [...SCHEMA_THIRDS_COMPONENTS]
 })

From 4ed56fcd217b79db846f0aee2d927f094812adbd Mon Sep 17 00:00:00 2001
From: cipchk <cipchk@qq.com>
Date: Sat, 21 Oct 2023 15:37:36 +0800
Subject: [PATCH 3/9] chore: add autocomplete

---
 packages/form/src/module.ts                   |  4 --
 .../autocomplete/autocomplete.widget.html     | 27 ------------
 packages/form/src/widgets/index.ts            |  2 -
 .../form/src/widgets/nz-widget.registry.ts    |  2 -
 .../widgets/autocomplete/demo/simple.md       |  3 +-
 .../widgets/autocomplete/index.en-US.md       |  6 ++-
 packages/form/widgets/autocomplete/index.ts   | 22 ++++++++++
 .../widgets/autocomplete/index.zh-CN.md       |  6 ++-
 .../{src => }/widgets/autocomplete/schema.ts  |  6 +--
 .../autocomplete/widget.spec.ts}              | 10 ++---
 .../autocomplete/widget.ts}                   | 44 ++++++++++++++++---
 .../shared/json-schema/json-schema.module.ts  |  2 +
 12 files changed, 81 insertions(+), 53 deletions(-)
 delete mode 100644 packages/form/src/widgets/autocomplete/autocomplete.widget.html
 rename packages/form/{src => }/widgets/autocomplete/demo/simple.md (91%)
 rename packages/form/{src => }/widgets/autocomplete/index.en-US.md (90%)
 create mode 100644 packages/form/widgets/autocomplete/index.ts
 rename packages/form/{src => }/widgets/autocomplete/index.zh-CN.md (90%)
 rename packages/form/{src => }/widgets/autocomplete/schema.ts (89%)
 rename packages/form/{src/widgets/autocomplete/autocomplete.widget.spec.ts => widgets/autocomplete/widget.spec.ts} (96%)
 rename packages/form/{src/widgets/autocomplete/autocomplete.widget.ts => widgets/autocomplete/widget.ts} (74%)

diff --git a/packages/form/src/module.ts b/packages/form/src/module.ts
index e64509fbaa..e67ba6a9cf 100644
--- a/packages/form/src/module.ts
+++ b/packages/form/src/module.ts
@@ -3,7 +3,6 @@ import { CommonModule } from '@angular/common';
 import { ModuleWithProviders, NgModule, NgZone } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
-import { NzAutocompleteModule } from 'ng-zorro-antd/auto-complete';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzCardModule } from 'ng-zorro-antd/card';
 import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
@@ -23,7 +22,6 @@ import { DelonLocaleModule } from '@delon/theme';
 import { AlainConfigService } from '@delon/util/config';
 
 const ZORROS = [
-  NzAutocompleteModule,
   NzButtonModule,
   NzCardModule,
   NzCheckboxModule,
@@ -53,7 +51,6 @@ const COMPONENTS = [SFComponent, SFItemComponent, SFItemWrapComponent, SFTemplat
 
 import { WidgetRegistry } from './widget.factory';
 import { ArrayWidget } from './widgets/array/array.widget';
-import { AutoCompleteWidget } from './widgets/autocomplete/autocomplete.widget';
 import { BooleanWidget } from './widgets/boolean/boolean.widget';
 import { CheckboxWidget } from './widgets/checkbox/checkbox.widget';
 import { CustomWidget } from './widgets/custom/custom.widget';
@@ -78,7 +75,6 @@ const WIDGETS = [
   BooleanWidget,
   TextareaWidget,
   SelectWidget,
-  AutoCompleteWidget,
   CustomWidget,
   TextWidget
 ];
diff --git a/packages/form/src/widgets/autocomplete/autocomplete.widget.html b/packages/form/src/widgets/autocomplete/autocomplete.widget.html
deleted file mode 100644
index 128281dcd5..0000000000
--- a/packages/form/src/widgets/autocomplete/autocomplete.widget.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<sf-item-wrap [id]="id" [schema]="schema" [ui]="ui" [showError]="showError" [error]="error" [showTitle]="schema.title">
-  <input
-    nz-input
-    [nzAutocomplete]="auto"
-    [attr.id]="id"
-    [disabled]="disabled"
-    [attr.disabled]="disabled"
-    [nzSize]="ui.size!"
-    [(ngModel)]="typing"
-    (ngModelChange)="_setValue($event)"
-    [attr.maxLength]="schema.maxLength || null"
-    [attr.placeholder]="ui.placeholder"
-    autocomplete="off"
-  />
-  <nz-autocomplete
-    #auto
-    [nzBackfill]="i.backfill"
-    [nzDefaultActiveFirstOption]="i.defaultActiveFirstOption"
-    [nzWidth]="i.width"
-    [nzOverlayStyle]="ui.overlayStyle || {}"
-    [nzOverlayClassName]="ui.overlayClassName || ''"
-    [compareWith]="i.compareWith"
-    (selectionChange)="updateValue($event)"
-  >
-    <nz-auto-option *ngFor="let i of list | async" [nzValue]="i" [nzLabel]="i.label"> {{ i.label }} </nz-auto-option>
-  </nz-autocomplete>
-</sf-item-wrap>
diff --git a/packages/form/src/widgets/index.ts b/packages/form/src/widgets/index.ts
index e9804ef1e2..7045bcf234 100644
--- a/packages/form/src/widgets/index.ts
+++ b/packages/form/src/widgets/index.ts
@@ -17,8 +17,6 @@ export * from './textarea/textarea.widget';
 export * from './textarea/schema';
 export * from './select/select.widget';
 export * from './select/schema';
-export * from './autocomplete/autocomplete.widget';
-export * from './autocomplete/schema';
 export * from './text/text.widget';
 export * from './text/schema';
 export * from './custom/custom.widget';
diff --git a/packages/form/src/widgets/nz-widget.registry.ts b/packages/form/src/widgets/nz-widget.registry.ts
index 464c9ace28..910a00de41 100644
--- a/packages/form/src/widgets/nz-widget.registry.ts
+++ b/packages/form/src/widgets/nz-widget.registry.ts
@@ -1,5 +1,4 @@
 import { ArrayWidget } from './array/array.widget';
-import { AutoCompleteWidget } from './autocomplete/autocomplete.widget';
 import { BooleanWidget } from './boolean/boolean.widget';
 import { CheckboxWidget } from './checkbox/checkbox.widget';
 import { CustomWidget } from './custom/custom.widget';
@@ -30,7 +29,6 @@ export class NzWidgetRegistry extends WidgetRegistry {
     this.register('boolean', BooleanWidget);
     this.register('textarea', TextareaWidget);
     this.register('select', SelectWidget);
-    this.register('autocomplete', AutoCompleteWidget);
     this.register('custom', CustomWidget);
 
     this.setDefault(StringWidget);
diff --git a/packages/form/src/widgets/autocomplete/demo/simple.md b/packages/form/widgets/autocomplete/demo/simple.md
similarity index 91%
rename from packages/form/src/widgets/autocomplete/demo/simple.md
rename to packages/form/widgets/autocomplete/demo/simple.md
index 93a117f613..b55386039e 100644
--- a/packages/form/src/widgets/autocomplete/demo/simple.md
+++ b/packages/form/widgets/autocomplete/demo/simple.md
@@ -15,7 +15,8 @@ Simplest of usage.
 
 ```ts
 import { Component } from '@angular/core';
-import { SFAutoCompleteWidgetSchema, SFSchema } from '@delon/form';
+import { SFSchema } from '@delon/form';
+import type { SFAutoCompleteWidgetSchema } from '@delon/form/widgets/autocomplete';
 import { NzMessageService } from 'ng-zorro-antd/message';
 import { of } from 'rxjs';
 
diff --git a/packages/form/src/widgets/autocomplete/index.en-US.md b/packages/form/widgets/autocomplete/index.en-US.md
similarity index 90%
rename from packages/form/src/widgets/autocomplete/index.en-US.md
rename to packages/form/widgets/autocomplete/index.en-US.md
index b2d5042f8c..8425bf704c 100644
--- a/packages/form/src/widgets/autocomplete/index.en-US.md
+++ b/packages/form/widgets/autocomplete/index.en-US.md
@@ -1,11 +1,15 @@
 ---
 title: autocomplete
 subtitle: Autocomplete
-type: Widgets
+type: Non-built-in widgets
 ---
 
 Input complete automatically.
 
+## Import module
+
+Non-built-in modules, Should be import `AutoCompleteWidgetModule` in [json-schema.module.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/shared/json-schema/json-schema.module.ts#L11).
+
 ## Data Source
 
 **Static**
diff --git a/packages/form/widgets/autocomplete/index.ts b/packages/form/widgets/autocomplete/index.ts
new file mode 100644
index 0000000000..6229fa2be8
--- /dev/null
+++ b/packages/form/widgets/autocomplete/index.ts
@@ -0,0 +1,22 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { DelonFormModule, WidgetRegistry } from '@delon/form';
+import { NzAutocompleteModule } from 'ng-zorro-antd/auto-complete';
+import { NzInputModule } from 'ng-zorro-antd/input';
+
+import { AutoCompleteWidget } from './widget';
+
+export * from './widget';
+export * from './schema';
+
+@NgModule({
+  imports: [FormsModule, DelonFormModule, CommonModule, NzInputModule, NzAutocompleteModule],
+  declarations: [AutoCompleteWidget]
+})
+export class AutoCompleteWidgetModule {
+  constructor(widgetRegistry: WidgetRegistry) {
+    widgetRegistry.register(AutoCompleteWidget.KEY, AutoCompleteWidget);
+  }
+}
diff --git a/packages/form/src/widgets/autocomplete/index.zh-CN.md b/packages/form/widgets/autocomplete/index.zh-CN.md
similarity index 90%
rename from packages/form/src/widgets/autocomplete/index.zh-CN.md
rename to packages/form/widgets/autocomplete/index.zh-CN.md
index 2baeea393b..859f4e6860 100644
--- a/packages/form/src/widgets/autocomplete/index.zh-CN.md
+++ b/packages/form/widgets/autocomplete/index.zh-CN.md
@@ -1,11 +1,15 @@
 ---
 title: autocomplete
 subtitle: 自动完成
-type: Widgets
+type: Non-built-in widgets
 ---
 
 输入框自动完成功能。
 
+## 导入模块
+
+非内置模块，需要额外在 [json-schema.module.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/shared/json-schema/json-schema.module.ts#L11) 导入 `AutoCompleteWidgetModule`。
+
 ## 数据源说明
 
 **静态**
diff --git a/packages/form/src/widgets/autocomplete/schema.ts b/packages/form/widgets/autocomplete/schema.ts
similarity index 89%
rename from packages/form/src/widgets/autocomplete/schema.ts
rename to packages/form/widgets/autocomplete/schema.ts
index dfa5243218..abe50891f7 100644
--- a/packages/form/src/widgets/autocomplete/schema.ts
+++ b/packages/form/widgets/autocomplete/schema.ts
@@ -1,11 +1,9 @@
 import { Observable } from 'rxjs';
 
-import { NzAutocompleteOptionComponent } from 'ng-zorro-antd/auto-complete';
+import type { SFSchemaEnum, SFSchemaEnumType, SFUISchemaItem } from '@delon/form';
+import type { NzAutocompleteOptionComponent } from 'ng-zorro-antd/auto-complete';
 import type { CompareWith } from 'ng-zorro-antd/core/types';
 
-import type { SFSchemaEnum, SFSchemaEnumType } from '../../schema';
-import type { SFUISchemaItem } from '../../schema/ui';
-
 export interface SFAutoCompleteWidgetSchema extends SFUISchemaItem {
   /**
    * 异步静态数据源
diff --git a/packages/form/src/widgets/autocomplete/autocomplete.widget.spec.ts b/packages/form/widgets/autocomplete/widget.spec.ts
similarity index 96%
rename from packages/form/src/widgets/autocomplete/autocomplete.widget.spec.ts
rename to packages/form/widgets/autocomplete/widget.spec.ts
index dc67d71d23..3a7e75c333 100644
--- a/packages/form/src/widgets/autocomplete/autocomplete.widget.spec.ts
+++ b/packages/form/widgets/autocomplete/widget.spec.ts
@@ -2,15 +2,15 @@ import { DebugElement } from '@angular/core';
 import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
 import { of } from 'rxjs';
 
+import { mergeConfig, SFSchema, SFSchemaEnum } from '@delon/form';
 import { createTestContext } from '@delon/testing';
 import { AlainConfigService } from '@delon/util/config';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 
-import { AutoCompleteWidget } from './autocomplete.widget';
+import { AutoCompleteWidgetModule } from './index';
 import { SFAutoCompleteWidgetSchema } from './schema';
-import { configureSFTestSuite, SFPage, TestFormComponent } from '../../../spec/base.spec';
-import { SFSchema, SFSchemaEnum } from '../../../src/schema/index';
-import { mergeConfig } from '../../config';
+import { AutoCompleteWidget } from './widget';
+import { configureSFTestSuite, SFPage, TestFormComponent } from '../../spec/base.spec';
 
 describe('form: widget: autocomplete', () => {
   let fixture: ComponentFixture<TestFormComponent>;
@@ -19,7 +19,7 @@ describe('form: widget: autocomplete', () => {
   let page: SFPage;
   const widget = 'autocomplete';
 
-  configureSFTestSuite();
+  configureSFTestSuite({ imports: [AutoCompleteWidgetModule] });
 
   beforeEach(() => {
     ({ fixture, dl, context } = createTestContext(TestFormComponent));
diff --git a/packages/form/src/widgets/autocomplete/autocomplete.widget.ts b/packages/form/widgets/autocomplete/widget.ts
similarity index 74%
rename from packages/form/src/widgets/autocomplete/autocomplete.widget.ts
rename to packages/form/widgets/autocomplete/widget.ts
index 2a0acb9fd2..68c87215ec 100644
--- a/packages/form/src/widgets/autocomplete/autocomplete.widget.ts
+++ b/packages/form/widgets/autocomplete/widget.ts
@@ -2,22 +2,54 @@ import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
 import { NgModel } from '@angular/forms';
 import { Observable, of, debounceTime, map, mergeMap, startWith, takeUntil } from 'rxjs';
 
+import { ControlUIWidget, SFSchemaEnum, SFValue, getCopyEnum, getEnum, toBool } from '@delon/form';
 import { NzAutocompleteOptionComponent } from 'ng-zorro-antd/auto-complete';
 import type { NzSafeAny } from 'ng-zorro-antd/core/types';
 
-import { SFAutoCompleteWidgetSchema } from './schema';
-import { SFValue } from '../../interface';
-import { SFSchemaEnum } from '../../schema';
-import { getCopyEnum, getEnum, toBool } from '../../utils';
-import { ControlUIWidget } from '../../widget';
+import type { SFAutoCompleteWidgetSchema } from './schema';
 
 @Component({
   selector: 'sf-autocomplete',
-  templateUrl: './autocomplete.widget.html',
+  template: `<sf-item-wrap
+    [id]="id"
+    [schema]="schema"
+    [ui]="ui"
+    [showError]="showError"
+    [error]="error"
+    [showTitle]="schema.title"
+  >
+    <input
+      nz-input
+      [nzAutocomplete]="auto"
+      [attr.id]="id"
+      [disabled]="disabled"
+      [attr.disabled]="disabled"
+      [nzSize]="ui.size!"
+      [(ngModel)]="typing"
+      (ngModelChange)="_setValue($event)"
+      [attr.maxLength]="schema.maxLength || null"
+      [attr.placeholder]="ui.placeholder"
+      autocomplete="off"
+    />
+    <nz-autocomplete
+      #auto
+      [nzBackfill]="i.backfill"
+      [nzDefaultActiveFirstOption]="i.defaultActiveFirstOption"
+      [nzWidth]="i.width"
+      [nzOverlayStyle]="ui.overlayStyle || {}"
+      [nzOverlayClassName]="ui.overlayClassName || ''"
+      [compareWith]="i.compareWith"
+      (selectionChange)="updateValue($event)"
+    >
+      <nz-auto-option *ngFor="let i of list | async" [nzValue]="i" [nzLabel]="i.label"> {{ i.label }} </nz-auto-option>
+    </nz-autocomplete>
+  </sf-item-wrap>`,
   preserveWhitespaces: false,
   encapsulation: ViewEncapsulation.None
 })
 export class AutoCompleteWidget extends ControlUIWidget<SFAutoCompleteWidgetSchema> {
+  static readonly KEY = 'autocomplete';
+
   i: NzSafeAny = {};
   list!: Observable<SFSchemaEnum[]>;
   typing: string = '';
diff --git a/src/app/shared/json-schema/json-schema.module.ts b/src/app/shared/json-schema/json-schema.module.ts
index 51a383bed8..f8de98c81d 100644
--- a/src/app/shared/json-schema/json-schema.module.ts
+++ b/src/app/shared/json-schema/json-schema.module.ts
@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 
 import { DelonFormModule, WidgetRegistry } from '@delon/form';
+import { AutoCompleteWidgetModule } from '@delon/form/widgets/autocomplete';
 import { CascaderWidgetModule } from '@delon/form/widgets/cascader';
 import { MentionWidgetModule } from '@delon/form/widgets/mention';
 import { RateWidgetModule } from '@delon/form/widgets/rate';
@@ -21,6 +22,7 @@ export const SCHEMA_THIRDS_COMPONENTS = [TinymceWidget];
   imports: [
     SharedModule,
     DelonFormModule.forRoot(),
+    AutoCompleteWidgetModule,
     CascaderWidgetModule,
     TransferWidgetModule,
     MentionWidgetModule,

From 45fcc45655809dd998097d0e02742dc236cc63f3 Mon Sep 17 00:00:00 2001
From: cipchk <cipchk@qq.com>
Date: Sat, 21 Oct 2023 17:32:13 +0800
Subject: [PATCH 4/9] chore: add thireds

---
 package.json                                  |  2 +-
 .../widgets-third/markdown/index.en-US.md     | 92 -------------------
 .../widgets-third/markdown/index.zh-CN.md     | 91 ------------------
 .../widgets-third/markdown/markdown.widget.ts | 27 ------
 .../monaco-editor/demo/simple.md              | 48 ++++++++++
 .../monaco-editor/index.en-US.md              | 33 +++++++
 .../form/widgets-third/monaco-editor/index.ts | 21 +++++
 .../monaco-editor/index.zh-CN.md              | 33 +++++++
 .../monaco-editor/ng-package.json             |  6 ++
 .../widgets-third/monaco-editor/schema.ts     | 19 ++++
 .../widgets-third/monaco-editor/widget.ts     | 45 +++++++++
 .../form/widgets-third/tinymce/index.en-US.md | 78 +++-------------
 packages/form/widgets-third/tinymce/index.ts  | 21 +++++
 .../form/widgets-third/tinymce/index.zh-CN.md | 79 +++-------------
 .../widgets-third/tinymce/ng-package.json     |  6 ++
 packages/form/widgets-third/tinymce/schema.ts | 12 +++
 .../widgets-third/tinymce/tinymce.widget.ts   | 35 -------
 packages/form/widgets-third/tinymce/widget.ts | 42 +++++++++
 .../form/widgets/autocomplete/ng-package.json |  6 ++
 .../form/widgets/cascader/ng-package.json     |  2 +-
 packages/form/widgets/mention/ng-package.json |  6 ++
 packages/form/widgets/rate/ng-package.json    |  6 ++
 packages/form/widgets/slider/ng-package.json  |  6 ++
 packages/form/widgets/tag/ng-package.json     |  6 ++
 packages/form/widgets/time/ng-package.json    |  6 ++
 .../form/widgets/transfer/ng-package.json     |  6 ++
 .../form/widgets/tree-select/ng-package.json  |  6 ++
 packages/form/widgets/upload/ng-package.json  |  6 ++
 schematics/utils/versions.ts                  |  2 +
 scripts/ci/utils.sh                           |  3 +-
 scripts/site/route-paths.txt                  |  4 +-
 src/app/app.module.ts                         |  4 +
 .../routes/form-pages/form-pages.module.ts    |  8 +-
 .../shared/json-schema/json-schema.module.ts  | 21 ++---
 34 files changed, 384 insertions(+), 404 deletions(-)
 delete mode 100644 packages/form/widgets-third/markdown/index.en-US.md
 delete mode 100644 packages/form/widgets-third/markdown/index.zh-CN.md
 delete mode 100644 packages/form/widgets-third/markdown/markdown.widget.ts
 create mode 100644 packages/form/widgets-third/monaco-editor/demo/simple.md
 create mode 100644 packages/form/widgets-third/monaco-editor/index.en-US.md
 create mode 100644 packages/form/widgets-third/monaco-editor/index.ts
 create mode 100644 packages/form/widgets-third/monaco-editor/index.zh-CN.md
 create mode 100644 packages/form/widgets-third/monaco-editor/ng-package.json
 create mode 100644 packages/form/widgets-third/monaco-editor/schema.ts
 create mode 100644 packages/form/widgets-third/monaco-editor/widget.ts
 create mode 100644 packages/form/widgets-third/tinymce/index.ts
 create mode 100644 packages/form/widgets-third/tinymce/ng-package.json
 create mode 100644 packages/form/widgets-third/tinymce/schema.ts
 delete mode 100644 packages/form/widgets-third/tinymce/tinymce.widget.ts
 create mode 100644 packages/form/widgets-third/tinymce/widget.ts
 create mode 100644 packages/form/widgets/autocomplete/ng-package.json
 create mode 100644 packages/form/widgets/mention/ng-package.json
 create mode 100644 packages/form/widgets/rate/ng-package.json
 create mode 100644 packages/form/widgets/slider/ng-package.json
 create mode 100644 packages/form/widgets/tag/ng-package.json
 create mode 100644 packages/form/widgets/time/ng-package.json
 create mode 100644 packages/form/widgets/transfer/ng-package.json
 create mode 100644 packages/form/widgets/tree-select/ng-package.json
 create mode 100644 packages/form/widgets/upload/ng-package.json

diff --git a/package.json b/package.json
index 073ac506e3..97daa12633 100644
--- a/package.json
+++ b/package.json
@@ -89,7 +89,7 @@
     "qrious": "^4.0.2",
     "@webcomponents/custom-elements": "^1.6.0",
     "aos": "^3.0.0-beta.6",
-    "@ng-util/monaco-editor": "^16.0.0",
+    "@ng-util/monaco-editor": "^16.0.1",
     "@nguniversal/express-engine": "^16.2.0",
     "express": "^4.18.2",
     "isutf8": "^4.0.0",
diff --git a/packages/form/widgets-third/markdown/index.en-US.md b/packages/form/widgets-third/markdown/index.en-US.md
deleted file mode 100644
index 9f33f7af6f..0000000000
--- a/packages/form/widgets-third/markdown/index.en-US.md
+++ /dev/null
@@ -1,92 +0,0 @@
----
-title: markdown
-subtitle: Markdown Editor
-type: Third Widgets
----
-
-Markdown Editor
-
-> Note: third party widget is not registered by default, see details from [Customize Widgets](https://ng-alain.com/form/customize/en).
-
-## How to Use
-
-**Installation dependencies**  
-
-Since the Markdown editor relies on a third-party plug-in [ngx-simplemde](https://github.com/cipchk/ngx-simplemde), the dependency should be installed first when using it
-
-`yarn add ngx-simplemde`
-
-
-**Import module**    
-
-- The project built using the latest scaffolding provides a third-party widget registration entry: `src/app/shared/json-schema/json-schema.module.ts`
-- `MarkdownWidget` needs to be declared in `JsonSchemaModule`
-
-```ts
-export const SCHEMA_THIRDS_COMPONENTS = [MarkdownWidget];
-
-@NgModule({
-  declarations: SCHEMA_THIRDS_COMPONENTS,
-  imports: [
-    SharedModule,
-    DelonFormModule.forRoot(),
-    SimplemdeModule.forRoot({ style: 'default' }),
-  ],
-  exports: SCHEMA_THIRDS_COMPONENTS
-})
-export class JsonSchemaModule {
-}
-```
-
-**Widget registration**  
-
-- Register the widget to the `WidgetRegistry` registry
-
-```ts
-export class JsonSchemaModule {
-  constructor(widgetRegistry: WidgetRegistry) {
-    widgetRegistry.register(MarkdownWidget.KEY, MarkdownWidget);
-  }
-}
-```
-
-**Import resources**  
-
-Import the corresponding resources in `angular.json`.
-
-```json
-"styles": [
-  "src/styles.less"
-]
-"scripts": [
-  "node_modules/simplemde-antd/dist/simplemde.min.js"
-]
-```
-
-**Import styles**  
-
-After using `style.less` as the style entry, you need to import the style file of `ngx-simplemde` and define some custom variables
-
-```less
-// src/style.less
-@import 'ngx-simplemde/index.less';
-// Change existing parameters here:
-@simplemde-icon-url: '//at.alicdn.com/t/font_700857_mnodkd1cp9l766r';
-@simplemde-statusbar-lines: 'Lins:';
-@simplemde-statusbar-words: 'words:';
-@simplemde-statusbar-characters: '字符：';
-@simplemde-statusbar-counts: '字数：';
-```
-
-## Source Code
-
-[Source Code](https://github.com/ng-alain/delon/tree/master/packages/form/widgets-third/markdown).
-
-## API
-
-### ui
-
-| Property | Description | Type | Default |
-|----------|-------------|------|---------|
-| `[options]` | Configuration options, [official website](https://github.com/cipchk/ngx-simplemde) | `object` | - |
-| `[change]` | Callback function when content in editor is changed | `(md: string) => void` | - |
diff --git a/packages/form/widgets-third/markdown/index.zh-CN.md b/packages/form/widgets-third/markdown/index.zh-CN.md
deleted file mode 100644
index d7121219ae..0000000000
--- a/packages/form/widgets-third/markdown/index.zh-CN.md
+++ /dev/null
@@ -1,91 +0,0 @@
----
-title: markdown
-subtitle: Markdown编辑器
-type: Third Widgets
----
-
-Markdown编辑器。
-
-> 注：第三方小部件默认并未注册，细节见[定制小部件](https://ng-alain.com/form/customize)。
-
-## 如何使用
-
-**安装依赖**  
-
-由于Markdown编辑器依赖第三方插件[ngx-simplemde](https://github.com/cipchk/ngx-simplemde)，所以使用时应首先安装依赖  
-
-`yarn add ngx-simplemde`
-
-**导入模块**
-
-- 使用最新脚手架搭建出的项目提供了第三方控件注册入口: `src/app/shared/json-schema/json-schema.module.ts`
-- 需将`MarkdownWidget`在`JsonSchemaModule`中进行声明
-
-```ts
-export const SCHEMA_THIRDS_COMPONENTS = [MarkdownWidget];
-
-@NgModule({
-  declarations: SCHEMA_THIRDS_COMPONENTS,
-  imports: [
-    SharedModule,
-    DelonFormModule.forRoot(),
-    SimplemdeModule.forRoot({ style: 'default' }),
-  ],
-  exports: SCHEMA_THIRDS_COMPONENTS
-})
-export class JsonSchemaModule {
-}
-```
-
-**控件注册**
-
-- 将控件注册到`WidgetRegistry`注册表中
-
-```ts
-export class JsonSchemaModule {
-  constructor(widgetRegistry: WidgetRegistry) {
-    widgetRegistry.register(MarkdownWidget.KEY, MarkdownWidget);
-  }
-}
-```
-
-**导入资源**
-
-在 `angular.json` 导入相应资源。
-
-```json
-"styles": [
-  "src/styles.less"
-]
-"scripts": [
-  "node_modules/simplemde-antd/dist/simplemde.min.js"
-]
-```
-
-**导入样式**
-
-使用`style.less`作为样式入口后，需将`ngx-simplemde`的样式文件导入进去，并定义一些自定义变量
-
-```less
-// src/style.less
-@import 'ngx-simplemde/index.less';
-// Change existing parameters here:
-@simplemde-icon-url: '//at.alicdn.com/t/font_700857_mnodkd1cp9l766r';
-@simplemde-statusbar-lines: 'Lins:';
-@simplemde-statusbar-words: 'words:';
-@simplemde-statusbar-characters: '字符：';
-@simplemde-statusbar-counts: '字数：';
-```
-
-## 源代码
-
-[源代码](https://github.com/ng-alain/delon/tree/master/packages/form/widgets-third/markdown)。
-
-## API
-
-### ui 属性
-
-| 成员 | 说明 | 类型 | 默认值 |
-|----|----|----|-----|
-| `[options]` | 配置项说明，[见官网](https://github.com/cipchk/ngx-simplemde) | `object` | - |
-| `[change]` | 编辑器内容发生改变时会触发该事件 | `(md: string) => void` | - |
diff --git a/packages/form/widgets-third/markdown/markdown.widget.ts b/packages/form/widgets-third/markdown/markdown.widget.ts
deleted file mode 100644
index e751dcdd8f..0000000000
--- a/packages/form/widgets-third/markdown/markdown.widget.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Component } from '@angular/core';
-
-import { ControlWidget } from '@delon/form';
-
-@Component({
-  selector: 'sf-md',
-  template: `
-    <sf-item-wrap
-      [id]="id"
-      [schema]="schema"
-      [ui]="ui"
-      [showError]="showError"
-      [error]="error"
-      [showTitle]="schema.title"
-    >
-      <simplemde [ngModel]="value" (ngModelChange)="_change($event)" [options]="ui.options" [delay]="ui.delay || 300" />
-    </sf-item-wrap>
-  `
-})
-export class MarkdownWidget extends ControlWidget {
-  static readonly KEY = 'md';
-
-  _change(value: string): void {
-    this.setValue(value);
-    if (this.ui.change) this.ui.change(value);
-  }
-}
diff --git a/packages/form/widgets-third/monaco-editor/demo/simple.md b/packages/form/widgets-third/monaco-editor/demo/simple.md
new file mode 100644
index 0000000000..c645d5f23a
--- /dev/null
+++ b/packages/form/widgets-third/monaco-editor/demo/simple.md
@@ -0,0 +1,48 @@
+---
+title:
+  zh-CN: 基础样例
+  en-US: Basic Usage
+order: 0
+---
+
+## zh-CN
+
+最简单的用法。
+
+## en-US
+
+Simplest of usage.
+
+```ts
+import { Component } from '@angular/core';
+
+import { SFSchema } from '@delon/form';
+import type { MonacoEditorWidgetSchema } from '@delon/form/widgets-third/monaco-editor';
+import { NzMessageService } from 'ng-zorro-antd/message';
+
+@Component({
+  selector: 'app-demo',
+  template: `<sf [schema]="schema" (formSubmit)="submit($event)" />`
+})
+export class DemoComponent {
+  schema: SFSchema = {
+    properties: {
+      json: {
+        type: 'string',
+        title: 'JSON',
+        default: `{"string": "abc","number": 1 }`,
+        ui: {
+          widget: 'monaco-editor',
+          options: { language: 'json' }
+        } as MonacoEditorWidgetSchema
+      }
+    }
+  };
+
+  constructor(private msg: NzMessageService) {}
+
+  submit(value: {}): void {
+    this.msg.success(JSON.stringify(value));
+  }
+}
+```
diff --git a/packages/form/widgets-third/monaco-editor/index.en-US.md b/packages/form/widgets-third/monaco-editor/index.en-US.md
new file mode 100644
index 0000000000..c634a84bce
--- /dev/null
+++ b/packages/form/widgets-third/monaco-editor/index.en-US.md
@@ -0,0 +1,33 @@
+---
+title: monaco-editor
+subtitle: Monaco Editor
+type: Third Widgets
+---
+
+Markdown Editor
+
+## How to Use
+
+**Installation dependencies**  
+
+`yarn add @ng-util/monaco-editor`
+
+**Import module**    
+
+- 1. Import `NuMonacoEditorModule.forRoot()` in `app.module.ts`
+- 2. Import `MonacoEditorWidgetModule` in [json-schema.module.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/shared/json-schema/json-schema.module.ts#L11).
+
+> For more Monaco Editor configuration, please refer to [@ng-util/monaco-editor](https://github.com/ng-util/ng-util/blob/master/packages/monaco-editor/README.md#usage).
+
+## API
+
+### ui
+
+| Property | Description | Type | Default |
+|----------|-------------|------|---------|
+| `[options]` | Configuration options, [official website](https://microsoft.github.io/monaco-editor/docs.html) | `monaco.editor.IStandaloneEditorConstructionOptions` | - |
+| `[delay]` | Time of lazy loading | `number` | - |
+| `[change]` | Callback function when content in editor is changed | `(value: string) => void` | - |
+| `[height]` | Height of monaco editor | `string` | `200px` |
+| `[model]` | Model of monaco editor | `NuMonacoEditorModel` | - |
+| `(event)` | Event callback | `EventEmitter<NuMonacoEditorEvent>` | - |
diff --git a/packages/form/widgets-third/monaco-editor/index.ts b/packages/form/widgets-third/monaco-editor/index.ts
new file mode 100644
index 0000000000..ba3a3cf2dc
--- /dev/null
+++ b/packages/form/widgets-third/monaco-editor/index.ts
@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NuMonacoEditorModule } from '@ng-util/monaco-editor';
+
+import { DelonFormModule, WidgetRegistry } from '@delon/form';
+
+import { MonacoEditorWidget } from './widget';
+
+export * from './widget';
+export * from './schema';
+
+@NgModule({
+  imports: [FormsModule, DelonFormModule, NuMonacoEditorModule],
+  declarations: [MonacoEditorWidget]
+})
+export class MonacoEditorWidgetModule {
+  constructor(widgetRegistry: WidgetRegistry) {
+    widgetRegistry.register(MonacoEditorWidget.KEY, MonacoEditorWidget);
+  }
+}
diff --git a/packages/form/widgets-third/monaco-editor/index.zh-CN.md b/packages/form/widgets-third/monaco-editor/index.zh-CN.md
new file mode 100644
index 0000000000..1fa7cfbbc8
--- /dev/null
+++ b/packages/form/widgets-third/monaco-editor/index.zh-CN.md
@@ -0,0 +1,33 @@
+---
+title: monaco-editor
+subtitle: Monaco Editor
+type: Third Widgets
+---
+
+Markdown编辑器。
+
+## 如何使用
+
+**安装依赖**  
+
+`yarn add @ng-util/monaco-editor`
+
+**导入模块**
+
+- 1、在 `app.module.ts` 下导入 `NuMonacoEditorModule.forRoot()`
+- 2、在 [json-schema.module.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/shared/json-schema/json-schema.module.ts#L11) 导入 `MonacoEditorWidgetModule`。
+
+> 关于更多 Monaco Editor 配置请参考 [@ng-util/monaco-editor](https://github.com/ng-util/ng-util/blob/master/packages/monaco-editor/README.md#usage)。
+
+## API
+
+### ui 属性
+
+| 成员 | 说明 | 类型 | 默认值 |
+|----|----|----|-----|
+| `[options]` | 配置项说明，[见官网](https://microsoft.github.io/monaco-editor/docs.html) | `monaco.editor.IStandaloneEditorConstructionOptions` | - |
+| `[delay]` | 延迟加载时间 | `number` | - |
+| `[change]` | 编辑器内容发生改变时会触发该事件 | `(value: string) => void` | - |
+| `[height]` | Height of monaco editor | `string` | `200px` |
+| `[model]` | Model of monaco editor | `NuMonacoEditorModel` | - |
+| `(event)` | Event callback | `EventEmitter<NuMonacoEditorEvent>` | - |
diff --git a/packages/form/widgets-third/monaco-editor/ng-package.json b/packages/form/widgets-third/monaco-editor/ng-package.json
new file mode 100644
index 0000000000..7f578c054e
--- /dev/null
+++ b/packages/form/widgets-third/monaco-editor/ng-package.json
@@ -0,0 +1,6 @@
+{
+  "lib": {
+    "flatModuleFile": "widgets-third-monaco-editor",
+    "entryFile": "index.ts"
+  }
+}
diff --git a/packages/form/widgets-third/monaco-editor/schema.ts b/packages/form/widgets-third/monaco-editor/schema.ts
new file mode 100644
index 0000000000..87767d34bd
--- /dev/null
+++ b/packages/form/widgets-third/monaco-editor/schema.ts
@@ -0,0 +1,19 @@
+import type { NuMonacoEditorEvent, NuMonacoEditorModel } from '@ng-util/monaco-editor';
+
+import type { SFUISchemaItem } from '@delon/form';
+
+export interface MonacoEditorWidgetSchema extends SFUISchemaItem {
+  options?: monaco.editor.IStandaloneEditorConstructionOptions;
+  delay?: number;
+  change?: (value: string) => void;
+  model?: NuMonacoEditorModel;
+  /**
+   * Height of monaco editor, default: `200px`
+   */
+  height?: string;
+  /**
+   * Whether to automatically format the document
+   */
+  autoFormat?: boolean;
+  event?: (ev: NuMonacoEditorEvent) => void;
+}
diff --git a/packages/form/widgets-third/monaco-editor/widget.ts b/packages/form/widgets-third/monaco-editor/widget.ts
new file mode 100644
index 0000000000..354cf1a5d3
--- /dev/null
+++ b/packages/form/widgets-third/monaco-editor/widget.ts
@@ -0,0 +1,45 @@
+import { Component } from '@angular/core';
+
+import type { NuMonacoEditorEvent } from '@ng-util/monaco-editor';
+
+import { ControlUIWidget } from '@delon/form';
+
+import type { MonacoEditorWidgetSchema } from './schema';
+
+@Component({
+  selector: 'sf-widget-monaco-editor',
+  template: `
+    <sf-item-wrap
+      [id]="id"
+      [schema]="schema"
+      [ui]="ui"
+      [showError]="showError"
+      [error]="error"
+      [showTitle]="schema.title"
+    >
+      <nu-monaco-editor
+        [ngModel]="value"
+        (ngModelChange)="_change($event)"
+        [options]="ui.options ?? {}"
+        [disabled]="disabled"
+        [model]="ui.model"
+        [autoFormat]="ui.autoFormat ?? true"
+        [height]="ui.height ?? '200px'"
+        [delay]="ui.delay ?? 0"
+        (event)="_event($event)"
+      />
+    </sf-item-wrap>
+  `
+})
+export class MonacoEditorWidget extends ControlUIWidget<MonacoEditorWidgetSchema> {
+  static readonly KEY = 'monaco-editor';
+
+  _change(value: string): void {
+    this.setValue(value);
+    if (this.ui.change) this.ui.change(value);
+  }
+
+  _event(ev: NuMonacoEditorEvent): void {
+    if (this.ui.event) this.ui.event(ev);
+  }
+}
diff --git a/packages/form/widgets-third/tinymce/index.en-US.md b/packages/form/widgets-third/tinymce/index.en-US.md
index c5137895b8..739dd454e5 100644
--- a/packages/form/widgets-third/tinymce/index.en-US.md
+++ b/packages/form/widgets-third/tinymce/index.en-US.md
@@ -4,78 +4,20 @@ subtitle: Tinymce Rich Text
 type: Third Widgets
 ---
 
-Tinymce rich text
+Tinymce rich text.
 
-> Note: third party widget is not registered by default, see details from [Customize Widgets](https://ng-alain.com/form/customize/en).
+## How to Use
 
 **Installation dependencies**  
 
-Since the Tinymce editor relies on a third-party plug-in [ngx-tinymce](https://github.com/cipchk/ngx-tinymce), the dependency should be installed first when using it
-
 `yarn add ngx-tinymce`
 
-
 **Import module**    
 
-- The project built using the latest scaffolding provides a third-party widget registration entry: `src/app/shared/json-schema/json-schema.module.ts`.
-- `TinymceWidget` needs to be declared in `JsonSchemaModule`.
-- Take the given plug-in list and toolbar as a full list, which can be deleted according to needs.
-
-```ts
-export const SCHEMA_THIRDS_COMPONENTS = [TinymceWidget];
-
-@NgModule({
-  declarations: SCHEMA_THIRDS_COMPONENTS,
-  imports: [
-    SharedModule,
-    DelonFormModule.forRoot(),
-    NgxTinymceModule.forRoot({
-      baseURL: './assets/tinymce/',
-      config: {
-        language: 'zh_CN',
-        language_url: './assets/tinymce/langs/zh_CN.js',
-        branding: false,
-        paste_data_images: true,
-        automatic_uploads: false,
-        menubar: true,
-        toolbar_mode: 'wrap',
-        plugins:
-          'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount image textpattern help emoticons autosave autoresize',
-        toolbar:
-          'code undo redo restoredraft | cut copy | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat |  table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen |  indent2em'
-      }
-    })
-  ],
-  exports: SCHEMA_THIRDS_COMPONENTS
-})
-export class JsonSchemaModule {
-}
-```
-
-**Widget registration**  
-
-- Register the widget to the `WidgetRegistry` registry
-
-```ts
-export class JsonSchemaModule {
-  constructor(widgetRegistry: WidgetRegistry) {
-    widgetRegistry.register(TinymceWidget.KEY, TinymceWidget);
-  }
-}
-```
-
-**Import resources**
-
-Tinymce supports a highly customized plug-in mode, which can effectively reduce the size of the package body by configuring plug-ins and static resources.
-
-- Plug-in download: [CustomBuilds](https://www.tiny.cloud/get-tiny/custom-builds/)
-- Language package download: [LanguagePackages](https://www.tiny.cloud/get-tiny/language-packages/)
-- Put the downloaded plug-in into a directory accessible by `baseURL`
-- Put the downloaded language pack into a directory accessible by `language_url`
-
-## Source Code
+- 1. Import `NgxTinymceModule.forRoot()` in `app.module.ts`
+- 2. Import `TinymceWidgetModule` in [json-schema.module.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/shared/json-schema/json-schema.module.ts#L11).
 
-[Source Code](https://github.com/ng-alain/delon/tree/master/packages/form/widgets-third/tinymce)。
+> For more tinymce configuration, please refer to [ngx-tinymce](https://github.com/cipchk/ngx-tinymce).
 
 ## API
 
@@ -83,6 +25,10 @@ Tinymce supports a highly customized plug-in mode, which can effectively reduce
 
 | Property | Description | Type | Default |
 |----------|-------------|------|---------|
-| `[config]` | Configuration options, [official website](https://www.tinymce.com/docs/configure/integration-and-setup/) | `object` | - |
-| `[loading]` | Initial hint message | `string` | `加载中...` |
-| `[change]` | Callback function when content in editor is changed | `(html: string) => void` | - |
+| config | `any` |  | see [configure](https://www.tinymce.com/docs/configure/integration-and-setup/) |
+| loading | `string,TemplateRef` | - | Loading status of tinymce |
+| disabled | `boolean` | `false` | Set tinymce mode is `readonly` if `true` |
+| inline | `boolean` | `false` | Inline editor |
+| delay | `number` | 0 | Delayed rendering, unit is 'millisecond' |
+| placeholder | `string` | - | Placeholder for tinymce, **NOTE:** dependent on [tinymce-placeholder](https://github.com/mohan/tinymce-placeholder) |
+| ready | `EventEmitter<any>` | - | Tinymce ready callback |
diff --git a/packages/form/widgets-third/tinymce/index.ts b/packages/form/widgets-third/tinymce/index.ts
new file mode 100644
index 0000000000..79d7c1459f
--- /dev/null
+++ b/packages/form/widgets-third/tinymce/index.ts
@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NgxTinymceModule } from 'ngx-tinymce';
+
+import { DelonFormModule, WidgetRegistry } from '@delon/form';
+
+import { TinymceWidget } from './widget';
+
+export * from './widget';
+export * from './schema';
+
+@NgModule({
+  imports: [FormsModule, DelonFormModule, NgxTinymceModule],
+  declarations: [TinymceWidget]
+})
+export class TinymceWidgetModule {
+  constructor(widgetRegistry: WidgetRegistry) {
+    widgetRegistry.register(TinymceWidget.KEY, TinymceWidget);
+  }
+}
diff --git a/packages/form/widgets-third/tinymce/index.zh-CN.md b/packages/form/widgets-third/tinymce/index.zh-CN.md
index 674cc43471..31617a80f0 100644
--- a/packages/form/widgets-third/tinymce/index.zh-CN.md
+++ b/packages/form/widgets-third/tinymce/index.zh-CN.md
@@ -6,79 +6,18 @@ type: Third Widgets
 
 Tinymce富文本。
 
-> 注：第三方小部件默认并未注册，细节见[定制小部件](https://ng-alain.com/form/customize)。
-
-
 ## 如何使用
 
-**安装依赖**
-
-由于Tinymce编辑器依赖第三方插件[ngx-tinymce](https://github.com/cipchk/ngx-tinymce)，所以使用时应首先安装依赖
+**安装依赖**  
 
 `yarn add ngx-tinymce`
 
 **导入模块**
 
-- 使用最新脚手架搭建出的项目提供了第三方控件注册入口: `src/app/shared/json-schema/json-schema.module.ts`
-- 需将`TinymceWidget`在`JsonSchemaModule`中进行声明
-- 以给出的插件列表与工具栏为全量列表，可根据需求删减
-
-```ts
-export const SCHEMA_THIRDS_COMPONENTS = [TinymceWidget];
-
-@NgModule({
-  declarations: SCHEMA_THIRDS_COMPONENTS,
-  imports: [
-    SharedModule,
-    DelonFormModule.forRoot(),
-    NgxTinymceModule.forRoot({
-      baseURL: './assets/tinymce/',
-      config: {
-        language: 'zh_CN',
-        language_url: './assets/tinymce/langs/zh_CN.js',
-        branding: false,
-        paste_data_images: true,
-        automatic_uploads: false,
-        menubar: true,
-        toolbar_mode: 'wrap',
-        plugins:
-          'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount image textpattern help emoticons autosave autoresize',
-        toolbar:
-          'code undo redo restoredraft | cut copy | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat |  table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen |  indent2em'
-      }
-    })
-  ],
-  exports: SCHEMA_THIRDS_COMPONENTS
-})
-export class JsonSchemaModule {
-}
-```
-
-**控件注册**
-
-- 将控件注册到`WidgetRegistry`注册表中
-
-```ts
-export class JsonSchemaModule {
-  constructor(widgetRegistry: WidgetRegistry) {
-    widgetRegistry.register(TinymceWidget.KEY, TinymceWidget);
-  }
-}
-```
-
-**导入静态资源**
-
-Tinymce支持高度自定义的插件模式,通过配置插件和静态资源可以有效的减少包体体积
-
-- 插件下载: [CustomBuilds](https://www.tiny.cloud/get-tiny/custom-builds/)
-- 语言包下载: [LanguagePackages](https://www.tiny.cloud/get-tiny/language-packages/)
-- 将下载好的插件放入`baseURL`可访问到的目录内
-- 将下载好的语言包放入`language_url`可访问到的目录内
-
-
-## 源代码
+- 1、在 `app.module.ts` 下导入 `NgxTinymceModule.forRoot()`
+- 2、在 [json-schema.module.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/shared/json-schema/json-schema.module.ts#L11) 导入 `TinymceWidgetModule`。
 
-[源代码](https://github.com/ng-alain/delon/tree/master/packages/form/widgets-third/tinymce)。
+> 关于更多 tinymce 配置请参考 [ngx-tinymce](https://github.com/cipchk/ngx-tinymce)。
 
 ## API
 
@@ -86,6 +25,10 @@ Tinymce支持高度自定义的插件模式,通过配置插件和静态资源可
 
 | 成员 | 说明 | 类型 | 默认值 |
 |----|----|----|-----|
-| `[config]` | 配置项说明，[见官网](https://www.tinymce.com/docs/configure/integration-and-setup/) | `object` | - |
-| `[loading]` | 初始化提示文本 | `string` | `加载中...` |
-| `[change]` | 编辑器内容发生改变时会触发该事件 | `(html: string) => void` | - |
+| config | `any` |  | see [configure](https://www.tinymce.com/docs/configure/integration-and-setup/) |
+| loading | `string,TemplateRef` | - | Loading status of tinymce |
+| disabled | `boolean` | `false` | Set tinymce mode is `readonly` if `true` |
+| inline | `boolean` | `false` | Inline editor |
+| delay | `number` | 0 | Delayed rendering, unit is 'millisecond' |
+| placeholder | `string` | - | Placeholder for tinymce, **NOTE:** dependent on [tinymce-placeholder](https://github.com/mohan/tinymce-placeholder) |
+| ready | `EventEmitter<any>` | - | Tinymce ready callback |
diff --git a/packages/form/widgets-third/tinymce/ng-package.json b/packages/form/widgets-third/tinymce/ng-package.json
new file mode 100644
index 0000000000..ff7c84a23d
--- /dev/null
+++ b/packages/form/widgets-third/tinymce/ng-package.json
@@ -0,0 +1,6 @@
+{
+  "lib": {
+    "flatModuleFile": "widgets-third-tinymce",
+    "entryFile": "index.ts"
+  }
+}
diff --git a/packages/form/widgets-third/tinymce/schema.ts b/packages/form/widgets-third/tinymce/schema.ts
new file mode 100644
index 0000000000..19a34fc9f6
--- /dev/null
+++ b/packages/form/widgets-third/tinymce/schema.ts
@@ -0,0 +1,12 @@
+import type { SFUISchemaItem } from '@delon/form';
+import type { NzSafeAny } from 'ng-zorro-antd/core/types';
+
+export interface TinymceWidgetSchema extends SFUISchemaItem {
+  /** 默认配置项，对全局 Tinymce 有效 */
+  config?: Record<string, unknown>;
+  inline?: boolean;
+  /** 延迟加载（单位：毫秒），默认：`0` */
+  delay?: number;
+  loading?: string;
+  ready?: (instance: NzSafeAny) => void;
+}
diff --git a/packages/form/widgets-third/tinymce/tinymce.widget.ts b/packages/form/widgets-third/tinymce/tinymce.widget.ts
deleted file mode 100644
index 6594d5b652..0000000000
--- a/packages/form/widgets-third/tinymce/tinymce.widget.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-import { ControlWidget } from '@delon/form';
-
-@Component({
-  selector: 'sf-tinymce',
-  template: `
-    <sf-item-wrap
-      [id]="id"
-      [schema]="schema"
-      [ui]="ui"
-      [showError]="showError"
-      [error]="error"
-      [showTitle]="schema.title"
-    >
-      <tinymce [ngModel]="value" (ngModelChange)="change($event)" [config]="config" [loading]="loading" />
-    </sf-item-wrap>
-  `
-})
-export class TinymceWidget extends ControlWidget implements OnInit {
-  static readonly KEY = 'tinymce';
-
-  config!: Record<string, unknown>;
-  loading!: string;
-
-  ngOnInit(): void {
-    this.loading = this.ui.loading || '加载中……';
-    this.config = this.ui.config || {};
-  }
-
-  change(value: string): void {
-    if (this.ui.change) this.ui.change(value);
-    this.setValue(value);
-  }
-}
diff --git a/packages/form/widgets-third/tinymce/widget.ts b/packages/form/widgets-third/tinymce/widget.ts
new file mode 100644
index 0000000000..412831a07d
--- /dev/null
+++ b/packages/form/widgets-third/tinymce/widget.ts
@@ -0,0 +1,42 @@
+import { Component } from '@angular/core';
+
+import { ControlUIWidget } from '@delon/form';
+import type { NzSafeAny } from 'ng-zorro-antd/core/types';
+
+import type { TinymceWidgetSchema } from './schema';
+
+@Component({
+  selector: 'sf-widget-tinymce',
+  template: `
+    <sf-item-wrap
+      [id]="id"
+      [schema]="schema"
+      [ui]="ui"
+      [showError]="showError"
+      [error]="error"
+      [showTitle]="schema.title"
+    >
+      <tinymce
+        [ngModel]="value"
+        (ngModelChange)="change($event)"
+        [config]="ui.config"
+        [inline]="ui.inline ?? false"
+        [delay]="ui.delay ?? 0"
+        [loading]="ui.loading ?? 'Loading...'"
+        (ready)="_ready($event)"
+      />
+    </sf-item-wrap>
+  `
+})
+export class TinymceWidget extends ControlUIWidget<TinymceWidgetSchema> {
+  static readonly KEY = 'tinymce';
+
+  change(value: string): void {
+    this.setValue(value);
+    if (this.ui.change) this.ui.change(value);
+  }
+
+  _ready(instance: NzSafeAny): void {
+    if (this.ui.ready) this.ui.ready(instance);
+  }
+}
diff --git a/packages/form/widgets/autocomplete/ng-package.json b/packages/form/widgets/autocomplete/ng-package.json
new file mode 100644
index 0000000000..9d4a9afb0e
--- /dev/null
+++ b/packages/form/widgets/autocomplete/ng-package.json
@@ -0,0 +1,6 @@
+{
+  "lib": {
+    "flatModuleFile": "widgets-auto-complete",
+    "entryFile": "index.ts"
+  }
+}
diff --git a/packages/form/widgets/cascader/ng-package.json b/packages/form/widgets/cascader/ng-package.json
index 9df62ad921..69f4052d28 100644
--- a/packages/form/widgets/cascader/ng-package.json
+++ b/packages/form/widgets/cascader/ng-package.json
@@ -1,6 +1,6 @@
 {
   "lib": {
-    "flatModuleFile": "widget-cascader",
+    "flatModuleFile": "widgets-cascader",
     "entryFile": "index.ts"
   }
 }
diff --git a/packages/form/widgets/mention/ng-package.json b/packages/form/widgets/mention/ng-package.json
new file mode 100644
index 0000000000..ffc3837bae
--- /dev/null
+++ b/packages/form/widgets/mention/ng-package.json
@@ -0,0 +1,6 @@
+{
+  "lib": {
+    "flatModuleFile": "widgets-mention",
+    "entryFile": "index.ts"
+  }
+}
diff --git a/packages/form/widgets/rate/ng-package.json b/packages/form/widgets/rate/ng-package.json
new file mode 100644
index 0000000000..b9b116ea3a
--- /dev/null
+++ b/packages/form/widgets/rate/ng-package.json
@@ -0,0 +1,6 @@
+{
+  "lib": {
+    "flatModuleFile": "widgets-rate",
+    "entryFile": "index.ts"
+  }
+}
diff --git a/packages/form/widgets/slider/ng-package.json b/packages/form/widgets/slider/ng-package.json
new file mode 100644
index 0000000000..ddee7bcabf
--- /dev/null
+++ b/packages/form/widgets/slider/ng-package.json
@@ -0,0 +1,6 @@
+{
+  "lib": {
+    "flatModuleFile": "widgets-slider",
+    "entryFile": "index.ts"
+  }
+}
diff --git a/packages/form/widgets/tag/ng-package.json b/packages/form/widgets/tag/ng-package.json
new file mode 100644
index 0000000000..6914a665fc
--- /dev/null
+++ b/packages/form/widgets/tag/ng-package.json
@@ -0,0 +1,6 @@
+{
+  "lib": {
+    "flatModuleFile": "widgets-tag",
+    "entryFile": "index.ts"
+  }
+}
diff --git a/packages/form/widgets/time/ng-package.json b/packages/form/widgets/time/ng-package.json
new file mode 100644
index 0000000000..98ee820f87
--- /dev/null
+++ b/packages/form/widgets/time/ng-package.json
@@ -0,0 +1,6 @@
+{
+  "lib": {
+    "flatModuleFile": "widgets-time",
+    "entryFile": "index.ts"
+  }
+}
diff --git a/packages/form/widgets/transfer/ng-package.json b/packages/form/widgets/transfer/ng-package.json
new file mode 100644
index 0000000000..19483d3cc5
--- /dev/null
+++ b/packages/form/widgets/transfer/ng-package.json
@@ -0,0 +1,6 @@
+{
+  "lib": {
+    "flatModuleFile": "widgets-transfer",
+    "entryFile": "index.ts"
+  }
+}
diff --git a/packages/form/widgets/tree-select/ng-package.json b/packages/form/widgets/tree-select/ng-package.json
new file mode 100644
index 0000000000..b3d67c2122
--- /dev/null
+++ b/packages/form/widgets/tree-select/ng-package.json
@@ -0,0 +1,6 @@
+{
+  "lib": {
+    "flatModuleFile": "widgets-tree-select",
+    "entryFile": "index.ts"
+  }
+}
diff --git a/packages/form/widgets/upload/ng-package.json b/packages/form/widgets/upload/ng-package.json
new file mode 100644
index 0000000000..b39b5ce0f0
--- /dev/null
+++ b/packages/form/widgets/upload/ng-package.json
@@ -0,0 +1,6 @@
+{
+  "lib": {
+    "flatModuleFile": "widgets-upload",
+    "entryFile": "index.ts"
+  }
+}
diff --git a/schematics/utils/versions.ts b/schematics/utils/versions.ts
index bedd2b19fb..81501adbb6 100644
--- a/schematics/utils/versions.ts
+++ b/schematics/utils/versions.ts
@@ -37,6 +37,8 @@ export function UpgradeMainVersions(tree: Tree, version: string = VERSION): void
       `ng-alain-plugin-theme@DEP-0.0.0-PLACEHOLDER`,
       `source-map-explorer@DEP-0.0.0-PLACEHOLDER`,
       `@angular/language-service@DEP-0.0.0-PLACEHOLDER`,
+      `ngx-tinymce@DEP-0.0.0-PLACEHOLDER`,
+      `@ng-util/monaco-editor@DEP-0.0.0-PLACEHOLDER`,
       `@delon/testing@${version}`
     ],
     'devDependencies'
diff --git a/scripts/ci/utils.sh b/scripts/ci/utils.sh
index e837a12a49..15c0043ca2 100644
--- a/scripts/ci/utils.sh
+++ b/scripts/ci/utils.sh
@@ -54,7 +54,8 @@ DEPENDENCIES=$(node -p "
     'swagger-typescript-api',
     '@github/hotkey',
     'ng-alain-sts',
-    'ng-alain-plugin-theme'
+    'ng-alain-plugin-theme',
+    '@ng-util/monaco-editor'
   ].map(key => key.replace(/\@/g, '\\\\@').replace(/\//g, '\\\\/').replace(/-/g, '\\\\-') + '|' + (vs[key] || dvs[key])).join('\n\t');
 ")
 VERSION=$(node -p "require('./package.json').version")
diff --git a/scripts/site/route-paths.txt b/scripts/site/route-paths.txt
index 9b7ebc5aad..ba61a837f5 100644
--- a/scripts/site/route-paths.txt
+++ b/scripts/site/route-paths.txt
@@ -219,12 +219,12 @@
 /form/i18n/zh
 /form/layout/en
 /form/layout/zh
-/form/markdown/en
-/form/markdown/zh
 /form/mention/en
 /form/mention/zh
 /form/modal/en
 /form/modal/zh
+/form/monaco-editor/en
+/form/monaco-editor/zh
 /form/number/en
 /form/number/zh
 /form/object/en
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index dd6133cfeb..dfd11182c1 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -32,6 +32,7 @@ import { JsonSchemaModule } from './shared/json-schema/json-schema.module';
 import { SharedModule } from './shared/shared.module';
 import { STWidgetModule } from './shared/st-widget/st-widget.module';
 import { CellWidgetModule } from './shared/cell-widget/module';
+import { NuMonacoEditorModule } from '@ng-util/monaco-editor';
 
 export function StartupServiceFactory(startupService: StartupService): () => Promise<void> {
   return () => startupService.load();
@@ -70,6 +71,9 @@ function registerElements(injector: Injector, platformId: {}): void {
     CellWidgetModule,
     RoutesModule,
     ExampleModule,
+    NuMonacoEditorModule.forRoot({
+      defaultOptions: { scrollBeyondLastLine: false }
+    }),
     NgxTinymceModule.forRoot({
       baseURL: 'https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.9.2/'
     }),
diff --git a/src/app/routes/form-pages/form-pages.module.ts b/src/app/routes/form-pages/form-pages.module.ts
index 468c8f7dc9..35c29d0928 100644
--- a/src/app/routes/form-pages/form-pages.module.ts
+++ b/src/app/routes/form-pages/form-pages.module.ts
@@ -24,13 +24,7 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [
-    SharedModule,
-    NuMonacoEditorModule.forRoot({
-      defaultOptions: { scrollBeyondLastLine: false }
-    }),
-    RouterModule.forChild(routes)
-  ],
+  imports: [SharedModule, RouterModule.forChild(routes), NuMonacoEditorModule],
   declarations: COMPONENTS
 })
 export class FormPagesModule {}
diff --git a/src/app/shared/json-schema/json-schema.module.ts b/src/app/shared/json-schema/json-schema.module.ts
index f8de98c81d..66fc205816 100644
--- a/src/app/shared/json-schema/json-schema.module.ts
+++ b/src/app/shared/json-schema/json-schema.module.ts
@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 
-import { DelonFormModule, WidgetRegistry } from '@delon/form';
+import { DelonFormModule } from '@delon/form';
 import { AutoCompleteWidgetModule } from '@delon/form/widgets/autocomplete';
 import { CascaderWidgetModule } from '@delon/form/widgets/cascader';
 import { MentionWidgetModule } from '@delon/form/widgets/mention';
@@ -11,14 +11,12 @@ import { TimeWidgetModule } from '@delon/form/widgets/time';
 import { TransferWidgetModule } from '@delon/form/widgets/transfer';
 import { TreeSelectWidgetModule } from '@delon/form/widgets/tree-select';
 import { UploadWidgetModule } from '@delon/form/widgets/upload';
-import { TinymceWidget } from '@delon/form/widgets-third/tinymce/tinymce.widget';
+import { MonacoEditorWidgetModule } from '@delon/form/widgets-third/monaco-editor';
+import { TinymceWidgetModule } from '@delon/form/widgets-third/tinymce';
 
 import { SharedModule } from '../shared.module';
 
-export const SCHEMA_THIRDS_COMPONENTS = [TinymceWidget];
-
 @NgModule({
-  declarations: SCHEMA_THIRDS_COMPONENTS,
   imports: [
     SharedModule,
     DelonFormModule.forRoot(),
@@ -31,12 +29,9 @@ export const SCHEMA_THIRDS_COMPONENTS = [TinymceWidget];
     TreeSelectWidgetModule,
     TagWidgetModule,
     TimeWidgetModule,
-    UploadWidgetModule
-  ],
-  exports: [...SCHEMA_THIRDS_COMPONENTS]
+    UploadWidgetModule,
+    MonacoEditorWidgetModule,
+    TinymceWidgetModule
+  ]
 })
-export class JsonSchemaModule {
-  constructor(widgetRegistry: WidgetRegistry) {
-    widgetRegistry.register(TinymceWidget.KEY, TinymceWidget);
-  }
-}
+export class JsonSchemaModule {}

From 3a6f622506bc37f1e10b05c8b74ef232f251829a Mon Sep 17 00:00:00 2001
From: cipchk <cipchk@qq.com>
Date: Sat, 21 Oct 2023 17:44:36 +0800
Subject: [PATCH 5/9] docs: update

---
 packages/form/docs/customize.en-US.md              | 11 +----------
 packages/form/docs/customize.zh-CN.md              | 13 +------------
 packages/form/widgets-third/tinymce/demo/simple.md | 12 +++++++-----
 3 files changed, 9 insertions(+), 27 deletions(-)

diff --git a/packages/form/docs/customize.en-US.md b/packages/form/docs/customize.en-US.md
index a93e13f1fe..cfa3b06745 100644
--- a/packages/form/docs/customize.en-US.md
+++ b/packages/form/docs/customize.en-US.md
@@ -6,7 +6,7 @@ type: Documents
 
 ## Foreword
 
-`@delon/form` try our best to meet the needs of different environments, in addition to the built-in basic component widgets, you can further expand the requirements in two ways:
+`@delon/form` try our best to meet the needs of different environments, in addition to the built-in basic widgets (Some require manual registration), you can further expand the requirements in two ways:
 
 ## Custom widget in sf
 
@@ -18,15 +18,6 @@ Making a set of widgets for project can lead to faster development work.
 
 ### How to making widget
 
-**Third-party library**
-
-By default `@delon/form` implements some common third-party library widgets, which are called third-party component widgets. This widget exists in [widgets-third](https://github.com/ng-alain /delon/tree/master/packages/form/widgets-third) directory; you can use directly.
-
-| Name | Description | Document | Source |
-| ---- | ----------- | -------- | ------ |
-| `markdown` | Markdown Editor | [Document](/form/markdown) | [Source](https://github.com/ng-alain/delon/tree/master/packages/form/widgets-third/markdown) |
-| `tinymce` | Tinymce Editor | [Document](/form/tinymce) | [Source](https://github.com/ng-alain/delon/tree/master/packages/form/widgets-third/tinymce) |
-
 **Create widgets**
 
 A widget is a component. You only need to inherit `ControlWidget` to create a widget. For example:
diff --git a/packages/form/docs/customize.zh-CN.md b/packages/form/docs/customize.zh-CN.md
index 774b03ea0d..b692257d12 100644
--- a/packages/form/docs/customize.zh-CN.md
+++ b/packages/form/docs/customize.zh-CN.md
@@ -6,7 +6,7 @@ type: Documents
 
 ## 写在前面
 
-`@delon/form` 尽可能满足不同需求，除现有内置的十几种基础组件小部件外，可以通过以下两种方式进一步扩展需求：
+`@delon/form` 尽可能满足不同需求，除现有内置的十几种基础小部件(部分需要手动注册)外，可以通过以下两种方式进一步扩展需求：
 
 ## 自定义小部件
 
@@ -18,17 +18,6 @@ type: Documents
 
 ### 编写小部件
 
-**常见小部件库**
-
-默认情况下 @delon/form 实现了一些常见需求，但需要额外类库支持的，称它为第三方组件小部件，这一部分小部件存在于[widgets-third](https://github.com/ng-alain/delon/tree/master/packages/form/widgets-third)目录里；你可以直接复制使用。
-
-这些组件包括：
-
-| 名称 | 描述 | 文档 | 源代码 |
-| --- | ---- | ---- | ---- |
-| `markdown` | Markdown 编辑器 | [文档](/form/markdown) | [源代码](https://github.com/ng-alain/delon/tree/master/packages/form/widgets-third/markdown) |
-| `tinymce` | Tinymce 富文本框 | [文档](/form/tinymce) | [源代码](https://github.com/ng-alain/delon/tree/master/packages/form/widgets-third/tinymce) |
-
 **自己创建小部件**
 
 小部件就是一个组件，你只需要继承 `ControlWidget` 就相当于构建一个小部件，其结构如下：
diff --git a/packages/form/widgets-third/tinymce/demo/simple.md b/packages/form/widgets-third/tinymce/demo/simple.md
index aa3747179c..56759c9d25 100644
--- a/packages/form/widgets-third/tinymce/demo/simple.md
+++ b/packages/form/widgets-third/tinymce/demo/simple.md
@@ -15,12 +15,14 @@ Simplest of usage.
 
 ```ts
 import { Component } from '@angular/core';
+
 import { SFSchema } from '@delon/form';
+import type { TinymceWidgetSchema } from '@delon/form/widgets-third/tinymce';
 import { NzMessageService } from 'ng-zorro-antd/message';
 
 @Component({
   selector: 'app-demo',
-  template: `<sf [schema]="schema" (formSubmit)="submit($event)"></sf>`,
+  template: `<sf [schema]="schema" (formSubmit)="submit($event)" />`
 })
 export class DemoComponent {
   schema: SFSchema = {
@@ -29,10 +31,10 @@ export class DemoComponent {
         type: 'string',
         title: '描述',
         ui: {
-          widget: 'tinymce',
-        },
-      },
-    },
+          widget: 'tinymce'
+        } as TinymceWidgetSchema
+      }
+    }
   };
 
   constructor(private msg: NzMessageService) {}

From 29baafb20421190d81c18fa274275a054e95fb22 Mon Sep 17 00:00:00 2001
From: cipchk <cipchk@qq.com>
Date: Sat, 21 Oct 2023 18:27:51 +0800
Subject: [PATCH 6/9] feat: add support `ng update ng-alain`

---
 schematics/migration.json                     |  5 ++
 schematics/ng-update/index.ts                 |  6 ++
 .../ng-update/upgrade-rules/v17/index.spec.ts | 52 ++++++++++++
 .../ng-update/upgrade-rules/v17/index.ts      | 79 +++++++++++++++++++
 schematics/test.ts                            |  2 +-
 schematics/utils/ast.ts                       | 11 +++
 6 files changed, 154 insertions(+), 1 deletion(-)
 create mode 100644 schematics/ng-update/upgrade-rules/v17/index.spec.ts
 create mode 100644 schematics/ng-update/upgrade-rules/v17/index.ts

diff --git a/schematics/migration.json b/schematics/migration.json
index de75fc0db5..bb7bd15335 100644
--- a/schematics/migration.json
+++ b/schematics/migration.json
@@ -6,6 +6,11 @@
       "description": "Updates NG-ALAIN to v16 [https://github.com/ng-alain/ng-alain/issues/2390]",
       "factory": "./ng-update/index#updateToV16"
     },
+    "migration-v17": {
+      "version": "17",
+      "description": "Updates NG-ALAIN to v17 [https://github.com/ng-alain/ng-alain/issues/2390]",
+      "factory": "./ng-update/index#updateToV17"
+    },
     "ng-post-update": {
       "description": "Performs cleanup after ng-update.",
       "factory": "./ng-update/index#postUpdate",
diff --git a/schematics/ng-update/index.ts b/schematics/ng-update/index.ts
index af129f965b..8ef558cdd2 100644
--- a/schematics/ng-update/index.ts
+++ b/schematics/ng-update/index.ts
@@ -4,6 +4,7 @@ import { chain, Rule, SchematicContext } from '@angular-devkit/schematics';
 
 import { ruleUpgradeData } from './upgrade-data';
 import { v16Rule } from './upgrade-rules/v16';
+import { v17Rule } from './upgrade-rules/v17';
 
 const migrations: NullableDevkitMigration[] = [];
 
@@ -11,6 +12,11 @@ export function updateToV16(): Rule {
   return chain([v16Rule(), createMigrationSchematicRule(TargetVersion.V16, migrations, ruleUpgradeData, postUpdate)]);
 }
 
+export function updateToV17(): Rule {
+  // , createMigrationSchematicRule(TargetVersion.V17, migrations, ruleUpgradeData, postUpdate)
+  return chain([v17Rule()]);
+}
+
 /** Post-update schematic to be called when update is finished. */
 export function postUpdate(context: SchematicContext, targetVersion: TargetVersion, hasFailures: boolean): void {
   context.logger.info('');
diff --git a/schematics/ng-update/upgrade-rules/v17/index.spec.ts b/schematics/ng-update/upgrade-rules/v17/index.spec.ts
new file mode 100644
index 0000000000..5f4dec1796
--- /dev/null
+++ b/schematics/ng-update/upgrade-rules/v17/index.spec.ts
@@ -0,0 +1,52 @@
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+
+import { createAlainApp, migrationCollection } from '../../../utils/testing';
+
+describe('Schematic: ng-update: v17Rule', () => {
+  let runner: SchematicTestRunner;
+  let tree: UnitTestTree;
+  const logs: string[] = [];
+  const jsonSchemaModulePath = '/projects/foo/src/app/shared/json-schema/json-schema.module.ts';
+
+  beforeEach(async () => {
+    ({ runner, tree } = await createAlainApp());
+    if (!tree.exists(jsonSchemaModulePath)) {
+      tree.create(
+        jsonSchemaModulePath,
+        `import { NgModule } from '@angular/core';
+    import { DelonFormModule, WidgetRegistry } from '@delon/form';
+
+    import { TestWidget } from './test/test.widget';
+    import { SharedModule } from '../shared.module';
+
+    export const SCHEMA_THIRDS_COMPONENTS = [TestWidget];
+
+    @NgModule({
+      declarations: SCHEMA_THIRDS_COMPONENTS,
+      imports: [SharedModule, DelonFormModule.forRoot()],
+      exports: SCHEMA_THIRDS_COMPONENTS
+    })
+    export class JsonSchemaModule {
+      constructor(widgetRegistry: WidgetRegistry) {
+        widgetRegistry.register(TestWidget.KEY, TestWidget);
+      }
+    }
+    `
+      );
+    }
+  });
+
+  async function runMigration(): Promise<void> {
+    logs.length = 0;
+    runner = new SchematicTestRunner('schematics', migrationCollection);
+    runner.logger.subscribe(e => logs.push(e.message));
+    await runner.runSchematic('migration-v17', {}, tree);
+  }
+
+  it('should be working', async () => {
+    await runMigration();
+    const content = tree.readContent(jsonSchemaModulePath);
+    expect(content).toContain(`import { UploadWidgetModule } from '@delon/form/widgets/upload';`);
+    expect(content).toContain(`, UploadWidgetModule`);
+  });
+});
diff --git a/schematics/ng-update/upgrade-rules/v17/index.ts b/schematics/ng-update/upgrade-rules/v17/index.ts
new file mode 100644
index 0000000000..88bef8ba7b
--- /dev/null
+++ b/schematics/ng-update/upgrade-rules/v17/index.ts
@@ -0,0 +1,79 @@
+import { chain, Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
+import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';
+import { insertImport, addSymbolToNgModuleMetadata } from '@schematics/angular/utility/ast-utils';
+import { Change, InsertChange } from '@schematics/angular/utility/change';
+import * as colors from 'ansi-colors';
+
+import { DEFAULT_WORKSPACE_PATH, getSourceFile, logStart, readJSON, applyChanges } from '../../../utils';
+import { UpgradeMainVersions } from '../../../utils/versions';
+
+function qr(): Rule {
+  return (_: Tree, context: SchematicContext) => {
+    context.logger.info(
+      colors.yellow(
+        ` [qr] Will be removed in 18.0.0, please use [nz-qrcode](https://ng.ant.design/components/qr-code) instead.`
+      )
+    );
+  };
+}
+
+function autoRegisterFormWidgets(): Rule {
+  return (tree: Tree, context: SchematicContext) => {
+    const angularJson = readJSON(tree, DEFAULT_WORKSPACE_PATH);
+    const projectNames = Object.keys(angularJson.projects);
+    for (const name of projectNames) {
+      autoRegisterFormWidgetsRun(tree, name, angularJson.projects[name].sourceRoot, context);
+    }
+  };
+}
+
+function autoRegisterFormWidgetsRun(tree: Tree, name: string, sourceRoot: string, context: SchematicContext): void {
+  const modulePath = `${sourceRoot}/app/shared/json-schema/json-schema.module.ts`;
+  if (!tree.exists(modulePath)) return;
+
+  const list = [
+    { symbolName: 'AutoCompleteWidgetModule', fileName: '@delon/form/widgets/autocomplete' },
+    { symbolName: 'CascaderWidgetModule', fileName: '@delon/form/widgets/cascader' },
+    { symbolName: 'MentionWidgetModule', fileName: '@delon/form/widgets/mention' },
+    { symbolName: 'RateWidgetModule', fileName: '@delon/form/widgets/rate' },
+    { symbolName: 'SliderWidgetModule', fileName: '@delon/form/widgets/slider' },
+    { symbolName: 'TagWidgetModule', fileName: '@delon/form/widgets/tag' },
+    { symbolName: 'TimeWidgetModule', fileName: '@delon/form/widgets/time' },
+    { symbolName: 'TransferWidgetModule', fileName: '@delon/form/widgets/transfer' },
+    { symbolName: 'TreeSelectWidgetModule', fileName: '@delon/form/widgets/tree-select' },
+    { symbolName: 'UploadWidgetModule', fileName: '@delon/form/widgets/upload' }
+  ];
+  const source = getSourceFile(tree, modulePath);
+  const changes: Change[] = [];
+  for (const item of list) {
+    changes.push(insertImport(source, modulePath, item.symbolName, item.fileName) as InsertChange);
+    changes.push(...addSymbolToNgModuleMetadata(source, modulePath, 'imports', item.symbolName));
+  }
+  applyChanges(tree, modulePath, changes);
+
+  context.logger.info(
+    colors.yellow(
+      ` [@delon/form] Register all widgets in ${name} project, you can reduce package size by removing unnecessary parts`
+    )
+  );
+}
+
+function finished(): Rule {
+  return (_tree: Tree, context: SchematicContext) => {
+    context.addTask(new NodePackageInstallTask());
+
+    context.logger.info(
+      colors.green(
+        `  ✓ Congratulations, Abort more detail please refer to upgrade guide https://github.com/ng-alain/ng-alain/issues/2390`
+      )
+    );
+  };
+}
+
+export function v17Rule(): Rule {
+  return async (tree: Tree, context: SchematicContext) => {
+    logStart(context, `Upgrade @delon/* version number`);
+    UpgradeMainVersions(tree);
+    return chain([autoRegisterFormWidgets(), qr(), finished()]);
+  };
+}
diff --git a/schematics/test.ts b/schematics/test.ts
index a7ec22ddf9..af590d6ef1 100644
--- a/schematics/test.ts
+++ b/schematics/test.ts
@@ -13,7 +13,7 @@ const Jasmine = require('jasmine');
 const runner = new Jasmine({ projectBaseDir });
 
 // const files = `schematics/**/*.spec.ts`;
-const files = `schematics/ng-update/upgrade-rules/v16/index.spec.ts`;
+const files = `schematics/ng-update/upgrade-rules/v17/index.spec.ts`;
 
 const tests = glob.sync(files).map(p => relative(projectBaseDir, p));
 
diff --git a/schematics/utils/ast.ts b/schematics/utils/ast.ts
index d68761bb39..20bb40ff16 100644
--- a/schematics/utils/ast.ts
+++ b/schematics/utils/ast.ts
@@ -1,4 +1,5 @@
 import { SchematicsException, Tree } from '@angular-devkit/schematics';
+import { Change, InsertChange } from '@schematics/angular/utility/change';
 import * as ts from 'typescript';
 
 /** Reads file given path and returns TypeScript source file. */
@@ -10,3 +11,13 @@ export function getSourceFile(tree: Tree, path: string): ts.SourceFile {
   const content = buffer.toString();
   return ts.createSourceFile(path, content, ts.ScriptTarget.Latest, true);
 }
+
+export function applyChanges(tree: Tree, path: string, changes: Change[]): void {
+  const exportRecorder = tree.beginUpdate(path);
+  for (const change of changes) {
+    if (change instanceof InsertChange) {
+      exportRecorder.insertLeft(change.pos, change.toAdd);
+    }
+  }
+  tree.commitUpdate(exportRecorder);
+}

From 468300039c396127b5b6955021ee8147f46e5730 Mon Sep 17 00:00:00 2001
From: cipchk <cipchk@qq.com>
Date: Sat, 21 Oct 2023 19:36:45 +0800
Subject: [PATCH 7/9] feat: add color widget

---
 package.json                                  |   3 +-
 packages/form/widgets/color/demo/simple.md    | 106 ++++++++++++++++++
 packages/form/widgets/color/index.en-US.md    |  33 ++++++
 packages/form/widgets/color/index.ts          |  21 ++++
 packages/form/widgets/color/index.zh-CN.md    |  33 ++++++
 packages/form/widgets/color/ng-package.json   |   6 +
 packages/form/widgets/color/schema.ts         |  47 ++++++++
 packages/form/widgets/color/widget.spec.ts    |  49 ++++++++
 packages/form/widgets/color/widget.ts         |  49 ++++++++
 scripts/site/route-paths.txt                  |   2 +
 .../shared/json-schema/json-schema.module.ts  |   2 +
 11 files changed, 350 insertions(+), 1 deletion(-)
 create mode 100644 packages/form/widgets/color/demo/simple.md
 create mode 100644 packages/form/widgets/color/index.en-US.md
 create mode 100644 packages/form/widgets/color/index.ts
 create mode 100644 packages/form/widgets/color/index.zh-CN.md
 create mode 100644 packages/form/widgets/color/ng-package.json
 create mode 100644 packages/form/widgets/color/schema.ts
 create mode 100644 packages/form/widgets/color/widget.spec.ts
 create mode 100644 packages/form/widgets/color/widget.ts

diff --git a/package.json b/package.json
index 97daa12633..d878fd5d61 100644
--- a/package.json
+++ b/package.json
@@ -93,7 +93,8 @@
     "@nguniversal/express-engine": "^16.2.0",
     "express": "^4.18.2",
     "isutf8": "^4.0.0",
-    "@github/hotkey": "^2.0.1"
+    "@github/hotkey": "^2.0.1",
+    "ng-antd-color-picker": "^0.0.2"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^16.2.0",
diff --git a/packages/form/widgets/color/demo/simple.md b/packages/form/widgets/color/demo/simple.md
new file mode 100644
index 0000000000..5cd26ed1ba
--- /dev/null
+++ b/packages/form/widgets/color/demo/simple.md
@@ -0,0 +1,106 @@
+---
+title:
+  zh-CN: 基础样例
+  en-US: Basic Usage
+order: 0
+---
+
+## zh-CN
+
+最简单的用法。
+
+## en-US
+
+Simplest of usage.
+
+```ts
+import { Component } from '@angular/core';
+
+import { SFSchema } from '@delon/form';
+import type { SFColorWidgetSchema } from '@delon/form/widgets/color';
+import { NzMessageService } from 'ng-zorro-antd/message';
+
+@Component({
+  selector: 'app-demo',
+  template: `<sf [schema]="schema" (formSubmit)="submit($event)" />`
+})
+export class DemoComponent {
+  schema: SFSchema = {
+    properties: {
+      base: {
+        type: 'string',
+        title: 'Base',
+        ui: {
+          widget: 'color',
+          title: 'Pls choose a color',
+          change: console.log
+        } as SFColorWidgetSchema
+      },
+      showText: {
+        type: 'string',
+        title: 'Show Text',
+        ui: {
+          widget: 'color',
+          showText: true,
+          trigger: 'hover',
+          change: console.log
+        } as SFColorWidgetSchema
+      },
+      defaultValue: {
+        type: 'string',
+        title: 'Default Value',
+        ui: {
+          widget: 'color',
+          showText: true,
+          defaultValue: '#0a0',
+          change: console.log
+        } as SFColorWidgetSchema
+      },
+      clearColor: {
+        type: 'string',
+        title: 'Clear Color',
+        ui: {
+          widget: 'color',
+          allowClear: true,
+          change: console.log
+        } as SFColorWidgetSchema
+      },
+      disabled: {
+        type: 'string',
+        title: 'Disabled',
+        ui: {
+          widget: 'color',
+          showText: true
+        } as SFColorWidgetSchema,
+        readOnly: true
+      },
+      rgb: {
+        type: 'string',
+        title: 'RGB',
+        ui: {
+          widget: 'color',
+          format: 'rgb',
+          showText: true,
+          change: console.log,
+          formatChange: console.log
+        } as SFColorWidgetSchema
+      },
+      block: {
+        type: 'string',
+        title: 'Block Color',
+        ui: {
+          widget: 'color',
+          block: true
+        } as SFColorWidgetSchema,
+        default: '#f50'
+      }
+    }
+  };
+
+  constructor(private msg: NzMessageService) {}
+
+  submit(value: {}): void {
+    this.msg.success(JSON.stringify(value));
+  }
+}
+```
diff --git a/packages/form/widgets/color/index.en-US.md b/packages/form/widgets/color/index.en-US.md
new file mode 100644
index 0000000000..5bf803ec77
--- /dev/null
+++ b/packages/form/widgets/color/index.en-US.md
@@ -0,0 +1,33 @@
+---
+title: color
+subtitle: Color
+type: Non-built-in widgets
+---
+
+Used when the user needs to customize the color selection.
+
+## How to Use
+
+**Installation dependencies**  
+
+`yarn add ng-antd-color-picker`
+
+**Import Module**
+
+Non-built-in modules, Should be import `ColorWidgetModule` in [json-schema.module.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/shared/json-schema/json-schema.module.ts#L11).
+
+## API
+
+### ui
+
+| Property | Description | Type | Default |
+|----------|-------------|------|---------|
+| `[format]`       | Format of color       | `rgb`｜`hex`｜`hsb`                 | `hex`     |
+| `[defaultValue]` | Default value of color     | `string`｜`NzColor`                  | `false`   |
+| `[allowClear]`   | Allow clearing color selected  | `boolean`                         | `false`   |
+| `[trigger]`      | ColorPicker trigger mode | `hover`｜`click`                   | `click`   |
+| `[showText]`      | Show color text     | `boolean`                         | `false`   |
+| `[title]`      | Setting the title of the color picker | `TemplateRef<void>`｜`string`      | -         |
+| `(change)`     | Callback when value is changed    | `EventEmitter<{ color: NzColor; format: string }>`            | -         |
+| `(formatChange)`      | Callback when `format` is changed      | `EventEmitter<'rgb'｜'hex'｜'hsb'>` | -         |
+| `[block]`   | Color Block  | `boolean`                         | `false`  |
diff --git a/packages/form/widgets/color/index.ts b/packages/form/widgets/color/index.ts
new file mode 100644
index 0000000000..277a3f31cd
--- /dev/null
+++ b/packages/form/widgets/color/index.ts
@@ -0,0 +1,21 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { DelonFormModule, WidgetRegistry } from '@delon/form';
+import { NzColorPickerModule } from 'ng-zorro-antd/color-picker';
+
+import { ColorWidget } from './widget';
+
+export * from './widget';
+export * from './schema';
+
+@NgModule({
+  imports: [FormsModule, CommonModule, DelonFormModule, NzColorPickerModule],
+  declarations: [ColorWidget]
+})
+export class ColorWidgetModule {
+  constructor(widgetRegistry: WidgetRegistry) {
+    widgetRegistry.register(ColorWidget.KEY, ColorWidget);
+  }
+}
diff --git a/packages/form/widgets/color/index.zh-CN.md b/packages/form/widgets/color/index.zh-CN.md
new file mode 100644
index 0000000000..da9644edda
--- /dev/null
+++ b/packages/form/widgets/color/index.zh-CN.md
@@ -0,0 +1,33 @@
+---
+title: color
+subtitle: 颜色
+type: Non-built-in widgets
+---
+
+当用户需要自定义颜色选择的时候使用。
+
+## 如何使用
+
+**安装依赖**  
+
+`yarn add ng-antd-color-picker`
+
+**导入模块**
+
+非内置模块，需要额外在 [json-schema.module.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/shared/json-schema/json-schema.module.ts#L11) 导入 `ColorWidgetModule`。
+
+## API
+
+### ui 属性
+
+| 成员 | 说明 | 类型 | 默认值 |
+|----|----|----|-----|
+| `[format]`       | 颜色格式       | `rgb`｜`hex`｜`hsb`                 | `hex`    |
+| `[defaultValue]` | 颜色默认的值     | `string`｜`NzColor`                  | -        |
+| `[allowClear]`   | 允许清除选择的颜色  | `boolean`                         | `false`  |
+| `[trigger]`      | 颜色选择器的触发模式 | `hover`｜`click`                   | `click`  |
+| `[showText]`      | 显示颜色文本     | `boolean`                         | `false`  |
+| `[title]`      | 设置颜色选择器的标题 | `TemplateRef<void>`｜`string`      | -        |
+| `(change)`     | 颜色变化的回调    | `EventEmitter<{ color: NzColor; format: string }>` | -        |
+| `(formatChange)`      | 颜色格式变化的回调  | `EventEmitter<'rgb'｜'hex'｜'hsb'>` | -        |
+| `[block]`   | 是否颜色块  | `boolean`                         | `false`  |
diff --git a/packages/form/widgets/color/ng-package.json b/packages/form/widgets/color/ng-package.json
new file mode 100644
index 0000000000..ec57a9fa30
--- /dev/null
+++ b/packages/form/widgets/color/ng-package.json
@@ -0,0 +1,6 @@
+{
+  "lib": {
+    "flatModuleFile": "widgets-color",
+    "entryFile": "index.ts"
+  }
+}
diff --git a/packages/form/widgets/color/schema.ts b/packages/form/widgets/color/schema.ts
new file mode 100644
index 0000000000..819eefe595
--- /dev/null
+++ b/packages/form/widgets/color/schema.ts
@@ -0,0 +1,47 @@
+import type { TemplateRef } from '@angular/core';
+
+import type { SFUISchemaItem } from '@delon/form';
+import type { NzColor, NzColorPickerFormatType, NzColorPickerTriggerType } from 'ng-zorro-antd/color-picker';
+
+export interface SFColorWidgetSchema extends SFUISchemaItem {
+  /**
+   * Format of color
+   */
+  format?: NzColorPickerFormatType | null;
+  /**
+   * Default value of color
+   */
+  defaultValue?: string | NzColor | null;
+  /**
+   * ColorPicker trigger mode
+   */
+  trigger?: NzColorPickerTriggerType | null;
+  /**
+   * Setting the title of the color picker
+   */
+  title?: TemplateRef<void> | string;
+  /**
+   * Triggers for customizing color panels.
+   */
+  flipFlop?: TemplateRef<void> | string | null;
+  /**
+   * Show color text
+   */
+  showText?: boolean;
+  /**
+   * Allow clearing color selected
+   */
+  allowClear?: boolean;
+  /**
+   * Callback when value is changed
+   */
+  change?: (ev: { color: NzColor; format: string }) => void;
+  /**
+   * Callback when `format` is changed
+   */
+  formatChange?: (color: NzColorPickerFormatType) => void;
+  /**
+   * Color Block
+   */
+  block?: boolean;
+}
diff --git a/packages/form/widgets/color/widget.spec.ts b/packages/form/widgets/color/widget.spec.ts
new file mode 100644
index 0000000000..b5f9825fee
--- /dev/null
+++ b/packages/form/widgets/color/widget.spec.ts
@@ -0,0 +1,49 @@
+import { DebugElement } from '@angular/core';
+import { ComponentFixture, fakeAsync } from '@angular/core/testing';
+
+import { SFSchema } from '@delon/form';
+import { createTestContext } from '@delon/testing';
+
+import { ColorWidgetModule, SFColorWidgetSchema } from './index';
+import { configureSFTestSuite, SFPage, TestFormComponent } from '../../spec/base.spec';
+
+describe('form: widget: color', () => {
+  let fixture: ComponentFixture<TestFormComponent>;
+  let dl: DebugElement;
+  let context: TestFormComponent;
+  let page: SFPage;
+
+  configureSFTestSuite({ imports: [ColorWidgetModule] });
+
+  beforeEach(() => {
+    ({ fixture, dl, context } = createTestContext(TestFormComponent));
+    page = new SFPage(context.comp);
+    page.cleanOverlay().prop(dl, context, fixture);
+  });
+
+  it('should be working', fakeAsync(() => {
+    const change = jasmine.createSpy();
+    const formatChange = jasmine.createSpy();
+    const s: SFSchema = {
+      properties: {
+        a: {
+          type: 'string',
+          ui: {
+            widget: 'color',
+            defaultValue: '#f50',
+            change,
+            formatChange
+          } as SFColorWidgetSchema
+        }
+      }
+    };
+    page
+      .newSchema(s)
+      .typeEvent('click', '.ant-color-picker-trigger')
+      .typeEvent('click', 'nz-select')
+      .typeEvent('click', 'nz-option-container nz-option-item:nth-child(2)');
+    expect(page.getValue('/a')).toBe('hsb(20, 100%, 100%)');
+    expect(change).toHaveBeenCalled();
+    expect(formatChange).toHaveBeenCalled();
+  }));
+});
diff --git a/packages/form/widgets/color/widget.ts b/packages/form/widgets/color/widget.ts
new file mode 100644
index 0000000000..eebad6c6a8
--- /dev/null
+++ b/packages/form/widgets/color/widget.ts
@@ -0,0 +1,49 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+import { ControlUIWidget } from '@delon/form';
+import type { NzColor, NzColorPickerFormatType } from 'ng-zorro-antd/color-picker';
+
+import type { SFColorWidgetSchema } from './schema';
+
+@Component({
+  selector: 'sf-color',
+  template: `<sf-item-wrap
+    [id]="id"
+    [schema]="schema"
+    [ui]="ui"
+    [showError]="showError"
+    [error]="error"
+    [showTitle]="schema.title"
+  >
+    <nz-color-block *ngIf="ui.block" [nzColor]="value" [nzSize]="$any(ui.size)" />
+    <nz-color-picker
+      *ngIf="!ui.block"
+      [ngModel]="value"
+      (ngModelChange)="setValue($event)"
+      [nzDisabled]="disabled"
+      [nzSize]="$any(ui.size)"
+      [nzDefaultValue]="ui.defaultValue ?? ''"
+      [nzFormat]="ui.format ?? null"
+      [nzTrigger]="ui.trigger ?? 'click'"
+      [nzTitle]="ui.title ?? ''"
+      [nzFlipFlop]="$any(ui.flipFlop)"
+      [nzShowText]="ui.showText"
+      [nzAllowClear]="ui.allowClear"
+      (nzOnChange)="_change($event)"
+      (nzOnFormatChange)="_formatChange($event)"
+    />
+  </sf-item-wrap>`,
+  preserveWhitespaces: false,
+  encapsulation: ViewEncapsulation.None
+})
+export class ColorWidget extends ControlUIWidget<SFColorWidgetSchema> {
+  static readonly KEY = 'color';
+
+  _change(ev: { color: NzColor; format: string }): void {
+    if (this.ui.change) this.ui.change(ev);
+  }
+
+  _formatChange(ev: NzColorPickerFormatType): void {
+    if (this.ui.formatChange) this.ui.formatChange(ev);
+  }
+}
diff --git a/scripts/site/route-paths.txt b/scripts/site/route-paths.txt
index ba61a837f5..2d5bc2f1f1 100644
--- a/scripts/site/route-paths.txt
+++ b/scripts/site/route-paths.txt
@@ -203,6 +203,8 @@
 /form/cascader/zh
 /form/checkbox/en
 /form/checkbox/zh
+/form/color/en
+/form/color/zh
 /form/conditional/en
 /form/conditional/zh
 /form/custom/en
diff --git a/src/app/shared/json-schema/json-schema.module.ts b/src/app/shared/json-schema/json-schema.module.ts
index 66fc205816..4c615b7b3a 100644
--- a/src/app/shared/json-schema/json-schema.module.ts
+++ b/src/app/shared/json-schema/json-schema.module.ts
@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core';
 import { DelonFormModule } from '@delon/form';
 import { AutoCompleteWidgetModule } from '@delon/form/widgets/autocomplete';
 import { CascaderWidgetModule } from '@delon/form/widgets/cascader';
+import { ColorWidgetModule } from '@delon/form/widgets/color';
 import { MentionWidgetModule } from '@delon/form/widgets/mention';
 import { RateWidgetModule } from '@delon/form/widgets/rate';
 import { SliderWidgetModule } from '@delon/form/widgets/slider';
@@ -30,6 +31,7 @@ import { SharedModule } from '../shared.module';
     TagWidgetModule,
     TimeWidgetModule,
     UploadWidgetModule,
+    ColorWidgetModule,
     MonacoEditorWidgetModule,
     TinymceWidgetModule
   ]

From bd6512122374128e388430618381c913f9ca1cc5 Mon Sep 17 00:00:00 2001
From: cipchk <cipchk@qq.com>
Date: Sat, 21 Oct 2023 19:59:50 +0800
Subject: [PATCH 8/9] feat: add `qr-code`

---
 packages/form/widgets/qr-code/demo/simple.md  | 67 +++++++++++++++++++
 packages/form/widgets/qr-code/index.en-US.md  | 28 ++++++++
 packages/form/widgets/qr-code/index.ts        | 20 ++++++
 packages/form/widgets/qr-code/index.zh-CN.md  | 28 ++++++++
 packages/form/widgets/qr-code/ng-package.json |  6 ++
 packages/form/widgets/qr-code/schema.ts       | 25 +++++++
 packages/form/widgets/qr-code/widget.spec.ts  | 37 ++++++++++
 packages/form/widgets/qr-code/widget.ts       | 41 ++++++++++++
 scripts/site/route-paths.txt                  |  2 +
 .../shared/json-schema/json-schema.module.ts  |  2 +
 10 files changed, 256 insertions(+)
 create mode 100644 packages/form/widgets/qr-code/demo/simple.md
 create mode 100644 packages/form/widgets/qr-code/index.en-US.md
 create mode 100644 packages/form/widgets/qr-code/index.ts
 create mode 100644 packages/form/widgets/qr-code/index.zh-CN.md
 create mode 100644 packages/form/widgets/qr-code/ng-package.json
 create mode 100644 packages/form/widgets/qr-code/schema.ts
 create mode 100644 packages/form/widgets/qr-code/widget.spec.ts
 create mode 100644 packages/form/widgets/qr-code/widget.ts

diff --git a/packages/form/widgets/qr-code/demo/simple.md b/packages/form/widgets/qr-code/demo/simple.md
new file mode 100644
index 0000000000..866f3d01de
--- /dev/null
+++ b/packages/form/widgets/qr-code/demo/simple.md
@@ -0,0 +1,67 @@
+---
+title:
+  zh-CN: 基础样例
+  en-US: Basic Usage
+order: 0
+---
+
+## zh-CN
+
+最简单的用法。
+
+## en-US
+
+Simplest of usage.
+
+```ts
+import { Component } from '@angular/core';
+
+import { SFSchema } from '@delon/form';
+import type { SFQrCodeWidgetSchema } from '@delon/form/widgets/qr-code';
+import { NzMessageService } from 'ng-zorro-antd/message';
+
+@Component({
+  selector: 'app-demo',
+  template: `<sf [schema]="schema" (formSubmit)="submit($event)" />`
+})
+export class DemoComponent {
+  schema: SFSchema = {
+    properties: {
+      base: {
+        type: 'string',
+        title: 'Base',
+        default: 'https://ng-alain.com/',
+        ui: {
+          widget: 'qr-code',
+          refresh: console.log
+        } as SFQrCodeWidgetSchema
+      },
+      icon: {
+        type: 'string',
+        title: 'With Icon',
+        default: 'https://ng-alain.com/',
+        ui: {
+          widget: 'qr-code',
+          icon: 'https://ng-alain.com/assets/logo-color.svg',
+          bordered: true
+        } as SFQrCodeWidgetSchema
+      },
+      color: {
+        type: 'string',
+        title: 'Color',
+        default: 'https://ng-alain.com/',
+        ui: {
+          widget: 'qr-code',
+          color: '#f50'
+        } as SFQrCodeWidgetSchema
+      }
+    }
+  };
+
+  constructor(private msg: NzMessageService) {}
+
+  submit(value: {}): void {
+    this.msg.success(JSON.stringify(value));
+  }
+}
+```
diff --git a/packages/form/widgets/qr-code/index.en-US.md b/packages/form/widgets/qr-code/index.en-US.md
new file mode 100644
index 0000000000..83e40a3b5a
--- /dev/null
+++ b/packages/form/widgets/qr-code/index.en-US.md
@@ -0,0 +1,28 @@
+---
+title: qr-code
+subtitle: QRCode
+type: Non-built-in widgets
+---
+
+Used when the link needs to be converted into a QR Code.
+
+## Import module
+
+Non-built-in modules, Should be import `QrCodeWidgetModule` in [json-schema.module.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/shared/json-schema/json-schema.module.ts#L11).
+
+## API
+
+### ui
+
+| Property | Description | Type | Default |
+|----------|-------------|------|---------|
+| `[color]`           | QR code Color                       | `string`                        | `#000`    |
+| `[bgColor]` | QR code background color            | `string`                        | `#FFFFFF` |
+| `[qrSize]`            | QR code Size                        | `number`                        | `160`     |
+| `[padding]`         | QR code Padding                     | `number \| number[]`            | `0`       |
+| `[icon]`            | Icon address in QR code             | `string`                        | -         |
+| `[iconSize]`        | The size of the icon in the QR code | `number`                        | `40`      |
+| `[bordered]`        | Whether has border style            | `boolean`                       | `true`    |
+| `[status]`          | QR code status                      | `'active'｜'expired' ｜'loading'` | `active`  |
+| `[level]`           | Error Code Level                    | `'L'｜'M'｜'Q'｜'H'`               | `M`       |
+| `(refresh)`         | callback                            | `EventEmitter<string>`          | -         |
diff --git a/packages/form/widgets/qr-code/index.ts b/packages/form/widgets/qr-code/index.ts
new file mode 100644
index 0000000000..e97ca0fae5
--- /dev/null
+++ b/packages/form/widgets/qr-code/index.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { DelonFormModule, WidgetRegistry } from '@delon/form';
+import { NzQRCodeModule } from 'ng-zorro-antd/qr-code';
+
+import { QrCodeWidget } from './widget';
+
+export * from './widget';
+export * from './schema';
+
+@NgModule({
+  imports: [FormsModule, DelonFormModule, NzQRCodeModule],
+  declarations: [QrCodeWidget]
+})
+export class QrCodeWidgetModule {
+  constructor(widgetRegistry: WidgetRegistry) {
+    widgetRegistry.register(QrCodeWidget.KEY, QrCodeWidget);
+  }
+}
diff --git a/packages/form/widgets/qr-code/index.zh-CN.md b/packages/form/widgets/qr-code/index.zh-CN.md
new file mode 100644
index 0000000000..32076a1edc
--- /dev/null
+++ b/packages/form/widgets/qr-code/index.zh-CN.md
@@ -0,0 +1,28 @@
+---
+title: qr-code
+subtitle: 二维码
+type: Non-built-in widgets
+---
+
+当需要将链接转换成为二维码时使用。
+
+## 导入模块
+
+非内置模块，需要额外在 [json-schema.module.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/shared/json-schema/json-schema.module.ts#L11) 导入 `QrCodeWidgetModule`。
+
+## API
+
+### ui 属性
+
+| 成员 | 说明 | 类型 | 默认值 |
+|----|----|----|-----|
+| `[color]`    | 二维码颜色        | `string`                          | `#000`    |
+| `[bgColor]` | 二维码背景颜色      | `string`                        | `#FFFFFF` |
+| `[qrSize]`     | 二维码大小        | `number`                          | `160`     |
+| `[padding]`  | 二维码填充        | `number \| number[]`              | `0`       |
+| `[icon]`     | 二维码中 icon 地址 | `string`                          | -         |
+| `[iconSize]` | 二维码中 icon 大小 | `number`                          | `40`      |
+| `[bordered]` | 是否有边框        | `boolean`                         | `true`    |
+| `[status]`   | 二维码状态        | `'active'｜'expired' ｜'loading'`   | `active`  |
+| `[level]`    | 二维码容错等级      | `'L'｜'M'｜'Q'｜'H'`                 | `M`       |
+| `(refresh)`  | 点击"点击刷新"的回调  | `EventEmitter<string>`            | -         |
diff --git a/packages/form/widgets/qr-code/ng-package.json b/packages/form/widgets/qr-code/ng-package.json
new file mode 100644
index 0000000000..3b78722325
--- /dev/null
+++ b/packages/form/widgets/qr-code/ng-package.json
@@ -0,0 +1,6 @@
+{
+  "lib": {
+    "flatModuleFile": "widgets-qr-code",
+    "entryFile": "index.ts"
+  }
+}
diff --git a/packages/form/widgets/qr-code/schema.ts b/packages/form/widgets/qr-code/schema.ts
new file mode 100644
index 0000000000..49be6274ba
--- /dev/null
+++ b/packages/form/widgets/qr-code/schema.ts
@@ -0,0 +1,25 @@
+import type { SFUISchemaItem } from '@delon/form';
+import type { ERROR_LEVEL_MAP } from 'ng-zorro-antd/qr-code/qrcode';
+
+export interface SFQrCodeWidgetSchema extends SFUISchemaItem {
+  /** QR code Padding */
+  padding?: number;
+  /** QR code Color */
+  color?: string;
+  /** QR code background color */
+  bgColor?: string;
+  /** QR code Size */
+  qrSize?: number;
+  /** Icon address in QR code */
+  icon?: string;
+  /** The size of the icon in the QR code */
+  iconSize?: number;
+  /** Whether has border style */
+  bordered?: boolean;
+  /** QR code status */
+  status?: 'active' | 'expired' | 'loading';
+  /** Error Code Level */
+  level?: keyof typeof ERROR_LEVEL_MAP;
+  /** Callback */
+  refresh?: (qr: string) => void;
+}
diff --git a/packages/form/widgets/qr-code/widget.spec.ts b/packages/form/widgets/qr-code/widget.spec.ts
new file mode 100644
index 0000000000..6f348610a9
--- /dev/null
+++ b/packages/form/widgets/qr-code/widget.spec.ts
@@ -0,0 +1,37 @@
+import { DebugElement } from '@angular/core';
+import { ComponentFixture, fakeAsync } from '@angular/core/testing';
+
+import { SFSchema } from '@delon/form';
+import { createTestContext } from '@delon/testing';
+
+import { QrCodeWidgetModule, SFQrCodeWidgetSchema } from './index';
+import { configureSFTestSuite, SFPage, TestFormComponent } from '../../spec/base.spec';
+
+describe('form: widget: qr-code', () => {
+  let fixture: ComponentFixture<TestFormComponent>;
+  let dl: DebugElement;
+  let context: TestFormComponent;
+  let page: SFPage;
+
+  configureSFTestSuite({ imports: [QrCodeWidgetModule] });
+
+  beforeEach(() => {
+    ({ fixture, dl, context } = createTestContext(TestFormComponent));
+    page = new SFPage(context.comp);
+    page.cleanOverlay().prop(dl, context, fixture);
+  });
+
+  it('should be working', fakeAsync(() => {
+    const s: SFSchema = {
+      properties: {
+        a: {
+          type: 'string',
+          ui: {
+            widget: 'qr-code'
+          } as SFQrCodeWidgetSchema
+        }
+      }
+    };
+    page.newSchema(s).getEl('canvas');
+  }));
+});
diff --git a/packages/form/widgets/qr-code/widget.ts b/packages/form/widgets/qr-code/widget.ts
new file mode 100644
index 0000000000..db3c94cb96
--- /dev/null
+++ b/packages/form/widgets/qr-code/widget.ts
@@ -0,0 +1,41 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+import { ControlUIWidget } from '@delon/form';
+
+import type { SFQrCodeWidgetSchema } from './schema';
+
+@Component({
+  selector: 'sf-qr-code',
+  template: `<sf-item-wrap
+    [id]="id"
+    [schema]="schema"
+    [ui]="ui"
+    [showError]="showError"
+    [error]="error"
+    [showTitle]="schema.title"
+  >
+    <nz-qrcode
+      [nzValue]="value"
+      [nzPadding]="ui.padding ?? 0"
+      [nzColor]="ui.color ?? '#000'"
+      [nzBgColor]="ui.bgColor ?? '#FFF'"
+      [nzSize]="ui.qrSize ?? 160"
+      [nzIcon]="ui.icon ?? ''"
+      [nzIconSize]="ui.iconSize ?? 40"
+      [nzBordered]="ui.bordered ?? false"
+      [nzStatus]="ui.status ?? 'active'"
+      [nzLevel]="ui.level ?? 'M'"
+      (nzRefresh)="refresh($event)"
+    />
+  </sf-item-wrap>`,
+  preserveWhitespaces: false,
+  encapsulation: ViewEncapsulation.None
+})
+export class QrCodeWidget extends ControlUIWidget<SFQrCodeWidgetSchema> {
+  static readonly KEY = 'qr-code';
+
+  refresh(qr: string): void {
+    this.setValue(qr);
+    if (this.ui.refresh) this.ui.refresh(qr);
+  }
+}
diff --git a/scripts/site/route-paths.txt b/scripts/site/route-paths.txt
index 2d5bc2f1f1..cf57abb3e2 100644
--- a/scripts/site/route-paths.txt
+++ b/scripts/site/route-paths.txt
@@ -233,6 +233,8 @@
 /form/object/zh
 /form/qa/en
 /form/qa/zh
+/form/qr-code/en
+/form/qr-code/zh
 /form/radio/en
 /form/radio/zh
 /form/rate/en
diff --git a/src/app/shared/json-schema/json-schema.module.ts b/src/app/shared/json-schema/json-schema.module.ts
index 4c615b7b3a..61bb9e095b 100644
--- a/src/app/shared/json-schema/json-schema.module.ts
+++ b/src/app/shared/json-schema/json-schema.module.ts
@@ -5,6 +5,7 @@ import { AutoCompleteWidgetModule } from '@delon/form/widgets/autocomplete';
 import { CascaderWidgetModule } from '@delon/form/widgets/cascader';
 import { ColorWidgetModule } from '@delon/form/widgets/color';
 import { MentionWidgetModule } from '@delon/form/widgets/mention';
+import { QrCodeWidgetModule } from '@delon/form/widgets/qr-code';
 import { RateWidgetModule } from '@delon/form/widgets/rate';
 import { SliderWidgetModule } from '@delon/form/widgets/slider';
 import { TagWidgetModule } from '@delon/form/widgets/tag';
@@ -32,6 +33,7 @@ import { SharedModule } from '../shared.module';
     TimeWidgetModule,
     UploadWidgetModule,
     ColorWidgetModule,
+    QrCodeWidgetModule,
     MonacoEditorWidgetModule,
     TinymceWidgetModule
   ]

From af4cc8eec0184991a295cddadd26cdee4d88068e Mon Sep 17 00:00:00 2001
From: cipchk <cipchk@qq.com>
Date: Sat, 21 Oct 2023 20:52:42 +0800
Subject: [PATCH 9/9] feat: add segmented widget

---
 .../form/widgets/segmented/demo/simple.md     | 65 +++++++++++++++++++
 .../form/widgets/segmented/index.en-US.md     | 22 +++++++
 packages/form/widgets/segmented/index.ts      | 20 ++++++
 .../form/widgets/segmented/index.zh-CN.md     | 22 +++++++
 .../form/widgets/segmented/ng-package.json    |  6 ++
 packages/form/widgets/segmented/schema.ts     | 21 ++++++
 .../form/widgets/segmented/widget.spec.ts     | 42 ++++++++++++
 packages/form/widgets/segmented/widget.ts     | 51 +++++++++++++++
 .../shared/json-schema/json-schema.module.ts  |  2 +
 9 files changed, 251 insertions(+)
 create mode 100644 packages/form/widgets/segmented/demo/simple.md
 create mode 100644 packages/form/widgets/segmented/index.en-US.md
 create mode 100644 packages/form/widgets/segmented/index.ts
 create mode 100644 packages/form/widgets/segmented/index.zh-CN.md
 create mode 100644 packages/form/widgets/segmented/ng-package.json
 create mode 100644 packages/form/widgets/segmented/schema.ts
 create mode 100644 packages/form/widgets/segmented/widget.spec.ts
 create mode 100644 packages/form/widgets/segmented/widget.ts

diff --git a/packages/form/widgets/segmented/demo/simple.md b/packages/form/widgets/segmented/demo/simple.md
new file mode 100644
index 0000000000..9afa849841
--- /dev/null
+++ b/packages/form/widgets/segmented/demo/simple.md
@@ -0,0 +1,65 @@
+---
+title:
+  zh-CN: 基础样例
+  en-US: Basic Usage
+order: 0
+---
+
+## zh-CN
+
+最简单的用法。
+
+## en-US
+
+Simplest of usage.
+
+```ts
+import { Component } from '@angular/core';
+import { delay, of } from 'rxjs';
+
+import { SFSchema } from '@delon/form';
+import { SFSegmentedWidgetSchema, SegmentedWidget } from '@delon/form/widgets/segmented';
+import { NzMessageService } from 'ng-zorro-antd/message';
+import { NzSegmentedOptions } from 'ng-zorro-antd/segmented';
+
+@Component({
+  selector: 'app-demo',
+  template: `<sf [schema]="schema" (formSubmit)="submit($event)" />`
+})
+export class DemoComponent {
+  schema: SFSchema = {
+    properties: {
+      base: {
+        type: 'string',
+        title: 'Base',
+        default: 2,
+        enum: ['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly'],
+        ui: {
+          widget: SegmentedWidget.KEY,
+          valueChange: console.log
+        } as SFSegmentedWidgetSchema
+      },
+      asyncData: {
+        type: 'string',
+        title: 'Async Data',
+        ui: {
+          widget: SegmentedWidget.KEY,
+          asyncData: () =>
+            of([
+              { label: 'Label1', value: 'a' },
+              { label: 'Label2', value: 'b' },
+              { label: 'Label3', value: 'c', disabled: true }
+            ] as NzSegmentedOptions).pipe(delay(1000)),
+          valueChange: console.log
+        } as SFSegmentedWidgetSchema
+      }
+    }
+  };
+
+  constructor(private msg: NzMessageService) {}
+
+  submit(value: {}): void {
+    this.msg.success(JSON.stringify(value));
+  }
+}
+```
diff --git a/packages/form/widgets/segmented/index.en-US.md b/packages/form/widgets/segmented/index.en-US.md
new file mode 100644
index 0000000000..a688d37a56
--- /dev/null
+++ b/packages/form/widgets/segmented/index.en-US.md
@@ -0,0 +1,22 @@
+---
+title: segmented
+subtitle: Segmented
+type: Non-built-in widgets
+---
+
+- When displaying multiple options and user can select a single option;
+- When switching the selected option, the content of the associated area changes.
+
+## Import module
+
+Non-built-in modules, Should be import `SegmentedWidgetModule` in [json-schema.module.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/shared/json-schema/json-schema.module.ts#L11).
+
+## API
+
+### ui
+
+| Property | Description | Type | Default |
+|----------|-------------|------|---------|
+| `[block]` | Option to fit width to its parent\'s width | `boolean` | false |  |
+| `[asyncData]` |  Set children optional | `() => Observable<NzSegmentedOptions>` | - |  |
+| `(valueChange)` | Emits when index of the currently selected option changes | `(data: { index: number; item: SFValue }) => void` | - |  |
diff --git a/packages/form/widgets/segmented/index.ts b/packages/form/widgets/segmented/index.ts
new file mode 100644
index 0000000000..97019ccd83
--- /dev/null
+++ b/packages/form/widgets/segmented/index.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { DelonFormModule, WidgetRegistry } from '@delon/form';
+import { NzSegmentedModule } from 'ng-zorro-antd/segmented';
+
+import { SegmentedWidget } from './widget';
+
+export * from './widget';
+export * from './schema';
+
+@NgModule({
+  imports: [FormsModule, DelonFormModule, NzSegmentedModule],
+  declarations: [SegmentedWidget]
+})
+export class SegmentedWidgetModule {
+  constructor(widgetRegistry: WidgetRegistry) {
+    widgetRegistry.register(SegmentedWidget.KEY, SegmentedWidget);
+  }
+}
diff --git a/packages/form/widgets/segmented/index.zh-CN.md b/packages/form/widgets/segmented/index.zh-CN.md
new file mode 100644
index 0000000000..a7c765d643
--- /dev/null
+++ b/packages/form/widgets/segmented/index.zh-CN.md
@@ -0,0 +1,22 @@
+---
+title: segmented
+subtitle: 分段控制器
+type: Non-built-in widgets
+---
+
+- 用于展示多个选项并允许用户选择其中单个选项；
+- 当切换选中选项时，关联区域的内容会发生变化。
+
+## 导入模块
+
+非内置模块，需要额外在 [json-schema.module.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/shared/json-schema/json-schema.module.ts#L11) 导入 `SegmentedWidgetModule`。
+
+## API
+
+### ui 属性
+
+| 成员 | 说明 | 类型 | 默认值 |
+|----|----|----|-----|
+| `[block]` | 将宽度调整为父元素宽度的选项 | `boolean` | false |  |
+| `[asyncData]` | 异步数据 | `() => Observable<NzSegmentedOptions>` | - |  |
+| `(valueChange)` | 当前选中项目变化时触发回调 | `(data: { index: number; item: SFValue }) => void` | - |  |
diff --git a/packages/form/widgets/segmented/ng-package.json b/packages/form/widgets/segmented/ng-package.json
new file mode 100644
index 0000000000..ec57a9fa30
--- /dev/null
+++ b/packages/form/widgets/segmented/ng-package.json
@@ -0,0 +1,6 @@
+{
+  "lib": {
+    "flatModuleFile": "widgets-color",
+    "entryFile": "index.ts"
+  }
+}
diff --git a/packages/form/widgets/segmented/schema.ts b/packages/form/widgets/segmented/schema.ts
new file mode 100644
index 0000000000..897c7539b6
--- /dev/null
+++ b/packages/form/widgets/segmented/schema.ts
@@ -0,0 +1,21 @@
+import type { TemplateRef } from '@angular/core';
+import type { Observable } from 'rxjs';
+
+import type { SFUISchemaItem, SFValue } from '@delon/form';
+import type { NzSegmentedOption, NzSegmentedOptions } from 'ng-zorro-antd/segmented';
+
+export interface SFSegmentedWidgetSchema extends SFUISchemaItem {
+  /**
+   * 异步数据源
+   */
+  asyncData?: () => Observable<NzSegmentedOptions>;
+  /**
+   * Option to fit width to its parent's width
+   */
+  block?: boolean;
+  labelTemplate?: TemplateRef<{ $implicit: NzSegmentedOption; index: number }> | null;
+  /**
+   * Emits when index of the currently selected option changes
+   */
+  valueChange?: (data: { index: number; item: SFValue }) => void;
+}
diff --git a/packages/form/widgets/segmented/widget.spec.ts b/packages/form/widgets/segmented/widget.spec.ts
new file mode 100644
index 0000000000..2a503c199c
--- /dev/null
+++ b/packages/form/widgets/segmented/widget.spec.ts
@@ -0,0 +1,42 @@
+import { DebugElement } from '@angular/core';
+import { ComponentFixture, fakeAsync } from '@angular/core/testing';
+
+import { SFSchema } from '@delon/form';
+import { createTestContext } from '@delon/testing';
+
+import { SegmentedWidgetModule, SFSegmentedWidgetSchema } from './index';
+import { configureSFTestSuite, SFPage, TestFormComponent } from '../../spec/base.spec';
+
+describe('form: widget: segmented', () => {
+  let fixture: ComponentFixture<TestFormComponent>;
+  let dl: DebugElement;
+  let context: TestFormComponent;
+  let page: SFPage;
+
+  configureSFTestSuite({ imports: [SegmentedWidgetModule] });
+
+  beforeEach(() => {
+    ({ fixture, dl, context } = createTestContext(TestFormComponent));
+    page = new SFPage(context.comp);
+    page.cleanOverlay().prop(dl, context, fixture);
+  });
+
+  it('should be working', fakeAsync(() => {
+    const valueChange = jasmine.createSpy();
+    const s: SFSchema = {
+      properties: {
+        a: {
+          type: 'string',
+          enum: ['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly'],
+          ui: {
+            widget: 'segmented',
+            valueChange
+          } as SFSegmentedWidgetSchema
+        }
+      }
+    };
+    page.newSchema(s).typeEvent('click', '.ant-segmented-item:nth-child(2) .ant-segmented-item-label');
+    expect(page.getValue('/a')).toBe(1);
+    expect(valueChange).toHaveBeenCalled();
+  }));
+});
diff --git a/packages/form/widgets/segmented/widget.ts b/packages/form/widgets/segmented/widget.ts
new file mode 100644
index 0000000000..d97ab147bb
--- /dev/null
+++ b/packages/form/widgets/segmented/widget.ts
@@ -0,0 +1,51 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+import { ControlUIWidget, SFValue, getData } from '@delon/form';
+import { NzSegmentedOptions } from 'ng-zorro-antd/segmented';
+
+import type { SFSegmentedWidgetSchema } from './schema';
+
+@Component({
+  selector: 'sf-segmented',
+  template: `<sf-item-wrap
+    [id]="id"
+    [schema]="schema"
+    [ui]="ui"
+    [showError]="showError"
+    [error]="error"
+    [showTitle]="schema.title"
+  >
+    <nz-segmented
+      [ngModel]="value"
+      (ngModelChange)="setValue($event)"
+      [nzDisabled]="disabled"
+      [nzSize]="$any(ui.size)"
+      [nzBlock]="ui.block ?? false"
+      [nzOptions]="list"
+      [nzLabelTemplate]="ui.labelTemplate ?? null"
+      (nzValueChange)="valueChange($event)"
+    />
+  </sf-item-wrap>`,
+  preserveWhitespaces: false,
+  encapsulation: ViewEncapsulation.None
+})
+export class SegmentedWidget extends ControlUIWidget<SFSegmentedWidgetSchema> {
+  static readonly KEY = 'segmented';
+  private _list?: NzSegmentedOptions;
+  get list(): NzSegmentedOptions {
+    return this._list ?? [];
+  }
+
+  reset(value: SFValue): void {
+    getData(this.schema, this.ui, value).subscribe(list => {
+      this._list = list as NzSegmentedOptions;
+      this.detectChanges();
+    });
+  }
+
+  valueChange(index: number): void {
+    if (this.ui.valueChange) {
+      this.ui.valueChange({ index, item: this.list[index] as SFValue });
+    }
+  }
+}
diff --git a/src/app/shared/json-schema/json-schema.module.ts b/src/app/shared/json-schema/json-schema.module.ts
index 61bb9e095b..43932b3b5f 100644
--- a/src/app/shared/json-schema/json-schema.module.ts
+++ b/src/app/shared/json-schema/json-schema.module.ts
@@ -7,6 +7,7 @@ import { ColorWidgetModule } from '@delon/form/widgets/color';
 import { MentionWidgetModule } from '@delon/form/widgets/mention';
 import { QrCodeWidgetModule } from '@delon/form/widgets/qr-code';
 import { RateWidgetModule } from '@delon/form/widgets/rate';
+import { SegmentedWidgetModule } from '@delon/form/widgets/segmented';
 import { SliderWidgetModule } from '@delon/form/widgets/slider';
 import { TagWidgetModule } from '@delon/form/widgets/tag';
 import { TimeWidgetModule } from '@delon/form/widgets/time';
@@ -34,6 +35,7 @@ import { SharedModule } from '../shared.module';
     UploadWidgetModule,
     ColorWidgetModule,
     QrCodeWidgetModule,
+    SegmentedWidgetModule,
     MonacoEditorWidgetModule,
     TinymceWidgetModule
   ]