✨feat(web): 优化路由事件处理和登录流程

- 使用`debounceTime`和`distinctUntilChanged`对路由事件进行优化，减少不必要的处理。
- 简化登录组件的表单验证逻辑。
- 在登录服务中添加对登录流程的优化，包括对登录请求的处理。

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

@@ -7,6 +7,7 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { NzBackTopModule } from 'ng-zorro-antd/back-top';
 import { NzSpinModule } from 'ng-zorro-antd/spin';
 import { LoadingService } from '../core/loading.service';
+import { debounceTime, distinctUntilChanged } from 'rxjs';
 
 @Component({
   selector: 'app-root',
@@ -19,7 +20,7 @@ export class AppComponent {
   loadingShow = toSignal(this.loading.progress$, { initialValue: false });
   progressShow = signal(true);
   constructor(private loading: LoadingService, private router: Router) {
-    router.events.subscribe(event => {
+    router.events.pipe(debounceTime(100), distinctUntilChanged()).subscribe(event => {
       if (event instanceof NavigationStart) {
         this.progressShow.set(true);
       }

ng-ui/projects/web/src/core/login/login.component.ts

@@ -1,10 +1,10 @@
-import {Component, OnDestroy, OnInit} from '@angular/core';
-import {FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators,} from '@angular/forms';
-import {Credentials, LoginService} from './login.service';
-import {ActivatedRoute, Router} from '@angular/router';
-import {Subject, takeUntil} from 'rxjs';
-import {NzFormModule} from 'ng-zorro-antd/form';
-import {NgIf} from '@angular/common';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { Credentials, LoginService } from './login.service';
+import { ActivatedRoute, Router } from '@angular/router';
+import { debounceTime, distinctUntilChanged, Subject, takeUntil } from 'rxjs';
+import { NzFormModule } from 'ng-zorro-antd/form';
+import { NgIf } from '@angular/common';
 
 @Component({
   selector: 'app-login',
@@ -29,16 +29,8 @@ export class LoginComponent implements OnInit, OnDestroy {
     private loginSer: LoginService
   ) {
     this.loginForm = this.formBuilder.group({
-      username: new FormControl('', [
-        Validators.required,
-        Validators.minLength(5),
-        Validators.maxLength(64),
-      ]),
-      password: new FormControl('', [
-        Validators.required,
-        Validators.minLength(6),
-        Validators.maxLength(64),
-      ]),
+      username: new FormControl('', [Validators.required, Validators.minLength(5), Validators.maxLength(64)]),
+      password: new FormControl('', [Validators.required, Validators.minLength(6), Validators.maxLength(64)]),
       remember: new FormControl(false),
     });
   }
@@ -68,13 +60,14 @@ export class LoginComponent implements OnInit, OnDestroy {
   }
 
   login(credentials: Credentials) {
-    const login = this.loginSer.login(credentials);
-    const result = login.pipe(takeUntil(this.componentDestroyed$));
-    result.subscribe({
-      next: () => {
-        this.router.navigate(['/home'], {relativeTo: this.route}).then();
-      },
-      error: e => console.log(e),
-    });
+    this.loginSer
+      .login(credentials)
+      .pipe(takeUntil(this.componentDestroyed$), debounceTime(100), distinctUntilChanged())
+      .subscribe({
+        next: () => {
+          this.router.navigate(['/home'], { relativeTo: this.route }).then();
+        },
+        error: e => console.log(e),
+      });
   }
 }

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

@@ -51,7 +51,6 @@ export class LoginService {
   getRememberMe() {
     let creStr = this.storage.get(this.storageKey);
     if (creStr) {
-      console.log(creStr);
       creStr = atob(creStr);
       this.credentials = JSON.parse(creStr);
     }