初始化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文件，作为库的
vnobo · Jul 8, 2024 · 7e0c22e · 7e0c22e
1 parent 64740bd
commit 7e0c22e
Show file tree

Hide file tree

Showing 27 changed files with 687 additions and 101 deletions.
diff --git a/ng-ui/angular.json b/ng-ui/angular.json
@@ -37,6 +37,9 @@
             "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",
               "projects/web/src/styles.scss"
             ],
             "scripts": ["node_modules/bootstrap/dist/js/bootstrap.bundle.js"],

diff --git a/ng-ui/projects/web/src/app/app.component.html b/ng-ui/projects/web/src/app/app.component.html
@@ -1,4 +1,4 @@
-<div class="layui-layout">
+<div class="layout">
   <nz-spin [nzSpinning]="loadingShow()">
     <router-outlet></router-outlet>
   </nz-spin>

diff --git a/ng-ui/projects/web/src/app/app.component.scss b/ng-ui/projects/web/src/app/app.component.scss
@@ -2,3 +2,9 @@
   min-height: 100%;
   min-width: 100%;
 }
+
+.layout {
+  min-height: 100%;
+  min-width: 100%;
+  display: block;
+}
diff --git a/ng-ui/projects/web/src/app/app.component.spec.ts b/ng-ui/projects/web/src/app/app.component.spec.ts
diff --git a/ng-ui/projects/web/src/app/app.component.ts b/ng-ui/projects/web/src/app/app.component.ts
@@ -1,12 +1,11 @@
-import {AsyncPipe} from '@angular/common';
-import {Component} from '@angular/core';
-import {RouterOutlet} from '@angular/router';
-import {toSignal} from '@angular/core/rxjs-interop';
+import { AsyncPipe } from '@angular/common';
+import { Component } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { RouterOutlet } from '@angular/router';
 
-import {NzBackTopModule} from 'ng-zorro-antd/back-top';
-import {NzSpinModule} from 'ng-zorro-antd/spin';
-import {debounceTime, distinctUntilChanged, tap} from 'rxjs';
-import {LoadingService} from '../core/loading.service';
+import { NzBackTopModule } from 'ng-zorro-antd/back-top';
+import { NzSpinModule } from 'ng-zorro-antd/spin';
+import { LoadingService } from '../core/loading.service';
 
 @Component({
   selector: 'app-root',
@@ -16,18 +15,7 @@ import {LoadingService} from '../core/loading.service';
   styleUrl: './app.component.scss',
 })
 export class AppComponent {
-  loadingShow = toSignal(
-    this.loading.progress$.pipe(
-      debounceTime(500),
-      distinctUntilChanged(),
-      tap(res => console.log(`Loading show is: ${res}`))
-    ),
-    { initialValue: false }
-  );
+  loadingShow = toSignal(this.loading.progress$, { initialValue: true });
 
   constructor(private loading: LoadingService) {}
-
-  ngOnInit(): void {
-    this.loading.show();
-  }
 }
diff --git a/ng-ui/projects/web/src/app/app.config.ts b/ng-ui/projects/web/src/app/app.config.ts
@@ -1,5 +1,11 @@
-import { ApplicationConfig, importProvidersFrom, provideExperimentalZonelessChangeDetection } from '@angular/core';
-import { provideRouter, TitleStrategy } from '@angular/router';
+import {
+  ApplicationConfig,
+  importProvidersFrom,
+  inject,
+  LOCALE_ID,
+  provideExperimentalZonelessChangeDetection,
+} from '@angular/core';
+import { provideRouter, TitleStrategy, withComponentInputBinding } from '@angular/router';
 
 import { routes } from './app.routes';
 import { NzConfig, provideNzConfig } from 'ng-zorro-antd/core/config';
@@ -15,6 +21,7 @@ import {
 } from '@angular/common/http';
 import { authTokenInterceptor, defaultInterceptor } from '../core/http.Interceptor';
 import { BrowserStorageServerService, BrowserStorageService } from 'plate-commons';
+import { en_US, NZ_I18N, zh_CN } from 'ng-zorro-antd/i18n';
 
 export const ngZorroConfig: NzConfig = {
   message: {
@@ -23,7 +30,7 @@ export const ngZorroConfig: NzConfig = {
     nzAnimate: true,
     nzPauseOnHover: true,
   },
-  notification: {nzTop: 240},
+  notification: { nzTop: 240 },
 };
 
 export const appConfig: ApplicationConfig = {
@@ -40,8 +47,23 @@ export const appConfig: ApplicationConfig = {
         headerName: 'X-XSRF-TOKEN',
       })
     ),
-    {provide: TitleStrategy, useClass: PageTitleStrategy},
-    {provide: BrowserStorageService, useClass: BrowserStorageServerService},
-    provideExperimentalZonelessChangeDetection(), provideRouter(routes)
+    { provide: TitleStrategy, useClass: PageTitleStrategy },
+    { provide: BrowserStorageService, useClass: BrowserStorageServerService },
+    {
+      provide: NZ_I18N,
+      useFactory: () => {
+        const localId = inject(LOCALE_ID);
+        switch (localId) {
+          case 'en':
+            return en_US;
+          case 'zh':
+            return zh_CN;
+          default:
+            return zh_CN;
+        }
+      },
+    },
+    provideExperimentalZonelessChangeDetection(),
+    provideRouter(routes, withComponentInputBinding()),
   ],
 };
diff --git a/ng-ui/projects/web/src/app/app.routes.ts b/ng-ui/projects/web/src/app/app.routes.ts
@@ -6,6 +6,10 @@ export const routes: Routes = [
     path: 'auth',
     loadChildren: () => import('../core/security.module').then(m => m.SecurityModule),
   },
+  {
+    path: 'home',
+    loadChildren: () => import('./home/home.module').then(m => m.HomeModule),
+  },
   { path: '', pathMatch: 'full', redirectTo: 'auth' },
   { path: '**', component: NotFoundComponent },
 ];
diff --git a/ng-ui/projects/web/src/app/home/groups/groups.component.css b/ng-ui/projects/web/src/app/home/groups/groups.component.css
@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}
diff --git a/ng-ui/projects/web/src/app/home/groups/groups.component.html b/ng-ui/projects/web/src/app/home/groups/groups.component.html
@@ -0,0 +1 @@
+<p>groups works!</p>
diff --git a/ng-ui/projects/web/src/app/home/groups/groups.component.ts b/ng-ui/projects/web/src/app/home/groups/groups.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-groups',
+  templateUrl: './groups.component.html',
+  styleUrl: './groups.component.css',
+})
+export class GroupsComponent {
+}
diff --git a/ng-ui/projects/web/src/app/home/home-routing.module.ts b/ng-ui/projects/web/src/app/home/home-routing.module.ts
@@ -1,10 +1,15 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { IndexComponent } from './index/index.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  { path: 'index', component: IndexComponent, title: '首页' },
+  { path: '', pathMatch: 'full', redirectTo: 'index' },
+  { path: '**', component: IndexComponent },
+];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
-export class HomeRoutingModule { }
+export class HomeRoutingModule {}
diff --git a/ng-ui/projects/web/src/app/home/home.module.ts b/ng-ui/projects/web/src/app/home/home.module.ts
@@ -1,13 +1,11 @@
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
 
 import { HomeRoutingModule } from './home-routing.module';
 
 
 @NgModule({
   declarations: [],
   imports: [
-    CommonModule,
     HomeRoutingModule
   ]
 })

diff --git a/ng-ui/projects/web/src/app/home/index/index.component.html b/ng-ui/projects/web/src/app/home/index/index.component.html
@@ -1 +1,48 @@
-<p>index works!</p>
+<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>
+    <ul class="header-menu ms-auto" nz-menu nzMode="horizontal" nzTheme="dark">
+      <li nz-menu-item><a routerLink="/home">我的</a></li>
+    </ul>
+  </nz-header>
+  <nz-layout>
+    <nz-sider [nzCollapsedWidth]="0" nzBreakpoint="md" nzCollapsible nzWidth="14.6rem">
+      <ul class="sider-menu" nz-menu nzMode="inline" nzTheme="dark">
+        <li nz-menu-item><i class="bi bi-p-circle-fill mx-2"></i><a routerLink="/home">首页</a></li>
+        @for (menu of menus(); track menu) {
+        <li nz-submenu nzIcon="user" nzOpen nzTitle="{{ menu.name }}">
+          <ul>
+            @for (child of menu.children; track child) {
+            <li nz-menu-item>
+              <a [state]="child" routerLink=".{{ child.path }}" routerLinkActive="active">{{ child.name }}</a>
+            </li>
+            }
+          </ul>
+        </li>
+        }
+        <li *ngFor="let menu of menus(); index as i" nz-submenu nzIcon="user" nzOpen nzTitle="{{ menu.name }}">
+          <ul>
+            <li *ngFor="let child of menu.children; index as i" nz-menu-item>
+              <a [state]="child" routerLink=".{{ child.path }}" routerLinkActive="active">{{ child.name }}</a>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </nz-sider>
+    <nz-layout class="inner-layout">
+      <nz-breadcrumb>
+        @for (breadcrumb of breadcrumbs; track breadcrumb) {
+        <nz-breadcrumb-item
+          ><a routerLink=".{{ breadcrumb.url }}">{{ breadcrumb.label }}</a></nz-breadcrumb-item
+        >
+        }
+      </nz-breadcrumb>
+      <nz-content>
+        <div class="inner-content">
+          <router-outlet></router-outlet>
+        </div>
+      </nz-content>
+      <nz-footer>Ant Design ©2024 Implement By Angular</nz-footer>
+    </nz-layout>
+  </nz-layout>
+</nz-layout>
diff --git a/ng-ui/projects/web/src/app/home/index/index.component.scss b/ng-ui/projects/web/src/app/home/index/index.component.scss
@@ -0,0 +1,45 @@
+:host {
+  min-width: 100%;
+  min-height: 100%;
+}
+
+.layout {
+  min-height: 100vh;
+}
+
+.nz-header {
+  padding: 0 !important;
+}
+
+.logo {
+  width: 14rem;
+  color: white;
+  float: left;
+  font-size: 2rem;
+  justify-content: center;
+  align-items: center;
+  padding-left: 2rem;
+}
+
+.header-menu {
+  line-height: 4rem;
+  margin-right: 1rem;
+}
+
+.sider-menu {
+  min-height: 100%;
+  border-right: 0;
+}
+
+.inner-layout {
+  padding: 0 1.2rem 1.2rem;
+}
+
+nz-breadcrumb {
+  margin: 1rem 0;
+}
+
+nz-content {
+  background: #fff;
+  padding: 1rem;
+}
diff --git a/ng-ui/projects/web/src/app/home/index/index.component.spec.ts b/ng-ui/projects/web/src/app/home/index/index.component.spec.ts