feat(abc:exception): add typeDict of global config (#1551)

Author: cipchk

packages/abc/exception/demo/403.md

@@ -10,10 +10,12 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-demo',
-  template: ` <exception [type]="403">
+  template: ` 
+  <exception [type]="403">
     <button nz-button [nzType]="'primary'">回到首页</button>
     <button nz-button>查看详情</button>
-  </exception>`,
+  </exception>
+  `,
 })
 export class DemoComponent {}
 ```

packages/abc/exception/exception.component.ts

@@ -16,6 +16,7 @@ import { Subject, takeUntil } from 'rxjs';
 
 import { DelonLocaleService, LocaleData } from '@delon/theme';
 import { isEmpty } from '@delon/util/browser';
+import { AlainConfigService } from '@delon/util/config';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 
 export type ExceptionType = 403 | 404 | 500;
@@ -46,24 +47,11 @@ export class ExceptionComponent implements OnInit, OnDestroy {
   _img: SafeUrl = '';
   _title: SafeHtml = '';
   _desc: SafeHtml = '';
+  private typeDict!: { [key: number | string]: { img: string; title: string; desc?: string } };
 
   @Input()
   set type(value: ExceptionType) {
-    const item: { img: string; title: string } = {
-      403: {
-        img: 'https://gw.alipayobjects.com/zos/rmsportal/wZcnGqRDyhPOEYFcZDnb.svg',
-        title: '403'
-      },
-      404: {
-        img: 'https://gw.alipayobjects.com/zos/rmsportal/KpnpchXsobRgLElEozzI.svg',
-        title: '404'
-      },
-      500: {
-        img: 'https://gw.alipayobjects.com/zos/rmsportal/RVRUAYdCGeYNBWoKiIwB.svg',
-        title: '500'
-      }
-    }[value];
-
+    const item = this.typeDict[value];
     if (!item) return;
 
     this.fixImg(item.img);
@@ -101,9 +89,27 @@ export class ExceptionComponent implements OnInit, OnDestroy {
   constructor(
     private i18n: DelonLocaleService,
     private dom: DomSanitizer,
+    configSrv: AlainConfigService,
     @Optional() private directionality: Directionality,
     private cdr: ChangeDetectorRef
-  ) {}
+  ) {
+    configSrv.attach(this, 'exception', {
+      typeDict: {
+        403: {
+          img: 'https://gw.alipayobjects.com/zos/rmsportal/wZcnGqRDyhPOEYFcZDnb.svg',
+          title: '403'
+        },
+        404: {
+          img: 'https://gw.alipayobjects.com/zos/rmsportal/KpnpchXsobRgLElEozzI.svg',
+          title: '404'
+        },
+        500: {
+          img: 'https://gw.alipayobjects.com/zos/rmsportal/RVRUAYdCGeYNBWoKiIwB.svg',
+          title: '500'
+        }
+      }
+    });
+  }
 
   ngOnInit(): void {
     this.dir = this.directionality.value;

packages/abc/exception/index.en-US.md

@@ -12,11 +12,11 @@ Exceptions page is used to provide feedback on specific abnormal state. Usually,
 
 ### exception
 
-| Property | Description | Type | Default |
-|----------|-------------|------|---------|
-| `[type]` | type of exception, the corresponding default `title`, `desc`, `img` will be given if set, which can be overridden by explicit setting of `title`, `desc`, `img` | `'403','404','500'` | - |
-| `[title]` | title | `string` | - |
-| `[desc]` | supplementary description | `string` | - |
-| `[img]` | the url of background image | `string` | - |
-| `[backRouterLink]` | Back of router link | `string, any[]` | `/` |
-| `ng-content` | suggested operations, a default 'Home' link will show if not set | `TemplateRef<void>` | - |
+| Property | Description | Type | Default | Global Config |
+|----------|-------------|------|---------|---------------|
+| `[type]` | type of exception, the corresponding default `title`, `desc`, `img` will be given if set, which can be overridden by explicit setting of `title`, `desc`, `img` | `'403','404','500'` | - | ✅ |
+| `[title]` | title | `string` | - | - |
+| `[desc]` | supplementary description | `string` | - | - |
+| `[img]` | the url of background image | `string` | - | - |
+| `[backRouterLink]` | Back of router link | `string, any[]` | `/` | - |
+| `ng-content` | suggested operations, a default 'Home' link will show if not set | `TemplateRef<void>` | - | - |

packages/abc/exception/index.zh-CN.md

@@ -12,11 +12,11 @@ module: import { ExceptionModule } from '@delon/abc/exception';
 
 ### exception
 
-| 成员 | 说明 | 类型 | 默认值 |
-|----|----|----|-----|
-| `[type]` | 页面类型，若配置，则自带对应类型默认的 `title`，`desc`，`img`，此默认设置可以被 `title`，`desc`，`img` 覆盖 | `'403','404','500'` | - |
-| `[title]` | 标题 | `string` | - |
-| `[desc]` | 补充描述 | `string` | - |
-| `[img]` | 背景图片地址 | `string` | - |
-| `[backRouterLink]` | 后退路由链接 | `string, any[]` | `/` |
-| `ng-content` | 建议操作，配置此属性时默认的『返回首页』按钮不生效 | `TemplateRef<void>` | - |
+| 成员 | 说明 | 类型 | 默认值 | 全局配置 |
+|----|----|----|-----|------|
+| `[type]` | 页面类型，若配置，则自带对应类型默认的 `title`，`desc`，`img`，此默认设置可以被 `title`，`desc`，`img` 覆盖 | `'403','404','500'` | - | ✅ |
+| `[title]` | 标题 | `string` | - | - |
+| `[desc]` | 补充描述 | `string` | - | - |
+| `[img]` | 背景图片地址 | `string` | - | - |
+| `[backRouterLink]` | 后退路由链接 | `string, any[]` | `/` | - |
+| `ng-content` | 建议操作，配置此属性时默认的『返回首页』按钮不生效 | `TemplateRef<void>` | - | - |

packages/util/config/abc/exception.type.ts

@@ -0,0 +1,3 @@
+export interface AlainExceptionType {
+  typeDict?: { [key: number | string]: { img: string; title: string; desc?: string } };
+}

packages/util/config/abc/index.ts

@@ -14,3 +14,4 @@ export * from './zip.type';
 export * from './media.type';
 export * from './pdf.type';
 export * from './onboarding.type';
+export * from './exception.type';

packages/util/config/config.types.ts

@@ -3,6 +3,7 @@ import { InjectionToken } from '@angular/core';
 import {
   AlainDateRangePickerConfig,
   AlainErrorCollectConfig,
+  AlainExceptionType,
   AlainImageConfig,
   AlainLoadingConfig,
   AlainLodopConfig,
@@ -30,6 +31,7 @@ import { AlainUtilCurrencyConfig } from './util/currency.type';
 
 export interface AlainConfig {
   dataRange?: AlainDateRangePickerConfig;
+  exception?: AlainExceptionType;
   errorCollect?: AlainErrorCollectConfig;
   image?: AlainImageConfig;
   loading?: AlainLoadingConfig;