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

@@ -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">
+        <span>{{user.displayName}}</span>
-            {{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>
     </div>
 
 

index/src/app/components/admin-header/admin-header.component.less

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

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

@@ -41,22 +41,8 @@ export class GlobalUserService {
         // 不符合 请求网络数据并更新缓存
         // 向订阅者传数据
         this.lastRequestTime = Date.now();
-        const subscription = this.apiService.userInfo().subscribe({
+        // 获取数据
-            next: o => {
+        const subscription = this.getUserInfoFromServer();
-                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));
-            }
-        });
         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));
+            }
+        });
+    }
 }

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

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

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

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

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

@@ -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() {
+    showEditInfoModal() {
-        this.infoDrawerVisible = !this.infoDrawerVisible;
+        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;
     }
 }

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

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