From 73a85170ca4e7e16d46c16260c8b87bfd1eeb051 Mon Sep 17 00:00:00 2001 From: kingecg Date: Fri, 21 Feb 2025 23:14:01 +0800 Subject: [PATCH] home --- public/icon.svg | 10 ++++++ src/app/app.config.ts | 15 +++++++-- src/app/app.routes.ts | 9 ++++++ src/app/auth/login.guard.ts | 30 ++++++++++++++++++ src/app/home/home.component.html | 49 +++++++++++++++++++++++++++++ src/app/home/home.component.scss | 12 +++++++ src/app/home/home.component.spec.ts | 23 ++++++++++++++ src/app/home/home.component.ts | 23 ++++++++++++++ src/app/login/login.component.html | 8 ++--- src/app/login/login.component.ts | 4 +++ src/app/resources.ts | 3 ++ 11 files changed, 180 insertions(+), 6 deletions(-) create mode 100644 public/icon.svg create mode 100644 src/app/auth/login.guard.ts create mode 100644 src/app/home/home.component.html create mode 100644 src/app/home/home.component.scss create mode 100644 src/app/home/home.component.spec.ts create mode 100644 src/app/home/home.component.ts diff --git a/public/icon.svg b/public/icon.svg new file mode 100644 index 0000000..636f431 --- /dev/null +++ b/public/icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/src/app/app.config.ts b/src/app/app.config.ts index cb59249..32ee43b 100644 --- a/src/app/app.config.ts +++ b/src/app/app.config.ts @@ -1,4 +1,8 @@ -import { ApplicationConfig, provideZoneChangeDetection, importProvidersFrom } from '@angular/core'; +import { + ApplicationConfig, + provideZoneChangeDetection, + importProvidersFrom, +} from '@angular/core'; import { provideRouter } from '@angular/router'; import { routes } from './app.routes'; @@ -12,5 +16,12 @@ import { provideHttpClient } from '@angular/common/http'; registerLocaleData(zh); export const appConfig: ApplicationConfig = { - providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideNzI18n(zh_CN), importProvidersFrom(FormsModule), provideAnimationsAsync(), provideHttpClient()] + providers: [ + provideZoneChangeDetection({ eventCoalescing: true }), + provideRouter(routes), + provideNzI18n(zh_CN), + importProvidersFrom(FormsModule), + provideAnimationsAsync(), + provideHttpClient(), + ], }; diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index 93aea74..fe60b4c 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -3,6 +3,15 @@ import { Routes } from '@angular/router'; export const routes: Routes = [ { path: '', + redirectTo: 'home', + pathMatch: 'full' + }, + { + path: 'home', + loadComponent: () => import('./home/home.component').then((m) => m.HomeComponent), + }, + { + path: 'login', loadComponent: () => import('./login/login.component').then((m) => m.LoginComponent), } ]; diff --git a/src/app/auth/login.guard.ts b/src/app/auth/login.guard.ts new file mode 100644 index 0000000..ebbf350 --- /dev/null +++ b/src/app/auth/login.guard.ts @@ -0,0 +1,30 @@ +import { Injectable } from '@angular/core'; +import { CanActivate, Router } from '@angular/router'; +import { HttpClient } from '@angular/common/http'; +import { Observable, of } from 'rxjs'; +import { catchError, map } from 'rxjs/operators'; + +@Injectable({ + providedIn: 'root' +}) +export class LoginGuard implements CanActivate { + + constructor(private http: HttpClient, private router: Router) {} + + canActivate(): Observable { + return this.http.get<{ isAuthenticated: boolean }>('/api/status').pipe( + map(response => { + if (response.isAuthenticated) { + return true; + } else { + this.router.navigate(['/login']); + return false; + } + }), + catchError(() => { + this.router.navigate(['/login']); + return of(false); + }) + ); + } +} \ No newline at end of file diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html new file mode 100644 index 0000000..9f1e712 --- /dev/null +++ b/src/app/home/home.component.html @@ -0,0 +1,49 @@ + + + +
    +
  • + + {{ 'MenuStatus' | resource }} +
    • +
  • + + {{ 'MenuSetting' | resource }} +
    • +
+ + + + + + + + User + Bill + +
Bill is a cat.
+ + GoHttpd Free + + + diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss new file mode 100644 index 0000000..b466191 --- /dev/null +++ b/src/app/home/home.component.scss @@ -0,0 +1,12 @@ +:host { + display: block; + width: 100%; + height: 100%; + nz-layout { + height: 100%; + h1 { + margin: 0; + color: #fff; + } + } +} \ No newline at end of file diff --git a/src/app/home/home.component.spec.ts b/src/app/home/home.component.spec.ts new file mode 100644 index 0000000..1191557 --- /dev/null +++ b/src/app/home/home.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HomeComponent } from './home.component'; + +describe('HomeComponent', () => { + let component: HomeComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [HomeComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(HomeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts new file mode 100644 index 0000000..212e42b --- /dev/null +++ b/src/app/home/home.component.ts @@ -0,0 +1,23 @@ +import { Component } from '@angular/core'; +import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb'; +import { NzIconModule } from 'ng-zorro-antd/icon'; +import { NzLayoutModule } from 'ng-zorro-antd/layout'; +import { NzMenuModule } from 'ng-zorro-antd/menu'; +import { ResourcePipe } from '../resource.pipe'; + +@Component({ + selector: 'app-home', + imports: [ + NzBreadCrumbModule, + NzIconModule, + NzMenuModule, + NzLayoutModule, + ResourcePipe + ], + templateUrl: './home.component.html', + styleUrl: './home.component.scss' +}) +export class HomeComponent { +isCollapsed: any; + +} diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html index 1291cee..d5842cc 100644 --- a/src/app/login/login.component.html +++ b/src/app/login/login.component.html @@ -3,19 +3,19 @@
- +
- +
- + 验证码
- +
\ No newline at end of file diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts index 3b50edb..381343b 100644 --- a/src/app/login/login.component.ts +++ b/src/app/login/login.component.ts @@ -2,6 +2,8 @@ import { CommonModule } from '@angular/common'; import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ResourcePipe } from '../resource.pipe'; +import { NzInputModule } from 'ng-zorro-antd/input'; +import { NzButtonModule } from 'ng-zorro-antd/button'; @Component({ selector: 'app-login', @@ -12,6 +14,8 @@ import { ResourcePipe } from '../resource.pipe'; CommonModule, FormsModule, // 导入FormsModule以支持双向数据绑定 ResourcePipe, + NzInputModule, + NzButtonModule ], }) export class LoginComponent { diff --git a/src/app/resources.ts b/src/app/resources.ts index 681f76e..6703e93 100644 --- a/src/app/resources.ts +++ b/src/app/resources.ts @@ -1,5 +1,8 @@ export const resources:{[key:string]:string} = { Title: 'Gohttpd后台管理', + MenuStatus: '状态', + MenuSetting: '设置', + MenuServers: '服务器', loginTitle: '登录', usernameLabel: '用户名', passwordLabel: '密码',