lami/src/app/features/auth/register/register.component.html

<div class="min-h-screen flex items-center justify-center bg-surface-50 px-4 py-8">
  <div class="w-full max-w-md bg-white dark:bg-surface-100 rounded-xl shadow-sm border border-surface-200 dark:border-surface-300 p-8">
    <!-- Title -->
    <div class="text-center mb-8">
      <h1 class="text-xl font-semibold text-surface-900 dark:text-surface-900">创建账号</h1>
      <p class="text-sm text-surface-500 dark:text-surface-500 mt-1">注册企微客户服务系统</p>
    </div>

    <!-- Register Error -->
    @if (registerError) {
      <div class="bg-negative-50 text-negative-600 text-sm px-4 py-3 rounded-lg mb-6">
        {{ registerError }}
      </div>
    }

    <!-- Register Form -->
    <form (ngSubmit)="onSubmit()" class="space-y-5">
      <!-- Name -->
      <div>
        <label for="name" class="block text-sm font-medium text-surface-700 dark:text-surface-700 mb-1">姓名</label>
        <div class="relative">
          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-surface-400 dark:text-surface-500">
            <fa-icon [icon]="faUser" class="text-sm"></fa-icon>
          </div>
          <input
            id="name"
            type="text"
            name="name"
            [(ngModel)]="name"
            placeholder="请输入姓名"
            class="w-full pl-10 pr-4 h-11 bg-white dark:bg-surface-100 border rounded-lg text-sm text-surface-900 dark:text-surface-900 placeholder-surface-400 dark:placeholder-surface-500 focus:outline-none focus:ring-2 focus:ring-primary-600 focus:border-primary-600 transition-colors"
            [class.border-surface-300]="!errors.name"
            [class.dark:border-surface-300]="!errors.name"
            [class.border-negative-500]="errors.name"
          />
        </div>
        @if (errors.name) {
          <p class="mt-1 text-xs text-negative-600">{{ errors.name }}</p>
        }
      </div>

      <!-- Phone -->
      <div>
        <label for="phone" class="block text-sm font-medium text-surface-700 dark:text-surface-700 mb-1">手机号</label>
        <div class="relative">
          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-surface-400 dark:text-surface-500">
            <fa-icon [icon]="faPhone" class="text-sm"></fa-icon>
          </div>
          <input
            id="phone"
            type="tel"
            name="phone"
            [(ngModel)]="phone"
            placeholder="请输入11位手机号"
            maxlength="11"
            class="w-full pl-10 pr-4 h-11 bg-white dark:bg-surface-100 border rounded-lg text-sm text-surface-900 dark:text-surface-900 placeholder-surface-400 dark:placeholder-surface-500 focus:outline-none focus:ring-2 focus:ring-primary-600 focus:border-primary-600 transition-colors"
            [class.border-surface-300]="!errors.phone"
            [class.dark:border-surface-300]="!errors.phone"
            [class.border-negative-500]="errors.phone"
          />
        </div>
        @if (errors.phone) {
          <p class="mt-1 text-xs text-negative-600">{{ errors.phone }}</p>
        }
      </div>

      <!-- Email -->
      <div>
        <label for="email" class="block text-sm font-medium text-surface-700 dark:text-surface-700 mb-1">邮箱</label>
        <div class="relative">
          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-surface-400 dark:text-surface-500">
            <fa-icon [icon]="faEnvelope" class="text-sm"></fa-icon>
          </div>
          <input
            id="email"
            type="email"
            name="email"
            [(ngModel)]="email"
            placeholder="请输入邮箱地址"
            class="w-full pl-10 pr-4 h-11 bg-white dark:bg-surface-100 border rounded-lg text-sm text-surface-900 dark:text-surface-900 placeholder-surface-400 dark:placeholder-surface-500 focus:outline-none focus:ring-2 focus:ring-primary-600 focus:border-primary-600 transition-colors"
            [class.border-surface-300]="!errors.email"
            [class.dark:border-surface-300]="!errors.email"
            [class.border-negative-500]="errors.email"
          />
        </div>
        @if (errors.email) {
          <p class="mt-1 text-xs text-negative-600">{{ errors.email }}</p>
        }
      </div>

      <!-- Password -->
      <div>
        <label for="password" class="block text-sm font-medium text-surface-700 dark:text-surface-700 mb-1">密码</label>
        <div class="relative">
          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-surface-400 dark:text-surface-500">
            <fa-icon [icon]="faLock" class="text-sm"></fa-icon>
          </div>
          <input
            id="password"
            [type]="showPassword ? 'text' : 'password'"
            name="password"
            [(ngModel)]="password"
            placeholder="至少6位密码"
            class="w-full pl-10 pr-11 h-11 bg-white dark:bg-surface-100 border rounded-lg text-sm text-surface-900 dark:text-surface-900 placeholder-surface-400 dark:placeholder-surface-500 focus:outline-none focus:ring-2 focus:ring-primary-600 focus:border-primary-600 transition-colors"
            [class.border-surface-300]="!errors.password"
            [class.dark:border-surface-300]="!errors.password"
            [class.border-negative-500]="errors.password"
          />
          <button
            type="button"
            (click)="togglePasswordVisibility()"
            class="absolute inset-y-0 right-0 pr-3 flex items-center text-surface-400 dark:text-surface-500 hover:text-surface-600 dark:text-surface-600 transition-colors"
            tabindex="-1"
          >
            <fa-icon [icon]="showPassword ? faEyeSlash : faEye" class="text-sm"></fa-icon>
          </button>
        </div>
        @if (errors.password) {
          <p class="mt-1 text-xs text-negative-600">{{ errors.password }}</p>
        }
      </div>

      <!-- Confirm Password -->
      <div>
        <label for="confirmPassword" class="block text-sm font-medium text-surface-700 dark:text-surface-700 mb-1">确认密码</label>
        <div class="relative">
          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-surface-400 dark:text-surface-500">
            <fa-icon [icon]="faLock" class="text-sm"></fa-icon>
          </div>
          <input
            id="confirmPassword"
            [type]="showConfirmPassword ? 'text' : 'password'"
            name="confirmPassword"
            [(ngModel)]="confirmPassword"
            placeholder="请再次输入密码"
            class="w-full pl-10 pr-11 h-11 bg-white dark:bg-surface-100 border rounded-lg text-sm text-surface-900 dark:text-surface-900 placeholder-surface-400 dark:placeholder-surface-500 focus:outline-none focus:ring-2 focus:ring-primary-600 focus:border-primary-600 transition-colors"
            [class.border-surface-300]="!errors.confirmPassword"
            [class.dark:border-surface-300]="!errors.confirmPassword"
            [class.border-negative-500]="errors.confirmPassword"
          />
          <button
            type="button"
            (click)="toggleConfirmPasswordVisibility()"
            class="absolute inset-y-0 right-0 pr-3 flex items-center text-surface-400 dark:text-surface-500 hover:text-surface-600 dark:text-surface-600 transition-colors"
            tabindex="-1"
          >
            <fa-icon [icon]="showConfirmPassword ? faEyeSlash : faEye" class="text-sm"></fa-icon>
          </button>
        </div>
        @if (errors.confirmPassword) {
          <p class="mt-1 text-xs text-negative-600">{{ errors.confirmPassword }}</p>
        }
      </div>

      <!-- Register Button -->
      <button
        type="submit"
        class="w-full h-11 bg-primary-600 hover:bg-primary-700 text-white font-medium rounded-lg text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2"
      >
        注 册
      </button>
    </form>

    <!-- Bottom Link -->
    <div class="mt-6 text-center text-sm">
      <span class="text-surface-500 dark:text-surface-500">已有账号？</span>
      <a
        routerLink="/login"
        class="text-primary-600 hover:text-primary-700 font-medium transition-colors"
      >
        登录
      </a>
    </div>
  </div>
</div>