ng-code/backup-original/app/pages/login/login.component.html

<div class="login-container">
    <mat-card class="login-card">
        <mat-card-header class="card-header">
            <div class="logo-container">
                <div class="logo-icon">
                    <mat-icon class="icon">settings</mat-icon>
                </div>
                <mat-card-title class="title">ERP-AGI对话系统</mat-card-title>
            </div>
           
        </mat-card-header>

        <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" autocomplete="username" autofocus #usernameInput>
      
                </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">
                    <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>
      
                </mat-form-field>

                @if (errorMessage) {
                    <div class="error-message">
                        <mat-icon>error</mat-icon>
                        <span>{{ errorMessage }}</span>
                    </div>
                }

                <button mat-raised-button color="primary" type="submit" class="login-button" [disabled]="isLoading || loginForm.invalid">
                    @if (isLoading) {
                        <mat-spinner diameter="24" class="spinner"></mat-spinner>
                    } @else {
                        <span class="button-content">
                            <mat-icon>login</mat-icon>
                            <span>登录</span>
                        </span>
                    }
                </button>
            </form>
        </mat-card-content>

        <mat-card-footer class="card-footer">
            <div class="footer-content">
               <p>广东志华软件科技有限公司</p>
               <p>Copyright &copy; 2026</p>
            </div>
        </mat-card-footer>
    </mat-card>
</div>