perf(全局布局): 新增Layout模块到特性模块里，调整Header,Footer,Sider模块到Layout里

src/app/shared/layouts/footer/footer.component.scss → src/app/feature/layout/footer/footer.component.scss

@@ -1,24 +1,24 @@
-:host {
-    padding: 0 16px;
-    margin: 48px 0 24px 0;
-    text-align: center;
-}
-
-.links {
-    margin-bottom: 8px;
-    a {
-        color: rgba(0, 0, 0, 0.45);
-        transition: all .3s;
-        +a {
-            margin-left: 40px;
-        }
-        &:hover {
-            color: rgba(0, 0, 0, 0.65);
-        }
-    }
-}
-
-.copyright {
-    color: rgba(0, 0, 0, 0.45);
-    font-size: 14px;
+:host {
+    padding: 0 16px;
+    margin: 48px 0 24px 0;
+    text-align: center;
+}
+
+.links {
+    margin-bottom: 8px;
+    a {
+        color: rgba(0, 0, 0, 0.45);
+        transition: all .3s;
+        +a {
+            margin-left: 40px;
+        }
+        &:hover {
+            color: rgba(0, 0, 0, 0.65);
+        }
+    }
+}
+
+.copyright {
+    color: rgba(0, 0, 0, 0.45);
+    font-size: 14px;
 }

src/app/shared/layouts/header/header.component.scss → src/app/feature/layout/header/header.component.scss

@@ -1,22 +1,22 @@
-:host {
-    display: block;
-    width: 100%;
-    height: 64px;
-    line-height: 64px;
-    padding: 0 12px 0 0;
-    background: #fff;
-    -webkit-box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
-    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
-    position: relative;
-}
-
-.trigger-sider {
-    font-size: 20px;
-    line-height: 64px;
-    cursor: pointer;
-    transition: all .3s;
-    padding: 0 24px;
-    &:hover {
-        background: #e6f7ff;
-    }
+:host {
+    display: block;
+    width: 100%;
+    height: 64px;
+    line-height: 64px;
+    padding: 0 12px 0 0;
+    background: #fff;
+    -webkit-box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+    position: relative;
+}
+
+.trigger-sider {
+    font-size: 20px;
+    line-height: 64px;
+    cursor: pointer;
+    transition: all .3s;
+    padding: 0 24px;
+    &:hover {
+        background: #e6f7ff;
+    }
 }

src/app/shared/layouts/index.ts → src/app/feature/layout/index.ts

@@ -1,4 +1,5 @@
-export * from './layouts.component';
-export * from './sider/sider.component';
-export * from './header/header.component';
-export * from './footer/footer.component';
+export * from './layout.module';
+export * from './layout.component';
+export * from './sider/sider.component';
+export * from './header/header.component';
+export * from './footer/footer.component';

src/app/feature/layout/layout-routing.module.ts

@@ -0,0 +1,48 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { LayoutComponent } from './layout.component';
+
+const routes: Routes = [
+    {
+        path: '',
+        component: LayoutComponent,
+        children: [
+            {
+                path: '',
+                redirectTo: '/dashboard/analysis',
+                pathMatch: 'full'
+            },
+            {
+                path: 'dashboard',
+                loadChildren: 'app/feature/dashboard/dashboard.module#DashboardModule'
+            },
+            {
+                path: 'form',
+                loadChildren: 'app/feature/form/form.module#FormModule'
+            },
+            {
+                path: 'list',
+                loadChildren: 'app/feature/list/list.module#ListModule'
+            },
+            {
+                path: 'profile',
+                loadChildren: 'app/feature/profile/profile.module#ProfileModule'
+            },
+            {
+                path: 'result',
+                loadChildren: 'app/feature/result/result.module#ResultModule'
+            },
+            {
+                path: 'exception',
+                loadChildren: 'app/feature/exception/exception.module#ExceptionModule'
+            }
+        ]
+    }
+];
+
+@NgModule({
+    imports: [RouterModule.forChild(routes)],
+    exports: [RouterModule]
+})
+export class LayoutRoutingModule { }

src/app/shared/layouts/layouts.component.html → src/app/feature/layout/layout.component.html

@@ -4,7 +4,7 @@
 <div class="g-layout">
     <app-header class="layout-header" (onToggle)="toggleSider($event)"></app-header>
     <main class="layout-content">
-        <div class="layout-router">
+        <div class="layout-pages">
             <router-outlet></router-outlet>
         </div>
         <app-footer class="layout-footer"></app-footer>

src/app/shared/layouts/layouts.component.scss → src/app/feature/layout/layout.component.scss

@@ -1,40 +1,42 @@
-.g-layout-sider {
-    position: relative;
-    transition: all .2s;
-    background: #001529;
-    min-width: 0;
-    min-height: 100vh;
-    box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
-    z-index: 10;
-    max-width: 256px;
-    min-width: 256px;
-    width: 256px;
-    float: left;
-    &.layout-sider-collapsed {
-        max-width: 80px;
-        min-width: 80px;
-        width: 80px;
-    }
-}
-
-.g-layout {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-    -ms-flex-direction: column;
-    flex-direction: column;
-    -webkit-box-flex: 1;
-    -ms-flex: auto;
-    flex: auto;
-    background: #f0f2f5;
-}
-
-.layout-content {
-    margin: 24px 24px 0px;
-    height: 100%;
-    -webkit-box-flex: 1;
-    -ms-flex: auto;
-    flex: auto;
-}
+.g-layout-sider {
+    position: relative;
+    transition: all .2s;
+    background: #001529;
+    min-width: 0;
+    min-height: 100vh;
+    box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
+    z-index: 10;
+    max-width: 256px;
+    min-width: 256px;
+    width: 256px;
+    float: left;
+    &.layout-sider-collapsed {
+        max-width: 80px;
+        min-width: 80px;
+        width: 80px;
+    }
+}
+
+.g-layout {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    -webkit-box-flex: 1;
+    -ms-flex: auto;
+    flex: auto;
+    background: #f0f2f5;
+}
+
+.layout-content {
+    margin: 24px 24px 0px;
+    height: 100%;
+    -webkit-box-flex: 1;
+    -ms-flex: auto;
+    flex: auto;
+}
+
+.layout-pages {}

src/app/shared/layouts/layouts.component.spec.ts → src/app/feature/layout/layout.component.spec.ts

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

src/app/shared/layouts/layouts.component.ts → src/app/feature/layout/layout.component.ts

@@ -1,11 +1,11 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-layouts',
-  templateUrl: './layouts.component.html',
-  styleUrls: ['./layouts.component.scss']
+  selector: 'app-layout',
+  templateUrl: './layout.component.html',
+  styleUrls: ['./layout.component.scss']
 })
-export class LayoutsComponent implements OnInit {
+export class LayoutComponent implements OnInit {
   _fold: boolean;
   constructor() { }
 

src/app/feature/layout/layout.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '@app/shared';
+import { LayoutRoutingModule } from './layout-routing.module';
+import { LayoutComponent } from './layout.component';
+import { SiderComponent } from './sider/sider.component';
+import { HeaderComponent } from './header/header.component';
+import { FooterComponent } from './footer/footer.component';
+
+@NgModule({
+    imports: [
+        SharedModule,
+        LayoutRoutingModule
+    ],
+    declarations: [
+        LayoutComponent,
+        SiderComponent,
+        HeaderComponent,
+        FooterComponent
+    ],
+    exports: [
+        SiderComponent,
+        HeaderComponent,
+        FooterComponent
+    ],
+    providers: [],
+})
+export class LayoutModule { }

src/app/feature/layout/sider/sider.component.html

@@ -0,0 +1,30 @@
+<h1 class="m-logo">
+  <a routerLink="/">
+    <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
+      alt="logo">
+    <span>Ng4 Admin Pro</span>
+  </a>
+</h1>
+<ul sim-menu [mode]="'inline'" [inlineCollapsed]="_fold" class="menu-dark">
+  <ng-container *ngFor="let submenu of _menu">
+    <li sim-sub-menu *ngIf="submenu.children" [open]="submenu._fold" routerLinkActive="menu-submenu-selected" (onOpenChange)="open($event, submenu)">
+      <span title>
+        <i class="menu-icon icon-{{submenu.icon}}"></i>
+        <span>{{submenu.name}}</span>
+      </span>
+      <ng-container>
+        <li sim-menu-item role="menuitem" *ngFor="let item of submenu.children" routerLinkActive="menu-item-selected">
+          <a [routerLink]="['/', submenu.path, item.path]">
+            <span>{{item.name}}</span>
+          </a>
+        </li>
+      </ng-container>
+    </li>
+    <li sim-menu-item role="menuitem" *ngIf="!submenu.children">
+      <a [href]="submenu.path" [target]="submenu.target">
+        <i class="menu-icon icon-{{submenu.icon}}"></i>
+        <span>{{submenu.name}}</span>
+      </a>
+    </li>
+  </ng-container>
+</ul>