xiaoshu-app/projects/xiaoshu-admin/src/app/pages/admin-login.component.html

<main class="login-page">
  <section class="login-story">
    <div class="story-inner">
      <div class="story-brand"><img src="/static/images/logo.png" alt="" /><span>小树陪练</span></div>
      <p class="eyebrow">XIAOSHU PRACTICE</p>
      <h1>让每一次管理，<br />都服务于真实成长。</h1>
      <p class="story-copy">在一个后台完成会员、陪练、课程与排课管理，清晰掌握训练记录和学习进度，让日常运营更简单、更高效。</p>
    </div>
  </section>

  <section class="login-panel">
    <form (ngSubmit)="submit()">
      <div class="mobile-brand"><img src="/static/images/logo.png" alt="" /><span>小树陪练管理后台</span></div>
      <p class="eyebrow">ADMIN CONSOLE</p>
      <h2>欢迎回来</h2>
      <p class="form-intro">使用已授权的管理员账号登录系统</p>

      <label>
        <span>管理员账号</span>
        <div class="control"><lucide-icon [img]="icons.UserRound" [size]="19" /><input name="username" [(ngModel)]="username" autocomplete="username" placeholder="请输入账号" /></div>
      </label>
      <label>
        <span>登录密码</span>
        <div class="control"><lucide-icon [img]="icons.LockKeyhole" [size]="19" /><input name="password" [(ngModel)]="password" [type]="showPassword() ? 'text' : 'password'" autocomplete="current-password" placeholder="请输入密码" /><button aria-label="显示或隐藏密码" type="button" (click)="showPassword.set(!showPassword())"><lucide-icon [img]="showPassword() ? icons.EyeOff : icons.Eye" [size]="18" /></button></div>
      </label>

      @if (notice()) { <p class="notice" role="status">{{ notice() }}</p> }
      @if (error()) { <p class="error" role="alert">{{ error() }}</p> }
      <button class="submit" type="submit" [disabled]="loading()">
        @if (loading()) { <lucide-icon class="spin" [img]="icons.LoaderCircle" [size]="19" /> }
        {{ loading() ? '正在验证权限…' : '登录管理后台' }}
      </button>
    </form>
  </section>
</main>