mat-回车下一个字段

web/src/app/directives/enter-navigation.directive.ts

@@ -0,0 +1,117 @@
+import { Directive, ElementRef, HostListener } from '@angular/core';
+
+@Directive({
+  selector: 'input[matInput]:not([type="submit"]):not([type="button"]), textarea[matInput]',
+  standalone: true
+})
+export class EnterNavigationDirective {
+  constructor(private elementRef: ElementRef<HTMLElement>) {}
+
+  @HostListener('keydown.enter', ['$event'])
+  onEnter(event: KeyboardEvent): void {
+    // 阻止默认的提交行为，保持现有表单提交逻辑
+    event.preventDefault();
+
+    // 如果是textarea且按着Shift键，允许换行
+    if (this.isTextArea() && event.shiftKey) {
+      return;
+    }
+
+    // 查找下一个可聚焦元素
+    const nextElement = this.findNextFocusable();
+    
+    if (nextElement) {
+      nextElement.focus();
+      
+      // 对于select元素，阻止事件进一步传播
+      if (nextElement.tagName === 'SELECT') {
+        event.stopPropagation();
+      }
+    } else {
+      // 没有下一个可聚焦元素，触发默认行为（提交表单）
+      this.triggerFormSubmit(event);
+    }
+  }
+
+  private isTextArea(): boolean {
+    return this.elementRef.nativeElement.tagName === 'TEXTAREA';
+  }
+
+  private findNextFocusable(): HTMLElement | null {
+    const currentElement = this.elementRef.nativeElement;
+    const form = this.findParentForm(currentElement);
+    
+    if (!form) {
+      return null;
+    }
+
+    const focusableElements = this.getFocusableElements(form);
+    const currentIndex = focusableElements.indexOf(currentElement);
+    
+    // 如果当前元素不在列表中或已经是最后一个，返回null
+    if (currentIndex === -1 || currentIndex >= focusableElements.length - 1) {
+      return null;
+    }
+
+    return focusableElements[currentIndex + 1];
+  }
+
+  private findParentForm(element: HTMLElement): HTMLElement | null {
+    let parent = element.parentElement;
+    
+    while (parent && parent.tagName !== 'FORM') {
+      parent = parent.parentElement;
+    }
+    
+    return parent;
+  }
+
+  private getFocusableElements(container: HTMLElement): HTMLElement[] {
+    // 定义输入类可聚焦元素的CSS选择器（排除按钮）
+    const inputSelectors = [
+      'input[matInput]:not([type="hidden"]):not([disabled]):not([readonly])',
+      'textarea[matInput]:not([disabled]):not([readonly])',
+      'select[matInput]:not([disabled])',
+      'input:not([matInput]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([disabled]):not([readonly])',
+      'textarea:not([matInput]):not([disabled]):not([readonly])',
+      'select:not([matInput]):not([disabled])',
+      '[contenteditable="true"]:not([disabled])'
+    ].join(', ');
+
+    // 获取所有匹配元素
+    const allElements = Array.from(container.querySelectorAll(inputSelectors)) as HTMLElement[];
+    
+    // 过滤掉隐藏的元素和不可交互的元素
+    return allElements.filter(element => {
+      const style = window.getComputedStyle(element);
+      const isVisible = style.display !== 'none' && 
+                       style.visibility !== 'hidden' && 
+                       style.opacity !== '0' &&
+                       !element.hasAttribute('hidden');
+      
+      // 检查元素是否在视图中（粗略检查）
+      const rect = element.getBoundingClientRect();
+      const isInViewport = rect.width > 0 && rect.height > 0;
+      
+      return isVisible && isInViewport;
+    });
+  }
+
+  private triggerFormSubmit(event: KeyboardEvent): void {
+    const currentElement = this.elementRef.nativeElement;
+    const form = this.findParentForm(currentElement);
+    
+    if (form) {
+      // 查找表单中的提交按钮并点击
+      const submitButton = form.querySelector('button[type="submit"], input[type="submit"]') as HTMLElement;
+      
+      if (submitButton) {
+        submitButton.click();
+      } else {
+        // 如果没有找到提交按钮，尝试触发表单的submit事件
+        const submitEvent = new Event('submit', { bubbles: true, cancelable: true });
+        form.dispatchEvent(submitEvent);
+      }
+    }
+  }
+}

web/src/app/pages/login/login.component.html

@@ -13,32 +13,19 @@
         <mat-card-content class="card-content">
             <form [formGroup]="loginForm" (ngSubmit)="onSubmit()" class="login-form">
                 <mat-form-field appearance="outline" class="full-width">
+                   <mat-icon matPrefix>person</mat-icon>
                     <mat-label>用户名</mat-label>
-                    <input matInput formControlName="username" placeholder="请输入用户名" autocomplete="username">
-                    <mat-icon matPrefix>person</mat-icon>
-                    @if (username?.invalid && (username?.dirty || username?.touched)) {
-                        <mat-error>
-                            @if (username?.errors?.['required']) {
-                                用户名不能为空
-                            }
-                        </mat-error>
-                    }
+                    <input matInput formControlName="username"   autofocus>
                 </mat-form-field>
 
                 <mat-form-field appearance="outline" class="full-width">
                     <mat-label>密码</mat-label>
-                    <input matInput [type]="hidePassword ? 'password' : 'text'" formControlName="password" placeholder="请输入密码" autocomplete="current-password">
+                    <input matInput [type]="hidePassword ? 'password' : 'text'" formControlName="password" placeholder="请输入密码" >
                     <mat-icon matPrefix>lock</mat-icon>
                     <button type="button" mat-icon-button matSuffix (click)="hidePassword = !hidePassword" [attr.aria-label]="'隐藏密码'" [attr.aria-pressed]="hidePassword">
                         <mat-icon>{{hidePassword ? 'visibility_off' : 'visibility'}}</mat-icon>
                     </button>
-                    @if (password?.invalid && (password?.dirty || password?.touched)) {
-                        <mat-error>
-                            @if (password?.errors?.['required']) {
-                                密码不能为空
-                            }
-                        </mat-error>
-                    }
+  
                 </mat-form-field>
 
                 @if (errorMessage) {
@@ -63,8 +50,8 @@
 
         <mat-card-footer class="card-footer">
             <div class="footer-content">
-                <p>广东志华软件科技有限公司</p>
-                <p>2026-01-16</p>
+               <p>广东志华软件科技有限公司</p>
+               <p>Copyright &copy; 2026</p>
             </div>
         </mat-card-footer>
     </mat-card>

web/src/app/pages/login/login.component.scss

@@ -95,62 +95,6 @@
     width: 100%;
 }
 
-/* 美化 Material 表单字段 */
-::ng-deep .mat-mdc-form-field {
-    font-size: 14px;
-}
-
-::ng-deep .mat-mdc-text-field-wrapper {
-    background-color: #f8fafc !important;
-    border-radius: 12px !important;
-}
-
-::ng-deep .mat-mdc-form-field-subscript-wrapper {
-    display: none;
-}
-
-::ng-deep .mat-mdc-form-field-infix {
-    padding-top: 12px !important;
-    padding-bottom: 12px !important;
-    min-height: 48px;
-}
-
-::ng-deep .mat-mdc-form-field-flex {
-    align-items: center;
-}
-
-::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-text-field-wrapper {
-    background-color: #f8fafc !important;
-    box-shadow: none;
-}
-
-::ng-deep .mat-mdc-form-field .mat-mdc-floating-label {
-    top: 24px;
-}
-
-::ng-deep .mdc-text-field--outlined .mdc-notched-outline__leading,
-::ng-deep .mdc-text-field--outlined .mdc-notched-outline__notch,
-::ng-deep .mdc-text-field--outlined .mdc-notched-outline__trailing {
-    border-color: #e2e8f0 !important;
-    border-radius: 12px;
-}
-
-::ng-deep .mdc-text-field--outlined.mdc-text-field--focused .mdc-notched-outline__leading,
-::ng-deep .mdc-text-field--outlined.mdc-text-field--focused .mdc-notched-outline__notch,
-::ng-deep .mdc-text-field--outlined.mdc-text-field--focused .mdc-notched-outline__trailing {
-    border-color: #e2e8f0 !important;
-}
-
-::ng-deep .mat-mdc-form-field-icon-prefix,
-::ng-deep .mat-mdc-form-field-icon-suffix {
-    padding: 0 8px;
-}
-
-::ng-deep .mat-mdc-form-field-icon-prefix .mat-icon,
-::ng-deep .mat-mdc-form-field-icon-suffix .mat-icon {
-    color: #64748b;
-}
-
 /* 错误消息 */
 .error-message {
     background-color: #fee2e2;
@@ -270,4 +214,45 @@
     .card-footer {
         padding: 20px 24px;
     }
+}
+
+/* 简洁版：只修复连接线，调整边框颜色 */
+:host ::ng-deep {
+  .mat-mdc-form-field {
+    /* 核心修复：只去除 leading 的右边框 */
+    .mdc-notched-outline__leading {
+      border-right: none !important;
+    }
+    
+    /* 核心修复：只去除 notch 的左右边框 */
+    .mdc-notched-outline__notch {
+      border-left: none !important;
+      border-right: none !important;
+    }
+    
+    /* 图标无右边框 */
+    .mat-mdc-form-field-icon-prefix {
+      border-right: none !important;
+    }
+    
+    /* 调整边框颜色，与整体设计协调 */
+    .mdc-text-field--outlined {
+      .mdc-notched-outline {
+        .mdc-notched-outline__leading,
+        .mdc-notched-outline__notch,
+        .mdc-notched-outline__trailing {
+          border-color: #cbd5e1 !important; /* 更柔和的灰色 */
+        }
+      }
+      
+      /* 聚焦状态使用主题色 */
+      &.mdc-text-field--focused .mdc-notched-outline {
+        .mdc-notched-outline__leading,
+        .mdc-notched-outline__notch,
+        .mdc-notched-outline__trailing {
+          border-color: #7c3aed !important; /* 使用你的紫色主题色 */
+        }
+      }
+    }
+  }
 }

web/src/app/pages/login/login.component.ts

@@ -9,6 +9,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { AuthService } from '../../services/auth.service';
+import { EnterNavigationDirective } from '../../directives/enter-navigation.directive';
 
 @Component({
   selector: 'app-login',
@@ -21,7 +22,8 @@ import { AuthService } from '../../services/auth.service';
     MatInputModule,
     MatButtonModule,
     MatIconModule,
-    MatProgressSpinnerModule
+    MatProgressSpinnerModule,
+    EnterNavigationDirective
   ],
   templateUrl: './login.component.html',
   styleUrl: './login.component.scss'

web/src/app/pages/project-list/project-list.component.ts

@@ -11,6 +11,7 @@ import { MatProgressSpinner } from '@angular/material/progress-spinner';
 import { MatIcon } from '@angular/material/icon';
 import { ProjectService } from '../../services/project.service';
 import { Project, ProjectRequest } from '../../models/project.model';
+import { EnterNavigationDirective } from '../../directives/enter-navigation.directive';
 
 @Component({
   selector: 'app-project-list',
@@ -25,7 +26,8 @@ import { Project, ProjectRequest } from '../../models/project.model';
     MatFormFieldModule,
     MatInputModule,
     MatProgressSpinner,
-    MatIcon
+    MatIcon,
+    EnterNavigationDirective
   ],
   templateUrl: './project-list.component.html',
   styleUrl: './project-list.component.scss'

web/src/app/pages/role-list/role-list.component.ts

@@ -10,6 +10,7 @@ import { MatProgressSpinner } from '@angular/material/progress-spinner';
 import { MatIcon } from '@angular/material/icon';
 import { RoleService } from '../../services/role.service';
 import { Role, RoleRequest } from '../../models/role.model';
+import { EnterNavigationDirective } from '../../directives/enter-navigation.directive';
 
 @Component({
   selector: 'app-role-list',
@@ -23,7 +24,8 @@ import { Role, RoleRequest } from '../../models/role.model';
     MatFormFieldModule,
     MatInputModule,
     MatProgressSpinner,
-    MatIcon
+    MatIcon,
+    EnterNavigationDirective
   ],
   templateUrl: './role-list.component.html',
   styleUrl: './role-list.component.scss'

web/src/app/pages/tenant-list/tenant-list.component.ts

@@ -10,6 +10,7 @@ import { MatProgressSpinner } from '@angular/material/progress-spinner';
 import { MatIcon } from '@angular/material/icon';
 import { TenantService } from '../../services/tenant.service';
 import { Tenant, TenantRequest } from '../../models/tenant.model';
+import { EnterNavigationDirective } from '../../directives/enter-navigation.directive';
 
 @Component({
   selector: 'app-tenant-list',
@@ -23,7 +24,8 @@ import { Tenant, TenantRequest } from '../../models/tenant.model';
     MatFormFieldModule,
     MatInputModule,
     MatProgressSpinner,
-    MatIcon
+    MatIcon,
+    EnterNavigationDirective
   ],
   templateUrl: './tenant-list.component.html',
   styleUrl: './tenant-list.component.scss'

web/src/app/pages/user-list/user-list.component.ts

@@ -10,6 +10,7 @@ import { MatProgressSpinner } from '@angular/material/progress-spinner';
 import { MatIcon } from '@angular/material/icon';
 import { UserService } from '../../services/user.service';
 import { User, UserRequest } from '../../models/user.model';
+import { EnterNavigationDirective } from '../../directives/enter-navigation.directive';
 
 @Component({
   selector: 'app-user-list',
@@ -23,7 +24,8 @@ import { User, UserRequest } from '../../models/user.model';
     MatFormFieldModule,
     MatInputModule,
     MatProgressSpinner,
-    MatIcon
+    MatIcon,
+    EnterNavigationDirective
   ],
   templateUrl: './user-list.component.html',
   styleUrl: './user-list.component.scss'