修改信息

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() {
-        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;
     }
 }

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 {