Sfoglia il codice sorgente

mat-回车下一个字段

qdy 1 mese fa
parent
commit
3c7c7bce55

+ 2
- 2
web/src/app/app.component.html Vedi File

@@ -7,8 +7,8 @@
7 7
     <div class="h-full overflow-hidden bg-white border-r border-gray-200 flex-shrink-0" [style.width.px]="sidebarWidth">
8 8
       <div class="p-4 border-b border-gray-200 bg-gradient-to-r from-blue-50 to-indigo-50">
9 9
         <h2 class="text-lg font-semibold text-gray-800 flex items-center">
10
-          <mat-icon class="mr-2 text-blue-600">menu</mat-icon>
11
-          V-AGI
10
+          <mat-icon class="mr-2 text-blue-600">home</mat-icon>
11
+          ERP-AGI
12 12
         </h2>
13 13
       </div>
14 14
       <div class="h-[calc(100%-80px)] overflow-auto">

+ 33
- 0
web/src/app/directives/enter-navigation.directive.ts Vedi File

@@ -5,10 +5,17 @@ import { Directive, ElementRef, HostListener } from '@angular/core';
5 5
   standalone: true
6 6
 })
7 7
 export class EnterNavigationDirective {
8
+  private isComposing = false;
9
+
8 10
   constructor(private elementRef: ElementRef<HTMLElement>) {}
9 11
 
10 12
   @HostListener('keydown.enter', ['$event'])
11 13
   onEnter(event: KeyboardEvent): void {
14
+    // 跳过IME组合输入状态下的回车(让IME完成输入确认)
15
+    if (event.isComposing || this.isComposing) {
16
+      return;
17
+    }
18
+
12 19
     // 阻止默认的提交行为,保持现有表单提交逻辑
13 20
     event.preventDefault();
14 21
 
@@ -33,6 +40,32 @@ export class EnterNavigationDirective {
33 40
     }
34 41
   }
35 42
 
43
+  @HostListener('focus')
44
+  onFocus(): void {
45
+    const element = this.elementRef.nativeElement;
46
+    
47
+    // 只处理input元素(排除textarea、select等)
48
+    if (element.tagName !== 'INPUT') return;
49
+    
50
+    const inputElement = element as HTMLInputElement;
51
+    
52
+    // 排除只读字段和禁用字段
53
+    if (inputElement.readOnly || inputElement.disabled) return;
54
+    
55
+    // 使用setTimeout确保在Angular变更检测后执行
56
+    setTimeout(() => inputElement.select(), 0);
57
+  }
58
+
59
+  @HostListener('compositionstart')
60
+  onCompositionStart(): void {
61
+    this.isComposing = true;
62
+  }
63
+
64
+  @HostListener('compositionend')
65
+  onCompositionEnd(): void {
66
+    this.isComposing = false;
67
+  }
68
+
36 69
   private isTextArea(): boolean {
37 70
     return this.elementRef.nativeElement.tagName === 'TEXTAREA';
38 71
   }

+ 5
- 4
web/src/app/pages/login/login.component.html Vedi File

@@ -5,7 +5,7 @@
5 5
                 <div class="logo-icon">
6 6
                     <mat-icon class="icon">settings</mat-icon>
7 7
                 </div>
8
-                <mat-card-title class="title">配置管理</mat-card-title>
8
+                <mat-card-title class="title">ERP-AGI配置管理</mat-card-title>
9 9
             </div>
10 10
            
11 11
         </mat-card-header>
@@ -15,17 +15,18 @@
15 15
                 <mat-form-field appearance="outline" class="full-width">
16 16
                    <mat-icon matPrefix>person</mat-icon>
17 17
                     <mat-label>用户名</mat-label>
18
-                    <input matInput formControlName="username"   autofocus>
18
+                    <input matInput formControlName="username"  autocomplete="username" autofocus>
19
+      
19 20
                 </mat-form-field>
20 21
 
21 22
                 <mat-form-field appearance="outline" class="full-width">
22 23
                     <mat-label>密码</mat-label>
23
-                    <input matInput [type]="hidePassword ? 'password' : 'text'" formControlName="password" placeholder="请输入密码" >
24
+                    <input matInput [type]="hidePassword ? 'password' : 'text'" formControlName="password" placeholder="请输入密码" autocomplete="current-password">
24 25
                     <mat-icon matPrefix>lock</mat-icon>
25 26
                     <button type="button" mat-icon-button matSuffix (click)="hidePassword = !hidePassword" [attr.aria-label]="'隐藏密码'" [attr.aria-pressed]="hidePassword">
26 27
                         <mat-icon>{{hidePassword ? 'visibility_off' : 'visibility'}}</mat-icon>
27 28
                     </button>
28
-  
29
+      
29 30
                 </mat-form-field>
30 31
 
31 32
                 @if (errorMessage) {

Loading…
Annulla
Salva