feat(cli): add page command

docs/cli.md

@@ -151,3 +151,34 @@ npm run el:bundle.windows
 可将 Angular 打包成一个 Exe 应用程序。
 
 > 脚手架对 Electron 的实现来自 [angular-electron-seed](https://github.com/sean-perkins/angular-electron-seed)；有关更多细节可参考。
+
+## [page] 命令
+
+@delon/cli 扩展了 `ng generate page` （简化：`ng g page`） 命令用于生成业务组件页。
+
+### 参数
+
+`page` 命令是由 `ng g component` 基础向下构建。
+
+**命令格式**
+
+```bash
+ng g page [page name] -t=view --modal
+```
+
+| Alias | Arguments | Default | Summary |
+| --------- | --------- | ------- | ------- |
+| `-t` | `--type` | `list` | 指定页面类型，值包括：`list`、`view`、`edit` |
+| - | `--modal` | `true` | 是否模态框，限：`view`、`edit` 时有效 |
+
+例如：
+
+```bash
+# 生成日志列表页
+ng g page log
+
+cd log
+
+# 生成日志详情页
+ng g page view -t=view
+```

src/core/cli/collection.json

@@ -70,6 +70,11 @@
       "factory": "./app-shell",
       "description": "Create an app shell.",
       "schema": "./app-shell/schema.json"
+    },
+    "page": {
+      "factory": "./page",
+      "description": "Create a page component.",
+      "schema": "./page/schema.json"
     }
   }
 }

src/core/cli/page/files/__path__/__name@dasherize@if-flat__/__name@dasherize@if-edit__.component.html

@@ -0,0 +1,4 @@
+<div class="content__title">
+    <h1>Page Name</h1>
+</div>
+<pro-header [title]="'Page Name'"></pro-header>

src/core/cli/page/files/__path__/__name@dasherize@if-flat__/__name@dasherize@if-edit__.component.spec.ts

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

src/core/cli/page/files/__path__/__name@dasherize@if-flat__/__name@dasherize@if-edit__.component.ts

@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class <%= classify(name) %>Service {
+
+  constructor() { }
+
+}

src/core/cli/page/files/__path__/__name@dasherize@if-flat__/__name@dasherize@if-list__.component.html

@@ -0,0 +1,20 @@
+<pro-header [title]="'Page Name'"></pro-header>
+<nz-card>
+    <form nz-form [nzLayout]="'inline'" class="mb-md">
+        <div nz-row [nzGutter]="24">
+            <div nz-col [nzSpan]="8">
+                <div nz-form-item class="d-flex">
+                    <div nz-form-label><label for="q">关键词</label></div>
+                    <div nz-form-control class="flex-1">
+                        <nz-input [(ngModel)]="params.q" nzId="q" name="q" nzPlaceHolder="请输入"></nz-input>
+                    </div>
+                </div>
+            </div>
+            <div nz-col [nzSpan]="8">
+                <button nz-button (click)="st.load(1)" [nzType]="'primary'">搜索</button>
+                <button nz-button (click)="params={}; st.reset()">重置</button>
+            </div>
+        </div>
+    </form>
+    <simple-table #st [data]="url" [columns]="columns" [extraParams]="params"></simple-table>
+</nz-card>

src/core/cli/page/files/__path__/__name@dasherize@if-flat__/__name@dasherize@if-list__.component.spec.ts

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

src/core/cli/page/files/__path__/__name@dasherize@if-flat__/__name@dasherize@if-list__.component.ts

@@ -0,0 +1,30 @@
+import { Component, OnInit<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%><% if(changeDetection !== 'Default') { %>, ChangeDetectionStrategy<% }%> } from '@angular/core';
+import { _HttpClient } from '@delon/theme';
+import { SimpleTableColumn, SimpleTableComponent } from '@delon/abc';
+
+@Component({
+  selector: '<%= selector %>',<% if(inlineTemplate) { %>
+  template: `
+    <pro-header [title]="'Page Name'"></pro-header>
+    <nz-card>
+        <simple-table [data]="url" [columns]="columns"></simple-table>
+    </nz-card>
+  `,<% } else { %>
+  templateUrl: './<%= dasherize(name) %>.component.html',<% } if(inlineStyle) { %><% } else { %>
+  styleUrls: ['./<%= dasherize(name) %>.component.<%= styleext %>']<% } %><% if(!!viewEncapsulation) { %>,
+  encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
+  changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %>
+})
+export class <%= classify(name) %>Component implements OnInit {
+
+    params: any = {};
+    url = '/';
+    columns: SimpleTableColumn[] = [
+        { title: '编号', index: 'id' }
+    ];
+
+    constructor(private http: _HttpClient) { }
+
+    ngOnInit() { }
+
+}

src/core/cli/page/files/__path__/__name@dasherize@if-flat__/__name@dasherize@if-view__.component.html

@@ -0,0 +1,19 @@
+<% if(modal) { %><div class="modal-header">
+    <div class="modal-title">10000 - 标题</div>
+</div>
+<desc-list class="mb-md">
+    <desc-list-item term="编号">10000</desc-list-item>
+</desc-list>
+<div class="modal-footer">
+    <button nz-button type="button" (click)="close()">关闭</button>
+</div><% } else { %>
+<pro-header [title]="'基础详情页'"></pro-header>
+<nz-card [nzNoHovering]="true" [nzBordered]="false">
+    <desc-list size="large" title="区域一" class="mb-lg">
+        <desc-list-item term="编号">10000</desc-list-item>
+    </desc-list>
+    <nz-divider class="mb-lg"></nz-divider>
+    <desc-list size="large" title="区域二" class="mb-lg">
+        <desc-list-item term="编号">10000</desc-list-item>
+    </desc-list>
+</nz-card><% } %>

src/core/cli/page/files/__path__/__name@dasherize@if-flat__/__name@dasherize@if-view__.component.spec.ts

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

src/core/cli/page/files/__path__/__name@dasherize@if-flat__/__name@dasherize@if-view__.component.ts

@@ -0,0 +1,46 @@
+import { Component, OnInit<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%><% if(changeDetection !== 'Default') { %>, ChangeDetectionStrategy<% }%> } from '@angular/core';
+import { NzModalSubject } from 'ng-zorro-antd';
+import { _HttpClient } from '@delon/theme';
+
+@Component({
+  selector: '<%= selector %>',<% if(inlineTemplate) { %>
+  template: `<% if(modal) { %>
+    <div class="modal-header">
+        <div class="modal-title">10000 - 标题</div>
+    </div>
+    <desc-list class="mb-md">
+        <desc-list-item term="编号">10000</desc-list-item>
+    </desc-list>
+    <div class="modal-footer">
+        <button nz-button type="button" (click)="close()">关闭</button>
+    </div><% } else { %>
+    <pro-header [title]="'基础详情页'"></pro-header>
+    <nz-card [nzNoHovering]="true" [nzBordered]="false">
+        <desc-list size="large" title="区域一" class="mb-lg">
+            <desc-list-item term="编号">10000</desc-list-item>
+        </desc-list>
+        <nz-divider class="mb-lg"></nz-divider>
+        <desc-list size="large" title="区域二" class="mb-lg">
+            <desc-list-item term="编号">10000</desc-list-item>
+        </desc-list>
+    </nz-card><% } %>
+  `,<% } else { %>
+  templateUrl: './<%= dasherize(name) %>.component.html',<% } if(inlineStyle) { %><% } else { %>
+  styleUrls: ['./<%= dasherize(name) %>.component.<%= styleext %>']<% } %><% if(!!viewEncapsulation) { %>,
+  encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
+  changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %>
+})
+export class <%= classify(name) %>Component implements OnInit {
+    private readonly URI = '/';
+    i: any;
+
+    constructor(public http: _HttpClient, private subject: NzModalSubject) { }
+
+    ngOnInit() {
+        this.http.get(this.URI + this.i.id).subscribe((res: any) => this.i = res.d);
+    }
+
+    close() {
+        this.subject.destroy();
+    }
+}

src/core/cli/page/index.d.ts

@@ -0,0 +1,3 @@
+import { Rule } from '@angular-devkit/schematics';
+import { Schema as ServiceOptions } from './schema';
+export default function (options: ServiceOptions): Rule;

src/core/cli/page/index.js

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+const core_1 = require("@angular-devkit/core");
+const schematics_1 = require("@angular-devkit/schematics");
+require("rxjs/add/operator/merge");
+const ts = require("typescript");
+const stringUtils = require("../strings");
+const ast_utils_1 = require("../utility/ast-utils");
+const change_1 = require("../utility/change");
+const find_module_1 = require("../utility/find-module");
+function addDeclarationToNgModule(options) {
+    return (host) => {
+        if (options.skipImport || !options.module) {
+            return host;
+        }
+        const modulePath = options.module;
+        const text = host.read(modulePath);
+        if (text === null) {
+            throw new schematics_1.SchematicsException(`File ${modulePath} does not exist.`);
+        }
+        const sourceText = text.toString('utf-8');
+        const source = ts.createSourceFile(modulePath, sourceText, ts.ScriptTarget.Latest, true);
+        const componentPath = `/${options.sourceDir}/${options.path}/`
+            + (options.flat ? '' : stringUtils.dasherize(options.name) + '/')
+            + stringUtils.dasherize(options.name)
+            + '.component';
+        const relativePath = find_module_1.buildRelativePath(modulePath, componentPath);
+        const classifiedName = stringUtils.classify(`${options.name}Component`);
+        const declarationChanges = ast_utils_1.addDeclarationToModule(source, modulePath, classifiedName, relativePath);
+        const declarationRecorder = host.beginUpdate(modulePath);
+        for (const change of declarationChanges) {
+            if (change instanceof change_1.InsertChange) {
+                declarationRecorder.insertLeft(change.pos, change.toAdd);
+            }
+        }
+        host.commitUpdate(declarationRecorder);
+        if (options.export) {
+            // Need to refresh the AST because we overwrote the file in the host.
+            const text = host.read(modulePath);
+            if (text === null) {
+                throw new schematics_1.SchematicsException(`File ${modulePath} does not exist.`);
+            }
+            const sourceText = text.toString('utf-8');
+            const source = ts.createSourceFile(modulePath, sourceText, ts.ScriptTarget.Latest, true);
+            const exportRecorder = host.beginUpdate(modulePath);
+            const exportChanges = ast_utils_1.addExportToModule(source, modulePath, stringUtils.classify(`${options.name}Component`), relativePath);
+            for (const change of exportChanges) {
+                if (change instanceof change_1.InsertChange) {
+                    exportRecorder.insertLeft(change.pos, change.toAdd);
+                }
+            }
+            host.commitUpdate(exportRecorder);
+        }
+        return host;
+    };
+}
+function buildSelector(options) {
+    let selector = stringUtils.dasherize(options.name);
+    if (options.prefix) {
+        selector = `${options.prefix}-${selector}`;
+    }
+    return selector;
+}
+function default_1(options) {
+    const sourceDir = options.sourceDir;
+    if (!sourceDir) {
+        throw new schematics_1.SchematicsException(`sourceDir option is required.`);
+    }
+    return (host, context) => {
+        options.selector = options.selector || buildSelector(options);
+        options.path = options.path ? core_1.normalize(options.path) : options.path;
+        options.module = find_module_1.findModuleFromOptions(host, options);
+        const templateSource = schematics_1.apply(schematics_1.url('./files'), [
+            options.spec ? schematics_1.noop() : schematics_1.filter(path => !path.endsWith('.spec.ts')),
+            options.inlineStyle ? schematics_1.filter(path => !path.endsWith('.__styleext__')) : schematics_1.noop(),
+            options.inlineTemplate ? schematics_1.filter(path => !path.endsWith('.html')) : schematics_1.noop(),
+            schematics_1.filter(path => path.includes(`if-${options.type}`)),
+            schematics_1.template(Object.assign({}, stringUtils, {
+                'if-flat': (s) => options.flat ? '' : s,
+                'if-list': (s) => s,
+                'if-edit': (s) => s,
+                'if-view': (s) => s
+            }, options)),
+            schematics_1.move(sourceDir),
+        ]);
+        return schematics_1.chain([
+            schematics_1.branchAndMerge(schematics_1.chain([
+                addDeclarationToNgModule(options),
+                schematics_1.mergeWith(templateSource),
+            ])),
+        ])(host, context);
+    };
+}
+exports.default = default_1;