feat(shield): new add page module

src/app/app.routing.ts

@@ -36,6 +36,11 @@ const routes: Routes = [
     loadChildren: './apm/apm.module#ApmModule',
     canActivate: [AuthGuard]
   },
+  {
+    path: 'shield',
+    loadChildren: './shield/shield.module#ShieldModule',
+    canActivate: [AuthGuard]
+  },
   {
     path: '',
     component: AdminComponent,

src/app/shield/dashboard/dashboard.component.html

@@ -0,0 +1,3 @@
+<p>
+  dashboard works!
+</p>

src/app/shield/dashboard/dashboard.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardComponent } from './dashboard.component';
+
+describe('DashboardComponent', () => {
+  let component: DashboardComponent;
+  let fixture: ComponentFixture<DashboardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DashboardComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shield/dashboard/dashboard.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-dashboard',
+  templateUrl: './dashboard.component.html',
+  styleUrls: ['./dashboard.component.scss']
+})
+export class DashboardComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/shield/dashboard/dashboard.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DashboardComponent } from './dashboard.component';
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  declarations: [DashboardComponent]
+})
+export class DashboardModule { }

src/app/shield/landing/landing.component.html

@@ -0,0 +1,3 @@
+<p>
+  landing works!
+</p>

src/app/shield/landing/landing.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LandingComponent } from './landing.component';
+
+describe('LandingComponent', () => {
+  let component: LandingComponent;
+  let fixture: ComponentFixture<LandingComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LandingComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LandingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shield/landing/landing.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-landing',
+  templateUrl: './landing.component.html',
+  styleUrls: ['./landing.component.scss']
+})
+export class LandingComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/shield/landing/landing.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { LandingComponent } from './landing.component';
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  declarations: [LandingComponent]
+})
+export class LandingModule { }

src/app/shield/layout/layout.component.html

@@ -0,0 +1,8 @@
+<mat-sidenav-container>
+  <mat-sidenav class="sidenav" mode="side" opened>
+    <stbui-brand class="stbui-background-warn" brand="SHIELD"></stbui-brand>
+    <stbui-navigation [navigationModel]="navigationModel"></stbui-navigation>
+  </mat-sidenav>
+
+  <mat-sidenav-content> <router-outlet></router-outlet> </mat-sidenav-content>
+</mat-sidenav-container>

src/app/shield/layout/layout.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LayoutComponent } from './layout.component';
+
+describe('LayoutComponent', () => {
+  let component: LayoutComponent;
+  let fixture: ComponentFixture<LayoutComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LayoutComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LayoutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shield/layout/layout.component.ts

@@ -0,0 +1,28 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { NavigationService } from './navigation.service';
+
+@Component({
+  selector: 'apm-layout',
+  templateUrl: './layout.component.html',
+  styleUrls: ['./layout.component.scss']
+})
+export class LayoutComponent implements OnInit, OnDestroy {
+  customizerSidenavAlign: string = 'end';
+  navigationModel: any[];
+  navigationModelChangeSubscription: Subscription;
+
+  constructor(private navigationService: NavigationService) {
+    this.navigationModelChangeSubscription = this.navigationService.onNavigationModelChange.subscribe(
+      navigation => {
+        this.navigationModel = navigation;
+      }
+    );
+  }
+
+  ngOnInit() {}
+
+  ngOnDestroy() {
+    this.navigationModelChangeSubscription.unsubscribe();
+  }
+}

src/app/shield/layout/navigation.model.ts

@@ -0,0 +1,77 @@
+export class NavigationModel {
+  public model: any[];
+
+  constructor() {
+    this.model = [
+      {
+        id: 'dashboard',
+        title: '主页',
+        type: 'item',
+        icon: 'home',
+        url: '/shield/dashboard'
+      },
+      {
+        id: 'behavior',
+        title: '节点管理',
+        type: 'item',
+        icon: 'person_pin',
+        url: '/shield/behavior'
+      },
+      {
+        id: 'diagram',
+        title: '运营管理',
+        type: 'item',
+        icon: 'map',
+        url: '/shield/diagram'
+      },
+      {
+        id: 'script',
+        title: '账户充值',
+        type: 'item',
+        icon: 'cancel',
+        url: '/shield/script'
+      },
+      {
+        id: 'collection',
+        title: '购买记录',
+        type: 'item',
+        icon: 'subtitles',
+        url: '/shield/collection'
+      },
+      {
+        id: 'performance',
+        title: '套餐购买',
+        type: 'item',
+        icon: 'av_timer',
+        url: '/shield/performance'
+      },
+      {
+        id: 'track',
+        title: '工单管理',
+        type: 'item',
+        icon: 'traffic',
+        url: '/shield/track'
+      }
+
+      // {
+      //   id: 'alarm',
+      //   title: '应用告警',
+      //   type: 'item',
+      //   icon: 'alarm',
+      //   badge: {
+      //     title: '10',
+      //     bg: '#ff4081',
+      //     fg: '#fff'
+      //   },
+      //   url: '/shield/alarm'
+      // },
+      // {
+      //   id: 'manage',
+      //   title: '应用列表',
+      //   type: 'item',
+      //   icon: 'laptop',
+      //   url: '/shield/manage'
+      // }
+    ];
+  }
+}

src/app/shield/layout/navigation.service.ts

@@ -0,0 +1,78 @@
+import { Injectable, EventEmitter } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { NavigationModel } from './navigation.model';
+
+@Injectable()
+export class NavigationService {
+  onNavigationCollapseToggle = new EventEmitter<any>();
+  onNavigationCollapseToggled = new EventEmitter<any>();
+  onNavigationModelChange: BehaviorSubject<any> = new BehaviorSubject({});
+  navigationModel: NavigationModel;
+
+  constructor() {
+    this.navigationModel = new NavigationModel();
+    this.onNavigationModelChange.next(this.navigationModel.model);
+  }
+
+  getNavigationModel() {
+    return this.navigationModel.model;
+  }
+
+  setNavigationModel(model) {
+    this.navigationModel = model;
+    this.onNavigationModelChange.next(this.navigationModel.model);
+  }
+
+  addNavigationItem(location, item) {
+    const locationArr = location.split('.');
+
+    if (locationArr.length === 0) {
+      return;
+    }
+
+    const navItem = this.findNavigationItemById(locationArr);
+
+    switch (navItem.type) {
+      case 'item':
+        navItem.children = [];
+        navItem.children.push(item);
+        navItem.type = 'collapse';
+        break;
+      case 'collapse':
+        navItem.children.push(item);
+        break;
+      case 'group':
+        navItem.children.push(item);
+        break;
+      default:
+        break;
+    }
+  }
+
+  getNavigationItem(location) {
+    const locationArr = location.split('.');
+
+    if (locationArr.length === 0) {
+      return;
+    }
+
+    return this.findNavigationItemById(locationArr);
+  }
+
+  findNavigationItemById(location, navigation?) {
+    if (!navigation) {
+      navigation = this.navigationModel.model;
+    }
+
+    for (const navItem of navigation) {
+      if (navItem.id === location[0]) {
+        if (location.length > 1) {
+          location.splice(0, 1);
+          return this.findNavigationItemById(location, navItem.children);
+        } else {
+          return navItem;
+        }
+      }
+    }
+  }
+}

src/app/shield/shield-routing.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { LayoutComponent } from './layout/layout.component';
+import { LandingComponent } from './landing/landing.component';
+import { ShieldComponent } from './shield.component';
+
+const routes: Routes = [
+  { path: 'dashboard', component: ShieldComponent },
+  {
+    path: '',
+    component: LayoutComponent,
+    children: [
+      { path: '', component: ShieldComponent },
+      { path: 'landing', component: LandingComponent }
+    ]
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ShieldRoutingModule {}

src/app/shield/shield.component.html

@@ -0,0 +1,3 @@
+<p>
+  shield works!
+</p>