lami-base-v1/frontend/src/app/mobile/pages/register/register.html

<div class="fixed inset-0 bg-gray-50 dark:bg-[#0f1419] z-[60] flex flex-col">
  <div class="flex-1 flex flex-col items-center justify-center px-6">
    <div class="w-full max-w-sm">
      <div class="text-center mb-8">
        <div class="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-[#00d68f] to-[#00b377] rounded-2xl flex items-center justify-center shadow-lg shadow-green-500/25">
          <span class="text-white text-2xl font-bold">+</span>
        </div>
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-1">创建账号</h1>
        <p class="text-sm text-gray-500 dark:text-gray-400">注册后即可开始学习</p>
      </div>

      <div class="space-y-4">
        <div class="bg-white dark:bg-gray-800 rounded-xl px-4 py-3.5 flex items-center gap-3 border border-gray-200 dark:border-gray-700 focus-within:border-green-500 dark:focus-within:border-green-400 transition-colors">
          <fa-icon [icon]="faMobileAlt" class="text-gray-400 dark:text-gray-500 text-lg w-5 text-center flex-shrink-0"></fa-icon>
          <input
            [(ngModel)]="phone"
            type="tel"
            placeholder="请输入手机号"
            maxlength="11"
            class="flex-1 bg-transparent outline-none text-base text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500"
            autocomplete="tel"
          />
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-xl px-4 py-3.5 flex items-center gap-3 border border-gray-200 dark:border-gray-700 focus-within:border-green-500 dark:focus-within:border-green-400 transition-colors">
          <fa-icon [icon]="faLock" class="text-gray-400 dark:text-gray-500 text-lg w-5 text-center flex-shrink-0"></fa-icon>
          <input
            [(ngModel)]="password"
            [type]="showPassword() ? 'text' : 'password'"
            placeholder="请输入密码（至少6位）"
            class="flex-1 bg-transparent outline-none text-base text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500"
            autocomplete="new-password"
          />
          <button
            (click)="togglePassword()"
            class="w-8 h-8 flex items-center justify-center text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors flex-shrink-0"
            tabindex="-1"
          >
            <fa-icon [icon]="showPassword() ? faEye : faEyeSlash" class="text-base"></fa-icon>
          </button>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-xl px-4 py-3.5 flex items-center gap-3 border border-gray-200 dark:border-gray-700 focus-within:border-green-500 dark:focus-within:border-green-400 transition-colors">
          <fa-icon [icon]="faLock" class="text-gray-400 dark:text-gray-500 text-lg w-5 text-center flex-shrink-0"></fa-icon>
          <input
            [(ngModel)]="confirmPassword"
            [type]="showConfirmPassword() ? 'text' : 'password'"
            placeholder="请再次输入密码"
            class="flex-1 bg-transparent outline-none text-base text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500"
            autocomplete="new-password"
            (keydown.enter)="register()"
          />
          <button
            (click)="toggleConfirmPassword()"
            class="w-8 h-8 flex items-center justify-center text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors flex-shrink-0"
            tabindex="-1"
          >
            <fa-icon [icon]="showConfirmPassword() ? faEye : faEyeSlash" class="text-base"></fa-icon>
          </button>
        </div>

        @if (errorMsg()) {
          <p class="text-sm text-red-500 px-1 animate-fadeIn">{{ errorMsg() }}</p>
        }

        <button
          (click)="register()"
          [disabled]="isLoading()"
          class="w-full py-3.5 bg-gradient-to-r from-[#00d68f] to-[#00b377] text-white font-semibold text-base rounded-xl shadow-lg shadow-green-500/25 hover:shadow-green-500/40 active:scale-[0.98] transition-all duration-200 disabled:opacity-60 disabled:active:scale-100 flex items-center justify-center gap-2"
        >
          @if (isLoading()) {
            <span class="inline-block w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></span>
            <span>注册中...</span>
          } @else {
            <span>注 册</span>
          }
        </button>
      </div>
    </div>
  </div>

  <div class="py-6 text-center">
    <button (click)="goLogin()" class="text-sm text-gray-500 dark:text-gray-400">
      已有账号？<span class="text-green-600 dark:text-green-400">返回登录</span>
    </button>
  </div>
</div>