管理页面的主体界面

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

@@ -1,12 +1,93 @@
-<p>admin works!</p>
+<c-admin-header></c-admin-header>
-<a routerLink="/admin">indec</a>
+<nz-layout class="layout">
-<a routerLink="/admin/article">article</a>
+    <nz-sider nzCollapsible
-<a routerLink="/admin/category">category</a>
+              [(nzCollapsed)]="isCollapsed"
-<a routerLink="/admin/comment">comment</a>
+              [nzBreakpoint]="'lg'"
-<a routerLink="/admin/link">link</a>
+              [nzCollapsedWidth]="0"
-<a routerLink="/admin/tag">tag</a>
+              [nzZeroTrigger]="zeroTrigger"
-<a routerLink="/admin/update">update</a>
+              nzTheme="light"
-<a routerLink="/admin/user">user</a>
+              *ngIf="user">
-<a routerLink="/admin/userInfo">userInfo</a>
+        <ul nz-menu nzTheme="light" nzMode="inline" [nzInlineCollapsed]="isCollapsed">
-<a routerLink="/admin/visitor">visitor</a>
+            <li nz-menu-item routerLink="/admin">
-<router-outlet></router-outlet>
+                <i nz-icon nzType="desktop" 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/userInfo">
+                <i nz-icon nzType="idcard" 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>
+
+            <!--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>
+<ng-template #zeroTrigger>
+    <i nz-icon nzType="menu-fold" nzTheme=outline></i>
+</ng-template>

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

@@ -1,4 +1,40 @@
-a{
+
-  margin: 5px;
+.myCard {
-  padding: 10px;
+  width: 180px;
+  margin-left: 10px;
+}
+
+nz-layout, nz-sider {
+  height: 100%;
+}
+
+.layout {
+  padding-top: 80px;
+}
+
+p {
+  text-align: center;
+}
+
+nz-content {
+  margin-left: 30px;
+  margin-right: 30px;
+}
+
+.inner-content {
+  padding: 15px;
+  background: #fff;
+  min-height: 560px;
+  height: 100%;
+}
+
+nz-footer {
+  text-align: center;
+}
+
+@media only screen and (max-width: 768px) {
+  nz-content {
+    margin-left: 10px;
+    margin-right: 10px;
+  }
 }

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

@@ -1,15 +1,30 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import {UserService} from '../../services/user.service';
+import {User} from '../../class/User';
 
 @Component({
-  selector: 'app-admin',
+    selector: 'app-admin',
-  templateUrl: './admin.component.html',
+    templateUrl: './admin.component.html',
-  styleUrls: ['./admin.component.less']
+    styleUrls: ['./admin.component.less']
 })
 export class AdminComponent implements OnInit {
 
-  constructor() { }
+    constructor(public userService: UserService) {
+    }
 
-  ngOnInit(): void {
+    user: User;
-  }
+    isCollapsed: boolean = false;
+
+    ngOnInit(): void {
+        this.userService.watchUserInfo({
+                complete: () => null,
+                error: (err) => null,
+                next: data => {
+                    console.log('更新user')
+                    this.user = data.result
+                }
+            }
+        )
+    }
 
 }

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

@@ -11,11 +11,15 @@ import {AdminUpdateComponent} from './admin-update/admin-update.component';
 import {AdminUserComponent} from './admin-user/admin-user.component';
 import {AdminUserinfoComponent} from './admin-userinfo/admin-userinfo.component';
 import {AdminVisitorComponent} from './admin-visitor/admin-visitor.component';
-import { AdminComponent } from './admin.component';
+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';
 
 
 @NgModule({
     declarations: [
+        AdminHeaderComponent,
         AdminIndexComponent,
         AdminArticleComponent,
         AdminCategoryComponent,
@@ -30,7 +34,9 @@ import { AdminComponent } from './admin.component';
     ],
     imports: [
         CommonModule,
-        AdminRoutingModule
+        AdminRoutingModule,
+        NgZorroAntdModule,
+        NzSpaceModule
     ]
 })
 export class AdminModule {