项目初始化

src/app/layout/pro/shared/page/index.ts

@@ -0,0 +1,3 @@
+export * from './page-grid.component';
+export * from './page-header-wrapper.component';
+export * from './page.module';

src/app/layout/pro/shared/page/page-grid.component.html

@@ -0,0 +1,4 @@
+<nz-spin [nzSpinning]="loading">
+  <div *ngIf="loading" class="brand-page-loading"></div>
+  <ng-content></ng-content>
+</nz-spin>

src/app/layout/pro/shared/page/page-grid.component.ts

@@ -0,0 +1,80 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Inject,
+  Input,
+  OnDestroy,
+  Optional,
+  Renderer2
+} from '@angular/core';
+import { ReuseTabService } from '@delon/abc/reuse-tab';
+import { TitleService } from '@delon/theme';
+import { BooleanInput, InputBoolean } from '@delon/util';
+import { NzSafeAny } from 'ng-zorro-antd/core/types';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+import { BrandService } from '../../pro.service';
+
+@Component({
+  selector: 'page-grid',
+  templateUrl: './page-grid.component.html',
+  host: {
+    '[class.alain-pro__page-grid]': 'true',
+    '[class.alain-pro__page-grid-no-spacing]': 'noSpacing',
+    '[class.alain-pro__page-grid-wide]': 'isFixed'
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ProPageGridComponent implements AfterViewInit, OnDestroy {
+  static ngAcceptInputType_loading: BooleanInput;
+  static ngAcceptInputType_noSpacing: BooleanInput;
+
+  private unsubscribe$ = new Subject<void>();
+
+  @Input() @InputBoolean() loading = false;
+  @Input() @InputBoolean() noSpacing = false;
+  @Input() style: NzSafeAny;
+  @Input()
+  set title(value: string) {
+    if (value) {
+      if (this.titleSrv) {
+        this.titleSrv.setTitle(value);
+      }
+      if (this.reuseSrv) {
+        this.reuseSrv.title = value;
+      }
+    }
+  }
+
+  get isFixed(): boolean {
+    return this.pro.isFixed;
+  }
+
+  constructor(
+    private el: ElementRef,
+    private rend: Renderer2,
+    private pro: BrandService,
+    @Optional() @Inject(TitleService) private titleSrv: TitleService,
+    @Optional() @Inject(ReuseTabService) private reuseSrv: ReuseTabService,
+    private cdr: ChangeDetectorRef
+  ) {}
+
+  ngAfterViewInit(): void {
+    if (this.style) {
+      Object.keys(this.style).forEach((key: string) => {
+        this.rend.setStyle(this.el.nativeElement, key, this.style[key]);
+      });
+    }
+    this.pro.notify.pipe(takeUntil(this.unsubscribe$)).subscribe(() => this.cdr.markForCheck());
+  }
+
+  ngOnDestroy(): void {
+    const { unsubscribe$ } = this;
+    unsubscribe$.next();
+    unsubscribe$.complete();
+  }
+}

src/app/layout/pro/shared/page/page-header-wrapper.component.html

@@ -0,0 +1,26 @@
+<nz-spin [nzSpinning]="loading">
+  <ng-template [ngTemplateOutlet]="top"></ng-template>
+  <page-header
+    [wide]="pro.isFixed"
+    [fixed]="false"
+    [title]="title"
+    [home]="home"
+    [homeLink]="homeLink"
+    [homeI18n]="homeI18n"
+    [autoBreadcrumb]="autoBreadcrumb"
+    [autoTitle]="autoTitle"
+    [syncTitle]="syncTitle"
+    [action]="action"
+    [breadcrumb]="breadcrumb"
+    [logo]="logo"
+    [content]="content"
+    [extra]="extra"
+    [tab]="tab"
+    ><ng-template [ngTemplateOutlet]="phContent"></ng-template
+  ></page-header>
+  <div class="alain-pro__page-header-content">
+    <page-grid [noSpacing]="noSpacing" [style]="style">
+      <ng-content></ng-content>
+    </page-grid>
+  </div>
+</nz-spin>

src/app/layout/pro/shared/page/page-header-wrapper.component.ts

@@ -0,0 +1,74 @@
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, TemplateRef } from '@angular/core';
+import { AlainConfigService, BooleanInput, InputBoolean } from '@delon/util';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+import { BrandService } from '../../pro.service';
+
+@Component({
+  selector: 'page-header-wrapper',
+  templateUrl: './page-header-wrapper.component.html',
+  host: {
+    '[class.alain-pro__page-header-wrapper]': 'true'
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ProPageHeaderWrapperComponent implements AfterViewInit, OnDestroy {
+  static ngAcceptInputType_loading: BooleanInput;
+  static ngAcceptInputType_autoBreadcrumb: BooleanInput;
+  static ngAcceptInputType_autoTitle: BooleanInput;
+  static ngAcceptInputType_syncTitle: BooleanInput;
+  static ngAcceptInputType_noSpacing: BooleanInput;
+
+  private unsubscribe$ = new Subject<void>();
+
+  // #region page-header fields
+
+  @Input() title!: string | null | TemplateRef<void>;
+  @Input() @InputBoolean() loading = false;
+  @Input() home!: string;
+  @Input() homeLink!: string;
+  @Input() homeI18n!: string;
+  /**
+   * 自动生成导航，以当前路由从主菜单中定位
+   */
+  @Input() @InputBoolean() autoBreadcrumb = true;
+  /**
+   * 自动生成标题，以当前路由从主菜单中定位
+   */
+  @Input() @InputBoolean() autoTitle = true;
+  /**
+   * 是否自动将标题同步至 `TitleService`、`ReuseService` 下，仅 `title` 为 `string` 类型时有效
+   */
+  @Input() @InputBoolean() syncTitle = true;
+  @Input() breadcrumb!: TemplateRef<void>;
+  @Input() logo!: TemplateRef<void>;
+  @Input() action!: TemplateRef<void>;
+  @Input() content!: TemplateRef<void>;
+  @Input() extra!: TemplateRef<void>;
+  @Input() tab!: TemplateRef<void>;
+  @Input() phContent!: TemplateRef<void>;
+  // #endregion
+
+  // #region fields
+
+  @Input() top!: TemplateRef<void>;
+  @Input() @InputBoolean() noSpacing = false;
+  @Input() style?: {};
+
+  // #endregion
+
+  constructor(public pro: BrandService, cog: AlainConfigService, private cdr: ChangeDetectorRef) {
+    cog.attach(this, 'pageHeader', { syncTitle: true });
+  }
+
+  ngAfterViewInit(): void {
+    this.pro.notify.pipe(takeUntil(this.unsubscribe$)).subscribe(() => this.cdr.markForCheck());
+  }
+
+  ngOnDestroy(): void {
+    const { unsubscribe$ } = this;
+    unsubscribe$.next();
+    unsubscribe$.complete();
+  }
+}

src/app/layout/pro/shared/page/page.module.ts

@@ -0,0 +1,16 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { PageHeaderModule } from '@delon/abc/page-header';
+import { NzSpinModule } from 'ng-zorro-antd/spin';
+
+import { ProPageGridComponent } from './page-grid.component';
+import { ProPageHeaderWrapperComponent } from './page-header-wrapper.component';
+
+const COMPONENTS = [ProPageGridComponent, ProPageHeaderWrapperComponent];
+
+@NgModule({
+  imports: [CommonModule, NzSpinModule, PageHeaderModule],
+  declarations: COMPONENTS,
+  exports: COMPONENTS
+})
+export class ProPageModule {}