home

public/icon.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
+  <!-- 服务器主体 -->
+  <rect x="20" y="20" width="60" height="60" fill="#4CAF50" stroke="#2E7D32" stroke-width="2"/>
+  <!-- 服务器前面的插槽 -->
+  <rect x="30" y="30" width="40" height="10" fill="#81C784"/>
+  <rect x="30" y="45" width="40" height="10" fill="#81C784"/>
+  <rect x="30" y="60" width="40" height="10" fill="#81C784"/>
+  <!-- 服务器指示灯 -->
+  <circle cx="75" cy="75" r="5" fill="#FFEB3B"/>
+</svg>

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(),
+  ],
 };

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),
   }
 ];

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<boolean> {
+    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);
+      })
+    );
+  }
+}

src/app/home/home.component.html

@@ -0,0 +1,49 @@
+<nz-layout>
+    <nz-sider  nzTheme="dark" nzCollapsible [(nzCollapsed)]="isCollapsed" [nzTrigger]="null">
+      <div class="logo">
+        
+          <h1><nz-icon>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+                <!-- 服务器主体 -->
+                <rect x="20" y="20" width="60" height="60" fill="#4CAF50" stroke="#2E7D32" stroke-width="2"/>
+                <!-- 服务器前面的插槽 -->
+                <rect x="30" y="30" width="40" height="10" fill="#81C784"/>
+                <rect x="30" y="45" width="40" height="10" fill="#81C784"/>
+                <rect x="30" y="60" width="40" height="10" fill="#81C784"/>
+                <!-- 服务器指示灯 -->
+                <circle cx="75" cy="75" r="5" fill="#FFEB3B"/>
+              </svg>
+    
+            </nz-icon>  GoHttpd</h1>
+      </div>
+      <ul nz-menu nzTheme="dark" nzMode="inline">
+        <li nz-menu-item>
+            <nz-icon nzType="dashboard" nzTheme="outline" />
+            <span>{{ 'MenuStatus' | resource }}</span>
+        </li>
+        <li  nz-menu-item >
+            <nz-icon nzType="setting" nzTheme="outline" />
+            <span>{{ 'MenuSetting' | resource }}</span>
+        </li>
+      </ul>
+    </nz-sider>
+    <nz-layout>
+      <nz-header>
+        <span
+          class="trigger"
+          nz-icon
+          [nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'"
+          (click)="isCollapsed = !isCollapsed"
+        ></span>
+      </nz-header>
+      <nz-content>
+        <nz-breadcrumb>
+          <nz-breadcrumb-item>User</nz-breadcrumb-item>
+          <nz-breadcrumb-item>Bill</nz-breadcrumb-item>
+        </nz-breadcrumb>
+        <div class="inner-content">Bill is a cat.</div>
+      </nz-content>
+      <nz-footer>GoHttpd Free</nz-footer>
+    </nz-layout>
+  </nz-layout>
+

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;
+    }
+  }
+}

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<HomeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HomeComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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;
+
+}

src/app/login/login.component.html

@@ -3,19 +3,19 @@
   <form (ngSubmit)="onSubmit()">
     <div class="form-group">
       <label for="username">{{ 'usernameLabel' | resource }}</label>
-      <input type="text" id="username" [(ngModel)]="username" name="username" required>
+      <input nz-input type="text" id="username" [(ngModel)]="username" name="username" required>
     </div>
     <div class="form-group">
       <label for="password">{{ 'passwordLabel' | resource }}</label>
-      <input type="password" id="password" [(ngModel)]="password" name="password" required>
+      <input nz-input type="password" id="password" [(ngModel)]="password" name="password" required>
     </div>
     <div class="form-group">
       <label for="captcha">{{ 'captchaLabel' | resource }}</label>
       <div class="captcha-container">
-        <input type="text" id="captcha" [(ngModel)]="captcha" name="captcha" required>
+        <input nz-input type="text" id="captcha" [(ngModel)]="captcha" name="captcha" required>
         <img [src]="captchaImage" (click)="refreshCaptcha()" alt="验证码">
       </div>
     </div>
-    <button [disabled]="!captchaIsCorrect()" type="submit">{{ 'loginButton' | resource }}</button>
+    <button nz-button nzType="primary" [disabled]="!captchaIsCorrect()" type="submit">{{ 'loginButton' | resource }}</button>
   </form>
 </div>

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 {

src/app/resources.ts

@@ -1,5 +1,8 @@
 export const resources:{[key:string]:string} = {
   Title: 'Gohttpd后台管理',
+  MenuStatus: '状态',
+  MenuSetting: '设置',
+  MenuServers: '服务器',
   loginTitle: '登录',
   usernameLabel: '用户名',
   passwordLabel: '密码',