style: format project

[skip ci]

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';
 

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

@@ -11,13 +11,13 @@ 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) {

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

@@ -14,6 +14,10 @@ import {Router} from '@angular/router';
 })
 export class AdminArticleComponent implements OnInit {
 
+    request: RequestObj;
+    headData: Data<Article>[]
+    @ViewChild('commonTableComponent') private commonTableComponent: CommonTableComponent<Article>
+
     constructor(private apiService: ApiService, private nzMessage: NzMessageService, private title: Title,
                 private router: Router) {
         this.request = {
@@ -26,10 +30,6 @@ export class AdminArticleComponent implements OnInit {
         }
     }
 
-    request: RequestObj;
-    headData: Data<Article>[]
-    @ViewChild('commonTableComponent') private commonTableComponent: CommonTableComponent<Article>
-
     ngOnInit(): void {
         this.title.setTitle('小海博客 | 文章管理')
         this.headData = [

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

@@ -15,6 +15,19 @@ import {CommonTableComponent} from '../components/common-table/common-table.comp
 })
 export class AdminCommentComponent implements OnInit {
 
+    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>;
+
     constructor(private apiService: ApiService, private  messageService: NzMessageService, private userService: GlobalUserService,
                 private title: Title) {
         this.title.setTitle('小海博客 | 评论管理')
@@ -42,19 +55,6 @@ export class AdminCommentComponent implements OnInit {
         })
     }
 
-    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},

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,12 +11,6 @@ import {Title} from '@angular/platform-browser';
     styleUrls: ['./admin-dashboard.component.less']
 })
 export class AdminDashboardComponent implements OnInit {
-    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: {
@@ -26,11 +20,16 @@ export class AdminDashboardComponent implements OnInit {
         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();
+    }
+
     ngOnInit(): void {
     }
 

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

@@ -15,6 +15,13 @@ import {Data} from '../components/common-table/data';
 })
 export class AdminLinkComponent implements OnInit {
 
+    modalVisible: boolean = false;
+    modalTitle: string = '';
+    formGroup: FormGroup;
+    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 FormGroup({
@@ -28,14 +35,6 @@ export class AdminLinkComponent implements OnInit {
         })
     }
 
-
-    modalVisible: boolean = false;
-    modalTitle: string = '';
-    formGroup: FormGroup;
-    request: RequestObj;
-    @ViewChild('commonTableComponent') commonTableComponent: CommonTableComponent<Link>
-    headData: Data<Link>[];
-
     ngOnInit(): void {
         this.request = {
             path: '/admin/links',

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

@@ -2,7 +2,7 @@ import {Component, OnInit, ViewChild} from '@angular/core';
 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,9 +15,6 @@ import {EditableTagComponent} from '../components/editable-tag/editable-tag.comp
 })
 export class AdminTagComponent implements OnInit {
 
-    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,
@@ -31,8 +28,11 @@ export class AdminTagComponent implements OnInit {
     @ViewChild('categoryCTComponent', {static: true}) categoryCTComponent: CommonTableComponent<Category>
     @ViewChild('tagCTComponent', {static: true}) tagCTComponent: CommonTableComponent<Tag>
     @ViewChild('editableTagComponent') editableTagComponent: EditableTagComponent
-    private updateData: any;
     getData: any;
+    private updateData: any;
+
+    constructor(private apiService: ApiService, private nzMessageService: NzMessageService, private title: Title, private router: Router) {
+    }
 
     ngOnInit(): void {
         this.title.setTitle('小海博客 | 标签分类管理')

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

@@ -3,7 +3,7 @@ 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,6 +23,9 @@ 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.headData = [

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

@@ -14,6 +14,17 @@ import {Data} from '../components/common-table/data';
 })
 export class AdminUserComponent implements OnInit {
 
+    user: User;
+    modalData = {
+        visible: false,
+        title: null,
+        isEdit: false,
+        resetPwd: false
+    }
+    formGroup: FormGroup;
+    headData: Data<User>[];
+    request: RequestObj;
+
     constructor(private apiService: ApiService, private title: Title, private messageService: NzMessageService,
                 private userService: GlobalUserService) {
         this.formGroup = new FormGroup({
@@ -32,18 +43,6 @@ export class AdminUserComponent implements OnInit {
         })
     }
 
-    user: User;
-    modalData = {
-        visible: false,
-        title: null,
-        isEdit: false,
-        resetPwd: false
-    }
-    formGroup: FormGroup;
-
-    headData: Data<User>[];
-    request: RequestObj;
-
     ngOnInit(): void {
         this.title.setTitle('小海博客 | 用户管理')
         this.request = {

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,12 +11,12 @@ import {Data} from '../components/common-table/data';
 })
 export class AdminVisitorComponent implements OnInit {
 
-    constructor(private apiService: ApiService, private title: Title) {
-    }
-
     headData: Data<Visitor>[];
     request: RequestObj
 
+    constructor(private apiService: ApiService, private title: Title) {
+    }
+
     ngOnInit(): void {
         this.title.setTitle('小海博客 | 访客信息管理')
         this.request = {

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

@@ -17,6 +17,17 @@ import {LocalStorageService} from '../../services/local-storage.service';
 })
 export class AdminComponent implements OnInit {
 
+    user: User;
+    isCollapsed: boolean = false;
+    infoDrawerVisible: boolean = false;
+    sayHelloContent: string;
+    editInfoModalVisible: boolean = false;
+    resetPwdModalVisible: boolean = false;
+    editInfoFormGroup: FormGroup;
+    resetPwdFormGroup: FormGroup;
+    noAvatarUrl = 'https://cdn.celess.cn/'
+    host: string
+
     constructor(public gUserService: GlobalUserService, private apiService: ApiService, private messageService: NzMessageService,
                 private router: Router, private localStorageService: LocalStorageService) {
         this.gUserService.watchUserInfo({
@@ -45,16 +56,6 @@ export class AdminComponent implements OnInit {
         })
     }
 
-    user: User;
-    isCollapsed: boolean = false;
-    infoDrawerVisible: boolean = false;
-    sayHelloContent: string;
-    editInfoModalVisible: boolean = false;
-    resetPwdModalVisible: boolean = false;
-    editInfoFormGroup: FormGroup;
-    resetPwdFormGroup: FormGroup;
-    noAvatarUrl = 'https://cdn.celess.cn/'
-    host: string
     showInfoDrawer = () => this.infoDrawerVisible = !this.infoDrawerVisible;
 
     logout() {
@@ -76,23 +77,6 @@ export class AdminComponent implements OnInit {
         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;
         this.infoDrawerVisible = false;
@@ -142,4 +126,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/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++;

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()"
-              [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

@@ -11,11 +11,6 @@ import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
 })
 export class CommonTableComponent<T> implements OnInit, OnChanges {
 
-    constructor(private httpService: HttpService) {
-
-    }
-
-    @Input() private headData: Data<T>[];
     @Input() request: RequestObj;
     @Input() cardTitle: string | null;
     @Input() template: {
@@ -26,12 +21,16 @@ export class CommonTableComponent<T> implements OnInit, OnChanges {
     };
     @Output() pageInfo = new EventEmitter<{ page: number, pageSize: number }>();
     loading: boolean = true;
-
     dataList: PageList<T> = new PageList<T>();
     settingModalVisible: boolean = false;
     filedData: Data<T>[];
     changed: boolean = false;
     visibleFieldLength: number = 0;
+    @Input() private headData: Data<T>[];
+
+    constructor(private httpService: HttpService) {
+
+    }
 
     ngOnInit(): void {
         if (localStorage.getItem(this.request.path)) {

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

@@ -1,14 +1,4 @@
-import {
+import {Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild} from '@angular/core';
-    Component,
-    ElementRef,
-    EventEmitter,
-    Input,
-    OnChanges,
-    OnInit,
-    Output,
-    SimpleChanges,
-    ViewChild
-} from '@angular/core';
 import {NzModalRef, NzModalService} from 'ng-zorro-antd/modal';
 
 @Component({
@@ -40,15 +30,9 @@ import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
 export class EditableTagComponent implements OnInit, OnChanges {
 
     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 }>();
     @Input() color: string;
     @Input() showEditIcon: boolean;
@@ -62,12 +46,15 @@ export class EditableTagComponent implements OnInit, OnChanges {
     @Output() inEditStatus = new EventEmitter<void>();
     @Output() modalOK = new EventEmitter<{ value: string, originalValue: string, changed: boolean }>();
     @Output() modalCancel = new EventEmitter<{ value: string, originalValue: string, changed: boolean }>();
-
+    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) {

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},
@@ -61,9 +65,6 @@ updateDateFormat: "2020-05-27 00:55:05"*/
         ]
     }
 
-    data: Data<Article>[];
-    req: RequestObj;
-
     ngOnInit(): void {
         this.req = {
             path: '/admin/articles',

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

@@ -1,7 +1,7 @@
 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} from 'ng-zorro-antd/checkbox';
 import {NzTagModule} from 'ng-zorro-antd/tag';

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

@@ -1,6 +1,6 @@
 <div id="main">
 
-    <div id="article-content" #divElement></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

@@ -18,20 +18,11 @@ declare var $;
 })
 export class ArticleComponent implements OnInit {
 
-    constructor(private activatedRoute: ActivatedRoute,
-                private apiService: ApiService,
-                private userService: GlobalUserService,
-                private titleService: Title,
-                private router: Router) {
-        this.articleId = +activatedRoute.snapshot.paramMap.get('id');
-    }
-
     articleId: number;
     article: Article;
     copyRightUrl: string;
     user: User;
     submitting: boolean = false;
-
     comment: CommentReq;
     // 作为输入框@ 的提示
     name: string;
@@ -41,6 +32,14 @@ export class ArticleComponent implements OnInit {
     content: string;
     @ViewChild('divElement') divElement: ElementRef;
 
+    constructor(private activatedRoute: ActivatedRoute,
+                private apiService: ApiService,
+                private userService: GlobalUserService,
+                private titleService: Title,
+                private router: Router) {
+        this.articleId = +activatedRoute.snapshot.paramMap.get('id');
+    }
+
     // private vditor: Vditor;
 
     ngOnInit() {

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

@@ -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/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/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

@@ -9,17 +9,16 @@ import {Router} from '@angular/router';
 })
 export class TagTagComponent implements OnInit {
 
-    constructor(private router: Router) {
-    }
-
     @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 };
 
+    constructor(private router: Router) {
+    }
+
     ngOnInit() {
         const randomNumber = Math.floor(ColorList.length * Math.random());
         this.randColor = ColorList[randomNumber];

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

@@ -17,19 +17,9 @@ import {Title} from '@angular/platform-browser';
 })
 export class IndexComponent implements OnInit {
 
-    constructor(private apiService: ApiService,
-                private iconService: NzIconService,
-                private nzMessageService: NzMessageService,
-                private router: Router,
-                private title: Title) {
-        this.iconService.addIconLiteral('blog:location', SvgIconUtil.locationIcon);
-        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>;
@@ -51,6 +41,15 @@ export class IndexComponent implements OnInit {
         commitUrl: string
     };
 
+    constructor(private apiService: ApiService,
+                private iconService: NzIconService,
+                private nzMessageService: NzMessageService,
+                private router: Router,
+                private title: Title) {
+        this.iconService.addIconLiteral('blog:location', SvgIconUtil.locationIcon);
+        title.setTitle('小海博客');
+    }
+
     ngOnInit() {
         this.imgUrl = this.logoImgUrl;
         this.desc = '一个爱好瞎捣鼓的技术宅 :)\n欢迎一起来探讨学习。';

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

@@ -14,6 +14,15 @@ import {Color, RandomColor} from '../../utils/color';
 })
 export class LinkComponent implements OnInit {
 
+    showModal = false;
+    // 申请时的链接
+    link: Link;
+    linkList: Link[];
+    loading: boolean = false;
+    applyFormGroup: FormGroup;
+    colors: Color[];
+    private lastUrl: string = '';
+
     constructor(private message: NzMessageService,
                 private titleService: Title,
                 private apiService: ApiService,
@@ -22,18 +31,6 @@ export class LinkComponent implements OnInit {
         titleService.setTitle('小海博客 | 友链');
     }
 
-    showModal = false;
-
-    // 申请时的链接
-    link: Link;
-
-    linkList: Link[];
-    loading: boolean = false;
-    applyFormGroup: FormGroup;
-    colors: Color[];
-    private lastUrl: string = '';
-
-
     ngOnInit() {
         window.scrollTo(0, 0);
         this.link = new Link();

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/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

@@ -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/tag/tag.component.html

@@ -1,9 +1,9 @@
 <div id="main">
     <div id="category">
         <ul *ngIf="tagList.length">
-            <c-tag-tag *ngFor="let tag of tagList"
+            <c-tag-tag (tagClick)="changeTag(tag)"
-                       [tag]="tag"
+                       *ngFor="let tag of tagList"
-                       (tagClick)="changeTag(tag)">
+                       [tag]="tag">
 
             </c-tag-tag>
         </ul>
@@ -14,7 +14,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/tag/tag.component.ts

@@ -14,6 +14,11 @@ import {Title} from '@angular/platform-browser';
 })
 export class TagComponent implements OnInit {
 
+    tagList: { name: string, size: number } [] = [];
+    articleList: PageList<Article>;
+    name: string;
+    private tag: { name: string, size: number };
+
     constructor(private apiService: ApiService,
                 private nzMessageService: NzMessageService,
                 private location: Location,
@@ -21,12 +26,6 @@ export class TagComponent implements OnInit {
                 private title: Title) {
     }
 
-    tagList: { name: string, size: number } [] = [];
-    private tag: { name: string, size: number };
-    articleList: PageList<Article>;
-
-    name: string;
-
     ngOnInit() {
         this.name = this.activatedRoute.snapshot.paramMap.get('tag');
         this.getTags(this.name == null);

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

@@ -4,7 +4,7 @@
         <div class="container">
             <div class="zh-update">
                 <div class="zh-update-log">
-                    <div class="zh-update-log-title" *ngIf="lastUpdate">
+                    <div *ngIf="lastUpdate" class="zh-update-log-title">
                         <h1>更新日志</h1>
                         <p>最后更新于:
                             <nz-tag nzColor="red">{{lastUpdate.lastUpdateTime}}</nz-tag>
@@ -17,11 +17,11 @@
                         </p>
                         <p>最后提交内容:
                             <a [href]="lastUpdate.commitUrl" target="_blank">
-                                <nz-tag nzColor="#f50" class="pointer">{{lastUpdate.lastCommit}}</nz-tag>
+                                <nz-tag class="pointer" nzColor="#f50">{{lastUpdate.lastCommit}}</nz-tag>
                             </a>
                             By
                             <a href="https://github.com/xiaohai2271" target="_blank">
-                                <nz-tag nzColor="cyan" class="pointer">{{lastUpdate.committerAuthor}}</nz-tag>
+                                <nz-tag class="pointer" nzColor="cyan">{{lastUpdate.committerAuthor}}</nz-tag>
                             </a>
                         </p>
                         <p>
@@ -33,7 +33,7 @@
                     <div class="zh-update-log-content">
 
 
-                        <div class="update-log am-animation-slide-bottom" *ngFor="let update of webUpdate">
+                        <div *ngFor="let update of webUpdate" class="update-log am-animation-slide-bottom">
                             <div class="update-log-date">
                                 <h2><span style="font-size: x-large"># </span> {{update.time}}</h2>
                             </div>

src/app/view/update/update.component.less

@@ -1,9 +1,11 @@
 nz-tag {
   text-indent: initial;
 }
+
 .pointer {
   cursor: pointer;
 }
+
 @media screen and (min-width: 768px) {
   .site-inner {
     margin: 0 19%;
@@ -121,7 +123,7 @@ nz-tag {
 
 .container {
   padding-left: 1.5rem;
-  padding-right: 1.5 r
+  padding-right: 1.5rem
 }
 
 #app {

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

@@ -9,11 +9,6 @@ import {Title} from '@angular/platform-browser';
 })
 export class UpdateComponent implements OnInit {
 
-    constructor(private titleService: Title,
-                private apiService: ApiService) {
-        titleService.setTitle('小海博客 | 网站更新记录');
-    }
-
     lastUpdate: {
         lastUpdateTime: string;
         lastUpdateInfo: string;
@@ -24,6 +19,11 @@ export class UpdateComponent implements OnInit {
     };
     webUpdate: { id: number, info: string, time: string }[] = [];
 
+    constructor(private titleService: Title,
+                private apiService: ApiService) {
+        titleService.setTitle('小海博客 | 网站更新记录');
+    }
+
     ngOnInit() {
         this.apiService.lastestUpdate().subscribe(data => {
             this.lastUpdate = data.result;

src/app/view/write/components/publish-form/publish-form.component.html

@@ -1,11 +1,11 @@
-<form nz-form [formGroup]="formGroup" (ngSubmit)="publishArticle()">
+<form (ngSubmit)="publishArticle()" [formGroup]="formGroup" nz-form>
     <!--     文章类型       -->
     <nz-form-item *ngIf="primaryData?.id">
         <nz-form-label nzSpan="4">发布为</nz-form-label>
-        <nz-form-control nzSpan="19" nzOffset="1" nzErrorTip="请选择文章发布类型">
+        <nz-form-control nzErrorTip="请选择文章发布类型" nzOffset="1" nzSpan="19">
             <nz-radio-group formControlName="isUpdate">
-                <label nz-radio-button [nzValue]="false"><span>新文章</span></label>
+                <label [nzValue]="false" nz-radio-button><span>新文章</span></label>
-                <label nz-radio-button [nzValue]="true"><span>更新旧文章</span></label>
+                <label [nzValue]="true" nz-radio-button><span>更新旧文章</span></label>
             </nz-radio-group>
         </nz-form-control>
     </nz-form-item>
@@ -13,10 +13,10 @@
     <!--     文章类型       -->
     <nz-form-item>
         <nz-form-label nzSpan="4">文章类型</nz-form-label>
-        <nz-form-control nzSpan="19" nzOffset="1" nzErrorTip="请选择文章的类型">
+        <nz-form-control nzErrorTip="请选择文章的类型" nzOffset="1" nzSpan="19">
-            <nz-radio-group formControlName="type" (ngModelChange)="articleTypeChanged()">
+            <nz-radio-group (ngModelChange)="articleTypeChanged()" formControlName="type">
-                <label nz-radio-button [nzValue]="true"><span>原创</span></label>
+                <label [nzValue]="true" nz-radio-button><span>原创</span></label>
-                <label nz-radio-button [nzValue]="false"><span>转载</span></label>
+                <label [nzValue]="false" nz-radio-button><span>转载</span></label>
             </nz-radio-group>
         </nz-form-control>
     </nz-form-item>
@@ -24,10 +24,10 @@
     <!--      文章分类      -->
     <nz-form-item>
         <nz-form-label nzSpan="4">文章分类</nz-form-label>
-        <nz-form-control nzSpan="19" nzOffset="1" nzErrorTip="文章的分类不可为空">
+        <nz-form-control nzErrorTip="文章的分类不可为空" nzOffset="1" nzSpan="19">
-            <nz-select nzAllowClear nzPlaceHolder="选择分类" formControlName="category">
+            <nz-select formControlName="category" nzAllowClear nzPlaceHolder="选择分类">
-                <nz-option *ngFor="let option of categoryList" [nzValue]="option.name"
+                <nz-option *ngFor="let option of categoryList" [nzLabel]="option.name"
-                           [nzLabel]="option.name"></nz-option>
+                           [nzValue]="option.name"></nz-option>
             </nz-select>
         </nz-form-control>
     </nz-form-item>
@@ -35,13 +35,13 @@
     <!--     原文链接       -->
     <nz-form-item *ngIf="!formGroup.value.type">
         <nz-form-label nzSpan="4">原文链接</nz-form-label>
-        <nz-form-control nzSpan="19" nzOffset="1">
+        <nz-form-control nzOffset="1" nzSpan="19">
             <nz-input-group [nzSuffix]="close">
-                <input nz-input type="url" placeholder="请输入原文连接" formControlName="url">
+                <input formControlName="url" nz-input placeholder="请输入原文连接" type="url">
             </nz-input-group>
             <ng-template #close>
-                <i *ngIf="formGroup.value.url" nz-icon nzType="close-circle" nzTheme="fill"
+                <i (click)="clearInput()" *ngIf="formGroup.value.url" nz-icon nzTheme="fill"
-                   (click)="clearInput()"></i>
+                   nzType="close-circle"></i>
             </ng-template>
 
             <div *ngIf="formGroup.get('url').touched&&formGroup.get('url').hasError('required')"
@@ -55,31 +55,31 @@
 
     <!--     标签       -->
     <nz-form-item>
-        <nz-form-label [nzSpan]="4" (click)="showTagInput()">文章标签</nz-form-label>
+        <nz-form-label (click)="showTagInput()" [nzSpan]="4">文章标签</nz-form-label>
-        <nz-form-control [nzSpan]="19" [nzOffset]="1">
+        <nz-form-control [nzOffset]="1" [nzSpan]="19">
             <input formControlName="tagList" style="display: none">
-            <nz-tag *ngFor="let t of tagTmpList;let i =index" nzMode="closeable"
+            <nz-tag (nzOnClose)="handleClose(t)" *ngFor="let t of tagTmpList;let i =index"
-                    (nzOnClose)="handleClose(t)" [nzColor]="color[i]">{{t}}</nz-tag>
+                    [nzColor]="color[i]" nzMode="closeable">{{t}}</nz-tag>
             <div style="display: inline-block; width: 60px">
-                <editable-tag *ngIf="tagTmpList?.length!=5" [autoClear]="false"
+                <editable-tag (inEditStatus)="editTagText=null" (valueChange)="handleTagInputConfirm($event)"
-                              [text]="editTagText"
+                              *ngIf="tagTmpList?.length!=5"
+                              [autoClear]="false"
+                              [doubleClick]="false"
                               [showConfirmModal]="false"
                               [showEditIcon]="false"
-                              (inEditStatus)="editTagText=null"
+                              [text]="editTagText"
-                              (valueChange)="handleTagInputConfirm($event)"
+                              size="small">
-                              size="small"
-                              [doubleClick]="false">
                     <i nz-icon nzType="plus"></i>
                 </editable-tag>
             </div>
 
             <span *ngIf="tagListTouched&&formGroup.get('tagList').hasError('required')" class="errTip">未选择或添加标签</span>
-            <nz-card nzSize="small" nzTitle="已有标签" title="最多可选五个标签" style="margin-top: 10px;">
+            <nz-card nzSize="small" nzTitle="已有标签" style="margin-top: 10px;" title="最多可选五个标签">
-                <nz-tag *ngFor="let tag of tagNacList"
+                <nz-tag (nzCheckedChange)="tagChange($event,tag.name)"
-                        style="margin: 4px; border: 1px dashed #6A6A6A;user-select: none"
+                        *ngFor="let tag of tagNacList"
-                        [nzMode]="(tagTmpList?.length<5||tagTmpList?.indexOf(tag.name) > -1)?'checkable':'default'"
                         [nzChecked]="tagTmpList&&tagTmpList.indexOf(tag.name) > -1"
-                        (nzCheckedChange)="tagChange($event,tag.name)">
+                        [nzMode]="(tagTmpList?.length<5||tagTmpList?.indexOf(tag.name) > -1)?'checkable':'default'"
+                        style="margin: 4px; border: 1px dashed #6A6A6A;user-select: none">
                     {{ tag.name }}
                 </nz-tag>
             </nz-card>
@@ -88,8 +88,8 @@
         </nz-form-control>
     </nz-form-item>
 
-    <button nz-button style="width: 100%" nzType="primary"
+    <button [disabled]="!formGroup.valid" nz-button nzType="primary"
-            type="submit" [disabled]="!formGroup.valid">提交
+            style="width: 100%" type="submit">提交
     </button>
 </form>
 

src/app/view/write/components/publish-form/publish-form.component.ts

@@ -1,6 +1,6 @@
 import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
-import {Category, Tag} from '../../../../class/Tag';
+import {Category} from '../../../../class/Tag';
 import {ColorList} from '../../../../utils/color'
 
 @Component({
@@ -10,11 +10,7 @@ import {ColorList} from '../../../../utils/color'
 })
 export class PublishFormComponent implements OnInit {
 
-    constructor(private fb: FormBuilder) {
-    }
-
     @ViewChild('inputElement', {static: true}) tagInputElement: ElementRef;
-
     @Input() tagNacList: { name: string, size: number }[];
     @Input() categoryList: Category[];
     @Input() primaryData: { id: number, type: boolean, tags: string[], category: string, url?: string };
@@ -26,14 +22,16 @@ export class PublishFormComponent implements OnInit {
         isUpdate: boolean,
         url?: string
     }>();
-
     formGroup: FormGroup;
     tagTmpList: string[] = [];
     tagInputVisible: boolean = false;
     tagListTouched: boolean = false;
     editTagText: string = '新增';
-
     color: string[] = [];
+
+    constructor(private fb: FormBuilder) {
+    }
+
     randomColor = () => this.color = ColorList.map(c => c.bgColor).sort(() => Math.floor(Math.random() * 2));
 
     ngOnInit(): void {

src/app/view/write/write.component.html

@@ -1,21 +1,21 @@
 <div class="main">
     <div class="con">
-        <input type="text" [(ngModel)]="article.title" id="title" placeholder="文章标题">
+        <input [(ngModel)]="article.title" id="title" placeholder="文章标题" type="text">
-        <button nz-button nzType="primary" id="submit" (click)="articleSubmit()">提交</button>
+        <button (click)="articleSubmit()" id="submit" nz-button nzType="primary">提交</button>
     </div>
     <div id="vditor"></div>
 </div>
 
-<nz-modal [(nzVisible)]="modalVisible" [nzTitle]="title" [nzContent]="content" [nzFooter]="null"
+<nz-modal (nzOnCancel)="modalVisible = false" [(nzVisible)]="modalVisible" [nzContent]="content" [nzFooter]="null"
-          (nzOnCancel)="modalVisible = false">
+          [nzTitle]="title">
 
     <ng-template #title>
         <h3 style="text-align: center">文章发布</h3>
     </ng-template>
 
     <ng-template #content>
-        <c-publish-form [categoryList]="categoryList" [tagNacList]="tagNacList" [primaryData]="primaryData"
+        <c-publish-form (submitEvent)="publishArticle($event)" [categoryList]="categoryList" [primaryData]="primaryData"
-                        (submitEvent)="publishArticle($event)">
+                        [tagNacList]="tagNacList">
         </c-publish-form>
     </ng-template>
 

src/app/view/write/write.component.ts

@@ -19,6 +19,20 @@ import {Response} from '../../class/HttpReqAndResp';
 })
 export class WriteComponent implements OnInit, OnDestroy {
 
+    modalVisible: boolean = false;
+    articleId: number;
+    isUpdate = false;
+    vditor: Vditor;
+    public article: ArticleReq = new ArticleReq();
+    userInfo: User;
+    categoryList: Tag[];
+    tagNacList: { name: string, size: number }[];
+    primaryData = null;
+    // 发布新文章时，文章相同会被拦回 此处判断一下
+    title: string;
+    private lastShowTime: number;
+    private userInfoSub: { unsubscribe: () => void }
+
     constructor(private router: Router,
                 private activatedRoute: ActivatedRoute,
                 private apiService: ApiService,
@@ -29,23 +43,6 @@ export class WriteComponent implements OnInit, OnDestroy {
         this.titleService.setTitle('小海博客 | 创作');
     }
 
-    modalVisible: boolean = false;
-    articleId: number;
-    isUpdate = false;
-    vditor: Vditor;
-
-    public article: ArticleReq = new ArticleReq();
-
-    userInfo: User;
-    categoryList: Tag[];
-    tagNacList: { name: string, size: number }[];
-    primaryData = null;
-    // 发布新文章时，文章相同会被拦回 此处判断一下
-    title: string;
-
-    private lastShowTime: number;
-    private userInfoSub: { unsubscribe: () => void }
-
     ngOnInit(): void {
         this.vditor = new Vditor('vditor', this.initOption());
         // 用户权限判断