From 6198248ccc532a1bfea3b68c1e0ffeb83bf39d03 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8D=A1=E8=89=B2?= Date: Sat, 20 Oct 2018 14:07:23 +0800 Subject: [PATCH] docs: repair mode (#222) --- README.md | 4 +- angular.json | 4 +- docs/faq.md | 2 +- docs/new-component.md | 5 +- docs/performance.md | 7 - docs/style-guide.md | 6 +- package.json | 6 +- packages/abc/abc.module.ts | 4 +- .../abc/page-header/page-header.component.ts | 4 +- packages/abc/qr/qr.component.ts | 5 +- .../abc/quick-menu/quick-menu.component.ts | 4 +- packages/abc/reuse-tab/reuse-tab.service.ts | 8 +- .../abc/sidebar-nav/sidebar-nav.component.ts | 4 +- packages/abc/table/table-export.ts | 7 +- packages/cache/docs/demo/simple.md | 80 ++++++++ packages/cache/src/cache.service.ts | 24 +-- packages/chart/chart.module.ts | 4 +- packages/chart/custom/custom.component.ts | 4 +- packages/form/src/model/array.property.ts | 4 +- packages/form/src/model/form.property.ts | 8 +- packages/form/src/module.ts | 4 +- packages/form/src/sf-item.component.ts | 4 - packages/mock/src/mock.service.ts | 4 +- .../files/src/app/shared/shared.module.ts | 8 +- .../files/src/testing/common.spec.ts | 6 - packages/theme/docs/demo/table-rep.md | 72 ++++++++ packages/theme/docs/tools.en-US.md | 5 +- packages/theme/docs/tools.zh-CN.md | 5 +- .../theme/src/services/http/http.client.ts | 12 +- packages/theme/src/theme.module.ts | 4 +- scripts/site/generate.ts | 140 ++++++++++---- scripts/site/interfaces.ts | 173 +++++++++--------- scripts/site/utils/generate-demo.ts | 55 +++++- scripts/site/utils/generate-example.ts | 40 ++++ scripts/site/utils/generate-md.ts | 21 +-- src/app/app.module.ts | 18 +- src/app/delon.module.ts | 6 +- src/app/routes/dev/demo/demo.component.ts | 116 +++++------- src/app/routes/dev/dev.module.ts | 3 - .../routes/form-pages/form-pages.module.ts | 2 - src/app/routes/routes.module.ts | 4 +- src/app/routes/tools/tools.module.ts | 2 - .../components/docs/docs.component.html | 6 +- .../shared/components/docs/docs.component.ts | 2 - src/app/shared/shared.module.ts | 3 + src/polyfills.ts | 3 +- src/site.config.js | 4 + src/templates/examples.ts | 26 +++ src/templates/examples_index.ts | 10 + src/templates/module.ts | 4 +- 50 files changed, 639 insertions(+), 317 deletions(-) create mode 100644 packages/cache/docs/demo/simple.md create mode 100644 packages/theme/docs/demo/table-rep.md create mode 100644 scripts/site/utils/generate-example.ts create mode 100644 src/templates/examples.ts create mode 100644 src/templates/examples_index.ts diff --git a/README.md b/README.md index 5de22d920c..4cde43674d 100644 --- a/README.md +++ b/README.md @@ -6,8 +6,10 @@ delon is a production-ready solution for admin business components packages, Bui [![Dependency Status](https://david-dm.org/ng-alain/delon/status.svg)](https://david-dm.org/ng-alain/delon) [![DevDependency Status](https://david-dm.org/ng-alain/delon/dev-status.svg)](https://david-dm.org/ng-alain/delon?type=dev) [![codecov](https://codecov.io/gh/ng-alain/delon/branch/master/graph/badge.svg)](https://codecov.io/gh/ng-alain/delon) +[![GitHub Release Date](https://img.shields.io/github/release-date/ng-alain/ng-alain.svg?style=flat-square)](https://github.com/ng-alain/ng-alain/releases) [![npm](https://img.shields.io/npm/l/@delon/theme.svg)](https://www.npmjs.com/package/@delon/theme) -[![npm](https://img.shields.io/npm/dm/@delon/theme.svg)](https://www.npmjs.com/package/@delon/theme) +[![Gitter](https://img.shields.io/gitter/room/cipchk/ng-alain.svg?style=flat-square)](https://gitter.im/cipchk/ng-alain) +[![extension-for-VSCode](https://img.shields.io/badge/extension%20for-VSCode-blue.svg?style=flat-square)](https://marketplace.visualstudio.com/items?itemName=cipchk.ng-alain-vscode) | package name | npm version | npm next version | taobao version | | ------------ |:-----:|:----------:|:----------:| diff --git a/angular.json b/angular.json index f5bed0e436..605a72cb89 100644 --- a/angular.json +++ b/angular.json @@ -7,7 +7,7 @@ "root": "", "sourceRoot": "src", "projectType": "application", - "targets": { + "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { @@ -107,7 +107,7 @@ "root": "", "sourceRoot": "", "projectType": "application", - "targets": { + "architect": { "e2e": { "builder": "@angular-devkit/build-angular:protractor", "options": { diff --git a/docs/faq.md b/docs/faq.md index 0561aa2c38..3f489811a0 100644 --- a/docs/faq.md +++ b/docs/faq.md @@ -94,4 +94,4 @@ export class DelonModule { ### Missing locale data for the locale "zh-cn" -缺少语言导入，参考[app.module.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/app.module.ts#L20-L22)。 +缺少语言导入，参考[app.module.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/app.module.ts#L6-L25)。 diff --git a/docs/new-component.md b/docs/new-component.md index 46a77a11c6..11b6d3aa51 100644 --- a/docs/new-component.md +++ b/docs/new-component.md @@ -86,13 +86,14 @@ export class ImageWrapperComponent { ```ts // shared.module.ts -// region: your componets & directives + +// #region your componets & directives import { ImageWrapperComponent } from './image-wrapper'; const COMPONENTS = [ ImageWrapperComponent ]; const DIRECTIVES = []; -// endregion +// #endregion ``` ## 使用 diff --git a/docs/performance.md b/docs/performance.md index ab8990799a..00edb890f5 100644 --- a/docs/performance.md +++ b/docs/performance.md @@ -6,13 +6,6 @@ title: type: Advance --- -## Web 图标 - -默认除了 ng-zorro-antd 自带 Web 图标，额外增加了 [font-awesome](//fontawesome.io/)、[simple-line-icons](//simplelineicons.com/)、[weather-icons](//erikflowers.github.io/weather-icons/) 三个图标库，如果你明确不需要，可以删除： - -+ 移除 `src/styles.less` 引用样式文件 -+ 移除相应包体 - ## IE 优化 ng-alain 默认开启了对 IE 的支持，这给包体及样式增加了一定大小，倘若你很在意并且不需要 `IE10` 及以下的版本支持的话，可以调整两项配置： diff --git a/docs/style-guide.md b/docs/style-guide.md index 6938dcb76c..57c50f6cf8 100644 --- a/docs/style-guide.md +++ b/docs/style-guide.md @@ -12,13 +12,13 @@ Angular CLI 构建的项目就其目录结构而言已经非常棒了，同时 ### 区域 -将一组相同属性使用 `// region: ` & `// endregion` 自由折叠代码预处理指令（限VSCODE），以 `shared.module.ts` 文件为例： +将一组相同属性使用 `// #region ` & `// #endregion` 自由折叠代码预处理指令（限VSCODE），以 `shared.module.ts` 文件为例： ```ts -// region: third libs +// #region third libs import { NzSchemaFormModule } from 'nz-schema-form'; const THIRDMODULES = [ NzSchemaFormModule ]; -// endregion +// #endregion ``` 将所有第三方模块放在 `third libs` 区域当中，并统一将注册模块放进 `THIRDMODULES` 变量中。你无须再关心导入和导出的问题，因为 `THIRDMODULES` 数组默认加入导入和导出行列中。 diff --git a/package.json b/package.json index ec69fefed6..1c8bb76175 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,7 @@ "test": "ng test --code-coverage --watch=false && bash scripts/ci/build-schematics.sh -b -t", "release": "bash scripts/ci/build-lib.sh && bash scripts/ci/build-schematics.sh -b", "site:gen": "node scripts/site/main init", - "site": "npm run site:gen && ng serve -c=hmr", + "site": "npm run site:gen && ng serve", "site:build": "npm run site:gen && ng build --prod --build-optimizer --base-href /", "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s --pkg package.json", "pre-publish": "node scripts/publish/publish.js && node scripts/publish/publish-scaffold.js", @@ -38,6 +38,7 @@ "@angular/common": "^6.1.0", "@angular/compiler": "^6.1.0", "@angular/core": "^6.1.0", + "@angular/elements": "^6.0.0", "@angular/forms": "^6.1.0", "@angular/http": "^6.1.0", "@angular/platform-browser": "^6.1.0", @@ -65,7 +66,8 @@ "ngx-ueditor": "^2.1.0", "qrious": "^4.0.2", "rxjs": "^6.0.0", - "zone.js": "^0.8.26" + "zone.js": "^0.8.26", + "@webcomponents/custom-elements": "^1.2.0" }, "devDependencies": { "@angular-devkit/build-angular": "~0.8.0", diff --git a/packages/abc/abc.module.ts b/packages/abc/abc.module.ts index 4d084857cd..3451eeaefa 100644 --- a/packages/abc/abc.module.ts +++ b/packages/abc/abc.module.ts @@ -1,6 +1,6 @@ import { NgModule, ModuleWithProviders } from '@angular/core'; -// region: all modules +// #region all modules import { STModule } from '@delon/abc/table'; import { SVModule } from '@delon/abc/view'; import { SEModule } from '@delon/abc/edit'; @@ -59,7 +59,7 @@ const MODULES = [ DatePickerModule, ]; -// endregion +// #endregion @NgModule({ imports: [ diff --git a/packages/abc/page-header/page-header.component.ts b/packages/abc/page-header/page-header.component.ts index b46c4f02b2..2f9c04d78a 100644 --- a/packages/abc/page-header/page-header.component.ts +++ b/packages/abc/page-header/page-header.component.ts @@ -56,7 +56,7 @@ export class PageHeaderComponent return this._menus; } - // region fields + // #region fields _title: string; _titleTpl: TemplateRef; @@ -136,7 +136,7 @@ export class PageHeaderComponent @Input() tab: TemplateRef; - // endregion + // #endregion constructor( cog: PageHeaderConfig, diff --git a/packages/abc/qr/qr.component.ts b/packages/abc/qr/qr.component.ts index 4a266be8a1..5999745276 100644 --- a/packages/abc/qr/qr.component.ts +++ b/packages/abc/qr/qr.component.ts @@ -24,7 +24,8 @@ import { QRConfig } from './qr.config'; }) export class QRComponent implements OnChanges { dataURL: string; - // region: fields + + // #region fields /** 背景 */ @Input() @@ -61,7 +62,7 @@ export class QRComponent implements OnChanges { @Output() change = new EventEmitter(); - // endregion + // #endregion constructor( cog: QRConfig, diff --git a/packages/abc/quick-menu/quick-menu.component.ts b/packages/abc/quick-menu/quick-menu.component.ts index 7c57fe53a4..a795a196c8 100644 --- a/packages/abc/quick-menu/quick-menu.component.ts +++ b/packages/abc/quick-menu/quick-menu.component.ts @@ -27,7 +27,7 @@ import { InputNumber } from '@delon/util'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class QuickMenuComponent implements OnInit, OnChanges { - // region: fields + // #region fields @Input() icon: @@ -43,7 +43,7 @@ export class QuickMenuComponent implements OnInit, OnChanges { @Input() borderColor = '#ddd'; - // endregion + // #endregion constructor( private cd: ChangeDetectorRef, diff --git a/packages/abc/reuse-tab/reuse-tab.service.ts b/packages/abc/reuse-tab/reuse-tab.service.ts index 8813db5448..fd1824dbd3 100644 --- a/packages/abc/reuse-tab/reuse-tab.service.ts +++ b/packages/abc/reuse-tab/reuse-tab.service.ts @@ -32,7 +32,7 @@ export class ReuseTabService implements OnDestroy { private _closableCached: { [url: string]: boolean } = {}; private removeUrlBuffer: string; - // region: public + // #region public /** 当前路由地址 */ get curUrl() { @@ -335,9 +335,9 @@ export class ReuseTabService implements OnDestroy { refresh(data?: any) { this._cachedChange.next({ active: 'refresh', data }); } - // endregion + // #endregion - // region: privates + // #region privates private destroy(_handle: any) { if (_handle && _handle.componentRef && _handle.componentRef.destroy) @@ -350,7 +350,7 @@ export class ReuseTabService implements OnDestroy { console.warn(...args); } - // endregion + // #endregion constructor(private injector: Injector, private menuService: MenuService) {} diff --git a/packages/abc/sidebar-nav/sidebar-nav.component.ts b/packages/abc/sidebar-nav/sidebar-nav.component.ts index e26b530fe7..74fd42d72b 100644 --- a/packages/abc/sidebar-nav/sidebar-nav.component.ts +++ b/packages/abc/sidebar-nav/sidebar-nav.component.ts @@ -215,7 +215,7 @@ export class SidebarNavComponent implements OnInit, OnDestroy { this.clearFloatingContainer(); } - // region: Under pad + // #region Under pad private get isPad(): boolean { return window.innerWidth < 768; @@ -242,5 +242,5 @@ export class SidebarNavComponent implements OnInit, OnDestroy { this.settings.setLayout('collapsed', status); } - // endregion + // #endregion } diff --git a/packages/abc/table/table-export.ts b/packages/abc/table/table-export.ts index 09d876dad3..62a050671f 100644 --- a/packages/abc/table/table-export.ts +++ b/packages/abc/table/table-export.ts @@ -43,16 +43,16 @@ export class STExport { ); const cc = colData.length, dc = opt._d.length; - // region: column + + // column for (let i = 0; i < cc; i++) { sheet[`${String.fromCharCode(65 + i)}1`] = { t: 's', v: colData[i].title, }; } - // endregion - // region: content + // content for (let i = 0; i < dc; i++) { for (let j = 0; j < cc; j++) { sheet[`${String.fromCharCode(65 + j)}${i + 2}`] = this._stGet( @@ -61,7 +61,6 @@ export class STExport { ); } } - // endregion if (cc > 0 && dc > 0) { sheet['!ref'] = `A1:${String.fromCharCode(65 + cc - 1)}${dc + 1}`; diff --git a/packages/cache/docs/demo/simple.md b/packages/cache/docs/demo/simple.md new file mode 100644 index 0000000000..9d5885738f --- /dev/null +++ b/packages/cache/docs/demo/simple.md @@ -0,0 +1,80 @@ +--- +title: + zh-CN: 基础样例 + en-US: Basic Usage +order: 0 +--- + +## zh-CN + +最简单的用法。 + +## en-US + +Simplest of usage. + +```ts +import { Component, OnDestroy } from '@angular/core'; +import { CacheService } from '@delon/cache'; +import { NzMessageService } from 'ng-zorro-antd'; +import { Subscription } from 'rxjs'; + +@Component({ + selector: 'app-demo', + template: ` +

value: {{ value | json }}

+
+ Basic: + + + + +
+
+ Key is valid request: + +
+
+ Notify: + + +
+ `, +}) +export class DemoComponent implements OnDestroy { + value: any; + key = 'demo'; + private notify$: Subscription; + + get newValue() { + return +new Date(); + } + + constructor(public srv: CacheService, private msg: NzMessageService) {} + + getByHttp() { + this.srv.get(`https://randomuser.me/api/?results=1`).subscribe(res => { + this.value = res; + }); + } + + registerNotify() { + if (this.notify$) this.notify$.unsubscribe(); + this.notify$ = this.srv.notify(this.key).subscribe(res => { + if (res == null) { + this.msg.success('register success'); + return; + } + this.msg.warning(`"${this.key}" new status: ${res.type}`); + }); + } + + unRegisterNotify() { + this.srv.cancelNotify(this.key); + } + + ngOnDestroy() { + if (this.notify$) this.notify$.unsubscribe(); + } +} +``` diff --git a/packages/cache/src/cache.service.ts b/packages/cache/src/cache.service.ts index dc1fde1c46..ce3d03cf46 100644 --- a/packages/cache/src/cache.service.ts +++ b/packages/cache/src/cache.service.ts @@ -42,7 +42,7 @@ export class CacheService implements OnDestroy { return path.reduce((o, k) => o[k], obj) || defaultValue; } - // region: meta + // #region meta private pushMeta(key: string) { if (this.meta.has(key)) return; @@ -73,9 +73,9 @@ export class CacheService implements OnDestroy { return this.meta; } - // endregion + // #endregion - // region: set + // #region set /** * 持久化缓存 `Observable` 对象，例如： @@ -158,9 +158,9 @@ export class CacheService implements OnDestroy { this.runNotify(key, 'set'); } - // endregion + // #endregion - // region: get + // #region get /** 获取缓存数据，若 `key` 不存在则 `key` 作为HTTP请求缓存后返回 */ get( @@ -286,18 +286,18 @@ export class CacheService implements OnDestroy { return of(ret); } - // endregion + // #endregion - // region: has + // #region has /** 是否缓存 `key` */ has(key: string): boolean { return this.memory.has(key) || this.meta.has(key); } - // endregion + // #endregion - // region: remove + // #region remove private _remove(key: string, needNotify: boolean) { if (needNotify) this.runNotify(key, 'remove'); @@ -321,9 +321,9 @@ export class CacheService implements OnDestroy { this.meta.forEach(key => this.store.remove(this.options.prefix + key)); } - // endregion + // #endregion - // region: notify + // #region notify /** * 设置监听频率，单位：毫秒且最低 `20ms`，默认：`3000ms` @@ -400,7 +400,7 @@ export class CacheService implements OnDestroy { this.notifyBuffer.clear(); } - // endregion + // #endregion ngOnDestroy(): void { this.memory.clear(); diff --git a/packages/chart/chart.module.ts b/packages/chart/chart.module.ts index 9e0074d1ae..49dd3f4620 100644 --- a/packages/chart/chart.module.ts +++ b/packages/chart/chart.module.ts @@ -1,6 +1,6 @@ import { NgModule, ModuleWithProviders } from '@angular/core'; -// region: all modules +// #region all modules import { G2BarModule } from '@delon/chart/bar'; import { G2CardModule } from '@delon/chart/card'; @@ -34,7 +34,7 @@ const MODULES = [ TrendModule, ]; -// endregion +// #endregion @NgModule({ imports: [ diff --git a/packages/chart/custom/custom.component.ts b/packages/chart/custom/custom.component.ts index 61e47f7334..1952462a7c 100644 --- a/packages/chart/custom/custom.component.ts +++ b/packages/chart/custom/custom.component.ts @@ -22,7 +22,7 @@ export class G2CustomComponent implements OnInit, OnDestroy { private resize$: Subscription = null; - // region: fields + // #region fields @HostBinding('style.height.px') @Input() @@ -42,7 +42,7 @@ export class G2CustomComponent implements OnInit, OnDestroy { @Output() destroy: EventEmitter = new EventEmitter(); - // endregion + // #endregion constructor(private el: ElementRef) {} diff --git a/packages/form/src/model/array.property.ts b/packages/form/src/model/array.property.ts index d1ec2d872a..2f61593325 100644 --- a/packages/form/src/model/array.property.ts +++ b/packages/form/src/model/array.property.ts @@ -84,7 +84,7 @@ export class ArrayProperty extends PropertyGroup { else this._objErrors = {}; } - // region: actions + // #region actions add(value: any): FormProperty { const newProperty = this.addProperty(value); @@ -99,5 +99,5 @@ export class ArrayProperty extends PropertyGroup { this.updateValueAndValidity(false, true); } - // endregion + // #endregion } diff --git a/packages/form/src/model/form.property.ts b/packages/form/src/model/form.property.ts index 4f2cacdf57..ef0d7fe6e6 100644 --- a/packages/form/src/model/form.property.ts +++ b/packages/form/src/model/form.property.ts @@ -169,7 +169,7 @@ export abstract class FormProperty { return property; } - // region: process errors + // #region process errors private isEmptyData(value: any) { if (isBlank(value)) return true; @@ -285,9 +285,9 @@ export abstract class FormProperty { this.setErrors(platErrors, false); } - // endregion + // #endregion - // region: condition + // #region condition private setVisible(visible: boolean) { this._visible = visible; @@ -342,7 +342,7 @@ export abstract class FormProperty { } } - // endregion + // #endregion } export abstract class PropertyGroup extends FormProperty { diff --git a/packages/form/src/module.ts b/packages/form/src/module.ts index 074c631bc5..e9cf956957 100644 --- a/packages/form/src/module.ts +++ b/packages/form/src/module.ts @@ -24,7 +24,7 @@ const COMPONENTS = [ SFFixedDirective, ]; -// region: widgets +// #region widgets import { WidgetRegistry } from './widget.factory'; import { NzWidgetRegistry } from './widgets/nz-widget.registry'; @@ -76,7 +76,7 @@ const WIDGETS = [ TextWidget, ]; -// endregion +// #endregion @NgModule({ imports: [CommonModule, FormsModule, DelonUtilModule, DelonLocaleModule, NgZorroAntdModule], diff --git a/packages/form/src/sf-item.component.ts b/packages/form/src/sf-item.component.ts index ecf1cf7d94..6bb8af6bd2 100644 --- a/packages/form/src/sf-item.component.ts +++ b/packages/form/src/sf-item.component.ts @@ -24,15 +24,11 @@ export class SFItemComponent implements OnInit, OnChanges, OnDestroy { private ref: ComponentRef; widget: Widget = null; - // region: fields - @Input() formProperty: FormProperty; @ViewChild('target', { read: ViewContainerRef }) container: ViewContainerRef; - // endregion - constructor( private widgetFactory: WidgetFactory, private terminator: TerminatorService, diff --git a/packages/mock/src/mock.service.ts b/packages/mock/src/mock.service.ts index 68b1c8d0e0..2fe1af5409 100644 --- a/packages/mock/src/mock.service.ts +++ b/packages/mock/src/mock.service.ts @@ -11,7 +11,7 @@ export class MockService implements OnDestroy { delete this.config.data; } - // region: parse rule + // #region parse rule private applyMock() { this.cached = []; @@ -118,7 +118,7 @@ export class MockService implements OnDestroy { throw error; } - // endregion + // #endregion getRule(method: string, url: string): MockRule { method = (method || 'GET').toUpperCase(); diff --git a/packages/schematics/application/files/src/app/shared/shared.module.ts b/packages/schematics/application/files/src/app/shared/shared.module.ts index 444625d793..f153996ae9 100644 --- a/packages/schematics/application/files/src/app/shared/shared.module.ts +++ b/packages/schematics/application/files/src/app/shared/shared.module.ts @@ -10,19 +10,19 @@ import { DelonACLModule } from '@delon/acl'; // i18n import { TranslateModule } from '@ngx-translate/core';<% } %> -// region: third libs +// #region third libs import { NgZorroAntdModule } from 'ng-zorro-antd'; import { CountdownModule } from 'ngx-countdown'; const THIRDMODULES = [ NgZorroAntdModule, CountdownModule ]; -// endregion +// #endregion -// region: your componets & directives +// #region your componets & directives const COMPONENTS = []; const DIRECTIVES = []; -// endregion +// #endregion @NgModule({ imports: [ diff --git a/packages/schematics/application/files/src/testing/common.spec.ts b/packages/schematics/application/files/src/testing/common.spec.ts index 10b8bb760d..abaeaa0442 100644 --- a/packages/schematics/application/files/src/testing/common.spec.ts +++ b/packages/schematics/application/files/src/testing/common.spec.ts @@ -33,14 +33,11 @@ export const setUpTestBed = (moduleDef: TestModuleMetadata) => { resetTestingModule(); preventAngularFromResetting(); - // region: schemas if (!moduleDef.schemas) { moduleDef.schemas = []; } moduleDef.schemas.push(CUSTOM_ELEMENTS_SCHEMA); - // endregion - // region: imports if (!moduleDef.imports) { moduleDef.imports = []; } @@ -60,9 +57,7 @@ export const setUpTestBed = (moduleDef: TestModuleMetadata) => { }, }), );<% } %> - // endregion - // region: providers if (!moduleDef.providers) { moduleDef.providers = []; }<% if (i18n) { %> @@ -81,7 +76,6 @@ export const setUpTestBed = (moduleDef: TestModuleMetadata) => { moduleDef.providers.push(item); }, ); - // endregion TestBed.configureTestingModule(moduleDef); await TestBed.compileComponents(); diff --git a/packages/theme/docs/demo/table-rep.md b/packages/theme/docs/demo/table-rep.md new file mode 100644 index 0000000000..4bbc20bc58 --- /dev/null +++ b/packages/theme/docs/demo/table-rep.md @@ -0,0 +1,72 @@ +--- +title: + zh-CN: 基础样例 + en-US: Basic Usage +type: example +--- + +## zh-CN + +小屏幕查看效果。 + +## en-US + +Mobile screen view effect. + +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-demo', + template: ` + + + + Name + Age + Address + + + + + + Name + {{data.name}} + + + Age + {{data.age}} + + + Address + {{data.address}} + + + + + `, +}) +export class DemoComponent { + dataSet = [ + { + key: '1', + name: 'John Brown', + age: 32, + address: 'New York No. 1 Lake Park', + }, + { + key: '2', + name: 'Jim Green', + age: 42, + address: 'London No. 1 Lake Park', + }, + { + key: '3', + name: 'Joe Black', + age: 32, + address: 'Sidney No. 1 Lake Park', + }, + ]; +} +``` diff --git a/packages/theme/docs/tools.en-US.md b/packages/theme/docs/tools.en-US.md index c5bfe2f471..e176b96b65 100644 --- a/packages/theme/docs/tools.en-US.md +++ b/packages/theme/docs/tools.en-US.md @@ -350,7 +350,10 @@ Online [DEMO](https://ng-alain.github.io/ng-alain/#/style/gridmasonry)。 | Name | Description | | ---- | --- | -| `ant-table-rep` | Table responsive | +| `ant-table-rep__title` | Title | +| `ant-table-rep__hide-header-footer` | Show title or bottom when mobile screen | + +[comment]: ### nz-tag diff --git a/packages/theme/docs/tools.zh-CN.md b/packages/theme/docs/tools.zh-CN.md index f95133ef9a..bceafb00d2 100644 --- a/packages/theme/docs/tools.zh-CN.md +++ b/packages/theme/docs/tools.zh-CN.md @@ -350,7 +350,10 @@ Ant Design 是以 `14px` 为基准字号。 | 名称 | 说明 | | ---- | --- | -| `ant-table-rep` | 表格响应式 | +| `ant-table-rep__title` | 标题 | +| `ant-table-rep__hide-header-footer` | 小屏幕时才显示标题或底部 | + +[comment]: ### nz-tag diff --git a/packages/theme/src/services/http/http.client.ts b/packages/theme/src/services/http/http.client.ts index e233d90b99..b633da444f 100644 --- a/packages/theme/src/services/http/http.client.ts +++ b/packages/theme/src/services/http/http.client.ts @@ -73,7 +73,7 @@ export class _HttpClient { setTimeout(() => (this._loading = false)); } - // region: get + // #region get /** * GET：返回一个 `T` 类型 @@ -176,9 +176,9 @@ export class _HttpClient { ); } - // endregion + // #endregion - // region: post + // #region post /** * POST：返回一个 `string` 类型 @@ -272,9 +272,9 @@ export class _HttpClient { ); } - // endregion + // #endregion - // region: delete + // #region delete /** * DELETE：返回一个 `string` 类型 @@ -347,7 +347,7 @@ export class _HttpClient { ); } - // endregion + // #endregion /** * `jsonp` 请求 diff --git a/packages/theme/src/theme.module.ts b/packages/theme/src/theme.module.ts index b31087e315..b54bdf29a8 100644 --- a/packages/theme/src/theme.module.ts +++ b/packages/theme/src/theme.module.ts @@ -7,7 +7,7 @@ import { WINDOW } from './win_tokens'; import { DelonLocaleModule } from './locale/locale.module'; -// region: import +// #region import import { ALAIN_I18N_TOKEN, AlainI18NServiceFake } from './services/i18n/i18n'; import { ModalHelper } from './services/modal/modal.helper'; @@ -24,7 +24,7 @@ import { KeysPipe } from './pipes/keys/keys.pipe'; import { YNPipe } from './pipes/yn/yn.pipe'; const PIPES = [DatePipe, CNCurrencyPipe, KeysPipe, YNPipe]; -// endregion +// #endregion @NgModule({ imports: [CommonModule, RouterModule, OverlayModule], diff --git a/scripts/site/generate.ts b/scripts/site/generate.ts index cb0a3bd7ee..3d25f86d64 100644 --- a/scripts/site/generate.ts +++ b/scripts/site/generate.ts @@ -19,7 +19,9 @@ import { ModuleTemplateData, MetaOriginal, ContentTemplateData, + ExampleModules, } from './interfaces'; +import { generateExampleModule } from './utils/generate-example'; const target = process.argv[2]; const isSyncSpecific = !!target && target !== 'init'; @@ -34,6 +36,10 @@ const siteConfig = require(path.join( )) as SiteConfig; const defaultLang = siteConfig.defaultLang; +const exampleModules: ExampleModules = { + list: [], +}; + function generateModule(config: ModuleConfig) { const distPath = path.join(rootDir, config.dist); @@ -62,9 +68,70 @@ function generateModule(config: ModuleConfig) { }/zh', pathMatch: 'full' }`, ); } - modules.routes.push(`{ path: '${name}', redirectTo: '${name}/zh', pathMatch: 'full' }`); - modules.routes.push(`{ path: '${name}/:lang', component: ${componentName} }`); + modules.routes.push( + `{ path: '${name}', redirectTo: '${name}/zh', pathMatch: 'full' }`, + ); + modules.routes.push( + `{ path: '${name}/:lang', component: ${componentName} }`, + ); + } + } + + function fixMDClass(fileObject: any) { + const contentObj = fileObject.item.content; + Object.keys(contentObj).forEach(lan => { + contentObj[lan].content = `
${contentObj[lan].content}
`; + }); + } + + function fixDemo(fileObject: any, demos: any) { + const demoHTML: string[] = []; + demoHTML.push(``); + if (demos.tpl.left.length > 0 && demos.tpl.right.length > 0) { + demoHTML.push( + `${demos.tpl.left.join('')}`, + ); + demoHTML.push( + `${demos.tpl.right.join('')}`, + ); + } else { + demoHTML.push( + `${demos.tpl.left.join( + '', + )}${demos.tpl.right.join('')}`, + ); } + + demoHTML.push(''); + fileObject.demos = demoHTML.join(''); + + fixMDClass(fileObject); + } + + function fixExample(fileObject: any, demos: any) { + const contentObj = fileObject.item.content; + Object.keys(contentObj).forEach(lan => { + const demoArr = contentObj[lan].content.split(/()/g); + if (demoArr.length > 1) { + contentObj[lan].content = demoArr.map(html => { + if (html.startsWith('/g, + '', + ); + } else { + contentObj[lan].content = `
${contentObj[lan].content}
`; + } + }); + + const newList = demos.data.filter( + w => + w.type === 'example' && + exampleModules.list.filter(ew => ew.urls === w.urls).length === 0, + ); + + exampleModules.list.push(...newList); } config.dir.forEach(dirConfig => { @@ -81,7 +148,7 @@ function generateModule(config: ModuleConfig) { ); files.forEach(item => { - // region: generate document file + // #region generate document file const content = {}; const urls = {}; @@ -105,9 +172,9 @@ function generateModule(config: ModuleConfig) { }; metas.push(meta); - // endregion + // #endregion - // region: generate demo files + // #region generate demo files const demos = generateDemo( rootDir, item.key, @@ -116,56 +183,47 @@ function generateModule(config: ModuleConfig) { config, siteConfig, ); - // endregion + // #endregion - // region: generate document file + // #region generate document file + const demoList = demos.data.filter(w => w.type !== 'example'); + const isDemo = demoList.length > 0; + const isExample = demos.data.filter(w => w.type === 'example').length > 0; const fileObject: ContentTemplateData = { componentName: genComponentName(config.name, meta.name), selector: genSelector(config.name, meta.name), - item: JSON.stringify({ + item: { cols: meta.cols, urls, content, - demo: demos.data.length > 0, - }), - demo: demos.tpl.left.length > 0 || demos.tpl.right.length > 0, + demo: isDemo, + } as any, + demos: '', + demo: isDemo, }; - const demoHTML: string[] = []; if (fileObject.demo) { - demoHTML.push(``); - if (demos.tpl.left.length > 0 && demos.tpl.right.length > 0) { - demoHTML.push( - `${demos.tpl.left.join('')}`, - ); - demoHTML.push( - `${demos.tpl.right.join('')}`, - ); - } else { - demoHTML.push( - `${demos.tpl.left.join( - '', - )}${demos.tpl.right.join('')}`, - ); - } - - demoHTML.push(''); + fixDemo(fileObject, demos); + } else if (isExample) { + fixExample(fileObject, demos); + } else { + fixMDClass(fileObject); } - fileObject.demos = demoHTML.join(''); - fileObject.codes = JSON.stringify(demos.data); + fileObject.codes = JSON.stringify(demoList); + fileObject.item = JSON.stringify(fileObject.item); generateDoc(fileObject, tpl, path.join(distPath, item.key, `index.ts`)); - // endregion + // #endregion - // region: register module + // #region register module appendToModule(fileObject.componentName, item.key, 'index'); // demo - demos.data.forEach(demo => { + demoList.forEach(demo => { appendToModule(demo.componentName, item.key, demo.name, false); }); - // endregion + // #endregion }); }); - // region: generate meta file + // #region generate meta file const metaObj = Object.assign({ types: [] }, includeAttributes(config, {})); metaObj.list = metas; @@ -175,9 +233,9 @@ function generateModule(config: ModuleConfig) { fs.readFileSync(path.join(rootDir, config.template.meta)).toString('utf8'), path.join(distPath, `meta.ts`), ); - // endregion + // #endregion - // region: generate module file + // #region generate module file const moduleObj: ModuleTemplateData = { name: config.name, moduleName: genUpperName(config.name), @@ -192,9 +250,13 @@ function generateModule(config: ModuleConfig) { .toString('utf8'), path.join(distPath, `${config.name}.module.ts`), ); - // endregion + // #endregion } for (const m of siteConfig.modules) { generateModule(m); } + +if (exampleModules.list.length > 0) { + generateExampleModule(rootDir, siteConfig, exampleModules); +} diff --git a/scripts/site/interfaces.ts b/scripts/site/interfaces.ts index de8a8330d3..07a4518237 100644 --- a/scripts/site/interfaces.ts +++ b/scripts/site/interfaces.ts @@ -1,112 +1,121 @@ export interface SiteConfig { - /** github 项目地址 */ - github: string; - /** 默认语言 */ - defaultLang: string; - /** 语言清单 */ - langs: string[]; - /** 生成目录最大深度 */ - tocMaxDepth: number; - modules: ModuleConfig[]; + /** github 项目地址 */ + github: string; + /** 默认语言 */ + defaultLang: string; + /** 语言清单 */ + langs: string[]; + /** 生成目录最大深度 */ + tocMaxDepth: number; + template: { + examples: string; + examples_index: string; + }; + modules: ModuleConfig[]; } export interface TemplateConfig { - /** 元数据模板 */ - meta: string; - /** 内容模板 */ - content: string; - /** 模板模板 */ - module: string; + /** 元数据模板 */ + meta: string; + /** 内容模板 */ + content: string; + /** 模板模板 */ + module: string; } export interface ModuleConfig { - /** 模块名称 */ - name: string; - github: string; - /** 生成目标位置 */ - dist: string; - /** 分类数据 */ - types: { [key: string]: string }[]; - /** 默认路由 */ - defaultRoute: string; - /** 额外路由元数据 */ - extraRouteMeta?: any[]; - /** 模块名称，例如：`@delon/abc` */ - module: string; - /** 元数据包含属性 */ - metaIncludeAttributes: string[]; - /** 模板路径 */ - template: TemplateConfig; - dir: ModuleDirConfig[]; + /** 模块名称 */ + name: string; + github: string; + /** 生成目标位置 */ + dist: string; + /** 分类数据 */ + types: { [key: string]: string }[]; + /** 默认路由 */ + defaultRoute: string; + /** 额外路由元数据 */ + extraRouteMeta?: any[]; + /** 模块名称，例如：`@delon/abc` */ + module: string; + /** 元数据包含属性 */ + metaIncludeAttributes: string[]; + /** 模板路径 */ + template: TemplateConfig; + dir: ModuleDirConfig[]; } export interface ModuleDirConfig { - /** 源码位置 */ - src: string[]; - /** 忽略项 */ - ignores: string[]; - /** 模板路径 */ - template: TemplateConfig; - /** 是否包含子目录 */ - hasSubDir: boolean; + /** 源码位置 */ + src: string[]; + /** 忽略项 */ + ignores: string[]; + /** 模板路径 */ + template: TemplateConfig; + /** 是否包含子目录 */ + hasSubDir: boolean; } export interface Langs { - [key: string]: any; + [key: string]: any; } export interface MetaOriginal { - /** 示例顺序 */ - order: number; - /** 示例栏数 */ - cols: number; - /** 标题 */ - title: string | { [key: string]: any }; - /** 分类 */ - type: string; + /** 示例顺序 */ + order: number; + /** 示例栏数 */ + cols: number; + /** 标题 */ + title: string | { [key: string]: any }; + /** 分类 */ + type: string; - [key: string]: any; + [key: string]: any; } export interface Meta { - /** 名称 */ - name: string; - /** 是否已经包含国际化 */ - i18n: boolean; - /** 示例顺序 */ - order: number; - /** 示例栏数 */ - cols: number; - /** 原始元数据 */ - meta: MetaOriginal; + /** 名称 */ + name: string; + /** 是否已经包含国际化 */ + i18n: boolean; + /** 示例顺序 */ + order: number; + /** 示例栏数 */ + cols: number; + /** 原始元数据 */ + meta: MetaOriginal; } export interface MetaTemplateData { - data: string; + data: string; } export interface ContentTemplateData { - componentName: string; - selector: string; - /** 数据项 */ - item: string; - /** 是否有DEMO */ - demo: boolean; - /** DEMO代码 */ - demos?: string; - /** */ - codes?: string; + componentName: string; + selector: string; + /** 数据项 */ + item: string; + /** 是否有DEMO */ + demo: boolean; + /** DEMO代码 */ + demos?: string; + /** */ + codes?: string; } export interface ModuleTemplateData { - /** 名称 */ - name: string; - /** 模块名称 */ - moduleName: string; - /** 所有导入信息 */ - imports: string; - /** 所有组件名列表 */ - components: string; - /** 所有路由列表 */ - routes: string; + /** 名称 */ + name: string; + /** 模块名称 */ + moduleName: string; + /** 所有导入信息 */ + imports: string; + /** 所有组件名列表 */ + components: string; + /** 所有路由列表 */ + routes: string; +} + +export interface ExampleModules { + list: any[]; + [key: string]: any; } diff --git a/scripts/site/utils/generate-demo.ts b/scripts/site/utils/generate-demo.ts index f101ca72e4..7433c360b6 100644 --- a/scripts/site/utils/generate-demo.ts +++ b/scripts/site/utils/generate-demo.ts @@ -1,12 +1,30 @@ import * as path from 'path'; import * as fs from 'fs'; import * as fse from 'fs-extra'; -import { getCode, genUpperName, genUrl } from './utils'; +import { getCode, genUpperName, genUrl, generateDoc } from './utils'; import { toHtml } from './generate-md'; import { ModuleConfig, SiteConfig } from '../interfaces'; const MT = require('mark-twain'); const JsonML = require('jsonml.js/lib/utils'); +let exampleIndexTpl = null; + +function fixExample(item: any, filePath: string, config: ModuleConfig) { + item.componentIndexName = `${genUpperName( + `${config.name}-${item.name}-index`, + )}Component`; + const obj = { + selector: item.id + '-index', + demos: ` + + <${item.id}> + `, + componentName: item.componentIndexName, + item: JSON.stringify(item), + }; + generateDoc(obj, exampleIndexTpl, filePath); +} + export function generateDemo( rootDir: string, key: string, @@ -15,6 +33,11 @@ export function generateDemo( config: ModuleConfig, siteConfig: SiteConfig, ) { + if (!exampleIndexTpl) { + exampleIndexTpl = fs + .readFileSync(path.join(rootDir, siteConfig.template.examples_index)) + .toString('utf8'); + } const ret: { tpl: { left: string[]; right: string[] }; data: any[] } = { tpl: { left: [], @@ -52,6 +75,7 @@ export function generateDemo( code: ``, name: markdownData.name, urls: genUrl(rootDir, markdownData.filePath), + type: markdownData.meta.type || 'demo', }; const contentChildren = JsonML.getChildren(markdownData.content); @@ -107,7 +131,13 @@ export function generateDemo( } // replace component name - item.componentName = `${genUpperName(item.id)}Component`; + if (item.type === 'example') { + item.componentName = `${genUpperName( + `${config.name}-${markdownData.name}`, + )}Component`; + } else { + item.componentName = `${genUpperName(item.id)}Component`; + } item.code = ('' + item.code) .replace(/selector:[ ]?(['|"|`])([^'"`]+)/g, `selector: $1${item.id}`) .replace( @@ -115,13 +145,30 @@ export function generateDemo( `export class ${item.componentName}`, ); // save demo component - const filePath = path.join( + let filePath = path.join( rootDir, config.dist, key, `${markdownData.name}.ts`, ); - fse.ensureDirSync(path.dirname(filePath)); + if (item.type === 'example') { + filePath = path.join( + rootDir, + `./src/app/routes/gen/examples`, + `${markdownData.name}.ts`, + ); + fse.ensureDirSync(path.dirname(filePath)); + + // generate container component + const containerFilePath = path.join( + rootDir, + `./src/app/routes/gen/examples`, + `${markdownData.name}_index.ts`, + ); + fixExample(item, containerFilePath, config); + } else { + fse.ensureDirSync(path.dirname(filePath)); + } fs.writeFileSync(filePath, item.code, { flag: 'w+' }); // generate doc component template const pos = isTwo ? (index % 2 === 0 ? 'left' : 'right') : 'left'; diff --git a/scripts/site/utils/generate-example.ts b/scripts/site/utils/generate-example.ts new file mode 100644 index 0000000000..e810ff7ee1 --- /dev/null +++ b/scripts/site/utils/generate-example.ts @@ -0,0 +1,40 @@ +import * as path from 'path'; +import * as fs from 'fs'; +import { ExampleModules, SiteConfig } from '../interfaces'; +import { generateDoc } from './utils'; + +export function generateExampleModule( + rootDir: string, + siteConfig: SiteConfig, + options: ExampleModules, +) { + const targetDir = path.join(rootDir, `./src/app/routes/gen/examples`); + const indexFilePath = path.join(targetDir, `index.ts`); + const tpl = fs + .readFileSync(path.join(rootDir, siteConfig.template.examples)) + .toString('utf8'); + + // imports + options.imports = options.list + .map( + i => `import { ${i.componentName} } from './${i.name}'; + import { ${i.componentIndexName} } from './${i.name}_index';`, + ) + .join(`\n`); + + options.components = [ + ...options.list.map(i => i.componentName), + ...options.list.map(i => i.componentIndexName), + ].join(','); + + options.metadata = options.list + .map( + i => + `'example-${i.name}-index': { title: ${JSON.stringify( + i.meta.title, + )}, component: ${i.componentIndexName} }`, + ) + .join(`\n`); + + generateDoc(options, tpl, indexFilePath); +} diff --git a/scripts/site/utils/generate-md.ts b/scripts/site/utils/generate-md.ts index ef1d6c6463..428d095534 100644 --- a/scripts/site/utils/generate-md.ts +++ b/scripts/site/utils/generate-md.ts @@ -74,6 +74,13 @@ const converters = [highlight()].concat([ .join('')}`; }, ], + [ + (node: any) => !Array.isArray(node), + (node: any, index: number) => { + if (!node.url) return ''; + return ``; + } + ], [ () => true, (node: any) => { @@ -97,7 +104,7 @@ export function toHtml(markdownData: any, codeEscape: boolean = true) { const ret: string = pair[1](markdownData); if (codeEscape) { return ret.replace( - /
([\s\S]*)<\/code><\/pre>/g,
+      /
([\s\S]*)<\/code><\/pre>/g,
       (fullWord: any, lang: any, code: any) => {
         return `
${escapeHTML(
           code,
@@ -125,18 +132,6 @@ function fixAngular(html: string): string {
       return ~content.indexOf(``)
         ? fullWord
         : `${content.replace(`<`, `<`)}`;
-      // if (/(Observable|TemplateRef|EventEmitter)${content.replace(
-      //     /(Observable|TemplateRef|EventEmitter)`;
-      // }
-      // return fullWord
-      //   .replace(` {
+      const element = createCustomElement(EXAMPLE_COMPONENTS[key].component, {
+        injector,
+      });
+      customElements.define(key, element);
+    });
+  }
+}
diff --git a/src/app/delon.module.ts b/src/app/delon.module.ts
index 5f43a36c39..98fed3585f 100644
--- a/src/app/delon.module.ts
+++ b/src/app/delon.module.ts
@@ -11,11 +11,12 @@ import { AlainThemeModule } from '@delon/theme';
 import { DelonFormModule } from '@delon/form';
 import { DelonUtilModule } from '@delon/util';
 import { DelonChartModule } from '@delon/chart';
+import { DelonCacheModule } from '@delon/cache';
 // mock
 import { DelonMockModule } from '@delon/mock';
 import * as MOCKDATA from '../../_mock';
 
-// region: global config functions
+// #region global config functions
 
 import { LodopConfig, STConfig, DelonABCModule } from '@delon/abc';
 
@@ -32,7 +33,7 @@ export function fnLodopConfig(): LodopConfig {
   });
 }
 
-// endregion
+// #endregion
 
 @NgModule({
   imports: [
@@ -41,6 +42,7 @@ export function fnLodopConfig(): LodopConfig {
     DelonABCModule.forRoot(),
     DelonChartModule.forRoot(),
     DelonFormModule.forRoot(),
+    DelonCacheModule.forRoot(),
     DelonUtilModule.forRoot(),
     DelonMockModule.forRoot({ data: MOCKDATA }),
   ],
diff --git a/src/app/routes/dev/demo/demo.component.ts b/src/app/routes/dev/demo/demo.component.ts
index 2074dcc6ad..fbf7aaad67 100644
--- a/src/app/routes/dev/demo/demo.component.ts
+++ b/src/app/routes/dev/demo/demo.component.ts
@@ -1,83 +1,55 @@
-
 import { Component } from '@angular/core';
-import { STColumn } from '@delon/abc';
-import { NzMessageService } from 'ng-zorro-antd';
-import { DemoModalComponent } from '@shared/components/dialog/modal.component';
-import { DemoDrawerComponent } from '@shared/components/dialog/drawer.component';
 
 @Component({
   selector: 'app-demo',
   template: `
-  
+  
+    
+      
+        Name
+        Age
+        Address
+      
+    
+    
+      
+        
+          Name
+          {{data.name}}
+        
+        
+          Age
+          {{data.age}}
+        
+        
+          Address
+          {{data.address}}
+        
+      
+    
+  
   `,
 })
 export class DemoComponent {
-  constructor(private message: NzMessageService) {}
-
-  users: any[] = Array(10)
-    .fill({})
-    .map((item: any, idx: number) => {
-      return {
-        id: idx + 1,
-        name: `name ${idx + 1}`,
-        age: Math.ceil(Math.random() * 10) + 20,
-      };
-    });
-  columns: STColumn[] = [
-    { title: '编号', index: 'id' },
-    { title: '姓名', index: 'name' },
-    { title: '年龄', index: 'age' },
+  dataSet = [
+    {
+      key: '1',
+      name: 'John Brown',
+      age: 32,
+      address: 'New York No. 1 Lake Park',
+    },
+    {
+      key: '2',
+      name: 'Jim Green',
+      age: 42,
+      address: 'London No. 1 Lake Park',
+    },
     {
-      title: '操作区',
-      buttons: [
-        {
-          text: '删除',
-          type: 'del',
-          click: (record: any) =>
-            this.message.success(`成功删除【${record.name}】`),
-          iif: (item: any) => item.id % 2 === 0,
-        },
-        {
-          text: '编辑',
-          type: 'modal',
-          modal: {
-            component: DemoModalComponent
-          },
-          click: (record: any, modal: any) =>
-            this.message.success(
-              `重新加载页面，回传值：${JSON.stringify(modal)}`,
-            ),
-        },
-        {
-          text: 'Drawer',
-          type: 'drawer',
-          drawer: {
-            title: '编辑',
-            component: DemoDrawerComponent
-          },
-          click: (record: any, modal: any) =>
-            this.message.success(
-              `重新加载页面，回传值：${JSON.stringify(modal)}`,
-            ),
-        },
-        {
-          text: '更多',
-          children: [
-            {
-              text: `过期`,
-              click: (record: any) =>
-                this.message.error(`过期【${record.name}】`),
-              format: (record: any) =>
-                ` 过期`,
-            },
-            {
-              text: `重新开始`,
-              click: (record: any) =>
-                this.message.success(`重新开始【${record.name}】`),
-            },
-          ],
-        },
-      ],
+      key: '3',
+      name: 'Joe Black',
+      age: 32,
+      address: 'Sidney No. 1 Lake Park',
     },
   ];
-}
\ No newline at end of file
+}
diff --git a/src/app/routes/dev/dev.module.ts b/src/app/routes/dev/dev.module.ts
index 92d59cee0a..0afe2a2ed5 100644
--- a/src/app/routes/dev/dev.module.ts
+++ b/src/app/routes/dev/dev.module.ts
@@ -7,8 +7,6 @@ import { DevLayoutComponent } from './layout.component';
 import { DevHomeComponent } from './home/home.component';
 import { DevPageComponent } from './pages/page.component';
 
-// region: components
-
 const COMPONENTS = [
   DevLayoutComponent,
   DevHomeComponent,
@@ -38,7 +36,6 @@ const routes: Routes = [
     ],
   },
 ];
-// endregion
 
 @NgModule({
   imports: [SharedModule, RouterModule.forChild(routes)],
diff --git a/src/app/routes/form-pages/form-pages.module.ts b/src/app/routes/form-pages/form-pages.module.ts
index 0b5ba1deff..e0546b69cb 100644
--- a/src/app/routes/form-pages/form-pages.module.ts
+++ b/src/app/routes/form-pages/form-pages.module.ts
@@ -6,7 +6,6 @@ import { SharedModule } from '../../shared/shared.module';
 import { ContentComponent } from '../../shared/components/content/content.component';
 import { FormValidatorComponent } from './validator/validator.component';
 
-// region: components
 const COMPONENTS = [FormValidatorComponent];
 
 const routes: Routes = [
@@ -22,7 +21,6 @@ const routes: Routes = [
     ],
   },
 ];
-// endregion
 
 @NgModule({
   imports: [SharedModule, AceEditorModule, RouterModule.forChild(routes)],
diff --git a/src/app/routes/routes.module.ts b/src/app/routes/routes.module.ts
index d4d40d92e4..fe79bfc070 100644
--- a/src/app/routes/routes.module.ts
+++ b/src/app/routes/routes.module.ts
@@ -21,7 +21,7 @@ const routes = [
       { path: 'zh', component: HomeComponent, data: { titleI18n: 'slogan' } },
       { path: 'en', component: HomeComponent, data: { titleI18n: 'slogan' } },
       { path: 'tools', loadChildren: './tools/tools.module#ToolsModule' },
-      // region: region routers
+      // #region region routers
       { path: 'docs', loadChildren: './gen/docs/docs.module#DocsModule' },
       {
         path: 'components',
@@ -40,7 +40,7 @@ const routes = [
         loadChildren: './form-pages/form-pages.module#FormPagesModule',
       },
       { path: 'cli', loadChildren: './gen/cli/cli.module#CliModule' },
-      // endregion
+      // #endregion
     ],
   },
   { path: '404', component: NotFoundComponent },
diff --git a/src/app/routes/tools/tools.module.ts b/src/app/routes/tools/tools.module.ts
index 9ea9e74391..4ee4da2194 100644
--- a/src/app/routes/tools/tools.module.ts
+++ b/src/app/routes/tools/tools.module.ts
@@ -5,7 +5,6 @@ import { ColorSketchModule } from 'ngx-color/sketch';
 import { SharedModule } from '../../shared/shared.module';
 import { SixToSevenEditorComponent } from './6to7/editor/editor.component';
 
-// region: components
 
 const COMPONENTS = [SixToSevenEditorComponent];
 
@@ -16,7 +15,6 @@ const routes: Routes = [
     data: { titleI18n: 'app.header.menu.upgrade' },
   },
 ];
-// endregion
 
 @NgModule({
   imports: [SharedModule, ColorSketchModule, RouterModule.forChild(routes)],
diff --git a/src/app/shared/components/docs/docs.component.html b/src/app/shared/components/docs/docs.component.html
index 8c0ca8b00b..7c149f5f70 100644
--- a/src/app/shared/components/docs/docs.component.html
+++ b/src/app/shared/components/docs/docs.component.html
@@ -18,10 +18,10 @@ 

     
     
   

-  

-  

 
+

 
+  

   
 
-

+

diff --git a/src/app/shared/components/docs/docs.component.ts b/src/app/shared/components/docs/docs.component.ts
index aa2f138bc4..e87ebd0038 100644
--- a/src/app/shared/components/docs/docs.component.ts
+++ b/src/app/shared/components/docs/docs.component.ts
@@ -48,7 +48,6 @@ export class DocsComponent implements OnInit, OnDestroy {
       con: item.content[this.i18n.lang] || item.content[this.i18n.defaultLang],
     };
 
-    // region: demo toc
     if (ret.demo && this.codes && this.codes.length) {
       this.genDemoTitle();
       const toc = ret.con.toc as any[];
@@ -73,7 +72,6 @@ export class DocsComponent implements OnInit, OnDestroy {
         ),
       );
     }
-    // endregion
 
     if (ret.con.content)
       ret.con.content = this.sanitizer.bypassSecurityTrustHtml(ret.con.content);
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index f2cf8e99f0..ad58e9548e 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -10,6 +10,7 @@ import { DelonACLModule } from '@delon/acl';
 import { DelonFormModule } from '@delon/form';
 import { DelonChartModule } from '@delon/chart';
 import { DelonMockModule } from '@delon/mock';
+import { DelonCacheModule } from '@delon/cache';
 
 import { NgZorroAntdModule } from 'ng-zorro-antd';
 import { TranslateModule } from '@ngx-translate/core';
@@ -66,6 +67,7 @@ const THIRDS = [
     DelonACLModule,
     DelonFormModule,
     DelonChartModule,
+    DelonCacheModule,
     DelonMockModule.forChild(),
     ...THIRDS,
   ],
@@ -82,6 +84,7 @@ const THIRDS = [
     DelonACLModule,
     DelonFormModule,
     DelonChartModule,
+    DelonCacheModule,
     ...THIRDS,
     ...COMPONENTS,
   ],
diff --git a/src/polyfills.ts b/src/polyfills.ts
index 20d40751a6..482fd78718 100644
--- a/src/polyfills.ts
+++ b/src/polyfills.ts
@@ -58,7 +58,8 @@ import 'core-js/es7/reflect';
  * Zone JS is required by Angular itself.
  */
 import 'zone.js/dist/zone';  // Included with Angular CLI.
-
+import '@webcomponents/custom-elements'; //  Custom Elements Polyfill
+import '@webcomponents/custom-elements/src/native-shim';
 
 
 /***************************************************************************************************
diff --git a/src/site.config.js b/src/site.config.js
index 5519d1112d..d242fa2cad 100644
--- a/src/site.config.js
+++ b/src/site.config.js
@@ -2,6 +2,10 @@ module.exports = {
   defaultLang: 'zh-CN',
   langs: ['zh-CN', 'en-US'],
   tocMaxDepth: 3, // toc max depth
+  template: {
+    examples: './src/templates/examples.ts',
+    examples_index: './src/templates/examples_index.ts',
+  },
   modules: [
     {
       name: 'docs',
diff --git a/src/templates/examples.ts b/src/templates/examples.ts
new file mode 100644
index 0000000000..6c145c56c8
--- /dev/null
+++ b/src/templates/examples.ts
@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../../../shared/shared.module';
+
+{{{imports}}}
+
+export interface LiveExample {
+  title: any;
+  component: any;
+  additionalFiles?: string[];
+  selectorName?: string;
+}
+
+export const EXAMPLE_COMPONENTS: {[key: string]: LiveExample} = {
+  {{{metadata}}}
+};
+
+export const EXAMPLE_LIST = [
+  {{{components}}}
+];
+
+@NgModule({
+  imports: [ SharedModule ],
+  declarations: EXAMPLE_LIST,
+  entryComponents: EXAMPLE_LIST,
+})
+export class ExampleModule { }
diff --git a/src/templates/examples_index.ts b/src/templates/examples_index.ts
new file mode 100644
index 0000000000..defc68b660
--- /dev/null
+++ b/src/templates/examples_index.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: `{{selector}}`,
+    template: `{{{demos}}}`,
+    styles: [ `:host { display: block } `]
+})
+export class {{componentName}} {
+    item: any = {{{item}}};
+}
diff --git a/src/templates/module.ts b/src/templates/module.ts
index c442d05f12..44ce9e63bd 100644
--- a/src/templates/module.ts
+++ b/src/templates/module.ts
@@ -3,7 +3,7 @@ import { Routes, RouterModule } from '@angular/router';
 import { SharedModule } from '../../../shared/shared.module';
 import { ContentComponent } from '../../../shared/components/content/content.component';
 
-// region: components
+// #region components
 {{{imports}}}
 const COMPONENTS = [{{{components}}}];
 
@@ -16,7 +16,7 @@ const routes: Routes = [
         ]
     }
 ];
-// endregion
+// #endregion
 
 @NgModule({
     imports: [