212 lines
10 KiB
HTML
212 lines
10 KiB
HTML
<c-admin-header (infoClicked)="showInfoDrawer()"></c-admin-header>
|
|
<nz-layout class="layout">
|
|
<nz-sider *ngIf="user"
|
|
[(nzCollapsed)]="isCollapsed"
|
|
[nzBreakpoint]="'lg'"
|
|
[nzCollapsedWidth]="0"
|
|
[nzZeroTrigger]="zeroTrigger"
|
|
nzCollapsible
|
|
nzTheme="light">
|
|
<ul [nzInlineCollapsed]="isCollapsed" nz-menu nzMode="inline" nzTheme="light">
|
|
<li nz-menu-item routerLink="/admin">
|
|
<i nz-icon nzTheme="outline" nzType="dashboard"></i>
|
|
<span>后台首页</span>
|
|
</li>
|
|
|
|
<li *ngIf="user.role=='admin'" nz-submenu nzIcon="file" nzTitle="文章管理">
|
|
<ul>
|
|
<li nz-menu-item>
|
|
<a routerLink="/write">
|
|
<i nz-icon nzTheme="outline" nzType="form"></i>
|
|
<span>新增文章</span>
|
|
</a>
|
|
</li>
|
|
<li nz-menu-item routerLink="/admin/article">
|
|
<i nz-icon nzTheme="outline" nzType="ordered-list"></i>
|
|
<span>文章列表</span>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li nz-menu-item routerLink="/admin/comment">
|
|
<i nz-icon nzTheme="outline" nzType="message"></i>
|
|
<span>评论管理</span>
|
|
</li>
|
|
|
|
<li *ngIf="user.role=='admin'" nz-menu-item routerLink="/admin/tag">
|
|
<i nz-icon nzTheme="outline" nzType="tags"></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 *ngIf="user.role=='admin'" nz-menu-item routerLink="/admin/user">
|
|
<i nz-icon nzTheme="outline" nzType="user"></i>
|
|
<span>用户管理</span>
|
|
</li>
|
|
|
|
<li *ngIf="user.role=='admin'" nz-menu-item routerLink="/admin/link">
|
|
<i nz-icon nzTheme="outline" nzType="link"></i>
|
|
<span>友链管理</span>
|
|
</li>
|
|
|
|
<li *ngIf="user.role=='admin'" nz-menu-item routerLink="/admin/visitor">
|
|
<i nz-icon nzTheme="outline" nzType="chrome"></i>
|
|
<span>访问管理</span>
|
|
</li>
|
|
|
|
<li *ngIf="user.role=='admin'" nz-menu-item routerLink="/admin/update">
|
|
<i nz-icon nzTheme="outline" nzType="arrow-up"></i>
|
|
<span>更新管理</span>
|
|
</li>
|
|
|
|
<li (click)="infoDrawerVisible = true" nz-menu-item>
|
|
<i nz-icon nzTheme="outline" nzType="idcard"></i>
|
|
<span>查看信息</span>
|
|
</li>
|
|
|
|
<!--TODO : do something here ..... -->
|
|
<nz-card *ngIf="!isCollapsed&&user.role=='admin'" class="myCard">
|
|
<p>别管别人言语</p>
|
|
<p>做最好的自己</p>
|
|
</nz-card>
|
|
<nz-card *ngIf="!isCollapsed&&user.role=='user'" class="myCard">
|
|
<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 (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 *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 (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 class="icon" nz-icon nzTheme="twotone" nzType="mail"></i>
|
|
<span>{{user && user.email}}</span>
|
|
<i (click)="showEditInfoModal()" class="edit-icon" nz-icon nzTheme="twotone" nzType="edit"></i>
|
|
</div>
|
|
</nz-descriptions-item>
|
|
<nz-descriptions-item nzTitle="昵称">
|
|
<div>
|
|
<i class="icon" nz-icon nzTheme="twotone" nzType="crown"></i>
|
|
<span>{{user && user.displayName}}</span>
|
|
<i (click)="showEditInfoModal()" class="edit-icon" nz-icon nzTheme="twotone" nzType="edit"></i>
|
|
</div>
|
|
</nz-descriptions-item>
|
|
<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 nzTheme="twotone" nzType="fire"> </i>
|
|
<span> *********</span>
|
|
<i (click)="showResetPwdModal()" class="edit-icon" nz-icon nzTheme="twotone" nzType="edit"></i>
|
|
</nz-descriptions-item>
|
|
</nz-descriptions>
|
|
|
|
<nz-divider></nz-divider>
|
|
|
|
<!-- <div >-->
|
|
<button (click)="logout()" nz-button nzBlock nzDanger nzType="primary">注销</button>
|
|
<!-- </div>-->
|
|
<!-- TODO: 展示更多信息 -->
|
|
</nz-drawer>
|
|
|
|
<nz-modal (nzOnCancel)="editInfoModalVisible=false" (nzOnOk)="modalConfirm()" [(nzVisible)]="editInfoModalVisible"
|
|
nzTitle="编辑信息">
|
|
<form (ngSubmit)="modalConfirm()" [formGroup]="editInfoFormGroup" nz-form>
|
|
<nz-form-item>
|
|
<nz-form-label>邮箱</nz-form-label>
|
|
<nz-form-control>
|
|
<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 formControlName="displayName" nz-input placeholder="默认为你的邮箱地址">
|
|
</nz-form-control>
|
|
</nz-form-item>
|
|
<nz-form-item>
|
|
<nz-form-label>描述</nz-form-label>
|
|
<nz-form-control>
|
|
<input formControlName="desc" nz-input placeholder="请输入自我介绍">
|
|
</nz-form-control>
|
|
</nz-form-item>
|
|
</form>
|
|
</nz-modal>
|
|
|
|
<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 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 formControlName="newPwd" name="xxx" nz-input type="password">
|
|
</nz-form-control>
|
|
<ng-template #newPwdErrTip>
|
|
<div *ngIf="resetPwdFormGroup.controls.newPwd.hasError('required')">新密码不可为空</div>
|
|
<div *ngIf="resetPwdFormGroup.controls.newPwd.hasError('minlengtj')">新密码最短6位</div>
|
|
<div *ngIf="resetPwdFormGroup.controls.newPwd.hasError('maxlengtj')">新密码最长16位</div>
|
|
<div *ngIf="resetPwdFormGroup.controls.newPwd.hasError('pattern')">新密码范围[数字，大小写字母，下划线和减号]</div>
|
|
</ng-template>
|
|
</nz-form-item>
|
|
<nz-form-item>
|
|
<nz-form-label nzRequired>确认密码</nz-form-label>
|
|
<nz-form-control [nzErrorTip]="newPwdConfirmErrTip">
|
|
<input formControlName="newPwdConfirm" name="xxx" nz-input type="password">
|
|
</nz-form-control>
|
|
<ng-template #newPwdConfirmErrTip>
|
|
<div *ngIf="resetPwdFormGroup.controls.newPwdConfirm.hasError('required')">确认密码不可为空</div>
|
|
<div *ngIf="resetPwdFormGroup.controls.newPwdConfirm.hasError('minlengtj')">确认密码最短6位</div>
|
|
<div *ngIf="resetPwdFormGroup.controls.newPwdConfirm.hasError('maxlengtj')">确认密码最长16位</div>
|
|
<div *ngIf="resetPwdFormGroup.controls.newPwdConfirm.hasError('pattern')">确认密码范围[数字，大小写字母，下划线和减号]</div>
|
|
<div *ngIf="resetPwdFormGroup.controls.newPwdConfirm.hasError('pwdNotSame')">确认密码应和新密码相同</div>
|
|
</ng-template>
|
|
</nz-form-item>
|
|
</form>
|
|
</nz-modal>
|
|
|
|
<ng-template #zeroTrigger>
|
|
<i nz-icon nzTheme=outline nzType="menu-fold"></i>
|
|
</ng-template>
|
|
|
|
<ng-template #sayHelloTemp>
|
|
<span>{{sayHelloContent}}</span>
|
|
<i [nzTheme]="'twotone'" [nzType]="'smile'" nz-icon nzTwotoneColor="#52c41a" style="margin-left: 5px"></i>
|
|
</ng-template>
|