chore(deps-dev): bump @angular-eslint/eslint-plugin

Bumps [@angular-eslint/eslint-plugin](https://github.com/angular-eslint/angular-eslint/tree/HEAD/packages/eslint-plugin) from 14.4.0 to 15.2.1.
- [Release notes](https://github.com/angular-eslint/angular-eslint/releases)
- [Changelog](https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin/CHANGELOG.md)
- [Commits](https://github.com/angular-eslint/angular-eslint/commits/v15.2.1/packages/eslint-plugin)

---
updated-dependencies:
- dependency-name: "@angular-eslint/eslint-plugin"
  dependency-type: direct:development
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

.eslintrc.json

@@ -0,0 +1,87 @@
+{
+  "root": true,
+  "ignorePatterns": [
+    "projects/**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "parserOptions": {
+        "project": [
+          "tsconfig.json",
+          "e2e/tsconfig.json"
+        ],
+        "createDefaultProgram": true
+      },
+      "extends": [
+        "plugin:@angular-eslint/ng-cli-compat",
+        "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "prefer-arrow/prefer-arrow-functions": [
+          "off"
+        ],
+        "@typescript-eslint/ban-types": [
+          "error",
+          {
+            "types": {
+              "Object": {
+                "message": "Use {} instead",
+                "fixWith": "{}"
+              },
+              "{}": false
+            }
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "off",
+          {
+            "type": "element",
+            "prefix": "app",
+            "style": "kebab-case"
+          }
+        ],
+        "@angular-eslint/directive-selector": [
+          "off",
+          {
+            "type": "attribute",
+            "prefix": "app",
+            "style": "camelCase"
+          }
+        ],
+
+        "@typescript-eslint/explicit-member-accessibility": [
+          "off",
+          {
+            "accessibility": "explicit"
+          }
+        ],
+        "@typescript-eslint/no-inferrable-types": [
+          "off",
+          {
+            "ignoreParameters": true
+          }
+        ],
+        "arrow-parens": [
+          "off",
+          "always"
+        ],
+        "import/order": "off"
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "extends": [
+        "plugin:@angular-eslint/template/recommended"
+      ],
+      "rules": {
+        "@angular-eslint/template/eqeqeq": "off"
+      }
+    }
+  ]
+}

.github/dependabot.yml

@@ -0,0 +1,12 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  - package-ecosystem: "npm" # See documentation for possible values
+    directory: "/" # Location of package manifests
+    schedule:
+      interval: "monthly"
+    open-pull-requests-limit: 15

.github/workflows/build.yml

@@ -1,6 +1,3 @@
-# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
-# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
-
 name: Build
 
 on:
@@ -9,17 +6,29 @@ on:
 
 jobs:
   build:
-
+    if: "!contains(github.event.head_commit.message, '[skip ci]') && !contains(github.event.head_commit.message, '.md')" # 如果 commit 信息包含以下关键字则跳过该任务
     runs-on: ubuntu-latest
-
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 12.x
+
+      - name: Sync to Gitee
+        uses: x-dr/sync-repo-to-gitee@master
+        env:
+            # 在 Settings->Secrets 配置 GITEE_KEY
+            SSH_KEY: ${{ secrets.GITEE_KEY }}
+        with:
+            # 注意替换为你的 GitHub 源仓库地址
+            github-repo: "git@github.com:xiaohai2271/blog-frontEnd.git"
+            # 注意替换为你的 Gitee 目标仓库地址
+            gitee-repo: "git@gitee.com:xiaohai2271/blog-frontEnd.git"
+
+      - name: Use Node.js 16.x
         uses: actions/setup-node@v1
         with:
-          node-version: '12.x'
+          node-version: '16.x'
-      - run: npm install -g @angular/cli
+      - run: npm install
-      - run: bash build.sh
+      - run: npm run lint && npm run build
+      - run: cd dist/index/ && tar -cf index.tar ./* && mv index.tar ../../
 
       - name: Upload a Build Artifact
         uses: actions/upload-artifact@v2.1.4
@@ -27,21 +36,21 @@ jobs:
           name: dist
           path: ./dist/index/*
 
-      - name: SCP
+#      - name: SCP
-        uses: appleboy/scp-action@master
+#        uses: appleboy/scp-action@master
-        with:
+#        with:
-          host: ${{ secrets.SSH_HOST }}
+#          host: ${{ secrets.SSH_HOST }}
-          username: ${{ secrets.SSH_USERNAME }}
+#          username: ${{ secrets.SSH_USERNAME }}
-          password: ${{ secrets.SSH_PASSWORD }}
+#          password: ${{ secrets.SSH_PASSWORD }}
-          port: ${{ secrets.SSH_PORT }}
+#          port: ${{ secrets.SSH_PORT }}
-          source: "index.tar"
+#          source: "index.tar"
-          target: "/www/wwwroot/www.celess.cn"
+#          target: "/www/wwwroot/www.celess.cn"
 
-      - name: Run SSH command
+#      - name: Run SSH command
-        uses: garygrossgarten/github-action-ssh@v0.5.0
+#        uses: garygrossgarten/github-action-ssh@v0.5.0
-        with:
+#        with:
-          command: cd /www/wwwroot/www.celess.cn && bash deploy.sh
+#          command: cd /www/wwwroot/www.celess.cn && bash deploy.sh
-          host: ${{ secrets.SSH_HOST }}
+#          host: ${{ secrets.SSH_HOST }}
-          username: ${{ secrets.SSH_USERNAME }}
+#          username: ${{ secrets.SSH_USERNAME }}
-          password: ${{ secrets.SSH_PASSWORD }}
+#          password: ${{ secrets.SSH_PASSWORD }}
-          port: ${{ secrets.SSH_PORT }}
+#          port: ${{ secrets.SSH_PORT }}

.github/workflows/buildTest.yml

@@ -1,20 +0,0 @@
-name: test
-
-on:
-  push:
-  pull_request:
-    branches: [ master ]
-
-jobs:
-  build:
-
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js 12.x
-        uses: actions/setup-node@v1
-        with:
-          node-version: '12.x'
-      - run: npm install -g @angular/cli
-      - run: bash build.sh

.github/workflows/test.yml

@@ -0,0 +1,19 @@
+name: Test
+
+on:
+  push:
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  build:
+    if: "!contains(github.event.head_commit.message, '[skip ci]') && !contains(github.event.head_commit.message, '.md')" # 如果 commit 信息包含以下关键字则跳过该任务
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js 16.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: '16.x'
+      - run: npm install
+      - run: npm run lint && npm run build

.gitignore

@@ -1,4 +1,6 @@
+/.angular/cache
 dist
 node_modules
 .idea
 .editorconfig
+package-lock.json

angular.json

@@ -22,7 +22,7 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
-            "aot": false,
+            "aot": true,
             "assets": [
               "src/favicon.ico",
               "src/assets",
@@ -34,18 +34,11 @@
               "src/manifest.webmanifest"
             ],
             "styles": [
-              "src/assets/editor/css/editormd.css",
               "./node_modules/ng-zorro-antd/ng-zorro-antd.min.css",
               "src/styles.less"
             ],
             "scripts": [
-              "./node_modules/jquery/dist/jquery.min.js",
+              "./node_modules/jquery/dist/jquery.min.js"
-              "src/assets/editor/lib/marked.min.js",
-              "src/assets/editor/lib/prettify.min.js",
-              "src/assets/editor/lib/underscore.min.js",
-              "src/assets/editor/lib/flowchart.min.js",
-              "src/assets/editor/lib/jquery.flowchart.min.js",
-              "src/assets/editor/editormd.min.js"
             ]
           },
           "configurations": {
@@ -59,7 +52,6 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
               "aot": true,
               "extractLicenses": true,
@@ -119,15 +111,11 @@
           }
         },
         "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
+          "builder": "@angular-eslint/builder:lint",
           "options": {
-            "tsConfig": [
+            "lintFilePatterns": [
-              "tsconfig.app.json",
+              "src/**/*.ts",
-              "tsconfig.spec.json",
+              "src/**/*.html"
-              "e2e/tsconfig.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
             ]
           }
         },
@@ -146,7 +134,6 @@
       }
     }
   },
-  "defaultProject": "index",
   "cli": {
     "analytics": false
   }

build.sh

@@ -1,40 +0,0 @@
-#!/bin/sh
-basePath=$(pwd)
-
-$(hash node 2>/dev/null)
-if ! [ $? ]; then
-    echo -e "\t\t请先安装nodejs -------> https://nodejs.org/"
-    exit 1
-else
-    echo -e "\t\t nodejs\t\t $(node --version)"
-fi
-
-$(hash npm 2>/dev/null)
-if ! [ $? ]; then
-    echo -e "\t\t Can't find command npm"
-    exit 1
-else
-    echo -e "\t\t npm\t\t $(npm --version)"
-fi
-
-$(hash ng 2>/dev/null)
-if ! [ $? ]; then
-    echo -e "\t\tinstall angular cli to build the project"
-    npm install -g @angular/cli
-else
-    echo -e "\t\t angular-cli\t\t $(ng --version)"
-fi
-
-# index
-echo -e "\t\tBuild for index page "
-npm install && ng build --prod
-
-cd ./dist/index/ && tar -cf index.tar ./* && cp index.tar $basePath
-
-#cd "$basePath"
-
-## admin
-#echo -e "\t\tBuild for admin page "
-#cd $basePath/admin && npm install && ng build --prod
-#cd ./dist/admin/ && sed '6s/\"\/\"/\"\/admin\/\"/g' index.html > index.txt && cp index.txt index.html
-# cd .. && tar -cf admin.tar ./admin/ && cp admin.tar $basePath

package.json

@@ -11,41 +11,52 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^10.1.1",
+    "@angular/animations": "^14.2.12",
-    "@angular/common": "^10.1.1",
+    "@angular/common": "^14.2.12",
-    "@angular/compiler": "^10.1.1",
+    "@angular/compiler": "^14.2.12",
-    "@angular/core": "^10.1.1",
+    "@angular/core": "^14.2.12",
-    "@angular/forms": "^10.1.1",
+    "@angular/forms": "^14.2.12",
-    "@angular/platform-browser": "^10.1.1",
+    "@angular/platform-browser": "^14.2.12",
-    "@angular/platform-browser-dynamic": "^10.1.1",
+    "@angular/platform-browser-dynamic": "^14.2.12",
-    "@angular/router": "^10.1.1",
+    "@angular/router": "^14.2.12",
-    "@angular/service-worker": "^10.1.1",
+    "@angular/service-worker": "^14.2.12",
     "jquery": "^3.5.1",
-    "ng-zorro-antd": "^9.3.0",
+    "js-base64": "^3.6.0",
-    "nrm": "^1.2.1",
+    "ng-zorro-antd": "^14.2.1",
-    "rxjs": "^6.6.3",
+    "rxjs": "^7.5.7",
-    "tslib": "^2.0.1",
+    "tslib": "^2.0.3",
-    "zone.js": "^0.11.1"
+    "vditor": "~3.6.3",
+    "zone.js": "^0.12.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.1001.1",
+    "@angular-devkit/build-angular": "^14.2.10",
-    "@angular/cli": "^10.1.1",
+    "@angular-eslint/builder": "14.4.0",
-    "@angular/compiler-cli": "^10.1.1",
+    "@angular-eslint/eslint-plugin": "15.2.1",
-    "@angular/language-service": "^10.1.1",
+    "@angular-eslint/eslint-plugin-template": "14.4.0",
-    "@types/jasmine": "^3.5.14",
+    "@angular-eslint/schematics": "14.4.0",
+    "@angular-eslint/template-parser": "15.1.0",
+    "@angular/cli": "^14.2.10",
+    "@angular/compiler-cli": "^14.2.12",
+    "@angular/language-service": "^14.2.12",
+    "@types/jasmine": "^4.3.0",
     "@types/jasminewd2": "~2.0.3",
-    "@types/node": "^14.10.2",
+    "@types/node": "^18.11.10",
-    "codelyzer": "^6.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.36.2",
-    "jasmine-core": "^3.6.0",
+    "@typescript-eslint/parser": "^5.36.2",
-    "jasmine-spec-reporter": "^5.0.2",
+    "codelyzer": "^6.0.1",
-    "karma": "^5.2.2",
+    "eslint": "^8.23.0",
+    "eslint-plugin-import": "2.26.0",
+    "eslint-plugin-jsdoc": "^39.6.4",
+    "eslint-plugin-prefer-arrow": "1.2.3",
+    "jasmine-core": "^4.5.0",
+    "jasmine-spec-reporter": "^7.0.0",
+    "karma": "^6.2.0",
     "karma-chrome-launcher": "^3.1.0",
     "karma-coverage-istanbul-reporter": "^3.0.3",
-    "karma-jasmine": "^4.0.1",
+    "karma-jasmine": "^5.1.0",
     "karma-jasmine-html-reporter": "^1.5.4",
     "protractor": "^7.0.0",
-    "ts-node": "^9.0.0",
+    "ts-node": "^10.5.0",
-    "tslint": "^6.1.3",
+    "typescript": "~4.8.4"
-    "typescript": "^4.0.2"
   }
 }

src/app/api/api.service.ts

@@ -1,14 +1,11 @@
-import {forwardRef, Inject, Injectable} from '@angular/core';
+import {Injectable} from '@angular/core';
-import {Article} from '../class/Article';
+import {Article, ArticleReq} from '../class/Article';
 import {HttpService} from './http/http.service';
 import {PageList} from '../class/HttpReqAndResp';
-import {ArticleReq} from '../class/Article';
 import {Category, Tag} from '../class/Tag';
-import {Comment} from '../class/Comment';
+import {Comment, CommentReq} from '../class/Comment';
-import {CommentReq} from '../class/Comment';
 import {ApplyLinkReq, Link} from '../class/Link';
-import {User} from '../class/User';
+import {LoginReq, User} from '../class/User';
-import {LoginReq} from '../class/User';
 import {Visitor} from '../class/Visitor';
 import {UpdateInfo} from '../class/UpdateInfo';
 
@@ -23,7 +20,7 @@ export class ApiService {
 
     createArticle(article: ArticleReq) {
         article.id = null;
-        return this.httpService.Service<Article>({
+        return this.httpService.service<Article>({
             path: '/admin/article/create',
             contentType: 'application/json',
             method: 'POST',
@@ -32,15 +29,15 @@ export class ApiService {
     }
 
     deleteArticle(id: number) {
-        return this.httpService.Service<boolean>({
+        return this.httpService.service<boolean>({
             path: '/admin/article/del',
             method: 'DELETE',
             queryParam: {articleID: id}
-        })
+        });
     }
 
     articles(pageNumber: number = 1, pageSize: number = 5) {
-        return this.httpService.Service<PageList<Article>>({
+        return this.httpService.service<PageList<Article>>({
             path: '/articles',
             method: 'GET',
             queryParam: {
@@ -51,7 +48,7 @@ export class ApiService {
     }
 
     adminArticles(pageNumber: number = 1, pageSize: number = 10) {
-        return this.httpService.Service<PageList<Article>>({
+        return this.httpService.service<PageList<Article>>({
             path: '/admin/articles',
             method: 'GET',
             queryParam: {
@@ -62,7 +59,7 @@ export class ApiService {
     }
 
     updateArticle(article: ArticleReq) {
-        return this.httpService.Service<Article>({
+        return this.httpService.service<Article>({
             path: '/admin/article/update',
             method: 'PUT',
             contentType: 'application/json',
@@ -71,7 +68,7 @@ export class ApiService {
     }
 
     getArticle(articleId: number, is4Update: boolean = false) {
-        return this.httpService.Service<Article>({
+        return this.httpService.service<Article>({
             path: `/article/articleID/${articleId}`,
             method: 'GET',
             queryParam: {update: is4Update},
@@ -79,7 +76,7 @@ export class ApiService {
     }
 
     articlesByCategory(category: string, pageNumber: number = 1, pageSize: number = 10) {
-        return this.httpService.Service<PageList<Article>>({
+        return this.httpService.service<PageList<Article>>({
             path: `/articles/category/${category}`,
             method: 'GET',
             queryParam: {
@@ -90,7 +87,7 @@ export class ApiService {
     }
 
     articlesByTag(tag: string, pageNumber: number = 1, pageSize: number = 10) {
-        return this.httpService.Service<PageList<Article>>({
+        return this.httpService.service<PageList<Article>>({
             path: `/articles/tag/${tag}`,
             method: 'GET',
             queryParam: {
@@ -101,14 +98,14 @@ export class ApiService {
     }
 
     categories() {
-        return this.httpService.Service<PageList<Category>>({
+        return this.httpService.service<PageList<Category>>({
             path: '/categories',
             method: 'GET'
         });
     }
 
     createCategory(nameStr: string) {
-        return this.httpService.Service<Category>({
+        return this.httpService.service<Category>({
             path: '/admin/category/create',
             method: 'POST',
             queryParam: {name: nameStr}
@@ -116,7 +113,7 @@ export class ApiService {
     }
 
     deleteCategory(categoryId: number) {
-        return this.httpService.Service<boolean>({
+        return this.httpService.service<boolean>({
             path: '/admin/category/del',
             method: 'DELETE',
             queryParam: {id: categoryId}
@@ -124,7 +121,7 @@ export class ApiService {
     }
 
     updateCategory(categoryId: number, nameStr: string) {
-        return this.httpService.Service<Category>({
+        return this.httpService.service<Category>({
             path: '/admin/category/update',
             method: 'PUT',
             queryParam: {id: categoryId, name: nameStr}
@@ -132,7 +129,7 @@ export class ApiService {
     }
 
     tags(pageNumber: number = 1, pageSize: number = 10) {
-        return this.httpService.Service<PageList<Tag>>({
+        return this.httpService.service<PageList<Tag>>({
             path: '/tags',
             method: 'GET',
             queryParam: {
@@ -143,38 +140,38 @@ export class ApiService {
     }
 
     tagsNac() {
-        return this.httpService.Service<{ name: string, size: number }[]>({
+        return this.httpService.service<{ name: string; size: number }[]>({
             path: '/tags/nac',
             method: 'GET'
         });
     }
 
     createTag(nameStr: string) {
-        return this.httpService.Service<Tag>({
+        return this.httpService.service<Tag>({
             path: '/admin/tag/create',
             method: 'POST',
             queryParam: {name: nameStr}
         });
     }
 
-    deleteTag(TagId: number) {
+    deleteTag(tagId: number) {
-        return this.httpService.Service<boolean>({
+        return this.httpService.service<boolean>({
             path: '/admin/tag/del',
             method: 'DELETE',
-            queryParam: {id: TagId}
+            queryParam: {id: tagId}
         });
     }
 
-    updateTag(TagId: number, nameStr: string) {
+    updateTag(tagId: number, nameStr: string) {
-        return this.httpService.Service<Tag>({
+        return this.httpService.service<Tag>({
             path: '/admin/tag/update',
             method: 'PUT',
-            queryParam: {id: TagId, name: nameStr}
+            queryParam: {id: tagId, name: nameStr}
         });
     }
 
     getCommentByTypeForAdmin(pagePath: string, pageNumber: number = 1, pageSize: number = 10) {
-        return this.httpService.Service<PageList<Comment>>({
+        return this.httpService.service<PageList<Comment>>({
             path: `/admin/comment/pagePath/${pagePath}`,
             method: 'GET',
             queryParam: {
@@ -185,7 +182,7 @@ export class ApiService {
     }
 
     getCommentByTypeForUser(pagePath: string, pageNumber: number = 1, pageSize: number = 10) {
-        return this.httpService.Service<PageList<Comment>>({
+        return this.httpService.service<PageList<Comment>>({
             path: `/user/comment/pagePath/${pagePath}`,
             method: 'GET',
             queryParam: {
@@ -196,7 +193,7 @@ export class ApiService {
     }
 
     deleteComment(idNumer: number) {
-        return this.httpService.Service<boolean>({
+        return this.httpService.service<boolean>({
             path: `/user/comment/del`,
             method: 'DELETE',
             queryParam: {id: idNumer}
@@ -204,7 +201,7 @@ export class ApiService {
     }
 
     updateComment(commentReq: CommentReq) {
-        return this.httpService.Service<Comment>({
+        return this.httpService.service<Comment>({
             path: `/user/comment/update`,
             method: 'PUT',
             data: commentReq,
@@ -213,7 +210,7 @@ export class ApiService {
     }
 
     comments(pagePath: string, pageSize: number = 10, pageNumber: number = 1) {
-        return this.httpService.Service<PageList<Comment>>({
+        return this.httpService.service<PageList<Comment>>({
             path: `/comment/pagePath/${pagePath}`,
             method: 'GET',
             queryParam: {
@@ -224,7 +221,7 @@ export class ApiService {
     }
 
     createComment(commentReq: CommentReq) {
-        return this.httpService.Service<Comment>({
+        return this.httpService.service<Comment>({
             path: '/user/comment/create',
             method: 'POST',
             contentType: 'application/json',
@@ -234,12 +231,12 @@ export class ApiService {
 
 
     counts() {
-        return this.httpService.Service<{
+        return this.httpService.service<{
-            articleCount: number,
+            articleCount: number;
-            visitorCount: number,
+            visitorCount: number;
-            categoryCount: number,
+            categoryCount: number;
-            tagCount: number,
+            tagCount: number;
-            commentCount: number
+            commentCount: number;
         }>({
             path: '/counts',
             method: 'GET'
@@ -247,7 +244,7 @@ export class ApiService {
     }
 
     adminLinks(pageSize: number = 10, pageNumber: number = 1) {
-        return this.httpService.Service<PageList<Link>>({
+        return this.httpService.service<PageList<Link>>({
             path: '/admin/links',
             method: 'GET',
             queryParam: {
@@ -258,7 +255,7 @@ export class ApiService {
     }
 
     createLink(linkReq: Link) {
-        return this.httpService.Service<Link>({
+        return this.httpService.service<Link>({
             path: '/admin/links/create',
             method: 'POST',
             data: linkReq,
@@ -267,14 +264,14 @@ export class ApiService {
     }
 
     deleteLink(idNumber: number) {
-        return this.httpService.Service<boolean>({
+        return this.httpService.service<boolean>({
             path: `/admin/links/del/${idNumber}`,
             method: 'DELETE',
         });
     }
 
     updateLink(linkReq: Link) {
-        return this.httpService.Service<Link>({
+        return this.httpService.service<Link>({
             path: '/admin/links/update',
             method: 'PUT',
             data: linkReq,
@@ -283,7 +280,7 @@ export class ApiService {
     }
 
     applyLink(link: ApplyLinkReq) {
-        return this.httpService.Service<string>({
+        return this.httpService.service<string>({
             path: '/apply',
             method: 'POST',
             data: link,
@@ -292,7 +289,7 @@ export class ApiService {
     }
 
     reapplyLink(keyStr: string) {
-        return this.httpService.Service<string>({
+        return this.httpService.service<string>({
             path: '/reapply',
             method: 'POST',
             queryParam: {
@@ -302,14 +299,14 @@ export class ApiService {
     }
 
     links() {
-        return this.httpService.Service<Link[]>({
+        return this.httpService.service<Link[]>({
             path: '/links',
             method: 'GET',
         });
     }
 
     verifyImgCode(codeStr: string) {
-        return this.httpService.Service<string>({
+        return this.httpService.service<string>({
             path: '/verCode',
             method: 'POST',
             queryParam: {code: codeStr}
@@ -318,7 +315,7 @@ export class ApiService {
 
 
     login(loginReq: LoginReq) {
-        return this.httpService.Service<User>({
+        return this.httpService.service<User>({
             path: '/login',
             method: 'POST',
             contentType: 'application/json',
@@ -327,14 +324,14 @@ export class ApiService {
     }
 
     logout() {
-        return this.httpService.Service<string>({
+        return this.httpService.service<string>({
             path: '/logout',
             method: 'GET',
         });
     }
 
     registration(emailStr: string, pwd: string) {
-        return this.httpService.Service<boolean>({
+        return this.httpService.service<boolean>({
             path: '/registration',
             method: 'POST',
             queryParam: {
@@ -345,7 +342,7 @@ export class ApiService {
     }
 
     resetPwd(idStr: string, emailStr: string, pwdStr: string) {
-        return this.httpService.Service<string>({
+        return this.httpService.service<string>({
             path: '/resetPwd',
             method: 'POST',
             queryParam: {
@@ -357,7 +354,7 @@ export class ApiService {
     }
 
     emailVerify(idStr: string, emailStr: string) {
-        return this.httpService.Service<void>({
+        return this.httpService.service<void>({
             path: '/emailVerify',
             method: 'POST',
             queryParam: {
@@ -369,7 +366,7 @@ export class ApiService {
 
 
     sendResetPwdEmail(emailStr: string) {
-        return this.httpService.Service<string>({
+        return this.httpService.service<string>({
             path: '/sendResetPwdEmail',
             method: 'POST',
             queryParam: {email: emailStr}
@@ -377,7 +374,7 @@ export class ApiService {
     }
 
     sendVerifyEmail(emailStr: string) {
-        return this.httpService.Service<string>({
+        return this.httpService.service<string>({
             path: '/sendVerifyEmail',
             method: 'POST',
             queryParam: {email: emailStr}
@@ -385,30 +382,30 @@ export class ApiService {
     }
 
     userInfo() {
-        return this.httpService.Service<User>({
+        return this.httpService.service<User>({
             path: '/user/userInfo',
             method: 'GET',
         });
     }
 
     adminUpdateUser(user: User) {
-        return this.httpService.Service<User>({
+        return this.httpService.service<User>({
             path: '/admin/user',
             method: 'PUT',
             data: user,
             contentType: 'application/json'
-        })
+        });
     }
 
     deleteUser(id: number) {
-        return this.httpService.Service<boolean>({
+        return this.httpService.service<boolean>({
             path: `/admin/user/delete/${id}`,
             method: 'DELETE',
         });
     }
 
     multipleDeleteUser(idArray: number[]) {
-        return this.httpService.Service<{ id: number; msg: string; status: boolean }[]>({
+        return this.httpService.service<{ id: number; msg: string; status: boolean }[]>({
             path: `/admin/user/delete`,
             method: 'DELETE',
             data: idArray,
@@ -418,14 +415,14 @@ export class ApiService {
 
     // 获取邮件是否已注册
     emailStatus(email: string) {
-        return this.httpService.Service<boolean>({
+        return this.httpService.service<boolean>({
             path: `/emailStatus/${email}`,
             method: 'GET'
-        })
+        });
     }
 
     updateUserInfo(descStr: string, disPlayNameStr: string) {
-        return this.httpService.Service<User>({
+        return this.httpService.service<User>({
             path: '/user/userInfo/update',
             method: 'PUT',
             queryParam: {
@@ -436,7 +433,7 @@ export class ApiService {
     }
 
     adminUsers(pageSize: number = 10, pageNumber: number = 1) {
-        return this.httpService.Service<PageList<User>>({
+        return this.httpService.service<PageList<User>>({
             path: '/admin/users',
             method: 'GET',
             queryParam: {
@@ -447,14 +444,14 @@ export class ApiService {
     }
 
     visit() {
-        return this.httpService.Service<Visitor>({
+        return this.httpService.service<Visitor>({
             path: '/visit',
             method: 'POST'
         });
     }
 
     adminVisitors(location: boolean = false, pageSize: number = 10, pageNumber: number = 1) {
-        return this.httpService.Service<PageList<Visitor>>({
+        return this.httpService.service<PageList<Visitor>>({
             path: '/admin/visitor/page',
             method: 'GET',
             queryParam: {
@@ -466,42 +463,42 @@ export class ApiService {
     }
 
     dayVisitCount() {
-        return this.httpService.Service<number>({
+        return this.httpService.service<number>({
             path: '/dayVisitCount',
             method: 'GET',
         });
     }
 
     getLocalIp() {
-        return this.httpService.Service<string>({
+        return this.httpService.service<string>({
             path: '/ip',
             method: 'GET',
         });
     }
 
     getIpLocation(ip: string) {
-        return this.httpService.Service<string>({
+        return this.httpService.service<string>({
             path: `/ip/${ip}`,
             method: 'GET',
         });
     }
 
     visitorCount() {
-        return this.httpService.Service<number>({
+        return this.httpService.service<number>({
             path: `/visitor/count`,
             method: 'GET',
         });
     }
 
     webUpdate() {
-        return this.httpService.Service<{ id: number, info: string, time: string }[]>({
+        return this.httpService.service<{ id: number; info: string; time: string }[]>({
             path: '/webUpdate',
             method: 'GET'
         });
     }
 
     webUpdatePage(pageSize: number = 10, pageNumber: number = 1) {
-        return this.httpService.Service<PageList<{ id: number, info: string, time: string }>>({
+        return this.httpService.service<PageList<{ id: number; info: string; time: string }>>({
             path: '/webUpdate/pages',
             method: 'GET',
             queryParam: {
@@ -512,13 +509,13 @@ export class ApiService {
     }
 
     lastestUpdate() {
-        return this.httpService.Service<{
+        return this.httpService.service<{
             lastUpdateTime: string;
             lastUpdateInfo: string;
             lastCommit: string;
             committerAuthor: string;
             committerDate: string;
-            commitUrl: string
+            commitUrl: string;
         }>({
             path: '/lastestUpdate',
             method: 'GET'
@@ -526,7 +523,7 @@ export class ApiService {
     }
 
     createWebUpdateInfo(infoStr: string) {
-        return this.httpService.Service<UpdateInfo>({
+        return this.httpService.service<UpdateInfo>({
             path: '/admin/webUpdate/create',
             method: 'POST',
             queryParam: {info: infoStr}
@@ -534,14 +531,14 @@ export class ApiService {
     }
 
     deleteWebUpdateInfo(idNumber: number) {
-        return this.httpService.Service<boolean>({
+        return this.httpService.service<boolean>({
             path: `/admin/webUpdate/del/${idNumber}`,
             method: 'DELETE',
         });
     }
 
     updateWebUpdateInfo(idNumber: number, infoStr: string) {
-        return this.httpService.Service<UpdateInfo>({
+        return this.httpService.service<UpdateInfo>({
             path: '/admin/webUpdate/update',
             method: 'PUT',
             queryParam: {id: idNumber, info: infoStr}
@@ -549,14 +546,14 @@ export class ApiService {
     }
 
     bingPic() {
-        return this.httpService.Service<string>({
+        return this.httpService.service<string>({
             path: '/bingPic',
             method: 'GET'
         });
     }
 
     setPwd(pwdStr: string, newPwdStr: string, confirmPwdStr: string,) {
-        return this.httpService.Service<string>({
+        return this.httpService.service<string>({
             path: '/user/setPwd',
             method: 'POST',
             queryParam: {

src/app/api/http/http.service.ts

@@ -11,21 +11,22 @@ import {ErrorService} from '../../services/error.service';
 })
 export class HttpService {
 
+    private subscriptionQueue: Subscription[] = [];
+
     constructor(private httpClient: HttpClient,
                 private localStorageService: LocalStorageService,
                 private injector: Injector) {
     }
 
-    private subscriptionQueue: Subscription[] = [];
-
     public getSubscriptionQueue = () => this.subscriptionQueue;
 
-    Service<T>(request: RequestObj) {
+    service<T>(request: RequestObj) {
         const errorService = this.injector.get(ErrorService);
         request.url = null;
         // 设置默认值
         request.contentType = request.contentType == null ? 'application/x-www-form-urlencoded' : request.contentType;
         request.header = {
+            // eslint-disable-next-line @typescript-eslint/naming-convention
             'Content-Type': request.contentType
         };
         const token = this.localStorageService.getToken();
@@ -62,7 +63,7 @@ export class HttpService {
                 }
                 if (o.body.code !== 0) {
                     observer.error(o.body);
-                    errorService.httpException(o.body, request)
+                    errorService.httpException(o.body, request);
                 } else {
                     observer.next(o.body);
                 }
@@ -71,7 +72,7 @@ export class HttpService {
             error: err => {
                 errorService.httpError(err, request);
                 errorService.checkConnection();
-                this.subscriptionQueue.splice(this.subscriptionQueue.indexOf(subscription), 1)
+                this.subscriptionQueue.splice(this.subscriptionQueue.indexOf(subscription), 1);
             },
             complete: () => this.subscriptionQueue.splice(this.subscriptionQueue.indexOf(subscription), 1)
         });
@@ -117,6 +118,7 @@ export class HttpService {
 
     /**
      * 验证并且处理拼接 URl
+     *
      * @param req Request
      */
     private checkUrl(req: RequestObj): string {

src/app/app.component.ts

@@ -9,9 +9,9 @@ import {ComponentStateService} from './services/component-state.service';
     styleUrls: ['./app.component.less']
 })
 export class AppComponent {
+    @ViewChild('headerComponent') header: HeaderComponent;
     loginModal: boolean = false;
     regModal: boolean = false;
-    @ViewChild('headerComponent') header: HeaderComponent;
 
     constructor(public componentStateService: ComponentStateService) {
     }

src/app/app.module.ts

@@ -1,7 +1,7 @@
 import {BrowserModule} from '@angular/platform-browser';
-import {forwardRef, NgModule} from '@angular/core';
+import {NgModule} from '@angular/core';
 import {AppComponent} from './app.component';
-import {NgZorroAntdModule, NZ_I18N, zh_CN} from 'ng-zorro-antd';
+import {NZ_I18N, zh_CN} from 'ng-zorro-antd/i18n';
 import {FormsModule} from '@angular/forms';
 import {HttpClientModule} from '@angular/common/http';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@@ -20,6 +20,16 @@ import {ComponentStateService} from './services/component-state.service';
 import {GlobalUserService} from './services/global-user.service';
 import {LocalStorageService} from './services/local-storage.service';
 import {ApiService} from './api/api.service';
+import {NzMessageService} from 'ng-zorro-antd/message';
+import {NzBackTopModule} from 'ng-zorro-antd/back-top';
+import {NzModalModule} from 'ng-zorro-antd/modal';
+import {NzNotificationService} from 'ng-zorro-antd/notification';
+import {NzDropDownModule} from 'ng-zorro-antd/dropdown';
+import {NzIconModule} from 'ng-zorro-antd/icon';
+import {NzAvatarModule} from 'ng-zorro-antd/avatar';
+import {NzButtonModule} from 'ng-zorro-antd/button';
+import {NzGridModule} from 'ng-zorro-antd/grid';
+import {NzDividerModule} from 'ng-zorro-antd/divider';
 
 
 registerLocaleData(zh);
@@ -33,13 +43,20 @@ registerLocaleData(zh);
     imports: [
         BrowserModule,
         AppRoutingModule,
-        NgZorroAntdModule,
         FormsModule,
         HttpClientModule,
         BrowserAnimationsModule,
         LoginRegistrationModule,
         AdminModule,
-        ServiceWorkerModule.register('ngsw-worker.js', {enabled: environment.production})
+        ServiceWorkerModule.register('ngsw-worker.js', {enabled: environment.production}),
+        NzBackTopModule,
+        NzModalModule,
+        NzDropDownModule,
+        NzIconModule,
+        NzAvatarModule,
+        NzButtonModule,
+        NzGridModule,
+        NzDividerModule
     ],
     providers: [
         ComponentStateService,
@@ -47,6 +64,8 @@ registerLocaleData(zh);
         LocalStorageService,
         HttpService,
         ApiService,
+        NzMessageService,
+        NzNotificationService,
         ErrorService,
         {provide: NZ_I18N, useValue: zh_CN},
     ],

src/app/class/EditorConfig.ts

@@ -1,27 +0,0 @@
-import {environment} from '../../environments/environment';
-
-export class EditorConfig {
-    public width = '100%';
-    public height = '400';
-    public path = 'assets/editor/lib/';
-    public codeFold: true;
-    public searchReplace = true;
-    public toolbar = true;
-    public placeholder = '欢迎来到小海的创作中心';
-    public emoji = true;
-    public taskList = true;
-    public tex = true;
-    public readOnly = false;
-    public tocm = true;
-    public watch = true;
-    public previewCodeHighlight = true;
-    public saveHTMLToTextarea = true;
-    public markdown = '';
-    public flowChart = true;
-    public syncScrolling = true;
-    public sequenceDiagram = false; // 时序图/序列图
-    public imageUpload = true;
-    public imageFormats = ['jpg', 'jpeg', 'gif', 'png', 'bmp', 'webp'];
-    public imageUploadURL = environment.host + '/imgUpload';
-    public useAjaxToUploadImg = true
-}

src/app/class/Link.ts

@@ -14,5 +14,5 @@ export class ApplyLinkReq {
     iconPath: string;
     linkUrl: string;
     name: string;
-    url: string
+    url: string;
 }

src/app/class/User.ts

@@ -8,7 +8,7 @@ export class User {
     role?: string;
     token?: string;
     pwd?: string;
-    recentlyLandedDate?: string
+    recentlyLandedDate?: string;
 }
 
 export class LoginReq {

src/app/components/admin-header/admin-header.component.html

@@ -20,16 +20,16 @@
 
     <div id="landr" *ngIf="!user">
         <nz-space>
-            <nz-space-item>
+            <template *nzSpaceItem>
                 <a routerLink="/user/login">
                     <button nz-button nzType="primary">登录</button>
                 </a>
-            </nz-space-item>
+            </template>
-            <nz-space-item>
+            <template *nzSpaceItem>
                 <a routerLink="/user/registration">
                     <button nz-button nzType="primary">注册</button>
                 </a>
-            </nz-space-item>
+            </template>
         </nz-space>
     </div>
 

src/app/components/admin-header/admin-header.component.ts

@@ -8,13 +8,14 @@ import {User} from '../../class/User';
     styleUrls: ['./admin-header.component.less']
 })
 export class AdminHeaderComponent implements OnInit {
+    @Output() infoClicked = new EventEmitter<void>();
+    user: User;
+    noAvatarUrl = 'https://cdn.celess.cn/';
 
     constructor(private userService: GlobalUserService) {
     }
 
-    user: User
+
-    @Output() infoClicked = new EventEmitter<void>()
-    noAvatarUrl = 'https://cdn.celess.cn/'
     logout = () => this.userService.logout();
     infoClickedEvent = () => this.infoClicked.emit();
 
@@ -23,7 +24,7 @@ export class AdminHeaderComponent implements OnInit {
             next: data => this.user = data.result,
             error: err => this.user = null,
             complete: null
-        })
+        });
     }
 
 }

src/app/components/footer/footer.component.html

@@ -1,9 +1,7 @@
 <div class="footer">
     <nz-divider></nz-divider>
     <div>
-        <a href="http://www.miitbeian.gov.cn" target="_blank">
+        <a href="https://beian.miit.gov.cn" target="_blank">鄂ICP备18023929号-2</a>
-            鄂ICP备18023929号
-        </a>
         <div>
             © 2020 <a href="https://www.celess.cn">小海博客</a> -
             <span>{{bName}} </span> <span *ngIf="gName">& {{gName}} </span>版权所有

src/app/components/footer/footer.component.less

@@ -9,7 +9,7 @@
   left: 0;
   bottom: 0;
   /* 设置z-index 是为了write页面将footer隐藏*/
-  z-index: -1;
+  z-index: 0;
 }
 
 hr {

src/app/components/footer/footer.component.ts

@@ -8,12 +8,12 @@ import {ComponentStateService} from '../../services/component-state.service';
 })
 export class FooterComponent implements OnInit {
 
-    constructor(public componentStateService: ComponentStateService) {
-    }
-
     readonly gName: string = '何梦幻';
     readonly bName: string = '郑海';
 
+    constructor(public componentStateService: ComponentStateService) {
+    }
+
     ngOnInit() {
     }
 

src/app/components/header/header.component.ts

@@ -1,7 +1,6 @@
 import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {Router} from '@angular/router';
 import {windowWidthChange} from '../../utils/util';
-import {ApiService} from '../../api/api.service';
 import {User} from '../../class/User';
 import {ComponentStateService} from '../../services/component-state.service';
 import {GlobalUserService} from '../../services/global-user.service';
@@ -12,6 +11,25 @@ import {GlobalUserService} from '../../services/global-user.service';
     styleUrls: ['./header.component.less']
 })
 export class HeaderComponent implements OnInit {
+    @Output() loginEvent = new EventEmitter();
+    @Output() registrationEvent = new EventEmitter();
+    @Input() userInfo: User;
+    size: 'large' | 'default';
+    currentPath: string;
+    noAvatarUrl = 'https://cdn.celess.cn/';
+
+    public pageList: {
+        path: string;
+        name: string;
+        icon: string;
+        iconType: 'outline' | 'fill' | 'twotone';
+        show: boolean;
+    }[];
+
+
+    public showList = true;
+    // css 样式中设置移动端最大宽度为910px 见src/app/global-variables.less
+    private readonly mobileMaxWidth = 940;
 
     constructor(private router: Router,
                 public componentStateService: ComponentStateService,
@@ -46,26 +64,6 @@ export class HeaderComponent implements OnInit {
         });
     }
 
-    @Output() loginEvent = new EventEmitter();
-    @Output() registrationEvent = new EventEmitter();
-    size: 'large' | 'default';
-    currentPath: string;
-    noAvatarUrl = 'https://cdn.celess.cn/'
-
-    public pageList: {
-        path: string;
-        name: string;
-        icon: string;
-        iconType: 'outline' | 'fill' | 'twotone';
-        show: boolean;
-    }[];
-
-
-    public showList = true;
-    // css 样式中设置移动端最大宽度为910px 见src/app/global-variables.less
-    private readonly mobileMaxWidth = 940;
-
-    @Input() userInfo: User;
 
     ngOnInit() {
     }
@@ -75,17 +73,6 @@ export class HeaderComponent implements OnInit {
         this.changeLoginButtonV();
     }
 
-    private changeLoginButtonV() {
-        this.pageList.forEach(e => {
-            if (e.name === '登录' || e.name === '注册') {
-                if (this.userInfo) {
-                    e.show = false;
-                } else {
-                    e.show = (this.showList && window.innerWidth < this.mobileMaxWidth);
-                }
-            }
-        });
-    }
 
     dealLink(path: string) {
         this.showList = window.innerWidth > this.mobileMaxWidth;
@@ -137,7 +124,20 @@ export class HeaderComponent implements OnInit {
     }
 
     toAdminPage() {
-        this.router.navigateByUrl('/admin')
+        this.router.navigateByUrl('/admin');
-    }
+    }
+
+    private changeLoginButtonV() {
+        this.pageList.forEach(e => {
+            if (e.name === '登录' || e.name === '注册') {
+                if (this.userInfo) {
+                    e.show = false;
+                } else {
+                    e.show = (this.showList && window.innerWidth < this.mobileMaxWidth);
+                }
+            }
+        });
+    }
+
 }
 

src/app/services/component-state.service.ts

@@ -1,24 +1,25 @@
 import {Injectable} from '@angular/core';
 import {filter} from 'rxjs/operators';
 import {NavigationEnd, Router, RouterEvent} from '@angular/router';
-import {Observable, of, Subscriber} from 'rxjs';
+import {Observable, Subscriber} from 'rxjs';
 
 @Injectable({
     providedIn: 'root'
 })
 export class ComponentStateService {
-
-    constructor(private router: Router) {
-        this.watchRouterChange()
-    }
-
     visible = {
         header: true,
         footer: true,
         globalBackToTop: true
+    };
+
+    currentPath: string;
+
+    constructor(private router: Router) {
+        this.watchRouterChange();
     }
 
-    currentPath: string
+
     getCurrentRouterPath = () => this.currentPath;
 
     watchRouterChange() {
@@ -31,28 +32,30 @@ export class ComponentStateService {
             // lastIndexOf ==> 0/index
             const indexOf = path.lastIndexOf('/');
             const prefix = path.substr(0, indexOf === 0 ? path.length : indexOf);
-            this.dealWithPathChange(prefix)
+            this.dealWithPathChange(prefix);
             this.currentPath = prefix;
-            if (subscriber) subscriber.next(prefix)
+            if (subscriber) {
+                subscriber.next(prefix);
+            }
         });
         return ob;
     }
 
     private dealWithPathChange(path) {
-        // tslint:disable-next-line:forin
+        // eslint-disable-next-line guard-for-in
         for (const visibleKey in this.visible) {
-            this.visible[visibleKey] = true
+            this.visible[visibleKey] = true;
         }
         switch (path) {
             case '/admin':
-                this.visible.header = false
+                this.visible.header = false;
-                this.visible.footer = false
+                this.visible.footer = false;
-                this.visible.globalBackToTop = false
+                this.visible.globalBackToTop = false;
-                break
+                break;
             case '/user':
             case '/write':
-                this.visible.footer = false
+                this.visible.footer = false;
-                this.visible.globalBackToTop = false
+                this.visible.globalBackToTop = false;
                 break;
 
             default:

src/app/services/error.service.ts

@@ -3,7 +3,7 @@ import {RequestObj, Response} from '../class/HttpReqAndResp';
 import {environment} from '../../environments/environment';
 import {Router} from '@angular/router';
 import {ComponentStateService} from './component-state.service';
-import {NzNotificationService} from 'ng-zorro-antd';
+import {NzNotificationService} from 'ng-zorro-antd/notification';
 import {HttpService} from '../api/http/http.service';
 import {LocalStorageService} from './local-storage.service';
 
@@ -11,6 +11,9 @@ import {LocalStorageService} from './local-storage.service';
     providedIn: 'root'
 })
 export class ErrorService {
+    private static httpErrorCount: number = 0;
+    private readonly maintainPagePrefix = '/maintain';
+    private readonly adminPagePrefix = '/admin';
 
     constructor(/*private httpService: HttpService,*/
                 private router: Router,
@@ -20,48 +23,57 @@ export class ErrorService {
                 private localStorageService: LocalStorageService) {
     }
 
-    private static HTTP_ERROR_COUNT: number = 0;
-    private readonly MAINTAIN_PAGE_PREFIX = '/maintain'
-    private readonly ADMIN_PAGE_PREFIX = '/admin'
-
     public httpError(err: any, request: RequestObj) {
         if (!environment.production) {
-            console.log('error=>', err, request)
+            console.log('error=>', err, request);
         }
-        ErrorService.HTTP_ERROR_COUNT++;
+        ErrorService.httpErrorCount++;
         // this.httpService.getSubscriptionQueue().map(a => a.unsubscribe())
     }
 
     public httpException(response: Response<any>, request: RequestObj) {
-        if (!environment.production)
+        if (!environment.production) {
-            console.log('exception=>', response, request)
+            console.log('exception=>', response, request);
-        if (response.code === -1 && response.msg === '重复请求') return
+        }
-        if (this.componentStateService.currentPath === this.ADMIN_PAGE_PREFIX) {
+        if (response.code === -1 && response.msg === '重复请求') {
+            return;
+        }
+        if (this.componentStateService.currentPath === this.adminPagePrefix) {
             this.notification.create('error', `请求失败<${response.code}>`, `${response.msg}`);
         }
-        // 3830 token签名错误
+        /***
-        if (response.code === 3830) {
+         * 3700, "登陆过期"
+         * 3710, "账户已注销"
+         * 3711, "账户不可用"
+         * 3800, "密码不正确"
+         * 3810, "Token过期"
+         * 3820, "Token格式不对"
+         * 3820, "Token格式不对"
+         * 3830, "Token签名错误"
+         * 3840, "不支持的Token"
+         */
+        if (response.code > 3700 && response.code < 3900) {
             this.localStorageService.removeToken();
         }
     }
 
     public checkConnection() {
         // The HTTP_ERROR_COUNT is start with 1 in this function
-        if (ErrorService.HTTP_ERROR_COUNT === 1) {
+        if (ErrorService.httpErrorCount === 1) {
             const req: RequestObj = {
                 path: '/headerInfo',
                 method: 'GET',
                 url: environment.host + '/headerInfo'
-            }
+            };
             this.injector.get(HttpService).get(req).subscribe({
                 next: () => null,
                 error: () => {
-                    if (this.componentStateService.currentPath !== this.MAINTAIN_PAGE_PREFIX) {
+                    if (this.componentStateService.currentPath !== this.maintainPagePrefix) {
-                        this.router.navigateByUrl(this.MAINTAIN_PAGE_PREFIX)
+                        this.router.navigateByUrl(this.maintainPagePrefix);
                     }
-                    ErrorService.HTTP_ERROR_COUNT = 0;
+                    ErrorService.httpErrorCount = 0;
                 }
-            })
+            });
         }
     }
 }

src/app/services/global-user.service.ts

@@ -10,10 +10,6 @@ import {LocalStorageService} from './local-storage.service';
 })
 export class GlobalUserService {
 
-    constructor(private apiService: ApiService,
-                private localStorageService: LocalStorageService) {
-    }
-
     private lastRequestTime: number;
     private userInfo: User = null;
 
@@ -21,26 +17,29 @@ export class GlobalUserService {
     private userObserverArray: Observer<Response<User>>[] = [];
 
     private multicastArray: Observer<Response<User>>[] = [];
+    constructor(private apiService: ApiService,
+                private localStorageService: LocalStorageService) {
+    }
 
     watchUserInfo(observer: Observer<Response<User>>) {
-        if (this.userObserverArray.indexOf(observer) < 0) this.userObserverArray.push(observer);
+        if (this.userObserverArray.indexOf(observer) < 0) {this.userObserverArray.push(observer);}
         this.multicastArray = [...this.userObserverArray];
         let subscription: Subscription = null;
         const unsubscribe = () => {
             this.userObserverArray.splice(this.userObserverArray.indexOf(observer), 1);
             observer.complete();
-            if (subscription) subscription.unsubscribe();
+            if (subscription) {subscription.unsubscribe();}
         };
         if (this.lastRequestTime && Date.now() - this.lastRequestTime < 3000) {
             if (this.userInfo && this.multicastArray.length) {
-                this.broadcast()
+                this.broadcast();
                 this.lastRequestTime = Date.now();
             }
-            return {unsubscribe}
+            return {unsubscribe};
         }
         // 获取数据
         subscription = this.getUserInfoFromServer();
-        return {unsubscribe}
+        return {unsubscribe};
     }
 
     // 刷新用户信息
@@ -59,7 +58,7 @@ export class GlobalUserService {
                 // this.localStorageService.setUser(o.result);
                 // this.userObserver.next(o);
                 this.userInfo = o.result;
-                this.broadcast()
+                this.broadcast();
                 observer.next(o);
                 observer.complete();
             },
@@ -82,7 +81,7 @@ export class GlobalUserService {
         // 如果不需要返回消息也ok
         this.apiService.logout().subscribe(data => {
                 this.localStorageService.clear();
-                this.broadcast()
+                this.broadcast();
                 if (observer) {
                     observer.next(data);
                     observer.complete();
@@ -93,7 +92,7 @@ export class GlobalUserService {
                     observer.error(error);
                     observer.complete();
                 }
-            })
+            });
     }
 
     getUserInfoFromServer(observer?: Observer<Response<User>>) {
@@ -102,7 +101,7 @@ export class GlobalUserService {
                 this.lastRequestTime = Date.now();
                 this.userInfo = o.result;
                 // this.localStorageService.setUser(o.result);
-                this.broadcast()
+                this.broadcast();
                 if (observer) {
                     observer.next(o);
                     observer.complete();
@@ -118,12 +117,12 @@ export class GlobalUserService {
 
                 if (err.code === -1) {
                     // 请求重复
-                    return
+                    return;
                 }
                 // this.requested = false;
                 // this.localStorageService.removeToken();
-                this.multicastArray.forEach(ob => ob.next(new Response<User>(this.userInfo)))
+                this.multicastArray.forEach(ob => ob.next(new Response<User>(this.userInfo)));
-                this.multicastArray.forEach(ob => ob.error(err))
+                this.multicastArray.forEach(ob => ob.error(err));
                 this.multicastArray.splice(0, this.multicastArray.length);
 
             }
@@ -131,7 +130,7 @@ export class GlobalUserService {
     }
 
     private broadcast() {
-        this.multicastArray.forEach(ob => ob.next(new Response<User>(this.userInfo)))
+        this.multicastArray.forEach(ob => ob.next(new Response<User>(this.userInfo)));
         this.multicastArray.splice(0, this.multicastArray.length);
     }
 }

src/app/services/local-storage.service.ts

@@ -1,34 +1,65 @@
 import {Injectable} from '@angular/core';
-import {User} from '../class/User';
+import {Base64} from 'js-base64';
 
 @Injectable({
     providedIn: 'root'
 })
 export class LocalStorageService {
+    readonly place = 30 * 1000;
 
     constructor() {
     }
 
     // 30s
-    readonly place = 30 * 1000;
 
     getToken(): string {
-        return localStorage.getItem('token');
+        const item = this.getItem('token');
+        if (!item) {
+            return null;
+        }
+        return 'Bearer ' + item;
     }
 
     setToken(token: string) {
-        localStorage.setItem('t', new Date().valueOf().toString());
+        const t = new Date().valueOf().toString();
-        localStorage.setItem('token', token);
+        this.setItem('t', t);
+        if (token.startsWith('Bearer')) {
+            token = token.replace('Bearer', '');
+        }
+        if (token.startsWith('bearer')) {
+            token = token.replace('bearer', '');
+        }
+        this.setItem('token', token);
     }
 
     removeToken() {
-        localStorage.removeItem('token');
+        this.removeItem('token');
     }
 
     isLogin() {
         return this.getToken() != null;
     }
 
+    setItem(key: string, value: any) {
+        localStorage.setItem(key, Base64.encode(value));
+    }
+
+    getItem(key: string) {
+        const item = localStorage.getItem(key);
+        let decode;
+        try {
+            decode = Base64.decode(item);
+            return item ? decode : null;
+        } catch (e) {
+            localStorage.removeItem(key);
+            return item;
+        }
+    }
+
+    removeItem(key: string) {
+        localStorage.removeItem(key);
+    }
+
     // setUser(user: User) {
     //     // TODO: 简单加个密
     //     localStorage.setItem('t', new Date().valueOf().toString());

src/app/utils/color.ts

@@ -1,9 +1,9 @@
 export class Color {
     bgColor: string;
-    fontColor: string
+    fontColor: string;
 }
 
-export const ColorList: Color[] = [
+export const COLOR_LIST: Color[] = [
     {bgColor: '#7bcfa6', fontColor: '#000000'}, // 石青
     {bgColor: '#bce672', fontColor: '#000000'}, // 松花色
     {bgColor: '#ff8936', fontColor: '#000000'}, // 橘黄
@@ -13,23 +13,24 @@ export const ColorList: Color[] = [
     {bgColor: '#177cb0', fontColor: '#ffffff'}, // 靛青
 ];
 
-export const ColorListLength = ColorList.length
+export const COLOR_LIST_LENGTH = COLOR_LIST.length;
 
 /**
  * 获取一组随机颜色
+ *
  * @param count 数量
  */
-export function RandomColor(count: number = 1): Color[] {
+export function randomColor(count: number = 1): Color[] {
     const map = new Map<number, number>();
-    ColorList.forEach((color, index) => map.set(index, 0))
+    COLOR_LIST.forEach((color, index) => map.set(index, 0));
     const colorArray: Color[] = [];
     const oneRandomColor = () => {
-        const minValue = Math.min.apply(null, Array.from(map.values()))
+        const minValue = Math.min.apply(null, Array.from(map.values()));
         const keys = Array.from(map.keys()).filter(key => map.get(key) === minValue);
         const keyIndex = Math.floor(Math.random() * keys.length);
         const index = keys[keyIndex];
         map.set(index, minValue + 1);
-        return ColorList[index]
+        return COLOR_LIST[index];
     };
     for (let i = 0; i < count; i++) {
         colorArray.push(oneRandomColor());

src/app/utils/dataUtil.ts

@@ -3,6 +3,7 @@ import {PageList} from '../class/HttpReqAndResp';
 
 /**
  * 判断 一个Page<any>[] 中是否存在一条已查询的数据
+ *
  * @param pageNum 页码
  * @param pageSize 单页数量
  * @param pageList 源数据
@@ -12,14 +13,14 @@ export function exist<T>(pageNum: number, pageSize: number, pageList: PageList<a
     if (pageList === undefined || pageList == null || pageList.length === 0) {
         return null;
     }
-    // tslint:disable-next-line:prefer-for-of
+    // eslint-disable-next-line @typescript-eslint/prefer-for-of
     for (let i = 0; i < pageList.length; i++) {
-        // tslint:disable-next-line:triple-equals
+        // eslint-disable-next-line eqeqeq
         if (pageList[i].pageNum == pageNum && pageList[i].pageSize == pageSize) {
             const ob: Observable<PageList<T>> = new Observable(o => {
                 o.next(pageList[i]);
                 o.complete();
-            })
+            });
         }
     }
     return null;

src/app/utils/svgIconUtil.ts

@@ -1,11 +1,12 @@
 export class SvgIconUtil {
 
+    // eslint-disable-next-line max-len
+    static readonly nameIcon = '<svg t="1581933298087" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3223" width="200" height="200"><path d="M983.04 163.84H40.96c-24.576 0-40.96 16.384-40.96 40.96v614.4c0 20.48 16.384 40.96 40.96 40.96h942.08c20.48 0 40.96-20.48 40.96-40.96V204.8c0-24.576-20.48-40.96-40.96-40.96zM253.952 749.568c0-102.4 61.44-192.512 147.456-233.472-28.672-24.576-45.056-61.44-45.056-102.4 0-77.824 65.536-143.36 143.36-143.36s143.36 65.536 143.36 143.36c0 40.96-12.288 73.728-36.864 98.304 94.208 36.864 163.84 131.072 163.84 237.568H253.952z" p-id="3224" fill="#1296db"></path></svg>';
+
+    // eslint-disable-next-line max-len
+    static readonly locationIcon = '<svg t="1581933583276" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3981" width="200" height="200"><path d="M511.932268 0c-213.943865 0-387.880498 170.933833-387.880499 381.06211 0 164.815346 238.869364 485.098975 341.66447 620.247558a58.249807 58.249807 0 0 0 46.216029 22.690332c18.129688 0 35.491743-8.443964 46.328916-22.690332 102.704796-135.126006 341.709624-455.432213 341.709624-620.247558C899.970808 170.933833 725.89871 0 511.932268 0z m0 519.574733c-91.393496 0-165.786176-72.902569-165.786176-162.670489 0-89.722765 74.39268-162.738221 165.786176-162.73822 91.438651 0 165.718443 73.015456 165.718443 162.73822 0 89.76792-74.279793 162.670488-165.718443 162.670489z" fill="#1296db" p-id="3982"></path></svg>';
+
     constructor() {
     }
 
-    // tslint:disable-next-line:max-line-length
-    static readonly nameIcon = '<svg t="1581933298087" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3223" width="200" height="200"><path d="M983.04 163.84H40.96c-24.576 0-40.96 16.384-40.96 40.96v614.4c0 20.48 16.384 40.96 40.96 40.96h942.08c20.48 0 40.96-20.48 40.96-40.96V204.8c0-24.576-20.48-40.96-40.96-40.96zM253.952 749.568c0-102.4 61.44-192.512 147.456-233.472-28.672-24.576-45.056-61.44-45.056-102.4 0-77.824 65.536-143.36 143.36-143.36s143.36 65.536 143.36 143.36c0 40.96-12.288 73.728-36.864 98.304 94.208 36.864 163.84 131.072 163.84 237.568H253.952z" p-id="3224" fill="#1296db"></path></svg>';
-
-    // tslint:disable-next-line:max-line-length
-    static readonly locationIcon = '<svg t="1581933583276" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3981" width="200" height="200"><path d="M511.932268 0c-213.943865 0-387.880498 170.933833-387.880499 381.06211 0 164.815346 238.869364 485.098975 341.66447 620.247558a58.249807 58.249807 0 0 0 46.216029 22.690332c18.129688 0 35.491743-8.443964 46.328916-22.690332 102.704796-135.126006 341.709624-455.432213 341.709624-620.247558C899.970808 170.933833 725.89871 0 511.932268 0z m0 519.574733c-91.393496 0-165.786176-72.902569-165.786176-162.670489 0-89.722765 74.39268-162.738221 165.786176-162.73822 91.438651 0 165.718443 73.015456 165.718443 162.73822 0 89.76792-74.279793 162.670488-165.718443 162.670489z" fill="#1296db" p-id="3982"></path></svg>';
 }

src/app/view/admin/admin-article/admin-article.component.html

@@ -1,5 +1,4 @@
-<common-table cardTitle="文章管理"
+<common-table #commonTableComponent
-                #commonTableComponent
               [headData]="headData"
               [request]="request"
               [template]="{
@@ -8,25 +7,26 @@
                     likeCount:{temp:likeCount},
                     dislikeCount:{temp:dislikeCount},
                     open:{temp:open}
-                }">
+                }"
+              cardTitle="文章管理">
 </common-table>
 
-<ng-template let-value="value" let-originValue="originValue" #original>
+<ng-template #original let-originValue="originValue" let-value="value">
     <nz-tag [nzColor]="originValue?'green':'#ff5500'">{{value}}</nz-tag>
 </ng-template>
 
-<ng-template let-value="value" #readingNumber>
+<ng-template #readingNumber let-value="value">
     <nz-tag nzColor="purple">{{value}}</nz-tag>
 </ng-template>
 
-<ng-template let-value="value" #likeCount>
+<ng-template #likeCount let-value="value">
     <nz-tag nzColor="blue">{{value}}</nz-tag>
 </ng-template>
 
-<ng-template let-value="value" #dislikeCount>
+<ng-template #dislikeCount let-value="value">
     <nz-tag nzColor="magenta">{{value}}</nz-tag>
 </ng-template>
 
 <ng-template #open let-value="value">
-    <label nz-checkbox nzDisabled [ngModel]="value"></label>
+    <label [ngModel]="value" nz-checkbox nzDisabled></label>
 </ng-template>

src/app/view/admin/admin-article/admin-article.component.ts

@@ -1,5 +1,5 @@
 import {Component, OnInit, ViewChild} from '@angular/core';
-import {NzMessageService} from 'ng-zorro-antd';
+import {NzMessageService} from 'ng-zorro-antd/message';
 import {ApiService} from '../../../api/api.service';
 import {RequestObj} from '../../../class/HttpReqAndResp';
 import {Article} from '../../../class/Article';
@@ -14,6 +14,10 @@ import {Router} from '@angular/router';
 })
 export class AdminArticleComponent implements OnInit {
 
+    @ViewChild('commonTableComponent') private commonTableComponent: CommonTableComponent<Article>;
+    request: RequestObj;
+    headData: Data<Article>[];
+
     constructor(private apiService: ApiService, private nzMessage: NzMessageService, private title: Title,
                 private router: Router) {
         this.request = {
@@ -23,15 +27,11 @@ export class AdminArticleComponent implements OnInit {
                 page: 1,
                 count: 10
             }
+        };
     }
-    }
-
-    request: RequestObj;
-    headData: Data<Article>[]
-    @ViewChild('commonTableComponent') private commonTableComponent: CommonTableComponent<Article>
 
     ngOnInit(): void {
-        this.title.setTitle('小海博客 | 文章管理')
+        this.title.setTitle('小海博客 | 文章管理');
         this.headData = [
             {title: '主键', fieldValue: 'id', show: false, primaryKey: true},
             {title: '标题', fieldValue: 'title', show: true},
@@ -54,18 +54,18 @@ export class AdminArticleComponent implements OnInit {
                     {name: '编辑', color: '#2db7f5', click: (d) => this.router.navigateByUrl(`/write?id=${d.id}`)},
                 ]
             }
-        ]
+        ];
     }
 
     deleteArticle(article: Article) {
         this.apiService.deleteArticle(article.id).subscribe({
             next: data => {
-                this.nzMessage.success('删除成功')
+                this.nzMessage.success('删除成功');
                 this.commonTableComponent.getData();
             },
             error: err => {
-                this.nzMessage.error(err.msg)
+                this.nzMessage.error(err.msg);
             }
-        })
+        });
     }
 }

src/app/view/admin/admin-article/admin-article.module.ts

@@ -4,7 +4,8 @@ import {RouterModule} from '@angular/router';
 import {AdminArticleComponent} from './admin-article.component';
 import {CommonTableModule} from '../components/common-table/common-table.module';
 import {FormsModule} from '@angular/forms';
-import {NzCheckboxModule, NzTagModule} from 'ng-zorro-antd';
+import {NzCheckboxModule} from 'ng-zorro-antd/checkbox';
+import {NzTagModule} from 'ng-zorro-antd/tag';
 
 @NgModule({
     declarations: [

src/app/view/admin/admin-comment/admin-comment.component.html

@@ -1,44 +1,44 @@
 <common-table #commonTableComponent
-              [request]="request"
               [headData]="headData"
-              cardTitle="评论管理"
+              [request]="request"
-              [template]="{status:{temp:status,param:{'0':' 正常 ','3':'已删除'}},content:{temp:content}}">
+              [template]="{status:{temp:status,param:{'0':' 正常 ','3':'已删除'}},content:{temp:content}}"
+              cardTitle="评论管理">
 </common-table>
 
-<ng-template let-originValue="originValue" let-value="value" #status>
+<ng-template #status let-originValue="originValue" let-value="value">
-    <nz-tag nzColor="geekblue" *ngIf="originValue==0">{{value}}</nz-tag>
+    <nz-tag *ngIf="originValue==0" nzColor="geekblue">{{value}}</nz-tag>
-    <nz-tag nzColor="#f50" *ngIf="originValue==3">{{value}}</nz-tag>
+    <nz-tag *ngIf="originValue==3" nzColor="#f50">{{value}}</nz-tag>
 </ng-template>
 
-<ng-template #content let-value="value" let-data="data">
+<ng-template #content let-data="data" let-value="value">
     <editable-tag #editableTagComponent
+                  (modalOK)="textChange($event,data)"
                   [key]="data.id"
                   [showBorder]="false"
-                  [text]="value"
                   [showConfirmModal]="true"
-                  (modalOK)="textChange($event,data)">
+                  [text]="value">
     </editable-tag>
 </ng-template>
 
-<nz-modal nzTitle="查看" [nzClosable]="true" [(nzVisible)]="modalData.visible" (nzOnOk)="modalData.visible=false"
+<nz-modal (nzOnOk)="modalData.visible=false" [(nzVisible)]="modalData.visible" [nzCancelText]="null" [nzClosable]="true"
-          [nzCancelText]="null">
+          nzTitle="查看">
     <ng-template #commentTemplateRef let-comment="comment">
         <nz-comment [nzAuthor]="comment && comment.fromUser.displayName" [nzDatetime]="comment&&comment.date">
-            <nz-avatar nz-comment-avatar nzIcon="user"
+            <nz-avatar [nzSrc]="comment && comment.fromUser && comment.fromUser.avatarImgUrl" nz-comment-avatar
-                       [nzSrc]="comment && comment.fromUser && comment.fromUser.avatarImgUrl"></nz-avatar>
+                       nzIcon="user"></nz-avatar>
             <nz-comment-content>
                 <p>{{ comment && comment.content }}</p>
             </nz-comment-content>
             <!--            <nz-comment-action>Reply to</nz-comment-action>-->
             <ng-container *ngIf="comment&&comment.children && comment.children.length">
-                <ng-template ngFor let-child [ngForOf]="comment&&comment.children">
+                <ng-template [ngForOf]="comment&&comment.children" let-child ngFor>
-                    <ng-template [ngTemplateOutlet]="commentTemplateRef" [ngTemplateOutletContext]="{ comment: child }">
+                    <ng-template [ngTemplateOutletContext]="{ comment: child }" [ngTemplateOutlet]="commentTemplateRef">
                     </ng-template>
                 </ng-template>
             </ng-container>
         </nz-comment>
     </ng-template>
 
-    <ng-template [ngTemplateOutlet]="commentTemplateRef" [ngTemplateOutletContext]="{ comment: modalData.comment }">
+    <ng-template [ngTemplateOutletContext]="{ comment: modalData.comment }" [ngTemplateOutlet]="commentTemplateRef">
     </ng-template>
 </nz-modal>

src/app/view/admin/admin-comment/admin-comment.component.ts

@@ -1,5 +1,5 @@
 import {Component, OnInit, ViewChild} from '@angular/core';
-import {NzMessageService} from 'ng-zorro-antd';
+import {NzMessageService} from 'ng-zorro-antd/message';
 import {ApiService} from '../../../api/api.service';
 import {RequestObj} from '../../../class/HttpReqAndResp';
 import {Comment, CommentReq} from '../../../class/Comment';
@@ -15,17 +15,30 @@ import {CommonTableComponent} from '../components/common-table/common-table.comp
 })
 export class AdminCommentComponent implements OnInit {
 
+    @ViewChild('editableTagComponent') editableTagComponent: EditableTagComponent;
+    @ViewChild('commonTableComponent') commonTableComponent: CommonTableComponent<Comment>;
+    request: RequestObj;
+    editInfo = {
+        id: null,
+        content: new CommentReq(null),
+    };
+    headData: Data<Comment>[];
+    modalData = {
+        visible: false,
+        comment: null
+    };
+
     constructor(private apiService: ApiService, private  messageService: NzMessageService, private userService: GlobalUserService,
                 private title: Title) {
-        this.title.setTitle('小海博客 | 评论管理')
+        this.title.setTitle('小海博客 | 评论管理');
         this.userService.watchUserInfo({
             next: data => {
                 let pathStr;
                 if (data.result) {
                     if (data.result.role === 'admin') {
-                        pathStr = '/admin/comment/pagePath/*'
+                        pathStr = '/admin/comment/pagePath/*';
                     } else {
-                        pathStr = '/user/comment/pagePath/*'
+                        pathStr = '/user/comment/pagePath/*';
                     }
                     this.request = {
                         path: pathStr,
@@ -34,27 +47,14 @@ export class AdminCommentComponent implements OnInit {
                             page: 1,
                             count: 10
                         }
-                    }
+                    };
                 }
             },
             error: () => null,
             complete: () => null
-        })
+        });
     }
 
-    request: RequestObj;
-    editInfo = {
-        id: null,
-        content: new CommentReq(null),
-    }
-    headData: Data<Comment>[];
-    modalData = {
-        visible: false,
-        comment: null
-    }
-    @ViewChild('editableTagComponent') editableTagComponent: EditableTagComponent;
-    @ViewChild('commonTableComponent') commonTableComponent: CommonTableComponent<Comment>;
-
     ngOnInit(): void {
         this.headData = [
             {title: '主键', fieldValue: 'id', show: false, primaryKey: true},
@@ -74,7 +74,7 @@ export class AdminCommentComponent implements OnInit {
                     {
                         name: '查看',
                         click: data => {
-                            this.modalData.visible = true
+                            this.modalData.visible = true;
                             this.modalData.comment = data;
                         }
                     },
@@ -88,13 +88,13 @@ export class AdminCommentComponent implements OnInit {
     deleteComment(data: Comment) {
         if (data.status === 3) {
             this.messageService.error('该数据已被删除');
-            return
+            return;
         }
         this.apiService.deleteComment(data.id).subscribe({
             next: () => this.messageService.success('删除评论成功'),
             error: err => this.messageService.error(err.msg),
             complete: () => this.commonTableComponent.getData()
-        })
+        });
     }
 
     edit() {
@@ -106,7 +106,7 @@ export class AdminCommentComponent implements OnInit {
                 this.messageService.success(err.msg);
             },
             complete: () => null
-        })
+        });
     }
 
     textChange(value: { value: string; originalValue: string; changed: boolean }, data: Comment) {
@@ -115,7 +115,7 @@ export class AdminCommentComponent implements OnInit {
             this.editInfo.content.pid = data.pid;
             this.editInfo.content.id = data.id;
             this.editInfo.content.content = value.value;
-            this.edit()
+            this.edit();
         }
     }
 }

src/app/view/admin/admin-comment/admin-comment.module.ts

@@ -3,7 +3,10 @@ import {CommonModule} from '@angular/common';
 import {RouterModule} from '@angular/router';
 import {AdminCommentComponent} from './admin-comment.component';
 import {CommonTableModule} from '../components/common-table/common-table.module';
-import {NzAvatarModule, NzCommentModule, NzModalModule, NzTagModule} from 'ng-zorro-antd';
+import {NzAvatarModule} from 'ng-zorro-antd/avatar';
+import {NzCommentModule} from 'ng-zorro-antd/comment';
+import {NzModalModule} from 'ng-zorro-antd/modal';
+import {NzTagModule} from 'ng-zorro-antd/tag';
 import {EditableTagModule} from '../components/editable-tag/editable-tag.module';
 
 

src/app/view/admin/admin-dashboard/admin-dashboard.component.html

@@ -1,6 +1,6 @@
 <div *ngIf="userInfo&&userInfo.role==='admin'">
     <div nz-row>
-        <nz-card nzTitle="统计" nz-col nzXs="24" nzSm="12" nzSize="small">
+        <nz-card nz-col nzSize="small" nzSm="12" nzTitle="统计" nzXs="24">
             <nz-row [nzGutter]="24">
                 <nz-col [nzSpan]="6">
                     <nz-statistic [nzValue]="(counts.articleCount | number)!" nzTitle="文章数量"></nz-statistic>
@@ -16,7 +16,7 @@
                 </nz-col>
             </nz-row>
         </nz-card>
-        <nz-card nzTitle="信息" nz-col nzXs="24" [nzSm]="{span:11,offset:1}" nzSize="small">
+        <nz-card [nzSm]="{span:11,offset:1}" nz-col nzSize="small" nzTitle="信息" nzXs="24">
             <nz-row [nzGutter]="24">
                 <nz-col [nzSpan]="8">
                     <nz-statistic [nzValue]="(counts.visitorCount | number)!" nzTitle="总访问量"></nz-statistic>
@@ -32,9 +32,9 @@
         </nz-card>
     </div>
     <div nz-row>
-        <nz-card style="width: 100%" nzSize="small" nzTitle="日志" [nzExtra]="reload">
+        <nz-card [nzExtra]="reload" nzSize="small" nzTitle="日志" style="width: 100%">
             <ng-template #reload>
-                <a (click)="getLog()" title="刷新"><i nz-icon nzType="reload" nzTheme="outline"></i></a>
+                <a (click)="getLog()" title="刷新"><i nz-icon nzTheme="outline" nzType="reload"></i></a>
             </ng-template>
             <nz-spin [nzSpinning]="logLoading" style="width: 100%;">
                 <pre style="width: 100%;max-height: 500px;overflow: auto;">{{logText}}</pre>
@@ -44,11 +44,11 @@
 </div>
 <div *ngIf="userInfo&&userInfo.role==='user'">
     <div nz-row>
-        <nz-card nzTitle="信息" nz-col nzXs="24" [nzMd]="{span:11}" [nzXl]="{span:6,offset:1}" nzSize="small">
+        <nz-card [nzMd]="{span:11}" [nzXl]="{span:6,offset:1}" nz-col nzSize="small" nzTitle="信息" nzXs="24">
             <nz-statistic [nzValue]="userInfo.recentlyLandedDate?userInfo.recentlyLandedDate:''"
                           nzTitle="上次登录"></nz-statistic>
         </nz-card>
-        <nz-card nzTitle="关于此博客" nzSize="small" nz-col nzXs="24" [nzMd]="{span:11,offset:2}" [nzXl]="{span:6,offset:2}">
+        <nz-card [nzMd]="{span:11,offset:2}" [nzXl]="{span:6,offset:2}" nz-col nzSize="small" nzTitle="关于此博客" nzXs="24">
             <p>此博客由 <a href="https://github.com/xiaohai2271" target="_blank">禾几海(郑海)</a> 设计并实现的</p>
             <p>博客自2019年3月开始开发编写 5月开始正式运行至今</p>
             <p>博客所有代码都是开源的，你可以随意修改，运行和发布</p>
@@ -59,7 +59,7 @@
             </p>
             <p>如果觉得博客还不错，请前往Github支持我，给我点一个star吧</p>
         </nz-card>
-        <nz-card nz-col nzXs="24" [nzMd]="{span:12,offset:6}" [nzXl]="{span:6,offset:2}">
+        <nz-card [nzMd]="{span:12,offset:6}" [nzXl]="{span:6,offset:2}" nz-col nzXs="24">
             <p style="font-style: italic">坚强的信心，能使平凡的人做出惊人的事业。</p>
             <p style="text-align: right"> ——马尔顿</p>
         </nz-card>

src/app/view/admin/admin-dashboard/admin-dashboard.component.ts

@@ -11,47 +11,46 @@ import {Title} from '@angular/platform-browser';
     styleUrls: ['./admin-dashboard.component.less']
 })
 export class AdminDashboardComponent implements OnInit {
+    logLoading: boolean = true;
+    logText: string = null;
+    counts: {
+        articleCount: number;
+        visitorCount: number;
+        categoryCount: number;
+        tagCount: number;
+        commentCount: number;
+    } = {articleCount: 0, visitorCount: 0, categoryCount: 0, tagCount: 0, commentCount: 0};
+    dayVisitCount: number = 0;
+    userInfo: User = new User();
+    private isRequested: boolean = false;
+
     constructor(private apiService: ApiService, private userService: GlobalUserService, private http: HttpClient,
                 private title: Title) {
         this.title.setTitle('小海博客 | 后台管理');
         this.getUserInfo();
     }
 
-    logLoading: boolean = true;
-    logText: string = null;
-    counts: {
-        articleCount: number,
-        visitorCount: number,
-        categoryCount: number,
-        tagCount: number,
-        commentCount: number
-    } = {articleCount: 0, visitorCount: 0, categoryCount: 0, tagCount: 0, commentCount: 0}
-
-    dayVisitCount: number = 0;
-    userInfo: User = new User();
-    private isRequested: boolean = false;
-
     ngOnInit(): void {
     }
 
     getLog() {
         this.http.get('https://api.celess.cn/blog.log', {responseType: 'text'}).subscribe(data => {
             this.logText = data;
-            this.logLoading = false
+            this.logLoading = false;
         });
     }
 
     getCounts = () => this.apiService.counts().subscribe({
         next: data => this.counts = data.result
-    })
+    });
 
     getDayVisitCount = () => this.apiService.dayVisitCount().subscribe({
         next: data => this.dayVisitCount = data.result
-    })
+    });
 
     getUserInfo = () => this.userService.watchUserInfo({
         next: data => {
-            this.userInfo = data.result
+            this.userInfo = data.result;
             if (data.result && data.result.role === 'admin' && !this.isRequested) {
                 this.getLog();
                 this.getCounts();
@@ -61,5 +60,5 @@ export class AdminDashboardComponent implements OnInit {
         },
         error: () => null,
         complete: () => null
-    })
+    });
 }

src/app/view/admin/admin-dashboard/admin-dashboard.module.ts

@@ -2,15 +2,13 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {AdminDashboardComponent} from './admin-dashboard.component';
 import {RouterModule} from '@angular/router';
-import {
+import {NzButtonModule} from 'ng-zorro-antd/button';
-    NzButtonModule,
+import {NzCardModule} from 'ng-zorro-antd/card';
-    NzCardModule,
+import {NzDividerModule} from 'ng-zorro-antd/divider';
-    NzDividerModule,
+import {NzGridModule} from 'ng-zorro-antd/grid';
-    NzGridModule,
+import {NzIconModule} from 'ng-zorro-antd/icon';
-    NzIconModule,
+import {NzSpinModule} from 'ng-zorro-antd/spin';
-    NzSpinModule,
+import {NzStatisticModule} from 'ng-zorro-antd/statistic';
-    NzStatisticModule
-} from 'ng-zorro-antd';
 
 
 @NgModule({

src/app/view/admin/admin-link/admin-link.component.html

@@ -1,34 +1,34 @@
 <common-table #commonTableComponent
-              cardTitle="友链管理"
-              [request]="request"
               [headData]="headData"
+              [request]="request"
               [template]="{open:{temp:open,param:{true:'可见',false:'不可见'}},delete:{temp:deleteTemp,param:{true:'已删除',false:'未删除'}}}"
+              cardTitle="友链管理"
 >
-    <button nz-button (click)="addLink()">添加</button>
+    <button (click)="addLink()" nz-button>添加</button>
 </common-table>
 
 <ng-template #open let-value="value">
-    <label nz-checkbox nzDisabled [ngModel]="value"></label>
+    <label [ngModel]="value" nz-checkbox nzDisabled></label>
 </ng-template>
 
-<ng-template let-value="value" let-originValue="originValue" #deleteTemp>
+<ng-template #deleteTemp let-originValue="originValue" let-value="value">
-    <nz-tag [nzColor]="'blue'" *ngIf="originValue=='false'">{{value}}</nz-tag>
+    <nz-tag *ngIf="originValue=='false'" [nzColor]="'blue'">{{value}}</nz-tag>
-    <nz-tag [nzColor]="'#ff5500'" *ngIf="originValue!='false'">{{value}}</nz-tag>
+    <nz-tag *ngIf="originValue!='false'" [nzColor]="'#ff5500'">{{value}}</nz-tag>
 </ng-template>
 
-<nz-modal [(nzVisible)]="modalVisible" [nzTitle]="modalTitle" (nzOnOk)="modalConfirm()"
+<nz-modal (nzOnCancel)="modalVisible = false" (nzOnOk)="modalConfirm()" [(nzVisible)]="modalVisible"
-          (nzOnCancel)="modalVisible = false" [nzClosable]="true" [nzOkDisabled]="!formGroup.valid">
+          [nzClosable]="true" [nzOkDisabled]="!formGroup.valid" [nzTitle]="modalTitle">
-    <form nz-form [formGroup]="formGroup">
+    <form [formGroup]="formGroup" nz-form>
         <nz-form-item>
             <nz-form-label nzFlex="80px" nzRequired>网站名称</nz-form-label>
-            <nz-form-control nzFlex="auto" nzErrorTip="网站名称不可为空">
+            <nz-form-control nzErrorTip="网站名称不可为空" nzFlex="auto">
-                <input nz-input formControlName="name">
+                <input formControlName="name" nz-input>
             </nz-form-control>
         </nz-form-item>
         <nz-form-item>
             <nz-form-label nzFlex="80px" nzRequired>网站链接</nz-form-label>
-            <nz-form-control nzFlex="auto" [nzErrorTip]="nameErrTip">
+            <nz-form-control [nzErrorTip]="nameErrTip" nzFlex="auto">
-                <input nz-input formControlName="url">
+                <input formControlName="url" nz-input>
                 <ng-template #nameErrTip>
                     <div *ngIf="formGroup.controls.url.hasError('required')">网站链接不可为空</div>
                     <div *ngIf="formGroup.controls.url.hasError('pattern')">网站链接格式不正确</div>
@@ -38,8 +38,8 @@
         </nz-form-item>
         <nz-form-item>
             <nz-form-label nzFlex="80px" nzRequired>是否公开</nz-form-label>
-            <nz-form-control nzFlex="auto" nzErrorTip="不可为空">
+            <nz-form-control nzErrorTip="不可为空" nzFlex="auto">
-                <nz-select nzPlaceHolder="请选择" formControlName="open" [nzAllowClear]="true">
+                <nz-select [nzAllowClear]="true" formControlName="open" nzPlaceHolder="请选择">
                     <nz-option [nzValue]="true" nzLabel="公开"></nz-option>
                     <nz-option [nzValue]="false" nzLabel="不公开"></nz-option>
                 </nz-select>
@@ -47,20 +47,20 @@
         </nz-form-item>
         <nz-form-item>
             <nz-form-label nzFlex="80px">网站图标</nz-form-label>
-            <nz-form-control nzFlex="auto" nzErrorTip="链接格式不正确">
+            <nz-form-control nzErrorTip="链接格式不正确" nzFlex="auto">
                 <nz-input-group [nzSuffix]="icon" nzSize="large">
-                    <input nz-input formControlName="iconPath">
+                    <input formControlName="iconPath" nz-input>
                 </nz-input-group>
                 <ng-template #icon>
-                    <img style="width: 25px;height: 25px" *ngIf="formGroup.value.iconPath"
+                    <img *ngIf="formGroup.value.iconPath" [src]="formGroup.value.iconPath"
-                         [src]="formGroup.value.iconPath" alt="icon">
+                         alt="icon" style="width: 25px;height: 25px">
                 </ng-template>
             </nz-form-control>
         </nz-form-item>
         <nz-form-item>
             <nz-form-label nzFlex="80px">网站描述</nz-form-label>
-            <nz-form-control nzFlex="auto" nzErrorTip="可输入最大文字长度为255">
+            <nz-form-control nzErrorTip="可输入最大文字长度为255" nzFlex="auto">
-                <textarea nz-input formControlName="desc" [nzAutosize]="{ minRows: 2, maxRows: 6 }"></textarea>
+                <textarea [nzAutosize]="{ minRows: 2, maxRows: 6 }" formControlName="desc" nz-input></textarea>
             </nz-form-control>
         </nz-form-item>
 

src/app/view/admin/admin-link/admin-link.component.ts

@@ -2,8 +2,8 @@ import {Component, OnInit, ViewChild} from '@angular/core';
 import {RequestObj, Response} from '../../../class/HttpReqAndResp';
 import {Link} from '../../../class/Link';
 import {ApiService} from '../../../api/api.service';
-import {NzMessageService} from 'ng-zorro-antd';
+import {NzMessageService} from 'ng-zorro-antd/message';
-import {FormControl, FormGroup, Validators} from '@angular/forms';
+import {UntypedFormControl, UntypedFormGroup, Validators} from '@angular/forms';
 import {Observable} from 'rxjs';
 import {Title} from '@angular/platform-browser';
 import {CommonTableComponent} from '../components/common-table/common-table.component';
@@ -15,27 +15,33 @@ import {Data} from '../components/common-table/data';
 })
 export class AdminLinkComponent implements OnInit {
 
-    constructor(private apiService: ApiService, private messageService: NzMessageService, private title: Title) {
+    @ViewChild('commonTableComponent') commonTableComponent: CommonTableComponent<Link>;
-        this.title.setTitle('小海博客 | 友链管理');
-        this.formGroup = new FormGroup({
-            id: new FormControl(null),
-            name: new FormControl(null, [Validators.required]),
-            url: new FormControl(null, [Validators.required, Validators.pattern(/^(https:\/\/|http:\/\/|)([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?$/)]),
-            open: new FormControl(null, [Validators.required]),
-            desc: new FormControl(null, [Validators.maxLength(255)]),
-            iconPath: new FormControl(null, [Validators.pattern(/^(https:\/\/|http:\/\/|)([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?$/)]),
-            oper: new FormControl(null)
-        })
-    }
-
-
     modalVisible: boolean = false;
     modalTitle: string = '';
-    formGroup: FormGroup;
+    formGroup: UntypedFormGroup;
     request: RequestObj;
-    @ViewChild('commonTableComponent') commonTableComponent: CommonTableComponent<Link>
     headData: Data<Link>[];
 
+    constructor(private apiService: ApiService, private messageService: NzMessageService, private title: Title) {
+        this.title.setTitle('小海博客 | 友链管理');
+        this.formGroup = new UntypedFormGroup({
+            id: new UntypedFormControl(null),
+            name: new UntypedFormControl(null, [Validators.required]),
+            url: new UntypedFormControl(null, [
+                    Validators.required,
+                    Validators.pattern(/^(https:\/\/|http:\/\/|)([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?$/)
+                ]
+            ),
+            open: new UntypedFormControl(null, [Validators.required]),
+            desc: new UntypedFormControl(null, [Validators.maxLength(255)]),
+            iconPath: new UntypedFormControl(null, [
+                    Validators.pattern(/^(https:\/\/|http:\/\/|)([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?$/)
+                ]
+            ),
+            oper: new UntypedFormControl(null)
+        });
+    }
+
     ngOnInit(): void {
         this.request = {
             path: '/admin/links',
@@ -44,7 +50,7 @@ export class AdminLinkComponent implements OnInit {
                 count: 10,
                 page: 1
             }
-        }
+        };
         this.headData = [
             {title: '主键', fieldValue: 'id', show: false, primaryKey: true},
             {title: '友链名称', fieldValue: 'name', show: true},
@@ -73,19 +79,19 @@ export class AdminLinkComponent implements OnInit {
                 this.messageService.error('删除失败');
             },
             complete: () => null,
-        })
+        });
     }
 
     showEdit(data: Link) {
         this.modalVisible = true;
         this.modalTitle = '编辑友链信息';
         this.formGroup.patchValue(data);
-        this.formGroup.controls.oper.setValue('edit')
+        this.formGroup.controls.oper.setValue('edit');
     }
 
     modalConfirm() {
         this.modalVisible = false;
-        const linkReq: Link = this.formGroup.value
+        const linkReq: Link = this.formGroup.value;
         const oper = this.formGroup.value.oper;
         let observable: Observable<Response<Link>>;
         if (oper === 'edit') {
@@ -98,13 +104,13 @@ export class AdminLinkComponent implements OnInit {
             next: data => this.messageService.success('操作成功'),
             error: err => this.messageService.error('操作失败,' + err.msg),
             complete: () => this.commonTableComponent.getData()
-        })
+        });
     }
 
     addLink() {
         this.modalVisible = true;
         this.modalTitle = '新增友链信息';
         this.formGroup.reset();
-        this.formGroup.controls.oper.setValue('add')
+        this.formGroup.controls.oper.setValue('add');
     }
 }

src/app/view/admin/admin-link/admin-link.module.ts

@@ -3,15 +3,13 @@ import {CommonModule} from '@angular/common';
 import {RouterModule} from '@angular/router';
 import {AdminLinkComponent} from './admin-link.component';
 import {CommonTableModule} from '../components/common-table/common-table.module';
-import {
+import {NzButtonModule} from 'ng-zorro-antd/button';
-    NzButtonModule,
+import {NzCheckboxModule} from 'ng-zorro-antd/checkbox';
-    NzCheckboxModule,
+import {NzFormModule} from 'ng-zorro-antd/form';
-    NzFormModule,
+import {NzInputModule} from 'ng-zorro-antd/input';
-    NzInputModule,
+import {NzModalModule} from 'ng-zorro-antd/modal';
-    NzModalModule,
+import {NzSelectModule} from 'ng-zorro-antd/select';
-    NzSelectModule,
+import {NzTagModule} from 'ng-zorro-antd/tag';
-    NzTagModule
-} from 'ng-zorro-antd';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 
 

src/app/view/admin/admin-tag/admin-tag.component.html

@@ -1,14 +1,14 @@
 <div class="inner-content">
-    <nz-card nzTitle="" nzSize="small">
+    <nz-card nzSize="small" nzTitle="">
         <nz-tabset [nzTabBarExtraContent]="reload">
-            <nz-tab nzTitle="分类管理" (nzClick)="tabChanged('tag')">
+            <nz-tab (nzClick)="tabChanged('tag')" nzTitle="分类管理">
                 <div style="margin-bottom: 15px;width: 150px">
-                    <editable-tag [showBorder]="false"
+                    <editable-tag (valueChange)="addCategory($event)"
-                                  [showEditIcon]="false"
-                                  [doubleClick]="false"
-                                  size="default"
                                   [autoClear]="true"
-                                  (valueChange)="addCategory($event)"
+                                  [doubleClick]="false"
+                                  [showBorder]="false"
+                                  [showEditIcon]="false"
+                                  size="default"
                     >
                         <button nz-button>新增</button>
                     </editable-tag>
@@ -19,7 +19,7 @@
                               [template]="{name:{temp:nameTemplate}}">
                 </common-table>
             </nz-tab>
-            <nz-tab nzTitle="标签管理" (nzClick)="tabChanged('category')">
+            <nz-tab (nzClick)="tabChanged('category')" nzTitle="标签管理">
                 <common-table #tagCTComponent
                               [headData]="tagCTData.headData"
                               [request]="tagCTData.request"
@@ -30,15 +30,15 @@
     </nz-card>
 </div>
 <ng-template #reload>
-    <a (click)="getData()" title="刷新"><i nz-icon nzType="reload" nzTheme="outline"></i></a>
+    <a (click)="getData()" title="刷新"><i nz-icon nzTheme="outline" nzType="reload"></i></a>
 </ng-template>
 
-<ng-template #nameTemplate let-value="value" let-data="data">
+<ng-template #nameTemplate let-data="data" let-value="value">
     <editable-tag #editableTagComponent
+                  (modalOK)="textChange($event,data)"
                   [key]="data.id"
                   [showBorder]="false"
-                  [text]="value"
                   [showConfirmModal]="true"
-                  (modalOK)="textChange($event,data)">
+                  [text]="value">
     </editable-tag>
 </ng-template>

src/app/view/admin/admin-tag/admin-tag.component.ts

@@ -1,8 +1,8 @@
 import {Component, OnInit, ViewChild} from '@angular/core';
-import {NzMessageService} from 'ng-zorro-antd';
+import {NzMessageService} from 'ng-zorro-antd/message';
 import {Category, Tag} from '../../../class/Tag';
 import {ApiService} from '../../../api/api.service';
-import {PageList, RequestObj} from '../../../class/HttpReqAndResp';
+import {RequestObj} from '../../../class/HttpReqAndResp';
 import {Title} from '@angular/platform-browser';
 import {Data} from '../components/common-table/data';
 import {CommonTableComponent} from '../components/common-table/common-table.component';
@@ -15,27 +15,28 @@ import {EditableTagComponent} from '../components/editable-tag/editable-tag.comp
 })
 export class AdminTagComponent implements OnInit {
 
+    @ViewChild('categoryCTComponent', {static: true}) categoryCTComponent: CommonTableComponent<Category>;
+    @ViewChild('tagCTComponent', {static: true}) tagCTComponent: CommonTableComponent<Tag>;
+    @ViewChild('editableTagComponent') editableTagComponent: EditableTagComponent;
+
+    categoryCTData: { headData: Data<Category>[]; commonTable: CommonTableComponent<Category>; request: RequestObj } = {
+        headData: null,
+        commonTable: null,
+        request: null
+    };
+    tagCTData: { headData: Data<Category>[]; commonTable: CommonTableComponent<Tag>; request: RequestObj } = {
+        headData: null,
+        commonTable: null,
+        request: null
+    };
+    getData: any;
+    private updateData: any;
+
     constructor(private apiService: ApiService, private nzMessageService: NzMessageService, private title: Title, private router: Router) {
     }
 
-    categoryCTData: { headData: Data<Category>[], commonTable: CommonTableComponent<Category>, request: RequestObj } = {
-        headData: null,
-        commonTable: null,
-        request: null
-    }
-    tagCTData: { headData: Data<Category>[], commonTable: CommonTableComponent<Tag>, request: RequestObj } = {
-        headData: null,
-        commonTable: null,
-        request: null
-    }
-    @ViewChild('categoryCTComponent', {static: true}) categoryCTComponent: CommonTableComponent<Category>
-    @ViewChild('tagCTComponent', {static: true}) tagCTComponent: CommonTableComponent<Tag>
-    @ViewChild('editableTagComponent') editableTagComponent: EditableTagComponent
-    private updateData: any;
-    getData: any;
-
     ngOnInit(): void {
-        this.title.setTitle('小海博客 | 标签分类管理')
+        this.title.setTitle('小海博客 | 标签分类管理');
         this.categoryCTData = {
             commonTable: this.categoryCTComponent,
             headData: [
@@ -64,7 +65,7 @@ export class AdminTagComponent implements OnInit {
                     count: 1000
                 }
             }
-        }
+        };
         this.tagCTData = {
             commonTable: this.tagCTComponent,
             headData: [
@@ -87,7 +88,7 @@ export class AdminTagComponent implements OnInit {
                     count: 10
                 }
             }
-        }
+        };
         this.getData = this.categoryCTComponent.getData;
     }
 
@@ -96,29 +97,29 @@ export class AdminTagComponent implements OnInit {
         if (mode === 'tag') {
             this.apiService.deleteTag(id).subscribe({
                 next: data => {
-                    this.nzMessageService.success('删除成功')
+                    this.nzMessageService.success('删除成功');
                     this.tagCTComponent.getData();
                 },
                 complete: () => null,
                 error: err => this.nzMessageService.error(err.msg)
-            })
+            });
         } else if (mode === 'category') {
             this.apiService.deleteCategory(id).subscribe({
                 next: data => {
-                    this.nzMessageService.success('删除成功')
+                    this.nzMessageService.success('删除成功');
                     this.categoryCTComponent.getData();
                 },
                 complete: () => null,
                 error: err => this.nzMessageService.error(err.msg)
-            })
+            });
         }
     }
 
     addCategory($event: { value: string; originalValue: string; changed: boolean }) {
-        if (!$event.value || !$event.changed) return
+        if (!$event.value || !$event.changed) {return;}
         this.apiService.createCategory($event.value).subscribe({
             next: data => {
-                this.nzMessageService.success('新增成功')
+                this.nzMessageService.success('新增成功');
                 this.getData = this.categoryCTComponent.getData();
             },
             complete: () => null,
@@ -133,14 +134,14 @@ export class AdminTagComponent implements OnInit {
             this.updateData = this.apiService.updateTag;
         } else {
             this.getData = this.tagCTComponent.getData;
-            this.updateData = this.apiService.updateCategory
+            this.updateData = this.apiService.updateCategory;
         }
     }
 
     textChange(value: { value: string; originalValue: string; changed: boolean }, textData: Category | Tag) {
         this.updateData(textData.id, value.value).subscribe({
             next: data => {
-                this.nzMessageService.success('更新成功')
+                this.nzMessageService.success('更新成功');
                 this.tagCTComponent.getData();
                 this.categoryCTComponent.getData();
             },

src/app/view/admin/admin-tag/admin-tag.module.ts

@@ -5,7 +5,10 @@ import {AdminTagComponent} from './admin-tag.component';
 import {FormsModule} from '@angular/forms';
 import {CommonTableModule} from '../components/common-table/common-table.module';
 import {EditableTagModule} from '../components/editable-tag/editable-tag.module';
-import {NzButtonModule, NzCardModule, NzIconModule, NzTabsModule} from "ng-zorro-antd";
+import {NzButtonModule} from 'ng-zorro-antd/button';
+import {NzCardModule} from 'ng-zorro-antd/card';
+import {NzIconModule} from 'ng-zorro-antd/icon';
+import {NzTabsModule} from 'ng-zorro-antd/tabs';
 
 
 @NgModule({

src/app/view/admin/admin-update/admin-update.component.html

@@ -1,8 +1,8 @@
-<common-table [request]="request" [headData]="headData" cardTitle="更新管理">
+<common-table [headData]="headData" [request]="request" cardTitle="更新管理">
-    <button nz-button (click)="showModal()">新增</button>
+    <button (click)="showModal()" nz-button>新增</button>
 </common-table>
 
-<nz-modal [(nzVisible)]="modalData.visible" [nzClosable]="true" (nzOnCancel)="modalData.visible = false"
+<nz-modal (nzOnCancel)="modalData.visible = false" (nzOnOk)="confirm()" [(nzVisible)]="modalData.visible"
-          (nzOnOk)="confirm()" [nzTitle]="modalData.title">
+          [nzClosable]="true" [nzTitle]="modalData.title">
-    <textarea nz-input [(ngModel)]="modalData.content" [nzAutosize]="{ minRows: 2, maxRows: 8 }"></textarea>
+    <textarea [(ngModel)]="modalData.content" [nzAutosize]="{ minRows: 2, maxRows: 8 }" nz-input></textarea>
 </nz-modal>

src/app/view/admin/admin-update/admin-update.component.ts

@@ -1,9 +1,9 @@
 import {Component, OnInit} from '@angular/core';
-import {NzMessageService} from 'ng-zorro-antd';
+import {NzMessageService} from 'ng-zorro-antd/message';
 import {Title} from '@angular/platform-browser';
 import {Observable} from 'rxjs';
 import {ApiService} from '../../../api/api.service';
-import {PageList, RequestObj, Response} from '../../../class/HttpReqAndResp';
+import {RequestObj, Response} from '../../../class/HttpReqAndResp';
 import {UpdateInfo} from '../../../class/UpdateInfo';
 import {Data} from '../components/common-table/data';
 
@@ -14,9 +14,6 @@ import {Data} from '../components/common-table/data';
 export class AdminUpdateComponent implements OnInit {
 
 
-    constructor(private apiService: ApiService, private nzMessage: NzMessageService, private title: Title) {
-    }
-
     modalData = {
         visible: false,
         content: null,
@@ -26,8 +23,11 @@ export class AdminUpdateComponent implements OnInit {
     headData: Data<UpdateInfo>[];
     request: RequestObj;
 
+    constructor(private apiService: ApiService, private nzMessage: NzMessageService, private title: Title) {
+    }
+
     ngOnInit(): void {
-        this.title.setTitle('小海博客 | 更新信息管理')
+        this.title.setTitle('小海博客 | 更新信息管理');
         this.headData = [
             {fieldValue: 'id', show: false, title: '主键', primaryKey: true},
             {fieldValue: 'info', show: true, title: '更新内容'},
@@ -46,7 +46,7 @@ export class AdminUpdateComponent implements OnInit {
                 count: 1,
                 page: 10,
             }
-        }
+        };
     }
 
 
@@ -54,21 +54,21 @@ export class AdminUpdateComponent implements OnInit {
         this.apiService.deleteWebUpdateInfo(id).subscribe({
             next: data => this.nzMessage.success('删除成功'),
             error: err => this.nzMessage.error(err.msg)
-        })
+        });
     }
 
     confirm() {
         this.modalData.visible = false;
-        let observable: Observable<Response<UpdateInfo>>
+        let observable: Observable<Response<UpdateInfo>>;
         if (this.modalData.id) {
-            observable = this.apiService.updateWebUpdateInfo(this.modalData.id, this.modalData.content)
+            observable = this.apiService.updateWebUpdateInfo(this.modalData.id, this.modalData.content);
         } else {
-            observable = this.apiService.createWebUpdateInfo(this.modalData.content)
+            observable = this.apiService.createWebUpdateInfo(this.modalData.content);
         }
         observable.subscribe({
             next: data => this.nzMessage.success('操作成功'),
             error: err => this.nzMessage.error(err.msg)
-        })
+        });
     }
 
     showModal(data?: UpdateInfo) {

src/app/view/admin/admin-update/admin-update.module.ts

@@ -5,7 +5,9 @@ import {AdminUpdateComponent} from './admin-update.component';
 
 import {FormsModule} from '@angular/forms';
 import {CommonTableModule} from '../components/common-table/common-table.module';
-import {NzButtonModule, NzInputModule, NzModalModule} from 'ng-zorro-antd';
+import {NzButtonModule} from 'ng-zorro-antd/button';
+import {NzInputModule} from 'ng-zorro-antd/input';
+import {NzModalModule} from 'ng-zorro-antd/modal';
 
 
 @NgModule({

src/app/view/admin/admin-user/admin-user.component.html

@@ -1,56 +1,56 @@
 <common-table [headData]="headData"
               [request]="request"
-              cardTitle="用户信息管理"
               [template]="{role:{temp:role},emailStatus:{temp:emailStatus,param:{true:'已验证',false:'未验证'}}}"
+              cardTitle="用户信息管理"
 >
 </common-table>
-<ng-template let-value="value" #role>
+<ng-template #role let-value="value">
-    <nz-tag [nzColor]="'blue'" *ngIf="value == 'admin'">{{value}}</nz-tag>
+    <nz-tag *ngIf="value == 'admin'" [nzColor]="'blue'">{{value}}</nz-tag>
-    <nz-tag [nzColor]="'purple'" *ngIf="value == 'user'">{{value}}</nz-tag>
+    <nz-tag *ngIf="value == 'user'" [nzColor]="'purple'">{{value}}</nz-tag>
 </ng-template>
-<ng-template let-value="value" let-originValue="originValue" #emailStatus>
+<ng-template #emailStatus let-originValue="originValue" let-value="value">
-    <nz-tag [nzColor]="'green'" *ngIf="originValue !='false'">{{value}}</nz-tag>
+    <nz-tag *ngIf="originValue !='false'" [nzColor]="'green'">{{value}}</nz-tag>
-    <nz-tag [nzColor]="'red'" *ngIf="originValue !='true'">{{value}}</nz-tag>
+    <nz-tag *ngIf="originValue !='true'" [nzColor]="'red'">{{value}}</nz-tag>
 </ng-template>
 
-<nz-modal [(nzVisible)]="modalData.visible" [nzClosable]="true" [nzTitle]="modalData.title"
+<nz-modal (nzOnCancel)="modalData.visible = false" (nzOnOk)="modalConfirm()" [(nzVisible)]="modalData.visible"
-          (nzOnCancel)="modalData.visible = false" (nzOnOk)="modalConfirm()"
+          [nzClosable]="true" [nzContent]="showContent"
           [nzFooter]="modalData.isEdit?editContentFooter:showContentFooter"
-          [nzContent]="showContent">
+          [nzTitle]="modalData.title">
     <ng-template #showContent>
-        <form nz-form [formGroup]="formGroup" (ngSubmit)="modalConfirm()">
+        <form (ngSubmit)="modalConfirm()" [formGroup]="formGroup" nz-form>
             <nz-form-item>
-                <nz-form-label nzSpan="4" nzRequired>邮箱</nz-form-label>
+                <nz-form-label nzRequired nzSpan="4">邮箱</nz-form-label>
                 <nz-form-control nzSpan="18">
-                    <input type="email" nz-input formControlName="email"
+                    <input [disabled]="!modalData.isEdit" formControlName="email" nz-input
-                           [disabled]="!modalData.isEdit">
+                           type="email">
                 </nz-form-control>
             </nz-form-item>
 
             <nz-form-item>
-                <nz-form-label nzSpan="4" nzRequired>昵称</nz-form-label>
+                <nz-form-label nzRequired nzSpan="4">昵称</nz-form-label>
                 <nz-form-control nzSpan="18">
-                    <input type="text" nz-input formControlName="displayName" [disabled]="!modalData.isEdit">
+                    <input [disabled]="!modalData.isEdit" formControlName="displayName" nz-input type="text">
                 </nz-form-control>
             </nz-form-item>
 
 
             <nz-form-item>
-                <nz-form-label nzSpan="4" nzRequired>角色</nz-form-label>
+                <nz-form-label nzRequired nzSpan="4">角色</nz-form-label>
                 <nz-form-control nzSpan="18">
-                    <nz-select formControlName="role" [nzDisabled]="!modalData.isEdit||formGroup.value.id==user.id">
+                    <nz-select [nzDisabled]="!modalData.isEdit||formGroup.value.id==user.id" formControlName="role">
-                        <nz-option nzValue="admin" nzLabel="admin"></nz-option>
+                        <nz-option nzLabel="admin" nzValue="admin"></nz-option>
-                        <nz-option nzValue="user" nzLabel="user"></nz-option>
+                        <nz-option nzLabel="user" nzValue="user"></nz-option>
                     </nz-select>
                 </nz-form-control>
             </nz-form-item>
 
             <nz-form-item>
-                <nz-form-label nzSpan="4" nzRequired>状态</nz-form-label>
+                <nz-form-label nzRequired nzSpan="4">状态</nz-form-label>
                 <nz-form-control nzSpan="18">
-                    <nz-radio-group formControlName="emailStatus" [nzDisabled]="!modalData.isEdit">
+                    <nz-radio-group [nzDisabled]="!modalData.isEdit" formControlName="emailStatus">
-                        <label nz-radio [nzValue]="true">邮箱已验证</label>
+                        <label [nzValue]="true" nz-radio>邮箱已验证</label>
-                        <label nz-radio [nzValue]="false">邮箱未验证</label>
+                        <label [nzValue]="false" nz-radio>邮箱未验证</label>
                     </nz-radio-group>
                 </nz-form-control>
             </nz-form-item>
@@ -58,14 +58,14 @@
             <nz-form-item *ngIf="modalData.isEdit">
                 <nz-form-label nzSpan="4">密码</nz-form-label>
                 <nz-form-control nzSpan="18">
-                    <a *ngIf="!modalData.resetPwd" (click)="modalData.resetPwd = true">
+                    <a (click)="modalData.resetPwd = true" *ngIf="!modalData.resetPwd">
-                        重设密码<i nz-icon nzType="edit" nzTheme="twotone" style="margin-left: 10px;"></i>
+                        重设密码<i nz-icon nzTheme="twotone" nzType="edit" style="margin-left: 10px;"></i>
                     </a>
                     <nz-input-group *ngIf="modalData.resetPwd" [nzSuffix]="cancelBtn" nzSize="small">
-                        <input type="password" nz-input formControlName="pwd" autocomplete="new-password"
+                        <input [disabled]="!modalData.isEdit" autocomplete="new-password" formControlName="pwd" nz-input
-                               [disabled]="!modalData.isEdit">
+                               type="password">
                         <ng-template #cancelBtn>
-                            <button nz-button (click)="modalData.resetPwd = false" nzSize="small" nzType="link">取消
+                            <button (click)="modalData.resetPwd = false" nz-button nzSize="small" nzType="link">取消
                             </button>
                         </ng-template>
                     </nz-input-group>
@@ -75,20 +75,20 @@
             <nz-form-item>
                 <nz-form-label nzSpan="4">描述</nz-form-label>
                 <nz-form-control nzSpan="18">
-                    <textarea nz-input [nzAutosize]="{ minRows: 2, maxRows: 4 }" formControlName="desc"
+                    <textarea [disabled]="!modalData.isEdit" [nzAutosize]="{ minRows: 2, maxRows: 4 }" formControlName="desc"
-                              [disabled]="!modalData.isEdit"></textarea>
+                              nz-input></textarea>
                 </nz-form-control>
             </nz-form-item>
         </form>
     </ng-template>
 
     <ng-template #showContentFooter>
-        <button nz-button (click)="modalData.visible = false">关闭</button>
+        <button (click)="modalData.visible = false" nz-button>关闭</button>
     </ng-template>
 
     <ng-template #editContentFooter>
-        <button nz-button (click)="modalData.visible = false">取消</button>
+        <button (click)="modalData.visible = false" nz-button>取消</button>
-        <button nz-button (click)="modalConfirm()" nzType="primary">提交</button>
+        <button (click)="modalConfirm()" nz-button nzType="primary">提交</button>
     </ng-template>
 
 </nz-modal>

src/app/view/admin/admin-user/admin-user.component.ts

@@ -1,7 +1,7 @@
 import {Component, OnInit} from '@angular/core';
-import {NzMessageService} from 'ng-zorro-antd';
+import {NzMessageService} from 'ng-zorro-antd/message';
 import {Title} from '@angular/platform-browser';
-import {FormControl, FormGroup} from '@angular/forms';
+import {UntypedFormControl, UntypedFormGroup} from '@angular/forms';
 import {RequestObj} from '../../../class/HttpReqAndResp';
 import {ApiService} from '../../../api/api.service';
 import {User} from '../../../class/User';
@@ -14,38 +14,37 @@ import {Data} from '../components/common-table/data';
 })
 export class AdminUserComponent implements OnInit {
 
-    constructor(private apiService: ApiService, private title: Title, private messageService: NzMessageService,
-                private userService: GlobalUserService) {
-        this.formGroup = new FormGroup({
-            id: new FormControl(null),
-            email: new FormControl(''),
-            displayName: new FormControl(''),
-            emailStatus: new FormControl(null),
-            desc: new FormControl(null),
-            role: new FormControl(null),
-            pwd: new FormControl(''),
-        });
-        this.userService.watchUserInfo({
-            next: data => this.user = data.result,
-            error: null,
-            complete: null
-        })
-    }
-
     user: User;
     modalData = {
         visible: false,
         title: null,
         isEdit: false,
         resetPwd: false
-    }
+    };
-    formGroup: FormGroup;
+    formGroup: UntypedFormGroup;
-
     headData: Data<User>[];
     request: RequestObj;
 
+    constructor(private apiService: ApiService, private title: Title, private messageService: NzMessageService,
+                private userService: GlobalUserService) {
+        this.formGroup = new UntypedFormGroup({
+            id: new UntypedFormControl(null),
+            email: new UntypedFormControl(''),
+            displayName: new UntypedFormControl(''),
+            emailStatus: new UntypedFormControl(null),
+            desc: new UntypedFormControl(null),
+            role: new UntypedFormControl(null),
+            pwd: new UntypedFormControl(''),
+        });
+        this.userService.watchUserInfo({
+            next: data => this.user = data.result,
+            error: null,
+            complete: null
+        });
+    }
+
     ngOnInit(): void {
-        this.title.setTitle('小海博客 | 用户管理')
+        this.title.setTitle('小海博客 | 用户管理');
         this.request = {
             path: '/admin/users',
             method: 'GET',
@@ -79,24 +78,24 @@ export class AdminUserComponent implements OnInit {
         this.apiService.deleteUser(id).subscribe({
             next: data => this.messageService.success('删除成功'),
             error: err => this.messageService.error(err.msg)
-        })
+        });
     }
 
     showModal(isEdit: boolean, data: User) {
         this.modalData.visible = true;
         this.modalData.isEdit = isEdit;
-        this.modalData.title = isEdit ? '编辑用户' : '查看用户'
+        this.modalData.title = isEdit ? '编辑用户' : '查看用户';
         this.formGroup.reset();
         this.formGroup.patchValue(data);
     }
 
     modalConfirm() {
-        this.modalData.visible = false
+        this.modalData.visible = false;
         this.apiService.adminUpdateUser(this.formGroup.value).subscribe({
             next: data => {
                 this.messageService.success('修改用户信息成功');
                 this.userService.refreshUserInfo();
             }
-        })
+        });
     }
 }

src/app/view/admin/admin-user/admin-user.module.ts

@@ -4,15 +4,15 @@ import {RouterModule} from '@angular/router';
 import {AdminUserComponent} from './admin-user.component';
 import {ReactiveFormsModule} from '@angular/forms';
 import {CommonTableModule} from '../components/common-table/common-table.module';
-import {
+import {NzButtonModule} from 'ng-zorro-antd/button';
-    NzButtonModule,
+import {NzFormModule} from 'ng-zorro-antd/form';
-    NzFormModule,
+import {NzGridModule} from 'ng-zorro-antd/grid';
-    NzGridModule,
+import {NzIconModule} from 'ng-zorro-antd/icon';
-    NzIconModule,
+import {NzInputModule} from 'ng-zorro-antd/input';
-    NzInputModule, NzModalModule,
+import {NzModalModule} from 'ng-zorro-antd/modal';
-    NzRadioModule,
+import {NzRadioModule} from 'ng-zorro-antd/radio';
-    NzSelectModule, NzTagModule
+import {NzSelectModule} from 'ng-zorro-antd/select';
-} from 'ng-zorro-antd';
+import {NzTagModule} from 'ng-zorro-antd/tag';
 
 
 @NgModule({

src/app/view/admin/admin-visitor/admin-visitor.component.html

@@ -1,4 +1,4 @@
-<common-table [request]="request" [headData]="headData" cardTitle="访客信息管理">
+<common-table [headData]="headData" [request]="request" cardTitle="访客信息管理">
 
 </common-table>
 

src/app/view/admin/admin-visitor/admin-visitor.component.ts

@@ -11,14 +11,14 @@ import {Data} from '../components/common-table/data';
 })
 export class AdminVisitorComponent implements OnInit {
 
+    headData: Data<Visitor>[];
+    request: RequestObj;
+
     constructor(private apiService: ApiService, private title: Title) {
     }
 
-    headData: Data<Visitor>[];
-    request: RequestObj
-
     ngOnInit(): void {
-        this.title.setTitle('小海博客 | 访客信息管理')
+        this.title.setTitle('小海博客 | 访客信息管理');
         this.request = {
             path: '/admin/visitor/page',
             method: 'GET',
@@ -27,7 +27,7 @@ export class AdminVisitorComponent implements OnInit {
                 page: 10,
                 showLocation: true
             }
-        }
+        };
         this.headData = [
             {fieldValue: 'id', title: '主键', show: false, primaryKey: true},
             {fieldValue: 'date', title: '访问日期', show: true},
@@ -36,6 +36,6 @@ export class AdminVisitorComponent implements OnInit {
             {fieldValue: 'browserName', title: '浏览器', show: true},
             {fieldValue: 'browserVersion', title: '浏览器版本', show: true},
             {fieldValue: 'osname', title: '系统', show: true}
-        ]
+        ];
     }
 }

src/app/view/admin/admin.component.html

@@ -1,40 +1,40 @@
 <c-admin-header (infoClicked)="showInfoDrawer()"></c-admin-header>
 <nz-layout class="layout">
-    <nz-sider nzCollapsible
+    <nz-sider *ngIf="user"
               [(nzCollapsed)]="isCollapsed"
               [nzBreakpoint]="'lg'"
               [nzCollapsedWidth]="0"
               [nzZeroTrigger]="zeroTrigger"
-              nzTheme="light"
+              nzCollapsible
-              *ngIf="user">
+              nzTheme="light">
-        <ul nz-menu nzTheme="light" nzMode="inline" [nzInlineCollapsed]="isCollapsed">
+        <ul [nzInlineCollapsed]="isCollapsed" nz-menu nzMode="inline" nzTheme="light">
             <li nz-menu-item routerLink="/admin">
-                <i nz-icon nzType="dashboard" nzTheme="outline"></i>
+                <i nz-icon nzTheme="outline" nzType="dashboard"></i>
                 <span>后台首页</span>
             </li>
 
-            <li nz-submenu nzTitle="文章管理" nzIcon="file" *ngIf="user.role=='admin'">
+            <li *ngIf="user.role=='admin'" nz-submenu nzIcon="file" nzTitle="文章管理">
                 <ul>
                     <li nz-menu-item>
                         <a routerLink="/write">
-                            <i nz-icon nzType="form" nzTheme="outline"></i>
+                            <i nz-icon nzTheme="outline" nzType="form"></i>
                             <span>新增文章</span>
                         </a>
                     </li>
                     <li nz-menu-item routerLink="/admin/article">
-                        <i nz-icon nzType="ordered-list" nzTheme="outline"></i>
+                        <i nz-icon nzTheme="outline" nzType="ordered-list"></i>
                         <span>文章列表</span>
                     </li>
                 </ul>
             </li>
 
             <li nz-menu-item routerLink="/admin/comment">
-                <i nz-icon nzType="message" nzTheme="outline"></i>
+                <i nz-icon nzTheme="outline" nzType="message"></i>
                 <span>评论管理</span>
             </li>
 
-            <li nz-menu-item routerLink="/admin/tag" *ngIf="user.role=='admin'">
+            <li *ngIf="user.role=='admin'" nz-menu-item routerLink="/admin/tag">
-                <i nz-icon nzType="tags" nzTheme="outline"></i>
+                <i nz-icon nzTheme="outline" nzType="tags"></i>
                 <span>标签管理</span>
             </li>
 
@@ -43,37 +43,37 @@
             <!--                <span>分类管理</span>-->
             <!--            </li>-->
 
-            <li nz-menu-item routerLink="/admin/user" *ngIf="user.role=='admin'">
+            <li *ngIf="user.role=='admin'" nz-menu-item routerLink="/admin/user">
-                <i nz-icon nzType="user" nzTheme="outline"></i>
+                <i nz-icon nzTheme="outline" nzType="user"></i>
                 <span>用户管理</span>
             </li>
 
-            <li nz-menu-item routerLink="/admin/link" *ngIf="user.role=='admin'">
+            <li *ngIf="user.role=='admin'" nz-menu-item routerLink="/admin/link">
-                <i nz-icon nzType="link" nzTheme="outline"></i>
+                <i nz-icon nzTheme="outline" nzType="link"></i>
                 <span>友链管理</span>
             </li>
 
-            <li nz-menu-item routerLink="/admin/visitor" *ngIf="user.role=='admin'">
+            <li *ngIf="user.role=='admin'" nz-menu-item routerLink="/admin/visitor">
-                <i nz-icon nzType="chrome" nzTheme="outline"></i>
+                <i nz-icon nzTheme="outline" nzType="chrome"></i>
                 <span>访问管理</span>
             </li>
 
-            <li nz-menu-item routerLink="/admin/update" *ngIf="user.role=='admin'">
+            <li *ngIf="user.role=='admin'" nz-menu-item routerLink="/admin/update">
-                <i nz-icon nzType="arrow-up" nzTheme="outline"></i>
+                <i nz-icon nzTheme="outline" nzType="arrow-up"></i>
                 <span>更新管理</span>
             </li>
 
-            <li nz-menu-item (click)="infoDrawerVisible = true">
+            <li (click)="infoDrawerVisible = true" nz-menu-item>
-                <i nz-icon nzType="idcard" nzTheme="outline"></i>
+                <i nz-icon nzTheme="outline" nzType="idcard"></i>
                 <span>查看信息</span>
             </li>
 
             <!--TODO : do something here ..... -->
-            <nz-card class="myCard" *ngIf="!isCollapsed&&user.role=='admin'">
+            <nz-card *ngIf="!isCollapsed&&user.role=='admin'" class="myCard">
                 <p>别管别人言语</p>
                 <p>做最好的自己</p>
             </nz-card>
-            <nz-card class="myCard" *ngIf="!isCollapsed&&user.role=='user'">
+            <nz-card *ngIf="!isCollapsed&&user.role=='user'" class="myCard">
                 <p>欢迎来访小海博客</p>
             </nz-card>
 
@@ -88,95 +88,95 @@
         <nz-footer>© <a href="https://www.celess.cn">小海博客</a> - Design by 小海</nz-footer>
     </nz-layout>
 </nz-layout>
-<nz-drawer [nzClosable]="false" [nzVisible]="infoDrawerVisible" nzPlacement="right"
+<nz-drawer (nzOnClose)="infoDrawerVisible = false" [nzClosable]="false" [nzTitle]="sayHelloTemp"
-           [nzTitle]="sayHelloTemp" (nzOnClose)="infoDrawerVisible = false" nzWidth="300px">
+           [nzVisible]="infoDrawerVisible" nzPlacement="right" nzWidth="300px">
     <p>您最近一次登录是在:</p>
     <p>{{user && user.recentlyLandedDate}}</p>
     <nz-divider></nz-divider>
     <div style="text-align: center;margin-bottom: 10px;">
-        <nz-avatar [nzSize]="64" [nzSrc]="user.avatarImgUrl"
+        <nz-avatar *ngIf="user.avatarImgUrl!==noAvatarUrl" [nzSize]="64"
-                   *ngIf="user.avatarImgUrl!==noAvatarUrl"></nz-avatar>
+                   [nzSrc]="user.avatarImgUrl"></nz-avatar>
-        <nz-avatar [nzSize]="64" [nzText]="user.displayName" style="background: #f56a00"
+        <nz-avatar *ngIf="user.avatarImgUrl===noAvatarUrl" [nzSize]="64" [nzText]="user.displayName"
-                   *ngIf="user.avatarImgUrl===noAvatarUrl"></nz-avatar>
+                   style="background: #f56a00"></nz-avatar>
 
-        <nz-upload style="display: block" [nzAction]="host+'/user/imgUpload'" nzWithCredentials="true" nzLimit="1"
+        <nz-upload (nzChange)="avatarUpload($event)" [nzAction]="host+'/user/imgUpload'" [nzHeaders]="uploadHeader" nzLimit="1"
-                   (nzChange)="avatarUpload($event)" [nzHeaders]="uploadHeader">
+                   nzWithCredentials="true" style="display: block">
             <button nz-button nzBlock nzType="link"><i nz-icon nzType="upload"></i>修改头像</button>
         </nz-upload>
     </div>
     <nz-descriptions [nzColumn]="1">
         <nz-descriptions-item nzTitle="邮箱">
             <div>
-                <i nz-icon nzType="mail" class="icon" nzTheme="twotone"></i>
+                <i class="icon" nz-icon nzTheme="twotone" nzType="mail"></i>
                 <span>{{user && user.email}}</span>
-                <i nz-icon nzType="edit" class="edit-icon" nzTheme="twotone" (click)="showEditInfoModal()"></i>
+                <i (click)="showEditInfoModal()" class="edit-icon" nz-icon nzTheme="twotone" nzType="edit"></i>
             </div>
         </nz-descriptions-item>
         <nz-descriptions-item nzTitle="昵称">
             <div>
-                <i nz-icon nzType="crown" class="icon" nzTheme="twotone"></i>
+                <i class="icon" nz-icon nzTheme="twotone" nzType="crown"></i>
                 <span>{{user && user.displayName}}</span>
-                <i nz-icon nzType="edit" class="edit-icon" nzTheme="twotone" (click)="showEditInfoModal()"></i>
+                <i (click)="showEditInfoModal()" class="edit-icon" nz-icon nzTheme="twotone" nzType="edit"></i>
             </div>
         </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="描述" *ngIf="user&&user.desc">
+        <nz-descriptions-item *ngIf="user&&user.desc" nzTitle="描述">
-            <i nz-icon nzType="info-circle" class="icon" nzTheme="twotone"></i>
+            <i class="icon" nz-icon nzTheme="twotone" nzType="info-circle"></i>
-            <span nz-tooltip [nzTooltipTitle]="user.desc" nzTooltipPlacement="left" nz-typography [nzEllipsis]="true"
+            <span [nzContent]="user.desc" [nzEllipsis]="true" [nzTooltipTitle]="user.desc" nz-tooltip nz-typography
-                  [nzContent]="user.desc" style="max-width: 100px">{{user.desc}}</span>
+                  nzTooltipPlacement="left" style="max-width: 100px">{{user.desc}}</span>
-            <i nz-icon nzType="edit" class="edit-icon" nzTheme="twotone" (click)="showEditInfoModal()"></i>
+            <i (click)="showEditInfoModal()" class="edit-icon" nz-icon nzTheme="twotone" nzType="edit"></i>
         </nz-descriptions-item>
         <nz-descriptions-item nzTitle="密码">
-            <i nz-icon nzType="fire" nzTheme="twotone"> </i>
+            <i nz-icon nzTheme="twotone" nzType="fire"> </i>
             <span> *********</span>
-            <i nz-icon nzType="edit" class="edit-icon" nzTheme="twotone" (click)="showResetPwdModal()"></i>
+            <i (click)="showResetPwdModal()" class="edit-icon" nz-icon nzTheme="twotone" nzType="edit"></i>
         </nz-descriptions-item>
     </nz-descriptions>
 
     <nz-divider></nz-divider>
 
     <!--    <div >-->
-    <button nz-button nzDanger nzBlock nzType="primary" (click)="logout()">注销</button>
+    <button (click)="logout()" nz-button nzBlock nzDanger nzType="primary">注销</button>
     <!--    </div>-->
     <!--  TODO: 展示更多信息  -->
 </nz-drawer>
 
-<nz-modal [(nzVisible)]="editInfoModalVisible" (nzOnOk)="modalConfirm()" (nzOnCancel)="editInfoModalVisible=false"
+<nz-modal (nzOnCancel)="editInfoModalVisible=false" (nzOnOk)="modalConfirm()" [(nzVisible)]="editInfoModalVisible"
           nzTitle="编辑信息">
-    <form nz-form [formGroup]="editInfoFormGroup" (ngSubmit)="modalConfirm()">
+    <form (ngSubmit)="modalConfirm()" [formGroup]="editInfoFormGroup" nz-form>
         <nz-form-item>
             <nz-form-label>邮箱</nz-form-label>
             <nz-form-control>
-                <input nz-input disabled formControlName="email">
+                <input disabled formControlName="email" nz-input>
             </nz-form-control>
         </nz-form-item>
         <nz-form-item>
             <nz-form-label>昵称</nz-form-label>
             <nz-form-control>
-                <input nz-input formControlName="displayName" placeholder="默认为你的邮箱地址">
+                <input formControlName="displayName" nz-input placeholder="默认为你的邮箱地址">
             </nz-form-control>
         </nz-form-item>
         <nz-form-item>
             <nz-form-label>描述</nz-form-label>
             <nz-form-control>
-                <input nz-input formControlName="desc" placeholder="请输入自我介绍">
+                <input formControlName="desc" nz-input placeholder="请输入自我介绍">
             </nz-form-control>
         </nz-form-item>
     </form>
 </nz-modal>
 
-<nz-modal [(nzVisible)]="resetPwdModalVisible" nzClosable="true" (nzOnCancel)="resetPwdModalVisible = false"
+<nz-modal (nzOnCancel)="resetPwdModalVisible = false" (nzOnOk)="resetPwdConfirm()" [(nzVisible)]="resetPwdModalVisible"
-          (nzOnOk)="resetPwdConfirm()" nzTitle="修改密码" [nzOkDisabled]="!resetPwdFormGroup.valid">
+          [nzOkDisabled]="!resetPwdFormGroup.valid" nzClosable="true" nzTitle="修改密码">
-    <form nz-form (submit)="resetPwdConfirm()" [formGroup]="resetPwdFormGroup">
+    <form (submit)="resetPwdConfirm()" [formGroup]="resetPwdFormGroup" nz-form>
         <nz-form-item>
             <nz-form-label nzRequired>原密码</nz-form-label>
             <nz-form-control nzErrorTip="原密码不可为空">
-                <input type="password" name="xxx" nz-input formControlName="originPwd">
+                <input formControlName="originPwd" name="xxx" nz-input type="password">
             </nz-form-control>
         </nz-form-item>
         <nz-form-item>
             <nz-form-label nzRequired>新密码</nz-form-label>
             <nz-form-control [nzErrorTip]="newPwdErrTip">
-                <input type="password" name="xxx" nz-input formControlName="newPwd">
+                <input formControlName="newPwd" name="xxx" nz-input type="password">
             </nz-form-control>
             <ng-template #newPwdErrTip>
                 <div *ngIf="resetPwdFormGroup.controls.newPwd.hasError('required')">新密码不可为空</div>
@@ -188,7 +188,7 @@
         <nz-form-item>
             <nz-form-label nzRequired>确认密码</nz-form-label>
             <nz-form-control [nzErrorTip]="newPwdConfirmErrTip">
-                <input type="password" nz-input name="xxx" formControlName="newPwdConfirm">
+                <input formControlName="newPwdConfirm" name="xxx" nz-input type="password">
             </nz-form-control>
             <ng-template #newPwdConfirmErrTip>
                 <div *ngIf="resetPwdFormGroup.controls.newPwdConfirm.hasError('required')">确认密码不可为空</div>
@@ -202,10 +202,10 @@
 </nz-modal>
 
 <ng-template #zeroTrigger>
-    <i nz-icon nzType="menu-fold" nzTheme=outline></i>
+    <i nz-icon nzTheme=outline nzType="menu-fold"></i>
 </ng-template>
 
 <ng-template #sayHelloTemp>
     <span>{{sayHelloContent}}</span>
-    <i nz-icon [nzType]="'smile'" [nzTheme]="'twotone'" nzTwotoneColor="#52c41a" style="margin-left: 5px"></i>
+    <i [nzTheme]="'twotone'" [nzType]="'smile'" nz-icon nzTwotoneColor="#52c41a" style="margin-left: 5px"></i>
 </ng-template>

src/app/view/admin/admin.component.less

@@ -31,6 +31,7 @@ nz-content {
 .icon {
   margin-right: 5px;
 }
+
 .edit-icon {
   margin-left: 10px;
   cursor: pointer;

src/app/view/admin/admin.component.ts

@@ -1,6 +1,7 @@
 import {Component, OnInit} from '@angular/core';
-import {AbstractControl, FormControl, FormGroup, Validators} from '@angular/forms';
+import {AbstractControl, UntypedFormControl, UntypedFormGroup, Validators} from '@angular/forms';
-import {NzMessageService, UploadFile} from 'ng-zorro-antd';
+import {NzMessageService} from 'ng-zorro-antd/message';
+import {NzUploadFile} from 'ng-zorro-antd/upload';
 import {Router} from '@angular/router';
 import {GlobalUserService} from '../../services/global-user.service';
 import {User} from '../../class/User';
@@ -16,81 +17,62 @@ import {LocalStorageService} from '../../services/local-storage.service';
 })
 export class AdminComponent implements OnInit {
 
-    constructor(public gUserService: GlobalUserService, private apiService: ApiService, private messageService: NzMessageService,
-                private router: Router, private localStorageService: LocalStorageService) {
-        this.gUserService.watchUserInfo({
-                complete: () => null,
-                error: (err) => null,
-                next: data => {
-                    this.user = data.result
-                    if (data.result) this.initHelloWords()
-                }
-            }
-        );
-        this.editInfoFormGroup = new FormGroup({
-            desc: new FormControl(),
-            displayName: new FormControl(),
-            email: new FormControl({value: null, disabled: true})
-        });
-        this.resetPwdFormGroup = new FormGroup({
-            originPwd: new FormControl(null, [Validators.required]),
-            newPwd: new FormControl(null, [
-                Validators.required, Validators.minLength(6), Validators.maxLength(16), Validators.pattern(/^[\w_-]{6,16}$/)
-            ]),
-            newPwdConfirm: new FormControl(null, [
-                Validators.required, Validators.minLength(6), Validators.maxLength(16), Validators.pattern(/^[\w_-]{6,16}$/),
-                this.checkSamePwd()
-            ]),
-        })
-    }
-
     user: User;
     isCollapsed: boolean = false;
     infoDrawerVisible: boolean = false;
     sayHelloContent: string;
     editInfoModalVisible: boolean = false;
     resetPwdModalVisible: boolean = false;
-    editInfoFormGroup: FormGroup;
+    editInfoFormGroup: UntypedFormGroup;
-    resetPwdFormGroup: FormGroup;
+    resetPwdFormGroup: UntypedFormGroup;
-    noAvatarUrl = 'https://cdn.celess.cn/'
+    noAvatarUrl = 'https://cdn.celess.cn/';
-    host: string
+    host: string;
+
+    constructor(public gUserService: GlobalUserService, private apiService: ApiService, private messageService: NzMessageService,
+                private router: Router, private localStorageService: LocalStorageService) {
+        this.gUserService.watchUserInfo({
+                complete: () => null,
+                error: (err) => null,
+                next: data => {
+                    this.user = data.result;
+                    if (data.result) {this.initHelloWords();}
+                }
+            }
+        );
+        this.editInfoFormGroup = new UntypedFormGroup({
+            desc: new UntypedFormControl(),
+            displayName: new UntypedFormControl(),
+            email: new UntypedFormControl({value: null, disabled: true})
+        });
+        this.resetPwdFormGroup = new UntypedFormGroup({
+            originPwd: new UntypedFormControl(null, [Validators.required]),
+            newPwd: new UntypedFormControl(null, [
+                Validators.required, Validators.minLength(6), Validators.maxLength(16), Validators.pattern(/^[\w_-]{6,16}$/)
+            ]),
+            newPwdConfirm: new UntypedFormControl(null, [
+                Validators.required, Validators.minLength(6), Validators.maxLength(16), Validators.pattern(/^[\w_-]{6,16}$/),
+                this.checkSamePwd()
+            ]),
+        });
+    }
+
     showInfoDrawer = () => this.infoDrawerVisible = !this.infoDrawerVisible;
 
     logout() {
         this.gUserService.logout();
-        this.router.navigateByUrl('/')
+        this.router.navigateByUrl('/');
     }
 
     ngOnInit(): void {
         this.host = environment.host;
     }
 
-    checkSamePwd = () => {
+    checkSamePwd = () => (control: AbstractControl): { [key: string]: any } | null => {
-        return (control: AbstractControl): { [key: string]: any } | null => {
             const newPwd = this.resetPwdFormGroup && this.resetPwdFormGroup.value.newPwd;
             return control.value !== newPwd ? {pwdNotSame: true} : null;
         };
-    }
+    // eslint-disable-next-line @typescript-eslint/naming-convention
-    uploadHeader = (file: UploadFile): object | Observable<{}> => {
+    uploadHeader = (file: NzUploadFile): any | Observable<{}> => ({Authorization: this.localStorageService.getToken()});
-        return {Authorization: this.localStorageService.getToken()}
-    };
-
-    private initHelloWords() {
-        const hours = new Date().getHours();
-        if (hours < 6) {
-            this.sayHelloContent = `夜深了，注意早点休息哦！${this.user.displayName}`
-        } else if (hours < 10) {
-            this.sayHelloContent = `早上好呀！${this.user.displayName}`
-        } else if (hours < 14) {
-            this.sayHelloContent = `中午好呀！${this.user.displayName}`
-        } else if (hours < 19) {
-            this.sayHelloContent = `下午好呀！${this.user.displayName}`
-        } else if (hours < 22) {
-            this.sayHelloContent = `晚上好呀！${this.user.displayName}`
-        } else {
-            this.sayHelloContent = `时间不早了，注意休息哦！${this.user.displayName}`
-        }
-    }
 
     showEditInfoModal() {
         this.editInfoModalVisible = true;
@@ -103,7 +85,7 @@ export class AdminComponent implements OnInit {
         const displayName = this.editInfoFormGroup.value.displayName;
         this.apiService.updateUserInfo(desc, displayName).subscribe({
             next: data => {
-                this.messageService.success('修改信息成功')
+                this.messageService.success('修改信息成功');
                 this.gUserService.refreshUserInfo();
             },
             error: err => {
@@ -126,13 +108,13 @@ export class AdminComponent implements OnInit {
             error: err => {
                 this.messageService.error('修改密码失败，' + err.msg);
             }
-        })
+        });
         this.resetPwdModalVisible = false;
     }
 
     showResetPwdModal() {
         this.resetPwdModalVisible = true;
-        this.infoDrawerVisible = false
+        this.infoDrawerVisible = false;
     }
 
     avatarUpload(info: any) {
@@ -141,4 +123,21 @@ export class AdminComponent implements OnInit {
             this.gUserService.refreshUserInfo();
         }
     }
+
+    private initHelloWords() {
+        const hours = new Date().getHours();
+        if (hours < 6) {
+            this.sayHelloContent = `夜深了，注意早点休息哦！${this.user.displayName}`;
+        } else if (hours < 10) {
+            this.sayHelloContent = `早上好呀！${this.user.displayName}`;
+        } else if (hours < 14) {
+            this.sayHelloContent = `中午好呀！${this.user.displayName}`;
+        } else if (hours < 19) {
+            this.sayHelloContent = `下午好呀！${this.user.displayName}`;
+        } else if (hours < 22) {
+            this.sayHelloContent = `晚上好呀！${this.user.displayName}`;
+        } else {
+            this.sayHelloContent = `时间不早了，注意休息哦！${this.user.displayName}`;
+        }
+    }
 }

src/app/view/admin/admin.module.ts

@@ -2,12 +2,25 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {AdminRoutingModule} from './admin-routing.module';
 import {AdminComponent} from './admin.component';
-import {NgZorroAntdModule} from 'ng-zorro-antd';
 import {NzSpaceModule} from 'ng-zorro-antd/space';
 import {AdminHeaderComponent} from '../../components/admin-header/admin-header.component';
 import {ReactiveFormsModule} from '@angular/forms';
 import {AuthGuard} from './auth.guard';
-
+import {NzAvatarModule} from 'ng-zorro-antd/avatar';
+import {NzButtonModule} from 'ng-zorro-antd/button';
+import {NzLayoutModule} from 'ng-zorro-antd/layout';
+import {NzMenuModule} from 'ng-zorro-antd/menu';
+import {NzIconModule} from 'ng-zorro-antd/icon';
+import {NzCardModule} from 'ng-zorro-antd/card';
+import {NzDividerModule} from 'ng-zorro-antd/divider';
+import {NzUploadModule} from 'ng-zorro-antd/upload';
+import {NzToolTipModule} from 'ng-zorro-antd/tooltip';
+import {NzTypographyModule} from 'ng-zorro-antd/typography';
+import {NzModalModule} from 'ng-zorro-antd/modal';
+import {NzFormModule} from 'ng-zorro-antd/form';
+import {NzInputModule} from 'ng-zorro-antd/input';
+import {NzDescriptionsModule} from 'ng-zorro-antd/descriptions';
+import {NzDrawerModule} from 'ng-zorro-antd/drawer';
 
 @NgModule({
     declarations: [
@@ -17,9 +30,23 @@ import {AuthGuard} from './auth.guard';
     imports: [
         CommonModule,
         AdminRoutingModule,
-        NgZorroAntdModule,
         NzSpaceModule,
         ReactiveFormsModule,
+        NzAvatarModule,
+        NzButtonModule,
+        NzLayoutModule,
+        NzMenuModule,
+        NzIconModule,
+        NzCardModule,
+        NzDividerModule,
+        NzUploadModule,
+        NzToolTipModule,
+        NzTypographyModule,
+        NzModalModule,
+        NzFormModule,
+        NzInputModule,
+        NzDescriptionsModule,
+        NzDrawerModule
     ],
     providers: [AuthGuard]
 })

src/app/view/admin/auth.guard.ts

@@ -1,12 +1,5 @@
 import {Injectable} from '@angular/core';
-import {
+import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot} from '@angular/router';
-    CanActivate,
-    ActivatedRouteSnapshot,
-    RouterStateSnapshot,
-    UrlTree,
-    Router,
-    CanActivateChild
-} from '@angular/router';
 import {Observable, Observer} from 'rxjs';
 import {User} from '../../class/User';
 import {GlobalUserService} from '../../services/global-user.service';
@@ -16,15 +9,15 @@ import {GlobalUserService} from '../../services/global-user.service';
 })
 export class AuthGuard implements CanActivate {
 
-    constructor(private userService: GlobalUserService, private router: Router) {
-    }
-
     userInfo: User;
     visitCount: number = 0; // 记录一共走过几次canActivate
     private path: string;
     private readonly loginPath: string = '/user/login';
     private observable: Observable<boolean>;
 
+    constructor(private userService: GlobalUserService, private router: Router) {
+    }
+
     canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
         this.path = state.url.indexOf('?') > 0 ? state.url.substr(0, state.url.indexOf('?')) : state.url;
         this.visitCount++;
@@ -53,7 +46,7 @@ export class AuthGuard implements CanActivate {
                 this.userInfo = data.result;
                 this.checkPath(observer);
             }
-        })
+        });
     }
 
 
@@ -67,7 +60,7 @@ export class AuthGuard implements CanActivate {
             case '/admin/visitor':
                 if (this.userInfo && this.userInfo.role !== 'admin') {
                     observer.next(false);
-                    if (this.visitCount === 1) this.router.navigateByUrl('/admin')
+                    if (this.visitCount === 1) {this.router.navigateByUrl('/admin');}
                     observer.complete();
                     return;
                 }

src/app/view/admin/components/common-table/common-table.component.html

@@ -1,26 +1,26 @@
-<nz-card *ngIf="cardTitle" nzSize="small" [nzExtra]="extra" [nzTitle]="cardTitle" [nzLoading]="loading">
+<nz-card *ngIf="cardTitle" [nzExtra]="extra" [nzLoading]="loading" [nzTitle]="cardTitle" nzSize="small">
     <ng-container *ngTemplateOutlet="table"></ng-container>
 </nz-card>
 
-<ng-container [ngTemplateOutlet]="table" *ngIf="!cardTitle"></ng-container>
+<ng-container *ngIf="!cardTitle" [ngTemplateOutlet]="table"></ng-container>
 
 <ng-template #extra>
-    <i nz-icon nzType="setting" nzTheme="outline" title="设置" (click)="showFieldSetting()"
+    <i (click)="showFieldSetting()" nz-icon nzTheme="outline" nzType="setting" style="cursor: pointer;margin-right: 10px"
-       style="cursor: pointer;margin-right: 10px"></i>
+       title="设置"></i>
-    <i nz-icon nzType="reload" nzTheme="outline" (click)="getData()" title="刷新" style="cursor: pointer"></i>
+    <i (click)="getData()" nz-icon nzTheme="outline" nzType="reload" style="cursor: pointer" title="刷新"></i>
 </ng-template>
 
 <ng-template #table>
     <ng-content></ng-content>
-    <nz-table nzTableLayout="fixed"
+    <nz-table (nzPageIndexChange)="getData($event)"
-              [nzData]="dataList.list"
-              [nzTotal]="dataList.total"
               [(nzPageIndex)]="dataList.pageNum"
+              [nzData]="dataList.list"
+              [nzLoading]="loading"
               [nzPageSize]="dataList.pageSize"
-              (nzPageIndexChange)="getData()"
-              nzFrontPagination="false"
               [nzScroll]="{x:visibleFieldLength*100+'px'}"
-              [nzLoading]="loading">
+              [nzTotal]="dataList.total"
+              nzFrontPagination="false"
+              nzTableLayout="fixed">
         <thead>
         <tr>
             <ng-container *ngFor="let data of filedData">
@@ -34,12 +34,12 @@
         <tr *ngFor="let t of dataList.list;let index = index">
             <ng-container *ngFor="let data of filedData">
                 <td *ngIf="data.show"
-                    nz-typography
-                    nzEllipsis
                     [nzEllipsisRows]="data.isActionColumns?3:1"
                     [nzTooltipTitle]="data.isActionColumns ? null : data.title+' : '+getValue(index,data.fieldValue)"
-                    nzTooltipPlacement="top"
+                    nz-tooltip
-                    nz-tooltip>
+                    nz-typography
+                    nzEllipsis
+                    nzTooltipPlacement="top">
                     <ng-template [ngIf]="!data.isActionColumns">
                         <ng-template [ngIf]="template[data.fieldValue]">
                             <ng-container
@@ -51,15 +51,15 @@
                         </ng-template>
                     </ng-template>
                     <ng-container *ngIf="data.isActionColumns">
-                        <a *ngFor="let action of data.action; let i = index"
+                        <a (mouseenter)="action.hover(t)"
-                           (mouseenter)="action.hover(t)"
                            (mouseout)="null"
-                           [ngStyle]="{'color':action.color,'font-size':action.fontSize}"
-                           nz-popconfirm
-                           [nzPopconfirmTitle]="'是否确认'+action.name+'该数据?'"
-                           [nzCondition]="!action.needConfirm"
                            (nzOnConfirm)="action.click(t)"
-                           [title]="action.name">
+                           *ngFor="let action of data.action; let i = index"
+                           [ngStyle]="{'color':action.color,'font-size':action.fontSize}"
+                           [nzCondition]="!action.needConfirm"
+                           [nzPopconfirmTitle]="'是否确认'+action.name+'该数据?'"
+                           [title]="action.name"
+                           nz-popconfirm>
                             {{action.name}}
                             <ng-template [ngIf]="i!=data.action.length-1">
                                 <nz-divider nzType="vertical"></nz-divider>
@@ -74,17 +74,17 @@
 </ng-template>
 
 
-<nz-modal [(nzVisible)]="settingModalVisible"
+<nz-modal (nzOnCancel)="cancel()"
-          [nzClosable]="true"
-          (nzOnCancel)="cancel()"
           (nzOnOk)="ok()"
+          [(nzVisible)]="settingModalVisible"
+          [nzClosable]="true"
           nzTitle="表格字段设置(可拖动排序)"
 >
-    <button nz-button nzType="primary" (click)="reset()" [disabled]="!changed">重置</button>
+    <button (click)="reset()" [disabled]="!changed" nz-button nzType="primary">重置</button>
-    <nz-table [nzData]="filedData" nzSize="small" nzPageSize="10000" nzShowPagination="false">
+    <nz-table [nzData]="filedData" nzPageSize="10000" nzShowPagination="false" nzSize="small">
-        <tbody cdkDropList (cdkDropListDropped)="drop($event)">
+        <tbody (cdkDropListDropped)="drop($event)" cdkDropList>
-        <ng-template ngFor [ngForOf]="filedData" let-item let-index="index">
+        <ng-template [ngForOf]="filedData" let-index="index" let-item ngFor>
-            <tr *ngIf="!item.isActionColumns" cdkDrag (click)="click()">
+            <tr (click)="click()" *ngIf="!item.isActionColumns" cdkDrag>
                 <td>{{index + 1}}</td>
                 <td style="text-align: center">{{item.title}}</td>
                 <td style="text-align: center">{{item.fieldValue}}</td>

src/app/view/admin/components/common-table/common-table.component.ts

@@ -3,6 +3,7 @@ import {Data} from './data';
 import {PageList, RequestObj} from '../../../../class/HttpReqAndResp';
 import {HttpService} from '../../../../api/http/http.service';
 import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
+import {LocalStorageService} from '../../../../services/local-storage.service';
 
 @Component({
     selector: 'common-table',
@@ -11,54 +12,60 @@ import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
 })
 export class CommonTableComponent<T> implements OnInit, OnChanges {
 
-    constructor(private httpService: HttpService) {
+    @Output() pageInfo = new EventEmitter<{ page: number; pageSize: number }>();
-
-    }
-
-    @Input() private headData: Data<T>[];
-    @Input() request: RequestObj;
     @Input() cardTitle: string | null;
     @Input() template: {
         [fieldValue: string]: {
-            temp: TemplateRef<any>,
+            temp: TemplateRef<any>;
-            param?: { [key: string]: string }
+            param?: { [key: string]: string };
-        }
         };
-    @Output() pageInfo = new EventEmitter<{ page: number, pageSize: number }>();
+    };
+    @Input() request: RequestObj;
+    @Input() private headData: Data<T>[];
     loading: boolean = true;
-
     dataList: PageList<T> = new PageList<T>();
     settingModalVisible: boolean = false;
     filedData: Data<T>[];
     changed: boolean = false;
     visibleFieldLength: number = 0;
 
+    constructor(private httpService: HttpService,
+                private localStorageService: LocalStorageService) {
+
+    }
+
     ngOnInit(): void {
-        if (localStorage.getItem(this.request.path)) {
+        if (this.localStorageService.getItem(this.request.path)) {
-            this.filedData = this.cloneData(localStorage.getItem(this.request.path));
+            this.filedData = this.cloneData(this.localStorageService.getItem(this.request.path));
             this.changed = true;
         } else {
-            this.filedData = this.cloneData(this.headData)
+            this.filedData = this.cloneData(this.headData);
         }
         this.calculateVisibleFieldLength();
 
-        if (!this.template) this.template = {}
+        if (!this.template) {
+            this.template = {};
+        }
         this.headData.forEach(dat => {
-            if (!dat.action) return;
+            if (!dat.action) {
+                return;
+            }
             dat.action.forEach(act => {
                 if (!act.hover) {
                     act.hover = () => null;
                 }
-            })
             });
-        if (!this.request || !this.request.path) return
+        });
+        if (!this.request || !this.request.path) {
+            return;
+        }
         this.getData();
     }
 
-    getData = () => {
+    getData = (pageNumber?: number) => {
         this.loading = true;
-        const pageValue = this.dataList.pageNum ? this.dataList.pageNum : 1;
+        const pageValue = pageNumber ? pageNumber : 1;
-        const countValue = this.dataList.pageSize ? this.dataList.pageSize : 10
+        const countValue = this.dataList.pageSize ? this.dataList.pageSize : 10;
 
         this.request.queryParam.page = pageValue;
         this.request.queryParam.count = countValue;
@@ -66,15 +73,15 @@ export class CommonTableComponent<T> implements OnInit, OnChanges {
         //     page: pageValue,
         //     count: countValue
         // }
-        this.pageInfo.emit({page: pageValue, pageSize: countValue})
+        this.pageInfo.emit({page: pageValue, pageSize: countValue});
-        return this.httpService.Service<PageList<T>>(this.request).subscribe({
+        return this.httpService.service<PageList<T>>(this.request).subscribe({
             next: resp => {
                 this.dataList = resp.result;
-                setTimeout(() => this.loading = false, 10)
+                setTimeout(() => this.loading = false, 10);
             },
             error: err => this.loading = false
         });
-    }
+    };
 
     ngOnChanges(changes: SimpleChanges): void {
         if (changes.request && !changes.request.isFirstChange()) {
@@ -88,7 +95,9 @@ export class CommonTableComponent<T> implements OnInit, OnChanges {
     getValue(index: number, fieldValue: string): string {
         let value = this.dataList.list[index];
         try {
-            for (const key of fieldValue.split('.')) value = value[key]
+            for (const key of fieldValue.split('.')) {
+                value = value[key];
+            }
         } catch (e) {
             // ignore
         }
@@ -97,35 +106,35 @@ export class CommonTableComponent<T> implements OnInit, OnChanges {
 
     getContext = (fieldValue: string, index: number) => {
         const valueData = this.getValue(index, fieldValue);
-        let context: { value: string, originValue?: string, data: T };
+        let context: { value: string; originValue?: string; data: T };
         if (this.template[fieldValue].param) {
             context = {
                 value: this.template[fieldValue].param[valueData],
                 originValue: valueData,
                 data: this.dataList.list[index]
-            }
+            };
         } else {
             context = {
                 value: valueData,
                 data: this.dataList.list[index]
-            }
+            };
         }
         return context;
-    }
+    };
 
     showFieldSetting = () => this.settingModalVisible = true;
 
     cancel = () => this.settingModalVisible = false;
-    calculateVisibleFieldLength = () => this.filedData.filter(value => value.show).length;
+    calculateVisibleFieldLength = () => this.visibleFieldLength = this.filedData.filter(value => value.show).length;
 
     ok() {
         this.calculateVisibleFieldLength();
         this.settingModalVisible = !this.settingModalVisible;
         if (!this.changed) {
-            return
+            return;
         }
         this.dataList = JSON.parse(JSON.stringify(this.dataList));
-        localStorage.setItem(this.request.path, JSON.stringify(this.filedData))
+        this.localStorageService.setItem(this.request.path, JSON.stringify(this.filedData));
         this.changed = true;
     }
 
@@ -135,11 +144,11 @@ export class CommonTableComponent<T> implements OnInit, OnChanges {
     }
 
     reset = () => {
-        localStorage.removeItem(this.request.path);
+        this.localStorageService.removeItem(this.request.path);
         this.filedData = this.cloneData(this.headData);
         this.changed = false;
         this.calculateVisibleFieldLength();
-    }
+    };
 
     cloneData = (source: Data<T>[] | string): Data<T>[] => {
         let dist: Data<T>[];
@@ -152,11 +161,11 @@ export class CommonTableComponent<T> implements OnInit, OnChanges {
         if (!action) {
             return dist;
         }
-        const del = dist.filter(value => value.isActionColumns).pop()
+        const del = dist.filter(value => value.isActionColumns).pop();
         dist.splice(dist.indexOf(del), 1);
         dist.push(action);
         return dist;
-    }
+    };
 
     /**
      * 字段编辑项被点击
@@ -170,5 +179,5 @@ export class CommonTableComponent<T> implements OnInit, OnChanges {
                 this.changed = true;
             }
         }
-    }
+    };
 }

src/app/view/admin/components/common-table/common-table.module.ts

@@ -1,17 +1,20 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {CommonTableComponent} from './common-table.component';
-import {
+import {NzButtonModule} from 'ng-zorro-antd/button';
-    NzButtonModule,
+import {NzCardModule} from 'ng-zorro-antd/card';
-    NzCardModule,
+import {NzDividerModule} from 'ng-zorro-antd/divider';
-    NzDividerModule,
+import {NzIconModule} from 'ng-zorro-antd/icon';
-    NzIconModule, NzModalModule, NzOutletModule, NzPopconfirmModule, NzSwitchModule,
+import {NzModalModule} from 'ng-zorro-antd/modal';
-    NzTableModule, NzTagModule,
+import {NzOutletModule} from 'ng-zorro-antd/core/outlet';
-    NzToolTipModule,
+import {NzPopconfirmModule} from 'ng-zorro-antd/popconfirm';
-    NzTypographyModule
+import {NzSwitchModule} from 'ng-zorro-antd/switch';
-} from 'ng-zorro-antd';
+import {NzTableModule} from 'ng-zorro-antd/table';
+import {NzTagModule} from 'ng-zorro-antd/tag';
+import {NzToolTipModule} from 'ng-zorro-antd/tooltip';
+import {NzTypographyModule} from 'ng-zorro-antd/typography';
 import {FormsModule} from '@angular/forms';
-import {DragDropModule} from '@angular/cdk/drag-drop'
+import {DragDropModule} from '@angular/cdk/drag-drop';
 
 @NgModule({
     declarations: [

src/app/view/admin/components/common-table/data.ts

@@ -7,19 +7,19 @@ export class Data<T> {
     primaryKey?: boolean = false;
     isActionColumns?: boolean = false;
     template?: {
-        template: TemplateRef<any>,
+        template: TemplateRef<any>;
         keymap?: {
-            [value: string]: string
+            [value: string]: string;
-        }
+        };
     };
     // order?: number;
     action?: {
-        name: string,
+        name: string;
-        color?: string,
+        color?: string;
-        order?: number,
+        order?: number;
-        fontSize?: string,
+        fontSize?: string;
-        needConfirm?: boolean,
+        needConfirm?: boolean;
-        click: (data: T) => void,
+        click: (data: T) => void;
         hover?: (data: T) => void | null;
-    }[] = []
+    }[] = [];
 }

src/app/view/admin/components/editable-tag/editable-tag.component.ts

@@ -1,15 +1,5 @@
-import {
+import {Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild} from '@angular/core';
-    Component,
+import {NzModalRef, NzModalService} from 'ng-zorro-antd/modal';
-    ElementRef,
-    EventEmitter,
-    Input,
-    OnChanges,
-    OnInit,
-    Output,
-    SimpleChanges,
-    ViewChild
-} from '@angular/core';
-import {NzModalRef, NzModalService} from 'ng-zorro-antd';
 
 @Component({
     selector: 'editable-tag',
@@ -39,17 +29,9 @@ import {NzModalRef, NzModalService} from 'ng-zorro-antd';
 })
 export class EditableTagComponent implements OnInit, OnChanges {
 
-    private static instanceArray: EditableTagComponent[] = []
+    private static instanceArray: EditableTagComponent[] = [];
-
-    constructor(private modal: NzModalService) {
-        EditableTagComponent.instanceArray.push(this);
-    }
-
-    inputVisible = false;
-    inputValue = '';
     @ViewChild('inputElement', {static: false}) inputElement?: ElementRef;
-
+    @Output() valueChange = new EventEmitter<{ value: string; originalValue: string; changed: boolean }>();
-    @Output() valueChange = new EventEmitter<{ value: string, originalValue: string, changed: boolean }>();
     @Input() color: string;
     @Input() showEditIcon: boolean;
     @Input() showBorder: boolean;
@@ -60,14 +42,19 @@ export class EditableTagComponent implements OnInit, OnChanges {
     @Input() autoClear: boolean;
     @Input() size: 'small' | 'default' | 'large';
     @Output() inEditStatus = new EventEmitter<void>();
-    @Output() modalOK = new EventEmitter<{ value: string, originalValue: string, changed: boolean }>();
+    @Output() modalOK = new EventEmitter<{ value: string; originalValue: string; changed: boolean }>();
-    @Output() modalCancel = new EventEmitter<{ value: string, originalValue: string, changed: boolean }>();
+    @Output() modalCancel = new EventEmitter<{ value: string; originalValue: string; changed: boolean }>();
-
+    inputVisible = false;
+    inputValue = '';
+    confirmModal?: NzModalRef;
     private tmpKey: any;
     private doubleClickInfo = {
         date: null,
     };
-    confirmModal?: NzModalRef;
+
+    constructor(private modal: NzModalService) {
+        EditableTagComponent.instanceArray.push(this);
+    }
 
     ngOnInit(): void {
         if (this.showEditIcon == null) {
@@ -97,17 +84,17 @@ export class EditableTagComponent implements OnInit, OnChanges {
         if (this.doubleClick && doubleClick) {
             if (!this.doubleClickInfo.date) {
                 this.doubleClickInfo.date = new Date().getTime();
-                return
+                return;
             }
             if (new Date().getTime() - this.doubleClickInfo.date < 200) {
-                this.inEditStatus.emit()
+                this.inEditStatus.emit();
                 this.inputVisible = true;
                 setTimeout(() => this.inputElement?.nativeElement.focus(), 10);
             }
             this.doubleClickInfo.date = new Date().getTime();
         } else {
             this.inputVisible = true;
-            this.inEditStatus.emit()
+            this.inEditStatus.emit();
             setTimeout(() => this.inputElement?.nativeElement.focus(), 10);
         }
     }
@@ -118,7 +105,7 @@ export class EditableTagComponent implements OnInit, OnChanges {
             if (tag.key === this.tmpKey) {
                 tag.showInput(false);
             }
-        })
+        });
     }
 
 
@@ -127,8 +114,8 @@ export class EditableTagComponent implements OnInit, OnChanges {
             value: this.inputValue,
             originalValue: this.text,
             changed: this.inputValue !== this.text
-        }
+        };
-        this.valueChange.emit(value)
+        this.valueChange.emit(value);
         this.text = this.inputValue;
         this.inputValue = '';
         this.inputVisible = false;
@@ -141,7 +128,7 @@ export class EditableTagComponent implements OnInit, OnChanges {
             });
         }
         if (this.autoClear) {
-            this.text = null
+            this.text = null;
         }
     }
 

src/app/view/admin/components/editable-tag/editable-tag.module.ts

@@ -1,7 +1,9 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {EditableTagComponent} from './editable-tag.component';
-import {NzIconModule, NzInputModule, NzTagModule} from 'ng-zorro-antd';
+import {NzIconModule} from 'ng-zorro-antd/icon';
+import {NzInputModule} from 'ng-zorro-antd/input';
+import {NzTagModule} from 'ng-zorro-antd/tag';
 import {FormsModule} from '@angular/forms';
 
 

src/app/view/admin/test-common-table/test-common-table.component.html

@@ -14,15 +14,15 @@
     <nz-tag [nzColor]="'#f50'">{{value}}</nz-tag>
 </ng-template>
 
-<ng-template #original let-value="value" let-originValue="originValue">
+<ng-template #original let-originValue="originValue" let-value="value">
     <nz-tag [nzColor]="originValue?'#87d068':'#f50'">{{value}}</nz-tag>
 </ng-template>
 
 <ng-template #open let-value="value">
-    <label nz-checkbox nzDisabled [ngModel]="value"></label>
+    <label [ngModel]="value" nz-checkbox nzDisabled></label>
 </ng-template>
 
 
 <editable-tag color="green">hhh</editable-tag>
-<editable-tag color="green" [showEditIcon]="false">hhh</editable-tag>
+<editable-tag [showEditIcon]="false" color="green">hhh</editable-tag>
-<editable-tag color="green" [showBorder]="false">hhh</editable-tag>
+<editable-tag [showBorder]="false" color="green">hhh</editable-tag>

src/app/view/admin/test-common-table/test-common-table.component.ts

@@ -1,4 +1,4 @@
-import {Component, OnInit, TemplateRef, ViewChild} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {Data} from '../components/common-table/data';
 import {Article} from '../../../class/Article';
 import {RequestObj} from '../../../class/HttpReqAndResp';
@@ -24,8 +24,12 @@ summary:    a
 tags: [{id: 26, name: "脚本"}, {id: 27, name: "网课"}]
 title: "教你动手写一个刷课脚本"
 updateDateFormat: "2020-05-27 00:55:05"*/
+
     // @ViewChild('tag') tagTemp: TemplateRef<any>;
 
+    data: Data<Article>[];
+    req: RequestObj;
+
     constructor() {
         this.data = [
             {title: '主键', fieldValue: 'id', show: false, primaryKey: true},
@@ -58,12 +62,9 @@ updateDateFormat: "2020-05-27 00:55:05"*/
                     },
                 ]
             }
-        ]
+        ];
     }
 
-    data: Data<Article>[];
-    req: RequestObj;
-
     ngOnInit(): void {
         this.req = {
             path: '/admin/articles',
@@ -72,7 +73,7 @@ updateDateFormat: "2020-05-27 00:55:05"*/
                 page: 1,
                 count: 10
             }
-        }
+        };
     }
 
 }

src/app/view/admin/test-common-table/test-common-table.module.ts

@@ -1,9 +1,10 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {TestCommonTableComponent} from './test-common-table.component';
-import {Router, RouterModule} from '@angular/router';
+import {RouterModule} from '@angular/router';
 import {CommonTableModule} from '../components/common-table/common-table.module';
-import {NzCheckboxModule, NzTagModule} from 'ng-zorro-antd';
+import {NzCheckboxModule} from 'ng-zorro-antd/checkbox';
+import {NzTagModule} from 'ng-zorro-antd/tag';
 import {FormsModule} from '@angular/forms';
 import {EditableTagModule} from '../components/editable-tag/editable-tag.module';
 

src/app/view/article/article.component.html

@@ -1,6 +1,6 @@
 <div id="main">
 
-    <div id="article-content"></div>
+    <div #divElement id="article-content"></div>
     <ng-template [ngIf]="article">
         <span id="over">over</span>
 
@@ -15,20 +15,20 @@
         <div class="article-tag" id="tag">
             <!-- TODO -->
             <span *ngFor="let item of (article.tags||'')" class="tag">
-                        <i nz-icon nzType="tag" nzTheme="fill"></i>
+                        <i nz-icon nzTheme="fill" nzType="tag"></i>
-                        <a class="tag" [routerLink]="['/tags/'+item.name]">{{item.name}}</a>
+                        <a [routerLink]="['/tags/'+item.name]" class="tag">{{item.name}}</a>
             </span>
         </div>
 
         <div class="article-bAnda">
             <a (click)="toArticle(article.nextArticle.id)" [class.disabled]="!article.nextArticle">
-                <i nz-icon nzType="left" nzTheme="outline"></i>
+                <i nz-icon nzTheme="outline" nzType="left"></i>
                 {{(article.nextArticle && article.nextArticle.title) || '无'}}
             </a>
             <a (click)="toArticle(article.preArticle.id)" [class.disabled]="!article.preArticle"
-               style="float: right" id="pre">
+               id="pre" style="float: right">
                 {{(article.preArticle && article.preArticle.title) || '无'}}
-                <i nz-icon nzType="right" nzTheme="outline"></i>
+                <i nz-icon nzTheme="outline" nzType="right"></i>
             </a>
         </div>
 
@@ -36,18 +36,18 @@
     </ng-template>
 
     <nz-comment id="f-comment">
-        <nz-avatar nz-comment-avatar nzIcon="user" [nzSrc]="avatarImgUrl"></nz-avatar>
+        <nz-avatar [nzSrc]="avatarImgUrl" nz-comment-avatar nzIcon="user"></nz-avatar>
         <nz-comment-content>
             <nz-form-item>
-                            <textarea [(ngModel)]="comment.content" nz-input rows="4" [disabled]="!user"
+                            <textarea [(ngModel)]="comment.content" [disabled]="!user" [nzAutosize]="{ minRows: 2, maxRows: user?6:2 }" nz-input
-                                      [nzAutosize]="{ minRows: 2, maxRows: user?6:2 }"></textarea>
+                                      rows="4"></textarea>
-                <span *ngIf="!user">请先 <a routerLink="/user/login"
+                <span *ngIf="!user">请先 <a [queryParams]="{url:'/article/'+articleId}"
-                                          [queryParams]="{url:'/article/'+articleId}">登录</a></span>
+                                          routerLink="/user/login">登录</a></span>
             </nz-form-item>
             <nz-form-item>
-                <button nz-button nzType="primary" [nzLoading]="!user&&submitting"
+                <button (click)="submitComment(true)" [disabled]="!comment.content" [nzLoading]="!user&&submitting"
-                        [disabled]="!comment.content"
+                        nz-button
-                        (click)="submitComment(true)">评论
+                        nzType="primary">评论
                 </button>
             </nz-form-item>
         </nz-comment-content>
@@ -61,28 +61,28 @@
         <nz-list [nzLoading]="!commentPage">
             <nz-list-item *ngFor="let comment of commentPage.list">
                 <nz-comment [nzAuthor]="comment.fromUser.displayName" [nzDatetime]="comment.date" style="width: 100%">
-                    <nz-avatar nz-comment-avatar nzIcon="user" [nzSrc]="comment.fromUser.avatarImgUrl"
+                    <nz-avatar *ngIf="comment.fromUser.avatarImgUrl" [nzSrc]="comment.fromUser.avatarImgUrl" nz-comment-avatar
-                               *ngIf="comment.fromUser.avatarImgUrl">
+                               nzIcon="user">
                     </nz-avatar>
-                    <nz-avatar nz-comment-avatar nzIcon="user" [nzText]="comment.fromUser.displayName"
+                    <nz-avatar *ngIf="!comment.fromUser.avatarImgUrl" [nzText]="comment.fromUser.displayName" nz-comment-avatar
-                               *ngIf="!comment.fromUser.avatarImgUrl">
+                               nzIcon="user">
                     </nz-avatar>
                     <nz-comment-content>
                         <p style="font-size: larger">{{ comment.content }}</p>
                     </nz-comment-content>
                     <nz-comment-action>
-                        <i nz-icon nzType="message" nzTheme="outline"></i>
+                        <i nz-icon nzTheme="outline" nzType="message"></i>
-                        <button nz-button nzType="link" (click)="resp(comment.id,comment.fromUser.displayName)">回复
+                        <button (click)="resp(comment.id,comment.fromUser.displayName)" nz-button nzType="link">回复
                         </button>
                     </nz-comment-action>
 
                     <nz-list-item *ngFor="let com of comment.respComment">
                         <nz-comment [nzAuthor]="com.fromUser.displayName" [nzDatetime]="com.date">
-                            <nz-avatar nz-comment-avatar nzIcon="user" [nzSrc]="com.fromUser.avatarImgUrl"
+                            <nz-avatar *ngIf="com.fromUser.avatarImgUrl" [nzSrc]="com.fromUser.avatarImgUrl" nz-comment-avatar
-                                       *ngIf="com.fromUser.avatarImgUrl">
+                                       nzIcon="user">
                             </nz-avatar>
-                            <nz-avatar nz-comment-avatar nzIcon="user" [nzText]="com.fromUser.displayName"
+                            <nz-avatar *ngIf="!com.fromUser.avatarImgUrl" [nzText]="com.fromUser.displayName" nz-comment-avatar
-                                       *ngIf="!com.fromUser.avatarImgUrl">
+                                       nzIcon="user">
                             </nz-avatar>
                             <nz-comment-content>
                                 <p style="font-size: larger">{{ com.content }}</p>
@@ -96,18 +96,18 @@
 
                     <nz-form-item *ngIf="pid==comment.id">
                         <nz-input-group [nzAddOnBefore]="respName">
-                            <textarea nz-input [(ngModel)]="content" placeholder="写出你的想法"
+                            <textarea [(ngModel)]="content" [disabled]="!user" [nzAutosize]="{ minRows: 2, maxRows: 6 }"
-                                      [nzAutosize]="{ minRows: 2, maxRows: 6 }" [disabled]="!user">
+                                      nz-input placeholder="写出你的想法">
                             </textarea>
                             <ng-template #respName>
                                 <span>@{{name}}</span>
                             </ng-template>
                         </nz-input-group>
-                        <div *ngIf="!user">请先 <a routerLink="/user/login"
+                        <div *ngIf="!user">请先 <a [queryParams]="{url:'/article/'+articleId}"
-                                                 [queryParams]="{url:'/article/'+articleId}">登录</a></div>
+                                                 routerLink="/user/login">登录</a></div>
-                        <button nz-button (click)="pid=null" style="margin-top: 10px;">取消</button>
+                        <button (click)="pid=null" nz-button style="margin-top: 10px;">取消</button>
-                        <button nz-button nzType="primary" (click)="submitComment(false)"
+                        <button (click)="submitComment(false)" [nzLoading]="!user&&submitting" nz-button
-                                style="margin-left: 30px;margin-top: 10px;" [nzLoading]="!user&&submitting">回复
+                                nzType="primary" style="margin-left: 30px;margin-top: 10px;">回复
                         </button>
 
                     </nz-form-item>

src/app/view/article/article.component.less

@@ -102,6 +102,7 @@ nz-content {
   .article-bAnda {
     height: 70px;
     max-height: 110px;
+
     a {
       display: block;
     }

src/app/view/article/article.component.ts

@@ -1,16 +1,15 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {ApiService} from '../../api/api.service';
 import {Article} from '../../class/Article';
 import {Title} from '@angular/platform-browser';
 import {User} from '../../class/User';
-import {CommentReq} from '../../class/Comment';
+import {Comment, CommentReq} from '../../class/Comment';
 import {PageList} from '../../class/HttpReqAndResp';
-import {Comment} from '../../class/Comment';
 import {GlobalUserService} from '../../services/global-user.service';
+import VditorPreview from 'vditor/dist/method.min';
 
-declare var editormd;
+declare let $;
-declare var $;
 
 @Component({
     selector: 'view-article',
@@ -19,6 +18,20 @@ declare var $;
 })
 export class ArticleComponent implements OnInit {
 
+    @ViewChild('divElement') divElement: ElementRef;
+    articleId: number;
+    article: Article;
+    copyRightUrl: string;
+    user: User;
+    submitting: boolean = false;
+    comment: CommentReq;
+    // 作为输入框@ 的提示
+    name: string;
+    commentPage: PageList<Comment>;
+    avatarImgUrl: string;
+    pid: number;
+    content: string;
+
     constructor(private activatedRoute: ActivatedRoute,
                 private apiService: ApiService,
                 private userService: GlobalUserService,
@@ -27,19 +40,7 @@ export class ArticleComponent implements OnInit {
         this.articleId = +activatedRoute.snapshot.paramMap.get('id');
     }
 
-    articleId: number;
+    // private vditor: Vditor;
-    article: Article;
-    copyRightUrl: string;
-    user: User;
-    submitting: boolean = false;
-
-    comment: CommentReq;
-    // 作为输入框@ 的提示
-    name: string;
-    commentPage: PageList<Comment>;
-    avatarImgUrl: string;
-    pid: number;
-    content: string;
 
     ngOnInit() {
         this.toArticle(this.articleId);
@@ -48,24 +49,37 @@ export class ArticleComponent implements OnInit {
             error: (err) => null,
             next: data => {
                 this.user = data.result;
-                if (data.result) this.avatarImgUrl = data.result.avatarImgUrl;
+                if (data.result) {this.avatarImgUrl = data.result.avatarImgUrl;}
             }
         });
         this.comment = new CommentReq(`article/${this.articleId}`);
     }
 
     parseMd(md: string) {
-        editormd.markdownToHTML('article-content', {
+        const option: IPreviewOptions = {
-            markdown: this.article.mdContent,
+            anchor: 1,
-            htmlDecode: 'style,script,iframe',  // you can filter tags decode
+            hljs: {
-            toc: false,
+                lineNumber: true
-            tocm: false,    // Using [TOCM]
+            },
-            // tocContainer: '#article-slider', // 自定义 ToC 容器层
+            markdown: {
-            // tocDropdown: true,
+                autoSpace: true,
-            emoji: true,
+                fixTermTypo: true,
-            taskList: true,
+                chinesePunct: true,
-            flowChart: true,  // 默认不解析
+                linkBase: location.href,
-        });
+                toc: true,
+                mark: true
+            },
+            after: () => {
+                //  处理锚点
+                const tocList: HTMLCollection = this.divElement.nativeElement
+                    .getElementsByClassName('vditor-toc')[0]?.getElementsByTagName(`a`);
+                for (let i = 0; i < tocList?.length; i++) {
+                    const linkValue = tocList.item(i).getAttribute('href');
+                    tocList.item(i).setAttribute('href', window.location.pathname + linkValue);
+                }
+            }
+        };
+        VditorPreview.preview(this.divElement.nativeElement, md, option);
     }
 
     toArticle(id: number) {

src/app/view/article/article.module.ts

@@ -2,16 +2,19 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {ArticleRoutingModule} from './article-routing.module';
 import {ArticleComponent} from './article.component';
-import {
+import {NzAffixModule} from 'ng-zorro-antd/affix';
-    NzAffixModule,
+import {NzAnchorModule} from 'ng-zorro-antd/anchor';
-    NzAnchorModule, NzAvatarModule,
+import {NzAvatarModule} from 'ng-zorro-antd/avatar';
-    NzButtonModule,
+import {NzButtonModule} from 'ng-zorro-antd/button';
-    NzCommentModule,
+import {NzCommentModule} from 'ng-zorro-antd/comment';
-    NzDividerModule, NzFormModule,
+import {NzDividerModule} from 'ng-zorro-antd/divider';
-    NzGridModule,
+import {NzFormModule} from 'ng-zorro-antd/form';
-    NzIconModule, NzInputModule,
+import {NzGridModule} from 'ng-zorro-antd/grid';
-    NzLayoutModule, NzListModule, NzTabsModule
+import {NzIconModule} from 'ng-zorro-antd/icon';
-} from 'ng-zorro-antd';
+import {NzInputModule} from 'ng-zorro-antd/input';
+import {NzLayoutModule} from 'ng-zorro-antd/layout';
+import {NzListModule} from 'ng-zorro-antd/list';
+import {NzTabsModule} from 'ng-zorro-antd/tabs';
 import {FormsModule} from '@angular/forms';
 
 

src/app/view/category/category.component.html

@@ -3,9 +3,9 @@
 
     <div id="category">
         <ul *ngIf="categoryList.length">
-            <c-tag-tag *ngFor="let category of categoryList"
+            <c-tag-tag (tagClick)="changeCategory(category)"
-                       [tag]="{name:category.name,size:category.articles.length}"
+                       *ngFor="let category of categoryList"
-                       (tagClick)="changeCategory(category)">
+                       [tag]="{name:category.name,size:category.articles.length}">
 
             </c-tag-tag>
         </ul>
@@ -16,7 +16,7 @@
         <span style="font-weight: bolder;">{{name}}</span>
     </span>
 
-    <ul id="detail" *ngIf="articleList&&articleList.list.length">
+    <ul *ngIf="articleList&&articleList.list.length" id="detail">
         <c-article-detail-card *ngFor="let article of articleList.list"
                                [data]="article" [showMediaArea]="false" [showTagArea]="false">
         </c-article-detail-card>

src/app/view/category/category.component.less

@@ -23,6 +23,7 @@
   #main {
     width: 100%;
   }
+
   #detail {
     margin: 10px 40px 10px 0;
   }

src/app/view/category/category.component.ts

@@ -1,7 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 import {ApiService} from '../../api/api.service';
 import {Tag} from '../../class/Tag';
-import {NzMessageService} from 'ng-zorro-antd';
+import {NzMessageService} from 'ng-zorro-antd/message';
 import {PageList} from '../../class/HttpReqAndResp';
 import {Article} from '../../class/Article';
 import {ActivatedRoute} from '@angular/router';
@@ -15,6 +15,11 @@ import {Title} from '@angular/platform-browser';
 })
 export class CategoryComponent implements OnInit {
 
+    categoryList: Tag[] = [];
+    articleList: PageList<Article>;
+    name: string;
+    private category: Tag;
+
     constructor(private apiService: ApiService,
                 private nzMessageService: NzMessageService,
                 private activatedRoute: ActivatedRoute,
@@ -22,12 +27,6 @@ export class CategoryComponent implements OnInit {
                 private title: Title) {
     }
 
-    categoryList: Tag[] = [];
-    private category: Tag;
-    articleList: PageList<Article>;
-
-    name: string;
-
     ngOnInit() {
         this.name = this.activatedRoute.snapshot.paramMap.get('category');
         this.getCategories(this.name == null);

src/app/view/category/category.module.ts

@@ -2,7 +2,8 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {CategoryComponent} from './category.component';
 import {CategoryRoutingModule} from './category-routing.module';
-import {NzIconModule, NzToolTipModule} from 'ng-zorro-antd';
+import {NzIconModule} from 'ng-zorro-antd/icon';
+import {NzToolTipModule} from 'ng-zorro-antd/tooltip';
 import {IndexModule} from '../index/index.module';
 
 

src/app/view/email-verify/email-verify.component.html

@@ -1,7 +1,5 @@
 <div>
     <div id="main">
-        <nz-alert [nzType]="type" [nzMessage]="message"
+        <nz-alert [nzDescription]="desc" [nzMessage]="message" [nzType]="type" nzShowIcon></nz-alert>
-                  [nzDescription]="desc" nzShowIcon>
-        </nz-alert>
     </div>
 </div>

src/app/view/email-verify/email-verify.component.ts

@@ -10,6 +10,12 @@ import {Title} from '@angular/platform-browser';
 })
 export class EmailVerifyComponent implements OnInit {
 
+    type: string = 'info';
+    message: string = '正在验证，请稍等';
+    desc: string = '';
+    private email: string;
+    private verifyId: string;
+
     constructor(private titleService: Title,
                 private router: Router,
                 public routerinfo: ActivatedRoute,
@@ -17,14 +23,6 @@ export class EmailVerifyComponent implements OnInit {
         titleService.setTitle('小海博客 | 邮箱验证');
     }
 
-    type: string = 'info';
-    message: string = '正在验证，请稍等';
-    desc: string = '';
-
-
-    private email: string;
-    private verifyId: string;
-
     ngOnInit(): void {
         this.email = this.routerinfo.snapshot.queryParams.email;
         this.verifyId = this.routerinfo.snapshot.queryParams.verifyId;

src/app/view/email-verify/email-verify.module.ts

@@ -2,7 +2,7 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {Route, RouterModule} from '@angular/router';
 import {EmailVerifyComponent} from './email-verify.component';
-import {NzAlertModule} from 'ng-zorro-antd';
+import {NzAlertModule} from 'ng-zorro-antd/alert';
 
 const routes: Route[] = [
     {path: '**', component: EmailVerifyComponent}

src/app/view/index/components/article-detail-card/article-detail-card.component.html

@@ -1,19 +1,19 @@
-<nz-card id="article-card" [nzLoading]="data==null">
+<nz-card [nzLoading]="data==null" id="article-card">
     <h1><a [routerLink]="'/article/'+data.id">{{data.title}}</a></h1>
     <div>
-        <span *ngIf="showMediaArea" id="article-original" [ngClass]="data.original?'original':'reproduced'">
+        <span *ngIf="showMediaArea" [ngClass]="data.original?'original':'reproduced'" id="article-original">
             {{data.original ? '原创' : '转载'}}
         </span>
         <span *ngIf="showMediaArea" class="badge">
-            <i nz-icon nzType="calendar" nzTheme="outline"></i>
+            <i nz-icon nzTheme="outline" nzType="calendar"></i>
             <span>{{data.publishDateFormat}}</span>
         </span>
         <span *ngIf="showMediaArea" class="badge">
-            <i nz-icon nzType="user" nzTheme="outline"></i>
+            <i nz-icon nzTheme="outline" nzType="user"></i>
             <span>{{data.author.displayName}}</span>
         </span>
         <span *ngIf="showMediaArea" class="badge">
-            <i nz-icon nzType="file" nzTheme="outline"></i>
+            <i nz-icon nzTheme="outline" nzType="file"></i>
             <span>
                 <a [routerLink]="'/categories/'+data.category">{{data.category}}</a>
             </span>
@@ -21,13 +21,13 @@
     </div>
     <p>{{data.summary}}</p>
     <span style="float: right;margin-bottom: 10px">
-        <a [routerLink]="'/article/'+data.id">阅读更多<i nz-icon nzType="right" nzTheme="outline"></i></a>
+        <a [routerLink]="'/article/'+data.id">阅读更多<i nz-icon nzTheme="outline" nzType="right"></i></a>
     </span>
     <ng-template [ngIf]="showTagArea&&data.tags.length>0">
         <nz-divider></nz-divider>
         <div>
         <span *ngFor="let tag of data.tags">
-            <i nz-icon nzType="tag" nzTheme="outline"></i>
+            <i nz-icon nzTheme="outline" nzType="tag"></i>
             <a [routerLink]="'/tags/'+tag.name">{{tag.name}}</a>
         </span>
         </div>

src/app/view/index/components/article-detail-card/article-detail-card.component.ts

@@ -1,6 +1,5 @@
 import {Component, Input, OnInit} from '@angular/core';
 import {Article} from '../../../../class/Article';
-import {ColorList} from '../../../../utils/color';
 
 @Component({
     selector: 'c-article-detail-card',
@@ -9,13 +8,13 @@ import {ColorList} from '../../../../utils/color';
 })
 export class ArticleDetailCardComponent implements OnInit {
 
-    constructor() {
-    }
-
     @Input() data: Article;
     @Input() showMediaArea: boolean;
     @Input() showTagArea: boolean;
 
+    constructor() {
+    }
+
     ngOnInit() {
         if (this.data == null || this.data.id == null) {
             throw Error('data 不可为空');

src/app/view/index/components/card-detail/card-detail.component.ts

@@ -7,11 +7,11 @@ import {Component, Input, OnInit} from '@angular/core';
 })
 export class CardDetailComponent implements OnInit {
 
+    @Input() title: string;
+
     constructor() {
     }
 
-    @Input() title: string;
-
     // @ContentChildren() c:T;
 
     ngOnInit() {

src/app/view/index/components/tag-tag/tag-tag.component.html

@@ -1,19 +1,19 @@
-<div class="tag-tag" nz-tooltip
+<div (click)="click()" [nzTooltipTitle]="tag.name"
-     style="cursor: pointer"
+     class="tag-tag"
-     [nzTooltipTitle]="tag.name"
+     nz-tooltip
-     (click)="click()">
+     style="cursor: pointer">
-    <span class="tag-name"
+    <span [style.background-color]="randColor.bgColor"
-          [style.background-color]="randColor.bgColor"
           [style.color]="randColor.fontColor"
           [style.font-size]="size=='large'?'large':''"
           [style.padding]="size=='large'?'12px 15px':'5px 7px'"
+          class="tag-name"
     >{{tag.name}}
     </span>
     <ng-template [ngIf]="enableCount">
-        <span class="tag-count"
+        <span [style.border-color]="randColor.bgColor"
-              [style.border-color]="randColor.bgColor"
               [style.font-size]="size=='large'?'large':''"
               [style.padding]="size=='large'?'11px 14px':'4px 6px'"
+              class="tag-count"
         >{{tag.size}}
          </span>
     </ng-template>

src/app/view/index/components/tag-tag/tag-tag.component.ts

@@ -1,5 +1,5 @@
 import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
-import {ColorList} from '../../../../utils/color';
+import {COLOR_LIST} from '../../../../utils/color';
 import {Router} from '@angular/router';
 
 @Component({
@@ -9,20 +9,19 @@ import {Router} from '@angular/router';
 })
 export class TagTagComponent implements OnInit {
 
-    constructor(private router: Router) {
+    @Input() tag: { name: string; size: number };
-    }
-
-    @Input() tag: { name: string, size: number };
     @Input() size: 'default' | 'large' = 'default';
     @Input() clickable: boolean; // default true
     @Input() enableCount: boolean; // default true
     @Output() tagClick = new EventEmitter();
+    randColor: { bgColor: string; fontColor: string };
 
-    randColor: { bgColor: string, fontColor: string };
+    constructor(private router: Router) {
+    }
 
     ngOnInit() {
-        const randomNumber = Math.floor(ColorList.length * Math.random());
+        const randomNumber = Math.floor(COLOR_LIST.length * Math.random());
-        this.randColor = ColorList[randomNumber];
+        this.randColor = COLOR_LIST[randomNumber];
         if (this.clickable == null) {
             this.clickable = true;
         }

src/app/view/index/index.component.html

@@ -1,83 +1,83 @@
-<div nz-row id="index-container">
+<div id="index-container" nz-row>
-    <div nz-col nzSpan="14" nzOffset="2" id="index-left">
+    <div id="index-left" nz-col nzOffset="2" nzSpan="14">
         <ng-template [ngIf]="articles&&articles.total">
             <c-article-detail-card *ngFor="let item of articles.list" [data]="item">
             </c-article-detail-card>
         </ng-template>
-        <nz-pagination style="text-align: center"
+        <nz-pagination (nzPageIndexChange)="getArticles($event)"
                        *ngIf="articles" [nzPageIndex]="articles.pageNum"
-                       [nzTotal]="articles.total"
                        [nzPageSize]="articles.pageSize"
-                       (nzPageIndexChange)="getArticles($event)">
+                       [nzTotal]="articles.total"
+                       style="text-align: center">
 
         </nz-pagination>
     </div>
-    <div nz-col nzSpan="5" nzOffset="1" id="index-right">
+    <div id="index-right" nz-col nzOffset="1" nzSpan="5">
         <!--   关于博主     -->
         <c-card-detail title="关于博主">
             <div id="index-bloger-container" title="">
-                <img id="index-bloger-pic"
+                <img [src]="imgUrl"
-                     [src]="imgUrl" alt="pic">
+                     alt="pic" id="index-bloger-pic">
                 <div id="index-bloger-desc">
-                    <p><span style="font-weight: bold;font-size: x-large;"
+                    <p><span [title]="desc"
-                             [title]="desc"> 郑 海</span></p>
+                             style="font-weight: bold;font-size: x-large;"> 郑 海</span></p>
                     <p><i nz-icon nzType="blog:location"></i> Location : 武汉</p>
-                    <p><i nz-icon nzType="github" nzTheme="outline"></i>
+                    <p><i nz-icon nzTheme="outline" nzType="github"></i>
-                        Github : <a target="_blank" href="https://github.com/xiaohai2271"> link>></a>
+                        Github : <a href="https://github.com/xiaohai2271" target="_blank"> link>></a>
                     </p>
                 </div>
             </div>
             <div id="index-bloger-button-area" title="">
                 <div id="index-bloger-qq-btn">
-                    <i nz-icon nzType="qq" title="QQ二维码" nzTheme="outline"
+                    <i (mouseenter)="changeImg(qqQrImgUrl)" (mouseleave)="changeImg()" nz-icon nzTheme="outline"
-                       style="color: #ff8936;border-color: #ff8936;cursor: pointer"
+                       nzType="qq"
-                       (mouseenter)="changeImg(qqQrImgUrl)" (mouseleave)="changeImg()"></i>
+                       style="color: #ff8936;border-color: #ff8936;cursor: pointer" title="QQ二维码"></i>
                 </div>
                 <div id="index-bloger-wx-btn">
-                    <i nz-icon nzType="wechat" title="微信二维码" nzTheme="outline"
+                    <i (mouseenter)="changeImg(wxQrImgUrl)" (mouseleave)="changeImg()" nz-icon nzTheme="outline"
-                       style="color: #7bcfa6;border-color: #7bcfa6;cursor: pointer"
+                       nzType="wechat"
-                       (mouseenter)="changeImg(wxQrImgUrl)" (mouseleave)="changeImg()"></i>
+                       style="color: #7bcfa6;border-color: #7bcfa6;cursor: pointer" title="微信二维码"></i>
                 </div>
             </div>
         </c-card-detail>
 
         <!--  分类云  -->
         <c-card-detail title="分类云">
-            <div title="" style="text-align: center;user-select: none">
+            <div style="text-align: center;user-select: none" title="">
-                <c-tag-tag *ngFor="let category of categoryList"
+                <c-tag-tag (tagClick)="toCategory(category.name)"
-                           [tag]="{name:category.name,size:category.articles.length}"
+                           *ngFor="let category of categoryList"
-                           (tagClick)="toCategory(category.name)">
+                           [tag]="{name:category.name,size:category.articles.length}">
                 </c-tag-tag>
             </div>
         </c-card-detail>
 
         <!--  标签云  -->
         <c-card-detail title="标签云">
-            <div title="" style="text-align: center;user-select: none">
+            <div style="text-align: center;user-select: none" title="">
-                <c-tag-tag *ngFor="let tag of tagNameAndNumber" [tag]="tag" (tagClick)="toTag(tag.name)">
+                <c-tag-tag (tagClick)="toTag(tag.name)" *ngFor="let tag of tagNameAndNumber" [tag]="tag">
                 </c-tag-tag>
             </div>
         </c-card-detail>
 
         <!--  网站信息  -->
-        <c-card-detail title="网站信息" id="index-site-info">
+        <c-card-detail id="index-site-info" title="网站信息">
             <p *ngIf="counts && counts.articleCount">
-                <i nz-icon nzType="info-circle" nzTheme="outline"></i>文章总数: {{counts.articleCount}}篇
+                <i nz-icon nzTheme="outline" nzType="info-circle"></i>文章总数: {{counts.articleCount}}篇
             </p>
             <p *ngIf="counts && counts.categoryCount">
-                <i nz-icon nzType="info-circle" nzTheme="outline"></i>分类总数: {{counts.categoryCount}}个
+                <i nz-icon nzTheme="outline" nzType="info-circle"></i>分类总数: {{counts.categoryCount}}个
             </p>
             <p *ngIf="counts && counts.tagCount">
-                <i nz-icon nzType="info-circle" nzTheme="outline"></i>标签总数: {{counts.tagCount}}个
+                <i nz-icon nzTheme="outline" nzType="info-circle"></i>标签总数: {{counts.tagCount}}个
             </p>
             <p *ngIf="counts && counts.visitorCount">
-                <i nz-icon nzType="info-circle" nzTheme="outline"></i>访客总数: {{counts.visitorCount}}次
+                <i nz-icon nzTheme="outline" nzType="info-circle"></i>访客总数: {{counts.visitorCount}}次
             </p>
             <p *ngIf="lastestUpdate">
-                <i nz-icon nzType="info-circle" nzTheme="outline"></i>上次更新时间: {{lastestUpdate.lastUpdateTime}}
+                <i nz-icon nzTheme="outline" nzType="info-circle"></i>上次更新时间: {{lastestUpdate.lastUpdateTime}}
             </p>
             <p *ngIf="lastestUpdate&&lastestUpdate.committerDate">
-                <i nz-icon nzType="info-circle" nzTheme="outline"></i>上次提交代码时间: {{lastestUpdate.committerDate}}
+                <i nz-icon nzTheme="outline" nzType="info-circle"></i>上次提交代码时间: {{lastestUpdate.committerDate}}
             </p>
         </c-card-detail>
 

src/app/view/index/index.component.ts

@@ -1,7 +1,8 @@
 import {Component, OnInit} from '@angular/core';
 import {ApiService} from '../../api/api.service';
 import {Article} from '../../class/Article';
-import {NzIconService, NzMessageService} from 'ng-zorro-antd';
+import {NzIconService} from 'ng-zorro-antd/icon';
+import {NzMessageService} from 'ng-zorro-antd/message';
 import {SvgIconUtil} from '../../utils/svgIconUtil';
 import {PageList, RequestObj} from '../../class/HttpReqAndResp';
 import {Router} from '@angular/router';
@@ -16,6 +17,30 @@ import {Title} from '@angular/platform-browser';
 })
 export class IndexComponent implements OnInit {
 
+    readonly logoImgUrl: string = 'https://56462271.oss-cn-beijing.aliyuncs.com/web/logo.png';
+    readonly qqQrImgUrl: string = 'https://56462271.oss-cn-beijing.aliyuncs.com/web/qq.jpg';
+    readonly wxQrImgUrl: string = 'https://56462271.oss-cn-beijing.aliyuncs.com/web/wx.jpg';
+    imgUrl: string;
+    desc: string;
+    articles: PageList<Article>;
+    tagNameAndNumber: { name: string; size: number }[];
+    categoryList: Category[];
+    counts: {
+        articleCount: number;
+        visitorCount: number;
+        categoryCount: number;
+        tagCount: number;
+        commentCount: number;
+    };
+    lastestUpdate: {
+        lastUpdateTime: string;
+        lastUpdateInfo: string;
+        lastCommit: string;
+        committerAuthor: string;
+        committerDate: string;
+        commitUrl: string;
+    };
+
     constructor(private apiService: ApiService,
                 private iconService: NzIconService,
                 private nzMessageService: NzMessageService,
@@ -25,31 +50,6 @@ export class IndexComponent implements OnInit {
         title.setTitle('小海博客');
     }
 
-    readonly logoImgUrl: string = 'https://56462271.oss-cn-beijing.aliyuncs.com/web/logo.png';
-    readonly qqQrImgUrl: string = 'https://56462271.oss-cn-beijing.aliyuncs.com/web/qq.jpg';
-    readonly wxQrImgUrl: string = 'https://56462271.oss-cn-beijing.aliyuncs.com/web/wx.jpg';
-
-    imgUrl: string;
-    desc: string;
-    articles: PageList<Article>;
-    tagNameAndNumber: { name: string, size: number }[];
-    categoryList: Category[];
-    counts: {
-        articleCount: number,
-        visitorCount: number,
-        categoryCount: number,
-        tagCount: number,
-        commentCount: number
-    };
-    lastestUpdate: {
-        lastUpdateTime: string;
-        lastUpdateInfo: string;
-        lastCommit: string;
-        committerAuthor: string;
-        committerDate: string;
-        commitUrl: string
-    };
-
     ngOnInit() {
         this.imgUrl = this.logoImgUrl;
         this.desc = '一个爱好瞎捣鼓的技术宅 :)\n欢迎一起来探讨学习。';

src/app/view/index/index.module.ts

@@ -3,15 +3,13 @@ import {CommonModule} from '@angular/common';
 import {IndexComponent} from './index.component';
 import {IndexRoutingModule} from './index-routing.module';
 import {ArticleDetailCardComponent} from './components/article-detail-card/article-detail-card.component';
-import {
+import {NzBackTopModule} from 'ng-zorro-antd/back-top';
-    NzBackTopModule,
+import {NzCardModule} from 'ng-zorro-antd/card';
-    NzCardModule,
+import {NzDividerModule} from 'ng-zorro-antd/divider';
-    NzDividerModule,
+import {NzGridModule} from 'ng-zorro-antd/grid';
-    NzGridModule,
+import {NzIconModule} from 'ng-zorro-antd/icon';
-    NzIconModule,
+import {NzPaginationModule} from 'ng-zorro-antd/pagination';
-    NzPaginationModule,
+import {NzToolTipModule} from 'ng-zorro-antd/tooltip';
-    NzToolTipModule
-} from 'ng-zorro-antd';
 import {CardDetailComponent} from './components/card-detail/card-detail.component';
 import {TagTagComponent} from './components/tag-tag/tag-tag.component';
 

src/app/view/leave-msg/leave-msg.component.ts

@@ -7,7 +7,8 @@ import { Component, OnInit } from '@angular/core';
 })
 export class LeaveMsgComponent implements OnInit {
 
-  constructor() { }
+    constructor() {
+    }
 
     ngOnInit() {
     }

src/app/view/link/link.component.html

@@ -1,20 +1,20 @@
 <div class="site-middle am-animation-slide-top">
     <div class="title">
-        <i nz-icon nzType="smile" nzTheme="outline" class="titleTag"></i><span class="title">友情链接</span>
+        <i class="titleTag" nz-icon nzTheme="outline" nzType="smile"></i><span class="title">友情链接</span>
     </div>
     <ul class="partner-sites">
         <li *ngFor="let link of linkList;let i = index" [style.background]="colors[i].bgColor"
             [style.color]="colors[i].fontColor">
-            <a [href]="link.url" target="_blank" [title]="link.desc||link.name" [style.color]="colors[i].fontColor">
+            <a [href]="link.url" [style.color]="colors[i].fontColor" [title]="link.desc||link.name" target="_blank">
                 <div class="link-name">
-                    <i nz-icon nzType="link" nzTheme="outline" [style.color]="colors[i].fontColor"></i>
+                    <i [style.color]="colors[i].fontColor" nz-icon nzTheme="outline" nzType="link"></i>
                     {{link.name}}
                 </div>
-                <div class="link-info" [style.color]="colors[i].fontColor">
+                <div [style.color]="colors[i].fontColor" class="link-info">
                     <div class="link-icon">
-                        <img *ngIf="link.iconPath" [src]="link.iconPath" [alt]="link.iconPath">
+                        <img *ngIf="link.iconPath" [alt]="link.iconPath" [src]="link.iconPath">
-                        <i *ngIf="!link.iconPath" nz-icon nzType="link" nzTheme="outline"
+                        <i *ngIf="!link.iconPath" [style.color]="colors[i].fontColor" nz-icon nzTheme="outline"
-                           [style.color]="colors[i].fontColor"></i>
+                           nzType="link"></i>
                     </div>
                     <p>
                         {{link.desc || '该站长暂时未留下网站简介'}}
@@ -22,13 +22,13 @@
                 </div>
             </a>
         </li>
-        <li class="applylink" (click)="showModal=!showModal">申请友链</li>
+        <li (click)="showModal=!showModal" class="applylink">申请友链</li>
     </ul>
 </div>
 
 <div class="placard am-animation-slide-bottom">
     <div class="title">
-        <i nz-icon nzType="smile" nzTheme="outline" class="titleTag"></i><span class="title">友链公告</span>
+        <i class="titleTag" nz-icon nzTheme="outline" nzType="smile"></i><span class="title">友链公告</span>
     </div>
     <br>
     <p style="padding-left: 30px;">
@@ -50,18 +50,18 @@
     </ul>
 </div>
 
-<nz-modal [(nzVisible)]="showModal" [nzTitle]="modalTitle" [nzContent]="modalContent" [nzFooter]="modalFooter"
+<nz-modal (nzOnCancel)="cancel()" [(nzVisible)]="showModal" [nzContent]="modalContent" [nzFooter]="modalFooter"
-          (nzOnCancel)="cancel()" nzWidth="650">
+          [nzTitle]="modalTitle" nzWidth="650">
     <ng-template #modalTitle>
         <h2 style="text-align: center">申请友链</h2>
     </ng-template>
 
     <ng-template #modalContent>
-        <form nz-form [formGroup]="applyFormGroup">
+        <form [formGroup]="applyFormGroup" nz-form>
             <nz-form-item>
                 <nz-form-label nzFlex="100px" nzRequired>网站名称</nz-form-label>
-                <nz-form-control nzFlex="auto" [nzErrorTip]="nameErrTip">
+                <nz-form-control [nzErrorTip]="nameErrTip" nzFlex="auto">
-                    <input nz-input formControlName="name">
+                    <input formControlName="name" nz-input>
                     <ng-template #nameErrTip>
                         <div *ngIf="applyFormGroup.controls.name.hasError('required')">网站名称不可为空</div>
                         <div *ngIf="applyFormGroup.controls.name.hasError('maxlength')">最大长度为255</div>
@@ -70,8 +70,8 @@
             </nz-form-item>
             <nz-form-item>
                 <nz-form-label nzFlex="100px" nzRequired>站长邮箱</nz-form-label>
-                <nz-form-control nzFlex="auto" [nzErrorTip]="emailErrTip">
+                <nz-form-control [nzErrorTip]="emailErrTip" nzFlex="auto">
-                    <input nz-input formControlName="email">
+                    <input formControlName="email" nz-input>
                     <ng-template #emailErrTip>
                         <div *ngIf="applyFormGroup.controls.email.hasError('required')">站长邮箱不可为空</div>
                         <div *ngIf="applyFormGroup.controls.email.hasError('pattern')">邮箱格式不正确</div>
@@ -81,7 +81,7 @@
 
             <nz-form-item>
                 <nz-form-label nzFlex="100px" nzRequired>首页链接</nz-form-label>
-                <nz-form-control nzFlex="auto" [nzErrorTip]="urlErrTip">
+                <nz-form-control [nzErrorTip]="urlErrTip" nzFlex="auto">
                     <nz-input-group [nzAddOnBefore]="protocol" nzCompact>
                         <ng-template #protocol>
                             <nz-select formControlName="urlProtocol">
@@ -89,7 +89,7 @@
                                 <nz-option nzLabel="Https://" nzValue="https://"></nz-option>
                             </nz-select>
                         </ng-template>
-                        <input nz-input formControlName="url">
+                        <input formControlName="url" nz-input>
                         <ng-template #urlErrTip>
                             <div *ngIf="applyFormGroup.controls.url.hasError('required')">首页链接不可为空</div>
                             <div *ngIf="applyFormGroup.controls.url.hasError('pattern')">链接格式不正确</div>
@@ -99,7 +99,7 @@
             </nz-form-item>
             <nz-form-item>
                 <nz-form-label nzFlex="100px" nzRequired>友链页链接</nz-form-label>
-                <nz-form-control nzFlex="auto" [nzErrorTip]="urlLinkErrTip">
+                <nz-form-control [nzErrorTip]="urlLinkErrTip" nzFlex="auto">
                     <nz-input-group [nzAddOnBefore]="protocol">
                         <ng-template #protocol>
                             <nz-select formControlName="urlLinkProtocol">
@@ -107,7 +107,7 @@
                                 <nz-option nzLabel="Https://" nzValue="https://"></nz-option>
                             </nz-select>
                         </ng-template>
-                        <input nz-input formControlName="linkUrl">
+                        <input formControlName="linkUrl" nz-input>
                         <ng-template #urlLinkErrTip>
                             <div *ngIf="applyFormGroup.controls.linkUrl.hasError('required')">首页链接不可为空</div>
                             <div *ngIf="applyFormGroup.controls.linkUrl.hasError('pattern')">链接格式不正确</div>
@@ -117,28 +117,28 @@
             </nz-form-item>
             <nz-form-item>
                 <nz-form-label nzFlex="100px">网站图标</nz-form-label>
-                <nz-form-control nzFlex="auto" nzErrorTip="链接格式不正确">
+                <nz-form-control nzErrorTip="链接格式不正确" nzFlex="auto">
                     <nz-input-group [nzSuffix]="icon" nzSize="large">
-                        <input nz-input formControlName="iconPath">
+                        <input formControlName="iconPath" nz-input>
                     </nz-input-group>
                     <ng-template #icon>
-                        <img style="width: 25px;height: 25px" *ngIf="applyFormGroup.value.iconPath"
+                        <img *ngIf="applyFormGroup.value.iconPath" [src]="applyFormGroup.value.iconPath"
-                             [src]="applyFormGroup.value.iconPath" alt="icon">
+                             alt="icon" style="width: 25px;height: 25px">
                     </ng-template>
                 </nz-form-control>
             </nz-form-item>
             <nz-form-item>
                 <nz-form-label nzFlex="100px">网站描述</nz-form-label>
-                <nz-form-control nzFlex="auto" nzErrorTip="可输入最大文字长度为255">
+                <nz-form-control nzErrorTip="可输入最大文字长度为255" nzFlex="auto">
-                    <textarea nz-input formControlName="desc" [nzAutosize]="{ minRows: 2, maxRows: 6 }"></textarea>
+                    <textarea [nzAutosize]="{ minRows: 2, maxRows: 6 }" formControlName="desc" nz-input></textarea>
                 </nz-form-control>
             </nz-form-item>
         </form>
     </ng-template>
 
     <ng-template #modalFooter>
-        <button nz-button (click)="cancel()">取消</button>
+        <button (click)="cancel()" nz-button>取消</button>
-        <button nz-button nzType="primary" (click)="apply()" [disabled]="!applyFormGroup.valid" [nzLoading]="loading">
+        <button (click)="apply()" [disabled]="!applyFormGroup.valid" [nzLoading]="loading" nz-button nzType="primary">
             提交
         </button>
     </ng-template>

src/app/view/link/link.component.less

@@ -174,6 +174,7 @@ i {
   .partner-sites {
     padding: 0 30px;
   }
+
   .partner-sites li {
     float: left;
     width: 100%;

src/app/view/link/link.component.ts

@@ -1,10 +1,11 @@
 import {Component, OnInit} from '@angular/core';
-import {NzMessageService, NzModalService} from 'ng-zorro-antd';
+import {NzMessageService} from 'ng-zorro-antd/message';
+import {NzModalService} from 'ng-zorro-antd/modal';
 import {Title} from '@angular/platform-browser';
 import {ApiService} from '../../api/api.service';
 import {ApplyLinkReq, Link} from '../../class/Link';
-import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import {UntypedFormBuilder, UntypedFormGroup, Validators} from '@angular/forms';
-import {Color, RandomColor} from '../../utils/color';
+import {Color, randomColor} from '../../utils/color';
 
 @Component({
     selector: 'view-link',
@@ -13,25 +14,22 @@ import {Color, RandomColor} from '../../utils/color';
 })
 export class LinkComponent implements OnInit {
 
-    constructor(private message: NzMessageService,
-                private titleService: Title,
-                private apiService: ApiService,
-                private fb: FormBuilder,
-                private modal: NzModalService) {
-        titleService.setTitle('小海博客 | 友链');
-    }
-
     showModal = false;
-
     // 申请时的链接
     link: Link;
-
     linkList: Link[];
     loading: boolean = false;
-    applyFormGroup: FormGroup;
+    applyFormGroup: UntypedFormGroup;
     colors: Color[];
     private lastUrl: string = '';
 
+    constructor(private message: NzMessageService,
+                private titleService: Title,
+                private apiService: ApiService,
+                private fb: UntypedFormBuilder,
+                private modal: NzModalService) {
+        titleService.setTitle('小海博客 | 友链');
+    }
 
     ngOnInit() {
         window.scrollTo(0, 0);
@@ -39,7 +37,7 @@ export class LinkComponent implements OnInit {
         this.apiService.links().subscribe({
             next: data => this.linkList = data.result,
             error: err => this.message.error(err.msg),
-            complete: () => this.colors = RandomColor(this.linkList.length)
+            complete: () => this.colors = randomColor(this.linkList.length)
         });
         this.applyFormGroup = this.fb.group({
             urlLinkProtocol: ['http://'],
@@ -57,7 +55,7 @@ export class LinkComponent implements OnInit {
                 this.applyFormGroup.patchValue({linkUrl: linkUrlData.replace(this.lastUrl, data)});
                 this.lastUrl = data;
             },
-        })
+        });
     }
 
     apply() {
@@ -71,7 +69,7 @@ export class LinkComponent implements OnInit {
                 this.message.success('提交成功，请稍等，即将为你处理');
                 this.loading = false;
                 this.showModal = false;
-                this.applyFormGroup.reset()
+                this.applyFormGroup.reset();
             },
             error: err => {
                 if (err.code === 7200) {
@@ -84,7 +82,7 @@ export class LinkComponent implements OnInit {
                             this.apiService.reapplyLink(key).subscribe({
                                 next: data1 => this.message.success('提交成功，请稍等，即将为你处理'),
                                 error: err1 => this.message.error('提交失败，原因：' + err.msg)
-                            })
+                            });
                         }
                     });
                 } else {
@@ -92,7 +90,7 @@ export class LinkComponent implements OnInit {
                 }
                 this.loading = false;
                 this.showModal = false;
-                this.applyFormGroup.reset()
+                this.applyFormGroup.reset();
             }
         });
     }

src/app/view/link/link.module.ts

@@ -1,7 +1,12 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {LinkComponent} from './link.component';
-import {NzButtonModule, NzFormModule, NzIconModule, NzInputModule, NzModalModule, NzSelectModule} from 'ng-zorro-antd';
+import {NzButtonModule} from 'ng-zorro-antd/button';
+import {NzFormModule} from 'ng-zorro-antd/form';
+import {NzIconModule} from 'ng-zorro-antd/icon';
+import {NzInputModule} from 'ng-zorro-antd/input';
+import {NzModalModule} from 'ng-zorro-antd/modal';
+import {NzSelectModule} from 'ng-zorro-antd/select';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
 

src/app/view/login-registration/components/login/login.component.ts

@@ -1,10 +1,11 @@
 import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
-import {NzMessageService} from 'ng-zorro-antd';
+import {NzMessageService} from 'ng-zorro-antd/message';
 import {LoginReq} from '../../../../class/User';
 import {ActivatedRoute, Router} from '@angular/router';
 import {LoginRegistrationService} from '../../service/login-registration.service';
 import {Title} from '@angular/platform-browser';
 import {GlobalUserService} from '../../../../services/global-user.service';
+import {LocalStorageService} from '../../../../services/local-storage.service';
 
 @Component({
     selector: 'c-login',
@@ -13,29 +14,30 @@ import {GlobalUserService} from '../../../../services/global-user.service';
 })
 export class LoginComponent implements OnInit {
 
+    @Output() loginStatus = new EventEmitter<boolean>();
+    @Input() showSendEmail: boolean = true;
+
+    submitting: boolean = false;
+    loginReq: LoginReq = new LoginReq(null, true, null);
+
+    private url: string;
+
     constructor(private nzMessageService: NzMessageService,
                 private userService: GlobalUserService,
                 private activatedRoute: ActivatedRoute,
                 private router: Router,
                 private loginRegistrationService: LoginRegistrationService,
-                private title: Title) {
+                private title: Title,
+                private localStorageService: LocalStorageService) {
         this.title.setTitle('小海博客 | 登录 ');
     }
 
-    submitting: boolean = false;
-
-    loginReq: LoginReq = new LoginReq(null, true, null);
-    @Output() loginStatus = new EventEmitter<boolean>();
-    @Input() showSendEmail: boolean = true;
-
-    private url: string;
-
     ngOnInit() {
         this.url = this.activatedRoute.snapshot.queryParamMap.get('url');
-        this.loginReq.email = localStorage.getItem('e');
+        this.loginReq.email = this.localStorageService.getItem('e');
-        this.loginReq.password = localStorage.getItem('p');
+        this.loginReq.password = this.localStorageService.getItem('p');
-        localStorage.removeItem('e');
+        this.localStorageService.removeItem('e');
-        localStorage.removeItem('p');
+        this.localStorageService.removeItem('p');
     }
 
     doLogin() {
@@ -68,7 +70,7 @@ export class LoginComponent implements OnInit {
                         this.router.navigateByUrl(this.url);
                     } else {
                         // window.location.href = '/admin/';
-                        this.router.navigateByUrl('/admin')
+                        this.router.navigateByUrl('/admin');
                     }
                 }
             }

src/app/view/login-registration/components/registration/registration.component.ts

@@ -1,11 +1,12 @@
 import {Component, EventEmitter, OnInit, Output} from '@angular/core';
 import {environment} from '../../../../../environments/environment';
 import {ApiService} from '../../../../api/api.service';
-import {NzMessageService} from 'ng-zorro-antd';
+import {NzMessageService} from 'ng-zorro-antd/message';
 import {Router} from '@angular/router';
 import {RequestObj} from '../../../../class/HttpReqAndResp';
 import {LoginReq} from '../../../../class/User';
 import {Title} from '@angular/platform-browser';
+import {LocalStorageService} from '../../../../services/local-storage.service';
 
 @Component({
     selector: 'c-registration',
@@ -15,23 +16,24 @@ import {Title} from '@angular/platform-browser';
 })
 export class RegistrationComponent implements OnInit {
 
-    constructor(private apiService: ApiService,
+    @Output() regStatus = new EventEmitter<boolean>();
-                private  nzMessageService: NzMessageService,
+    @Output() regAccount = new EventEmitter<LoginReq>();
-                private router: Router,
-                private title: Title) {
-        this.title.setTitle('小海博客 | 注册');
-    }
 
     imgCodeUrl: string;
 
     imgCode: string;
-
     email: string;
-    pwd: string;
 
+    pwd: string;
     submitting: boolean;
-    @Output() regStatus = new EventEmitter<boolean>();
+
-    @Output() regAccount = new EventEmitter<LoginReq>();
+    constructor(private apiService: ApiService,
+                private  nzMessageService: NzMessageService,
+                private router: Router,
+                private title: Title,
+                private localStorageService: LocalStorageService) {
+        this.title.setTitle('小海博客 | 注册');
+    }
 
     ngOnInit() {
         this.imgCodeUrl = environment.host + '/imgCode';
@@ -74,8 +76,8 @@ export class RegistrationComponent implements OnInit {
         this.apiService.verifyImgCode(this.imgCode).subscribe(data => {
                 // 验证成功  注册
                 this.apiService.registration(this.email, this.pwd).subscribe(regData => {
-                        localStorage.setItem('e', this.email);
+                        this.localStorageService.setItem('e', this.email);
-                        localStorage.setItem('p', this.pwd);
+                        this.localStorageService.setItem('p', this.pwd);
                         this.email = '';
                         this.pwd = '';
                         this.imgCode = '';

src/app/view/login-registration/login-registration.component.ts

@@ -1,7 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 import {ApiService} from '../../api/api.service';
 import {LoginRegistrationService} from './service/login-registration.service';
-import {NzMessageService} from 'ng-zorro-antd';
+import {NzMessageService} from 'ng-zorro-antd/message';
 
 @Component({
     selector: 'view-login-registration',
@@ -10,14 +10,15 @@ import {NzMessageService} from 'ng-zorro-antd';
 })
 export class LoginRegistrationComponent implements OnInit {
 
+    picUrl: string = '';
+    email: string;
+    submitting: boolean = false;
+
     constructor(private apiService: ApiService,
                 public loginRegistrationService: LoginRegistrationService,
                 private nzMessageService: NzMessageService) {
     }
 
-    picUrl: string = '';
-    email: string;
-    submitting: boolean = false;
 
     ngOnInit() {
         this.apiService.bingPic().subscribe(data => {

src/app/view/login-registration/login-registration.module.ts

@@ -6,7 +6,11 @@ import {RegistrationComponent} from './components/registration/registration.comp
 import {LoginRegistrationRoutingModule} from './login-registration-routing.module';
 import {LoginRegistrationComponent} from './login-registration.component';
 import {FormsModule} from '@angular/forms';
-import {NzButtonModule, NzFormModule, NzGridModule, NzInputModule, NzModalModule} from 'ng-zorro-antd';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzFormModule } from 'ng-zorro-antd/form';
+import { NzGridModule } from 'ng-zorro-antd/grid';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { NzModalModule } from 'ng-zorro-antd/modal';
 
 
 @NgModule({

src/app/view/login-registration/service/login-registration.service.ts

@@ -5,8 +5,8 @@ import {Injectable} from '@angular/core';
 })
 export class LoginRegistrationService {
 
+    showModal: boolean = false;
+
     constructor() {
     }
-
-    showModal: boolean = false;
 }

src/app/view/maintain/maintain.module.ts

@@ -2,7 +2,8 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {MaintainComponent} from './maintain.component';
 import {RouterModule} from '@angular/router';
-import {NzButtonModule, NzResultModule} from 'ng-zorro-antd';
+import {NzButtonModule} from 'ng-zorro-antd/button';
+import {NzResultModule} from 'ng-zorro-antd/result';
 
 
 @NgModule({

src/app/view/reset-pwd/reset-pwd.component.html

@@ -1,12 +1,12 @@
 <div style="height: 70%">
     <div id="main">
         <div *ngIf="iserror">
-            <nz-alert nzType="error" nzMessage="链接可能被修改了，请重新点击邮箱中的链接，或者重新发送邮件" nzShowIcon>
+            <nz-alert nzMessage="链接可能被修改了，请重新点击邮箱中的链接，或者重新发送邮件" nzShowIcon nzType="error">
             </nz-alert>
         </div>
         <div *ngIf="!iserror">
-            <input type="password" placeholder="新密码" [(ngModel)]="pwd"/>
+            <input [(ngModel)]="pwd" placeholder="新密码" type="password"/>
-            <input type="password" placeholder="确认密码" [(ngModel)]="rePwd"/>
+            <input [(ngModel)]="rePwd" placeholder="确认密码" type="password"/>
             <button (click)="submit()">提交</button>
         </div>
 

src/app/view/reset-pwd/reset-pwd.component.ts

@@ -1,5 +1,5 @@
 import {Component, OnInit} from '@angular/core';
-import {NzMessageService} from 'ng-zorro-antd';
+import {NzMessageService} from 'ng-zorro-antd/message';
 import {ActivatedRoute, Router} from '@angular/router';
 import {ApiService} from '../../api/api.service';
 import {Title} from '@angular/platform-browser';
@@ -11,6 +11,12 @@ import {Title} from '@angular/platform-browser';
 })
 export class ResetPwdComponent implements OnInit {
 
+    pwd: string;
+    rePwd: string;
+    iserror: boolean = false;
+    private email: string;
+    private verifyId: string;
+
     constructor(private message: NzMessageService,
                 private router: Router,
                 private routerinfo: ActivatedRoute,
@@ -19,14 +25,6 @@ export class ResetPwdComponent implements OnInit {
         this.title.setTitle('小海博客 | 重置密码 ');
     }
 
-    pwd: string;
-    rePwd: string;
-
-    private email: string;
-    private verifyId: string;
-
-    iserror: boolean = false;
-
     ngOnInit(): void {
         this.email = this.routerinfo.snapshot.queryParams.email;
         this.verifyId = this.routerinfo.snapshot.queryParams.verifyId;

src/app/view/reset-pwd/reset-pwd.module.ts

@@ -2,7 +2,7 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {Route, RouterModule} from '@angular/router';
 import {ResetPwdComponent} from './reset-pwd.component';
-import {NzAlertModule} from 'ng-zorro-antd';
+import {NzAlertModule} from 'ng-zorro-antd/alert';
 import {FormsModule} from '@angular/forms';
 
 const routes: Route[] = [