zheng/blog-frontEnd
1
0
Fork 0
Code Issues 2 Pull Requests 12 Actions Packages Projects Releases Wiki Activity

style: format project

Browse Source 
[skip ci]
This commit is contained in:
禾几海
2020-11-22 22:00:09 +08:00
parent ad3759afb3
commit 68b380906a
95 changed files with 974 additions and 1012 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/app/api/api.service.ts
View File

@@ -1,14 +1,11 @@
import {forwardRef, Inject, Injectable} from '@angular/core';
import {Article} from '../class/Article';
import {Injectable} from '@angular/core';
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 {CommentReq} from '../class/Comment';
import {Comment, CommentReq} from '../class/Comment';
import {ApplyLinkReq, Link} from '../class/Link';
import {User} from '../class/User';
import {LoginReq} from '../class/User';
import {LoginReq, User} from '../class/User';
import {Visitor} from '../class/Visitor';
import {UpdateInfo} from '../class/UpdateInfo';

6
src/app/api/http/http.service.ts
View File

@@ -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) {
@@ -69,7 +69,7 @@ export class HttpService {
observer.complete();
},
error: err => {
errorService.httpError(err,request);
errorService.httpError(err, request);
errorService.checkConnection();
this.subscriptionQueue.splice(this.subscriptionQueue.indexOf(subscription), 1)
},

22
src/app/view/admin/admin-article/admin-article.component.html
View File

@@ -1,32 +1,32 @@
<common-table cardTitle="文章管理"
#commonTableComponent
[headData]="headData"
[request]="request"
[template]="{
<common-table #commonTableComponent
[headData]="headData"
[request]="request"
[template]="{
original:{temp:original,param:{true:'原创',false:'转载'}},
readingNumber:{temp:readingNumber},
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>

10
src/app/view/admin/admin-article/admin-article.component.ts
View File

@@ -1,5 +1,5 @@
import {Component, OnInit, ViewChild} from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd/message';
import {NzMessageService} from 'ng-zorro-antd/message';
import {ApiService} from '../../../api/api.service';
import {RequestObj} from '../../../class/HttpReqAndResp';
import {Article} from '../../../class/Article';
@@ -14,6 +14,10 @@ import {Router} from '@angular/router';
})
export class AdminArticleComponent implements OnInit {
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 = [

4
src/app/view/admin/admin-article/admin-article.module.ts
View File

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

34
src/app/view/admin/admin-comment/admin-comment.component.html
View File

@@ -1,44 +1,44 @@
<common-table #commonTableComponent
[request]="request"
[headData]="headData"
cardTitle="评论管理"
[template]="{status:{temp:status,param:{'0':' 正常 ','3':'已删除'}},content:{temp:content}}">
[request]="request"
[template]="{status:{temp:status,param:{'0':' 正常 ','3':'已删除'}},content:{temp:content}}"
cardTitle="评论管理">
</common-table>
<ng-template let-originValue="originValue" let-value="value" #status>
<nz-tag nzColor="geekblue" *ngIf="originValue==0">{{value}}</nz-tag>
<nz-tag nzColor="#f50" *ngIf="originValue==3">{{value}}</nz-tag>
<ng-template #status let-originValue="originValue" let-value="value">
<nz-tag *ngIf="originValue==0" nzColor="geekblue">{{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"
[nzCancelText]="null">
<nz-modal (nzOnOk)="modalData.visible=false" [(nzVisible)]="modalData.visible" [nzCancelText]="null" [nzClosable]="true"
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"
[nzSrc]="comment && comment.fromUser && comment.fromUser.avatarImgUrl"></nz-avatar>
<nz-avatar [nzSrc]="comment && comment.fromUser && comment.fromUser.avatarImgUrl" nz-comment-avatar
nzIcon="user"></nz-avatar>
<nz-comment-content>
<p>{{ comment && comment.content }}</p>
</nz-comment-content>
<!-- <nz-comment-action>Reply to</nz-comment-action>-->
<!-- <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 [ngTemplateOutlet]="commentTemplateRef" [ngTemplateOutletContext]="{ comment: child }">
<ng-template [ngForOf]="comment&&comment.children" let-child ngFor>
<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>

28
src/app/view/admin/admin-comment/admin-comment.component.ts
View File

@@ -1,5 +1,5 @@
import {Component, OnInit, ViewChild} from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd/message';
import {NzMessageService} from 'ng-zorro-antd/message';
import {ApiService} from '../../../api/api.service';
import {RequestObj} from '../../../class/HttpReqAndResp';
import {Comment, CommentReq} from '../../../class/Comment';
@@ -15,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},

8
src/app/view/admin/admin-comment/admin-comment.module.ts
View File

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

14
src/app/view/admin/admin-dashboard/admin-dashboard.component.html
View File

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

13
src/app/view/admin/admin-dashboard/admin-dashboard.component.ts
View File

@@ -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 {
}

14
src/app/view/admin/admin-dashboard/admin-dashboard.module.ts
View File

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

44
src/app/view/admin/admin-link/admin-link.component.html
View File

@@ -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>
<nz-tag [nzColor]="'blue'" *ngIf="originValue=='false'">{{value}}</nz-tag>
<nz-tag [nzColor]="'#ff5500'" *ngIf="originValue!='false'">{{value}}</nz-tag>
<ng-template #deleteTemp let-originValue="originValue" let-value="value">
<nz-tag *ngIf="originValue=='false'" [nzColor]="'blue'">{{value}}</nz-tag>
<nz-tag *ngIf="originValue!='false'" [nzColor]="'#ff5500'">{{value}}</nz-tag>
</ng-template>
<nz-modal [(nzVisible)]="modalVisible" [nzTitle]="modalTitle" (nzOnOk)="modalConfirm()"
(nzOnCancel)="modalVisible = false" [nzClosable]="true" [nzOkDisabled]="!formGroup.valid">
<form nz-form [formGroup]="formGroup">
<nz-modal (nzOnCancel)="modalVisible = false" (nzOnOk)="modalConfirm()" [(nzVisible)]="modalVisible"
[nzClosable]="true" [nzOkDisabled]="!formGroup.valid" [nzTitle]="modalTitle">
<form [formGroup]="formGroup" nz-form>
<nz-form-item>
<nz-form-label nzFlex="80px" nzRequired>网站名称</nz-form-label>
<nz-form-control nzFlex="auto" nzErrorTip="网站名称不可为空">
<input nz-input formControlName="name">
<nz-form-control nzErrorTip="网站名称不可为空" nzFlex="auto">
<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">
<input nz-input formControlName="url">
<nz-form-control [nzErrorTip]="nameErrTip" nzFlex="auto">
<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-select nzPlaceHolder="请选择" formControlName="open" [nzAllowClear]="true">
<nz-form-control nzErrorTip="不可为空" nzFlex="auto">
<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"
[src]="formGroup.value.iconPath" alt="icon">
<img *ngIf="formGroup.value.iconPath" [src]="formGroup.value.iconPath"
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">
<textarea nz-input formControlName="desc" [nzAutosize]="{ minRows: 2, maxRows: 6 }"></textarea>
<nz-form-control nzErrorTip="可输入最大文字长度为255" nzFlex="auto">
<textarea [nzAutosize]="{ minRows: 2, maxRows: 6 }" formControlName="desc" nz-input></textarea>
</nz-form-control>
</nz-form-item>

17
src/app/view/admin/admin-link/admin-link.component.ts
View File

@@ -2,7 +2,7 @@ import {Component, OnInit, ViewChild} from '@angular/core';
import {RequestObj, Response} from '../../../class/HttpReqAndResp';
import {Link} from '../../../class/Link';
import {ApiService} from '../../../api/api.service';
import { NzMessageService } from 'ng-zorro-antd/message';
import {NzMessageService} from 'ng-zorro-antd/message';
import {FormControl, FormGroup, Validators} from '@angular/forms';
import {Observable} from 'rxjs';
import {Title} from '@angular/platform-browser';
@@ -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',

14
src/app/view/admin/admin-link/admin-link.module.ts
View File

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

24
src/app/view/admin/admin-tag/admin-tag.component.html
View File

@@ -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"
[showEditIcon]="false"
[doubleClick]="false"
size="default"
<editable-tag (valueChange)="addCategory($event)"
[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>

12
src/app/view/admin/admin-tag/admin-tag.component.ts
View File

@@ -1,8 +1,8 @@
import {Component, OnInit, ViewChild} from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd/message';
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('小海博客 | 标签分类管理')

8
src/app/view/admin/admin-tag/admin-tag.module.ts
View File

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

10
src/app/view/admin/admin-update/admin-update.component.html
View File

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

10
src/app/view/admin/admin-update/admin-update.component.ts
View File

@@ -1,9 +1,9 @@
import {Component, OnInit} from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd/message';
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 = [

6
src/app/view/admin/admin-update/admin-update.module.ts
View File

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

68
src/app/view/admin/admin-user/admin-user.component.html
View File

@@ -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>
<nz-tag [nzColor]="'blue'" *ngIf="value == 'admin'">{{value}}</nz-tag>
<nz-tag [nzColor]="'purple'" *ngIf="value == 'user'">{{value}}</nz-tag>
<ng-template #role let-value="value">
<nz-tag *ngIf="value == 'admin'" [nzColor]="'blue'">{{value}}</nz-tag>
<nz-tag *ngIf="value == 'user'" [nzColor]="'purple'">{{value}}</nz-tag>
</ng-template>
<ng-template let-value="value" let-originValue="originValue" #emailStatus>
<nz-tag [nzColor]="'green'" *ngIf="originValue !='false'">{{value}}</nz-tag>
<nz-tag [nzColor]="'red'" *ngIf="originValue !='true'">{{value}}</nz-tag>
<ng-template #emailStatus let-originValue="originValue" let-value="value">
<nz-tag *ngIf="originValue !='false'" [nzColor]="'green'">{{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"
(nzOnCancel)="modalData.visible = false" (nzOnOk)="modalConfirm()"
<nz-modal (nzOnCancel)="modalData.visible = false" (nzOnOk)="modalConfirm()" [(nzVisible)]="modalData.visible"
[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"
[disabled]="!modalData.isEdit">
<input [disabled]="!modalData.isEdit" formControlName="email" nz-input
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-option nzValue="admin" nzLabel="admin"></nz-option>
<nz-option nzValue="user" nzLabel="user"></nz-option>
<nz-select [nzDisabled]="!modalData.isEdit||formGroup.value.id==user.id" formControlName="role">
<nz-option nzLabel="admin" nzValue="admin"></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">
<label nz-radio [nzValue]="true">邮箱已验证</label>
<label nz-radio [nzValue]="false">邮箱未验证</label>
<nz-radio-group [nzDisabled]="!modalData.isEdit" formControlName="emailStatus">
<label [nzValue]="true" nz-radio>邮箱已验证</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">
重设密码<i nz-icon nzType="edit" nzTheme="twotone" style="margin-left: 10px;"></i>
<a (click)="modalData.resetPwd = true" *ngIf="!modalData.resetPwd">
重设密码<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"
[disabled]="!modalData.isEdit">
<input [disabled]="!modalData.isEdit" autocomplete="new-password" formControlName="pwd" nz-input
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"
[disabled]="!modalData.isEdit"></textarea>
<textarea [disabled]="!modalData.isEdit" [nzAutosize]="{ minRows: 2, maxRows: 4 }" formControlName="desc"
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 nz-button (click)="modalConfirm()" nzType="primary">提交</button>
<button (click)="modalData.visible = false" nz-button>取消</button>
<button (click)="modalConfirm()" nz-button nzType="primary">提交</button>
</ng-template>
</nz-modal>

25
src/app/view/admin/admin-user/admin-user.component.ts
View File

@@ -1,5 +1,5 @@
import {Component, OnInit} from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd/message';
import {NzMessageService} from 'ng-zorro-antd/message';
import {Title} from '@angular/platform-browser';
import {FormControl, FormGroup} from '@angular/forms';
import {RequestObj} from '../../../class/HttpReqAndResp';
@@ -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 = {

18
src/app/view/admin/admin-user/admin-user.module.ts
View File

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

2
src/app/view/admin/admin-visitor/admin-visitor.component.html
View File

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

6
src/app/view/admin/admin-visitor/admin-visitor.component.ts
View File

@@ -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 = {

112
src/app/view/admin/admin.component.html
View File

@@ -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"
*ngIf="user">
<ul nz-menu nzTheme="light" nzMode="inline" [nzInlineCollapsed]="isCollapsed">
nzCollapsible
nzTheme="light">
<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'">
<i nz-icon nzType="tags" nzTheme="outline"></i>
<li *ngIf="user.role=='admin'" nz-menu-item routerLink="/admin/tag">
<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'">
<i nz-icon nzType="user" nzTheme="outline"></i>
<li *ngIf="user.role=='admin'" nz-menu-item routerLink="/admin/user">
<i nz-icon nzTheme="outline" nzType="user"></i>
<span>用户管理</span>
</li>
<li nz-menu-item routerLink="/admin/link" *ngIf="user.role=='admin'">
<i nz-icon nzType="link" nzTheme="outline"></i>
<li *ngIf="user.role=='admin'" nz-menu-item routerLink="/admin/link">
<i nz-icon nzTheme="outline" nzType="link"></i>
<span>友链管理</span>
</li>
<li nz-menu-item routerLink="/admin/visitor" *ngIf="user.role=='admin'">
<i nz-icon nzType="chrome" nzTheme="outline"></i>
<li *ngIf="user.role=='admin'" nz-menu-item routerLink="/admin/visitor">
<i nz-icon nzTheme="outline" nzType="chrome"></i>
<span>访问管理</span>
</li>
<li nz-menu-item routerLink="/admin/update" *ngIf="user.role=='admin'">
<i nz-icon nzType="arrow-up" nzTheme="outline"></i>
<li *ngIf="user.role=='admin'" nz-menu-item routerLink="/admin/update">
<i nz-icon nzTheme="outline" nzType="arrow-up"></i>
<span>更新管理</span>
</li>
<li nz-menu-item (click)="infoDrawerVisible = true">
<i nz-icon nzType="idcard" nzTheme="outline"></i>
<li (click)="infoDrawerVisible = true" nz-menu-item>
<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"
[nzTitle]="sayHelloTemp" (nzOnClose)="infoDrawerVisible = false" nzWidth="300px">
<nz-drawer (nzOnClose)="infoDrawerVisible = false" [nzClosable]="false" [nzTitle]="sayHelloTemp"
[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"
*ngIf="user.avatarImgUrl!==noAvatarUrl"></nz-avatar>
<nz-avatar [nzSize]="64" [nzText]="user.displayName" style="background: #f56a00"
*ngIf="user.avatarImgUrl===noAvatarUrl"></nz-avatar>
<nz-avatar *ngIf="user.avatarImgUrl!==noAvatarUrl" [nzSize]="64"
[nzSrc]="user.avatarImgUrl"></nz-avatar>
<nz-avatar *ngIf="user.avatarImgUrl===noAvatarUrl" [nzSize]="64" [nzText]="user.displayName"
style="background: #f56a00"></nz-avatar>
<nz-upload style="display: block" [nzAction]="host+'/user/imgUpload'" nzWithCredentials="true" nzLimit="1"
(nzChange)="avatarUpload($event)" [nzHeaders]="uploadHeader">
<nz-upload (nzChange)="avatarUpload($event)" [nzAction]="host+'/user/imgUpload'" [nzHeaders]="uploadHeader" nzLimit="1"
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">
<i nz-icon nzType="info-circle" class="icon" nzTheme="twotone"></i>
<span nz-tooltip [nzTooltipTitle]="user.desc" nzTooltipPlacement="left" nz-typography [nzEllipsis]="true"
[nzContent]="user.desc" style="max-width: 100px">{{user.desc}}</span>
<i nz-icon nzType="edit" class="edit-icon" nzTheme="twotone" (click)="showEditInfoModal()"></i>
<nz-descriptions-item *ngIf="user&&user.desc" nzTitle="描述">
<i class="icon" nz-icon nzTheme="twotone" nzType="info-circle"></i>
<span [nzContent]="user.desc" [nzEllipsis]="true" [nzTooltipTitle]="user.desc" nz-tooltip nz-typography
nzTooltipPlacement="left" style="max-width: 100px">{{user.desc}}</span>
<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"
(nzOnOk)="resetPwdConfirm()" nzTitle="修改密码" [nzOkDisabled]="!resetPwdFormGroup.valid">
<form nz-form (submit)="resetPwdConfirm()" [formGroup]="resetPwdFormGroup">
<nz-modal (nzOnCancel)="resetPwdModalVisible = false" (nzOnOk)="resetPwdConfirm()" [(nzVisible)]="resetPwdModalVisible"
[nzOkDisabled]="!resetPwdFormGroup.valid" nzClosable="true" nzTitle="修改密码">
<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>

3
src/app/view/admin/admin.component.less
View File

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

55
src/app/view/admin/admin.component.ts
View File

@@ -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}`
}
}
}

15
src/app/view/admin/auth.guard.ts
View File

@@ -1,12 +1,5 @@
import {Injectable} from '@angular/core';
import {
CanActivate,
ActivatedRouteSnapshot,
RouterStateSnapshot,
UrlTree,
Router,
CanActivateChild
} from '@angular/router';
import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot} 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++;

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

@@ -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()"
style="cursor: pointer;margin-right: 10px"></i>
<i nz-icon nzType="reload" nzTheme="outline" (click)="getData()" title="刷新" style="cursor: pointer"></i>
<i (click)="showFieldSetting()" nz-icon nzTheme="outline" nzType="setting" style="cursor: pointer;margin-right: 10px"
title="设置"></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"
[nzData]="dataList.list"
[nzTotal]="dataList.total"
<nz-table (nzPageIndexChange)="getData()"
[(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"
(mouseenter)="action.hover(t)"
<a (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"
[nzClosable]="true"
(nzOnCancel)="cancel()"
<nz-modal (nzOnCancel)="cancel()"
(nzOnOk)="ok()"
[(nzVisible)]="settingModalVisible"
[nzClosable]="true"
nzTitle="表格字段设置(可拖动排序)"
>
<button nz-button nzType="primary" (click)="reset()" [disabled]="!changed">重置</button>
<nz-table [nzData]="filedData" nzSize="small" nzPageSize="10000" nzShowPagination="false">
<tbody cdkDropList (cdkDropListDropped)="drop($event)">
<ng-template ngFor [ngForOf]="filedData" let-item let-index="index">
<tr *ngIf="!item.isActionColumns" cdkDrag (click)="click()">
<button (click)="reset()" [disabled]="!changed" nz-button nzType="primary">重置</button>
<nz-table [nzData]="filedData" nzPageSize="10000" nzShowPagination="false" nzSize="small">
<tbody (cdkDropListDropped)="drop($event)" cdkDropList>
<ng-template [ngForOf]="filedData" let-index="index" let-item ngFor>
<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>

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

@@ -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)) {

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

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

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

@@ -1,15 +1,5 @@
import {
Component,
ElementRef,
EventEmitter,
Input,
OnChanges,
OnInit,
Output,
SimpleChanges,
ViewChild
} from '@angular/core';
import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
import {Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild} from '@angular/core';
import {NzModalRef, NzModalService} from 'ng-zorro-antd/modal';
@Component({
selector: 'editable-tag',
@@ -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) {

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

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

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

@@ -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 color="green" [showBorder]="false">hhh</editable-tag>
<editable-tag [showEditIcon]="false" color="green">hhh</editable-tag>
<editable-tag [showBorder]="false" color="green">hhh</editable-tag>

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

@@ -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',

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

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

62
src/app/view/article/article.component.html
View File

@@ -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>
<a class="tag" [routerLink]="['/tags/'+item.name]">{{item.name}}</a>
<i nz-icon nzTheme="fill" nzType="tag"></i>
<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"
[nzAutosize]="{ minRows: 2, maxRows: user?6:2 }"></textarea>
<span *ngIf="!user">请先 <a routerLink="/user/login"
[queryParams]="{url:'/article/'+articleId}">登录</a></span>
<textarea [(ngModel)]="comment.content" [disabled]="!user" [nzAutosize]="{ minRows: 2, maxRows: user?6:2 }" nz-input
rows="4"></textarea>
<span *ngIf="!user">请先 <a [queryParams]="{url:'/article/'+articleId}"
routerLink="/user/login">登录</a></span>
</nz-form-item>
<nz-form-item>
<button nz-button nzType="primary" [nzLoading]="!user&&submitting"
[disabled]="!comment.content"
(click)="submitComment(true)">评论
<button (click)="submitComment(true)" [disabled]="!comment.content" [nzLoading]="!user&&submitting"
nz-button
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"
*ngIf="comment.fromUser.avatarImgUrl">
<nz-avatar *ngIf="comment.fromUser.avatarImgUrl" [nzSrc]="comment.fromUser.avatarImgUrl" nz-comment-avatar
nzIcon="user">
</nz-avatar>
<nz-avatar nz-comment-avatar nzIcon="user" [nzText]="comment.fromUser.displayName"
*ngIf="!comment.fromUser.avatarImgUrl">
<nz-avatar *ngIf="!comment.fromUser.avatarImgUrl" [nzText]="comment.fromUser.displayName" nz-comment-avatar
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>
<button nz-button nzType="link" (click)="resp(comment.id,comment.fromUser.displayName)">回复
<i nz-icon nzTheme="outline" nzType="message"></i>
<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"
*ngIf="com.fromUser.avatarImgUrl">
<nz-avatar *ngIf="com.fromUser.avatarImgUrl" [nzSrc]="com.fromUser.avatarImgUrl" nz-comment-avatar
nzIcon="user">
</nz-avatar>
<nz-avatar nz-comment-avatar nzIcon="user" [nzText]="com.fromUser.displayName"
*ngIf="!com.fromUser.avatarImgUrl">
<nz-avatar *ngIf="!com.fromUser.avatarImgUrl" [nzText]="com.fromUser.displayName" nz-comment-avatar
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="写出你的想法"
[nzAutosize]="{ minRows: 2, maxRows: 6 }" [disabled]="!user">
<textarea [(ngModel)]="content" [disabled]="!user" [nzAutosize]="{ minRows: 2, maxRows: 6 }"
nz-input placeholder="写出你的想法">
</textarea>
<ng-template #respName>
<span>@{{name}}</span>
</ng-template>
</nz-input-group>
<div *ngIf="!user">请先 <a routerLink="/user/login"
[queryParams]="{url:'/article/'+articleId}">登录</a></div>
<button nz-button (click)="pid=null" style="margin-top: 10px;">取消</button>
<button nz-button nzType="primary" (click)="submitComment(false)"
style="margin-left: 30px;margin-top: 10px;" [nzLoading]="!user&&submitting">回复
<div *ngIf="!user">请先 <a [queryParams]="{url:'/article/'+articleId}"
routerLink="/user/login">登录</a></div>
<button (click)="pid=null" nz-button style="margin-top: 10px;">取消</button>
<button (click)="submitComment(false)" [nzLoading]="!user&&submitting" nz-button
nzType="primary" style="margin-left: 30px;margin-top: 10px;">回复
</button>
</nz-form-item>

3
src/app/view/article/article.component.less
View File

@@ -102,6 +102,7 @@ nz-content {
.article-bAnda {
height: 70px;
max-height: 110px;
a {
display: block;
}
@@ -110,4 +111,4 @@ nz-content {
#f-comment {
margin: 30px 3%
}
}
}

36
src/app/view/article/article.component.spec.ts
View File

@@ -1,25 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import { ArticleComponent } from './article.component';
import {ArticleComponent} from './article.component';
describe('ArticleComponent', () => {
let component: ArticleComponent;
let fixture: ComponentFixture<ArticleComponent>;
let component: ArticleComponent;
let fixture: ComponentFixture<ArticleComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ArticleComponent ]
})
.compileComponents();
}));
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ArticleComponent]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ArticleComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
beforeEach(() => {
fixture = TestBed.createComponent(ArticleComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

17
src/app/view/article/article.component.ts
View File

@@ -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() {

26
src/app/view/article/article.module.ts
View File

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

10
src/app/view/category/category.component.html
View File

@@ -3,9 +3,9 @@
<div id="category">
<ul *ngIf="categoryList.length">
<c-tag-tag *ngFor="let category of categoryList"
[tag]="{name:category.name,size:category.articles.length}"
(tagClick)="changeCategory(category)">
<c-tag-tag (tagClick)="changeCategory(category)"
*ngFor="let category of categoryList"
[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>
@@ -25,4 +25,4 @@
<div *ngIf="!articleList||!articleList.list.length">
<h2 style="text-align: center">该分类暂无文章</h2>
</div>
</div>
</div>

5
src/app/view/category/category.component.less
View File

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

36
src/app/view/category/category.component.spec.ts
View File

@@ -1,25 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import { CategoryComponent } from './category.component';
import {CategoryComponent} from './category.component';
describe('CategoryComponent', () => {
let component: CategoryComponent;
let fixture: ComponentFixture<CategoryComponent>;
let component: CategoryComponent;
let fixture: ComponentFixture<CategoryComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ CategoryComponent ]
})
.compileComponents();
}));
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [CategoryComponent]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(CategoryComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
beforeEach(() => {
fixture = TestBed.createComponent(CategoryComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

13
src/app/view/category/category.component.ts
View File

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

4
src/app/view/category/category.module.ts
View File

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

6
src/app/view/email-verify/email-verify.component.html
View File

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

4
src/app/view/email-verify/email-verify.component.less
View File

@@ -1,6 +1,6 @@
#main{
#main {
width: 60%;
height: 50px;
margin: 0 auto;
padding: 15% 0;
}
}

36
src/app/view/email-verify/email-verify.component.spec.ts
View File

@@ -1,25 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import { EmailVerifyComponent } from './email-verify.component';
import {EmailVerifyComponent} from './email-verify.component';
describe('EmailVerifyComponent', () => {
let component: EmailVerifyComponent;
let fixture: ComponentFixture<EmailVerifyComponent>;
let component: EmailVerifyComponent;
let fixture: ComponentFixture<EmailVerifyComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ EmailVerifyComponent ]
})
.compileComponents();
}));
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [EmailVerifyComponent]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(EmailVerifyComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
beforeEach(() => {
fixture = TestBed.createComponent(EmailVerifyComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

14
src/app/view/email-verify/email-verify.component.ts
View File

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

2
src/app/view/email-verify/email-verify.module.ts
View File

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

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

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

36
src/app/view/index/components/article-detail-card/article-detail-card.component.spec.ts
View File

@@ -1,25 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import { ArticleDetailCardComponent } from './article-detail-card.component';
import {ArticleDetailCardComponent} from './article-detail-card.component';
describe('ArticleDetailCardComponent', () => {
let component: ArticleDetailCardComponent;
let fixture: ComponentFixture<ArticleDetailCardComponent>;
let component: ArticleDetailCardComponent;
let fixture: ComponentFixture<ArticleDetailCardComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ArticleDetailCardComponent ]
})
.compileComponents();
}));
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ArticleDetailCardComponent]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ArticleDetailCardComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
beforeEach(() => {
fixture = TestBed.createComponent(ArticleDetailCardComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

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

@@ -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 不可为空');

36
src/app/view/index/components/card-detail/card-detail.component.spec.ts
View File

@@ -1,25 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import { CardDetailComponent } from './card-detail.component';
import {CardDetailComponent} from './card-detail.component';
describe('CardDetailComponent', () => {
let component: CardDetailComponent;
let fixture: ComponentFixture<CardDetailComponent>;
let component: CardDetailComponent;
let fixture: ComponentFixture<CardDetailComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ CardDetailComponent ]
})
.compileComponents();
}));
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [CardDetailComponent]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(CardDetailComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
beforeEach(() => {
fixture = TestBed.createComponent(CardDetailComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

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

@@ -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() {

16
src/app/view/index/components/tag-tag/tag-tag.component.html
View File

@@ -1,19 +1,19 @@
<div class="tag-tag" nz-tooltip
style="cursor: pointer"
[nzTooltipTitle]="tag.name"
(click)="click()">
<span class="tag-name"
[style.background-color]="randColor.bgColor"
<div (click)="click()" [nzTooltipTitle]="tag.name"
class="tag-tag"
nz-tooltip
style="cursor: pointer">
<span [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"
[style.border-color]="randColor.bgColor"
<span [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>

36
src/app/view/index/components/tag-tag/tag-tag.component.spec.ts
View File

@@ -1,25 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import { TagTagComponent } from './tag-tag.component';
import {TagTagComponent} from './tag-tag.component';
describe('TagTagComponent', () => {
let component: TagTagComponent;
let fixture: ComponentFixture<TagTagComponent>;
let component: TagTagComponent;
let fixture: ComponentFixture<TagTagComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ TagTagComponent ]
})
.compileComponents();
}));
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [TagTagComponent]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(TagTagComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
beforeEach(() => {
fixture = TestBed.createComponent(TagTagComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

7
src/app/view/index/components/tag-tag/tag-tag.component.ts
View File

@@ -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];

62
src/app/view/index/index.component.html
View File

@@ -1,83 +1,83 @@
<div nz-row id="index-container">
<div nz-col nzSpan="14" nzOffset="2" id="index-left">
<div id="index-container" nz-row>
<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"
[src]="imgUrl" alt="pic">
<img [src]="imgUrl"
alt="pic" id="index-bloger-pic">
<div id="index-bloger-desc">
<p><span style="font-weight: bold;font-size: x-large;"
[title]="desc"> 郑 海</span></p>
<p><span [title]="desc"
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>
Github : <a target="_blank" href="https://github.com/xiaohai2271"> link>></a>
<p><i nz-icon nzTheme="outline" nzType="github"></i>
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"
style="color: #ff8936;border-color: #ff8936;cursor: pointer"
(mouseenter)="changeImg(qqQrImgUrl)" (mouseleave)="changeImg()"></i>
<i (mouseenter)="changeImg(qqQrImgUrl)" (mouseleave)="changeImg()" nz-icon nzTheme="outline"
nzType="qq"
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"
style="color: #7bcfa6;border-color: #7bcfa6;cursor: pointer"
(mouseenter)="changeImg(wxQrImgUrl)" (mouseleave)="changeImg()"></i>
<i (mouseenter)="changeImg(wxQrImgUrl)" (mouseleave)="changeImg()" nz-icon nzTheme="outline"
nzType="wechat"
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">
<c-tag-tag *ngFor="let category of categoryList"
[tag]="{name:category.name,size:category.articles.length}"
(tagClick)="toCategory(category.name)">
<div style="text-align: center;user-select: none" title="">
<c-tag-tag (tagClick)="toCategory(category.name)"
*ngFor="let category of categoryList"
[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">
<c-tag-tag *ngFor="let tag of tagNameAndNumber" [tag]="tag" (tagClick)="toTag(tag.name)">
<div style="text-align: center;user-select: none" title="">
<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>

36
src/app/view/index/index.component.spec.ts
View File

@@ -1,25 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import { IndexComponent } from './index.component';
import {IndexComponent} from './index.component';
describe('IndexComponent', () => {
let component: IndexComponent;
let fixture: ComponentFixture<IndexComponent>;
let component: IndexComponent;
let fixture: ComponentFixture<IndexComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ IndexComponent ]
})
.compileComponents();
}));
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [IndexComponent]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(IndexComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
beforeEach(() => {
fixture = TestBed.createComponent(IndexComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

23
src/app/view/index/index.component.ts
View File

@@ -1,8 +1,8 @@
import {Component, OnInit} from '@angular/core';
import {ApiService} from '../../api/api.service';
import {Article} from '../../class/Article';
import { NzIconService } from 'ng-zorro-antd/icon';
import { NzMessageService } from 'ng-zorro-antd/message';
import {NzIconService} from 'ng-zorro-antd/icon';
import {NzMessageService} from 'ng-zorro-antd/message';
import {SvgIconUtil} from '../../utils/svgIconUtil';
import {PageList, RequestObj} from '../../class/HttpReqAndResp';
import {Router} from '@angular/router';
@@ -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欢迎一起来探讨学习。';

18
src/app/view/index/index.module.ts
View File

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

36
src/app/view/leave-msg/leave-msg.component.spec.ts
View File

@@ -1,25 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import { LeaveMsgComponent } from './leave-msg.component';
import {LeaveMsgComponent} from './leave-msg.component';
describe('LeaveMsgComponent', () => {
let component: LeaveMsgComponent;
let fixture: ComponentFixture<LeaveMsgComponent>;
let component: LeaveMsgComponent;
let fixture: ComponentFixture<LeaveMsgComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ LeaveMsgComponent ]
})
.compileComponents();
}));
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [LeaveMsgComponent]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(LeaveMsgComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
beforeEach(() => {
fixture = TestBed.createComponent(LeaveMsgComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

15
src/app/view/leave-msg/leave-msg.component.ts
View File

@@ -1,15 +1,16 @@
import { Component, OnInit } from '@angular/core';
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'view-leave-msg',
templateUrl: './leave-msg.component.html',
styleUrls: ['./leave-msg.component.less']
selector: 'view-leave-msg',
templateUrl: './leave-msg.component.html',
styleUrls: ['./leave-msg.component.less']
})
export class LeaveMsgComponent implements OnInit {
constructor() { }
constructor() {
}
ngOnInit() {
}
ngOnInit() {
}
}

56
src/app/view/link/link.component.html
View File

@@ -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">
<i *ngIf="!link.iconPath" nz-icon nzType="link" nzTheme="outline"
[style.color]="colors[i].fontColor"></i>
<img *ngIf="link.iconPath" [alt]="link.iconPath" [src]="link.iconPath">
<i *ngIf="!link.iconPath" [style.color]="colors[i].fontColor" nz-icon nzTheme="outline"
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"
(nzOnCancel)="cancel()" nzWidth="650">
<nz-modal (nzOnCancel)="cancel()" [(nzVisible)]="showModal" [nzContent]="modalContent" [nzFooter]="modalFooter"
[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">
<input nz-input formControlName="name">
<nz-form-control [nzErrorTip]="nameErrTip" nzFlex="auto">
<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">
<input nz-input formControlName="email">
<nz-form-control [nzErrorTip]="emailErrTip" nzFlex="auto">
<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"
[src]="applyFormGroup.value.iconPath" alt="icon">
<img *ngIf="applyFormGroup.value.iconPath" [src]="applyFormGroup.value.iconPath"
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">
<textarea nz-input formControlName="desc" [nzAutosize]="{ minRows: 2, maxRows: 6 }"></textarea>
<nz-form-control nzErrorTip="可输入最大文字长度为255" nzFlex="auto">
<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 nz-button nzType="primary" (click)="apply()" [disabled]="!applyFormGroup.valid" [nzLoading]="loading">
<button (click)="cancel()" nz-button>取消</button>
<button (click)="apply()" [disabled]="!applyFormGroup.valid" [nzLoading]="loading" nz-button nzType="primary">
提交
</button>
</ng-template>

3
src/app/view/link/link.component.less
View File

@@ -171,9 +171,10 @@ i {
width: 96%;
}
.partner-sites{
.partner-sites {
padding: 0 30px;
}
.partner-sites li {
float: left;
width: 100%;

36
src/app/view/link/link.component.spec.ts
View File

@@ -1,25 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import { LinkComponent } from './link.component';
import {LinkComponent} from './link.component';
describe('LinkComponent', () => {
let component: LinkComponent;
let fixture: ComponentFixture<LinkComponent>;
let component: LinkComponent;
let fixture: ComponentFixture<LinkComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ LinkComponent ]
})
.compileComponents();
}));
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [LinkComponent]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(LinkComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
beforeEach(() => {
fixture = TestBed.createComponent(LinkComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

25
src/app/view/link/link.component.ts
View File

@@ -1,6 +1,6 @@
import {Component, OnInit} from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd/message';
import { NzModalService } from 'ng-zorro-antd/modal';
import {NzMessageService} from 'ng-zorro-antd/message';
import {NzModalService} from 'ng-zorro-antd/modal';
import {Title} from '@angular/platform-browser';
import {ApiService} from '../../api/api.service';
import {ApplyLinkReq, Link} from '../../class/Link';
@@ -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();

12
src/app/view/link/link.module.ts
View File

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

20
src/app/view/login-registration/service/login-registration.service.spec.ts
View File

@@ -1,16 +1,16 @@
import { TestBed } from '@angular/core/testing';
import {TestBed} from '@angular/core/testing';
import { LoginRegistrationService } from './login-registration.service';
import {LoginRegistrationService} from './login-registration.service';
describe('LoginRegistrationService', () => {
let service: LoginRegistrationService;
let service: LoginRegistrationService;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(LoginRegistrationService);
});
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(LoginRegistrationService);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
it('should be created', () => {
expect(service).toBeTruthy();
});
});

4
src/app/view/login-registration/service/login-registration.service.ts
View File

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

4
src/app/view/maintain/maintain.module.ts
View File

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

6
src/app/view/page-not-found/page-not-found.component.less
View File

@@ -1,4 +1,4 @@
div{
div {
margin: 0;
padding: 0;
border: 0;
@@ -44,9 +44,9 @@ a {
font-style: italic
}
@media only screen and (max-width:768px) {
@media only screen and (max-width: 768px) {
.error404 {
width: 100%;
background: url(../../../assets/img/404-m.jpg) -10px;
}
}
}

36
src/app/view/page-not-found/page-not-found.component.spec.ts
View File

@@ -1,25 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import { PageNotFoundComponent } from './page-not-found.component';
import {PageNotFoundComponent} from './page-not-found.component';
describe('PageNotFoundComponent', () => {
let component: PageNotFoundComponent;
let fixture: ComponentFixture<PageNotFoundComponent>;
let component: PageNotFoundComponent;
let fixture: ComponentFixture<PageNotFoundComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ PageNotFoundComponent ]
})
.compileComponents();
}));
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [PageNotFoundComponent]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(PageNotFoundComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
beforeEach(() => {
fixture = TestBed.createComponent(PageNotFoundComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

8
src/app/view/reset-pwd/reset-pwd.component.html
View File

@@ -1,14 +1,14 @@
<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 type="password" placeholder="确认密码" [(ngModel)]="rePwd"/>
<input [(ngModel)]="pwd" placeholder="新密码" type="password"/>
<input [(ngModel)]="rePwd" placeholder="确认密码" type="password"/>
<button (click)="submit()">提交</button>
</div>
</div>
</div>
</div>

36
src/app/view/reset-pwd/reset-pwd.component.spec.ts
View File

@@ -1,25 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import { ResetPwdComponent } from './reset-pwd.component';
import {ResetPwdComponent} from './reset-pwd.component';
describe('ResetPwdComponent', () => {
let component: ResetPwdComponent;
let fixture: ComponentFixture<ResetPwdComponent>;
let component: ResetPwdComponent;
let fixture: ComponentFixture<ResetPwdComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ResetPwdComponent ]
})
.compileComponents();
}));
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ResetPwdComponent]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ResetPwdComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
beforeEach(() => {
fixture = TestBed.createComponent(ResetPwdComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

16
src/app/view/reset-pwd/reset-pwd.component.ts
View File

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

2
src/app/view/reset-pwd/reset-pwd.module.ts
View File

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

8
src/app/view/tag/tag.component.html
View File

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

36
src/app/view/tag/tag.component.spec.ts
View File

@@ -1,25 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import { TagComponent } from './tag.component';
import {TagComponent} from './tag.component';
describe('TagComponent', () => {
let component: TagComponent;
let fixture: ComponentFixture<TagComponent>;
let component: TagComponent;
let fixture: ComponentFixture<TagComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ TagComponent ]
})
.compileComponents();
}));
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [TagComponent]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(TagComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
beforeEach(() => {
fixture = TestBed.createComponent(TagComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

13
src/app/view/tag/tag.component.ts
View File

@@ -2,7 +2,7 @@ import {Component, OnInit} from '@angular/core';
import {PageList} from '../../class/HttpReqAndResp';
import {Article} from '../../class/Article';
import {ApiService} from '../../api/api.service';
import { NzMessageService } from 'ng-zorro-antd/message';
import {NzMessageService} from 'ng-zorro-antd/message';
import {Location} from '@angular/common';
import {ActivatedRoute} from '@angular/router';
import {Title} from '@angular/platform-browser';
@@ -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);

8
src/app/view/update/update.component.html
View File

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

6
src/app/view/update/update.component.less
View File

@@ -1,9 +1,11 @@
nz-tag {
text-indent: initial;
}
.pointer{
.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 {

36
src/app/view/update/update.component.spec.ts
View File

@@ -1,25 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import { UpdateComponent } from './update.component';
import {UpdateComponent} from './update.component';
describe('UpdateComponent', () => {
let component: UpdateComponent;
let fixture: ComponentFixture<UpdateComponent>;
let component: UpdateComponent;
let fixture: ComponentFixture<UpdateComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ UpdateComponent ]
})
.compileComponents();
}));
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [UpdateComponent]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(UpdateComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
beforeEach(() => {
fixture = TestBed.createComponent(UpdateComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

14
src/app/view/update/update.component.ts
View File

@@ -9,21 +9,21 @@ 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;
lastCommit: string;
committerAuthor: string;
committerDate: string;
commitUrl:string
} ;
commitUrl: string
};
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;

2
src/app/view/update/update.module.ts
View File

@@ -2,7 +2,7 @@ import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {UpdateComponent} from './update.component';
import {Route, RouterModule} from '@angular/router';
import { NzTagModule } from 'ng-zorro-antd/tag';
import {NzTagModule} from 'ng-zorro-antd/tag';
const routes: Route[] = [{path: '**', component: UpdateComponent}];

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

@@ -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 nz-radio-button [nzValue]="true"><span>更新旧文章</span></label>
<label [nzValue]="false" nz-radio-button><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-radio-group formControlName="type" (ngModelChange)="articleTypeChanged()">
<label nz-radio-button [nzValue]="true"><span>原创</span></label>
<label nz-radio-button [nzValue]="false"><span>转载</span></label>
<nz-form-control nzErrorTip="请选择文章的类型" nzOffset="1" nzSpan="19">
<nz-radio-group (ngModelChange)="articleTypeChanged()" formControlName="type">
<label [nzValue]="true" nz-radio-button><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-select nzAllowClear nzPlaceHolder="选择分类" formControlName="category">
<nz-option *ngFor="let option of categoryList" [nzValue]="option.name"
[nzLabel]="option.name"></nz-option>
<nz-form-control nzErrorTip="文章的分类不可为空" nzOffset="1" nzSpan="19">
<nz-select formControlName="category" nzAllowClear nzPlaceHolder="选择分类">
<nz-option *ngFor="let option of categoryList" [nzLabel]="option.name"
[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"
(click)="clearInput()"></i>
<i (click)="clearInput()" *ngIf="formGroup.value.url" nz-icon nzTheme="fill"
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-control [nzSpan]="19" [nzOffset]="1">
<nz-form-label (click)="showTagInput()" [nzSpan]="4">文章标签</nz-form-label>
<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"
(nzOnClose)="handleClose(t)" [nzColor]="color[i]">{{t}}</nz-tag>
<nz-tag (nzOnClose)="handleClose(t)" *ngFor="let t of tagTmpList;let i =index"
[nzColor]="color[i]" nzMode="closeable">{{t}}</nz-tag>
<div style="display: inline-block; width: 60px">
<editable-tag *ngIf="tagTmpList?.length!=5" [autoClear]="false"
[text]="editTagText"
<editable-tag (inEditStatus)="editTagText=null" (valueChange)="handleTagInputConfirm($event)"
*ngIf="tagTmpList?.length!=5"
[autoClear]="false"
[doubleClick]="false"
[showConfirmModal]="false"
[showEditIcon]="false"
(inEditStatus)="editTagText=null"
(valueChange)="handleTagInputConfirm($event)"
size="small"
[doubleClick]="false">
[text]="editTagText"
size="small">
<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-tag *ngFor="let tag of tagNacList"
style="margin: 4px; border: 1px dashed #6A6A6A;user-select: none"
[nzMode]="(tagTmpList?.length<5||tagTmpList?.indexOf(tag.name) > -1)?'checkable':'default'"
<nz-card nzSize="small" nzTitle="已有标签" style="margin-top: 10px;" title="最多可选五个标签">
<nz-tag (nzCheckedChange)="tagChange($event,tag.name)"
*ngFor="let tag of tagNacList"
[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"
type="submit" [disabled]="!formGroup.valid">提交
<button [disabled]="!formGroup.valid" nz-button nzType="primary"
style="width: 100%" type="submit">提交
</button>
</form>

36
src/app/view/write/components/publish-form/publish-form.component.spec.ts
View File

@@ -1,25 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import { TestComponent } from './publish-form.component';
import {TestComponent} from './publish-form.component';
describe('TestComponent', () => {
let component: TestComponent;
let fixture: ComponentFixture<TestComponent>;
let component: TestComponent;
let fixture: ComponentFixture<TestComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ TestComponent ]
})
.compileComponents();
}));
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [TestComponent]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(TestComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
beforeEach(() => {
fixture = TestBed.createComponent(TestComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

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

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

12
src/app/view/write/write.component.html
View File

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

36
src/app/view/write/write.component.spec.ts
View File

@@ -1,25 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import { WriteComponent } from './write.component';
import {WriteComponent} from './write.component';
describe('WriteComponent', () => {
let component: WriteComponent;
let fixture: ComponentFixture<WriteComponent>;
let component: WriteComponent;
let fixture: ComponentFixture<WriteComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ WriteComponent ]
})
.compileComponents();
}));
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [WriteComponent]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(WriteComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
beforeEach(() => {
fixture = TestBed.createComponent(WriteComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

33
src/app/view/write/write.component.ts
View File

@@ -2,7 +2,7 @@ import {Component, OnDestroy, OnInit} from '@angular/core';
import {ArticleReq} from '../../class/Article';
import {ActivatedRoute, Router} from '@angular/router';
import {ApiService} from '../../api/api.service';
import { NzMessageService } from 'ng-zorro-antd/message';
import {NzMessageService} from 'ng-zorro-antd/message';
import {User} from '../../class/User';
import {Tag} from '../../class/Tag';
import {Title} from '@angular/platform-browser';
@@ -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());
// 用户权限判断

20
src/app/view/write/write.module.ts
View File

@@ -4,16 +4,16 @@ import {WriteComponent} from './write.component';
import {Route, RouterModule} from '@angular/router';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {PublishFormComponent} from './components/publish-form/publish-form.component';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzCardModule } from 'ng-zorro-antd/card';
import { NzDividerModule } from 'ng-zorro-antd/divider';
import { NzFormModule } from 'ng-zorro-antd/form';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzInputModule } from 'ng-zorro-antd/input';
import { NzModalModule } from 'ng-zorro-antd/modal';
import { NzRadioModule } from 'ng-zorro-antd/radio';
import { NzSelectModule } from 'ng-zorro-antd/select';
import { NzTagModule } from 'ng-zorro-antd/tag';
import {NzButtonModule} from 'ng-zorro-antd/button';
import {NzCardModule} from 'ng-zorro-antd/card';
import {NzDividerModule} from 'ng-zorro-antd/divider';
import {NzFormModule} from 'ng-zorro-antd/form';
import {NzIconModule} from 'ng-zorro-antd/icon';
import {NzInputModule} from 'ng-zorro-antd/input';
import {NzModalModule} from 'ng-zorro-antd/modal';
import {NzRadioModule} from 'ng-zorro-antd/radio';
import {NzSelectModule} from 'ng-zorro-antd/select';
import {NzTagModule} from 'ng-zorro-antd/tag';
import {EditableTagModule} from '../admin/components/editable-tag/editable-tag.module';
const routes: Route[] = [