添加zorro,alain样例

_mock/_rule.ts

@@ -10,7 +10,7 @@ for (let i = 0; i < 46; i += 1) {
     href: 'https://ant.design',
     avatar: [
       'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
-      'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
+      'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png'
     ][i % 2],
     no: `TradeCode ${i}`,
     title: `一个任务名称 ${i}`,
@@ -20,11 +20,11 @@ for (let i = 0; i < 46; i += 1) {
     status: Math.floor(Math.random() * 10) % 4,
     updatedAt: new Date(`2017-07-${i < 18 ? '0' + (Math.floor(i / 2) + 1) : Math.floor(i / 2) + 1}`),
     createdAt: new Date(`2017-07-${i < 18 ? '0' + (Math.floor(i / 2) + 1) : Math.floor(i / 2) + 1}`),
-    progress: Math.ceil(Math.random() * 100),
+    progress: Math.ceil(Math.random() * 100)
   });
 }
 
-function getRule(params: any): any[] {
+function getRule(params: any): any {
   let ret = [...list];
   if (params.sorter) {
     const s = params.sorter.split('_');
@@ -36,22 +36,23 @@ function getRule(params: any): any[] {
     });
   }
   if (params.statusList && params.statusList.length > 0) {
-    ret = ret.filter((data) => params.statusList.indexOf(data.status) > -1);
+    ret = ret.filter(data => params.statusList.indexOf(data.status) > -1);
   }
   if (params.no) {
-    ret = ret.filter((data) => data.no.indexOf(params.no) > -1);
+    ret = ret.filter(data => data.no.indexOf(params.no) > -1);
   }
-  return ret;
+  return { data: ret, success: true };
 }
 
-function removeRule(nos: string): boolean {
+function removeRule(nos: string): any {
-  nos.split(',').forEach((no) => {
+  nos.split(',').forEach(no => {
-    const idx = list.findIndex((w) => w.no === no);
+    const idx = list.findIndex(w => w.no === no);
     if (idx !== -1) {
       list.splice(idx, 1);
     }
   });
-  return true;
+  
+  return { data: true, success: true };
 }
 
 function saveRule(description: string): void {
@@ -61,7 +62,7 @@ function saveRule(description: string): void {
     href: 'https://ant.design',
     avatar: [
       'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
-      'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
+      'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png'
     ][i % 2],
     no: `TradeCode ${i}`,
     title: `一个任务名称 ${i}`,
@@ -71,12 +72,12 @@ function saveRule(description: string): void {
     status: Math.floor(Math.random() * 10) % 2,
     updatedAt: new Date(),
     createdAt: new Date(),
-    progress: Math.ceil(Math.random() * 100),
+    progress: Math.ceil(Math.random() * 100)
   });
 }
 
 export const RULES = {
-  '/rule': (req: MockRequest) => getRule(req.queryString),
+  'POST /rule': (req: MockRequest) => getRule(req.queryString),
-  'DELETE /rule': (req: MockRequest) => removeRule(req.queryString.nos),
+  'POST /delete/rule': (req: MockRequest) => removeRule(req.body.nos),
-  'POST /rule': (req: MockRequest) => saveRule(req.body.description),
+  // 'POST /rule': (req: MockRequest) => saveRule(req.body.description)
 };

src/app/app.module.ts

@@ -7,7 +7,8 @@ import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { SimpleInterceptor } from '@delon/auth';
 import { NzNotificationModule } from 'ng-zorro-antd/notification';
-
+import zh from '@angular/common/locales/zh';
+registerLocaleData(zh);
 // #region global third module
 
 import { BidiModule } from '@angular/cdk/bidi';
@@ -50,6 +51,7 @@ import { RoutesModule } from './routes/routes.module';
 import { SharedModule } from './shared/shared.module';
 import { STWidgetModule } from './shared/widget/st-widget.module';
 import { Observable } from 'rxjs';
+import { registerLocaleData } from '@angular/common';
 
 @NgModule({
   declarations: [AppComponent],

src/app/routes/dashboard/dashboard.component.html

@@ -1,109 +1,9 @@
-<page-header [title]="'查询表格'"></page-header>
+<div class="modal-header">
-<nz-card [nzBordered]="false">
+  <div class="modal-title">编辑 {{ record.id }} 信息</div>
-  <form nz-form [nzLayout]="'inline'" (ngSubmit)="getData()" class="search__form">
+</div>
-    <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
+<sf  #sf mode="edit" [schema]="schema" [ui]="ui" [formData]="i" button="none">
-      <div nz-col nzMd="8" nzSm="24">
+  <div class="modal-footer">
-        <nz-form-item>
+    <button nz-button type="button" (click)="close()">关闭</button>
-          <nz-form-label nzFor="no">规则编号</nz-form-label>
+    <button nz-button type="submit" nzType="primary" (click)="save(sf.value)" [disabled]="!sf.valid" [nzLoading]="http.loading">保存</button>
-          <nz-form-control>
-            <input nz-input [(ngModel)]="q.no" name="no" placeholder="请输入" id="no" />
-          </nz-form-control>
-        </nz-form-item>
-      </div>
-      <div nz-col nzMd="8" nzSm="24">
-        <nz-form-item>
-          <nz-form-label nzFor="status">使用状态</nz-form-label>
-          <nz-form-control>
-            <nz-select [(ngModel)]="q.status" name="status" id="status" [nzPlaceHolder]="'请选择'" [nzShowSearch]="true">
-              <nz-option *ngFor="let i of status; let idx = index" [nzLabel]="i.text" [nzValue]="idx"></nz-option>
-            </nz-select>
-          </nz-form-control>
-        </nz-form-item>
-      </div>
-      <div nz-col nzMd="8" nzSm="24" *ngIf="expandForm">
-        <nz-form-item>
-          <nz-form-label nzFor="callNo">调用次数</nz-form-label>
-          <nz-form-control>
-            <input nz-input id="callNo" />
-          </nz-form-control>
-        </nz-form-item>
-      </div>
-      <div nz-col nzMd="8" nzSm="24" *ngIf="expandForm">
-        <nz-form-item>
-          <nz-form-label nzFor="updatedAt">更新日期</nz-form-label>
-          <nz-form-control>
-            <nz-date-picker id="updatedAt"></nz-date-picker>
-          </nz-form-control>
-        </nz-form-item>
-      </div>
-      <div nz-col nzMd="8" nzSm="24" *ngIf="expandForm">
-        <nz-form-item>
-          <nz-form-label nzFor="status2">使用状态</nz-form-label>
-          <nz-form-control>
-            <nz-select [nzPlaceHolder]="'请选择'" nzId="status2" [nzShowSearch]="true">
-              <nz-option *ngFor="let i of status; let idx = index" [nzLabel]="i.text" [nzValue]="idx"></nz-option>
-            </nz-select>
-          </nz-form-control>
-        </nz-form-item>
-      </div>
-      <div nz-col nzMd="8" nzSm="24" *ngIf="expandForm">
-        <nz-form-item>
-          <nz-form-label nzFor="status3">使用状态</nz-form-label>
-          <nz-form-control>
-            <nz-select [nzPlaceHolder]="'请选择'" nzId="status3" [nzShowSearch]="true">
-              <nz-option *ngFor="let i of status; let idx = index" [nzLabel]="i.text" [nzValue]="idx"></nz-option>
-            </nz-select>
-          </nz-form-control>
-        </nz-form-item>
-      </div>
-      <div nz-col [nzSpan]="expandForm ? 24 : 8" [class.text-right]="expandForm">
-        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="loading">查询</button>
-        <button nz-button type="reset" (click)="reset()" class="mx-sm">重置</button>
-        <a (click)="expandForm = !expandForm">
-          {{ expandForm ? '收起' : '展开' }}
-          <i nz-icon [nzType]="expandForm ? 'up' : 'down'"></i>
-        </a>
-      </div>
-    </div>
-  </form>
-  <button nz-button (click)="add(modalContent)" [nzType]="'primary'">
-    <i nz-icon nzType="plus"></i>
-    <span>新建</span>
-  </button>
-  <ng-container *ngIf="selectedRows.length > 0">
-    <button nz-button>批量操作</button>
-    <button nz-button nz-dropdown [nzDropdownMenu]="batchMenu" nzPlacement="bottomLeft">
-      更多操作
-      <i nz-icon nzType="down"></i>
-    </button>
-    <nz-dropdown-menu #batchMenu="nzDropdownMenu">
-      <ul nz-menu>
-        <li nz-menu-item (click)="remove()">删除</li>
-        <li nz-menu-item (click)="approval()">批量审批</li>
-      </ul>
-    </nz-dropdown-menu>
-  </ng-container>
-  <div class="my-md">
-    <nz-alert [nzType]="'info'" [nzShowIcon]="true" [nzMessage]="message">
-      <ng-template #message>
-        已选择
-        <strong class="text-primary">{{ selectedRows.length }}</strong> 项&nbsp;&nbsp; 服务调用总计 <strong>{{ totalCallNo
-          }}</strong> 万
-        <a *ngIf="totalCallNo > 0" (click)="st.clearCheck()" class="ml-lg">清空</a>
-      </ng-template>
-    </nz-alert>
   </div>
-  <st #st [columns]="columns" [data]="data" [loading]="loading" (change)="stChange($event)">
+</sf>
-    <ng-template st-row="status" let-i>
-      <nz-badge [nzStatus]="i.statusType" [nzText]="i.statusText"></nz-badge>
-    </ng-template>
-  </st>
-</nz-card>
-<ng-template #modalContent>
-  <nz-form-item>
-    <nz-form-label nzFor="no">描述</nz-form-label>
-    <nz-form-control>
-      <input nz-input [(ngModel)]="description" name="description" placeholder="请输入" id="no" />
-    </nz-form-control>
-  </nz-form-item>
-</ng-template>

src/app/routes/dashboard/dashboard.component.ts

@@ -1,9 +1,10 @@
 import { Component, ChangeDetectionStrategy, ChangeDetectorRef, TemplateRef, ViewChild } from '@angular/core';
 import { STComponent, STColumn, STData, STChange } from '@delon/abc/st';
+import { SFSchema, SFUISchema } from '@delon/form';
 import { _HttpClient } from '@delon/theme';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 import { NzMessageService } from 'ng-zorro-antd/message';
-import { NzModalService } from 'ng-zorro-antd/modal';
+import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
 import { map, tap } from 'rxjs/operators';
 
 @Component({
@@ -13,154 +14,53 @@ import { map, tap } from 'rxjs/operators';
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DashboardComponent {
-  q: {
+  @ViewChild('sf')
-    pi: number;
+  sf!: SFSchema;
-    ps: number;
+  record: any = {};
-    no: string;
+  i: any;
-    sorter: string;
+  schema: any = {
-    status: number | null;
+    properties: {
-    statusList: NzSafeAny[];
+      no: { type: 'string', title: '编号' },
-  } = {
+      owner: { type: 'string', title: '姓名' },
-    pi: 1,
+      callNo: { type: 'number', title: '调用次数' },
-    ps: 10,
+      href: { type: 'string', title: '链接', format: 'uri', ui: { errors: { uri: '11' } } },
-    no: '',
+      description: { type: 'string', title: '描述' }
-    sorter: '',
+    },
-    status: null,
+    required: ['owner', 'callNo', 'href', 'description']
-    statusList: []
   };
-  data: any[] = [];
+  ui: SFUISchema = {
-  loading = false;
+    '*': {
-  status = [
+      spanLabelFixed: 100,
-    { index: 0, text: '关闭', value: false, type: 'default', checked: false },
+      grid: { span: 12 }
-    {
-      index: 1,
-      text: '运行中',
-      value: false,
-      type: 'processing',
-      checked: false
     },
-    { index: 2, text: '已上线', value: false, type: 'success', checked: false },
+    $no: {
-    { index: 3, text: '异常', value: false, type: 'error', checked: false }
+      widget: 'text'
-  ];
-  @ViewChild('st', { static: true })
-  st!: STComponent;
-  columns: STColumn[] = [
-    { title: '', index: 'key', type: 'checkbox' },
-    { title: '规则编号', index: 'no' },
-    { title: '描述', index: 'description' },
-    {
-      title: '服务调用次数',
-      index: 'callNo',
-      type: 'number',
-      format: item => `${item.callNo} 万`,
-      sort: {
-        compare: (a, b) => a.callNo - b.callNo
-      }
     },
-    {
+    $href: {
-      title: '状态',
+      widget: 'string'
-      index: 'status',
-      render: 'status',
-      filter: {
-        menus: this.status,
-        fn: (filter, record) => record.status === filter.index
-      }
     },
-    {
+    $description: {
-      title: '更新时间',
+      widget: 'textarea',
-      index: 'updatedAt',
+      grid: { span: 24 }
-      type: 'date',
-      sort: {
-        compare: (a, b) => a.updatedAt - b.updatedAt
-      }
-    },
-    {
-      title: '操作',
-      buttons: [
-        {
-          text: '配置',
-          click: item => this.msg.success(`配置${item.no}`)
-        },
-        {
-          text: '订阅警报',
-          click: item => this.msg.success(`订阅警报${item.no}`)
-        }
-      ]
     }
-  ];
+  };
-  selectedRows: STData[] = [];
-  description = '';
-  totalCallNo = 0;
-  expandForm = false;
 
-  constructor(private http: _HttpClient, public msg: NzMessageService, private modalSrv: NzModalService, private cdr: ChangeDetectorRef) {}
+  constructor(private msgSrv: NzMessageService, public http: _HttpClient) {}
 
   ngOnInit(): void {
-    this.getData();
+    // if (this.record.id > 0) this.http.get(`/user/${this.record.id}`).subscribe(res => (this.i = res));
   }
 
-  getData(): void {
+  save(value: any): void {
-    this.loading = true;
+    console.log(this.sf.value);
-    this.q.statusList = this.status.filter(w => w.checked).map(item => item.index);
+
-    if (this.q.status !== null && this.q.status > -1) {
+    // this.http.post(`/user/${this.record.id}`, value).subscribe(res => {
-      this.q.statusList.push(this.q.status);
+    //   this.msgSrv.success('保存成功');
-    }
+    //   // this.modal.close(true);
-    this.http
+    // });
-      .get('/rule?_allow_anonymous=true', this.q)
-      .pipe(
-        map((list: Array<{ status: number; statusText: string; statusType: string }>) =>
-          list.map(i => {
-            const statusItem = this.status[i.status];
-            i.statusText = statusItem.text;
-            i.statusType = statusItem.type;
-            return i;
-          })
-        ),
-        tap(() => (this.loading = false))
-      )
-      .subscribe(res => {
-        this.data = res;
-        this.cdr.detectChanges();
-      });
   }
 
-  stChange(e: STChange): void {
+  close(): void {
-    switch (e.type) {
+    // this.modal.destroy();
-      case 'checkbox':
-        this.selectedRows = e.checkbox!;
-        this.totalCallNo = this.selectedRows.reduce((total, cv) => total + cv.callNo, 0);
-        this.cdr.detectChanges();
-        break;
-      case 'filter':
-        this.getData();
-        break;
-    }
-  }
-
-  remove(): void {
-    this.http.delete('/rule', { nos: this.selectedRows.map(i => i.no).join(',') }).subscribe(() => {
-      this.getData();
-      this.st.clearCheck();
-    });
-  }
-
-  approval(): void {
-    this.msg.success(`审批了 ${this.selectedRows.length} 笔`);
-  }
-
-  add(tpl: TemplateRef<{}>): void {
-    this.modalSrv.create({
-      nzTitle: '新建规则',
-      nzContent: tpl,
-      nzOnOk: () => {
-        this.loading = true;
-        this.http.post('/rule', { description: this.description }).subscribe(() => this.getData());
-      }
-    });
-  }
-
-  reset(): void {
-    // wait form reset updated finished
-    setTimeout(() => this.getData());
   }
 }

src/app/routes/demo/components/alian-demo/alian-demo.component.html

@@ -0,0 +1,44 @@
+<page-header-wrapper title="Alain案例">
+</page-header-wrapper>
+<nz-card>
+    <div nz-row nzGutter="8">
+        <div nz-col [nzSpan]="_$expand ? 24 : 18">
+            <sf #sf [schema]="searchSchema" [ui]="ui" [compact]="true" [button]="'none'"></sf>
+        </div>
+        <div nz-col [nzSpan]="_$expand ? 24 : 6" [class.text-right]="_$expand">
+            <button nz-button nzType="primary" (click)="add()"> 新建</button>
+            <button nz-button nzType="primary" [nzLoading]="service.http.loading" (click)="st?.load(1)">查询</button>
+            <button nz-button (click)="resetSF()">重置</button>
+            <button nz-button nzType="link" (click)="expandToggle()">
+                {{ !_$expand ? '展开' : '收起' }}
+                <i nz-icon [nzType]="!_$expand ? 'down' : 'up'"></i>
+            </button>
+        </div>
+    </div>
+    <ng-container *ngIf="selectedRows.length > 0">
+        <button nz-button>批量操作</button>
+        <button nz-button nz-dropdown [nzDropdownMenu]="batchMenu" nzPlacement="bottomLeft">
+            更多操作
+            <i nz-icon nzType="down"></i>
+        </button>
+        <nz-dropdown-menu #batchMenu="nzDropdownMenu">
+            <ul nz-menu>
+                <li nz-menu-item (click)="remove()">删除</li>
+                <li nz-menu-item (click)="approval()">批量审批</li>
+            </ul>
+        </nz-dropdown-menu>
+    </ng-container>
+    <div class="my-md">
+        <nz-alert [nzType]="'info'" [nzShowIcon]="true" [nzMessage]="message">
+            <ng-template #message>
+                已选择
+                <strong class="text-primary">{{ selectedRows.length }}</strong> 项&nbsp;&nbsp; 服务调用总计 <strong>{{
+                    totalCallNo }}</strong> 万
+                <a *ngIf="totalCallNo > 0" (click)="st.clearCheck()" class="ml-lg">清空</a>
+            </ng-template>
+        </nz-alert>
+    </div>
+
+    <st #st [data]="url" [columns]="columns" [req]="{method:'POST'}" [res]="{reName:{list:'data'}}"
+        (change)="stChange($event)"></st>
+</nz-card>

src/app/routes/demo/components/alian-demo/alian-demo.component.less

@@ -0,0 +1,5 @@
+:host::ng-deep {
+    nz-range-picker {
+        width: 100%;
+    }
+}

src/app/routes/demo/components/alian-demo/alian-demo.component.ts

@@ -0,0 +1,206 @@
+import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { STComponent, STColumn, STChange } from '@delon/abc/st';
+import { SFComponent, SFDateWidgetSchema, SFSchema, SFUISchema } from '@delon/form';
+import { _HttpClient, ModalHelper } from '@delon/theme';
+import { NzMessageService } from 'ng-zorro-antd/message';
+import { NzModalService } from 'ng-zorro-antd/modal';
+import { DemoService } from '../../services/demo.service';
+import { DemoEditComponent } from '../zorro-demo/edit/edit.component';
+
+@Component({
+  selector: 'app-alian-demo',
+  templateUrl: './alian-demo.component.html',
+  styleUrls: ['./alian-demo.component.less']
+})
+export class AlianDemoComponent implements OnInit {
+  url = `/rule?_allow_anonymous=true`;
+
+  status = [
+    { index: 0, text: '关闭', value: false, type: 'default', checked: false },
+    {
+      index: 1,
+      text: '运行中',
+      value: false,
+      type: 'processing',
+      checked: false
+    },
+    { index: 2, text: '已上线', value: false, type: 'success', checked: false },
+    { index: 3, text: '异常', value: false, type: 'error', checked: false }
+  ];
+  @ViewChild('st', { static: true })
+  st!: STComponent;
+  @ViewChild('sf', { static: false })
+  sf!: SFComponent;
+  columns: STColumn[] = [
+    { title: '', index: 'key', type: 'checkbox' },
+    { title: '规则编号', index: 'no' },
+    { title: '描述', index: 'description' },
+    {
+      title: '服务调用次数',
+      index: 'callNo',
+      type: 'number',
+      format: item => `${item.callNo} 万`,
+      sort: {
+        compare: (a, b) => a.callNo - b.callNo
+      }
+    },
+    {
+      title: '状态',
+      index: 'status',
+      render: 'status',
+      filter: {
+        menus: this.status,
+        fn: (filter, record) => record.status === filter.index
+      }
+    },
+    {
+      title: '更新时间',
+      index: 'updatedAt',
+      type: 'date',
+      sort: {
+        compare: (a, b) => a.updatedAt - b.updatedAt
+      }
+    },
+    {
+      title: '操作',
+      buttons: [
+        {
+          text: '修改',
+          click: item => this.edit(item)
+        },
+        {
+          text: '删除',
+          click: item => this.delete(item)
+        }
+      ]
+    }
+  ];
+  searchSchema: SFSchema = {
+    properties: {
+      expand: {
+        type: 'boolean',
+        ui: {
+          hidden: true
+        }
+      },
+      orderSn: {
+        type: 'string',
+        title: '订单号',
+        ui: {
+          autocomplete: 'off'
+        }
+      },
+      receiveName: {
+        type: 'string',
+        title: '收件人'
+      },
+      receiveMobile: {
+        type: 'string',
+        title: '收件人电话'
+      },
+      tenantName: {
+        type: 'string',
+        title: '下单商家',
+        ui: {
+          visibleIf: {
+            expand: (value: boolean) => value
+          }
+        }
+      },
+      createTime: {
+        title: '下单时间',
+        type: 'string',
+        ui: {
+          widget: 'date',
+          mode: 'range',
+          format: 'yyyy-MM-dd',
+          visibleIf: {
+            expand: (value: boolean) => value
+          }
+        } as SFDateWidgetSchema
+      }
+    }
+  };
+
+  ui: SFUISchema = {
+    '*': {
+      spanLabelFixed: 90,
+      grid: { span: 8, gutter: 4 }
+    },
+    $orderSn: {
+      grid: { span: 8 }
+    },
+    $receiveName: {
+      grid: { span: 8 }
+    },
+    $createTime: { grid: { span: 8 } }
+  };
+  _$expand = false;
+
+  selectedRows: any[] = [];
+  totalCallNo = 0;
+  constructor(public service: DemoService, public msg: NzMessageService, private modal: ModalHelper) {}
+
+  ngOnInit(): void {}
+
+  stChange(e: STChange): void {
+    switch (e.type) {
+      case 'checkbox':
+        this.selectedRows = e.checkbox!;
+        this.totalCallNo = this.selectedRows.reduce((total, cv) => total + cv.callNo, 0);
+        break;
+      case 'filter':
+        this.st.load();
+        break;
+    }
+  }
+
+  remove(): void {
+    this.service.request('/delete/rule?_allow_anonymous=true', { nos: this.selectedRows.map(i => i.no).join(',') }).subscribe(() => {
+      this.st.load();
+      this.st.clearCheck();
+    });
+  }
+
+  approval(): void {
+    this.msg.success(`审批了 ${this.selectedRows.length} 笔`);
+  }
+
+  add(): void {
+    this.modal.createStatic(DemoEditComponent, { i: { id: 0 } }).subscribe(res => {
+      if (res) {
+        console.log(res);
+      }
+    });
+  }
+
+  edit(item: any) {
+    this.modal
+      .createStatic(DemoEditComponent, { i: { no: 1, owner: '22222', callNo: 111, status: 1, description: '222' } })
+      .subscribe(res => {
+        if (res) {
+          this.st.setRow(item, res);
+        }
+      });
+  }
+
+  delete(item: any) {
+    this.st.removeRow(item);
+  }
+
+  /**
+   * 重置表单
+   */
+  resetSF() {
+    this.sf.reset();
+    this._$expand = false;
+  }
+
+  /**
+   * 伸缩查询条件
+   */
+  expandToggle() {
+    this._$expand = !this._$expand;
+    this.sf?.setValue('/expand', this._$expand);
+  }
+}

src/app/routes/demo/components/zorro-demo/edit/edit.component.html

@@ -0,0 +1,10 @@
+<div class="modal-header">
+  <div class="modal-title">编辑 {{ record.id }} 信息</div>
+</div>
+<nz-spin *ngIf="!i" class="modal-spin"></nz-spin>
+<sf *ngIf="i" #sf mode="edit" [schema]="schema" [ui]="ui" [formData]="i" button="none">
+  <div class="modal-footer">
+    <button nz-button type="button" (click)="close()">关闭</button>
+    <button nz-button type="submit" nzType="primary" (click)="save(sf.value)" [disabled]="!sf.valid" [nzLoading]="http.loading">保存</button>
+  </div>
+</sf>

src/app/routes/demo/components/zorro-demo/edit/edit.component.spec.ts

@@ -0,0 +1,24 @@
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { DemoEditComponent } from './edit.component';
+
+describe('DemoEditComponent', () => {
+  let component: DemoEditComponent;
+  let fixture: ComponentFixture<DemoEditComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DemoEditComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DemoEditComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/routes/demo/components/zorro-demo/edit/edit.component.ts

@@ -0,0 +1,63 @@
+import { Component, OnInit } from '@angular/core';
+import { SFSchema, SFUISchema } from '@delon/form';
+import { _HttpClient } from '@delon/theme';
+import { NzMessageService } from 'ng-zorro-antd/message';
+import { NzModalRef } from 'ng-zorro-antd/modal';
+
+@Component({
+  selector: 'app-demo-edit',
+  templateUrl: './edit.component.html',
+})
+export class DemoEditComponent implements OnInit {
+  record: any = {};
+  i: any;
+  schema: SFSchema = {
+    properties: {
+      no: { type: 'string', title: '编号' },
+      owner: { type: 'string', title: '姓名', maxLength: 15 },
+      callNo: { type: 'number', title: '调用次数' },
+      status: { type: 'number', title: '链接' },
+      description: { type: 'string', title: '描述', maxLength: 140 },
+    },
+    required: ['owner', 'callNo', 'description'],
+  };
+  ui: SFUISchema = {
+    '*': {
+      spanLabelFixed: 100,
+      grid: { span: 12 },
+    },
+    $no: {
+      widget: 'text'
+    },
+    $href: {
+      widget: 'string',
+    },
+    $description: {
+      widget: 'textarea',
+      grid: { span: 24 },
+    },
+  };
+
+  constructor(
+    private modal: NzModalRef,
+    private msgSrv: NzMessageService,
+    public http: _HttpClient,
+  ) {}
+
+  ngOnInit(): void {
+    if (this.record.id > 0)
+    this.http.get(`/user/${this.record.id}`).subscribe(res => (this.i = res));
+  }
+
+  save(value: any): void {
+    this.modal.close(value);
+    // this.http.post(`/user/${this.record.id}`, value).subscribe(res => {
+    //   this.msgSrv.success('保存成功');
+    //   this.modal.close(true);
+    // });
+  }
+
+  close(): void {
+    this.modal.destroy();
+  }
+}

src/app/routes/demo/components/zorro-demo/zorro-demo.component.html

@@ -0,0 +1,129 @@
+<page-header-wrapper title="Zorro案例">
+</page-header-wrapper>
+
+<nz-card [nzBordered]="false">
+    <form nz-form (ngSubmit)="getData()" class="search__form">
+        <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 24, lg: 24, xl: 48, xxl: 48 }">
+            <div nz-col nzMd="8" nzSm="24">
+                <nz-form-item>
+                    <nz-form-label nzFor="no">规则编号</nz-form-label>
+                    <nz-form-control>
+                        <input nz-input [(ngModel)]="q.no" name="no" placeholder="请输入" id="no" />
+                    </nz-form-control>
+                </nz-form-item>
+            </div>
+            <div nz-col nzMd="8" nzSm="24">
+                <nz-form-item>
+                    <nz-form-label nzFor="status">使用状态</nz-form-label>
+                    <nz-form-control>
+                        <nz-select [(ngModel)]="q.status" name="status" id="status" [nzPlaceHolder]="'请选择'"
+                            [nzShowSearch]="true">
+                            <nz-option *ngFor="let i of status; let idx = index" [nzLabel]="i.text" [nzValue]="idx">
+                            </nz-option>
+                        </nz-select>
+                    </nz-form-control>
+                </nz-form-item>
+            </div>
+            <div nz-col nzMd="8" nzSm="24" *ngIf="expandForm">
+                <nz-form-item>
+                    <nz-form-label nzFor="callNo">调用次数</nz-form-label>
+                    <nz-form-control>
+                        <input nz-input id="callNo" />
+                    </nz-form-control>
+                </nz-form-item>
+            </div>
+            <div nz-col nzMd="8" nzSm="24" *ngIf="expandForm">
+                <nz-form-item>
+                    <nz-form-label nzFor="updatedAt">更新日期</nz-form-label>
+                    <nz-form-control>
+                        <nz-date-picker id="updatedAt" style="width: 100%;"></nz-date-picker>
+                    </nz-form-control>
+                </nz-form-item>
+            </div>
+            <div nz-col nzMd="8" nzSm="24" *ngIf="expandForm">
+                <nz-form-item>
+                    <nz-form-label nzFor="status2">使用状态</nz-form-label>
+                    <nz-form-control>
+                        <nz-select [nzPlaceHolder]="'请选择'" nzId="status2" [nzShowSearch]="true">
+                            <nz-option *ngFor="let i of status; let idx = index" [nzLabel]="i.text" [nzValue]="idx">
+                            </nz-option>
+                        </nz-select>
+                    </nz-form-control>
+                </nz-form-item>
+            </div>
+            <div nz-col [nzSpan]="8" [class.text-right]="expandForm">
+                <button nz-button type="button" [nzType]="'primary'" (click)="action(modalContent)">新增</button>
+                <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="loading">查询</button>
+                <button nz-button type="reset" (click)="reset()" class="mx-sm">重置</button>
+                <a (click)="expandForm = !expandForm">
+                    {{ expandForm ? '收起' : '展开' }}
+                    <i nz-icon [nzType]="expandForm ? 'up' : 'down'"></i>
+                </a>
+            </div>
+        </div>
+    </form>
+
+    <ng-container *ngIf="selectedRows.length > 0">
+        <button nz-button class="mb-md">批量操作</button>
+        <button nz-button nz-dropdown [nzDropdownMenu]="batchMenu" nzPlacement="bottomLeft">
+            更多操作
+            <i nz-icon nzType="down"></i>
+        </button>
+        <nz-dropdown-menu #batchMenu="nzDropdownMenu">
+            <ul nz-menu>
+                <li nz-menu-item (click)="remove()">删除</li>
+                <li nz-menu-item (click)="approval()">批量审批</li>
+            </ul>
+        </nz-dropdown-menu>
+    </ng-container>
+    <div>
+        <nz-alert [nzType]="'info'" [nzShowIcon]="true" [nzMessage]="message">
+            <ng-template #message>
+                已选择
+                <strong class="text-primary">{{ selectedRows.length }}</strong> 项&nbsp;&nbsp; 服务调用总计 <strong>{{
+                    totalCallNo }}</strong> 万
+                <a *ngIf="selectedRows.length > 0" (click)="clearCheck()" class="ml-lg">清空</a>
+            </ng-template>
+        </nz-alert>
+    </div>
+
+    <nz-table #rowSelectionTable nzShowPagination nzShowSizeChanger [nzData]="data">
+        <thead>
+            <tr>
+                <th [(nzChecked)]="checkedAll" [nzIndeterminate]="indeterminate"
+                    (nzCheckedChange)="onAllChecked($event)">
+                </th>
+                <th>No</th>
+                <th>Name</th>
+                <th>Description</th>
+                <th>Option</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr *ngFor="let data of rowSelectionTable.data">
+                <td [nzShowCheckbox]="true" [(nzChecked)]="data.checked" [nzDisabled]="data.disabled"
+                    (nzCheckedChange)="onItemChecked($event,data)">
+                </td>
+                <td>{{ data.no }}</td>
+                <td>{{ data.callNo }}</td>
+                <td>{{ data.description }}</td>
+                <td>
+                    <a (click)="action(modalContent,data)">Edit</a>
+                    <nz-divider nzType="vertical"></nz-divider>
+                    <a (click)="deleteAction(data)">Delete </a>
+                </td>
+            </tr>
+        </tbody>
+    </nz-table>
+</nz-card>
+
+
+
+<ng-template #modalContent>
+    <nz-form-item>
+        <nz-form-label nzFor="no">描述</nz-form-label>
+        <nz-form-control>
+            <input nz-input [(ngModel)]="description" name="description" placeholder="请输入" id="no" />
+        </nz-form-control>
+    </nz-form-item>
+</ng-template>

src/app/routes/demo/components/zorro-demo/zorro-demo.component.ts

@@ -0,0 +1,161 @@
+import { ChangeDetectorRef, Component, OnInit, TemplateRef } from '@angular/core';
+import { NzSafeAny } from 'ng-zorro-antd/core/types';
+import { NzMessageService } from 'ng-zorro-antd/message';
+import { NzModalService } from 'ng-zorro-antd/modal';
+import { map, tap } from 'rxjs/operators';
+import { DemoService } from '../../services/demo.service';
+
+@Component({
+  selector: 'app-zorro-demo',
+  templateUrl: './zorro-demo.component.html',
+  styleUrls: ['./zorro-demo.component.less']
+})
+export class ZorroDemoComponent implements OnInit {
+  data: any[] = [];
+  loading = false;
+  expandForm = false;
+
+  q: {
+    pi: number;
+    ps: number;
+    no: string;
+    sorter: string;
+    status: number | null;
+    statusList: NzSafeAny[];
+  } = {
+    pi: 1,
+    ps: 10,
+    no: '',
+    sorter: '',
+    status: null,
+    statusList: []
+  };
+
+  status = [
+    { index: 0, text: '关闭', value: false, type: 'default', checked: false },
+    {
+      index: 1,
+      text: '运行中',
+      value: false,
+      type: 'processing',
+      checked: false
+    },
+    { index: 2, text: '已上线', value: false, type: 'success', checked: false },
+    { index: 3, text: '异常', value: false, type: 'error', checked: false }
+  ];
+
+  selectedRows: any[] = [];
+  totalCallNo = 0;
+  description: string = '';
+  checkedAll = false;
+  indeterminate = false;
+  constructor(
+    private service: DemoService,
+    public msg: NzMessageService,
+    private modalSrv: NzModalService,
+    private cdr: ChangeDetectorRef
+  ) {}
+
+  ngOnInit(): void {
+    this.getData();
+  }
+
+  getData(): void {
+    this.loading = true;
+    this.q.statusList = this.status.filter(w => w.checked).map(item => item.index);
+    if (this.q.status !== null && this.q.status > -1) {
+      this.q.statusList.push(this.q.status);
+    }
+    this.service
+      .request('/rule?_allow_anonymous=true', this.q)
+      .pipe(
+        map((list: Array<{ status: number; statusText: string; statusType: string }>) =>
+          list.map(i => {
+            const statusItem = this.status[i.status];
+            i.statusText = statusItem.text;
+            i.statusType = statusItem.type;
+            return i;
+          })
+        ),
+        tap(() => (this.loading = false))
+      )
+      .subscribe(res => {
+        this.data = res;
+      });
+  }
+
+  action(tpl: TemplateRef<{}>, data?: any): void {
+    if (data) {
+      this.description = data.description;
+    }
+    this.modalSrv.create({
+      nzTitle: '新建规则',
+      nzContent: tpl,
+      nzOnOk: () => {
+        this.loading = true;
+
+        // this.http.post('/rule', { description: this.description }).subscribe(() => this.getData());
+        if (data) {
+          Object.assign(data, { description: this.description });
+        } else {
+          this.data.push({
+            checked: false,
+            key: this.data.length,
+            callNo: 111,
+            description: this.description
+          });
+          this.data = [...this.data];
+        }
+        setTimeout(() => {
+          this.loading = false;
+        }, 1000);
+      }
+    });
+  }
+
+  remove(): void {
+    this.service.request('/delete/rule?_allow_anonymous=true', { nos: this.selectedRows.map((i: any) => i.no).join(',') }).subscribe(() => {
+      this.getData();
+      this.clearCheck();
+    });
+  }
+
+  deleteAction(item: any) {
+    this.data = this.data.filter(({ no }) => no !== item.no);
+  }
+
+  approval(): void {
+    this.msg.success(`审批了 ${this.selectedRows.length} 笔`);
+  }
+
+  onAllChecked(checked: boolean): void {
+    this.data.filter(({ disabled }) => !disabled).forEach(item => (item.checked = checked));
+    this.selectedRows = this.data.filter(({ checked }) => checked);
+  }
+
+  onItemChecked(checked: boolean, item: any): void {
+    if (checked) {
+      this.selectedRows.push(item);
+    } else {
+      this.selectedRows = this.selectedRows.filter(({ no }) => no !== item.no);
+    }
+    this.refreshCheckedStatus();
+  }
+
+  refreshCheckedStatus(): void {
+    this.checkedAll = this.data.every(item => item.checked);
+    this.indeterminate = this.data.some(item => item.checked) && !this.checkedAll;
+  }
+
+  clearCheck() {
+    this.data.forEach(item => (item.checked = false));
+    this.selectedRows = [];
+    this.checkedAll = false;
+    this.indeterminate = false;
+  }
+
+  reset(): void {
+    // wait form reset updated finished
+    setTimeout(() => this.getData());
+  }
+}

src/app/routes/demo/demo-routing.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { AlianDemoComponent } from './components/alian-demo/alian-demo.component';
+import { ZorroDemoComponent } from './components/zorro-demo/zorro-demo.component';
+
+const routes: Routes = [
+  { path: 'zorro', component: ZorroDemoComponent },
+  { path: 'alain', component: AlianDemoComponent },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class DemoRoutingModule { }

src/app/routes/demo/demo.module.ts

@@ -0,0 +1,15 @@
+import { NgModule, Type } from '@angular/core';
+import { SharedModule } from '@shared';
+import { AlianDemoComponent } from './components/alian-demo/alian-demo.component';
+import { DemoEditComponent } from './components/zorro-demo/edit/edit.component';
+
+import { ZorroDemoComponent } from './components/zorro-demo/zorro-demo.component';
+import { DemoRoutingModule } from './demo-routing.module';
+
+const COMPONENTS: Array<Type<void>> = [DemoEditComponent, ZorroDemoComponent, AlianDemoComponent];
+
+@NgModule({
+  imports: [SharedModule, DemoRoutingModule],
+  declarations: COMPONENTS
+})
+export class DemoModule {}

src/app/routes/demo/services/demo.service.ts

@@ -0,0 +1,11 @@
+import { Injectable, Injector } from '@angular/core';
+import { BaseService } from 'src/app/shared/services';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DemoService extends BaseService {
+  constructor(public injector: Injector) {
+    super(injector);
+  }
+}

src/app/routes/routes-routing.module.ts

@@ -3,6 +3,7 @@ import { RouterModule, Routes } from '@angular/router';
 // layout
 import { LayoutProComponent } from '@brand';
 import { environment } from '@env/environment';
+
 // dashboard pages
 import { DashboardComponent } from './dashboard/dashboard.component';
 
@@ -13,13 +14,14 @@ const routes: Routes = [
     children: [
       { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
       { path: 'dashboard', component: DashboardComponent },
-    ],
+      { path: 'demo', loadChildren: () => import('./demo/demo.module').then(m => m.DemoModule) }
+    ]
   },
   // passport
-  { path: '', loadChildren: () => import('./passport/passport.module').then((m) => m.PassportModule) },
+  { path: '', loadChildren: () => import('./passport/passport.module').then(m => m.PassportModule) },
-  { path: 'exception', loadChildren: () => import('./exception/exception.module').then((m) => m.ExceptionModule) },
+  { path: 'exception', loadChildren: () => import('./exception/exception.module').then(m => m.ExceptionModule) },
   // 单页不包裹Layout
-  { path: '**', redirectTo: 'exception/404' },
+  { path: '**', redirectTo: 'exception/404' }
 ];
 
 @NgModule({
@@ -28,9 +30,9 @@ const routes: Routes = [
       useHash: environment.useHash,
       // NOTICE: If you use `reuse-tab` component and turn on keepingScroll you can set to `disabled`
       // Pls refer to https://ng-alain.com/components/reuse-tab
-      scrollPositionRestoration: 'top',
+      scrollPositionRestoration: 'top'
-    }),
+    })
   ],
-  exports: [RouterModule],
+  exports: [RouterModule]
 })
 export class RouteRoutingModule {}

src/app/routes/routes.module.ts

@@ -1,16 +1,16 @@
 import { NgModule, Type } from '@angular/core';
-
 import { SharedModule } from '@shared';
+
 // dashboard pages
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { RouteRoutingModule } from './routes-routing.module';
 
-const COMPONENTS: Type<void>[] = [DashboardComponent];
+const COMPONENTS = [DashboardComponent];
-const COMPONENTS_NOROUNT: Type<void>[] = [];
+const COMPONENTS_NOROUNT: Array<Type<void>> = [];
 
 @NgModule({
   imports: [SharedModule, RouteRoutingModule],
   declarations: [...COMPONENTS, ...COMPONENTS_NOROUNT],
-  entryComponents: COMPONENTS_NOROUNT,
+  entryComponents: COMPONENTS_NOROUNT
 })
 export class RoutesModule {}

src/app/shared/services/business/sl-platform.service.ts

@@ -9,7 +9,6 @@ import { Injectable, Injector } from '@angular/core';
 import { Observable, zip } from 'rxjs';
 import { catchError, switchMap } from 'rxjs/operators';
 import { CoreService } from 'src/app/core/core.service';
-import { EAEncryptUtil } from '../../utils';
 import { BaseService } from '../core/base.service';
 
 @Injectable({
@@ -61,7 +60,7 @@ export class EAPlatformService extends BaseService {
   getPlatformStatus(): number {
     const encryptStatus = this.coreSrv.cacheSrv.getNone<string>(this._cachePlatformStatusKey);
     try {
-      const status = EAEncryptUtil.deencryptByDeAES(encryptStatus);
+      // const status = EAEncryptUtil.deencryptByDeAES(encryptStatus);
       return +status;
     } catch (error) {
       return 0;
@@ -118,8 +117,8 @@ export class EAPlatformService extends BaseService {
     }
 
     // 加密并保存平台状态
-    const ciphertext = EAEncryptUtil.encryptByEnAES(status.toString());
+    // const ciphertext = EAEncryptUtil.encryptByEnAES(status.toString());
-    this.coreSrv.cacheSrv.set(this._cachePlatformStatusKey, ciphertext);
+    // this.coreSrv.cacheSrv.set(this._cachePlatformStatusKey, ciphertext);
   }
 
   /**

src/app/shared/services/business/user.service.ts

@@ -101,7 +101,7 @@ export class EAUserService extends BaseService {
       if (res?.token) {
         this.cacheSrv.set(cacheConf.token, res.token);
         this.doAfterLogin();
-        this.eventSrv.event.emit(eventConf.reflesh_login_status);
+        // this.eventSrv.event.emit(eventConf.reflesh_login_status);
         this.router.navigate([this.ar.snapshot.queryParams.returnUrl || '/']);
       }
     });
@@ -117,7 +117,7 @@ export class EAUserService extends BaseService {
       if (res?.token) {
         this.tokenSrv.set({ token: res.token });
         this.doAfterLogin();
-        this.eventSrv.event.emit(eventConf.reflesh_login_status, this.ar.snapshot.queryParams.returnUrl || '/');
+        // this.eventSrv.event.emit(eventConf.reflesh_login_status, this.ar.snapshot.queryParams.returnUrl || '/');
       }
     });
   }

src/app/shared/services/core/cache.service.ts

@@ -11,19 +11,19 @@ import { cacheConf } from '@conf/cache.conf';
 import { CacheService } from '@delon/cache';
 import { BehaviorSubject } from 'rxjs';
 import { distinctUntilChanged } from 'rxjs/operators';
+
 import { ICacheObj } from '../../interfaces/core/i-cache-obj';
 import { EADateUtil } from '../../utils';
-import { EAEncryptUtil } from '../../utils/encrypt.util';
 
 @Injectable({
-  providedIn: 'root',
+  providedIn: 'root'
 })
 export class EACacheService {
   // 监听最后操作时间值变化
   private listen$ = new BehaviorSubject<number>(0);
   private listen = this.listen$.asObservable();
   constructor(private service: CacheService) {
-    this.listen.pipe(distinctUntilChanged()).subscribe((res) => {
+    this.listen.pipe(distinctUntilChanged()).subscribe(res => {
       this.set(cacheConf.last_operation_time, res);
     });
   }
@@ -44,11 +44,11 @@ export class EACacheService {
       pd: new Date().getTime(),
       data,
       vld,
-      encrypt,
+      encrypt
     };
     if (encrypt) {
       // 加密
-      cahceObj.data = EAEncryptUtil.encryptByEnAES(JSON.stringify(data));
+      // cahceObj.data = EAEncryptUtil.encryptByEnAES(JSON.stringify(data));
     }
     this.service.set(key, cahceObj);
     // 更新系统最后操作时间
@@ -86,10 +86,11 @@ export class EACacheService {
 
     // 判断是否加密
     if (cacheObj.encrypt) {
-      const encryptJson = EAEncryptUtil.deencryptByDeAES(cacheObj.data);
+      // const encryptJson = EAEncryptUtil.deencryptByDeAES(cacheObj.data);
       // 更新系统最后操作时间
       this.refleshLastOperationTime();
-      return JSON.parse(encryptJson);
+      // return JSON.parse(encryptJson);
+      return;
     }
 
     // 更新系统最后操作时间

src/app/shared/services/core/event.service.ts

@@ -12,8 +12,6 @@ import * as EventEmitter from 'eventemitter3';
   providedIn: 'root',
 })
 export class EAEventService {
-  event: EventEmitter;
   constructor() {
-    this.event = new EventEmitter();
   }
 }

src/app/shared/shared-zorro.module.ts

@@ -3,12 +3,14 @@ import { NzBadgeModule } from 'ng-zorro-antd/badge';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzCardModule } from 'ng-zorro-antd/card';
 import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
+import { NzDividerModule } from 'ng-zorro-antd/divider';
 import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
 import { NzFormModule } from 'ng-zorro-antd/form';
 import { NzGridModule } from 'ng-zorro-antd/grid';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 import { NzInputModule } from 'ng-zorro-antd/input';
 import { NzSelectModule } from 'ng-zorro-antd/select';
+import { NzSpinModule } from 'ng-zorro-antd/spin';
 import { NzTableModule } from 'ng-zorro-antd/table';
 
 export const SHARED_ZORRO_MODULES = [
@@ -23,5 +25,7 @@ export const SHARED_ZORRO_MODULES = [
   NzSelectModule,
   NzDatePickerModule,
   NzCardModule,
-  NzIconModule
+  NzIconModule,
+  NzSpinModule,
+  NzDividerModule,
 ];

src/assets/mocks/menu-data.json

@@ -1,22 +1,32 @@
 {
   "menu": [
     {
-      "text": "主导航",
+      "text": "样例",
-      "group": true,
       "hideInBreadcrumb": true,
       "children": [
         {
-          "text": "DEMO页面",
+          "text": "仪表盘",
           "icon": "anticon anticon-dashboard",
           "link": "/dashboard"
         },
         {
-          "text": "快捷菜单",
+          "text": "样例",
-          "icon": "anticon anticon-rocket",
+          "icon": "anticon anticon-dashboard",
-          "shortcutRoot": true,
+          "group": true,
-          "children": []
+          "children": [
+            {
+              "text": "Zorro案例",
+              "icon": "anticon anticon-dashboard",
+              "link": "/demo/zorro"
+            },
+            {
+              "text": "Alain案例",
+              "icon": "anticon anticon-dashboard",
+              "link": "/demo/alain"
+            }
+          ]
         }
       ]
     }
   ]
-}
+}

src/styles.less

@@ -5,3 +5,9 @@
 
 @import './styles/index';
 @import './styles/theme';
+
+
+// .page-header {
+//     margin-left: -24px;
+//     margin-top : -24px;
+// }