初始化ng-ui项目，添加基础配置和初始代码。

本次提交包括以下内容：
- 创建ng-ui项目目录和初始文件结构。
- 配置.vscode目录下的settings.json、extensions.json、launch.json和tasks.json文件，以优化开发环境和体验。
- 添加docker相关配置，包括Dockerfile和web.json文件，用于构建和配置nginx服务。
- 在projects/commons目录下初始化一个Angular库，并配置相应的tsconfig文件、ng-package.json和package.json文件。- 添加BrowserStorage.service.ts和BrowserStorageServer.service.ts文件，提供浏览器存储服务的实现。
- 创建commons.component.ts、commons.component.spec.ts和commons.service.ts文件，作为库的示例组件和服务。
- 添加public-api.ts文件，导出库的公共API。
- 初始化ng-ui项目的README.md文件，提供项目简介和

ng-ui/angular.json

@@ -35,11 +35,12 @@
               }
             ],
             "styles": [
-              "node_modules/bootstrap/dist/css/bootstrap.css",
-              "node_modules/bootstrap-icons/font/bootstrap-icons.css",
-              "node_modules/ng-zorro-antd/ng-zorro-antd.css",
-              "node_modules/ng-zorro-antd/ng-zorro-antd.dark.css",
-              "node_modules/ng-zorro-antd/ng-zorro-antd.compact.css",
+              "@angular/material/prebuilt-themes/magenta-violet.css",
+              "bootstrap/dist/css/bootstrap.css",
+              "bootstrap-icons/font/bootstrap-icons.css",
+              "ng-zorro-antd/ng-zorro-antd.css",
+              "ng-zorro-antd/ng-zorro-antd.dark.css",
+              "ng-zorro-antd/ng-zorro-antd.compact.css",
               "projects/web/src/styles.scss"
             ],
             "scripts": ["node_modules/bootstrap/dist/js/bootstrap.bundle.js"],
@@ -115,7 +116,7 @@
                 "input": "projects/web/public"
               }
             ],
-            "styles": ["projects/web/src/styles.sass"],
+            "styles": ["@angular/material/prebuilt-themes/magenta-violet.css", "projects/web/src/styles.sass"],
             "scripts": []
           }
         }

ng-ui/package.json

@@ -12,10 +12,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^18.0.0",
+    "@angular/cdk": "^18.0.5",
     "@angular/common": "^18.0.0",
     "@angular/compiler": "^18.0.0",
     "@angular/core": "^18.0.0",
     "@angular/forms": "^18.0.0",
+    "@angular/material": "^18.0.5",
     "@angular/platform-browser": "^18.0.0",
     "@angular/platform-browser-dynamic": "^18.0.0",
     "@angular/platform-server": "^18.0.0",
@@ -46,4 +48,4 @@
     "ng-packagr": "^18.0.0",
     "typescript": "~5.4.2"
   }
-}
+}

ng-ui/projects/web/src/app/app.component.html

@@ -1,5 +1,6 @@
+<mat-progress-bar *ngIf="loadingShow()" mode="query"></mat-progress-bar>
 <div class="layout">
-  <nz-spin [nzSpinning]="loadingShow()">
+  <nz-spin [nzSpinning]="progressShow()">
     <router-outlet></router-outlet>
   </nz-spin>
 </div>

ng-ui/projects/web/src/app/app.component.ts

@@ -1,7 +1,8 @@
-import { AsyncPipe } from '@angular/common';
-import { Component } from '@angular/core';
+import { AsyncPipe, NgIf } from '@angular/common';
+import { Component, signal } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
-import { RouterOutlet } from '@angular/router';
+import { NavigationEnd, NavigationStart, Router, RouterOutlet } from '@angular/router';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
 
 import { NzBackTopModule } from 'ng-zorro-antd/back-top';
 import { NzSpinModule } from 'ng-zorro-antd/spin';
@@ -10,12 +11,21 @@ import { LoadingService } from '../core/loading.service';
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, AsyncPipe, NzBackTopModule, NzSpinModule],
+  imports: [RouterOutlet, AsyncPipe, NzBackTopModule, NzSpinModule, MatProgressBarModule, NgIf],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
 })
 export class AppComponent {
-  loadingShow = toSignal(this.loading.progress$, { initialValue: true });
-
-  constructor(private loading: LoadingService) {}
+  loadingShow = toSignal(this.loading.progress$, { initialValue: false });
+  progressShow = signal(true);
+  constructor(private loading: LoadingService, private router: Router) {
+    router.events.subscribe(event => {
+      if (event instanceof NavigationStart) {
+        this.progressShow.set(true);
+      }
+      if (event instanceof NavigationEnd) {
+        this.progressShow.set(false);
+      }
+    });
+  }
 }

ng-ui/projects/web/src/app/app.config.server.ts

@@ -1,10 +1,12 @@
-import {ApplicationConfig, mergeApplicationConfig} from '@angular/core';
-import {provideServerRendering} from '@angular/platform-server';
-import {appConfig} from './app.config';
+import { ApplicationConfig, mergeApplicationConfig } from '@angular/core';
+import { provideServerRendering } from '@angular/platform-server';
+import { appConfig } from './app.config';
+import { BrowserStorageServerService, BrowserStorageService } from 'plate-commons';
 
 const serverConfig: ApplicationConfig = {
   providers: [
-    provideServerRendering()
+    provideServerRendering(),
+    { provide: BrowserStorageService, useClass: BrowserStorageServerService },
   ]
 };
 

ng-ui/projects/web/src/app/app.config.ts

@@ -20,7 +20,7 @@ import {
   withXsrfConfiguration,
 } from '@angular/common/http';
 import { authTokenInterceptor, defaultInterceptor } from '../core/http.Interceptor';
-import { BrowserStorageServerService, BrowserStorageService } from 'plate-commons';
+import { BrowserStorageService } from 'plate-commons';
 import { en_US, NZ_I18N, zh_CN } from 'ng-zorro-antd/i18n';
 
 export const ngZorroConfig: NzConfig = {
@@ -48,7 +48,7 @@ export const appConfig: ApplicationConfig = {
       })
     ),
     { provide: TitleStrategy, useClass: PageTitleStrategy },
-    { provide: BrowserStorageService, useClass: BrowserStorageServerService },
+    { provide: BrowserStorageService, useClass: BrowserStorageService },
     {
       provide: NZ_I18N,
       useFactory: () => {
@@ -64,6 +64,6 @@ export const appConfig: ApplicationConfig = {
       },
     },
     provideExperimentalZonelessChangeDetection(),
-    provideRouter(routes, withComponentInputBinding()),
+    provideRouter(routes, withComponentInputBinding()), provideAnimationsAsync(),
   ],
 };

ng-ui/projects/web/src/app/app.routes.ts

@@ -1,5 +1,6 @@
 import { Routes } from '@angular/router';
 import { NotFoundComponent } from '../core/not-found.component';
+import { authGuard } from '../core/auth.service';
 
 export const routes: Routes = [
   {
@@ -9,6 +10,7 @@ export const routes: Routes = [
   {
     path: 'home',
     loadChildren: () => import('./home/home.module').then(m => m.HomeModule),
+    canActivate: [authGuard],
   },
   { path: '', pathMatch: 'full', redirectTo: 'auth' },
   { path: '**', component: NotFoundComponent },

ng-ui/projects/web/src/app/home/index/index.component.html

@@ -1,6 +1,6 @@
 <nz-layout class="layout">
   <nz-header class="nz-header d-flex justify-content-between align-content-between">
-    <div class="logo mx-2"><i class="bi bi-p-circle-fill mx-2"></i>PLATE</div>
+    <div class="logo"><i class="bi bi-p-circle-fill mx-2"></i>PLATE</div>
     <ul class="header-menu ms-auto" nz-menu nzMode="horizontal" nzTheme="dark">
       <li nz-menu-item><a routerLink="/home">我的</a></li>
     </ul>
@@ -31,7 +31,7 @@
     </nz-sider>
     <nz-layout class="inner-layout">
       <nz-breadcrumb>
-        @for (breadcrumb of breadcrumbs; track breadcrumb) {
+        @for (breadcrumb of breadcrumbs(); track breadcrumb) {
         <nz-breadcrumb-item
           ><a routerLink=".{{ breadcrumb.url }}">{{ breadcrumb.label }}</a></nz-breadcrumb-item
         >

ng-ui/projects/web/src/app/home/index/index.component.scss

@@ -9,16 +9,19 @@
 
 .nz-header {
   padding: 0 !important;
+  a {
+    font-size: 0.9rem;
+  }
 }
 
 .logo {
   width: 14rem;
   color: white;
   float: left;
-  font-size: 2rem;
+  font-size: 1.4rem;
   justify-content: center;
   align-items: center;
-  padding-left: 2rem;
+  padding-left: 0.5rem;
 }
 
 .header-menu {

ng-ui/projects/web/src/app/home/index/index.component.ts

@@ -1,4 +1,4 @@
-import { Component, signal, Type } from '@angular/core';
+import { Component, OnDestroy, OnInit, signal, Type } from '@angular/core';
 import {
   ActivatedRoute,
   NavigationEnd,
@@ -11,7 +11,7 @@ import {
 } from '@angular/router';
 import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb';
 import { NzLayoutModule } from 'ng-zorro-antd/layout';
-import { distinctUntilChanged, filter, map } from 'rxjs';
+import { distinctUntilChanged, filter, map, Subject, takeUntil } from 'rxjs';
 import { Menu } from '../menus/menu.types';
 import { MenusService } from '../menus/menus.service';
 import { CommonModule } from '@angular/common';
@@ -30,12 +30,19 @@ export interface Breadcrumb {
   templateUrl: './index.component.html',
   styleUrl: './index.component.scss',
 })
-export class IndexComponent {
+export class IndexComponent implements OnInit, OnDestroy {
   menus = signal([] as Menu[]);
-  breadcrumbs: Breadcrumb[] = [];
+  breadcrumbs = signal([] as Breadcrumb[]);
+
+  private _subject: Subject<void> = new Subject<void>();
 
   constructor(private router: Router, private activatedRoute: ActivatedRoute, private menusService: MenusService) {}
 
+  ngOnDestroy(): void {
+    this._subject.next();
+    this._subject.complete();
+  }
+
   ngOnInit() {
     this.initMenu();
     this.initBreadcrumb();
@@ -46,18 +53,25 @@ export class IndexComponent {
       pcode: '0',
       tenantCode: '0',
     };
-    this.menusService.getMeMenus(menuRequest);
+    this.menusService
+      .getMeMenus(menuRequest)
+      .pipe(takeUntil(this._subject))
+      .subscribe(
+        menus => this.menus.set(menus),
+        err => console.log(err)
+      );
   }
 
   initBreadcrumb() {
-    this.breadcrumbs = this.getBreadcrumbs(this.activatedRoute.root);
+    this.breadcrumbs.set(this.getBreadcrumbs(this.activatedRoute.root));
     this.router.events
       .pipe(
         filter(event => event instanceof NavigationEnd),
         distinctUntilChanged(),
-        map(() => this.getBreadcrumbs(this.activatedRoute.root))
+        map(() => this.getBreadcrumbs(this.activatedRoute.root)),
+        takeUntil(this._subject)
       )
-      .subscribe(event => (this.breadcrumbs = event));
+      .subscribe(event => this.breadcrumbs.set(event));
   }
 
   getBreadcrumbs(route: ActivatedRoute, url = '', breads: Breadcrumb[] = []): Breadcrumb[] {

ng-ui/projects/web/src/app/home/menus/menus.service.ts

@@ -7,6 +7,9 @@ import { Menu } from './menu.types';
   providedIn: 'root',
 })
 export class MenusService {
+  pipe(arg0: any) {
+    throw new Error('Method not implemented.');
+  }
   constructor(private http: HttpClient) {
   }
 

ng-ui/projects/web/src/core/auth.service.ts

@@ -3,10 +3,7 @@ import { Subject } from 'rxjs';
 import { HttpErrorResponse } from '@angular/common/http';
 import { CanActivateChildFn, CanActivateFn, CanMatchFn, Router } from '@angular/router';
 
-export const authGuard:
-  | CanMatchFn
-  | CanActivateFn
-  | CanActivateChildFn = () => {
+export const authGuard: CanMatchFn | CanActivateFn | CanActivateChildFn = () => {
   const auth = inject(AuthService);
   const router = inject(Router);
   if (auth.isLoggedIn) {

ng-ui/projects/web/src/core/loading.service.ts

@@ -1,26 +1,15 @@
 import { Injectable } from '@angular/core';
-import { NavigationEnd, NavigationStart, Router } from '@angular/router';
 import { debounceTime, distinctUntilChanged, Observable, Subject, tap } from 'rxjs';
 
 @Injectable({ providedIn: 'root' })
 export class LoadingService {
   private progressSource: Subject<boolean> = new Subject<boolean>();
   progress$: Observable<boolean> = this.progressSource.asObservable().pipe(
-    debounceTime(500),
+    debounceTime(100),
     distinctUntilChanged(),
     tap(res => console.log(`Loading Spin show is: ${res}`))
   );
-  constructor(public router: Router) {
-    this.progressSource.next(true);
-    router.events.subscribe(event => {
-      if (event instanceof NavigationStart) {
-        this.show();
-      }
-      if (event instanceof NavigationEnd) {
-        this.hide();
-      }
-    });
-  }
+
   show(): void {
     this.progressSource.next(true);
   }

ng-ui/projects/web/src/index.html

@@ -7,8 +7,10 @@
     <title>Loading page ....</title>
     <base href="/" />
     <link href="favicon.ico" rel="icon" type="image/x-icon" />
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
   </head>
-  <body>
+  <body class="mat-typography">
     <app-root>
       <div class="d-flex justify-content-center align-items-center h-100 bg-success">
         <div class="d-block text-center">

ng-ui/projects/web/src/styles.scss

@@ -4,3 +4,7 @@ body {
   height: 100%;
   width: 100%;
 }
+body {
+  margin: 0;
+  font-family: Roboto, 'Helvetica Neue', sans-serif;
+}