inital project

.gitignore

@@ -328,3 +328,6 @@ ASALocalRun/
 
 # MFractors (Xamarin productivity tool) working folder 
 .mfractor/
+yarn.lock
+npm-shrinkwrap.json
+.vscode

AspNetCoreMaterialUniversal.csproj

@@ -0,0 +1,66 @@
+<Project Sdk="Microsoft.NET.Sdk.Web">
+
+  <PropertyGroup>
+    <TargetFramework>netcoreapp2.0</TargetFramework>
+    <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
+    <TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>
+    <IsPackable>false</IsPackable>
+    <LangVersion>latest</LangVersion>
+    <DockerComposeProjectPath>..\..\docker-compose.dcproj</DockerComposeProjectPath>
+    <SpaRoot>ClientApp\</SpaRoot>
+    <DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\**</DefaultItemExcludes>
+    <!-- Set this to true if you enable server-side prerendering -->
+    <BuildServerSideRenderer>true</BuildServerSideRenderer>
+    <UserSecretsId>aspnetcorematerialuniversal-c23d27a4-eb88-4b18-9b77-2a93f3b15119</UserSecretsId>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="AspNet.Security.OAuth.Validation" Version="2.0.0-rc2-final" />
+    <PackageReference Include="Microsoft.AspNetCore.All" />
+    <PackageReference Include="Microsoft.AspNetCore.SignalR.Protocols.MessagePack" Version="1.0.0-rc1-final" />
+    <PackageReference Include="Microsoft.AspNetCore.SpaServices.Extensions" Version="2.1.0-rc1-final" />
+    <PackageReference Include="OpenIddict" Version="2.0.0-rc2-final" />
+    <PackageReference Include="OpenIddict.EntityFrameworkCore" Version="2.0.0-rc2-final" />
+    <PackageReference Include="OpenIddict.Mvc" Version="2.0.0-rc2-final" />
+    <PackageReference Include="Swashbuckle.AspNetCore" Version="2.4.0" />
+    <PackageReference Include="Swashbuckle.AspNetCore.SwaggerUI" Version="2.4.0" />
+    <PackageReference Include="NetEscapades.AspNetCore.SecurityHeaders" Version="0.7.0" />
+    <PackageReference Include="Newtonsoft.Json" Version="11.0.2" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <DotNetCliToolReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Tools" Version="2.0.2" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <!-- Don't publish the SPA source files, but do show them in the project files list -->
+    <Content Remove="$(SpaRoot)**" />
+  </ItemGroup>
+
+  <Target Name="DebugEnsureNodeEnv" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('node_modules') ">
+    <!-- Ensure Node.js is installed -->
+    <Exec Command="node --version" ContinueOnError="true">
+      <Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
+    </Exec>
+    <Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />
+    <Message Importance="high" Text="Restoring dependencies using 'npm'. This may take several minutes..." />
+    <Exec Command="npm install" />
+  </Target>
+
+  <Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
+    <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
+    <!-- <Exec Command="npm run build" />
+    <Exec Command="npm run build:ssr" Condition=" '$(BuildServerSideRenderer)' == 'true' " /> -->
+
+    <!-- Include the newly-built files in the publish output -->
+    <!-- <ItemGroup>
+      <DistFiles Include="wwwroot\dist\**; $(SpaRoot)dist-server\**;Dockerfile;.\extra\**" />
+      <DistFiles Include="node_modules\**" Condition="'$(BuildServerSideRenderer)' == 'true'" />
+      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
+        <RelativePath>%(DistFiles.Identity)</RelativePath>
+        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
+      </ResolvedFileToPublish>
+    </ItemGroup> -->
+  </Target>
+
+</Project>

ClientApp/app/admin/admin.component.html

@@ -0,0 +1,22 @@
+<mat-sidenav-container [class.boxed]="layoutMode">
+
+  <mat-sidenav class="customizer" [position]="customizerSidenavAlign" mode="over" #customizer>
+    <shriek-customizer></shriek-customizer>
+  </mat-sidenav>
+
+  <mat-sidenav class="sidenav" [position]="sidenavAlign" [mode]="sidenavMode" [opened]="sidenavOpen" #sidenav>
+    <app-brand [ngClass]="settings.colorClasses.brand"></app-brand>
+    <shriek-navigation [ngClass]="settings.colorClasses.navigation"></shriek-navigation>
+  </mat-sidenav>
+
+  <div class="sidenav-container" fxLayout="column">
+    <shriek-header [customizer]="customizer" [sidenav]="sidenav" [ngClass]="settings.colorClasses.header" *ngIf="settings.layout.header=='below'"></shriek-header>
+
+    <div class="main-container" #scrollContainer>
+      <router-outlet (activate)="onActivate($event, scrollContainer)"></router-outlet>
+    </div>
+
+    <shriek-footer *ngIf="settings.layout.footer=='below'"></shriek-footer>
+  </div>
+
+</mat-sidenav-container>

ClientApp/app/admin/admin.component.scss

@@ -0,0 +1,49 @@
+$height__main-toolbar: 64px;
+
+:host {
+  display: block;
+  height: 100%;
+  background: #2f3d4a;
+  &:before,
+  &:after {
+    content: 'SHRIEK';
+    position: absolute;
+    top: 0;
+    color: rgba(255, 255, 255, 0.12);
+    overflow-wrap: break-word;
+    text-align: center;
+    transform: translate(0, 50%);
+    padding: 0 20px;
+    font-size: 62px;
+    width: 46px;
+  }
+  &:after {
+    right: 0;
+  }
+}
+
+.sidenav {
+  width: 250px;
+  max-width: 250px;
+  overflow-x: hidden;
+  z-index: 4;
+}
+
+.sidenav-container {
+  height: 100%
+}
+
+.main-container {
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: calc(100% - #{$height__main-toolbar});
+  position: relative;
+}
+
+.boxed {
+  width: 1200px;
+  height: 100%;
+  display: block;
+  margin: 0 auto;
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
+}

ClientApp/app/admin/admin.component.ts

@@ -0,0 +1,84 @@
+import { Component, OnInit } from '@angular/core';
+import { MediaChange, ObservableMedia } from '@angular/flex-layout';
+import { Observable, ReplaySubject, Subscription } from 'rxjs';
+import { ConfigService } from '../core/config.service';
+
+@Component({
+  selector: 'app-admin',
+  templateUrl: './admin.component.html',
+  styleUrls: ['./admin.component.scss']
+})
+export class AdminComponent implements OnInit {
+  settings: any;
+  onSettingsChanged: Subscription;
+  layoutMode = false;
+
+  private _media$: ReplaySubject<MediaChange> = new ReplaySubject(1);
+  private _mediaSubscription: Subscription;
+
+  sidenavOpen: boolean = true;
+  sidenavMode: string = 'side';
+  sidenavAlign: string = 'start';
+  customizerSidenavAlign: string = 'end';
+
+  title = '中后台前端应用框架 - Power by shriek';
+
+  get media$(): Observable<MediaChange> {
+    return this._media$.asObservable();
+  }
+
+  constructor(media: ObservableMedia, private config: ConfigService) {
+    media
+      .asObservable()
+      .subscribe(
+        res => this._media$.next(res),
+        err => this._media$.error(err),
+        () => this._media$.complete()
+      );
+
+    this.onSettingsChanged = this.config.onSettingsChanged.subscribe(
+      settings => {
+        this.settings = settings;
+
+        if (this.settings.layout.mode === 'boxed') {
+          this.layoutMode = true;
+        } else {
+          this.layoutMode = false;
+        }
+
+        if (this.settings.layout.navigation === 'left') {
+          this.sidenavAlign = 'start';
+          this.customizerSidenavAlign = 'end';
+        } else if (this.settings.layout.navigation === 'right') {
+          this.sidenavAlign = 'end';
+          this.customizerSidenavAlign = 'start';
+        } else {
+          this.sidenavAlign = 'start';
+          this.customizerSidenavAlign = 'end';
+          this.sidenavOpen = false;
+        }
+      }
+    );
+  }
+
+  ngOnInit() {
+    this._mediaSubscription = this.media$.subscribe((change: MediaChange) => {
+      let isMobile = change.mqAlias === 'xs' || change.mqAlias === 'sm';
+
+      this.sidenavMode = isMobile ? 'over' : 'side';
+      this.sidenavOpen = !isMobile;
+    });
+
+    setTimeout(() => {
+      window.dispatchEvent(new Event('resize'));
+    }, 2000);
+  }
+
+  /**
+   * @param event {Event} 事件
+   * @param scrollContainer {Object} 容器dom
+   */
+  onActivate(event, scrollContainer) {
+    scrollContainer.scrollTop = 0;
+  }
+}

ClientApp/app/admin/admin.module.ts

@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { SharedModule } from '../shared/shared.module';
+
+import { NavigationModule } from './navigation/navigation.module';
+import { HeaderModule } from './header/header.module';
+import { AdminComponent } from './admin.component';
+import { BrandComponent } from './brand/brand.component';
+import { CustomizerComponent } from './customizer/customizer.component';
+import { FooterComponent } from './footer/footer.component';
+
+
+@NgModule({
+  imports: [
+    RouterModule,
+    SharedModule,
+    HeaderModule,
+    NavigationModule
+  ],
+  declarations: [
+    AdminComponent,
+    BrandComponent,
+    CustomizerComponent,
+    FooterComponent
+  ],
+  providers: [],
+  exports: []
+})
+export class AdminModule {
+}

ClientApp/app/admin/brand/brand.component.html

@@ -0,0 +1,4 @@
+<div class="brand-toolbar mat-elevation-z2" fxLayout="row" fxLayoutAlign="start center">
+  <mat-icon>view_compact</mat-icon>
+  <a class="logo-text" href="/">Shriek</a>
+</div>

ClientApp/app/admin/brand/brand.component.scss

@@ -0,0 +1,17 @@
+:host {
+  display: block;
+}
+
+.brand-toolbar {
+  height: 64px;
+  font: 500 20px/32px Roboto, "Helvetica Neue", sans-serif;
+  padding: 0 16px;
+  width: 100%;
+}
+
+.logo-text {
+  text-decoration: none;
+  margin-left: 24px;
+  line-height: 1;
+  color: #fff;
+}

ClientApp/app/admin/brand/brand.component.ts

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

ClientApp/app/admin/customizer/customizer.component.html

@@ -0,0 +1,52 @@
+<div class="customizer-container" fxLayout="column">
+  <div class="m-t-10">header</div>
+  <mat-radio-group class="customizer-radio-group" [(ngModel)]="settings.colorClasses.header"
+                   (ngModelChange)="onSettingsChange()">
+    <mat-radio-button class="customizer-radio-button" *ngFor="let color of _colors" [value]="'shriek-background-'+color">{{color}}
+    </mat-radio-button>
+  </mat-radio-group>
+
+  <div class="m-t-10">brand</div>
+  <mat-radio-group class="customizer-radio-group" [(ngModel)]="settings.colorClasses.brand"
+                   (ngModelChange)="onSettingsChange()">
+    <mat-radio-button class="customizer-radio-button" *ngFor="let color of _colors" [value]="'shriek-background-'+color">{{color}}
+    </mat-radio-button>
+  </mat-radio-group>
+
+  <div class="m-t-10">navigation</div>
+  <mat-radio-group class="customizer-radio-group" [(ngModel)]="settings.colorClasses.navigation"
+                   (ngModelChange)="onSettingsChange()">
+    <mat-radio-button class="customizer-radio-button" *ngFor="let color of _colors" [value]="'shriek-background-'+color">{{color}}
+    </mat-radio-button>
+  </mat-radio-group>
+
+  <div class="m-t-10">layout</div>
+  <mat-radio-group class="customizer-radio-group" [(ngModel)]="settings.layout.mode"
+                   (ngModelChange)="onSettingsChange()" fxLayout="row">
+    <mat-radio-button class="customizer-radio-button" value="boxed">固定宽度</mat-radio-button>
+    <mat-radio-button class="customizer-radio-button" value="fullwidth">满屏宽度</mat-radio-button>
+  </mat-radio-group>
+
+  <div class="m-t-10">navigation</div>
+  <mat-radio-group class="customizer-radio-group" [(ngModel)]="settings.layout.navigation"
+                   (ngModelChange)="onSettingsChange()" fxLayout="row">
+    <mat-radio-button class="customizer-radio-button" value="left">左侧</mat-radio-button>
+    <mat-radio-button class="customizer-radio-button" value="right">右侧</mat-radio-button>
+    <mat-radio-button class="customizer-radio-button" value="none">隐藏</mat-radio-button>
+  </mat-radio-group>
+
+  <div class="m-t-10">header</div>
+  <mat-radio-group class="customizer-radio-group" [(ngModel)]="settings.layout.header"
+                   (ngModelChange)="onSettingsChange()" fxLayout="row">
+    <mat-radio-button class="customizer-radio-button" value="below">显示</mat-radio-button>
+    <mat-radio-button class="customizer-radio-button" value="none">隐藏</mat-radio-button>
+  </mat-radio-group>
+
+  <div class="m-t-10">footer</div>
+  <mat-radio-group class="customizer-radio-group" [(ngModel)]="settings.layout.footer"
+                   (ngModelChange)="onSettingsChange()" fxLayout="row">
+    <mat-radio-button class="customizer-radio-button" value="below">显示</mat-radio-button>
+    <mat-radio-button class="customizer-radio-button" value="none">隐藏</mat-radio-button>
+  </mat-radio-group>
+
+</div>

ClientApp/app/admin/customizer/customizer.component.scss

@@ -0,0 +1,13 @@
+.customizer-container {
+  width: 250px;
+  padding: 10px;
+}
+
+.customizer-radio-group {
+  display: inline-flex;
+  flex-direction: column;
+}
+
+.customizer-radio-button {
+  margin: 5px;
+}