add angular web add loading.

ui/web/src/app/app-routing.module.ts

@@ -1,10 +1,10 @@
 import {NgModule} from '@angular/core';
 import {RouterModule, Routes, TitleStrategy} from '@angular/router';
 import {PageNotFoundComponent} from "./pages/page-not-found/page-not-found.component";
-import {PageTitleStrategy} from "./shared/page-title-strategy.service";
+import {PageTitleStrategy} from "./shared/title-strategy.service";
 
 const routes: Routes = [
-  {path: 'welcome', loadChildren: () => import('./pages/welcome/welcome.module').then(m => m.WelcomeModule)},
+  {path: 'welcome', loadChildren: () => import('./pages/pages.module').then(m => m.PagesModule)},
   {
     path: 'auth', loadChildren: () => import('./security/security.module').then(m => m.SecurityModule),
     title: "系统登录"

ui/web/src/app/app.component.html

@@ -1,3 +1,10 @@
 <div class="layui-layout">
-  <router-outlet></router-outlet>
+  <nz-spin [nzSpinning]="loadingShow">
+    <router-outlet></router-outlet>
+  </nz-spin>
 </div>
+<nz-back-top [nzTemplate]="tpl" [nzVisibilityHeight]="100">
+  <ng-template #tpl>
+    <div class="ant-back-top-inner">UP</div>
+  </ng-template>
+</nz-back-top>

ui/web/src/app/app.component.ts

@@ -1,13 +1,21 @@
-import {Component} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import {LoadingService} from "./shared/loading.service";
 
 @Component({
-  // Selector for the component
   selector: 'app-root',
-  // Template URL for the component
   templateUrl: './app.component.html',
-  // Styles URL for the component
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
+
+  loadingShow: boolean;
+
+  constructor(private loading: LoadingService) {
+    this.loadingShow = false;
+  }
+
+  ngOnInit(): void {
+    this.loading.progress$.subscribe(res => this.loadingShow = res);
+  }
 
 }

ui/web/src/app/app.module.ts

@@ -9,6 +9,9 @@ import {httpInterceptorProviders} from "./http-interceptors";
 import {HttpClientXsrfModule} from "@angular/common/http";
 import {SharedModule} from "./shared/shared.module";
 import {PageNotFoundComponent} from "./pages/page-not-found/page-not-found.component";
+import {NzSpinModule} from "ng-zorro-antd/spin";
+import {NzBackTopModule} from "ng-zorro-antd/back-top";
+import {NzResultModule} from "ng-zorro-antd/result";
 
 @NgModule({
   declarations: [
@@ -29,7 +32,10 @@ import {PageNotFoundComponent} from "./pages/page-not-found/page-not-found.compo
     }),
     RouterModule,
     AppRoutingModule,
-    SharedModule
+    SharedModule,
+    NzSpinModule,
+    NzBackTopModule,
+    NzResultModule
   ],
   providers: [
     httpInterceptorProviders,

ui/web/src/app/http-interceptors/xhr.interceptor.ts

@@ -1,7 +1,7 @@
 import {Injectable} from '@angular/core';
 import {HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http';
 import {finalize, Observable} from 'rxjs';
-import {ProgressBarService} from "../shared/progress-bar.service";
+import {LoadingService} from "../shared/loading.service";
 
 /**
  * This code is an interceptor that adds a header to the request and shows a progress bar while the request is being processed. It then sends the request to the next handler and hides the progress bar when the request is finished.
@@ -16,17 +16,17 @@ import {ProgressBarService} from "../shared/progress-bar.service";
 @Injectable()
 export class XhrInterceptor implements HttpInterceptor {
 
-  constructor(private progressBar: ProgressBarService) {
+  constructor(private loading: LoadingService) {
   }
 
   intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
-    this.progressBar.show();
+    this.loading.show();
     const originalUrl = '/api' + req.url;
     const xhrReq = req.clone({
       headers: req.headers.set('X-Requested-With', 'XMLHttpRequest'),
       url: originalUrl
     });
-    return next.handle(xhrReq).pipe(finalize(() => this.progressBar.hide()));
+    return next.handle(xhrReq).pipe(finalize(() => this.loading.hide()));
   }
 
 }

ui/web/src/app/pages/page-not-found/page-not-found.component.html

@@ -1,25 +1,5 @@
-<div class="page page-center">
-  <div class="container-tight py-4">
-    <div class="empty">
-      <div class="empty-header">404</div>
-      <p class="empty-title">Oops… You just found an error page</p>
-      <p class="empty-subtitle text-muted">
-        We are sorry but the page you are looking for was not found
-      </p>
-      <div class="empty-action">
-        <a class="btn btn-primary" routerLink="/" routerLinkActive="active">
-          <!-- Download SVG icon from http://tabler-icons.io/i/arrow-left -->
-          <svg class="icon" fill="none" height="24" stroke="currentColor" stroke-linecap="round"
-               stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24"
-               xmlns="http://www.w3.org/2000/svg">
-            <path d="M0 0h24v24H0z" fill="none" stroke="none"/>
-            <path d="M5 12l14 0"/>
-            <path d="M5 12l6 6"/>
-            <path d="M5 12l6 -6"/>
-          </svg>
-          Take me home
-        </a>
-      </div>
-    </div>
+<nz-result nzStatus="403" nzSubTitle="Sorry, you are not authorized to access this page." nzTitle="403">
+  <div nz-result-extra>
+    <button nz-button nzType="primary">Back Home</button>
   </div>
-</div>
+</nz-result>

ui/web/src/app/pages/welcome/welcome-routing.module.ts → ui/web/src/app/pages/pages-routing.module.ts

@@ -1,6 +1,6 @@
 import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
-import {WelcomeComponent} from './welcome.component';
+import {WelcomeComponent} from './welcome/welcome.component';
 
 const routes: Routes = [
     {path: '', component: WelcomeComponent},
@@ -10,5 +10,5 @@ const routes: Routes = [
     imports: [RouterModule.forChild(routes)],
     exports: [RouterModule]
 })
-export class WelcomeRoutingModule {
+export class PagesRoutingModule {
 }

ui/web/src/app/pages/welcome/welcome.module.ts → ui/web/src/app/pages/pages.module.ts

@@ -1,26 +1,28 @@
 import {NgModule} from '@angular/core';
 
-import {WelcomeRoutingModule} from './welcome-routing.module';
+import {PagesRoutingModule} from './pages-routing.module';
 
-import {WelcomeComponent} from './welcome.component';
+import {WelcomeComponent} from './welcome/welcome.component';
 import {NzIconModule} from "ng-zorro-antd/icon";
 import {NzLayoutModule} from "ng-zorro-antd/layout";
 import {NzMenuModule} from "ng-zorro-antd/menu";
 import {NzSliderModule} from "ng-zorro-antd/slider";
+import {NzResultModule} from "ng-zorro-antd/result";
 
 @NgModule({
   imports: [
-    WelcomeRoutingModule,
+    PagesRoutingModule,
     NzIconModule,
     NzLayoutModule,
     NzMenuModule,
     NzSliderModule,
     NzLayoutModule,
     NzMenuModule,
-    NzIconModule
+    NzIconModule,
+    NzResultModule
   ],
   declarations: [WelcomeComponent],
   exports: [WelcomeComponent]
 })
-export class WelcomeModule {
+export class PagesModule {
 }

ui/web/src/app/security/security-routing.module.ts

@@ -1,7 +1,7 @@
 import {NgModule} from '@angular/core';
 import {RouterModule, Routes, TitleStrategy} from '@angular/router';
 import {LoginComponent} from "./login/login.component";
-import {PageTitleStrategy} from "../shared/page-title-strategy.service";
+import {PageTitleStrategy} from "../shared/title-strategy.service";
 
 const routes: Routes = [
   {path: 'login', component: LoginComponent, title: "系统登录"},

ui/web/src/app/shared/progress-bar.service.ts → ui/web/src/app/shared/loading.service.ts

@@ -1,10 +1,8 @@
 import {Injectable} from '@angular/core';
 import {Observable, Subject} from "rxjs";
 
-@Injectable({
-  providedIn: 'root'
-})
-export class ProgressBarService {
+@Injectable({providedIn: "root"})
+export class LoadingService {
 
   // Observable string sources
   private progressSource: Subject<boolean> = new Subject<boolean>();

ui/web/src/app/shared/page-title-strategy.service.ts → ui/web/src/app/shared/title-strategy.service.ts

@@ -2,16 +2,14 @@ import {RouterStateSnapshot, TitleStrategy} from "@angular/router";
 import {Title} from "@angular/platform-browser";
 import {Injectable} from "@angular/core";
 
-@Injectable({
-  providedIn: 'root'
-})
+@Injectable({providedIn: "root"})
 export class PageTitleStrategy extends TitleStrategy {
   constructor(private readonly title: Title) {
     super();
   }
 
   override updateTitle(routerState: RouterStateSnapshot) {
-    const title = this.buildTitle(routerState);
+    const title: string | undefined = this.buildTitle(routerState);
     if (title !== undefined) {
       this.title.setTitle($localize`:@@siteTitlePrefix:Plate Platform | ${title}`);
     }

ui/web/src/locale/messages.zh.xlf

@@ -153,7 +153,7 @@
         </unit>
     <unit id="siteTitlePrefix">
           <notes>
-            <note category="location">src/app/shared/page-title-strategy.service.ts:16</note>
+            <note category="location">src/app/shared/title-strategy.service.ts:16</note>
           </notes>
           <segment>
             <source>盘子管理平台 | <ph id="0" equiv="PH" disp="title"/></source>