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] 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: {