blog-frontEnd/src/app/view/admin/admin.component.html

<c-admin-header (infoClicked)="showInfoDrawer()"></c-admin-header>
<nz-layout class="layout">
    <nz-sider nzCollapsible
              [(nzCollapsed)]="isCollapsed"
              [nzBreakpoint]="'lg'"
              [nzCollapsedWidth]="0"
              [nzZeroTrigger]="zeroTrigger"
              nzTheme="light"
              *ngIf="user">
        <ul nz-menu nzTheme="light" nzMode="inline" [nzInlineCollapsed]="isCollapsed">
            <li nz-menu-item routerLink="/admin">
                <i nz-icon nzType="dashboard" nzTheme="outline"></i>
                <span>后台首页</span>
            </li>

            <li nz-submenu nzTitle="文章管理" nzIcon="file" *ngIf="user.role=='admin'">
                <ul>
                    <li nz-menu-item>
                        <a routerLink="/write">
                            <i nz-icon nzType="form" nzTheme="outline"></i>
                            <span>新增文章</span>
                        </a>
                    </li>
                    <li nz-menu-item routerLink="/admin/article">
                        <i nz-icon nzType="ordered-list" nzTheme="outline"></i>
                        <span>文章列表</span>
                    </li>
                </ul>
            </li>

            <li nz-menu-item routerLink="/admin/comment">
                <i nz-icon nzType="message" nzTheme="outline"></i>
                <span>评论管理</span>
            </li>

            <li nz-menu-item routerLink="/admin/tag" *ngIf="user.role=='admin'">
                <i nz-icon nzType="tags" nzTheme="outline"></i>
                <span>标签管理</span>
            </li>

            <!--            <li nz-menu-item routerLink="/admin/category" *ngIf="user.role=='admin'">-->
            <!--                <i nz-icon nzType="appstore" nzTheme="outline"></i>-->
            <!--                <span>分类管理</span>-->
            <!--            </li>-->

            <li nz-menu-item routerLink="/admin/user" *ngIf="user.role=='admin'">
                <i nz-icon nzType="user" nzTheme="outline"></i>
                <span>用户管理</span>
            </li>

            <li nz-menu-item routerLink="/admin/link" *ngIf="user.role=='admin'">
                <i nz-icon nzType="link" nzTheme="outline"></i>
                <span>友链管理</span>
            </li>

            <li nz-menu-item routerLink="/admin/visitor" *ngIf="user.role=='admin'">
                <i nz-icon nzType="chrome" nzTheme="outline"></i>
                <span>访问管理</span>
            </li>

            <li nz-menu-item routerLink="/admin/update" *ngIf="user.role=='admin'">
                <i nz-icon nzType="arrow-up" nzTheme="outline"></i>
                <span>更新管理</span>
            </li>

            <li nz-menu-item (click)="infoDrawerVisible = true">
                <i nz-icon nzType="idcard" nzTheme="outline"></i>
                <span>查看信息</span>
            </li>

            <!--TODO : do something here ..... -->
            <nz-card class="myCard" *ngIf="!isCollapsed&&user.role=='admin'">
                <p>别管别人言语</p>
                <p>做最好的自己</p>
            </nz-card>
            <nz-card class="myCard" *ngIf="!isCollapsed&&user.role=='user'">
                <p>欢迎来访小海博客</p>
            </nz-card>

        </ul>
    </nz-sider>
    <nz-layout>
        <nz-content>
            <div class="inner-content">
                <router-outlet></router-outlet>
            </div>
        </nz-content>
        <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&&user.recentlyLandedDate}}</p>
    <nz-divider></nz-divider>
    <nz-descriptions [nzColumn]="1">
        <nz-descriptions-item nzTitle="邮箱">
            <div>
                <i nz-icon nzType="mail" class="icon" nzTheme="twotone"></i>
                <span>{{user&&user.email}}</span>
                <i nz-icon nzType="edit" class="edit-icon" nzTheme="twotone" (click)="showEditInfoModal()"></i>
            </div>
        </nz-descriptions-item>
        <nz-descriptions-item nzTitle="昵称">
            <div>
                <i nz-icon nzType="crown" class="icon" nzTheme="twotone"></i>
                <span>{{user&&user.displayName}}</span>
                <i nz-icon nzType="edit" class="edit-icon" nzTheme="twotone" (click)="showEditInfoModal()"></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>
    </nz-descriptions>

    <nz-divider></nz-divider>

    <!--    <div >-->
    <button nz-button nzDanger nzBlock nzType="primary" (click)="logout()">注销</button>
    <!--    </div>-->
    <!--  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>