diff --git a/README.md b/README.md
index e9a35b3..4d3ba50 100644
--- a/README.md
+++ b/README.md
@@ -20,6 +20,7 @@ DevUI Admin is an enterprise-level mid- and back-end front-end/design solution.
 - Preview: https://devui.design/admin/
 - Home Page: https://devui.design/admin-page/home
 - Document：https://devui.design/admin-page/docs/getting-started
+- Materials：https://devui.design/admin-materials/
 
 ## Features
 ![avatar](home-1.png)
diff --git a/README_zh_CN.md b/README_zh_CN.md
index 2127ed3..b602c90 100644
--- a/README_zh_CN.md
+++ b/README_zh_CN.md
@@ -19,6 +19,7 @@ DevUI Admin 是一个企业级中后台前端/设计解决方案，依据 DevUI
 - 预览：https://devui.design/admin/
 - 首页：https://devui.design/admin-page/home
 - 文档：https://devui.design/admin-page/docs/getting-started
+- Admin 区块：https://devui.design/admin-materials/
 
 ## 特性
 
diff --git a/package.json b/package.json
index fe0ca46..0a0642c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ng-devui-admin",
-  "version": "1.2.0",
+  "version": "2.0.0",
   "license": "MIT",
   "description": "DevUI Admin based on Angular and DevUI components",
   "repository": {
@@ -35,8 +35,7 @@
     "@ngx-translate/http-loader": "^6.0.0",
     "color": "^3.1.3",
     "echarts": "^5.1.1",
-    "ng-devui": "^12.0.0-beta.1",
-    "ng-packagr": "^12.0.5",
+    "ng-devui": "^12.0.0",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
     "zone.js": "~0.11.4"
diff --git a/src/app/@core/core.module.ts b/src/app/@core/core.module.ts
index 87d4344..eb1c8ca 100644
--- a/src/app/@core/core.module.ts
+++ b/src/app/@core/core.module.ts
@@ -30,7 +30,7 @@ const DATA_SERVICES = [
 ];
 
 export const DEVUI_CORE_PROVIDERS = [
-  ...MockDataModule.forRoot().providers,
+  ...MockDataModule.forRoot().providers!,
   ...DATA_SERVICES,
   AuthService,
   PersonalizeService,
diff --git a/src/app/@core/data/userData.ts b/src/app/@core/data/userData.ts
index 0549cbc..cbcdd83 100644
--- a/src/app/@core/data/userData.ts
+++ b/src/app/@core/data/userData.ts
@@ -1,8 +1,8 @@
-import { Observable } from "rxjs";
+import { Observable } from 'rxjs';
 
 export interface Team {
   name?: string;
-  label?: string; 
+  label?: string;
 }
 
 export interface User {
@@ -12,11 +12,10 @@ export interface User {
   assign?: string;
   group?: string;
   address?: string;
-  tags?: string[];
+  tags?: any[];
   teams?: Team[];
 }
 
-
 export interface Article {
   id?: string;
   title?: string;
@@ -38,7 +37,7 @@ export interface Project {
 }
 
 export abstract class UserData {
-  abstract getUser(): Observable<User[]>;
+  abstract getUser(): Observable<User>;
   abstract getArticles(): Observable<Article[]>;
   abstract getProjects(): Observable<Project[]>;
-}
\ No newline at end of file
+}
diff --git a/src/app/@core/mock/echarts.service.ts b/src/app/@core/mock/echarts.service.ts
index 6732863..1dadabe 100644
--- a/src/app/@core/mock/echarts.service.ts
+++ b/src/app/@core/mock/echarts.service.ts
@@ -126,57 +126,9 @@ export class EchartsService {
       {
         name: '服务水位',
         data: [
-          21.69,
-          30.16,
-          11.64,
-          11.64,
-          31.22,
-          17.46,
-          14.81,
-          44.44,
-          28.57,
-          14.81,
-          12.7,
-          35.98,
-          23.28,
-          16.93,
-          19.58,
-          8.99,
-          11.64,
-          4.23,
-          5.29,
-          1.06,
-          3.7,
-          3.17,
-          3.17,
-          5.82,
-          16.4,
-          15.87,
-          18.52,
-          13.76,
-          19.05,
-          26.46,
-          30.16,
-          24.87,
-          23.81,
-          24.87,
-          16.93,
-          17.99,
-          13.76,
-          10.58,
-          20.63,
-          12.7,
-          13.17,
-          15.82,
-          16.4,
-          15.87,
-          8.52,
-          3.76,
-          19.05,
-          6.46,
-          30.16,
-          24.87,
-          13.81,
+          21.69, 30.16, 11.64, 11.64, 31.22, 17.46, 14.81, 44.44, 28.57, 14.81, 12.7, 35.98, 23.28, 16.93, 19.58, 8.99, 11.64, 4.23, 5.29,
+          1.06, 3.7, 3.17, 3.17, 5.82, 16.4, 15.87, 18.52, 13.76, 19.05, 26.46, 30.16, 24.87, 23.81, 24.87, 16.93, 17.99, 13.76, 10.58,
+          20.63, 12.7, 13.17, 15.82, 16.4, 15.87, 8.52, 3.76, 19.05, 6.46, 30.16, 24.87, 13.81,
         ],
         type: 'line',
         smooth: false,
@@ -632,7 +584,7 @@ export class EchartsService {
       trigger: 'item',
       showDelay: 0,
       transitionDuration: 0.2,
-      formatter: function (params) {
+      formatter: function (params: any) {
         return `用户数 <br/> ${params.name}: ${params.value}`;
       },
     },
diff --git a/src/app/@core/mock/list-data.service.ts b/src/app/@core/mock/list-data.service.ts
index 9cfc2ad..c8cdfd3 100644
--- a/src/app/@core/mock/list-data.service.ts
+++ b/src/app/@core/mock/list-data.service.ts
@@ -298,8 +298,7 @@ export class ListDataService extends ListData {
     {
       name: 'React',
       title: 'React',
-      imgSrc:
-        'https://codingthesmartway.com/wp-content/uploads/2019/12/logo_react.png',
+      imgSrc: 'https://codingthesmartway.com/wp-content/uploads/2019/12/logo_react.png',
       content:
         'DevUI 是面向企业中后台产品的开源前端解决方案，其设计价值观基于"至简"、"沉浸"、"灵活"三种自然与人文相结合的理念，旨在为设计....',
       actions: [
@@ -333,8 +332,7 @@ export class ListDataService extends ListData {
     {
       name: 'Webpack',
       title: 'Webpack',
-      imgSrc:
-        'https://webpack.js.org/icon-square-small.85ba630cf0c5f29ae3e3.svg',
+      imgSrc: 'https://webpack.js.org/icon-square-small.85ba630cf0c5f29ae3e3.svg',
       content:
         'DevUI 是面向企业中后台产品的开源前端解决方案，其设计价值观基于"至简"、"沉浸"、"灵活"三种自然与人文相结合的理念，旨在为设计....',
       actions: [
@@ -383,8 +381,7 @@ export class ListDataService extends ListData {
     {
       name: 'React',
       title: 'React',
-      imgSrc:
-        'https://codingthesmartway.com/wp-content/uploads/2019/12/logo_react.png',
+      imgSrc: 'https://codingthesmartway.com/wp-content/uploads/2019/12/logo_react.png',
       content:
         'DevUI 是面向企业中后台产品的开源前端解决方案，其设计价值观基于"至简"、"沉浸"、"灵活"三种自然与人文相结合的理念，旨在为设计....',
       actions: [
@@ -418,8 +415,7 @@ export class ListDataService extends ListData {
     {
       name: 'Webpack',
       title: 'Webpack',
-      imgSrc:
-        'https://webpack.js.org/icon-square-small.85ba630cf0c5f29ae3e3.svg',
+      imgSrc: 'https://webpack.js.org/icon-square-small.85ba630cf0c5f29ae3e3.svg',
       content:
         'DevUI 是面向企业中后台产品的开源前端解决方案，其设计价值观基于"至简"、"沉浸"、"灵活"三种自然与人文相结合的理念，旨在为设计....',
       actions: [
@@ -468,8 +464,7 @@ export class ListDataService extends ListData {
     {
       name: 'React',
       title: 'React',
-      imgSrc:
-        'https://codingthesmartway.com/wp-content/uploads/2019/12/logo_react.png',
+      imgSrc: 'https://codingthesmartway.com/wp-content/uploads/2019/12/logo_react.png',
       content:
         'DevUI 是面向企业中后台产品的开源前端解决方案，其设计价值观基于"至简"、"沉浸"、"灵活"三种自然与人文相结合的理念，旨在为设计....',
       actions: [
@@ -503,8 +498,7 @@ export class ListDataService extends ListData {
     {
       name: 'Webpack',
       title: 'Webpack',
-      imgSrc:
-        'https://webpack.js.org/icon-square-small.85ba630cf0c5f29ae3e3.svg',
+      imgSrc: 'https://webpack.js.org/icon-square-small.85ba630cf0c5f29ae3e3.svg',
       content:
         'DevUI 是面向企业中后台产品的开源前端解决方案，其设计价值观基于"至简"、"沉浸"、"灵活"三种自然与人文相结合的理念，旨在为设计....',
       actions: [
@@ -520,11 +514,8 @@ export class ListDataService extends ListData {
     },
   ];
 
-  private pagerList(data, pager) {
-    return data.slice(
-      pager.pageSize * (pager.pageIndex - 1),
-      pager.pageSize * pager.pageIndex
-    );
+  private pagerList(data: Item[] | Card[], pager: ListPager) {
+    return data.slice(pager.pageSize! * (pager.pageIndex! - 1), pager.pageSize! * pager.pageIndex!);
   }
 
   getListData(pager: ListPager): Observable<any> {
diff --git a/src/app/@core/mock/user-data.service.ts b/src/app/@core/mock/user-data.service.ts
index 3f4932d..f945136 100644
--- a/src/app/@core/mock/user-data.service.ts
+++ b/src/app/@core/mock/user-data.service.ts
@@ -14,7 +14,7 @@ export class UserDataService extends UserData {
     assign: '极致',
     group: 'Group',
     address: '中国',
-    tags: ['简单', '敏捷', '丰富', '精致']
+    tags: ['简单', '敏捷', '丰富', '精致'],
   };
 
   private articles: Article[] = [
@@ -28,7 +28,7 @@ export class UserDataService extends UserData {
       starNum: 33,
       agree: 69,
       authorUrl: '/pages/user/settings',
-      message: 35
+      message: 35,
     },
     {
       id: '820000199703012301',
@@ -40,7 +40,7 @@ export class UserDataService extends UserData {
       starNum: 77,
       agree: 34,
       authorUrl: '/pages/user/settings',
-      message: 73
+      message: 73,
     },
     {
       id: '510000201901248355',
@@ -52,7 +52,7 @@ export class UserDataService extends UserData {
       starNum: 67,
       agree: 30,
       authorUrl: '/pages/user/settings',
-      message: 91
+      message: 91,
     },
     {
       id: '210000199003287765',
@@ -64,7 +64,7 @@ export class UserDataService extends UserData {
       starNum: 63,
       agree: 6,
       authorUrl: '/pages/user/settings',
-      message: 29
+      message: 29,
     },
     {
       id: '430000199211271136',
@@ -76,7 +76,7 @@ export class UserDataService extends UserData {
       starNum: 98,
       agree: 100,
       authorUrl: '/pages/user/settings',
-      message: 4
+      message: 4,
     },
     {
       id: '610000199105240145',
@@ -88,7 +88,7 @@ export class UserDataService extends UserData {
       starNum: 15,
       agree: 35,
       authorUrl: '/pages/user/settings',
-      message: 95
+      message: 95,
     },
     {
       id: '510000201209291648',
@@ -100,7 +100,7 @@ export class UserDataService extends UserData {
       starNum: 2,
       agree: 80,
       authorUrl: '/pages/user/settings',
-      message: 58
+      message: 58,
     },
     {
       id: '530000197108043420',
@@ -112,7 +112,7 @@ export class UserDataService extends UserData {
       starNum: 86,
       agree: 83,
       authorUrl: '/pages/user/settings',
-      message: 83
+      message: 83,
     },
     {
       id: '130000198805188377',
@@ -124,7 +124,7 @@ export class UserDataService extends UserData {
       starNum: 31,
       agree: 67,
       authorUrl: '/pages/user/settings',
-      message: 6
+      message: 6,
     },
     {
       id: '820000201410156619',
@@ -136,7 +136,7 @@ export class UserDataService extends UserData {
       starNum: 97,
       agree: 39,
       authorUrl: '/pages/user/settings',
-      message: 95
+      message: 95,
     },
     {
       id: '12000019830829269X',
@@ -148,7 +148,7 @@ export class UserDataService extends UserData {
       starNum: 95,
       agree: 15,
       authorUrl: '/pages/user/settings',
-      message: 98
+      message: 98,
     },
     {
       id: '130000199911133614',
@@ -160,7 +160,7 @@ export class UserDataService extends UserData {
       starNum: 75,
       agree: 54,
       authorUrl: '/pages/user/settings',
-      message: 78
+      message: 78,
     },
     {
       id: '41000020090608032X',
@@ -172,7 +172,7 @@ export class UserDataService extends UserData {
       starNum: 62,
       agree: 2,
       authorUrl: '/pages/user/settings',
-      message: 6
+      message: 6,
     },
     {
       id: '450000201401275457',
@@ -184,7 +184,7 @@ export class UserDataService extends UserData {
       starNum: 37,
       agree: 40,
       authorUrl: '/pages/user/settings',
-      message: 82
+      message: 82,
     },
     {
       id: '410000198205184863',
@@ -196,7 +196,7 @@ export class UserDataService extends UserData {
       starNum: 88,
       agree: 6,
       authorUrl: '/pages/user/settings',
-      message: 11
+      message: 11,
     },
     {
       id: '360000199712301227',
@@ -208,7 +208,7 @@ export class UserDataService extends UserData {
       starNum: 82,
       agree: 94,
       authorUrl: '/pages/user/settings',
-      message: 95
+      message: 95,
     },
     {
       id: '230000200301314986',
@@ -220,7 +220,7 @@ export class UserDataService extends UserData {
       starNum: 99,
       agree: 83,
       authorUrl: '/pages/user/settings',
-      message: 24
+      message: 24,
     },
     {
       id: '370000200501172135',
@@ -232,7 +232,7 @@ export class UserDataService extends UserData {
       starNum: 11,
       agree: 23,
       authorUrl: '/pages/user/settings',
-      message: 66
+      message: 66,
     },
     {
       id: '120000201208247124',
@@ -244,7 +244,7 @@ export class UserDataService extends UserData {
       starNum: 56,
       agree: 6,
       authorUrl: '/pages/user/settings',
-      message: 95
+      message: 95,
     },
     {
       id: '320000200304197246',
@@ -256,8 +256,8 @@ export class UserDataService extends UserData {
       starNum: 71,
       agree: 43,
       authorUrl: '/pages/user/settings',
-      message: 70
-    }
+      message: 70,
+    },
   ];
 
   private projects: Project[] = [
@@ -265,77 +265,77 @@ export class UserDataService extends UserData {
       id: '150000198410122852',
       title: 'DevUI 是面向企业中后台产品的开源前端解决方案',
       desc: 'DevUI 是面向企业中后台产品的开源前端解决方案，其设计价值观基于"至简"、"沉浸"、"灵活"三种自然与人文相结合的理念，旨在为设计...',
-      imgSrc: 'http://devui.huawei.com/components/assets/image1.png'
+      imgSrc: 'http://devui.huawei.com/components/assets/image1.png',
     },
     {
       id: '450000198811073300',
       title: 'DevUI 是面向企业中后台产品的开源前端解决方案',
       desc: 'DevUI 是面向企业中后台产品的开源前端解决方案，其设计价值观基于"至简"、"沉浸"、"灵活"三种自然与人文相结合的理念，旨在为设计...',
-      imgSrc: 'http://devui.huawei.com/components/assets/image1.png'
+      imgSrc: 'http://devui.huawei.com/components/assets/image1.png',
     },
     {
       id: '530000201803276639',
       title: 'DevUI 是面向企业中后台产品的开源前端解决方案',
       desc: 'DevUI 是面向企业中后台产品的开源前端解决方案，其设计价值观基于"至简"、"沉浸"、"灵活"三种自然与人文相结合的理念，旨在为设计...',
-      imgSrc: 'http://devui.huawei.com/components/assets/image1.png'
+      imgSrc: 'http://devui.huawei.com/components/assets/image1.png',
     },
     {
       id: '710000199408086871',
       title: 'DevUI 是面向企业中后台产品的开源前端解决方案',
       desc: 'DevUI 是面向企业中后台产品的开源前端解决方案，其设计价值观基于"至简"、"沉浸"、"灵活"三种自然与人文相结合的理念，旨在为设计...',
-      imgSrc: 'http://devui.huawei.com/components/assets/image1.png'
+      imgSrc: 'http://devui.huawei.com/components/assets/image1.png',
     },
     {
       id: '540000197705258683',
       title: 'DevUI 是面向企业中后台产品的开源前端解决方案',
       desc: 'DevUI 是面向企业中后台产品的开源前端解决方案，其设计价值观基于"至简"、"沉浸"、"灵活"三种自然与人文相结合的理念，旨在为设计...',
-      imgSrc: 'http://devui.huawei.com/components/assets/image1.png'
+      imgSrc: 'http://devui.huawei.com/components/assets/image1.png',
     },
     {
       id: '540000200308049030',
       title: 'DevUI 是面向企业中后台产品的开源前端解决方案',
       desc: 'DevUI 是面向企业中后台产品的开源前端解决方案，其设计价值观基于"至简"、"沉浸"、"灵活"三种自然与人文相结合的理念，旨在为设计...',
-      imgSrc: 'http://devui.huawei.com/components/assets/image1.png'
+      imgSrc: 'http://devui.huawei.com/components/assets/image1.png',
     },
     {
       id: '510000199812191617',
       title: 'DevUI 是面向企业中后台产品的开源前端解决方案',
       desc: 'DevUI 是面向企业中后台产品的开源前端解决方案，其设计价值观基于"至简"、"沉浸"、"灵活"三种自然与人文相结合的理念，旨在为设计...',
-      imgSrc: 'http://devui.huawei.com/components/assets/image1.png'
+      imgSrc: 'http://devui.huawei.com/components/assets/image1.png',
     },
     {
       id: '330000198306135710',
       title: 'DevUI 是面向企业中后台产品的开源前端解决方案',
       desc: 'DevUI 是面向企业中后台产品的开源前端解决方案，其设计价值观基于"至简"、"沉浸"、"灵活"三种自然与人文相结合的理念，旨在为设计...',
-      imgSrc: 'http://devui.huawei.com/components/assets/image1.png'
+      imgSrc: 'http://devui.huawei.com/components/assets/image1.png',
     },
     {
       id: '360000197002172855',
       title: 'DevUI 是面向企业中后台产品的开源前端解决方案',
       desc: 'DevUI 是面向企业中后台产品的开源前端解决方案，其设计价值观基于"至简"、"沉浸"、"灵活"三种自然与人文相结合的理念，旨在为设计...',
-      imgSrc: 'http://devui.huawei.com/components/assets/image1.png'
+      imgSrc: 'http://devui.huawei.com/components/assets/image1.png',
     },
     {
       id: '120000201301298356',
       title: 'DevUI 是面向企业中后台产品的开源前端解决方案',
       desc: 'DevUI 是面向企业中后台产品的开源前端解决方案，其设计价值观基于"至简"、"沉浸"、"灵活"三种自然与人文相结合的理念，旨在为设计...',
-      imgSrc: 'http://devui.huawei.com/components/assets/image1.png'
+      imgSrc: 'http://devui.huawei.com/components/assets/image1.png',
     },
     {
       id: '110000201312226778',
       title: 'DevUI 是面向企业中后台产品的开源前端解决方案',
       desc: 'DevUI 是面向企业中后台产品的开源前端解决方案，其设计价值观基于"至简"、"沉浸"、"灵活"三种自然与人文相结合的理念，旨在为设计...',
-      imgSrc: 'http://devui.huawei.com/components/assets/image1.png'
+      imgSrc: 'http://devui.huawei.com/components/assets/image1.png',
     },
     {
       id: '42000019710813161X',
       title: 'DevUI 是面向企业中后台产品的开源前端解决方案',
       desc: 'DevUI 是面向企业中后台产品的开源前端解决方案，其设计价值观基于"至简"、"沉浸"、"灵活"三种自然与人文相结合的理念，旨在为设计...',
-      imgSrc: 'http://devui.huawei.com/components/assets/image1.png'
-    }
+      imgSrc: 'http://devui.huawei.com/components/assets/image1.png',
+    },
   ];
 
-  getUser(): Observable<any> {
+  getUser(): Observable<User> {
     return observableOf(this.user);
   }
 
diff --git a/src/app/@core/services/auth-guard-service.guard.ts b/src/app/@core/services/auth-guard-service.guard.ts
index ffef56c..e8c11df 100644
--- a/src/app/@core/services/auth-guard-service.guard.ts
+++ b/src/app/@core/services/auth-guard-service.guard.ts
@@ -7,7 +7,7 @@ import { AuthService } from './auth.service';
 
 @Injectable()
 export class AuthGuardService implements CanActivate {
-  i18nValues;
+  i18nValues: any;
 
   constructor(
     private router: Router,
diff --git a/src/app/@core/services/custom-theme.service.ts b/src/app/@core/services/custom-theme.service.ts
index 00916d6..8d8abb4 100644
--- a/src/app/@core/services/custom-theme.service.ts
+++ b/src/app/@core/services/custom-theme.service.ts
@@ -1,282 +1,283 @@
 import { Injectable } from '@angular/core';
 import { devuiDarkTheme, devuiLightTheme } from 'ng-devui/theme';
+// @ts-ignore
 import * as Color from 'color';
 import { ColorHierarchyMap } from './color-hierarchy';
 type HslModelKey = 'h' | 's' | 'l' | 'a' | 'sp' | 'lp' | 'ap';
 type HsvModelKey = 'h' | 's' | 'v' | 'a' | 'sp' | 'vp' | 'ap';
 interface IColorOffset {
-    hsl?: {
-        [p in HslModelKey]?: number;
-    };
-    hsv?: {
-        [p in HsvModelKey]?: number;
-    };
+  hsl?: {
+    [p in HslModelKey]?: number;
+  };
+  hsv?: {
+    [p in HsvModelKey]?: number;
+  };
 }
-type ISingleOffset = { [p in HslModelKey]?: number; } | { [p in HsvModelKey]?: number; };
+type ISingleOffset = { [p in HslModelKey]?: number } | { [p in HsvModelKey]?: number };
 interface IColorObject {
-    colorName?: string;
-    color?: Color;
-    extends?: Color;
-    offset?: IColorOffset;
+  colorName?: string;
+  color?: Color;
+  extends?: Color;
+  offset?: IColorOffset;
 }
 
 interface IColorHierarchy {
-    [colorName: string]: {
-        'default-value'?: string;
-        extends?: string;
-        dependency?: string | Array<string>;
-        offset?: {
-            hsl?: {
-                [p in HslModelKey]?: number;
-            },
-            hsv?: {
-                [p in HsvModelKey]?: number;
-            }
-        }
+  [colorName: string]: {
+    'default-value'?: string;
+    extends?: string;
+    dependency?: string | Array<string>;
+    offset?: {
+      hsl?: {
+        [p in HslModelKey]?: number;
+      };
+      hsv?: {
+        [p in HsvModelKey]?: number;
+      };
     };
+  };
 }
 interface IThemeData {
-    [colorName: string]: string;
+  [colorName: string]: string;
 }
 interface IColorDef {
-    colorName?: string;
-    color?: string;
+  colorName?: string;
+  color?: string;
 }
 type IEffect = 'hsl' | 'hsv' | 'strong' | 'soft' | 'light' | 'contrast';
 // hsl | hsv | 浓郁 | 柔和 | 轻快 | 对比 |
 @Injectable()
 export class CustomThemeService {
-    colorHierarchy = ColorHierarchyMap;
-    themeDataLight = devuiLightTheme.data;
-    themeDataDark = devuiDarkTheme.data;
+  colorHierarchy: any = ColorHierarchyMap;
+  themeDataLight = devuiLightTheme.data;
+  themeDataDark = devuiDarkTheme.data;
 
-    public genThemeData(colorChanges: Array<IColorDef>, isDark = false, effect?: IEffect): IThemeData {
-        const themeData = isDark ? this.themeDataDark : this.themeDataLight;
-        const pattern = this.genColorPattern(this.colorHierarchy, themeData);
-        const updatedPattern = this.updateColor(colorChanges, pattern, effect);
-        this.fillEmptyColor(updatedPattern, effect);
-        return this.pattern2ThemeData(updatedPattern);
-    }
+  public genThemeData(colorChanges: Array<IColorDef>, isDark = false, effect?: IEffect): IThemeData {
+    const themeData = isDark ? this.themeDataDark : this.themeDataLight;
+    const pattern = this.genColorPattern(this.colorHierarchy, themeData);
+    const updatedPattern = this.updateColor(colorChanges, pattern, effect);
+    this.fillEmptyColor(updatedPattern, effect);
+    return this.pattern2ThemeData(updatedPattern);
+  }
 
-    private updateColor(colorChanges: Array<IColorDef>, colorHierarchy: IColorHierarchy, effect?: IEffect) {
-        const changeKeys = colorChanges.map(change => change.colorName);
-        const changeStack = [...changeKeys];
-        const colorKeys = Object.keys(colorHierarchy);
-        const pattern = JSON.parse(JSON.stringify(colorHierarchy)) as IColorHierarchy;
-        let count = 0;
-        while (changeStack.length) {
-            const handleKey = changeStack.splice(0, 1).pop();
-            if (count < changeKeys.length) {
-                pattern[handleKey]['default-value'] = colorChanges[count].color;
-            } else {
-                const extendsKey = pattern[handleKey].extends;
-                const extendsColor = Color(pattern[extendsKey]['default-value']);
-                const colorOffset = pattern[handleKey].offset;
-                const { mode, offset } = this.getColorEffectOffset(extendsColor, colorOffset, effect);
-                pattern[handleKey]['default-value'] = this.getHexOrRgba(
-                    this.getColorValue(extendsColor, offset, mode)
-                );
-            }
+  private updateColor(colorChanges: Array<IColorDef>, colorHierarchy: IColorHierarchy, effect?: IEffect) {
+    const changeKeys = colorChanges.map((change) => change.colorName);
+    const changeStack = [...changeKeys];
+    const colorKeys = Object.keys(colorHierarchy);
+    const pattern = JSON.parse(JSON.stringify(colorHierarchy)) as IColorHierarchy;
+    let count = 0;
+    while (changeStack.length) {
+      const handleKey = changeStack.splice(0, 1).pop()!;
+      if (count < changeKeys.length) {
+        pattern[handleKey]['default-value'] = colorChanges[count].color;
+      } else {
+        const extendsKey = pattern[handleKey].extends!;
+        const extendsColor = Color(pattern[extendsKey]['default-value']);
+        const colorOffset = pattern[handleKey].offset;
+        const { mode, offset } = this.getColorEffectOffset(extendsColor, colorOffset, effect);
+        pattern[handleKey]['default-value'] = this.getHexOrRgba(this.getColorValue(extendsColor, offset, mode));
+      }
 
-            colorKeys.forEach(colorName => {
-                if (handleKey === pattern[colorName].extends) {
-                    if (!(changeStack.indexOf(colorName) > -1) && !(changeKeys.indexOf(colorName) > -1)) {
-                        // 如果不是changeStackUI经做过标记，或者ChangeKeys直接指定了颜色，则标记为需要更新
-                        changeStack.push(colorName);
-                    }
-                }
-            });
-            count++;
+      colorKeys.forEach((colorName) => {
+        if (handleKey === pattern[colorName].extends) {
+          if (!(changeStack.indexOf(colorName) > -1) && !(changeKeys.indexOf(colorName) > -1)) {
+            // 如果不是changeStackUI经做过标记，或者ChangeKeys直接指定了颜色，则标记为需要更新
+            changeStack.push(colorName);
+          }
         }
-        return pattern;
-    }
-    private fillEmptyColor(pattern: IColorHierarchy, effect: IEffect) {
-        const colorKeys = Object.keys(pattern);
-        const noColorArray = colorKeys.map(colorName => ({
-            colorName: colorName,
-            pattern: pattern[colorName]
-        })).filter(color => !color.pattern['default-value']);
-        noColorArray.forEach(color => {
-
-            const handleKey = color.colorName;
-            const extendsKey = pattern[handleKey].extends;
-            const extendsColor = Color(pattern[extendsKey]['default-value']);
-            const colorOffset = pattern[handleKey].offset;
-            const { mode, offset } = this.getColorEffectOffset(extendsColor, colorOffset, effect);
-            pattern[handleKey]['default-value'] = this.getHexOrRgba(
-                this.getColorValue(extendsColor, offset, mode)
-            );
-        });
+      });
+      count++;
     }
+    return pattern;
+  }
+  private fillEmptyColor(pattern: IColorHierarchy, effect: IEffect | undefined) {
+    const colorKeys = Object.keys(pattern);
+    const noColorArray = colorKeys
+      .map((colorName) => ({
+        colorName: colorName,
+        pattern: pattern[colorName],
+      }))
+      .filter((color) => !color.pattern['default-value']);
+    noColorArray.forEach((color) => {
+      const handleKey = color.colorName;
+      const extendsKey = pattern[handleKey].extends!;
+      const extendsColor = Color(pattern[extendsKey]['default-value']);
+      const colorOffset = pattern[handleKey].offset;
+      const { mode, offset } = this.getColorEffectOffset(extendsColor, colorOffset, effect);
+      pattern[handleKey]['default-value'] = this.getHexOrRgba(this.getColorValue(extendsColor, offset, mode));
+    });
+  }
 
-    private pattern2ThemeData(pattern: IColorHierarchy): IThemeData {
-        const themeData = {};
-        const colorKeys = Object.keys(pattern);
-        colorKeys.forEach(colorName => {
-            themeData[colorName] = pattern[colorName]['default-value'];
-        });
-        return themeData;
-    }
+  private pattern2ThemeData(pattern: IColorHierarchy): IThemeData {
+    const themeData: any = {};
+    const colorKeys = Object.keys(pattern);
+    colorKeys.forEach((colorName) => {
+      themeData[colorName] = pattern[colorName]['default-value'];
+    });
+    return themeData;
+  }
 
-    private genColorPattern(colorHierarchy: IColorHierarchy, themeData: IThemeData): IColorHierarchy {
-        const pattern: IColorHierarchy = {};
-        const offset = this.getThemeOffset(colorHierarchy, themeData);
-        offset.forEach(obj => {
-            pattern[obj.colorName] = {
-                ...colorHierarchy[obj.colorName],
-                'default-value': themeData[obj.colorName],
-                offset: obj.offset
-            };
-        });
-        return pattern;
-    }
-    private getThemeOffset(colorHierarchy: IColorHierarchy, themeData: IThemeData): Array<IColorObject> {
-        const colorKeys = Object.keys(colorHierarchy);
-        const themeColorOffset = colorKeys.map(key => (
-            {
-                colorName: key,
-                color: Color(themeData[key]),
-                extends: this.colorHierarchy[key].extends
-                    ? Color(themeData[this.colorHierarchy[key].extends])
-                    : null
-            } as IColorObject
-        )).map(colorObj => {
-            if (colorObj.extends) {
-                colorObj.offset = {
-                    hsl: this.getColorOffset(colorObj.color, colorObj.extends, 'hsl'),
-                    hsv: this.getColorOffset(colorObj.color, colorObj.extends, 'hsv')
-                };
-            }
-            return colorObj;
-        });
-        return themeColorOffset;
-    }
+  private genColorPattern(colorHierarchy: IColorHierarchy, themeData: IThemeData): IColorHierarchy {
+    const pattern: IColorHierarchy = {};
+    const offset = this.getThemeOffset(colorHierarchy, themeData);
+    offset.forEach((obj) => {
+      pattern[obj.colorName!] = {
+        ...colorHierarchy[obj.colorName!],
+        'default-value': themeData[obj.colorName!],
+        offset: obj.offset,
+      };
+    });
+    return pattern;
+  }
+  private getThemeOffset(colorHierarchy: IColorHierarchy, themeData: IThemeData): Array<IColorObject> {
+    const colorKeys = Object.keys(colorHierarchy);
+    const themeColorOffset = colorKeys
+      .map(
+        (key) =>
+          ({
+            colorName: key,
+            color: Color(themeData[key]),
+            extends: this.colorHierarchy[key].extends ? Color(themeData[this.colorHierarchy[key].extends]) : null,
+          } as IColorObject)
+      )
+      .map((colorObj) => {
+        if (colorObj.extends) {
+          colorObj.offset = {
+            hsl: this.getColorOffset(colorObj.color, colorObj.extends, 'hsl'),
+            hsv: this.getColorOffset(colorObj.color, colorObj.extends, 'hsv'),
+          };
+        }
+        return colorObj;
+      });
+    return themeColorOffset;
+  }
 
-    private getColorOffset(target: Color, source: Color, mode: 'hsl' | 'hsv'): ISingleOffset {
-        const targetModel = target[mode]();
-        const sourceModel = source[mode]();
-        const key = mode.split('');
-        const offset = {
-            [key[0]]: targetModel.color[0] - sourceModel.color[0],
-            [key[1]]: targetModel.color[1] - sourceModel.color[1],
-            [key[2]]: targetModel.color[2] - sourceModel.color[2],
-            a: targetModel.valpha - sourceModel.valpha
+  private getColorOffset(target: Color, source: Color, mode: 'hsl' | 'hsv'): ISingleOffset {
+    const targetModel = target[mode]();
+    const sourceModel = source[mode]();
+    const key = mode.split('');
+    const offset = {
+      [key[0]]: targetModel.color[0] - sourceModel.color[0],
+      [key[1]]: targetModel.color[1] - sourceModel.color[1],
+      [key[2]]: targetModel.color[2] - sourceModel.color[2],
+      a: targetModel.valpha - sourceModel.valpha,
+    };
+    const percent = {
+      [key[1] + 'p']:
+        offset[key[1]] > 0 ? (offset[key[1]] * 100) / (100 - sourceModel.color[1]) : (offset[key[1]] * 100) / sourceModel.color[1],
+      [key[2] + 'p']:
+        offset[key[2]] > 0 ? (offset[key[2]] * 100) / (100 - sourceModel.color[2]) : (offset[key[2]] * 100) / sourceModel.color[2],
+      ap: offset.a > 0 ? (offset.a * 100) / (1 - sourceModel.valpha) : (offset.a * 100) / sourceModel.valpha,
+    };
+    return {
+      ...offset,
+      ...percent,
+    };
+  }
+  private getColorEffectOffset(source: Color, colorOffset: IColorOffset | any, effect?: IEffect) {
+    let result: any = {};
+    switch (effect) {
+      case 'hsl':
+        result = {
+          mode: 'hsl',
+          offset: colorOffset.hsl,
+        };
+        break;
+      case 'hsv':
+        result = {
+          mode: 'hsv',
+          offset: colorOffset.hsv,
+        };
+        break;
+      case 'strong':
+        result = {
+          mode: 'hsl',
+          offset: {
+            ...colorOffset.hsl,
+            sp:
+              colorOffset?.hsl?.sp! > 0
+                ? this.minmax(colorOffset?.hsl?.sp! * 1.3, colorOffset?.hsl?.sp!, 100)
+                : colorOffset?.hsl?.sp! * 0.75,
+          },
+        };
+        break;
+      case 'soft':
+        result = {
+          mode: 'hsv',
+          offset: {
+            ...colorOffset.hsv,
+            sp:
+              colorOffset?.hsv?.sp! > 0
+                ? this.minmax(colorOffset?.hsv?.sp! * 1.25, colorOffset?.hsv?.sp!, 100)
+                : colorOffset?.hsv?.sp! * 0.5,
+          },
+        };
+        break;
+      case 'light':
+        result = {
+          mode: 'hsl',
+          offset: {
+            ...colorOffset.hsl,
+            lp: colorOffset?.hsl?.lp! > 0 ? this.minmax(colorOffset?.hsl?.lp!, colorOffset?.hsl?.lp!, 100) : colorOffset?.hsl?.lp! * 0.2,
+          },
         };
-        const percent = {
-            [key[1] + 'p']: offset[key[1]] > 0
-                ? offset[key[1]] * 100 / (100 - sourceModel.color[1])
-                : offset[key[1]] * 100 / sourceModel.color[1],
-            [key[2] + 'p']: offset[key[2]] > 0
-                ? offset[key[2]] * 100 / (100 - sourceModel.color[2])
-                : offset[key[2]] * 100 / sourceModel.color[2],
-            ap: offset.a > 0
-                ? offset.a * 100 / (1 - sourceModel.valpha)
-                : offset.a * 100 / sourceModel.valpha
+        break;
+      case 'contrast': // 需要计算后的颜色，未支持
+        result = {
+          mode: 'hsl',
+          offset: {
+            ...colorOffset.hsl,
+          },
         };
-        return {
-            ...offset,
-            ...percent
+        break;
+      default:
+        result = {
+          mode: 'hsl',
+          offset: colorOffset.hsl,
         };
+        break;
     }
-    private getColorEffectOffset(source: Color, colorOffset: IColorOffset, effect?: IEffect) {
-        let result;
-        switch (effect) {
-            case 'hsl':
-                result = {
-                    mode: 'hsl',
-                    offset: colorOffset.hsl
-                };
-                break;
-            case 'hsv':
-                result = {
-                    mode: 'hsv',
-                    offset: colorOffset.hsv
-                };
-                break;
-            case 'strong':
-                result = {
-                    mode: 'hsl',
-                    offset: {
-                        ...colorOffset.hsl,
-                        sp: colorOffset.hsl.sp > 0
-                            ? this.minmax(colorOffset.hsl.sp * 1.3, colorOffset.hsl.sp, 100)
-                            : colorOffset.hsl.sp * 0.75
-                    }
-                };
-                break;
-            case 'soft':
-                result = {
-                    mode: 'hsv',
-                    offset: {
-                        ...colorOffset.hsv,
-                        sp: colorOffset.hsv.sp > 0
-                            ? this.minmax(colorOffset.hsv.sp * 1.25, colorOffset.hsv.sp, 100)
-                            : colorOffset.hsv.sp * 0.5
-                    }
-                };
-                break;
-            case 'light':
-                result = {
-                    mode: 'hsl',
-                    offset: {
-                        ...colorOffset.hsl,
-                        lp: colorOffset.hsl.lp > 0
-                            ? this.minmax(colorOffset.hsl.lp, colorOffset.hsl.lp, 100)
-                            : colorOffset.hsl.lp * 0.2
-                    }
-                };
-                break;
-            case 'contrast': // 需要计算后的颜色，未支持
-                result = {
-                    mode: 'hsl',
-                    offset: {
-                        ...colorOffset.hsl
-                    }
-                };
-                break;
-            default:
-                result = {
-                    mode: 'hsl',
-                    offset: colorOffset.hsl
-                };
-                break;
+    return result;
+  }
 
-        }
-        return result;
-    }
+  private getColorValue(source: Color, offset: any, mode: 'hsl' | 'hsv') {
+    const sourceModel = source[mode]();
+    const key = mode.split('');
+    const value = {
+      [key[0]]: (sourceModel.color[0] + offset[key[0]]) % 360,
+      [key[1]]:
+        offset[key[1] + 'p'] > 0
+          ? sourceModel.color[1] + (offset[key[1] + 'p'] * (100 - sourceModel.color[1])) / 100
+          : sourceModel.color[1] + (sourceModel.color[1] * offset[key[1] + 'p']) / 100,
+      [key[2]]:
+        offset[key[2] + 'p'] > 0
+          ? sourceModel.color[2] + (offset[key[2] + 'p'] * (100 - sourceModel.color[2])) / 100
+          : sourceModel.color[2] + (sourceModel.color[2] * offset[key[2] + 'p']) / 100,
+      a:
+        offset.ap! > 0
+          ? sourceModel.valpha + (offset.ap! * (1 - sourceModel.valpha)) / 100
+          : sourceModel.valpha + (sourceModel.valpha * offset.ap!) / 100,
+    };
+    return Color([value[key[0]], value[key[1]], value[key[2]], value.a], mode);
+  }
 
-    private getColorValue(source: Color, offset: ISingleOffset, mode: 'hsl' | 'hsv') {
-        const sourceModel = source[mode]();
-        const key = mode.split('');
-        const value = {
-            [key[0]]: (sourceModel.color[0] + offset[key[0]]) % 360,
-            [key[1]]: offset[key[1] + 'p'] > 0
-                ? (sourceModel.color[1] + offset[key[1] + 'p'] * (100 - sourceModel.color[1]) / 100)
-                : (sourceModel.color[1] + sourceModel.color[1] * offset[key[1] + 'p'] / 100),
-            [key[2]]: offset[key[2] + 'p'] > 0
-                ? (sourceModel.color[2] + offset[key[2] + 'p'] * (100 - sourceModel.color[2]) / 100)
-                : (sourceModel.color[2] + sourceModel.color[2] * offset[key[2] + 'p'] / 100),
-            a: offset.ap > 0
-                ? (sourceModel.valpha + offset.ap * (1 - sourceModel.valpha) / 100)
-                : (sourceModel.valpha + sourceModel.valpha * offset.ap / 100)
-        };
-        return Color([value[key[0]], value[key[1]], value[key[2]], value.a], mode);
+  private getHexOrRgba(color: Color) {
+    if (color.alpha() < 1) {
+      const rgb = color.rgb();
+      const [r, g, b] = rgb.color;
+      const a = rgb.valpha;
+      return `rgba(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)}, ${a})`;
+    } else {
+      return color.hex();
     }
+  }
 
-    private getHexOrRgba(color: Color) {
-        if (color.alpha() < 1) {
-            const rgb = color.rgb();
-            const [r, g, b] = rgb.color;
-            const a = rgb.valpha;
-            return `rgba(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)}, ${a})`;
-        } else {
-            return color.hex();
-        }
+  private minmax(v: number, min: number, max: number) {
+    if (v < min) {
+      return min;
     }
-
-    private minmax(v: number, min: number, max: number) {
-        if (v < min) { return min; }
-        if (v > max) { return max; }
-        return v;
+    if (v > max) {
+      return max;
     }
+    return v;
+  }
 }
diff --git a/src/app/@core/services/personalize.service.ts b/src/app/@core/services/personalize.service.ts
index 936931f..330ac75 100644
--- a/src/app/@core/services/personalize.service.ts
+++ b/src/app/@core/services/personalize.service.ts
@@ -5,13 +5,38 @@ import { ThemeType } from 'src/app/@shared/models/theme';
 import { LARGE_RADIUS, LARGE_SIZE, MEDIUM_RADIUS, MEDIUM_SIZE, NORMAL_RADIUS, NORMAL_SIZE } from 'src/config/custom-theme';
 import { CustomThemeService } from './custom-theme.service';
 
+export interface ThemeConfigItem {
+  name: string;
+  id: string;
+  data: {
+    'devui-border-radius'?: string;
+    'devui-border-radius-card'?: string;
+    'devui-font-size'?: string;
+    'devui-font-size-card-title'?: string;
+    'devui-font-size-page-title'?: string;
+    'devui-font-size-modal-title'?: string;
+    'devui-font-size-price'?: string;
+    'devui-font-size-data-overview'?: string;
+    'devui-font-size-icon'?: string;
+    'devui-font-size-sm'?: string;
+    'devui-font-size-md'?: string;
+    'devui-font-size-lg'?: string;
+  };
+}
+
+export interface ThemeConfig {
+  name: 'themes' | 'font' | 'radius';
+  icon: string;
+  items: ThemeConfigItem[];
+}
+
 @Injectable()
 export class PersonalizeService {
-  themes = [];
+  themes: ThemeConfigItem[] = [];
 
   private _themeChange = new ReplaySubject<any>(1); // 主题切换
 
-  configs = [
+  configs: ThemeConfig[] = [
     {
       name: 'themes',
       icon: 'icon-color',
@@ -68,15 +93,15 @@ export class PersonalizeService {
 
   constructor(private customThemeService: CustomThemeService) {}
   initTheme() {
-    if (window['devuiThemes']) {
+    if ((window as { [key: string]: any })['devuiThemes']) {
       //TODO 组件库开源版本这个色值错误
-      window['devuiThemes'].devuiDarkTheme.data['devui-placeholder'] = '#8A8A8A';
-      this.themes = Object.values(window['devuiThemes']);
+      (window as { [key: string]: any })['devuiThemes'].devuiDarkTheme.data['devui-placeholder'] = '#8A8A8A';
+      this.themes = Object.values((window as { [key: string]: any })['devuiThemes']);
       const { brand, isDark } = localStorage.getItem('user-custom-theme-config')
-        ? JSON.parse(localStorage.getItem('user-custom-theme-config'))
+        ? JSON.parse(localStorage.getItem('user-custom-theme-config')!)
         : this.defaultCustom;
       const themeData = this.getCustomThemeData(brand, isDark);
-      this.setTheme(window['devuiThemes']['customTheme'], themeData, isDark);
+      this.setTheme((window as { [key: string]: any })['devuiThemes']['customTheme'], themeData, isDark);
       this.configs[0].items = this.themes;
       // 主题设置
       const themeId = localStorage.getItem('theme') || this.themes[0].id;
@@ -88,9 +113,9 @@ export class PersonalizeService {
     }
   }
 
-  changeTheme(themeId, fId?, rId?) {
+  changeTheme(themeId: string, fId?: string, rId?: string) {
     let theme: Theme;
-    const themes = (this.configs[0].items as any).filter((i) => {
+    const themes = (this.configs[0].items as any).filter((i: ThemeConfigItem) => {
       return i.id === themeId;
     });
     const { radiusId, fontId, fontData, radiusData } = this.getSizeAndRadiusData(fId, rId);
@@ -102,13 +127,13 @@ export class PersonalizeService {
       theme = this.configs[0].items[0];
     }
     theme.data = Object.assign(theme.data, customData);
-    window['devuiThemeService'].applyTheme(theme);
+    (window as { [key: string]: any })['devuiThemeService'].applyTheme(theme);
     localStorage.setItem('theme', theme.id);
     localStorage.setItem('font', fontId);
     localStorage.setItem('radius', radiusId);
   }
 
-  getCustomThemeData(color, isDark) {
+  getCustomThemeData(color: string, isDark: boolean) {
     const themeData = this.customThemeService.genThemeData(
       [
         {
@@ -122,20 +147,20 @@ export class PersonalizeService {
     return themeData;
   }
 
-  setTheme(theme, themeData, isDark) {
+  setTheme(theme: any, themeData: any, isDark: boolean) {
     Object.assign(theme, {
       data: themeData,
       isDark,
     });
   }
 
-  getSizeAndRadiusData(fId?, rId?) {
+  getSizeAndRadiusData(fId?: string, rId?: string) {
     const fontId = fId || localStorage.getItem('font') || this.configs[1].items[0].id;
     const radiusId = rId || localStorage.getItem('radius') || this.configs[2].items[0].id;
-    const fonts = (this.configs[1].items as any).filter((font) => {
+    const fonts = (this.configs[1].items as any).filter((font: any) => {
       return font.id === fontId;
     });
-    const radiusList = (this.configs[2].items as any).filter((radius) => {
+    const radiusList = (this.configs[2].items as any).filter((radius: any) => {
       return radius.id === radiusId;
     });
     return {
@@ -146,25 +171,25 @@ export class PersonalizeService {
     };
   }
 
-  setCustomThemeData(themeData, color, isDark) {
+  setCustomThemeData(themeData: any, color: string, isDark: boolean) {
     const len = this.configs[0].items.length;
     const theme = this.configs[0].items[len - 1];
     const { fontData, radiusData } = this.getSizeAndRadiusData();
     Object.assign(themeData, fontData, radiusData);
     this.setTheme(theme, color, isDark);
     theme.data = Object.assign(theme.data, themeData);
-    window['devuiThemeService'].applyTheme(theme);
+    (window as { [key: string]: any })['devuiThemeService'].applyTheme(theme);
     localStorage.setItem('user-custom-theme-config', JSON.stringify({ brand: color, isDark }));
     localStorage.setItem('theme', ThemeType.Custom);
   }
 
   setUiTheme() {
-    const currentTheme = window['devuiCurrentTheme'] || ThemeType.Default;
+    const currentTheme = (window as { [key: string]: any })['devuiCurrentTheme'] || ThemeType.Default;
     this._themeChange.next(currentTheme);
   }
 
   getUiTheme() {
-    const themeService = window['devuiThemeService'];
+    const themeService = (window as { [key: string]: any })['devuiThemeService'];
     this.setUiTheme();
     if (!(themeService && themeService.eventBus)) {
       return;
@@ -176,11 +201,11 @@ export class PersonalizeService {
     return this._themeChange.asObservable();
   }
 
-  setRefTheme(themeId) {
-    const devuiThemes = Object.values(window['devuiThemes']);
-    const themes = devuiThemes.filter((i: Theme) => i.id === themeId);
+  setRefTheme(themeId: string) {
+    const devuiThemes = Object.values((window as { [key: string]: any })['devuiThemes']);
+    const themes = devuiThemes.filter((i: Theme | unknown) => (i as Theme).id === themeId);
     if (themes.length) {
-      window['devuiThemeService'].applyTheme(themes[0]);
+      (window as { [key: string]: any })['devuiThemeService'].applyTheme(themes[0]);
     }
   }
 }
diff --git a/src/app/@shared/components/admin-form/admin-form.component.ts b/src/app/@shared/components/admin-form/admin-form.component.ts
index 9aedb20..2918df4 100644
--- a/src/app/@shared/components/admin-form/admin-form.component.ts
+++ b/src/app/@shared/components/admin-form/admin-form.component.ts
@@ -14,9 +14,9 @@ export class AdminFormComponent implements OnInit {
     items: [],
   };
 
-  _formData = {};
+  _formData: any = {};
 
-  @Input() set formData(val) {
+  @Input() set formData(val: any) {
     this._formData = JSON.parse(JSON.stringify(val));
   }
 
@@ -28,7 +28,7 @@ export class AdminFormComponent implements OnInit {
 
   ngOnInit() {}
 
-  submitPlanForm({ valid }) {
+  submitPlanForm({ valid }: { valid: boolean }) {
     if (valid) {
       this.submitted.emit(this._formData);
     }
diff --git a/src/app/@shared/components/dynamic-forms/dynamic-forms.component.ts b/src/app/@shared/components/dynamic-forms/dynamic-forms.component.ts
index 32ba117..44e9a62 100644
--- a/src/app/@shared/components/dynamic-forms/dynamic-forms.component.ts
+++ b/src/app/@shared/components/dynamic-forms/dynamic-forms.component.ts
@@ -5,20 +5,19 @@ import { DynamicFormsService } from './dynamic-forms.service';
 @Component({
   selector: 'da-dynamic-forms',
   templateUrl: './dynamic-forms.component.html',
-  styleUrls: ['./dynamic-forms.component.scss']
+  styleUrls: ['./dynamic-forms.component.scss'],
 })
-
 export class DynamicFormsComponent implements OnInit {
   _formItems: any;
 
   @Input() set formItems(formItems: any) {
-    if(formItems) {
+    if (formItems) {
       this._formItems = this.formService.getFormItems(formItems);
     }
   }
 
   get formItems() {
-    return this._formItems; 
+    return this._formItems;
   }
 
   @Input() layout = FormLayout.Horizontal;
@@ -33,15 +32,11 @@ export class DynamicFormsComponent implements OnInit {
   @Input() resetBtnContent: string = 'Reset';
   @Output() formSubmit = new EventEmitter<any>();
 
+  constructor(private formService: DynamicFormsService) {}
 
-  constructor(private formService: DynamicFormsService) { 
-  }
-
-  ngOnInit(): void {
-
-  }
+  ngOnInit(): void {}
 
-  submitForm(event) {
+  submitForm(event: any) {
     this.formSubmit.emit(event);
   }
 }
diff --git a/src/app/@shared/components/dynamic-forms/dynamic-forms.service.ts b/src/app/@shared/components/dynamic-forms/dynamic-forms.service.ts
index cd7a3a4..7667d43 100644
--- a/src/app/@shared/components/dynamic-forms/dynamic-forms.service.ts
+++ b/src/app/@shared/components/dynamic-forms/dynamic-forms.service.ts
@@ -2,17 +2,17 @@ import { Injectable } from '@angular/core';
 
 @Injectable({ providedIn: 'root' })
 export class DynamicFormsService {
-  getFormItems(list) {
-    let formItems = [];
+  getFormItems(list: any) {
+    let formItems: any[] = [];
     Object.keys(list).forEach((item) => {
       formItems.push(list[item]);
     });
     return this.sortItems(formItems);
   }
 
-  sortItems(formItems) {
-    let noOrders = formItems.filter(item => item.order === undefined);
-    let hasOrders = formItems.filter(item => item.order !== undefined).sort((a, b) => a.order - b.order);
+  sortItems(formItems: any[]) {
+    let noOrders = formItems.filter((item) => item.order === undefined);
+    let hasOrders = formItems.filter((item) => item.order !== undefined).sort((a, b) => a.order - b.order);
     return hasOrders.concat(noOrders);
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/@shared/components/dynamic-forms/ui/checkbox/checkbox.interface.ts b/src/app/@shared/components/dynamic-forms/ui/checkbox/checkbox.interface.ts
index 2243fd5..c1b4146 100644
--- a/src/app/@shared/components/dynamic-forms/ui/checkbox/checkbox.interface.ts
+++ b/src/app/@shared/components/dynamic-forms/ui/checkbox/checkbox.interface.ts
@@ -1,25 +1,24 @@
 /***************************************************************************************************
  * For details about the description of each configuration item, please see  APIs of d-checkbox and dValidateRules parameters of d-form.
  * https://devui.design/components/zh-cn/checkbox/api  && https://devui.design/components/zh-cn/form/api#DValidateRules
- */ 
+ */
 
 import { Observable } from 'rxjs';
 import { DPopConfig, DValidateRules } from 'ng-devui';
 import { DFormUI } from '../../form-item.interface';
 
 export interface CheckboxUI extends DFormUI {
-    name?: string;
-    itemWidth?: number;
-    color?: string;
-    direction?: 'row' | 'column';
-    isShowTitle?: boolean;
-    disabled?: boolean;
-    options?: Array<any>;
-    filterKey?: string;
-    showAnimation?: boolean;
-    beforeChange?: (value) => boolean | Promise<boolean> | Observable<boolean>;
-    values?: Array<any>;
-    validateRules?: DValidateRules;
-    validatePopConfig?: DPopConfig;
+  name?: string;
+  itemWidth?: number;
+  color?: string;
+  direction?: 'row' | 'column';
+  isShowTitle?: boolean;
+  disabled?: boolean;
+  options?: Array<any>;
+  filterKey?: string;
+  showAnimation?: boolean;
+  beforeChange?: (value: any) => boolean | Promise<boolean> | Observable<boolean>;
+  values?: Array<any>;
+  validateRules?: DValidateRules;
+  validatePopConfig?: DPopConfig;
 }
-
diff --git a/src/app/@shared/components/dynamic-forms/ui/checkbox/checkbox.widget.html b/src/app/@shared/components/dynamic-forms/ui/checkbox/checkbox.widget.html
index 7a85062..113c3fc 100644
--- a/src/app/@shared/components/dynamic-forms/ui/checkbox/checkbox.widget.html
+++ b/src/app/@shared/components/dynamic-forms/ui/checkbox/checkbox.widget.html
@@ -1,16 +1,16 @@
 <d-checkbox-group
   [(ngModel)]="ui.values"
   [name]="name"
-  [options]="ui.options"
-  [direction]="ui.direction"
-  [isShowTitle]="ui.isShowTitle"
-  [beforeChange]="ui.beforeChange"
-  [filterKey]="ui.filterKey"
-  [itemWidth]="ui.itemWidth"
+  [options]="ui.options!"
+  [direction]="ui.direction!"
+  [isShowTitle]="ui.isShowTitle!"
+  [beforeChange]="ui.beforeChange!"
+  [filterKey]="ui.filterKey!"
+  [itemWidth]="ui.itemWidth!"
   [color]="ui.color"
-  [showAnimation]="ui.showAnimation"
-  [disabled]="ui.disabled"
-  [dValidateRules]="ui.validateRules"
-  [dValidatePopConfig]="ui.validatePopConfig"
+  [showAnimation]="ui.showAnimation!"
+  [disabled]="ui.disabled!"
+  [dValidateRules]="ui.validateRules!"
+  [dValidatePopConfig]="ui.validatePopConfig!"
 >
 </d-checkbox-group>
diff --git a/src/app/@shared/components/dynamic-forms/ui/radio/radio.interface.ts b/src/app/@shared/components/dynamic-forms/ui/radio/radio.interface.ts
index 7be7888..01b7305 100644
--- a/src/app/@shared/components/dynamic-forms/ui/radio/radio.interface.ts
+++ b/src/app/@shared/components/dynamic-forms/ui/radio/radio.interface.ts
@@ -1,18 +1,18 @@
 /***************************************************************************************************
  * For details about the description of each configuration item, please see  APIs of d-radio and dValidateRules parameters of d-form.
  * https://devui.design/components/zh-cn/radio/api  && https://devui.design/components/zh-cn/form/api#DValidateRules
- */ 
+ */
 
 import { Observable } from 'rxjs';
-import { DPopConfig, DValidateRules  } from 'ng-devui';
+import { DPopConfig, DValidateRules } from 'ng-devui';
 import { DFormUI } from '../../form-item.interface';
 
 export interface RadioUI extends DFormUI {
-   values: Array<any>;
-   value: any;
-   cssStyle?: 'row' | 'column';
-   disabled?: boolean;
-   beforeChange?: (values) => boolean | Promise<boolean> | Observable<boolean>;
-   validateRules?: DValidateRules;
-   validatePopConfig?: DPopConfig;
-}
\ No newline at end of file
+  values: Array<any>;
+  value: any;
+  cssStyle?: 'row' | 'column';
+  disabled?: boolean;
+  beforeChange?: (values: any) => boolean | Promise<boolean> | Observable<boolean>;
+  validateRules?: DValidateRules;
+  validatePopConfig?: DPopConfig;
+}
diff --git a/src/app/@shared/components/dynamic-forms/ui/radio/radio.widget.html b/src/app/@shared/components/dynamic-forms/ui/radio/radio.widget.html
index 36c69f1..1c0ca61 100644
--- a/src/app/@shared/components/dynamic-forms/ui/radio/radio.widget.html
+++ b/src/app/@shared/components/dynamic-forms/ui/radio/radio.widget.html
@@ -1,12 +1,11 @@
-<d-radio-group 
+<d-radio-group
   [name]="name"
   [values]="ui.values"
   [(ngModel)]="ui.value"
-  [cssStyle]="ui.cssStyle" 
-  [disabled]="ui.disabled"
-  [beforeChange]="ui.beforeChange" 
-  [dValidateRules]="ui.validateRules"
-  [dValidatePopConfig]="ui.validatePopConfig"
+  [cssStyle]="ui.cssStyle!"
+  [disabled]="ui.disabled!"
+  [beforeChange]="ui.beforeChange!"
+  [dValidateRules]="ui.validateRules!"
+  [dValidatePopConfig]="ui.validatePopConfig!"
 >
 </d-radio-group>
-
diff --git a/src/app/@shared/components/dynamic-forms/ui/select/select.interface.ts b/src/app/@shared/components/dynamic-forms/ui/select/select.interface.ts
index 40b1954..98991a7 100644
--- a/src/app/@shared/components/dynamic-forms/ui/select/select.interface.ts
+++ b/src/app/@shared/components/dynamic-forms/ui/select/select.interface.ts
@@ -1,54 +1,53 @@
 /***************************************************************************************************
  * For details about the description of each configuration item, please see  APIs of d-select  and dValidateRules parameters of d-form.
  * https://devui.design/components/zh-cn/select/api  && https://devui.design/components/zh-cn/form/api#DValidateRules
- */ 
-
+ */
 
 import { ConnectedPosition } from '@angular/cdk/overlay';
 import { Observable } from 'rxjs';
 import { DFormUI } from '../../form-item.interface';
 import { DValidateRules, DPopConfig } from 'ng-devui';
 
-export type AppendToBodyDirection= 'rightDown'| 'rightUp' | 'leftUp'| 'leftDown' | 'centerDown' | 'centerUp';
+export type AppendToBodyDirection = 'rightDown' | 'rightUp' | 'leftUp' | 'leftDown' | 'centerDown' | 'centerUp';
 
 export interface SelectUI extends DFormUI {
-   values?: Array<any>;
-   options?: Array<any>;
-   isSearch?: boolean;
-   scrollHight?: string;
-   highlightItemClass?: string;
-   filterKey?: string;
-   multiple?: boolean;
-   isSelectAll?: boolean;
-   readonly?: boolean;
-   size?: '' | 'sm' | 'lg';
-   disabled?: boolean;
-   placeholder?: string;
-   searchPlaceholder?: string;
-   searchFn?: (term: string) => Observable<Array<{id: number, option: any}>>;
-   direction?: 'up' | 'down' | 'auto';
-   overview?: 'border' | 'underlined';
-   enableLazyLoad?: boolean;
-   extraConfig?: {
-      labelization?: {
-        enable: boolean;
-        overflow?: 'normal' | 'scroll-y' | 'multiple-line' | string; 
-        containerMaxHeight?: string;
-        labelMaxWidth?: string; 
-      }
-   };
-   optionDisabledKey?: string;
-   optionImmutableKey?: string;
-   keepMultipleOrder?: 'origin' | 'user-select';
-   appendToBody?: boolean;
-   appendToBodyDirections?: Array<AppendToBodyDirection | ConnectedPosition>;
-   autoFocus?: boolean;
-   toggleOnFocus?: boolean;
-   width?: number;
-   virtualScroll?: boolean;
-   allowClear?: boolean;
-   showAnimation?: boolean;
-   validateRules?: DValidateRules;
-   validatePopConfig?: DPopConfig;
-   loadMore: ({instance: SelectComponent, event: ScrollEvent}) => void;
-}
\ No newline at end of file
+  values?: Array<any>;
+  options?: Array<any>;
+  isSearch?: boolean;
+  scrollHight?: string;
+  highlightItemClass?: string;
+  filterKey?: string;
+  multiple?: boolean;
+  isSelectAll?: boolean;
+  readonly?: boolean;
+  size?: '' | 'sm' | 'lg';
+  disabled?: boolean;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  searchFn?: (term: string) => Observable<Array<{ id: number; option: any }>>;
+  direction?: 'up' | 'down' | 'auto';
+  overview?: 'border' | 'underlined';
+  enableLazyLoad?: boolean;
+  extraConfig?: {
+    labelization?: {
+      enable: boolean;
+      overflow?: 'normal' | 'scroll-y' | 'multiple-line' | string;
+      containerMaxHeight?: string;
+      labelMaxWidth?: string;
+    };
+  };
+  optionDisabledKey?: string;
+  optionImmutableKey?: string;
+  keepMultipleOrder?: 'origin' | 'user-select';
+  appendToBody?: boolean;
+  appendToBodyDirections?: Array<AppendToBodyDirection | ConnectedPosition>;
+  autoFocus?: boolean;
+  toggleOnFocus?: boolean;
+  width?: number;
+  virtualScroll?: boolean;
+  allowClear?: boolean;
+  showAnimation?: boolean;
+  validateRules?: DValidateRules;
+  validatePopConfig?: DPopConfig;
+  loadMore: ({ instance: SelectComponent, event: ScrollEvent }: any) => void;
+}
diff --git a/src/app/@shared/components/dynamic-forms/ui/select/select.widget.html b/src/app/@shared/components/dynamic-forms/ui/select/select.widget.html
index 8610ce6..bb0ce17 100644
--- a/src/app/@shared/components/dynamic-forms/ui/select/select.widget.html
+++ b/src/app/@shared/components/dynamic-forms/ui/select/select.widget.html
@@ -1,38 +1,35 @@
-<d-select 
+<d-select
   [name]="name"
   [(ngModel)]="ui.values"
-  [options]="ui.options"
-  [isSearch]="ui.isSearch"
+  [options]="ui.options!"
+  [isSearch]="ui.isSearch!"
   [scrollHight]="ui.scrollHight || '300px'"
   [highlightItemClass]="ui.highlightItemClass || 'bg-grey'"
-  [filterKey]="ui.filterKey"
-  [multiple]="ui.multiple"
-  [isSelectAll]="ui.isSelectAll"
-  [readonly]="ui.readonly"
-  [size]="ui.size"
-  [disabled]="ui.disabled"
+  [filterKey]="ui.filterKey!"
+  [multiple]="ui.multiple!"
+  [isSelectAll]="ui.isSelectAll!"
+  [readonly]="ui.readonly!"
+  [size]="ui.size!"
+  [disabled]="ui.disabled!"
   [placeholder]="ui.placeholder || 'Please Input keywords'"
   [searchPlaceholder]="ui.searchPlaceholder || ''"
-  [searchFn]="ui.searchFn"
-  [direction]="ui.direction"
-  [overview]="ui.overview"
-  [enableLazyLoad]="ui.enableLazyLoad"
-  [extraConfig]="ui.extraConfig"
-  [optionDisabledKey]="ui.optionDisabledKey"
-  [optionImmutableKey]="ui.optionImmutableKey"
-  [keepMultipleOrder]="ui.keepMultipleOrder"
-  [appendToBody]="ui.appendToBody"
-  [appendToBodyDirections]="ui.appendToBodyDirections"
-  [autoFocus]="ui.autoFocus"
-  [toggleOnFocus]="ui.toggleOnFocus"
-  [width]="ui.width"
+  [searchFn]="ui.searchFn!"
+  [direction]="ui.direction!"
+  [overview]="ui.overview!"
+  [enableLazyLoad]="ui.enableLazyLoad!"
+  [extraConfig]="ui.extraConfig!"
+  [optionDisabledKey]="ui.optionDisabledKey!"
+  [optionImmutableKey]="ui.optionImmutableKey!"
+  [keepMultipleOrder]="ui.keepMultipleOrder!"
+  [appendToBody]="ui.appendToBody!"
+  [appendToBodyDirections]="ui.appendToBodyDirections!"
+  [autoFocus]="ui.autoFocus!"
+  [toggleOnFocus]="ui.toggleOnFocus!"
+  [width]="ui.width!"
   [virtualScroll]="ui.virtualScroll"
-  [allowClear]="ui.allowClear"
-  [showAnimation]="ui.showAnimation"
-  [dValidateRules]="ui.validateRules"
-  [dValidatePopConfig]="ui.validatePopConfig"
+  [allowClear]="ui.allowClear!"
+  [showAnimation]="ui.showAnimation!"
+  [dValidateRules]="ui.validateRules!"
+  [dValidatePopConfig]="ui.validatePopConfig!"
   (loadMore)="ui.loadMore($event)"
 ></d-select>
-
-
-
diff --git a/src/app/@shared/components/dynamic-forms/ui/tags-input/tags-input.widget.html b/src/app/@shared/components/dynamic-forms/ui/tags-input/tags-input.widget.html
index 997c8f6..7c569a2 100644
--- a/src/app/@shared/components/dynamic-forms/ui/tags-input/tags-input.widget.html
+++ b/src/app/@shared/components/dynamic-forms/ui/tags-input/tags-input.widget.html
@@ -2,19 +2,19 @@
   [name]="name"
   [(ngModel)]="ui.tags"
   [suggestionList]="ui.suggestionList"
-  [displayProperty]="ui.displayProperty"
+  [displayProperty]="ui.displayProperty!"
   [placeholder]="ui.placeholder || ''"
   [minLength]="ui.minLength || 3"
   [maxLength]="ui.maxLength || _max"
   [maxTags]="ui.maxTags || _max"
-  [spellcheck]="ui.spellcheck"
-  [isAddBySpace]="ui.isAddBySpace"
-  [caseSensitivity]="ui.caseSensitivity"
-  [disabled]="ui.disabled"
-  [showAnimation]="ui.showAnimation"
-  [checkBeforeAdd]="ui.checkBeforeAdd"
+  [spellcheck]="ui.spellcheck!"
+  [isAddBySpace]="ui.isAddBySpace!"
+  [caseSensitivity]="ui.caseSensitivity!"
+  [disabled]="ui.disabled!"
+  [showAnimation]="ui.showAnimation!"
+  [checkBeforeAdd]="ui.checkBeforeAdd!"
   (click)="$event.stopPropagation()"
-  [dValidateRules]="ui.validateRules"
-  [dValidatePopConfig]="ui.validatePopConfig"
+  [dValidateRules]="ui.validateRules!"
+  [dValidatePopConfig]="ui.validatePopConfig!"
 >
-</d-tags-input>
\ No newline at end of file
+</d-tags-input>
diff --git a/src/app/@shared/components/dynamic-forms/ui/text-input/text-input.widget.html b/src/app/@shared/components/dynamic-forms/ui/text-input/text-input.widget.html
index 449cb70..307afe4 100644
--- a/src/app/@shared/components/dynamic-forms/ui/text-input/text-input.widget.html
+++ b/src/app/@shared/components/dynamic-forms/ui/text-input/text-input.widget.html
@@ -1,16 +1,14 @@
 <input
-  dTextInput 
+  dTextInput
   [(ngModel)]="ui.values"
   [name]="name"
-  [attr.placeholder]="ui.placeholder" 
-  [attr.id]="ui.id" 
-  [attr.type]="ui.type" 
+  [attr.placeholder]="ui.placeholder"
+  [attr.id]="ui.id"
+  [attr.type]="ui.type"
   [attr.autocomplete]="ui.autocomplete"
-  [disabled]="ui.disabled" 
-  [error]="ui.error" 
-  [size]="ui.size"
-  [dValidateRules]="ui.validateRules"
-  [dValidatePopConfig]="ui.validatePopConfig"
+  [disabled]="ui.disabled!"
+  [error]="ui.error!"
+  [size]="ui.size!"
+  [dValidateRules]="ui.validateRules!"
+  [dValidatePopConfig]="ui.validatePopConfig!"
 />
-
-
diff --git a/src/app/@shared/components/dynamic-forms/ui/textarea/textarea.widget.html b/src/app/@shared/components/dynamic-forms/ui/textarea/textarea.widget.html
index c964045..bbb9025 100644
--- a/src/app/@shared/components/dynamic-forms/ui/textarea/textarea.widget.html
+++ b/src/app/@shared/components/dynamic-forms/ui/textarea/textarea.widget.html
@@ -1,12 +1,12 @@
 <textarea
-  dTextarea 
+  dTextarea
   [name]="name"
   [(ngModel)]="ui.values"
-  [attr.placeholder]="ui.placeholder" 
+  [attr.placeholder]="ui.placeholder"
   [attr.id]="ui.id"
-  [disabled]="ui.disabled" 
-  [error]="ui.error" 
-  [resize]="ui.resize"
-  [dValidateRules]="ui.validateRules"
-  [dValidatePopConfig]="ui.validatePopConfig"
-></textarea>
\ No newline at end of file
+  [disabled]="ui.disabled!"
+  [error]="ui.error!"
+  [resize]="ui.resize!"
+  [dValidateRules]="ui.validateRules!"
+  [dValidatePopConfig]="ui.validatePopConfig!"
+></textarea>
diff --git a/src/app/@shared/components/dynamic-forms/ui/toggle/toggle.interface.ts b/src/app/@shared/components/dynamic-forms/ui/toggle/toggle.interface.ts
index d15bdc2..4a253f9 100644
--- a/src/app/@shared/components/dynamic-forms/ui/toggle/toggle.interface.ts
+++ b/src/app/@shared/components/dynamic-forms/ui/toggle/toggle.interface.ts
@@ -1,18 +1,18 @@
 /***************************************************************************************************
  * For details about the description of each configuration item, please see  APIs of d-toggle and dValidateRules parameters of d-form.
  * https://devui.design/components/zh-cn/toggle/api  && https://devui.design/components/zh-cn/form/api#DValidateRules
- */ 
+ */
 
 import { DFormUI } from '../../form-item.interface';
 import { Observable } from 'rxjs';
 import { DPopConfig, DValidateRules } from 'ng-devui';
 
 export interface ToggleUI extends DFormUI {
-   size?: 'sm' | '' | 'lg';
-   color?: string;
-   checked?: boolean;
-   disabled?: boolean;
-   beforeChange?: (value) => boolean | Promise<boolean> | Observable<boolean>;
-   validateRules?: DValidateRules;
-   validatePopConfig?: DPopConfig;
-}
\ No newline at end of file
+  size?: 'sm' | '' | 'lg';
+  color?: string;
+  checked?: boolean;
+  disabled?: boolean;
+  beforeChange?: (value: any) => boolean | Promise<boolean> | Observable<boolean>;
+  validateRules?: DValidateRules;
+  validatePopConfig?: DPopConfig;
+}
diff --git a/src/app/@shared/components/dynamic-forms/ui/toggle/toggle.widget.html b/src/app/@shared/components/dynamic-forms/ui/toggle/toggle.widget.html
index 883cf1a..bb95f59 100644
--- a/src/app/@shared/components/dynamic-forms/ui/toggle/toggle.widget.html
+++ b/src/app/@shared/components/dynamic-forms/ui/toggle/toggle.widget.html
@@ -1,12 +1,11 @@
-<d-toggle 
+<d-toggle
   [(ngModel)]="ui.checked"
   [name]="name"
-  [size]="ui.size" 
-  [color]="ui.color"
-  [checked]="ui.checked"
-  [disabled]="ui.disabled"
-  [beforeChange]="ui.beforeChange"
-  [dValidateRules]="ui.validateRules"
-  [dValidatePopConfig]="ui.validatePopConfig"
+  [size]="ui.size!"
+  [color]="ui.color!"
+  [checked]="ui.checked!"
+  [disabled]="ui.disabled!"
+  [beforeChange]="ui.beforeChange!"
+  [dValidateRules]="ui.validateRules!"
+  [dValidatePopConfig]="ui.validatePopConfig!"
 ></d-toggle>
-
diff --git a/src/app/@shared/components/echarts/echarts.component.ts b/src/app/@shared/components/echarts/echarts.component.ts
index 50dac54..52671d7 100644
--- a/src/app/@shared/components/echarts/echarts.component.ts
+++ b/src/app/@shared/components/echarts/echarts.component.ts
@@ -10,7 +10,7 @@ import {
   OnDestroy,
   OnInit,
   Output,
-  SimpleChanges
+  SimpleChanges,
 } from '@angular/core';
 import * as echarts from 'echarts';
 import { fromEvent } from 'rxjs';
@@ -54,8 +54,30 @@ export class EchartsComponent implements AfterViewInit, OnChanges, OnDestroy, On
   linecolor: string;
   // 主题色色盘
   themeColorArray = [
-    '#5E7CE0', '#6CBFFF', '#50D4AB', '#A6DD82', '#FAC20A', '#FA9841', '#F66F6A', '#F3689A', '#A97AF8', '#207AB3', '#169E6C', '#7EBA50',
-    '#B58200', '#B54E04', '#344899', '#572DB3', '#FFD4E3', '#B8E0FF', '#ACF2DC', '#D8FCC0', '#FFE794', '#FFD0A6', '#D8C2FF', '#BECCFA',
+    '#5E7CE0',
+    '#6CBFFF',
+    '#50D4AB',
+    '#A6DD82',
+    '#FAC20A',
+    '#FA9841',
+    '#F66F6A',
+    '#F3689A',
+    '#A97AF8',
+    '#207AB3',
+    '#169E6C',
+    '#7EBA50',
+    '#B58200',
+    '#B54E04',
+    '#344899',
+    '#572DB3',
+    '#FFD4E3',
+    '#B8E0FF',
+    '#ACF2DC',
+    '#D8FCC0',
+    '#FFE794',
+    '#FFD0A6',
+    '#D8C2FF',
+    '#BECCFA',
   ];
   constructor(private elementRef: ElementRef) {}
 
@@ -151,10 +173,10 @@ export class EchartsComponent implements AfterViewInit, OnChanges, OnDestroy, On
     };
   }
 
-  themeService;
+  themeService: any;
 
   ngOnInit() {
-    this.themeService = window['devuiThemeService'];
+    this.themeService = (window as { [key: string]: any })['devuiThemeService'];
   }
 
   ngAfterViewInit(): void {
@@ -195,7 +217,7 @@ export class EchartsComponent implements AfterViewInit, OnChanges, OnDestroy, On
       this.updateChartData(this.options);
       this.chartReady.emit(this.echart);
     }
-  }
+  };
 
   ngOnChanges(changes: SimpleChanges) {
     if (this.echart && changes['options']) {
diff --git a/src/app/@shared/components/header/header-operation/header-notice/header-notice.component.ts b/src/app/@shared/components/header/header-operation/header-notice/header-notice.component.ts
index 8a10b3d..ce2c569 100644
--- a/src/app/@shared/components/header/header-operation/header-notice/header-notice.component.ts
+++ b/src/app/@shared/components/header/header-operation/header-notice/header-notice.component.ts
@@ -17,9 +17,9 @@ export class HeaderNoticeComponent implements OnInit {
 
   tabActiveID: string | number = 'notice';
 
-  tabTitles;
+  tabTitles: any;
 
-  i18nValues;
+  i18nValues: any;
 
   notifications: Notification[] = [];
   messages: Message[] = [];
diff --git a/src/app/@shared/components/header/header-operation/header-operation.component.html b/src/app/@shared/components/header/header-operation/header-operation.component.html
index 1b5665a..95bf7bd 100644
--- a/src/app/@shared/components/header/header-operation/header-operation.component.html
+++ b/src/app/@shared/components/header/header-operation/header-operation.component.html
@@ -13,7 +13,7 @@
   </div>
 
   <div class="da-operations-user" dDropDown [trigger]="'hover'" appendToBody dDropDownToggle>
-    <d-avatar [name]="user?.userName" [width]="22" [height]="22"></d-avatar>
+    <d-avatar [name]="user.userName" [width]="22" [height]="22"></d-avatar>
     <span class="da-user-name">{{ user?.userName }}</span>
     <ul dDropDownMenu class="devui-dropdown-menu devui-scrollbar" role="menu" style="min-width: 120px">
       <ng-container *ngIf="haveLoggedIn; else login">
diff --git a/src/app/@shared/components/header/header-operation/header-operation.component.ts b/src/app/@shared/components/header/header-operation/header-operation.component.ts
index 925e274..1f59e07 100644
--- a/src/app/@shared/components/header/header-operation/header-operation.component.ts
+++ b/src/app/@shared/components/header/header-operation/header-operation.component.ts
@@ -14,7 +14,7 @@ import { I18nService } from 'ng-devui/i18n';
 export class HeaderOperationComponent implements OnInit {
   user: User;
   languages = LANGUAGES;
-  language;
+  language: string;
   haveLoggedIn = false;
   noticeCount: number;
 
@@ -22,30 +22,30 @@ export class HeaderOperationComponent implements OnInit {
 
   ngOnInit(): void {
     if (localStorage.getItem('userinfo')) {
-      this.user = JSON.parse(localStorage.getItem('userinfo'));
+      this.user = JSON.parse(localStorage.getItem('userinfo')!);
       this.haveLoggedIn = true;
     } else {
       this.authService.login('Admin', 'Devui.admin').subscribe((res) => {
         this.authService.setSession(res);
-        this.user = JSON.parse(localStorage.getItem('userinfo'));
+        this.user = JSON.parse(localStorage.getItem('userinfo')!);
         this.haveLoggedIn = true;
       });
     }
     this.language = this.translate.currentLang;
   }
 
-  onSearch(event) {
+  onSearch(event: any) {
     console.log(event);
   }
 
-  onLanguageClick(language) {
+  onLanguageClick(language: string) {
     this.language = language;
     localStorage.setItem('lang', this.language);
     this.i18n.toggleLang(this.language);
     this.translate.use(this.language);
   }
 
-  handleUserOps(operation) {
+  handleUserOps(operation: string) {
     switch (operation) {
       case 'logout': {
         this.haveLoggedIn = false;
@@ -58,7 +58,7 @@ export class HeaderOperationComponent implements OnInit {
     }
   }
 
-  handleNoticeCount(event) {
+  handleNoticeCount(event: number) {
     this.noticeCount = event;
   }
 }
diff --git a/src/app/@shared/components/header/navbar/navbar.component.ts b/src/app/@shared/components/header/navbar/navbar.component.ts
index c9f3be2..3c6990e 100644
--- a/src/app/@shared/components/header/navbar/navbar.component.ts
+++ b/src/app/@shared/components/header/navbar/navbar.component.ts
@@ -66,7 +66,9 @@ export class NavbarComponent implements OnInit, AfterViewInit {
 
   currentUrl: string;
 
-  constructor(private elementRef: ElementRef, private router: Router, private renderer: Renderer2) {}
+  constructor(private elementRef: ElementRef, private router: Router, private renderer: Renderer2) {
+    this.currentUrl = this.router.url;
+  }
 
   refreshDataAndView() {
     if (this.mode !== 'top') {
@@ -76,7 +78,7 @@ export class NavbarComponent implements OnInit, AfterViewInit {
     const parentWidth = this.elementRef.nativeElement.offsetWidth;
 
     const itemElements = this.elementRef.nativeElement.querySelectorAll('.da-nav-item');
-    itemElements.forEach((element, i) => {
+    itemElements.forEach((element: any, i: number) => {
       if (!this.elementsState[i] && element.offsetLeft > 0) {
         this.elementsState[i] = {
           width: element.offsetWidth,
@@ -89,7 +91,7 @@ export class NavbarComponent implements OnInit, AfterViewInit {
 
     this.packData = [];
     this.packItemsActive = false;
-    itemElements.forEach((element, i) => {
+    itemElements.forEach((element: any, i: number) => {
       if (this.elementsState[i] && this.elementsState[i].width + this.elementsState[i].offsetLeft > parentWidth - 40) {
         this.packData.push(this.data[i]);
 
@@ -105,8 +107,7 @@ export class NavbarComponent implements OnInit, AfterViewInit {
   }
 
   ngOnInit(): void {
-    this.currentUrl = this.router.url;
-    this.router.events.subscribe((event: RouterEvent) => {
+    this.router.events.subscribe((event) => {
       if (event instanceof NavigationEnd) {
         this.currentUrl = event.urlAfterRedirects;
         this.packItemsActive = false;
diff --git a/src/app/@shared/components/login/login.component.html b/src/app/@shared/components/login/login.component.html
index 5d86762..95a425d 100644
--- a/src/app/@shared/components/login/login.component.html
+++ b/src/app/@shared/components/login/login.component.html
@@ -23,8 +23,9 @@
           </ng-template>
         </d-tab>
       </d-tabs>
-      <ng-template [ngTemplateOutlet]="tabActiveId === 'tab1' && loginWithPassword"></ng-template>
-      <ng-template [ngTemplateOutlet]="tabActiveId === 'tab2' && loginWithEmail"></ng-template>
+      <ng-container *ngIf="tabActiveId === 'tab1'; else loginWithEmail">
+        <ng-template [ngTemplateOutlet]="loginWithPassword"></ng-template>
+      </ng-container>
     </div>
     <div class="da-other">
       <span class="devui-form-span">{{ 'loginPage.other' | translate }}:</span>
diff --git a/src/app/@shared/components/login/login.component.ts b/src/app/@shared/components/login/login.component.ts
index 6024a5b..2782e39 100644
--- a/src/app/@shared/components/login/login.component.ts
+++ b/src/app/@shared/components/login/login.component.ts
@@ -25,10 +25,10 @@ export class LoginComponent implements OnInit {
   tabActiveId: string | number = 'tab1';
   showPassword = false;
 
-  tabItems;
-  language;
-  i18nValues;
-  toastMessage;
+  tabItems: any;
+  language: string;
+  i18nValues: any;
+  toastMessage: any;
   languages = LANGUAGES;
 
   formData = {
@@ -71,7 +71,9 @@ export class LoginComponent implements OnInit {
     private translate: TranslateService,
     private i18n: I18nService,
     private personalizeService: PersonalizeService
-  ) {}
+  ) {
+    this.language = this.translate.currentLang;
+  }
 
   ngOnInit(): void {
     this.translate
@@ -86,7 +88,6 @@ export class LoginComponent implements OnInit {
       this.i18nValues = this.translate.instant('loginPage');
       this.updateTabItems(this.i18nValues);
     });
-    this.language = this.translate.currentLang;
     this.personalizeService.setRefTheme(ThemeType.Default);
 
     // oauth认证回调
@@ -145,14 +146,14 @@ export class LoginComponent implements OnInit {
     }
   }
 
-  onLanguageClick(language) {
+  onLanguageClick(language: string) {
     this.language = language;
     localStorage.setItem('lang', this.language);
     this.i18n.toggleLang(this.language);
     this.translate.use(this.language);
   }
 
-  updateTabItems(values) {
+  updateTabItems(values: any) {
     this.tabItems = [
       {
         id: 'tab1',
@@ -165,13 +166,13 @@ export class LoginComponent implements OnInit {
     ];
   }
 
-  onKeyUp(e, tabId) {
+  onKeyUp(e: KeyboardEvent, tabId: string | number) {
     if (e.keyCode === 13) {
       this.onClick(tabId);
     }
   }
 
-  handleAuth(type) {
+  handleAuth(type: string) {
     console.log(type);
     //github oauth配置
     const config = {
diff --git a/src/app/@shared/components/personalize/personalize.component.ts b/src/app/@shared/components/personalize/personalize.component.ts
index 16680da..ded71d6 100644
--- a/src/app/@shared/components/personalize/personalize.component.ts
+++ b/src/app/@shared/components/personalize/personalize.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { PersonalizeService } from 'src/app/@core/services/personalize.service';
+import { PersonalizeService, ThemeConfig } from 'src/app/@core/services/personalize.service';
 import { ThemeType } from '../../models/theme';
 
 @Component({
@@ -15,40 +15,22 @@ export class PersonalizeComponent implements OnInit {
 
   themeType = ThemeType;
 
-  currentTheme;
+  currentTheme: any;
 
-  configs = [];
+  configs: ThemeConfig[] = [];
 
   themeColors = [
     {
       name: 'Light',
       isDark: false,
       icon: 'icon-code-editor-light',
-      colors: [
-        '#343a40',
-        '#24316c',
-        '#673AB7',
-        '#4f7dff',
-        '#4caf78',
-        '#5faa15',
-        '#ff6a0d',
-        '#f36b7f',
-      ],
+      colors: ['#343a40', '#24316c', '#673AB7', '#4f7dff', '#4caf78', '#5faa15', '#ff6a0d', '#f36b7f'],
     },
     {
       name: 'Dark',
       isDark: true,
       icon: 'icon-code-editor-dark',
-      colors: [
-        '#343a40',
-        '#24316c',
-        '#673AB7',
-        '#4f7dff',
-        '#4caf78',
-        '#5faa15',
-        '#ff6a0d',
-        '#f36b7f',
-      ],
+      colors: ['#343a40', '#24316c', '#673AB7', '#4f7dff', '#4caf78', '#5faa15', '#ff6a0d', '#f36b7f'],
     },
   ];
   currentValue = {
@@ -68,44 +50,32 @@ export class PersonalizeComponent implements OnInit {
     this.configs = this.personalizeService.configs;
     this.getCustomColor();
     this.personalizeService
-      .getUiTheme()
+      .getUiTheme()!
       .pipe(takeUntil(this.destroy$))
       .subscribe((theme) => {
         this.currentTheme = theme;
       });
   }
 
-  onChange(type, value) {
+  onChange(type: string, value: any) {
     switch (type) {
       case 'themes':
-        this.personalizeService.changeTheme(
-          value,
-          localStorage.getItem('font'),
-          localStorage.getItem('radius')
-        );
+        this.personalizeService.changeTheme(value, localStorage.getItem('font')!, localStorage.getItem('radius')!);
         return;
       case 'font':
-        this.personalizeService.changeTheme(
-          localStorage.getItem('theme'),
-          value,
-          localStorage.getItem('radius')
-        );
+        this.personalizeService.changeTheme(localStorage.getItem('theme')!, value, localStorage.getItem('radius')!);
         return;
       case 'radius':
-        this.personalizeService.changeTheme(
-          localStorage.getItem('theme'),
-          localStorage.getItem('font'),
-          value
-        );
+        this.personalizeService.changeTheme(localStorage.getItem('theme')!, localStorage.getItem('font')!, value);
         return;
     }
   }
 
   getCustomColor() {
-    if (localStorage.getItem('user-custom-theme-config')) {
-      const { brand, isDark } = JSON.parse(
-        localStorage.getItem('user-custom-theme-config')
-      );
+    const customThemeConfig = localStorage.getItem('user-custom-theme-config');
+
+    if (customThemeConfig) {
+      const { brand, isDark } = JSON.parse(customThemeConfig);
       if (brand) {
         this.customColor = brand;
         this.customDark = isDark;
@@ -113,16 +83,13 @@ export class PersonalizeComponent implements OnInit {
     }
   }
 
-  selectColor(color, theme) {
-    if (!window['devuiThemeService']) {
+  selectColor(color: string, theme: any) {
+    if (!(window as { [key: string]: any })['devuiThemeService']) {
       return;
     }
     this.customColor = color;
     this.customDark = theme.isDark;
-    const themeData = this.personalizeService.getCustomThemeData(
-      color,
-      theme.isDark
-    );
+    const themeData = this.personalizeService.getCustomThemeData(color, theme.isDark);
     this.personalizeService.setCustomThemeData(themeData, color, theme.isDark);
     this.currentValue.themes = ThemeType.Custom;
   }
diff --git a/src/app/@shared/components/register/register.component.ts b/src/app/@shared/components/register/register.component.ts
index 031002f..254b0f2 100644
--- a/src/app/@shared/components/register/register.component.ts
+++ b/src/app/@shared/components/register/register.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { TranslateService, TranslationChangeEvent } from '@ngx-translate/core';
-import { DialogService, DValidateRules, FormLayout } from 'ng-devui';
+import { DialogService, DValidateRules, FormLayout, Message } from 'ng-devui';
 import { I18nService } from 'ng-devui/i18n';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -20,9 +20,9 @@ export class RegisterComponent implements OnInit {
   showPassword = false;
   showConfirmPassword = false;
 
-  language;
-  i18nValues;
-  toastMessage;
+  language: string;
+  i18nValues: any;
+  toastMessage: Message[];
   languages = LANGUAGES;
 
   formData = {
@@ -76,7 +76,7 @@ export class RegisterComponent implements OnInit {
     this.personalizeService.setRefTheme(ThemeType.Default);
   }
 
-  register(result) {
+  register(result: any) {
     if (result.valid) {
       const results = this.dialogService.open({
         id: 'register-result',
@@ -102,19 +102,19 @@ export class RegisterComponent implements OnInit {
     }
   }
 
-  goToLogin(dialogResult) {
+  goToLogin(dialogResult: any) {
     dialogResult.modalInstance.hide();
     this.route.navigate(['/login']);
   }
 
-  onLanguageClick(language) {
+  onLanguageClick(language: string) {
     this.language = language;
     localStorage.setItem('lang', this.language);
     this.i18n.toggleLang(this.language);
     this.translate.use(this.language);
   }
 
-  sameToPassWord(value) {
+  sameToPassWord(value: string) {
     return value === this.formData.password;
   }
 }
diff --git a/src/app/@shared/components/side-settings/side-settings.component.html b/src/app/@shared/components/side-settings/side-settings.component.html
index 19dd400..cf0db20 100644
--- a/src/app/@shared/components/side-settings/side-settings.component.html
+++ b/src/app/@shared/components/side-settings/side-settings.component.html
@@ -6,116 +6,59 @@
   <div class="da-options da-menu-item">
     <div class="da-options-header">
       <p>
-        {{ "side-setting.layout" | translate }}
-        <i
-          class="icon icon-helping"
-          dTooltip
-          [content]="helpContent"
-          [position]="'top'"
-        ></i>
+        {{ 'side-setting.layout' | translate }}
+        <i class="icon icon-helping" dTooltip [content]="helpContent" [position]="'top'"></i>
       </p>
     </div>
     <div class="da-option-items">
-      <div
-        class="da-option-item da-side-bar-layout-item"
-        (click)="handleLayoutClicked('sidebar')"
-      >
-        <i
-          class="icon icon-right selected"
-          [ngStyle]="{ display: layout === 'sidebar' ? '' : 'none' }"
-        ></i>
+      <div class="da-option-item da-side-bar-layout-item" (click)="handleLayoutClicked('sidebar')">
+        <i class="icon icon-right selected" [ngStyle]="{ display: layout === 'sidebar' ? '' : 'none' }"></i>
       </div>
-      <div
-        class="da-option-item da-topnav-layout-item"
-        (click)="handleLayoutClicked('topNav')"
-      >
-        <i
-          class="icon icon-right"
-          [ngStyle]="{ display: layout === 'topNav' ? '' : 'none' }"
-        ></i>
+      <div class="da-option-item da-topnav-layout-item" (click)="handleLayoutClicked('topNav')">
+        <i class="icon icon-right" [ngStyle]="{ display: layout === 'topNav' ? '' : 'none' }"></i>
       </div>
-      <div
-        class="da-option-item da-left-right-layout-item"
-        (click)="handleLayoutClicked('left-right')"
-      >
-        <i
-          class="icon icon-right"
-          [ngStyle]="{ display: layout === 'left-right' ? '' : 'none' }"
-        ></i>
+      <div class="da-option-item da-left-right-layout-item" (click)="handleLayoutClicked('left-right')">
+        <i class="icon icon-right" [ngStyle]="{ display: layout === 'left-right' ? '' : 'none' }"></i>
       </div>
     </div>
     <div class="da-option-multiple da-no-option-items">
       <div class="da-multiple-item">
-        <span>{{ "side-setting.fix-header" | translate }}</span>
-        <d-toggle
-          [(ngModel)]="layoutConfig.header.fixed"
-          [disabled]="layout === 'sidebar'"
-          (ngModelChange)="updateLayout()"
-        ></d-toggle>
+        <span>{{ 'side-setting.fix-header' | translate }}</span>
+        <d-toggle [(ngModel)]="layoutConfig.header!.fixed" [disabled]="layout === 'sidebar'" (ngModelChange)="updateLayout()"></d-toggle>
       </div>
-      <div
-        class="da-multiple-item"
-        [title]="
-          layout !== 'left-right'
-            ? sidebarNotice['cannotConfig']
-            : sidebarNotice['canConfig']
-        "
-      >
-        <span>{{ "side-setting.fix-sidebar" | translate }}</span>
-        <d-toggle
-          [(ngModel)]="layoutConfig.sidebar.fixed"
-          [disabled]="layout === 'topNav'"
-          (ngModelChange)="updateLayout()"
-        ></d-toggle>
+      <div class="da-multiple-item" [title]="layout !== 'left-right' ? sidebarNotice['cannotConfig'] : sidebarNotice['canConfig']">
+        <span>{{ 'side-setting.fix-sidebar' | translate }}</span>
+        <d-toggle [(ngModel)]="layoutConfig.sidebar.fixed" [disabled]="layout === 'topNav'" (ngModelChange)="updateLayout()"></d-toggle>
       </div>
     </div>
   </div>
   <div class="da-options da-menu-item">
     <div class="da-options-header">
-      <p>{{ "side-setting.content-area" | translate }}</p>
+      <p>{{ 'side-setting.content-area' | translate }}</p>
     </div>
     <div class="da-option-multiple da-no-option-items">
       <div class="da-multiple-item">
-        <span>{{ "side-setting.hide-footer" | translate }}</span>
-        <d-toggle
-          [(ngModel)]="layoutConfig.footer.hidden"
-          (ngModelChange)="updateLayout()"
-        ></d-toggle>
+        <span>{{ 'side-setting.hide-footer' | translate }}</span>
+        <d-toggle [(ngModel)]="layoutConfig.footer!.hidden" (ngModelChange)="updateLayout()"></d-toggle>
       </div>
       <div class="da-multiple-item">
-        <span>{{ "side-setting.hide-top" | translate }}</span>
-        <d-toggle
-          [(ngModel)]="layoutConfig.header.hidden"
-          (ngModelChange)="updateLayout()"
-        ></d-toggle>
+        <span>{{ 'side-setting.hide-top' | translate }}</span>
+        <d-toggle [(ngModel)]="layoutConfig.header!.hidden" (ngModelChange)="updateLayout()"></d-toggle>
       </div>
       <div class="da-multiple-item">
-        <span>{{ "side-setting.hide-menu" | translate }}</span>
-        <d-toggle
-          [(ngModel)]="layoutConfig.sidebar.hidden"
-          [disabled]="layout === 'topNav'"
-          (ngModelChange)="updateLayout()"
-        ></d-toggle>
+        <span>{{ 'side-setting.hide-menu' | translate }}</span>
+        <d-toggle [(ngModel)]="layoutConfig.sidebar.hidden" [disabled]="layout === 'topNav'" (ngModelChange)="updateLayout()"></d-toggle>
       </div>
       <div class="da-multiple-item">
-        <span>{{ "side-setting.hide-menu-head" | translate }}</span>
-        <d-toggle
-          [(ngModel)]="layoutConfig.hideLogo"
-          (ngModelChange)="updateLayout()"
-        ></d-toggle>
+        <span>{{ 'side-setting.hide-menu-head' | translate }}</span>
+        <d-toggle [(ngModel)]="layoutConfig.hideLogo" (ngModelChange)="updateLayout()"></d-toggle>
       </div>
     </div>
   </div>
   <div class="da-options da-menu-item">
-    <d-alert [type]="'info'" [closeable]="false">{{
-      "side-setting.notice" | translate
-    }}</d-alert>
-    <d-button
-      [bsStyle]="'common'"
-      [width]="'100%'"
-      (btnClick)="onCopyClicked()"
-    >
-      {{ "side-setting.copy-config" | translate }}
+    <d-alert [type]="'info'" [closeable]="false">{{ 'side-setting.notice' | translate }}</d-alert>
+    <d-button [bsStyle]="'common'" [width]="'100%'" (btnClick)="onCopyClicked()">
+      {{ 'side-setting.copy-config' | translate }}
       <i class="icon icon-copy"></i>
     </d-button>
   </div>
diff --git a/src/app/@shared/components/side-settings/side-settings.component.ts b/src/app/@shared/components/side-settings/side-settings.component.ts
index 243d822..36c2c6f 100644
--- a/src/app/@shared/components/side-settings/side-settings.component.ts
+++ b/src/app/@shared/components/side-settings/side-settings.component.ts
@@ -1,11 +1,7 @@
 import { Component, Input, OnDestroy } from '@angular/core';
 import { Clipboard } from '@angular/cdk/clipboard';
 import { DaLayoutService } from '../../layouts/da-layout/da-layout.service';
-import {
-  LEFT_RIGHT_LAYOUT_CONFIG,
-  SIDEBAR_LAYOUT_CONFIG,
-  TOP_NAV_LAYOUT_CONFIG,
-} from '../../layouts/da-layout';
+import { DaLayoutConfig, LEFT_RIGHT_LAYOUT_CONFIG, SIDEBAR_LAYOUT_CONFIG, TOP_NAV_LAYOUT_CONFIG } from '../../layouts/da-layout';
 import { DaScreenMediaQueryService } from '../../layouts/da-grid';
 import { takeUntil } from 'rxjs/operators';
 import { Subject } from 'rxjs';
@@ -17,21 +13,21 @@ import { TranslateService, TranslationChangeEvent } from '@ngx-translate/core';
   styleUrls: ['./side-settings.component.scss'],
 })
 export class SideSettingsComponent implements OnDestroy {
-  @Input() close;
+  @Input() close: any;
 
   private destroy$ = new Subject();
 
-  layoutConfig;
-  layout;
-  helpContent;
+  layoutConfig: DaLayoutConfig;
+  layout: string | null;
+  helpContent: string;
   msgs: Array<Object> = [];
 
-  i18nValues;
+  i18nValues: any;
 
-  sidebarNotice = {};
+  sidebarNotice: any = {};
 
   private change: number;
-  private compare;
+  private compare: { [key: string]: number };
 
   constructor(
     private clipboard: Clipboard,
@@ -81,12 +77,10 @@ export class SideSettingsComponent implements OnDestroy {
         this.updateI18nItems(res);
       });
 
-    this.translate.onLangChange
-      .pipe(takeUntil(this.destroy$))
-      .subscribe((event: TranslationChangeEvent) => {
-        this.i18nValues = this.translate.instant('side-setting');
-        this.updateI18nItems(this.i18nValues);
-      });
+    this.translate.onLangChange.pipe(takeUntil(this.destroy$)).subscribe((event: TranslationChangeEvent) => {
+      this.i18nValues = this.translate.instant('side-setting');
+      this.updateI18nItems(this.i18nValues);
+    });
   }
 
   handleLayoutClicked(layout: string) {
@@ -105,9 +99,6 @@ export class SideSettingsComponent implements OnDestroy {
     window.dispatchEvent(new Event('resize'));
   }
 
-  onToggleChange(event, key) {
-  }
-
   initLayoutConfig() {
     this.layoutService.getLayoutConfig().subscribe((layout) => {
       this.layoutConfig = layout;
@@ -116,14 +107,9 @@ export class SideSettingsComponent implements OnDestroy {
 
   onCopyClicked() {
     let isSucceeded = false;
-    const isSupported =
-      !!document.queryCommandSupported &&
-      !!document.queryCommandSupported('copy') &&
-      !!window;
+    const isSupported = !!document.queryCommandSupported && !!document.queryCommandSupported('copy') && !!window;
     if (isSupported) {
-      isSucceeded = this.clipboard.copy(
-        JSON.stringify(this.layoutConfig, null, 2)
-      );
+      isSucceeded = this.clipboard.copy(JSON.stringify(this.layoutConfig, null, 2));
       if (isSucceeded) {
         this.msgs = [
           {
@@ -141,24 +127,23 @@ export class SideSettingsComponent implements OnDestroy {
     window.dispatchEvent(new Event('resize'));
   }
 
-  sidebarShrink(isShrink) {
+  sidebarShrink(isShrink: boolean) {
     if (this.layoutConfig.sidebar.firSidebar) {
       this.layoutConfig.sidebar.firSidebar.width = isShrink ? 54 : 240;
     }
     this.layoutConfig.sidebar.shrink = isShrink;
   }
 
-  sidebarFold(isFold) {
+  sidebarFold(isFold: boolean) {
     if (this.layoutConfig.sidebar.firSidebar) {
       this.layoutConfig.sidebar.firSidebar.hidden = isFold;
     }
   }
 
-  updateI18nItems(values) {
+  updateI18nItems(values: any) {
     this.helpContent = values['helpContent'];
     this.sidebarNotice['canConfig'] = values['sidebar-notice']['can-config'];
-    this.sidebarNotice['cannotConfig'] =
-      values['sidebar-notice']['cannot-config'];
+    this.sidebarNotice['cannotConfig'] = values['sidebar-notice']['cannot-config'];
   }
 
   ngOnDestroy() {
diff --git a/src/app/@shared/layouts/da-grid/layout-utils.ts b/src/app/@shared/layouts/da-grid/layout-utils.ts
index 9bafb6c..49bedad 100644
--- a/src/app/@shared/layouts/da-grid/layout-utils.ts
+++ b/src/app/@shared/layouts/da-grid/layout-utils.ts
@@ -1,6 +1,7 @@
-import { DaBreakpoints, DaMergedProperty } from './layout.types';
+import { ElementRef, Renderer2 } from '@angular/core';
+import { DaBreakpoint, DaBreakpoints, DaMergedProperty } from './layout.types';
 
-export function parseFlex(flex): string {
+export function parseFlex(flex: any): string {
   if (typeof flex === 'number') {
     return `${flex} ${flex} auto`;
   } else if (typeof flex === 'string') {
@@ -11,21 +12,21 @@ export function parseFlex(flex): string {
   return flex;
 }
 
-export function setGridClass(context, elementRef, renderer): void {
+export function setGridClass(context: any, elementRef: ElementRef, renderer: Renderer2): void {
   const breakpoints = ['Ms', 'Mm', 'Ml', 'Xs', 'Sm', 'Md', 'Lg', 'Xl'];
-  const classPrefixMap = {
-    'daOffset': 'dl-offset-',
-    'daAlign': 'dl-align-items-',
-    'daJustify': 'dl-justify-content-',
-    'daAlignSelf': 'dl-align-self-',
-    'daOrder': 'dl-order-'
+  const classPrefixMap: any = {
+    daOffset: 'dl-offset-',
+    daAlign: 'dl-align-items-',
+    daJustify: 'dl-justify-content-',
+    daAlignSelf: 'dl-align-self-',
+    daOrder: 'dl-order-',
   };
-  const tempClassMap = {};
+  const tempClassMap: any = {};
   if (context.daSpan !== undefined) {
-    const className = context.daSpan === 0 ? `dl-d-none` : `dl-col-${context.daSpan}`
+    const className = context.daSpan === 0 ? `dl-d-none` : `dl-col-${context.daSpan}`;
     tempClassMap[className] = true;
   }
-  breakpoints.forEach(point => {
+  breakpoints.forEach((point) => {
     const sizeName = 'da' + point;
     point = point.toLowerCase();
     if (context[sizeName] !== undefined) {
@@ -33,9 +34,9 @@ export function setGridClass(context, elementRef, renderer): void {
         const className = context[sizeName] === 0 ? `dl-d-${point}-none` : `dl-col-${point}-${context[sizeName]}`;
         tempClassMap[className] = true;
       } else {
-        const mergedProperty = context[sizeName] as DaMergedProperty;
+        const mergedProperty: any = context[sizeName] as DaMergedProperty;
         if (mergedProperty.hasOwnProperty('span')) {
-          const className = mergedProperty['span'] === 0 ? `dl-d-${point}-none` : `dl-col-${point}-${mergedProperty['span']}`;;
+          const className = mergedProperty['span'] === 0 ? `dl-d-${point}-none` : `dl-col-${point}-${mergedProperty['span']}`;
           tempClassMap[className] = true;
         }
         for (const prefix in classPrefixMap) {
@@ -53,7 +54,7 @@ export function setGridClass(context, elementRef, renderer): void {
       const className = classPrefixMap[prefix] + context[prefix];
       tempClassMap[className] = true;
     }
-    breakpoints.forEach(point => {
+    breakpoints.forEach((point) => {
       const name = prefix + point;
       point = point.toLowerCase();
       if (context[name] !== undefined) {
@@ -79,7 +80,7 @@ export function setGridClass(context, elementRef, renderer): void {
   }
 }
 
-export function setScreenPointFlex(point, context, elementRef, renderer): void {
+export function setScreenPointFlex(point: DaBreakpoint, context: any, elementRef: ElementRef, renderer: Renderer2): void {
   let flexName;
   let flex;
 
@@ -95,10 +96,15 @@ export function setScreenPointFlex(point, context, elementRef, renderer): void {
   renderer.setStyle(elementRef.nativeElement, 'flex', parseFlex(flex));
 }
 
-export function setScreenPointElementsSpaceAndGutter(items, point, dir, context, renderer): void {
+export function setScreenPointElementsSpaceAndGutter(
+  items: HTMLElement[],
+  point: DaBreakpoint,
+  dir: string,
+  context: any,
+  renderer: Renderer2
+): void {
   let spaceName, space, gutterName, gutter;
 
-
   for (const tempPoint of DaBreakpoints) {
     spaceName = 'daSpace' + firstLetterToUpperCase(tempPoint);
     gutterName = 'daGutter' + firstLetterToUpperCase(tempPoint);
@@ -123,8 +129,8 @@ export function setScreenPointElementsSpaceAndGutter(items, point, dir, context,
   }
 
   for (let i = 0; i < items.length; i++) {
-      renderer.setStyle(items[i], 'padding-left', gutters[0] / 2 + 'px');
-      renderer.setStyle(items[i], 'padding-right', gutters[0] / 2 + 'px');
+    renderer.setStyle(items[i], 'padding-left', gutters[0] / 2 + 'px');
+    renderer.setStyle(items[i], 'padding-right', gutters[0] / 2 + 'px');
     if (gutters[1]) {
       renderer.setStyle(items[i], 'padding-top', gutters[1] / 2 + 'px');
       renderer.setStyle(items[i], 'padding-bottom', gutters[1] / 2 + 'px');
@@ -140,19 +146,20 @@ export function setScreenPointElementsSpaceAndGutter(items, point, dir, context,
   }
 }
 
-export function setScreenPointStyle(point, context, elementRef, renderer): void {
+export function setScreenPointStyle(point: DaBreakpoint, context: any, elementRef: ElementRef, renderer: Renderer2): void {
   let styleName;
   let style = context['daStyle'];
 
   for (const tempPoint of DaBreakpoints) {
     styleName = 'daStyle' + firstLetterToUpperCase(tempPoint);
-    style = context[styleName] !== undefined ? {...style, ...context[styleName]} : style;
+    style = context[styleName] !== undefined ? { ...style, ...context[styleName] } : style;
     if (tempPoint === point) {
       break;
     }
   }
 
-  for (const key of Object.keys(context.$currentDaStyle || {})) { // use Object.keys to fix tslint error.
+  for (const key of Object.keys(context.$currentDaStyle || {})) {
+    // use Object.keys to fix tslint error.
     renderer.removeStyle(elementRef.nativeElement, key);
   }
 
diff --git a/src/app/@shared/layouts/da-grid/layout.types.ts b/src/app/@shared/layouts/da-grid/layout.types.ts
index cfc238c..3f963ef 100644
--- a/src/app/@shared/layouts/da-grid/layout.types.ts
+++ b/src/app/@shared/layouts/da-grid/layout.types.ts
@@ -1,24 +1,24 @@
 export type DaJustify = 'start' | 'end' | 'center' | 'around' | 'between';
 export type DaAlign = 'start' | 'center' | 'end' | 'baseline' | 'stretch';
 export type DaAlignSelf = 'start' | 'center' | 'end' | 'baseline' | 'stretch';
-export type DaBreakpoint = 'ms' | 'mm' | 'ml' | 'xs' | 'sm' | 'md' | 'lg'| 'xl';
-export const DaBreakpoints = ['ss', 'ms', 'mm', 'ml', 'xs', 'sm', 'md', 'lg', 'xl'];
+export type DaBreakpoint = 'ss' | 'ms' | 'mm' | 'ml' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export const DaBreakpoints: DaBreakpoint[] = ['ss', 'ms', 'mm', 'ml', 'xs', 'sm', 'md', 'lg', 'xl'];
 export const DaBreakpointsMap = {
-  'ss': 0,
-  'ms': 360,
-  'mm': 768,
-  'ml': 1024,
-  'xs': 1280,
-  'sm': 1440,
-  'md': 1600,
-  'lg': 1760,
-  'xl': 1920
+  ss: 0,
+  ms: 360,
+  mm: 768,
+  ml: 1024,
+  xs: 1280,
+  sm: 1440,
+  md: 1600,
+  lg: 1760,
+  xl: 1920,
 };
 export type DaMergedProperty = {
-  daSpan?: number,
-  daOffset?: number,
-  daAlign?: DaAlign,
-  daJustify?: DaJustify,
-  daAlignSelf?: DaAlignSelf,
-  daOrder?: number,
-}
+  daSpan?: number;
+  daOffset?: number;
+  daAlign?: DaAlign;
+  daJustify?: DaJustify;
+  daAlignSelf?: DaAlignSelf;
+  daOrder?: number;
+};
diff --git a/src/app/@shared/layouts/da-grid/screen-media-query.service.ts b/src/app/@shared/layouts/da-grid/screen-media-query.service.ts
index 3d0c13c..a76e487 100644
--- a/src/app/@shared/layouts/da-grid/screen-media-query.service.ts
+++ b/src/app/@shared/layouts/da-grid/screen-media-query.service.ts
@@ -3,49 +3,47 @@ import { DaBreakpoint, DaBreakpoints, DaBreakpointsMap } from './layout.types';
 import { fromEvent, ReplaySubject, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
-@Injectable(
-  {providedIn: 'root'}
-)
+@Injectable({ providedIn: 'root' })
 export class DaScreenMediaQueryService implements OnDestroy {
   private currentPoint: DaBreakpoint;
-  private pointChangeSub: ReplaySubject<{ currentPoint: DaBreakpoint, change: number, compare: { [key: string]: number } }> = new ReplaySubject(1);
+  private pointChangeSub: ReplaySubject<{ currentPoint: DaBreakpoint; change: number; compare: { [key: string]: number } }> =
+    new ReplaySubject(1);
   private destroy$ = new Subject();
 
   // 可以传入一个基准point，返回数据结构{ currentPoint, 变大or变小or没变，比基准point大or小or一样 }
-  public getPoint(): ReplaySubject<{ currentPoint: DaBreakpoint, change: number, compare: { [key: string]: number } }> {
+  public getPoint(): ReplaySubject<{ currentPoint: DaBreakpoint; change: number; compare: { [key: string]: number } }> {
     if (!this.currentPoint) {
-      this.currentPoint = this.getCurrentPoint();
+      this.currentPoint = this.getCurrentPoint()!;
       this.pointChangeSub.next({
         currentPoint: this.currentPoint,
         change: 0,
-        compare: this.comparePoints(this.currentPoint)
+        compare: this.comparePoints(this.currentPoint),
       });
 
-      fromEvent(window, 'resize').pipe(
-        takeUntil(this.destroy$)
-      ).subscribe(() => {
-        const tempPoint = this.getCurrentPoint();
-        if (this.currentPoint !== tempPoint) {
-          const change = this.comparePoints(tempPoint, this.currentPoint) as number;
-          this.currentPoint = tempPoint;
+      fromEvent(window, 'resize')
+        .pipe(takeUntil(this.destroy$))
+        .subscribe(() => {
+          const tempPoint = this.getCurrentPoint()!;
+          if (this.currentPoint !== tempPoint) {
+            const change = this.comparePoints(tempPoint, this.currentPoint) as number;
+            this.currentPoint = tempPoint;
 
-          this.pointChangeSub.next({
-            currentPoint: this.currentPoint,
-            change: change,
-            compare: this.comparePoints(tempPoint),
-          });
-        }
-      });
+            this.pointChangeSub.next({
+              currentPoint: this.currentPoint,
+              change: change,
+              compare: this.comparePoints(tempPoint),
+            });
+          }
+        });
     }
 
     return this.pointChangeSub;
   }
 
-
   // 无p2，则全量对比
   private comparePoints(p1: DaBreakpoint, p2?: DaBreakpoint) {
-    let index1, index2;
-    for(let i = 0; i < DaBreakpoints.length; i++) {
+    let index1: any, index2: any;
+    for (let i = 0; i < DaBreakpoints.length; i++) {
       if (p1 === DaBreakpoints[i]) {
         index1 = i;
       }
@@ -55,10 +53,10 @@ export class DaScreenMediaQueryService implements OnDestroy {
     }
 
     if (!p2) {
-      let res = {};
+      let res: any = {};
       DaBreakpoints.forEach((point, index) => {
         res[point] = index1 - index;
-      })
+      });
 
       return res;
     }
@@ -66,14 +64,14 @@ export class DaScreenMediaQueryService implements OnDestroy {
     return index1 - index2;
   }
 
-  private getCurrentPoint(): DaBreakpoint {
+  private getCurrentPoint(): DaBreakpoint | undefined {
     const currentScreenWidth = window.innerWidth;
     for (let i = 0; i < DaBreakpoints.length; i++) {
-      if (DaBreakpointsMap[DaBreakpoints[i]] >= currentScreenWidth
-        || i === DaBreakpoints.length - 1) {
+      if (DaBreakpointsMap[DaBreakpoints[i]] >= currentScreenWidth || i === DaBreakpoints.length - 1) {
         return DaBreakpoints[i] as DaBreakpoint;
       }
     }
+    return;
   }
 
   ngOnDestroy(): void {
diff --git a/src/app/@shared/layouts/da-layout/da-layout.component.html b/src/app/@shared/layouts/da-layout/da-layout.component.html
index 485d892..6a0e6fb 100644
--- a/src/app/@shared/layouts/da-layout/da-layout.component.html
+++ b/src/app/@shared/layouts/da-layout/da-layout.component.html
@@ -1,13 +1,13 @@
 <d-layout class="da-layout-wrapper">
   <d-aside
-      *ngIf="config?.sidebar?.fixed"
-      class="da-layout-aside-wrapper"
-      [ngStyle]="{
-        display: config.sidebar.hidden ? 'none' : null,
-        width: getSidebarWidth(),
-        flex: '0 0 ' + getSidebarWidth()
-      }"
-    ></d-aside>
+    *ngIf="config?.sidebar?.fixed"
+    class="da-layout-aside-wrapper"
+    [ngStyle]="{
+      display: config.sidebar.hidden ? 'none' : null,
+      width: getSidebarWidth(),
+      flex: '0 0 ' + getSidebarWidth()
+    }"
+  ></d-aside>
   <d-aside
     class="da-layout-aside-wrapper"
     [class.da-no-sec-sidebar]="config.sidebar?.secSidebar?.hidden"
@@ -27,7 +27,7 @@
       *ngIf="config?.header?.fixed"
       class="da-layout-header-wrapper"
       [ngStyle]="{
-        display: config.header.hidden ? 'none' : null,
+        display: config.header?.hidden ? 'none' : null,
         height: getHeaderHeight()
       }"
     ></d-header>
@@ -36,9 +36,9 @@
       [class.da-no-sec-header]="config.header?.secHeader?.hidden"
       [class.da-layout-header-fixed]="config?.header?.fixed"
       [ngStyle]="{
-        width: (config?.header?.fixed && config.mode === 'sidebarTop') ? 'calc(100% - ' + getSidebarWidth() + ')': null,
-        display: config.header.hidden ? 'none' : null,
-        zIndex: config.header.zIndex
+        width: config?.header?.fixed && config.mode === 'sidebarTop' ? 'calc(100% - ' + getSidebarWidth() + ')' : null,
+        display: config.header?.hidden ? 'none' : null,
+        zIndex: config.header?.zIndex
       }"
     >
       <ng-content select="da-layout-header"></ng-content>
diff --git a/src/app/@shared/layouts/da-layout/da-layout.component.ts b/src/app/@shared/layouts/da-layout/da-layout.component.ts
index 710737b..a4571ec 100644
--- a/src/app/@shared/layouts/da-layout/da-layout.component.ts
+++ b/src/app/@shared/layouts/da-layout/da-layout.component.ts
@@ -1,10 +1,4 @@
-import {
-  Component,
-  HostBinding,
-  Input,
-  OnDestroy,
-  ViewEncapsulation,
-} from '@angular/core';
+import { Component, HostBinding, Input, OnDestroy, ViewEncapsulation } from '@angular/core';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { DaLayoutService } from './da-layout.service';
@@ -33,14 +27,14 @@ export class DaLayoutHeaderComponent implements OnDestroy {
     return this?.config?.hidden ? 'none' : null;
   }
 
-  @Input() config: DaLayoutConfig['header']['firHeader'];
+  @Input() config: DaLayoutConfig['header'];
 
   constructor(private layoutService: DaLayoutService) {
     this.layoutService
       .getLayoutConfig()
       .pipe(takeUntil(this.destroy$))
       .subscribe((config: DaLayoutConfig) => {
-        this.config = config.header.firHeader;
+        this.config = config!.header!.firHeader;
       });
   }
 
@@ -73,14 +67,14 @@ export class DaLayoutSecHeaderComponent implements OnDestroy {
     return this?.config?.hidden ? 'none' : null;
   }
 
-  @Input() config: DaLayoutConfig['header']['secHeader'];
+  @Input() config: DaLayoutConfig['header'];
 
   constructor(private layoutService: DaLayoutService) {
     this.layoutService
       .getLayoutConfig()
       .pipe(takeUntil(this.destroy$))
       .subscribe((config: DaLayoutConfig) => {
-        this.config = config.header.secHeader;
+        this.config = config!.header!.secHeader;
       });
   }
 
@@ -224,12 +218,12 @@ export class DaLayoutComponent implements OnDestroy {
       return width + 'px';
     }
 
-    if (!this.config.sidebar.firSidebar.hidden) {
-      width += this.config.sidebar.firSidebar.width;
+    if (!this.config!.sidebar!.firSidebar!.hidden) {
+      width += this.config!.sidebar!.firSidebar!.width!;
     }
 
-    if (!this.config.sidebar.secSidebar.hidden) {
-      width += this.config.sidebar.secSidebar.width;
+    if (!this.config!.sidebar!.secSidebar!.hidden) {
+      width += this.config!.sidebar!.secSidebar!.width!;
     }
 
     return width + 'px';
@@ -238,16 +232,16 @@ export class DaLayoutComponent implements OnDestroy {
   getHeaderHeight(): string {
     let height = 0;
 
-    if (this.config.header.hidden) {
+    if (this.config!.header!.hidden) {
       return height + 'px';
     }
 
-    if (!this.config.header.firHeader.hidden) {
-      height += this.config.header.firHeader.height;
+    if (!this.config!.header!.firHeader!.hidden) {
+      height += this.config!.header!.firHeader!.height!;
     }
 
-    if (!this.config.header.secHeader.hidden) {
-      height += this.config.header.secHeader.height;
+    if (!this.config!.header!.secHeader!.hidden) {
+      height += this.config!.header!.secHeader!.height!;
     }
 
     return height + 'px';
diff --git a/src/app/@shared/layouts/da-layout/da-layout.service.ts b/src/app/@shared/layouts/da-layout/da-layout.service.ts
index 2fa07c1..b1fdc7d 100644
--- a/src/app/@shared/layouts/da-layout/da-layout.service.ts
+++ b/src/app/@shared/layouts/da-layout/da-layout.service.ts
@@ -4,20 +4,20 @@ import { DaLayoutConfig } from './da-layout.type';
 import { DEFAULT_LAYOUT_CONFIG } from './default-layout.config';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class DaLayoutService {
-  private _config: DaLayoutConfig = DEFAULT_LAYOUT_CONFIG
+  private _config: DaLayoutConfig = DEFAULT_LAYOUT_CONFIG;
   private layoutSubject = new ReplaySubject<DaLayoutConfig>(1);
 
   constructor() {
-    if (localStorage.getItem('da-layout')) {
-      this._config = JSON.parse(localStorage.getItem('da-layout'));
+    const layoutConfig = localStorage.getItem('da-layout');
+    if (layoutConfig) {
+      this._config = JSON.parse(layoutConfig);
     }
-    this.layoutSubject.next(this._config)
+    this.layoutSubject.next(this._config);
   }
 
-
   getLayoutConfig() {
     return this.layoutSubject.asObservable();
   }
diff --git a/src/app/@shared/layouts/da-layout/da-layout.type.ts b/src/app/@shared/layouts/da-layout/da-layout.type.ts
index 8ab0bb0..524b38f 100644
--- a/src/app/@shared/layouts/da-layout/da-layout.type.ts
+++ b/src/app/@shared/layouts/da-layout/da-layout.type.ts
@@ -1,41 +1,41 @@
 export interface DaLayoutConfig {
-  id: string,
-  mode?: 'sidebarTop' | 'headerTop',
+  id: string;
+  mode?: 'sidebarTop' | 'headerTop';
   header?: {
-    fixed?: boolean,
-    hidden?: boolean,
-    zIndex?: number,
+    fixed?: boolean;
+    hidden?: boolean;
+    zIndex?: number;
     firHeader?: {
-      height?: number,
-      hidden?: boolean,
-      zIndex?: number
-    },
+      height?: number;
+      hidden?: boolean;
+      zIndex?: number;
+    };
     secHeader?: {
-      height?: number,
-      hidden?: boolean,
-      zIndex?: number
-    }
-    [key: string]: any,
-  },
+      height?: number;
+      hidden?: boolean;
+      zIndex?: number;
+    };
+    [key: string]: any;
+  };
   sidebar: {
-    fixed?: boolean,
-    hidden?: boolean,
-    zIndex?: number,
+    fixed?: boolean;
+    hidden?: boolean;
+    zIndex?: number;
     firSidebar?: {
-      width?: number,
-      hidden?: boolean,
-      zIndex?: number
-    },
+      width?: number;
+      hidden?: boolean;
+      zIndex?: number;
+    };
     secSidebar?: {
-      width?: number,
-      hidden?: boolean,
-      zIndex?: number
-    }
-    [key: string]: any,
-  }
+      width?: number;
+      hidden?: boolean;
+      zIndex?: number;
+    };
+    [key: string]: any;
+  };
   footer?: {
     height?: number;
     hidden?: boolean;
-  }
-  [key: string]: any,
+  };
+  [key: string]: any;
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 82132df..15e7bbe 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -7,12 +7,12 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { CoreModule } from './@core/core.module';
 import { SharedModule } from './@shared/shared.module';
-import { Observable, of } from 'rxjs'; 
+import { Observable, of } from 'rxjs';
 import { I18N } from '../config/language-config';
 
 class I18NLoader implements TranslateLoader {
-  getTranslation(lang: string): Observable<Object> {
-    return of(I18N[lang])
+  getTranslation(lang: 'zh-cn' | 'en-us'): Observable<Object> {
+    return of(I18N[lang]);
   }
 }
 
@@ -28,9 +28,9 @@ class I18NLoader implements TranslateLoader {
     TranslateModule.forRoot({
       loader: {
         provide: TranslateLoader,
-        useClass: I18NLoader
-      }
-    })
+        useClass: I18NLoader,
+      },
+    }),
   ],
   providers: [],
   bootstrap: [AppComponent],
diff --git a/src/app/pages/abnormal/forbidden/forbidden.component.ts b/src/app/pages/abnormal/forbidden/forbidden.component.ts
index 5a57e0a..5ce2a6b 100644
--- a/src/app/pages/abnormal/forbidden/forbidden.component.ts
+++ b/src/app/pages/abnormal/forbidden/forbidden.component.ts
@@ -3,17 +3,17 @@ import { Component, OnInit, OnDestroy } from '@angular/core';
 @Component({
   selector: 'da-forbidden',
   templateUrl: './forbidden.component.html',
-  styleUrls: ['../abnormal.component.scss']
+  styleUrls: ['../abnormal.component.scss'],
 })
 export class ForbiddenComponent implements OnInit, OnDestroy {
-  themeService;
+  themeService: any;
   darkMode = '';
-  isDark;
+  isDark: boolean;
 
-  constructor() { }
+  constructor() {}
 
   ngOnInit(): void {
-    this.themeService = window['devuiThemeService'];
+    this.themeService = (window as { [key: string]: any })['devuiThemeService'];
     if (this.themeService) {
       this.themeChange();
     }
@@ -33,7 +33,7 @@ export class ForbiddenComponent implements OnInit, OnDestroy {
     } else {
       this.darkMode = '';
     }
-  }
+  };
 
   ngOnDestroy() {
     if (this.themeService && this.themeService.eventBus) {
diff --git a/src/app/pages/abnormal/not-found/not-found.component.ts b/src/app/pages/abnormal/not-found/not-found.component.ts
index f10c239..2fa4d00 100644
--- a/src/app/pages/abnormal/not-found/not-found.component.ts
+++ b/src/app/pages/abnormal/not-found/not-found.component.ts
@@ -3,17 +3,17 @@ import { Component, OnInit, OnDestroy } from '@angular/core';
 @Component({
   selector: 'da-not-found',
   templateUrl: './not-found.component.html',
-  styleUrls: ['../abnormal.component.scss']
+  styleUrls: ['../abnormal.component.scss'],
 })
 export class NotFoundComponent implements OnInit, OnDestroy {
-  themeService;
+  themeService: any;
   darkMode = '';
-  isDark;
+  isDark: boolean;
 
-  constructor() { }
+  constructor() {}
 
   ngOnInit(): void {
-    this.themeService = window['devuiThemeService'];
+    this.themeService = (window as { [key: string]: any })['devuiThemeService'];
     if (this.themeService) {
       this.themeChange();
     }
@@ -33,7 +33,7 @@ export class NotFoundComponent implements OnInit, OnDestroy {
     } else {
       this.darkMode = '';
     }
-  }
+  };
 
   ngOnDestroy() {
     if (this.themeService && this.themeService.eventBus) {
diff --git a/src/app/pages/abnormal/server-error/server-error.component.ts b/src/app/pages/abnormal/server-error/server-error.component.ts
index e2a2bb7..3d025ae 100644
--- a/src/app/pages/abnormal/server-error/server-error.component.ts
+++ b/src/app/pages/abnormal/server-error/server-error.component.ts
@@ -3,18 +3,17 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
 @Component({
   selector: 'da-server-error',
   templateUrl: './server-error.component.html',
-  styleUrls: ['../abnormal.component.scss']
+  styleUrls: ['../abnormal.component.scss'],
 })
 export class ServerErrorComponent implements OnInit, OnDestroy {
-
-  themeService;
+  themeService: any;
   darkMode = '';
-  isDark;
+  isDark: boolean;
 
-  constructor() { }
+  constructor() {}
 
   ngOnInit(): void {
-    this.themeService = window['devuiThemeService'];
+    this.themeService = (window as { [key: string]: any })['devuiThemeService'];
     if (this.themeService) {
       this.themeChange();
     }
@@ -34,12 +33,11 @@ export class ServerErrorComponent implements OnInit, OnDestroy {
     } else {
       this.darkMode = '';
     }
-  }
+  };
 
   ngOnDestroy() {
     if (this.themeService && this.themeService.eventBus) {
       this.themeService.eventBus.remove('themeChanged', this.themeChange);
     }
   }
-
 }
diff --git a/src/app/pages/dashboard/analysis/analysis-gantt/analysis-gantt.component.html b/src/app/pages/dashboard/analysis/analysis-gantt/analysis-gantt.component.html
index c31a2d0..3e212d0 100644
--- a/src/app/pages/dashboard/analysis/analysis-gantt/analysis-gantt.component.html
+++ b/src/app/pages/dashboard/analysis/analysis-gantt/analysis-gantt.component.html
@@ -11,11 +11,11 @@
         <div #ganttBody class="da-gantt-body" [style.width]="ganttScaleWidth">
           <div class="da-gantt-item" *ngFor="let item of list">
             <d-gantt-bar
-              [startDate]="item?.startDate"
-              [endDate]="item?.endDate"
+              [startDate]="item.startDate!"
+              [endDate]="item.endDate!"
               [tipTemplateRef]="tipTemplate"
-              [id]="item?.id"
-              [progressRate]="item?.progressRate"
+              [id]="item.id!"
+              [progressRate]="item.progressRate!"
               (barMoveStartEvent)="onGanttBarMoveStart()"
               (barMovingEvent)="onGanttBarMoving($event)"
               (barResizeStartEvent)="onGanttBarResizeStart()"
diff --git a/src/app/pages/dashboard/analysis/analysis-gantt/analysis-gantt.component.ts b/src/app/pages/dashboard/analysis/analysis-gantt/analysis-gantt.component.ts
index 9b209aa..5e71516 100644
--- a/src/app/pages/dashboard/analysis/analysis-gantt/analysis-gantt.component.ts
+++ b/src/app/pages/dashboard/analysis/analysis-gantt/analysis-gantt.component.ts
@@ -17,14 +17,11 @@ export class AnalysisGanttComponent implements OnInit {
   ganttEndDate: Date;
   unit = GanttScaleUnit.day;
   ganttScaleWidth: string;
-  ganttSacleConfigHandler: Subscription;
+  ganttSacleConfigHandler: Subscription | null;
   originOffsetLeft = 0;
   scrollElement: HTMLElement;
 
-  constructor(
-    private ganttService: GanttService,
-    private ganttDataService: GanttDataService
-  ) {}
+  constructor(private ganttService: GanttService, private ganttDataService: GanttDataService) {}
 
   ngOnInit(): void {
     this.ganttDataService.getGantts().subscribe((res) => {
@@ -38,28 +35,18 @@ export class AnalysisGanttComponent implements OnInit {
       endDate: this.ganttEndDate,
       unit: this.unit,
     });
-    this.ganttScaleWidth =
-      this.ganttService.getDurationWidth(
-        this.ganttStartDate,
-        this.ganttEndDate
-      ) + 'px';
-    this.ganttSacleConfigHandler = this.ganttService.ganttScaleConfigChange.subscribe(
-      (config) => {
-        if (config.startDate) {
-          this.ganttStartDate = config.startDate;
-        }
-        if (config.endDate) {
-          this.ganttEndDate = config.endDate;
-        }
-        if (config.startDate || config.endDate) {
-          this.ganttScaleWidth =
-            this.ganttService.getDurationWidth(
-              this.ganttStartDate,
-              this.ganttEndDate
-            ) + 'px';
-        }
+    this.ganttScaleWidth = this.ganttService.getDurationWidth(this.ganttStartDate, this.ganttEndDate) + 'px';
+    this.ganttSacleConfigHandler = this.ganttService.ganttScaleConfigChange.subscribe((config) => {
+      if (config.startDate) {
+        this.ganttStartDate = config.startDate;
       }
-    );
+      if (config.endDate) {
+        this.ganttEndDate = config.endDate;
+      }
+      if (config.startDate || config.endDate) {
+        this.ganttScaleWidth = this.ganttService.getDurationWidth(this.ganttStartDate, this.ganttEndDate) + 'px';
+      }
+    });
   }
 
   ngAfterViewInit() {
@@ -84,10 +71,7 @@ export class AnalysisGanttComponent implements OnInit {
 
   adjustScrollView(info: GanttTaskInfo) {
     const moveOffset = info.moveOffset ? info.moveOffset : 0;
-    this.scrollElement.scrollTo(
-      this.originOffsetLeft + moveOffset,
-      this.scrollElement.scrollTop
-    );
+    this.scrollElement.scrollTo(this.originOffsetLeft + moveOffset, this.scrollElement.scrollTop);
   }
 
   onGanttBarMove(info: GanttTaskInfo) {
diff --git a/src/app/pages/dashboard/analysis/analysis-line/analysis-line.component.ts b/src/app/pages/dashboard/analysis/analysis-line/analysis-line.component.ts
index 72e7eda..e37bfe0 100644
--- a/src/app/pages/dashboard/analysis/analysis-line/analysis-line.component.ts
+++ b/src/app/pages/dashboard/analysis/analysis-line/analysis-line.component.ts
@@ -7,7 +7,7 @@ import { EchartsService } from 'src/app/@core/mock/echarts.service';
   styleUrls: ['./analysis-line.component.scss'],
 })
 export class AnalysisLineComponent implements OnInit {
-  options;
+  options: any;
 
   constructor(private echartsService: EchartsService) {}
 
diff --git a/src/app/pages/dashboard/analysis/echarts/echarts.component.ts b/src/app/pages/dashboard/analysis/echarts/echarts.component.ts
index abe8485..48a8065 100644
--- a/src/app/pages/dashboard/analysis/echarts/echarts.component.ts
+++ b/src/app/pages/dashboard/analysis/echarts/echarts.component.ts
@@ -9,8 +9,8 @@ import { EchartsService } from 'src/app/@core/mock/echarts.service';
   styleUrls: ['./echarts.component.scss'],
 })
 export class EchartsComponent implements OnInit, AfterViewInit {
-  pieData;
-  serviceData;
+  pieData: any;
+  serviceData: any;
 
   dataTableServiceOption = {
     columns: [
@@ -42,8 +42,8 @@ export class EchartsComponent implements OnInit, AfterViewInit {
     ],
   };
 
-  serviceSource = [];
-  pieSource = [];
+  serviceSource: any = [];
+  pieSource: any = [];
 
   resizeSub: Subscription;
   pieChart: any;
@@ -76,7 +76,7 @@ export class EchartsComponent implements OnInit, AfterViewInit {
     });
   }
 
-  getPieChart(e) {
+  getPieChart(e: any) {
     this.pieChart = e;
   }
 
diff --git a/src/app/pages/dashboard/analysis/statics/statics.component.ts b/src/app/pages/dashboard/analysis/statics/statics.component.ts
index a5aab3a..df8b102 100644
--- a/src/app/pages/dashboard/analysis/statics/statics.component.ts
+++ b/src/app/pages/dashboard/analysis/statics/statics.component.ts
@@ -7,7 +7,7 @@ import { EchartsService } from 'src/app/@core/mock/echarts.service';
   styleUrls: ['./statics.component.scss'],
 })
 export class StaticsComponent implements OnInit {
-  histogramData;
+  histogramData: any;
 
   constructor(private echartsService: EchartsService) {}
 
diff --git a/src/app/pages/dashboard/echarts.ts b/src/app/pages/dashboard/echarts.ts
index fa4d40c..4454566 100644
--- a/src/app/pages/dashboard/echarts.ts
+++ b/src/app/pages/dashboard/echarts.ts
@@ -121,57 +121,9 @@ export const echartServiceOption = {
     {
       name: '服务水位',
       data: [
-        21.69,
-        30.16,
-        11.64,
-        11.64,
-        31.22,
-        17.46,
-        14.81,
-        44.44,
-        28.57,
-        14.81,
-        12.7,
-        35.98,
-        23.28,
-        16.93,
-        19.58,
-        8.99,
-        11.64,
-        4.23,
-        5.29,
-        1.06,
-        3.7,
-        3.17,
-        3.17,
-        5.82,
-        16.4,
-        15.87,
-        18.52,
-        13.76,
-        19.05,
-        26.46,
-        30.16,
-        24.87,
-        23.81,
-        24.87,
-        16.93,
-        17.99,
-        13.76,
-        10.58,
-        20.63,
-        12.7,
-        13.17,
-        15.82,
-        16.4,
-        15.87,
-        8.52,
-        3.76,
-        19.05,
-        6.46,
-        30.16,
-        24.87,
-        13.81,
+        21.69, 30.16, 11.64, 11.64, 31.22, 17.46, 14.81, 44.44, 28.57, 14.81, 12.7, 35.98, 23.28, 16.93, 19.58, 8.99, 11.64, 4.23, 5.29,
+        1.06, 3.7, 3.17, 3.17, 5.82, 16.4, 15.87, 18.52, 13.76, 19.05, 26.46, 30.16, 24.87, 23.81, 24.87, 16.93, 17.99, 13.76, 10.58, 20.63,
+        12.7, 13.17, 15.82, 16.4, 15.87, 8.52, 3.76, 19.05, 6.46, 30.16, 24.87, 13.81,
       ],
       type: 'line',
       smooth: false,
@@ -316,7 +268,7 @@ export const mapOption = {
     trigger: 'item',
     showDelay: 0,
     transitionDuration: 0.2,
-    formatter: function (params) {
+    formatter: function (params: any) {
       return `用户数 <br/> ${params.name}: ${params.value}`;
     },
   },
@@ -325,17 +277,7 @@ export const mapOption = {
     min: 0,
     max: 200,
     inRange: {
-      color: [
-        '#BDFDFF',
-        '#9FE1FF',
-        '#81C5FF',
-        '#61AAFF',
-        '#3F8FEC',
-        '#0676D0',
-        '#005DB4',
-        '#004698',
-        '#00307E',
-      ],
+      color: ['#BDFDFF', '#9FE1FF', '#81C5FF', '#61AAFF', '#3F8FEC', '#0676D0', '#005DB4', '#004698', '#00307E'],
     },
     text: ['High', 'Low'], // 文本，默认为数值文本
     calculable: true,
diff --git a/src/app/pages/dashboard/monitor/monitor.component.ts b/src/app/pages/dashboard/monitor/monitor.component.ts
index 26c4aed..d47c4d2 100644
--- a/src/app/pages/dashboard/monitor/monitor.component.ts
+++ b/src/app/pages/dashboard/monitor/monitor.component.ts
@@ -19,7 +19,7 @@ export class MonitorComponent implements OnInit, OnDestroy, AfterViewInit {
 
   monitorOptions = monitorOption;
   serviceOptions = echartServiceOption;
-  mapOptions = mapOption;
+  mapOptions: any = mapOption;
 
   liveUsers = 200;
   totalUsers = 5000;
@@ -66,17 +66,17 @@ export class MonitorComponent implements OnInit, OnDestroy, AfterViewInit {
     }, 2000);
 
     this.timerForService = setInterval(() => {
-      let temp = this.serviceOptions.series[0].data.pop();
+      let temp = this.serviceOptions.series[0].data.pop()!;
       this.serviceOptions.series[0].data.unshift(temp);
       this.serviceChart.setOption(this.serviceOptions, true);
     }, 1500);
   }
 
-  getOccupationChart(event) {
+  getOccupationChart(event: any) {
     this.occupationChart = event;
   }
 
-  getServiceChart(event) {
+  getServiceChart(event: any) {
     this.serviceChart = event;
   }
 
@@ -90,7 +90,7 @@ export class MonitorComponent implements OnInit, OnDestroy, AfterViewInit {
   setMapData() {
     let data = JSON.parse(chinaData);
     let value = [];
-    data['features'].forEach((data) => {
+    data['features'].forEach((data: any) => {
       let tempValue = Number((Math.random() * 200).toFixed(0));
       let temp = { name: data['properties']['name'], value: tempValue };
       value.push(temp);
diff --git a/src/app/pages/dashboard/work-space/work-item-table/work-item-table.component.ts b/src/app/pages/dashboard/work-space/work-item-table/work-item-table.component.ts
index 0ef3fdd..5154d51 100644
--- a/src/app/pages/dashboard/work-space/work-item-table/work-item-table.component.ts
+++ b/src/app/pages/dashboard/work-space/work-item-table/work-item-table.component.ts
@@ -1,5 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
 
+type TableOption = 'type' | 'description' | 'status';
+
 @Component({
   selector: 'da-work-item-table',
   templateUrl: './work-item-table.component.html',
@@ -12,13 +14,13 @@ export class WorkItemTableComponent implements OnInit {
     status: '状态',
   };
 
-  private _tableOptions;
+  private _tableOptions: any;
   @Input() get tableOptions() {
     return this._tableOptions;
   }
   set tableOptions(options: any) {
     let columns = [];
-    columns = options.map((option) => {
+    columns = options.map((option: TableOption) => {
       return {
         field: option,
         header: this.tableOptionMap[option],
@@ -27,7 +29,7 @@ export class WorkItemTableComponent implements OnInit {
     });
     this._tableOptions = { columns: columns };
   }
-  @Input() tableData;
+  @Input() tableData: any;
 
   constructor() {}
 
diff --git a/src/app/pages/dashboard/work-space/work-space-body/work-management/work-management.component.ts b/src/app/pages/dashboard/work-space/work-space-body/work-management/work-management.component.ts
index 68c5d59..db4fea6 100644
--- a/src/app/pages/dashboard/work-space/work-space-body/work-management/work-management.component.ts
+++ b/src/app/pages/dashboard/work-space/work-space-body/work-management/work-management.component.ts
@@ -87,7 +87,7 @@ export class WorkManagementComponent implements OnInit, AfterViewInit, OnDestroy
       });
   }
 
-  dropEvent(item) {
+  dropEvent(item: any) {
     const droppedItem = this.list
       .map(function (e) {
         return e.title;
diff --git a/src/app/pages/dashboard/work-space/work-space-body/work-space-body.component.html b/src/app/pages/dashboard/work-space/work-space-body/work-space-body.component.html
index c3c1a6b..a47b78b 100644
--- a/src/app/pages/dashboard/work-space/work-space-body/work-space-body.component.html
+++ b/src/app/pages/dashboard/work-space/work-space-body/work-space-body.component.html
@@ -33,7 +33,7 @@
         <div class="da-content-title">所处的团队</div>
         <div class="da-work-group-wrapper">
           <div class="da-team" *ngFor="let item of workGroups">
-            <d-avatar [name]="item?.departmentTitle[0]" [width]="30" [height]="30" [imgSrc]="item?.logoSrc"></d-avatar>
+            <d-avatar [name]="item.departmentTitle[0]" [width]="30" [height]="30" [imgSrc]="item.logoSrc"></d-avatar>
             <div class="da-team-title">{{ item?.departmentTitle }}</div>
           </div>
         </div>
diff --git a/src/app/pages/dashboard/work-space/work-space-body/work-space-body.component.ts b/src/app/pages/dashboard/work-space/work-space-body/work-space-body.component.ts
index 3aff0c3..d7a77ad 100644
--- a/src/app/pages/dashboard/work-space/work-space-body/work-space-body.component.ts
+++ b/src/app/pages/dashboard/work-space/work-space-body/work-space-body.component.ts
@@ -16,15 +16,15 @@ export class WorkSpaceBodyComponent implements OnInit, AfterViewInit, OnDestroy
   workItemElement: any;
   workItemWidth: number;
   handlingWorkData: WorkItem[];
-  handlingWorkColunm = [];
+  handlingWorkColunm: string[] = [];
   tracingWorkData: WorkItem[];
-  tracingWorkColunm = [];
+  tracingWorkColunm: string[] = [];
   riskWorkData: WorkItem[];
-  riskWorkColunm = [];
+  riskWorkColunm: string[] = [];
   workGroups: WorkGroup[];
 
   tabActiveId: string | number = 'tab1';
-  tabItems;
+  tabItems: any[];
 
   constructor(private workItemService: WorkItemService, private workGroupService: WorkGroupService) {}
 
@@ -48,7 +48,9 @@ export class WorkSpaceBodyComponent implements OnInit, AfterViewInit, OnDestroy
     });
 
     this.workGroupService.getWorkGroups().subscribe((group) => {
-      this.workGroups = group;
+      if (group) {
+        this.workGroups = group;
+      }
     });
 
     this.tabItems = [
@@ -80,7 +82,7 @@ export class WorkSpaceBodyComponent implements OnInit, AfterViewInit, OnDestroy
     window.dispatchEvent(new Event('resize'));
   }
 
-  getContent(tabId) {
+  getContent(tabId: string | number) {
     switch (tabId) {
       case 'tab1':
         return {
@@ -98,7 +100,7 @@ export class WorkSpaceBodyComponent implements OnInit, AfterViewInit, OnDestroy
           tableOptions: this.riskWorkColunm,
         };
       default:
-        break;
+        return;
     }
   }
 
diff --git a/src/app/pages/dashboard/work-space/work-space-header/work-space-header.component.ts b/src/app/pages/dashboard/work-space/work-space-header/work-space-header.component.ts
index 3bc434e..a1af702 100644
--- a/src/app/pages/dashboard/work-space/work-space-header/work-space-header.component.ts
+++ b/src/app/pages/dashboard/work-space/work-space-header/work-space-header.component.ts
@@ -6,16 +6,16 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./work-space-header.component.scss'],
 })
 export class WorkSpaceHeaderComponent implements OnInit {
-  imgSrc =
-    'https://res.hc-cdn.com/x-roma-components/1.0.10/assets/devui/logo.svg';
+  imgSrc = 'https://res.hc-cdn.com/x-roma-components/1.0.10/assets/devui/logo.svg';
 
   userName: string;
 
   constructor() {}
 
   ngOnInit(): void {
-    if (localStorage.getItem('userinfo')) {
-      this.userName = JSON.parse(localStorage.getItem('userinfo'))['account'];
+    const userInfo = localStorage.getItem('userinfo');
+    if (userInfo) {
+      this.userName = JSON.parse(userInfo)['userName'];
     }
   }
 }
diff --git a/src/app/pages/form/advance-form/advance-form.component.ts b/src/app/pages/form/advance-form/advance-form.component.ts
index f0689d9..842f551 100644
--- a/src/app/pages/form/advance-form/advance-form.component.ts
+++ b/src/app/pages/form/advance-form/advance-form.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { DialogService, EditableTip, FormLayout, TableWidthConfig } from 'ng-devui';
 import { Subscription } from 'rxjs';
+import { Item } from 'src/app/@core/data/listData';
 import { ListDataService } from 'src/app/@core/mock/list-data.service';
 import { FormConfig } from 'src/app/@shared/components/admin-form';
 
@@ -20,7 +21,7 @@ export class AdvanceFormComponent implements OnInit {
     pageSize: 10,
   };
 
-  listData = [];
+  listData: Item[] = [];
 
   headerNewForm = false;
 
@@ -87,7 +88,7 @@ export class AdvanceFormComponent implements OnInit {
     iteration: '',
     assignee: '',
     status: 'Stuck',
-    timeline: new Date(),
+    timeline: String(new Date() as unknown),
   };
 
   priorities = ['Low', 'Medium', 'High'];
@@ -133,7 +134,7 @@ export class AdvanceFormComponent implements OnInit {
     this.getList();
   }
 
-  onEditEnd(rowItem, field) {
+  onEditEnd(rowItem: any, field: any) {
     rowItem[field] = false;
   }
 
@@ -145,11 +146,11 @@ export class AdvanceFormComponent implements OnInit {
     });
   }
 
-  beforeEditStart = (rowItem, field) => {
+  beforeEditStart = (rowItem: any, field: any) => {
     return true;
   };
 
-  beforeEditEnd = (rowItem, field) => {
+  beforeEditEnd = (rowItem: any, field: any) => {
     if (rowItem && rowItem[field].length < 3) {
       return false;
     } else {
@@ -165,7 +166,7 @@ export class AdvanceFormComponent implements OnInit {
     return new Date().getTime() + 'CNWO';
   }
 
-  quickRowAdded(e) {
+  quickRowAdded(e: any) {
     const newData = { ...e };
     this.listData.unshift(newData);
     this.headerNewForm = false;
@@ -175,33 +176,33 @@ export class AdvanceFormComponent implements OnInit {
     this.headerNewForm = false;
   }
 
-  subRowAdded(index, item) {
+  subRowAdded(index: number) {
     this.listData[index].$expandConfig.expand = false;
     const newData = { ...this.defaultRowData };
     this.listData.splice(index + 1, 0, newData);
   }
 
-  subRowCancel(index) {
+  subRowCancel(index: number) {
     this.listData[index].$expandConfig.expand = false;
   }
 
-  toggleExpand(rowItem) {
+  toggleExpand(rowItem: Item) {
     if (rowItem.$expandConfig) {
       rowItem.$expandConfig.expand = !rowItem.$expandConfig.expand;
     }
   }
 
-  onPageChange(e) {
+  onPageChange(e: number) {
     this.pager.pageIndex = e;
     this.getList();
   }
 
-  onSizeChange(e) {
+  onSizeChange(e: number) {
     this.pager.pageSize = e;
     this.getList();
   }
 
-  deleteRow(index) {
+  deleteRow(index: number) {
     const results = this.dialogService.open({
       id: 'delete-dialog',
       width: '346px',
diff --git a/src/app/pages/form/basic-form/basic-form.component.ts b/src/app/pages/form/basic-form/basic-form.component.ts
index b53d265..672fd6b 100644
--- a/src/app/pages/form/basic-form/basic-form.component.ts
+++ b/src/app/pages/form/basic-form/basic-form.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
-import { FormLayout } from 'ng-devui';
+import { AbstractControlDirective } from '@angular/forms';
+import { DFormGroupRuleDirective, FormLayout } from 'ng-devui';
 import { Observable, of } from 'rxjs';
 import { delay } from 'rxjs/operators';
 
@@ -48,15 +49,15 @@ export class BasicFormComponent {
     { id: '4', name: 'Executor4' },
   ];
 
-  getValue(value) {
+  getValue(value: object) {
     console.log(value);
   }
 
-  everyRange(range) {
-    return range.every((_) => !!_);
+  everyRange(range: any) {
+    return range.every((_: any) => !!_);
   }
 
-  checkName(value) {
+  checkName(value: string) {
     let res = true;
     if (this.existprojectNames.indexOf(value) !== -1) {
       res = false;
@@ -64,7 +65,7 @@ export class BasicFormComponent {
     return of(res).pipe(delay(500));
   }
 
-  validateDate(value): Observable<string | null> {
+  validateDate(value: any): Observable<any | null> {
     let message = null;
     for (const item of value) {
       if (item.id === '2') {
@@ -78,7 +79,7 @@ export class BasicFormComponent {
     return of(message).pipe(delay(300));
   }
 
-  submitProjectForm({ valid, directive, data, errors }) {
+  submitProjectForm({ valid, directive, data, errors }: any) {
     if (valid) {
       // do something
     } else {
diff --git a/src/app/pages/form/dynamic-form/dynamic-form.component.ts b/src/app/pages/form/dynamic-form/dynamic-form.component.ts
index 1691f24..a85871b 100644
--- a/src/app/pages/form/dynamic-form/dynamic-form.component.ts
+++ b/src/app/pages/form/dynamic-form/dynamic-form.component.ts
@@ -9,7 +9,7 @@ import { DFormData } from 'src/app/@shared/components/dynamic-forms/form-item.in
   templateUrl: './dynamic-form.component.html',
   styleUrls: ['./dynamic-form.component.scss'],
 })
-export class DynamicFormComponent implements OnInit{
+export class DynamicFormComponent implements OnInit {
   projectFormData = {
     projectName: '',
     projectOwner: null,
@@ -33,32 +33,37 @@ export class DynamicFormComponent implements OnInit{
     { id: '6', label: 'Sat' },
   ];
 
-  labelList = [{
-    id: 1,
-    label: 'OpenSource'
-  },
-  {
-    id: 2,
-    label: 'Admin'
-  },
-  {
-    id: 3,
-    label: 'DevUI'
-  }];
-
-  securityValue = [{
-    name: 'Public',
-  }, {
-     name: 'Only member visible'
-  }];
+  labelList = [
+    {
+      id: 1,
+      label: 'OpenSource',
+    },
+    {
+      id: 2,
+      label: 'Admin',
+    },
+    {
+      id: 3,
+      label: 'DevUI',
+    },
+  ];
+
+  securityValue = [
+    {
+      name: 'Public',
+    },
+    {
+      name: 'Only member visible',
+    },
+  ];
 
   msgs: Array<Object> = [];
 
   ExecutorOptions = [
-    { 'id': '1', 'name': 'Executor1'},
-    { 'id': '2', 'name': 'Executor2'},
-    { 'id': '3', 'name': 'Executor3'},
-    { 'id': '4', 'name': 'Executor4'}
+    { id: '1', name: 'Executor1' },
+    { id: '2', name: 'Executor2' },
+    { id: '3', name: 'Executor3' },
+    { id: '4', name: 'Executor4' },
   ];
 
   OwnerOptions = [
@@ -91,20 +96,21 @@ export class DynamicFormComponent implements OnInit{
                 pattern: /^[a-zA-Z0-9]+(\s+[a-zA-Z0-9]+)*$/,
                 message: {
                   'zh-cn': '仅允许输入数字与大小写字母',
-                  'en-us': 'The user name cannot contain characters except uppercase and lowercase letters.'
+                  'en-us': 'The user name cannot contain characters except uppercase and lowercase letters.',
                 },
-              }],
+              },
+            ],
             asyncValidators: [
               {
                 sameName: this.checkName.bind(this),
                 message: {
                   'zh-cn': '用户名重名',
-                  'en-us': 'Duplicate name.'
-                }
-              }
-            ]
-          }
-        }
+                  'en-us': 'Duplicate name.',
+                },
+              },
+            ],
+          },
+        },
       },
       projectOwner: {
         key: 'projectOwner',
@@ -114,16 +120,16 @@ export class DynamicFormComponent implements OnInit{
         hasHelp: true,
         helpTips: 'Owner of each project.',
         ui: {
-            values: this.projectFormData.projectOwner,
-            placeholder: 'Select Owner',
-            options: this.OwnerOptions,
-            multiple: true,
-            filterKey: 'name',
-            extraConfig: {
-              labelization: { enable: true, overflow: 'multiple-line' }
-            },
-            validateRules: [{ required: true }]
-        }
+          values: this.projectFormData.projectOwner,
+          placeholder: 'Select Owner',
+          options: this.OwnerOptions,
+          multiple: true,
+          filterKey: 'name',
+          extraConfig: {
+            labelization: { enable: true, overflow: 'multiple-line' },
+          },
+          validateRules: [{ required: true }],
+        },
       },
       projectExecutor: {
         key: 'projectExecutor',
@@ -138,22 +144,22 @@ export class DynamicFormComponent implements OnInit{
           options: this.ExecutorOptions,
           filterKey: 'name',
           extraConfig: {
-            labelization: { enable: true, overflow: 'multiple-line' }
+            labelization: { enable: true, overflow: 'multiple-line' },
           },
           allowClear: true,
-          validateRules: [{ required: true }]
-        }
+          validateRules: [{ required: true }],
+        },
       },
       relatedLabels: {
-        key: "Related Labels",
-        type: "tagsInput",
-        label: "Related Labels",
+        key: 'Related Labels',
+        type: 'tagsInput',
+        label: 'Related Labels',
         ui: {
           tags: this.projectFormData.projectLabels,
           suggestionList: this.labelList,
           placeholder: 'please add a tag',
-          displayProperty: 'label'
-        }
+          displayProperty: 'label',
+        },
       },
       public: {
         key: 'public',
@@ -162,8 +168,8 @@ export class DynamicFormComponent implements OnInit{
         helpTips: 'whether project is public.',
         label: 'Public',
         ui: {
-          checked: this.projectFormData.isPublic
-        }
+          checked: this.projectFormData.isPublic,
+        },
       },
       projectExerciseDate: {
         key: 'projectExerciseDate',
@@ -179,18 +185,18 @@ export class DynamicFormComponent implements OnInit{
           isShowTitle: true,
           validateRules: {
             validators: [{ required: true }],
-            asyncValidators: [{ canChoose: this.validateDate.bind(this) }]
-          }
-        }
-      }
+            asyncValidators: [{ canChoose: this.validateDate.bind(this) }],
+          },
+        },
+      },
     };
   }
 
-  getValue(value) {
+  getValue(value: any) {
     console.log(value);
   }
 
-  checkName(value) {
+  checkName(value: string) {
     let res = true;
     if (this.existProjectNames.indexOf(value) !== -1) {
       res = false;
@@ -198,7 +204,7 @@ export class DynamicFormComponent implements OnInit{
     return of(res).pipe(delay(500));
   }
 
-  validateDate(value): Observable<string | null> {
+  validateDate(value: any): Observable<any | null> {
     let message = null;
     for (const item of value) {
       if (item.id === '2') {
@@ -211,7 +217,7 @@ export class DynamicFormComponent implements OnInit{
     return of(message).pipe(delay(300));
   }
 
-  submitProjectForm({valid}) {
+  submitProjectForm({ valid }: any) {
     if (valid) {
       of(this.formItems)
         .pipe(
diff --git a/src/app/pages/form/form-layout/vertical-form/vertical-form.component.ts b/src/app/pages/form/form-layout/vertical-form/vertical-form.component.ts
index 5f197ac..a41082c 100644
--- a/src/app/pages/form/form-layout/vertical-form/vertical-form.component.ts
+++ b/src/app/pages/form/form-layout/vertical-form/vertical-form.component.ts
@@ -72,7 +72,7 @@ export class VerticalFormComponent {
     ],
   };
 
-  checkName(value) {
+  checkName(value: string) {
     let res = true;
     if (this.existUsernames.indexOf(value) !== -1) {
       res = false;
@@ -80,7 +80,7 @@ export class VerticalFormComponent {
     return of(res).pipe(delay(500));
   }
 
-  sameToPassWord(value) {
+  sameToPassWord(value: string) {
     return value === this.formData.password;
   }
 }
diff --git a/src/app/pages/list/advance-list/advance-list.component.html b/src/app/pages/list/advance-list/advance-list.component.html
index e7370cd..5c5bae5 100644
--- a/src/app/pages/list/advance-list/advance-list.component.html
+++ b/src/app/pages/list/advance-list/advance-list.component.html
@@ -2,21 +2,15 @@
   <div class="da-content-banner">
     <d-breadcrumb>
       <d-breadcrumb-item
-        ><a routerLink="/">{{
-          "list.breadcrumb.home" | translate
-        }}</a></d-breadcrumb-item
+        ><a routerLink="/">{{ 'list.breadcrumb.home' | translate }}</a></d-breadcrumb-item
       >
-      <d-breadcrumb-item>{{
-        "list.breadcrumb.formPage" | translate
-      }}</d-breadcrumb-item>
-      <d-breadcrumb-item>{{
-        "list.breadcrumb.advanceList" | translate
-      }}</d-breadcrumb-item>
+      <d-breadcrumb-item>{{ 'list.breadcrumb.formPage' | translate }}</d-breadcrumb-item>
+      <d-breadcrumb-item>{{ 'list.breadcrumb.advanceList' | translate }}</d-breadcrumb-item>
     </d-breadcrumb>
     <div class="da-content-banner-title">
-      {{ "list.advanceList.title" | translate }}
+      {{ 'list.advanceList.title' | translate }}
     </div>
-    <div>{{ "list.advanceList.description" | translate }}</div>
+    <div>{{ 'list.advanceList.description' | translate }}</div>
   </div>
   <div class="da-content-wrapper">
     <da-layout-row [daGutter]="[24, 24]">
@@ -34,12 +28,7 @@
                 ></d-search>
               </div>
               <div class="da-right">
-                <d-button
-                  (click)="batchDelete()"
-                  [disabled]="!deleteList.length"
-                  style="margin-left: 12px"
-                  >Batch Delete</d-button
-                >
+                <d-button (click)="batchDelete()" [disabled]="!deleteList.length" style="margin-left: 12px">Batch Delete</d-button>
               </div>
             </div>
           </div>
@@ -62,9 +51,9 @@
                     *ngFor="let colOption of dataTableOptions.columns"
                     [resizeEnabled]="true"
                     (resizeEndEvent)="onResize($event, 'title')"
-                    [filterable]="colOption.filterable"
+                    [filterable]="colOption.filterable!"
                     [closeFilterWhenScroll]="true"
-                    [filterList]="colOption.filterList"
+                    [filterList]="colOption.filterList!"
                     (filterChange)="onFirstFilterChange($event, colOption)"
                     [extraFilterTemplate]="extraFilterTemplate"
                   >
@@ -74,26 +63,12 @@
                 </tr>
               </thead>
               <tbody dTableBody>
-                <ng-template
-                  let-rowItem="rowItem"
-                  let-rowIndex="rowIndex"
-                  let-nestedIndex="nestedIndex"
-                >
-                  <tr
-                    dTableRow
-                    [ngClass]="{ 'da-table-row-selected': rowItem.$checked }"
-                  >
+                <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex" let-nestedIndex="nestedIndex">
+                  <tr dTableRow [ngClass]="{ 'da-table-row-selected': rowItem.$checked }">
                     <td dTableCell class="devui-checkable-cell">
                       <d-checkbox
                         [ngModelOptions]="{ standalone: true }"
-                        (ngModelChange)="
-                          onRowCheckChange(
-                            $event,
-                            rowIndex,
-                            nestedIndex,
-                            rowItem
-                          )
-                        "
+                        (ngModelChange)="onRowCheckChange($event, rowIndex, nestedIndex, rowItem)"
                         [ngModel]="rowItem.$checked"
                         [halfchecked]="rowItem.$halfChecked"
                         [disabled]="rowItem.$checkDisabled"
@@ -116,13 +91,7 @@
                     >
                       <span *ngIf="!rowItem['idEdit']">{{ rowItem?.id }}</span>
                       <div *ngIf="rowItem['idEdit']" class="edit-padding-fix">
-                        <input
-                          class="devui-form-control"
-                          name="id"
-                          [(ngModel)]="rowItem.id"
-                          [attr.maxlength]="100"
-                          [attr.minlength]="3"
-                        />
+                        <input class="devui-form-control" name="id" [(ngModel)]="rowItem.id" [attr.maxlength]="100" [attr.minlength]="3" />
                       </div>
                     </td>
                     <td
@@ -135,14 +104,8 @@
                       [beforeEditStart]="beforeEditStart"
                       [beforeEditEnd]="beforeEditEnd"
                     >
-                      <span *ngIf="!rowItem['titleEdit']"
-                        ><d-tag [tag]="'Epic'" [labelStyle]="'epic'"></d-tag>
-                        {{ rowItem?.title }}</span
-                      >
-                      <div
-                        *ngIf="rowItem['titleEdit']"
-                        class="edit-padding-fix"
-                      >
+                      <span *ngIf="!rowItem['titleEdit']"><d-tag [tag]="'Epic'" [labelStyle]="'epic'"></d-tag> {{ rowItem?.title }}</span>
+                      <div *ngIf="rowItem['titleEdit']" class="edit-padding-fix">
                         <input
                           class="devui-form-control"
                           name="title"
@@ -163,20 +126,10 @@
                       [beforeEditEnd]="beforeEditEnd"
                     >
                       <span *ngIf="!rowItem['priorityEdit']"
-                        ><d-tag
-                          [tag]="rowItem?.priority"
-                          [labelStyle]="rowItem?.priority"
-                        ></d-tag
+                        ><d-tag [tag]="rowItem?.priority" [labelStyle]="rowItem?.priority"></d-tag
                       ></span>
-                      <div
-                        *ngIf="rowItem['priorityEdit']"
-                        class="edit-padding-fix"
-                      >
-                        <d-select
-                          name="priority"
-                          [(ngModel)]="rowItem.priority"
-                          [options]="priorities"
-                        ></d-select>
+                      <div *ngIf="rowItem['priorityEdit']" class="edit-padding-fix">
+                        <d-select name="priority" [(ngModel)]="rowItem.priority" [options]="priorities"></d-select>
                       </div>
                     </td>
                     <td
@@ -189,18 +142,9 @@
                       [beforeEditStart]="beforeEditStart"
                       [beforeEditEnd]="beforeEditEnd"
                     >
-                      <span *ngIf="!rowItem['iterationEdit']">{{
-                        rowItem?.iteration
-                      }}</span>
-                      <div
-                        *ngIf="rowItem['iterationEdit']"
-                        class="edit-padding-fix"
-                      >
-                        <input
-                          dTextInput
-                          size="sm"
-                          [(ngModel)]="rowItem.iteration"
-                        />
+                      <span *ngIf="!rowItem['iterationEdit']">{{ rowItem?.iteration }}</span>
+                      <div *ngIf="rowItem['iterationEdit']" class="edit-padding-fix">
+                        <input dTextInput size="sm" [(ngModel)]="rowItem.iteration" />
                       </div>
                     </td>
                     <td
@@ -214,24 +158,11 @@
                       [beforeEditEnd]="beforeEditEnd"
                     >
                       <span *ngIf="!rowItem['assigneeEdit']">
-                        <d-avatar
-                          [name]="rowItem.assignee"
-                          [width]="24"
-                          [height]="24"
-                        ></d-avatar>
-                        <span style="margin-left: 6px">{{
-                          rowItem.assignee
-                        }}</span>
+                        <d-avatar [name]="rowItem.assignee" [width]="24" [height]="24"></d-avatar>
+                        <span style="margin-left: 6px">{{ rowItem.assignee }}</span>
                       </span>
-                      <div
-                        *ngIf="rowItem['assigneeEdit']"
-                        class="edit-padding-fix"
-                      >
-                        <input
-                          dTextInput
-                          size="sm"
-                          [(ngModel)]="rowItem.assignee"
-                        />
+                      <div *ngIf="rowItem['assigneeEdit']" class="edit-padding-fix">
+                        <input dTextInput size="sm" [(ngModel)]="rowItem.assignee" />
                       </div>
                     </td>
                     <td
@@ -245,33 +176,15 @@
                       [beforeEditEnd]="beforeEditEnd"
                     >
                       <span *ngIf="!rowItem['statusEdit']"
-                        ><span [ngClass]="rowItem?.status.split(' ')[0]">{{
-                          rowItem?.status || "--"
-                        }}</span></span
-                      >
-                      <div
-                        *ngIf="rowItem['statusEdit']"
-                        class="edit-padding-fix"
+                        ><span [ngClass]="rowItem?.status.split(' ')[0]">{{ rowItem?.status || '--' }}</span></span
                       >
-                        <d-select
-                          name="status"
-                          [(ngModel)]="rowItem.status"
-                          [options]="['Stuck', 'Done', 'Working on it']"
-                        ></d-select>
+                      <div *ngIf="rowItem['statusEdit']" class="edit-padding-fix">
+                        <d-select name="status" [(ngModel)]="rowItem.status" [options]="['Stuck', 'Done', 'Working on it']"></d-select>
                       </div>
                     </td>
-                    <td
-                      dTableCell
-                      [editable]="true"
-                      [(editing)]="rowItem['dateEdit']"
-                    >
-                      <span *ngIf="!rowItem['dateEdit']">{{
-                        rowItem?.timeline | i18nDate: "short":false
-                      }}</span>
-                      <form
-                        *ngIf="rowItem['dateEdit']"
-                        class="form-inline edit-padding-fix"
-                      >
+                    <td dTableCell [editable]="true" [(editing)]="rowItem['dateEdit']">
+                      <span *ngIf="!rowItem['dateEdit']">{{ rowItem?.timeline | i18nDate: 'short':false }}</span>
+                      <form *ngIf="rowItem['dateEdit']" class="form-inline edit-padding-fix">
                         <div class="devui-form-group">
                           <div class="devui-input-group devui-dropdown-origin">
                             <input
@@ -284,10 +197,7 @@
                               [autoOpen]="true"
                               (ngModelChange)="onEditEnd(rowItem, 'dateEdit')"
                             />
-                            <div
-                              class="devui-input-group-addon"
-                              (click)="datePicker.toggle()"
-                            >
+                            <div class="devui-input-group-addon" (click)="datePicker.toggle()">
                               <i class="icon icon-calendar"></i>
                             </div>
                           </div>
@@ -295,12 +205,7 @@
                       </form>
                     </td>
                     <td>
-                      <d-button
-                        icon="icon-delete"
-                        bsStyle="text-dark"
-                        title="delete"
-                        (click)="deleteRow(rowIndex)"
-                      ></d-button>
+                      <d-button icon="icon-delete" bsStyle="text-dark" title="delete" (click)="deleteRow(rowIndex)"></d-button>
                     </td>
                   </tr>
                 </ng-template>
@@ -313,12 +218,6 @@
   </div>
 </div>
 
-<ng-template
-  #extraFilterTemplate
-  let-checked="checked"
-  let-halfChecked="halfChecked"
->
-  <span>{{
-    checked ? "All selected" : halfChecked ? "Some selected" : " None selected"
-  }}</span>
+<ng-template #extraFilterTemplate let-checked="checked" let-halfChecked="halfChecked">
+  <span>{{ checked ? 'All selected' : halfChecked ? 'Some selected' : ' None selected' }}</span>
 </ng-template>
diff --git a/src/app/pages/list/advance-list/advance-list.component.ts b/src/app/pages/list/advance-list/advance-list.component.ts
index cd5bc22..3c4f3c7 100644
--- a/src/app/pages/list/advance-list/advance-list.component.ts
+++ b/src/app/pages/list/advance-list/advance-list.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { DataTableComponent, DialogService, EditableTip, TableWidthConfig } from 'ng-devui';
+import { DataTableComponent, DialogService, EditableTip, FilterConfig, TableWidthConfig } from 'ng-devui';
 import { Subscription } from 'rxjs';
+import { Item } from 'src/app/@core/data/listData';
 import { ListDataService } from 'src/app/@core/mock/list-data.service';
 
 @Component({
@@ -13,7 +14,7 @@ export class AdvanceListComponent implements OnInit {
   datatable: DataTableComponent;
   basicDataSource = [];
   originData = [];
-  deleteList = [];
+  deleteList: Item[] = [];
   dataTableOptions = {
     columns: [
       {
@@ -143,10 +144,7 @@ export class AdvanceListComponent implements OnInit {
 
   busy: Subscription;
 
-  constructor(
-    private listDataService: ListDataService,
-    private dialogService: DialogService
-  ) {}
+  constructor(private listDataService: ListDataService, private dialogService: DialogService) {}
 
   ngOnInit() {
     this.getList();
@@ -157,21 +155,17 @@ export class AdvanceListComponent implements OnInit {
   }
 
   getList(loadMore = false) {
-    this.busy = this.listDataService
-      .getOriginSource(this.pager)
-      .subscribe((res) => {
-        const data = JSON.parse(JSON.stringify(res.pageList));
-        this.pager.total = res.total;
-        this.originData = loadMore ? this.originData.concat(data) : data;
-        this.basicDataSource = this.originData.filter((i) => {
-          return i.title
-            .toUpperCase()
-            .includes(this.searchForm.keyword.toUpperCase());
-        });
+    this.busy = this.listDataService.getOriginSource(this.pager).subscribe((res) => {
+      const data = JSON.parse(JSON.stringify(res.pageList));
+      this.pager.total = res.total;
+      this.originData = loadMore ? this.originData.concat(data) : data;
+      this.basicDataSource = this.originData.filter((i: Item | unknown) => {
+        return (i as Item).title!.toUpperCase().includes(this.searchForm.keyword.toUpperCase());
       });
+    });
   }
 
-  onResize({ width }, field) {
+  onResize({ width }: { width: string }, field: string) {
     const index = this.tableWidthConfig.findIndex((config) => {
       return config.field === field;
     });
@@ -188,11 +182,11 @@ export class AdvanceListComponent implements OnInit {
     this.getList();
   }
 
-  beforeEditStart = (rowItem, field) => {
+  beforeEditStart = (rowItem: any, field: any) => {
     return true;
   };
 
-  beforeEditEnd = (rowItem, field) => {
+  beforeEditEnd = (rowItem: any, field: any) => {
     if (rowItem && rowItem[field].length < 3) {
       return false;
     } else {
@@ -200,18 +194,18 @@ export class AdvanceListComponent implements OnInit {
     }
   };
 
-  onEditEnd(rowItem, field) {
+  onEditEnd(rowItem: any, field: any) {
     rowItem[field] = false;
   }
 
-  onFirstFilterChange(e, column) {
+  onFirstFilterChange(e: FilterConfig[], column: any) {
     const keys = e.map((i) => i.name);
     this.basicDataSource = this.originData.filter((i) => {
       return keys.includes(i[column.field]);
     });
   }
 
-  onRowCheckChange(checked, rowIndex, nestedIndex, rowItem) {
+  onRowCheckChange(checked: boolean, rowIndex: number, nestedIndex: string, rowItem: any) {
     rowItem.$checked = checked;
     rowItem.$halfChecked = false;
     this.datatable.setRowCheckStatus({
@@ -260,10 +254,7 @@ export class AdvanceListComponent implements OnInit {
   }
 
   loadMore() {
-    if (
-      this.pager.pageIndex + 1 <=
-      Math.ceil(this.pager.total / this.pager.pageSize)
-    ) {
+    if (this.pager.pageIndex + 1 <= Math.ceil(this.pager.total / this.pager.pageSize)) {
       this.pager.pageIndex += 1;
       this.getList(true);
     }
@@ -273,15 +264,15 @@ export class AdvanceListComponent implements OnInit {
     let i = this.deleteList.length - 1;
     while (i >= 0) {
       const id = this.deleteList[i].id;
-      const index = this.basicDataSource.findIndex((i) => {
-        return i.id === id;
+      const index = this.basicDataSource.findIndex((i: Item | unknown) => {
+        return (i as Item).id === id;
       });
       this.basicDataSource.splice(index, 1);
       i--;
     }
   }
 
-  deleteRow(index) {
+  deleteRow(index: number) {
     const results = this.dialogService.open({
       id: 'delete-dialog',
       width: '346px',
diff --git a/src/app/pages/list/basic-list/basic-list.component.ts b/src/app/pages/list/basic-list/basic-list.component.ts
index f5b794f..05267d4 100644
--- a/src/app/pages/list/basic-list/basic-list.component.ts
+++ b/src/app/pages/list/basic-list/basic-list.component.ts
@@ -124,7 +124,7 @@ export class BasicListComponent implements OnInit {
 
   formData = {};
 
-  editForm = null;
+  editForm: any = null;
 
   editRowIndex = -1;
 
@@ -157,7 +157,7 @@ export class BasicListComponent implements OnInit {
     });
   }
 
-  editRow(row, index) {
+  editRow(row: any, index: number) {
     this.editRowIndex = index;
     this.formData = row;
     this.editForm = this.dialogService.open({
@@ -173,7 +173,7 @@ export class BasicListComponent implements OnInit {
     });
   }
 
-  deleteRow(index) {
+  deleteRow(index: number) {
     const results = this.dialogService.open({
       id: 'delete-dialog',
       width: '346px',
@@ -205,12 +205,12 @@ export class BasicListComponent implements OnInit {
     });
   }
 
-  onPageChange(e) {
+  onPageChange(e: number) {
     this.pager.pageIndex = e;
     this.getList();
   }
 
-  onSizeChange(e) {
+  onSizeChange(e: number) {
     this.pager.pageSize = e;
     this.getList();
   }
@@ -225,13 +225,13 @@ export class BasicListComponent implements OnInit {
     this.getList();
   }
 
-  onSubmitted(e) {
-    this.editForm.modalInstance.hide();
+  onSubmitted(e: any) {
+    this.editForm!.modalInstance.hide();
     this.basicDataSource.splice(this.editRowIndex, 1, e);
   }
 
   onCanceled() {
-    this.editForm.modalInstance.hide();
+    this.editForm!.modalInstance.hide();
     this.editRowIndex = -1;
   }
 }
diff --git a/src/app/pages/list/card-list/card-list.component.html b/src/app/pages/list/card-list/card-list.component.html
index d5b02aa..5f991b8 100644
--- a/src/app/pages/list/card-list/card-list.component.html
+++ b/src/app/pages/list/card-list/card-list.component.html
@@ -24,7 +24,7 @@
           <div class="da-list-content" dLoading [loading]="busy">
             <d-card *ngFor="let item of cardList" class="card-item">
               <d-card-header>
-                <d-avatar dCardAvatar [name]="item.name" [imgSrc]="item.imgSrc" [isRound]="true" [width]="28" [height]="28"></d-avatar>
+                <d-avatar dCardAvatar [name]="item.name!" [imgSrc]="item.imgSrc!" [isRound]="true" [width]="28" [height]="28"></d-avatar>
                 <d-card-title>{{ item.title }}</d-card-title>
               </d-card-header>
               <d-card-content>
diff --git a/src/app/pages/list/card-list/card-list.component.ts b/src/app/pages/list/card-list/card-list.component.ts
index 2fe4449..873ec93 100644
--- a/src/app/pages/list/card-list/card-list.component.ts
+++ b/src/app/pages/list/card-list/card-list.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { Subscription } from 'rxjs';
+import { Card } from 'src/app/@core/data/listData';
 import { ListDataService } from 'src/app/@core/mock/list-data.service';
 
 @Component({
@@ -17,7 +18,7 @@ export class CardListComponent implements OnInit {
     },
   ];
 
-  cardList = [];
+  cardList: Card[] = [];
 
   pager = {
     total: 0,
@@ -42,22 +43,20 @@ export class CardListComponent implements OnInit {
   }
 
   getList() {
-    this.busy = this.listDataService
-      .getCardSource(this.pager)
-      .subscribe((res) => {
-        this.pager.total = res.total;
-        this.cardList = res.pageList.filter((i) => {
-          return i.name.toUpperCase().includes(this.keyword?.toUpperCase());
-        });
+    this.busy = this.listDataService.getCardSource(this.pager).subscribe((res) => {
+      this.pager.total = res.total;
+      this.cardList = res.pageList.filter((i: Card) => {
+        return i.name!.toUpperCase().includes(this.keyword?.toUpperCase());
       });
+    });
   }
 
-  onPageChange(e) {
+  onPageChange(e: number) {
     this.pager.pageIndex = e;
     this.getList();
   }
 
-  onSizeChange(e) {
+  onSizeChange(e: number) {
     this.pager.pageSize = e;
     this.getList();
   }
diff --git a/src/app/pages/list/editable-list/editable-list.component.ts b/src/app/pages/list/editable-list/editable-list.component.ts
index 2cc2531..bb07184 100644
--- a/src/app/pages/list/editable-list/editable-list.component.ts
+++ b/src/app/pages/list/editable-list/editable-list.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { DialogService, EditableTip, FormLayout, TableWidthConfig } from 'ng-devui';
 import { Subscription } from 'rxjs';
+import { Item } from 'src/app/@core/data/listData';
 import { ListDataService } from 'src/app/@core/mock/list-data.service';
 import { FormConfig } from 'src/app/@shared/components/admin-form';
 
@@ -29,7 +30,7 @@ export class EditableListComponent implements OnInit {
     pageSize: 10,
   };
 
-  listData = [];
+  listData: any[] = [];
 
   headerNewForm = false;
 
@@ -142,7 +143,7 @@ export class EditableListComponent implements OnInit {
     this.getList();
   }
 
-  onEditEnd(rowItem, field) {
+  onEditEnd(rowItem: any, field: any) {
     rowItem[field] = false;
   }
 
@@ -155,11 +156,11 @@ export class EditableListComponent implements OnInit {
     });
   }
 
-  beforeEditStart = (rowItem, field) => {
+  beforeEditStart = (rowItem: any, field: any) => {
     return true;
   };
 
-  beforeEditEnd = (rowItem, field) => {
+  beforeEditEnd = (rowItem: any, field: any) => {
     if (rowItem && rowItem[field].length < 3) {
       return false;
     } else {
@@ -175,7 +176,7 @@ export class EditableListComponent implements OnInit {
     return new Date().getTime() + 'CNWO';
   }
 
-  quickRowAdded(e) {
+  quickRowAdded(e: any) {
     const newData = { ...e };
     this.listData.unshift(newData);
     this.headerNewForm = false;
@@ -185,33 +186,33 @@ export class EditableListComponent implements OnInit {
     this.headerNewForm = false;
   }
 
-  subRowAdded(index, item) {
+  subRowAdded(index: number) {
     this.listData[index].$expandConfig.expand = false;
     const newData = { ...this.defaultRowData };
     this.listData.splice(index + 1, 0, newData);
   }
 
-  subRowCancel(index) {
-    this.listData[index].$expandConfig.expand = false;
+  subRowCancel(index: number) {
+    (this.listData[index] as Item).$expandConfig.expand = false;
   }
 
-  toggleExpand(rowItem) {
+  toggleExpand(rowItem: any) {
     if (rowItem.$expandConfig) {
       rowItem.$expandConfig.expand = !rowItem.$expandConfig.expand;
     }
   }
 
-  onPageChange(e) {
+  onPageChange(e: number) {
     this.pager.pageIndex = e;
     this.getList();
   }
 
-  onSizeChange(e) {
+  onSizeChange(e: number) {
     this.pager.pageSize = e;
     this.getList();
   }
 
-  deleteRow(index) {
+  deleteRow(index: number) {
     const results = this.dialogService.open({
       id: 'delete-dialog',
       width: '346px',
diff --git a/src/app/pages/list/tree-list/tree-list.component.ts b/src/app/pages/list/tree-list/tree-list.component.ts
index ad99cb9..af22f0f 100644
--- a/src/app/pages/list/tree-list/tree-list.component.ts
+++ b/src/app/pages/list/tree-list/tree-list.component.ts
@@ -1,10 +1,6 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 
-import {
-  CheckableRelation,
-  DataTableComponent,
-  TableWidthConfig,
-} from 'ng-devui/data-table';
+import { CheckableRelation, DataTableComponent, TableWidthConfig } from 'ng-devui/data-table';
 import { Subscription } from 'rxjs';
 import { Item } from 'src/app/@core/data/listData';
 import { ListDataService } from 'src/app/@core/mock/list-data.service';
@@ -15,12 +11,11 @@ import { ListDataService } from 'src/app/@core/mock/list-data.service';
   styleUrls: ['./tree-list.component.scss'],
 })
 export class TreeListComponent implements OnInit {
-  iconParentOpen: string;
-  iconParentClose: string;
+  iconParentOpen: string = '';
+  iconParentClose: string = '';
   basicDataSource: Array<Item> = [];
   checkableRelation: CheckableRelation = { downward: true, upward: true };
-  @ViewChild(DataTableComponent, { static: true })
-  datatable: DataTableComponent;
+  @ViewChild(DataTableComponent, { static: true }) datatable: DataTableComponent;
 
   tableWidthConfig: TableWidthConfig[] = [
     {
@@ -57,7 +52,7 @@ export class TreeListComponent implements OnInit {
     },
   ];
 
-  busy: Subscription;
+  busy: Subscription = new Subscription();
 
   source = [
     { title: '首页' },
@@ -82,11 +77,11 @@ export class TreeListComponent implements OnInit {
     this.getList();
   }
 
-  onChildTableToggle(status, rowItem) {
+  onChildTableToggle(status: boolean, rowItem: any) {
     this.datatable.setRowChildToggleStatus(rowItem, status);
   }
 
-  loadChildrenTable = (rowItem) => {
+  loadChildrenTable = (rowItem: any) => {
     return new Promise((resolve) => {
       setTimeout(() => {
         if (rowItem.title === 'table node2') {
@@ -110,23 +105,21 @@ export class TreeListComponent implements OnInit {
     return new Promise((resolve) => {
       setTimeout(() => {
         this.basicDataSource[0].children[0].children[1].children[0].children = [];
-        this.basicDataSource[0].children[0].children[1].children[0].children.push(
-          {
-            id: '710000197203093702',
-            title: 'Hwgx Vkdg Kfap Tke Miyxg Hyelo',
-            priority: 'Low',
-            iteration: 'iteration',
-            assignee: 'Michael Walker',
-            status: 'Stuck',
-            timeline: '2018-08-04',
-          }
-        );
+        this.basicDataSource[0].children[0].children[1].children[0].children.push({
+          id: '710000197203093702',
+          title: 'Hwgx Vkdg Kfap Tke Miyxg Hyelo',
+          priority: 'Low',
+          iteration: 'iteration',
+          assignee: 'Michael Walker',
+          status: 'Stuck',
+          timeline: '2018-08-04',
+        });
         resolve(undefined);
       }, 500);
     });
   };
 
-  onRowCheckChange(checked, rowIndex, nestedIndex, rowItem) {
+  onRowCheckChange(checked: boolean, rowIndex: number, nestedIndex: string, rowItem: any) {
     rowItem.$checked = checked;
     rowItem.$halfChecked = false;
     this.datatable.setRowCheckStatus({
@@ -150,24 +143,22 @@ export class TreeListComponent implements OnInit {
   }
 
   getList() {
-    this.busy = this.listDataService
-      .getTreeSource(this.pager)
-      .subscribe((res) => {
-        const data = JSON.parse(JSON.stringify(res.pageList));
-        this.basicDataSource = data.filter((i) => {
-          return i.title.toUpperCase().includes(this.keyword.toUpperCase());
-        });
-        this.pager.total = res.total;
-        this.basicDataSource[0].$isChildTableOpen = true;
+    this.busy = this.listDataService.getTreeSource(this.pager).subscribe((res) => {
+      const data = JSON.parse(JSON.stringify(res.pageList));
+      this.basicDataSource = data.filter((i: any) => {
+        return i.title.toUpperCase().includes(this.keyword.toUpperCase());
       });
+      this.pager.total = res.total;
+      this.basicDataSource[0].$isChildTableOpen = true;
+    });
   }
 
-  onPageChange(e) {
+  onPageChange(e: number) {
     this.pager.pageIndex = e;
     this.getList();
   }
 
-  onSizeChange(e) {
+  onSizeChange(e: number) {
     this.pager.pageSize = e;
     this.getList();
   }
diff --git a/src/app/pages/menu.ts b/src/app/pages/menu.ts
index 1dbb253..19dd9e0 100644
--- a/src/app/pages/menu.ts
+++ b/src/app/pages/menu.ts
@@ -1,4 +1,4 @@
-export default function(values) {
+export default function (values: any) {
   return [
     {
       title: values['dashboard']['title'],
@@ -77,4 +77,4 @@ export default function(values) {
       menuIcon: 'icon icon-mine',
     },
   ];
-}
\ No newline at end of file
+}
diff --git a/src/app/pages/pages.component.ts b/src/app/pages/pages.component.ts
index c36773f..2dd0eb5 100644
--- a/src/app/pages/pages.component.ts
+++ b/src/app/pages/pages.component.ts
@@ -23,12 +23,11 @@ export class PagesComponent implements OnInit {
 
   menu: any;
 
-  layoutConfig: DaLayoutConfig;
+  layoutConfig: DaLayoutConfig = { id: 'sidebar', sidebar: {} };
   isSidebarShrink: boolean = false;
   isSidebarFold: boolean = false;
 
-  sideDrawer: IDrawerOpenResult;
-  settingDrawer: IDrawerOpenResult;
+  settingDrawer: any;
 
   constructor(
     private drawerService: DrawerService,
@@ -76,26 +75,23 @@ export class PagesComponent implements OnInit {
         this.updateMenu(res);
       });
 
-    this.translate.onLangChange
-      .pipe(takeUntil(this.destroy$))
-      .subscribe((event: TranslationChangeEvent) => {
-        const values = this.translate.instant('page');
-        this.updateMenu(values);
+    this.translate.onLangChange.pipe(takeUntil(this.destroy$)).subscribe((event: TranslationChangeEvent) => {
+      const values = this.translate.instant('page');
+      this.updateMenu(values);
+    });
+    this.personalizeService.getUiTheme()!.subscribe((theme) => {
+      const currentTheme = Object.values((window as { [key: string]: any })['devuiThemes']).find((i: Theme | unknown) => {
+        return (i as Theme).id === theme;
       });
-      this.personalizeService.getUiTheme().subscribe(theme => {
-        const currentTheme = Object.values(window['devuiThemes']).find((i: Theme) => {
-          return i.id === theme;
-        }) 
-        if (currentTheme && (<any>currentTheme).isDark) {
-          this.render2.addClass(document.body, 'is-dark');
-        } else {
-          this.render2.removeClass(document.body, 'is-dark');
-        }
-      })
-
+      if (currentTheme && (<any>currentTheme).isDark) {
+        this.render2.addClass(document.body, 'is-dark');
+      } else {
+        this.render2.removeClass(document.body, 'is-dark');
+      }
+    });
   }
 
-  updateMenu(values) {
+  updateMenu(values: any) {
     this.menu = getMenu(values);
   }
 
@@ -142,19 +138,17 @@ export class PagesComponent implements OnInit {
     });
   }
 
-  sidebarShrink(isShrink) {
+  sidebarShrink(isShrink: boolean) {
     this.isSidebarShrink = isShrink;
 
     if (this.layoutConfig.sidebar.firSidebar) {
-      this.layoutConfig.sidebar.firSidebar.width = this.isSidebarShrink
-        ? 54
-        : 240;
+      this.layoutConfig.sidebar.firSidebar.width = this.isSidebarShrink ? 54 : 240;
     }
     this.layoutConfig.sidebar.shrink = this.isSidebarShrink;
     this.layoutService.updateLayoutConfig(this.layoutConfig);
   }
 
-  sidebarFold(isFold) {
+  sidebarFold(isFold: boolean) {
     this.isSidebarFold = isFold;
 
     if (this.layoutConfig.sidebar.firSidebar) {
diff --git a/src/app/pages/user/user-center/user-center.component.html b/src/app/pages/user/user-center/user-center.component.html
index 7256915..23b9571 100644
--- a/src/app/pages/user/user-center/user-center.component.html
+++ b/src/app/pages/user/user-center/user-center.component.html
@@ -4,43 +4,24 @@
       <div class="da-about-me da-content-card">
         <div class="da-user-info da-floor" *ngIf="user?.name">
           <div class="da-info-top">
-            <d-avatar
-              [name]="'DevUI'"
-              [width]="104"
-              [height]="104"
-              [imgSrc]="user?.imgSrc"
-              [isRound]="false"
-            ></d-avatar>
+            <d-avatar [name]="'DevUI'" [width]="104" [height]="104" [imgSrc]="user.imgSrc!" [isRound]="false"></d-avatar>
             <div class="da-name">{{ user?.name }}</div>
           </div>
           <div class="da-info-detail">
-            <div class="da-detail-floor">
-              <i class="icon icon-member"></i>{{ user?.assign }}
-            </div>
-            <div class="da-detail-floor">
-              <i class="icon icon-management"></i>{{ user?.title }}
-            </div>
-            <div class="da-detail-floor">
-              <i class="icon icon-b-tree"></i>{{ user?.group }}
-            </div>
-            <div class="da-detail-floor">
-              <i class="icon icon-homepage"></i>{{ user?.address }}
-            </div>
+            <div class="da-detail-floor"><i class="icon icon-member"></i>{{ user?.assign }}</div>
+            <div class="da-detail-floor"><i class="icon icon-management"></i>{{ user?.title }}</div>
+            <div class="da-detail-floor"><i class="icon icon-b-tree"></i>{{ user?.group }}</div>
+            <div class="da-detail-floor"><i class="icon icon-homepage"></i>{{ user?.address }}</div>
           </div>
         </div>
         <div class="da-floor">
           <div class="da-floor-title">标签</div>
-          <d-tags [tags]="user?.tags"> </d-tags>
+          <d-tags [tags]="user.tags!"> </d-tags>
         </div>
         <div class="da-floor">
           <div class="da-floor-title">团队</div>
           <div class="da-team" *ngFor="let item of workGroups">
-            <d-avatar
-              [name]="item?.departmentTitle[0]"
-              [width]="30"
-              [height]="30"
-              [imgSrc]="item?.imgSrc"
-            ></d-avatar>
+            <d-avatar [name]="item.departmentTitle[0]" [width]="30" [height]="30" [imgSrc]="item.logoSrc"></d-avatar>
             <div class="da-team-title">{{ item?.departmentTitle }}</div>
           </div>
         </div>
@@ -48,17 +29,8 @@
     </da-col-item>
     <da-col-item [daSpan]="24" [daXs]="16">
       <div class="da-space" dLoading [loading]="spaceBusy" [backdrop]="true">
-        <d-tabs
-          [type]="'tabs'"
-          [(activeTab)]="activeTab"
-          (activeTabChange)="activeTabChange($event)"
-        >
-          <d-tab
-            [id]="tab.id"
-            [title]="tab.label"
-            [tabId]="tab.id"
-            *ngFor="let tab of tabs"
-          >
+        <d-tabs [type]="'tabs'" [(activeTab)]="activeTab" (activeTabChange)="activeTabChange($event)">
+          <d-tab [id]="tab.id" [title]="tab.label" [tabId]="tab.id" *ngFor="let tab of tabs">
             <ng-template dTabContent>
               <ng-template
                 *ngIf="tab.id === 'first'"
@@ -84,37 +56,21 @@
     <div class="da-desc mt-12">{{ item?.desc }}</div>
     <div class="da-sub-row mt-12">
       <d-avatar [name]="item?.author" [width]="26" [height]="26"></d-avatar>
-      <a class="da-is-link ml6" [routerLink]="item?.authorUrl">{{
-        item?.author
-      }}</a>
+      <a class="da-is-link ml6" [routerLink]="item?.authorUrl">{{ item?.author }}</a>
       <span class="da-gray-text"> 发布在 </span>
-      <a class="da-is-link" [routerLink]="item?.articleUrl">{{
-        item?.articlePlatform
-      }}</a>
+      <a class="da-is-link" [routerLink]="item?.articleUrl">{{ item?.articlePlatform }}</a>
     </div>
     <div class="da-actions mt-12">
-      <div
-        class="da-action"
-        (click)="actionHandler('starNum', item)"
-        [ngClass]="{ 'is-attached': item.starNumAttached }"
-      >
+      <div class="da-action" (click)="actionHandler('starNum', item)" [ngClass]="{ 'is-attached': item.starNumAttached }">
         <i class="icon icon-star-o"></i>
         <div class="gray-text">{{ item?.starNum }}</div>
       </div>
-      <div
-        class="da-action"
-        [ngClass]="{ 'is-attached': item.agreeAttached }"
-        (click)="actionHandler('agree', item)"
-      >
+      <div class="da-action" [ngClass]="{ 'is-attached': item.agreeAttached }" (click)="actionHandler('agree', item)">
         <i class="icon icon-like"></i>
         <div class="da-gray-text">{{ item?.agree }}</div>
       </div>
 
-      <div
-        class="da-action"
-        [ngClass]="{ 'is-attached': item.messageAttached }"
-        (click)="actionHandler('message', item)"
-      >
+      <div class="da-action" [ngClass]="{ 'is-attached': item.messageAttached }" (click)="actionHandler('message', item)">
         <i class="icon icon-message"></i>
         <div class="da-gray-text">{{ item?.message }}</div>
       </div>
diff --git a/src/app/pages/user/user-center/user-center.component.ts b/src/app/pages/user/user-center/user-center.component.ts
index 4891b66..f99a78b 100644
--- a/src/app/pages/user/user-center/user-center.component.ts
+++ b/src/app/pages/user/user-center/user-center.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { User } from 'src/app/@core/data/userData';
+import { WorkGroup } from 'src/app/@core/data/work-group';
 import { UserDataService } from 'src/app/@core/mock/user-data.service';
 import { WorkGroupService } from 'src/app/@core/mock/work-group.service';
 
@@ -12,9 +13,9 @@ import { WorkGroupService } from 'src/app/@core/mock/work-group.service';
 export class UserCenterComponent implements OnInit {
   user: User = {};
 
-  busy: Subscription;
+  busy: Subscription = new Subscription();
 
-  spaceBusy: Subscription;
+  spaceBusy: Subscription = new Subscription();
 
   source = [
     { title: '个人页' },
@@ -41,7 +42,7 @@ export class UserCenterComponent implements OnInit {
 
   projects = [];
 
-  workGroups = [];
+  workGroups: WorkGroup[] = [];
 
   constructor(private userDataService: UserDataService, private workGroupService: WorkGroupService) {}
 
@@ -78,11 +79,11 @@ export class UserCenterComponent implements OnInit {
     });
   }
 
-  activeTabChange(e) {
+  activeTabChange(e: string | number) {
     this.getListData();
   }
 
-  actionHandler(key, item) {
+  actionHandler(key: string, item: any) {
     if (item[key + 'Attached']) {
       item[key] -= 1;
     } else {
diff --git a/src/app/pages/user/user-settings/user-settings.component.ts b/src/app/pages/user/user-settings/user-settings.component.ts
index 69ecb3a..e9444d7 100644
--- a/src/app/pages/user/user-settings/user-settings.component.ts
+++ b/src/app/pages/user/user-settings/user-settings.component.ts
@@ -6,28 +6,28 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./user-settings.component.scss'],
 })
 export class UserSettingsComponent implements OnInit {
-
   menus = [
     {
       isActive: true,
-      title: '基本设置'
-    }, {
+      title: '基本设置',
+    },
+    {
       isActive: false,
-      title: '安全设置'
-    },{
+      title: '安全设置',
+    },
+    {
       isActive: false,
-      title: '消息通知'
-    }
+      title: '消息通知',
+    },
   ];
   constructor() {}
 
   ngOnInit(): void {}
 
-  itemClickFn(clickedItem) {
+  itemClickFn(clickedItem: any) {
     this.menus.forEach((item) => {
       item.isActive = false;
     });
     clickedItem.isActive = true;
   }
-
 }
diff --git a/tsconfig.json b/tsconfig.json
index 7aec43e..8bc2a68 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -5,8 +5,8 @@
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,
-    "strict": false,
-    "noImplicitReturns": false,
+    "strict": true,
+    "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "sourceMap": true,
     "declaration": true,
@@ -25,6 +25,7 @@
     "enableI18nLegacyMessageIdFormat": false,
     "strictInjectionParameters": true,
     "strictInputAccessModifiers": true,
+    "strictPropertyInitialization": false,
     "strictTemplates": true
   }
 }