npm install create package-lock.json

vnobo · Nov 4, 2023 · 418d6bd · 418d6bd
1 parent 7709888
commit 418d6bd
Show file tree

Hide file tree

Showing 9 changed files with 83 additions and 54 deletions.
diff --git a/ui/web/src/app/app.module.ts b/ui/web/src/app/app.module.ts
@@ -4,7 +4,6 @@ import {AppComponent} from './app.component';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {ServiceWorkerModule} from '@angular/service-worker';
 import {TitleStrategy} from '@angular/router';
-import {httpInterceptorProviders} from "./core/http-interceptors";
 import {HttpClientXsrfModule} from "@angular/common/http";
 import {SharedModule} from "./shared/shared.module";
 import {PagesModule} from "./pages/pages.module";
@@ -30,7 +29,6 @@ import {CoreModule} from "./core/core.module";
     PagesModule
   ],
   providers: [
-    httpInterceptorProviders,
     {provide: APP_ID, useValue: 'serverApp'},
     {provide: TitleStrategy, useClass: PageTitleStrategy}
   ],

diff --git a/ui/web/src/app/core/core.module.ts b/ui/web/src/app/core/core.module.ts
@@ -1,8 +1,11 @@
 import {NgModule, Optional, SkipSelf} from '@angular/core';
+import {httpInterceptorProviders} from "./http-interceptors";
 
 
 @NgModule({
-  providers: []
+  providers: [
+    httpInterceptorProviders
+  ]
 })
 export class CoreModule {
   constructor(@Optional() @SkipSelf() parentModule?: CoreModule) {

diff --git a/ui/web/src/app/pages/pages-routing.module.ts b/ui/web/src/app/pages/pages-routing.module.ts
@@ -1,19 +1,20 @@
 import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
+import {WelcomeComponent} from "./welcome/welcome.component";
 import {PageNotFoundComponent} from "./page-not-found/page-not-found.component";
 
 const routes: Routes = [
-  {path: 'welcome', loadChildren: () => import('./pages.module').then(m => m.PagesModule)},
+  {path: 'welcome', component: WelcomeComponent, title: '欢迎主页'},
   {
     path: 'auth', loadChildren: () => import('./security/security.module').then(m => m.SecurityModule),
-    title: "系统登录"
+    title: '系统登录'
   },
   {path: '', pathMatch: 'full', redirectTo: '/auth'},
   {path: '**', component: PageNotFoundComponent}
 ];
 
 @NgModule({
-  imports: [RouterModule.forChild(routes)],
+  imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
 })
 export class PagesRoutingModule {

diff --git a/ui/web/src/app/pages/pages.module.ts b/ui/web/src/app/pages/pages.module.ts
@@ -4,16 +4,15 @@ import {PagesRoutingModule} from './pages-routing.module';
 
 import {WelcomeComponent} from './welcome/welcome.component';
 import {PageNotFoundComponent} from "./page-not-found/page-not-found.component";
-import {SecurityModule} from "./security/security.module";
 import {SharedModule} from "../shared/shared.module";
 
 @NgModule({
   imports: [
     PagesRoutingModule,
-    SecurityModule,
     SharedModule
   ],
-  declarations: [WelcomeComponent, PageNotFoundComponent]
+  declarations: [WelcomeComponent, PageNotFoundComponent],
+  exports: [PageNotFoundComponent]
 })
 export class PagesModule {
   constructor(@Optional() @SkipSelf() parentModule?: PagesModule) {

diff --git a/ui/web/src/app/pages/security/login/login.component.html b/ui/web/src/app/pages/security/login/login.component.html
@@ -1,8 +1,8 @@
 <div class="page min-vh-100 min-vw-100">
   <div class="position-absolute top-50 start-50 translate-middle">
-    <div class="card" style="width: 28rem;">
+    <div class="card">
       <h4 class="card-header text-center py-2">
-        <a class="navbar-brand navbar-brand-autodark" href="../../../../../../.." i18n="@@app.login.title">
+        <a class="navbar-brand navbar-brand-autodark" href="#" i18n="@@app.login.title">
           Plate Platform Manager</a>
       </h4>
       <div class="card-body">

diff --git a/ui/web/src/app/pages/security/login/login.component.scss b/ui/web/src/app/pages/security/login/login.component.scss
@@ -5,8 +5,12 @@
 
 .page {
   background-image: url(https://bing.biturl.top/?resolution=1920&format=image&index=0&mkt=zh-CN),
-  url('/ui/web/src/assets/th.jpg'), linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5));
+  url('/assets/th.jpg'), linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5));
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
 }
+
+.card {
+  width: 23rem;
+}
diff --git a/ui/web/src/app/pages/welcome/welcome.component.html b/ui/web/src/app/pages/welcome/welcome.component.html
@@ -1,34 +1,51 @@
 <nz-layout class="layout">
-  <nz-sider [nzCollapsedWidth]="0" nzBreakpoint="lg" nzCollapsible>
+  <nz-header>
     <div class="logo"></div>
-    <ul [nzInlineCollapsed]="isCollapsed" nz-menu nzMode="inline" nzTheme="dark">
-      <li nz-submenu nzIcon="dashboard" nzOpen nzTitle="Dashboard">
-        <ul>
-          <li nz-menu-item nzMatchRouter>
-            <a routerLink="/welcome">Welcome</a>
-          </li>
-          <li nz-menu-item nzMatchRouter>
-            <a>Monitor</a>
-          </li>
-          <li nz-menu-item nzMatchRouter>
-            <a>Workplace</a>
-          </li>
-        </ul>
-      </li>
-      <li nz-submenu nzIcon="form" nzOpen nzTitle="Form">
-        <ul>
-          <li nz-menu-item nzMatchRouter>
-            <a>Basic Form</a>
-          </li>
-        </ul>
-      </li>
+    <ul class="header-menu" nz-menu nzMode="horizontal" nzTheme="dark">
+      <li nz-menu-item nzSelected>nav 1</li>
+      <li nz-menu-item>nav 2</li>
+      <li nz-menu-item>nav 3</li>
     </ul>
-  </nz-sider>
+  </nz-header>
   <nz-layout>
-    <nz-header></nz-header>
-    <nz-content>
-      <div class="inner-content">Content</div>
-    </nz-content>
-    <nz-footer>Ant Design ©2020 Implement By Angular</nz-footer>
+    <nz-sider nzTheme="light" nzWidth="14.5rem">
+      <ul class="sider-menu" nz-menu nzMode="inline">
+        <li nz-submenu nzIcon="user" nzOpen nzTitle="subnav 1">
+          <ul>
+            <li nz-menu-item nzSelected>option1</li>
+            <li nz-menu-item>option2</li>
+            <li nz-menu-item>option3</li>
+            <li nz-menu-item>option4</li>
+          </ul>
+        </li>
+        <li nz-submenu nzIcon="laptop" nzTitle="subnav 2">
+          <ul>
+            <li nz-menu-item>option5</li>
+            <li nz-menu-item>option6</li>
+            <li nz-menu-item>option7</li>
+            <li nz-menu-item>option8</li>
+          </ul>
+        </li>
+        <li nz-submenu nzIcon="notification" nzTitle="subnav 3">
+          <ul>
+            <li nz-menu-item>option9</li>
+            <li nz-menu-item>option10</li>
+            <li nz-menu-item>option11</li>
+            <li nz-menu-item>option12</li>
+          </ul>
+        </li>
+      </ul>
+    </nz-sider>
+    <nz-layout class="inner-layout">
+      <nz-breadcrumb>
+        <nz-breadcrumb-item>Home</nz-breadcrumb-item>
+        <nz-breadcrumb-item>List</nz-breadcrumb-item>
+        <nz-breadcrumb-item>App</nz-breadcrumb-item>
+      </nz-breadcrumb>
+      <nz-content>
+        <div class="inner-content">Content</div>
+      </nz-content>
+      <nz-footer>Ant Design ©2020 Implement By Angular</nz-footer>
+    </nz-layout>
   </nz-layout>
 </nz-layout>
diff --git a/ui/web/src/app/pages/welcome/welcome.component.scss b/ui/web/src/app/pages/welcome/welcome.component.scss
@@ -8,26 +8,31 @@
 }
 
 .logo {
+  width: 9.8rem;
   height: 2.5rem;
-  background: rgba(217, 33, 33, 0.2);
-  margin: 16px;
+  background: rgba(255, 255, 255, 0.2);
+  margin: 0.8rem 2.2rem 1rem 0;
+  float: left;
 }
 
-nz-header {
-  background: #173494;
-  padding: 0;
+.header-menu {
+  line-height: 4rem;
 }
 
-nz-content {
-  margin: 0.5rem 0.2rem 0;
+.sider-menu {
+  height: 100%;
+  border-right: 0;
 }
 
-.inner-content {
-  padding: 2rem;
-  background: #fff;
-  min-height: 12rem;
+.inner-layout {
+  padding: 0 1.2rem 1.2rem;
+}
+
+nz-breadcrumb {
+  margin: 1rem 0;
 }
 
-nz-footer {
-  text-align: center;
+nz-content {
+  background: #fff;
+  padding: 1rem;
 }
diff --git a/ui/web/src/app/shared/shared-zorro.module.ts b/ui/web/src/app/shared/shared-zorro.module.ts
@@ -8,6 +8,7 @@ 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 {NzBreadCrumbModule} from "ng-zorro-antd/breadcrumb";
 
 
 @NgModule({
@@ -24,7 +25,8 @@ import {NzSliderModule} from "ng-zorro-antd/slider";
     NzLayoutModule,
     NzMenuModule,
     NzIconModule,
-    NzResultModule
+    NzResultModule,
+    NzBreadCrumbModule
   ]
 })
 export class SharedZorroModule {