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

合并为一个项目 #14

Merged
xiaohai2271 merged 56 commits from issue11 into master 2020-05-16 22:35:08 +08:00
Conversation 0 Commits 56 Files Changed 683 +133 -36
7 changed files with 133 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit e54726b4e8 - Show all commits

16
index/src/app/components/admin-header/admin-header.component.html
View File

@@ -10,21 +10,9 @@
</div>
<div id="loged" *ngIf="user">
<div id="loged" *ngIf="user" (click)="infoClickedEvent()">
<nz-avatar [nzSrc]="user.avatarImgUrl"></nz-avatar>
<button nz-button nzType="link" nz-dropdown [nzDropdownMenu]="menu" nzTrigger="click" [nzClickHide]="false">
{{user.displayName}}
<i nz-icon nzType="down"></i>
</button>
<nz-dropdown-menu #menu="nzDropdownMenu">
<ul nz-menu>
<li nz-menu-item><a routerLink="/">博客首页</a></li>
<hr style="opacity: 0.6">
<li nz-menu-item>
<a (click)="logout()">退出登录</a>
</li>
</ul>
</nz-dropdown-menu>
<span>{{user.displayName}}</span>
</div>

5
index/src/app/components/admin-header/admin-header.component.less
View File

@@ -23,14 +23,16 @@ a {
#landr, #loged {
position: absolute;
right: 20px;
right: 60px;
top: 20px;
cursor: pointer;
}
#blogTitle, #desc {
display: block;
margin-left: 15px;
max-width: 300px;
}
#blogTitle {
@@ -40,5 +42,6 @@ a {
#desc {
font-size: 10px;
}

42
index/src/app/services/global-user.service.ts
View File

@@ -41,22 +41,8 @@ export class GlobalUserService {
// 不符合 请求网络数据并更新缓存
// 向订阅者传数据
this.lastRequestTime = Date.now();
const subscription = this.apiService.userInfo().subscribe({
next: o => {
this.localStorageService.setUser(o.result);
this.userObserverArray.forEach(ob => ob.next(o));
},
error: err => {
// console.debug('登录过期 token错误 等等');
if (err.code === -1) {
// 请求重复
return
}
this.localStorageService.removeToken();
this.userObserverArray.forEach(ob => ob.next(new Response<User>(null)));
this.userObserverArray.forEach(ob => ob.error(err));
}
});
// 获取数据
const subscription = this.getUserInfoFromServer();
return {
unsubscribe() {
observer.complete();
@@ -65,6 +51,11 @@ export class GlobalUserService {
}
}
// 刷新用户信息
refreshUserInfo(): void {
this.getUserInfoFromServer();
}
login(loginReq: LoginReq, observer: Observer<Response<User>>) {
const oob = new Observable<Response<User>>(o => observer = o);
const subscription = this.apiService.login(loginReq).subscribe({
@@ -107,4 +98,23 @@ export class GlobalUserService {
}
})
}
private getUserInfoFromServer() {
return this.apiService.userInfo().subscribe({
next: o => {
this.localStorageService.setUser(o.result);
this.userObserverArray.forEach(ob => ob.next(o));
},
error: err => {
// console.debug('登录过期 token错误 等等');
if (err.code === -1) {
// 请求重复
return
}
this.localStorageService.removeToken();
this.userObserverArray.forEach(ob => ob.next(new Response<User>(null)));
this.userObserverArray.forEach(ob => ob.error(err));
}
});
}
}

56
index/src/app/view/admin/admin.component.html
View File

@@ -1,4 +1,4 @@
<c-admin-header></c-admin-header>
<c-admin-header (infoClicked)="showInfoDrawer()"></c-admin-header>
<nz-layout class="layout">
<nz-sider nzCollapsible
[(nzCollapsed)]="isCollapsed"
@@ -88,6 +88,60 @@
<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">
<p>您最近一次登录是在:</p>
<p>{{user.recentlyLandedDate}}</p>
<br><br>
<nz-descriptions [nzColumn]="1">
<nz-descriptions-item nzTitle="邮箱">
<i nz-icon nzType="mail" class="icon" nzTheme="twotone"></i>
<span>{{user.email}}</span>
<i nz-icon nzType="edit" class="edit-icon" nzTheme="twotone" (click)="showEditInfoModal()"></i>
</nz-descriptions-item>
<nz-descriptions-item nzTitle="昵称">
<i nz-icon nzType="crown" class="icon" nzTheme="twotone"></i>
<span>{{user.displayName}}</span>
<i nz-icon nzType="edit" class="edit-icon" nzTheme="twotone" (click)="showEditInfoModal()"></i>
</nz-descriptions-item>
<nz-descriptions-item nzTitle="描述" *ngIf="user.desc">
<i nz-icon nzType="info-circle" class="icon" nzTheme="twotone"></i>
<span>{{user.desc}}</span>
<i nz-icon nzType="edit" class="edit-icon" nzTheme="twotone" (click)="showEditInfoModal()"></i>
</nz-descriptions-item>
</nz-descriptions>
<!-- TODO: 展示更多信息 -->
</nz-drawer>
<nz-modal [(nzVisible)]="editInfoModalVisible" (nzOnOk)="modalConfirm()" (nzOnCancel)="editInfoModalVisible=false"
nzTitle="编辑信息">
<form nz-form [formGroup]="editInfoFormGroup" (ngSubmit)="modalConfirm()">
<nz-form-item>
<nz-form-label>邮箱</nz-form-label>
<nz-form-control>
<input nz-input disabled formControlName="email">
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label>昵称</nz-form-label>
<nz-form-control>
<input nz-input formControlName="displayName" 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="请输入自我介绍">
</nz-form-control>
</nz-form-item>
</form>
</nz-modal>
<ng-template #zeroTrigger>
<i nz-icon nzType="menu-fold" nzTheme=outline></i>
</ng-template>
<ng-template #sayHelloTemp>
<span>{{sayHelloContent}}</span>
<i nz-icon [nzType]="'smile'" [nzTheme]="'twotone'" nzTwotoneColor="#52c41a" style="margin-left: 5px"></i>
</ng-template>

8
index/src/app/view/admin/admin.component.less
View File

@@ -28,6 +28,14 @@ nz-content {
height: 100%;
}
.icon {
margin-right: 5px;
}
.edit-icon{
margin-left: 10px;
cursor: pointer;
}
nz-footer {
text-align: center;
}

38
index/src/app/view/admin/admin.component.ts
View File

@@ -1,4 +1,6 @@
import {Component, OnInit} from '@angular/core';
import {FormControl, FormGroup} from '@angular/forms';
import {NzMessageService} from 'ng-zorro-antd';
import {GlobalUserService} from '../../services/global-user.service';
import {User} from '../../class/User';
import {ApiService} from '../../api/api.service';
@@ -10,13 +12,17 @@ import {ApiService} from '../../api/api.service';
})
export class AdminComponent implements OnInit {
constructor(public gUserService: GlobalUserService, private apiService: ApiService) {
constructor(public gUserService: GlobalUserService, private apiService: ApiService, private messageService: NzMessageService) {
}
user: User;
isCollapsed: boolean = false;
infoDrawerVisible: boolean = false;
sayHelloContent: string;
editInfoModalVisible: boolean = false;
editInfoFormGroup: FormGroup;
showInfoDrawer = () => this.infoDrawerVisible = !this.infoDrawerVisible;
ngOnInit(): void {
this.gUserService.watchUserInfo({
@@ -28,6 +34,15 @@ export class AdminComponent implements OnInit {
}
}
)
this.editInfoFormGroup = new FormGroup({
desc: new FormControl(),
displayName: new FormControl(),
email: new FormControl()
});
this.initHelloWords()
}
private initHelloWords() {
const hours = new Date().getHours();
if (hours < 6) {
this.sayHelloContent = `夜深了，注意早点休息哦！${this.user.displayName}`
@@ -44,7 +59,24 @@ export class AdminComponent implements OnInit {
}
}
showInfoDrawer() {
this.infoDrawerVisible = !this.infoDrawerVisible;
showEditInfoModal() {
this.editInfoModalVisible = true;
this.editInfoFormGroup.patchValue(this.user);
}
modalConfirm() {
const desc = this.editInfoFormGroup.value.desc;
const displayName = this.editInfoFormGroup.value.displayName;
this.apiService.updateUserInfo(desc, displayName).subscribe({
next: data => {
this.messageService.success('修改信息成功')
this.gUserService.refreshUserInfo();
},
error: err => {
this.messageService.error(err.msg);
},
complete: null
});
this.editInfoModalVisible = false;
}
}

4
index/src/app/view/admin/admin.module.ts
View File

@@ -5,6 +5,7 @@ import {AdminComponent} from './admin.component';
import {NgZorroAntdModule} from 'ng-zorro-antd';
import {NzSpaceModule} from 'ng-zorro-antd/space';
import {AdminHeaderComponent} from '../../components/admin-header/admin-header.component';
import {ReactiveFormsModule} from "@angular/forms";
@NgModule({
@@ -16,7 +17,8 @@ import {AdminHeaderComponent} from '../../components/admin-header/admin-header.c
CommonModule,
AdminRoutingModule,
NgZorroAntdModule,
NzSpaceModule
NzSpaceModule,
ReactiveFormsModule
]
})
export class AdminModule {