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

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