@csntgao/uni-base 0.1.0

package/packages/web-components/src/user-login.ts

@@ -0,0 +1,2027 @@
+import { LitElement, css, html, nothing } from 'lit'
+import {
+  UserLoginTransportError,
+  type UserLoginQrStatus,
+  type UserLoginSuccess,
+  type UserLoginTransport,
+} from './user-login-transport'
+
+export type UserLoginMethod = 'password' | 'verification-code' | 'qr-code'
+
+export type UserLoginErrorCode =
+  | 'CAPTCHA_LOAD_FAILED'
+  | 'SMS_SEND_FAILED'
+  | 'SMS_CODE_INVALID_OR_EXPIRED'
+  | 'LOGIN_FAILED'
+  | 'QR_LOAD_FAILED'
+  | 'QR_POLL_FAILED'
+  | 'PASSWORD_INVALID'
+  | 'ACCOUNT_LOCKED'
+  | 'ACCOUNT_DISABLED'
+  | 'ORG_ACCESS_DENIED'
+  | 'QR_LOGIN_REJECTED'
+  | 'QR_LOGIN_UNAVAILABLE'
+
+export interface UserLoginErrorDetail {
+  code: UserLoginErrorCode
+  message: string
+  recoverable: boolean
+}
+
+export interface UserLoginEventMap {
+  'sms-sent': CustomEvent<Record<string, never>>
+  'login-success': CustomEvent<UserLoginSuccess>
+  'onboarding-requested': CustomEvent<{
+    applicationName: string
+    trigger: 'automatic' | 'manual'
+  }>
+  'agreement-requested': CustomEvent<{ type: 'user' | 'privacy' }>
+  'forgot-password-requested': CustomEvent<Record<string, never>>
+  error: CustomEvent<UserLoginErrorDetail>
+}
+
+export interface UserLoginConfig {
+  transport: UserLoginTransport
+  applicationName: string
+  headerTitle?: string
+  headerSubtitle?: string
+  headerIconUrl?: string
+  securityHint?: string
+  userAgreementUrl?: string
+  privacyAgreementUrl?: string
+  forgotPasswordUrl?: string
+  countdownSeconds?: number
+  qrPollIntervalMs?: number
+  initialMethod?: UserLoginMethod
+  initiallyAgreed?: boolean
+  initiallyRememberSession?: boolean
+}
+
+interface ResolvedUserLoginConfig {
+  transport: UserLoginTransport
+  applicationName: string
+  userAgreementUrl: string
+  privacyAgreementUrl: string
+  forgotPasswordUrl: string
+  countdownSeconds: number
+  qrPollIntervalMs: number
+}
+
+interface FormErrors {
+  mobile: string
+  smsCode: string
+  password: string
+  agreement: string
+  global: string
+}
+
+interface UserLoginBranding {
+  headerTitle: string
+  headerSubtitle: string
+  headerIconUrl: string
+  securityHint: string
+}
+
+type QrViewState = 'idle' | 'loading' | UserLoginQrStatus | 'error'
+
+const EMPTY_ERRORS: FormErrors = {
+  mobile: '',
+  smsCode: '',
+  password: '',
+  agreement: '',
+  global: '',
+}
+
+const LOGIN_METHODS: ReadonlyArray<{ method: UserLoginMethod; label: string }> = [
+  { method: 'password', label: '密码登录' },
+  { method: 'verification-code', label: '验证码登录' },
+  { method: 'qr-code', label: '扫码登录' },
+]
+
+export class UniplatUserLogin extends LitElement {
+  static override properties = {
+    activeMethod: { state: true },
+    mobile: { state: true },
+    smsCode: { state: true },
+    password: { state: true },
+    passwordVisible: { state: true },
+    agreed: { state: true },
+    rememberSession: { state: true },
+    sendingSms: { state: true },
+    loggingIn: { state: true },
+    countdown: { state: true },
+    errors: { state: true },
+    statusMessage: { state: true },
+    branding: { state: true },
+    qrState: { state: true },
+    qrImageUrl: { state: true },
+    registrationSucceeded: { state: true },
+  }
+
+  static override styles = css`
+    :host {
+      --uniplat-user-login-width: 400px;
+      --uniplat-user-login-primary: #2e6bf5;
+      --uniplat-user-login-text: #182634;
+      --uniplat-user-login-muted: #7a8794;
+      --uniplat-user-login-placeholder: #a9b3bf;
+      --uniplat-user-login-background: #ffffff;
+      --uniplat-user-login-input-background: #ffffff;
+      --uniplat-user-login-error: #e5484d;
+      --uniplat-user-login-font-family:
+        Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      display: block;
+      width: min(var(--uniplat-user-login-width), 100%);
+      color: var(--uniplat-user-login-text);
+      font-family: var(--uniplat-user-login-font-family);
+      line-height: 1.4;
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    button,
+    input {
+      font: inherit;
+    }
+
+    .shell {
+      display: flex;
+      width: 100%;
+      overflow: hidden;
+      border: 1px solid #e4ebf3;
+      border-radius: 16px;
+      background: var(--uniplat-user-login-background);
+      box-shadow: 0 8px 24px rgb(20 40 80 / 6%);
+      flex-direction: column;
+    }
+
+    .header {
+      display: grid;
+      min-height: 72px;
+      grid-template-columns: 42px minmax(0, 1fr);
+      gap: 12px;
+      align-items: center;
+      padding: 14px 18px;
+      border-bottom: 1px solid #edf1f6;
+      background: #fafcfe;
+      order: 1;
+    }
+
+    .header.no-icon {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    .header-icon {
+      width: 42px;
+      height: 42px;
+      border-radius: 12px;
+      object-fit: contain;
+    }
+
+    .header-copy {
+      min-width: 0;
+    }
+
+    .header-title,
+    .header-subtitle {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .header-title {
+      color: var(--uniplat-user-login-text);
+      font-size: 16px;
+      font-weight: 800;
+      line-height: 22px;
+    }
+
+    .header-subtitle {
+      margin-top: 2px;
+      color: var(--uniplat-user-login-muted);
+      font-size: 12.5px;
+      line-height: 18px;
+    }
+
+    .form {
+      display: flex;
+      width: 100%;
+      padding: 22px 24px 24px;
+      flex-direction: column;
+      order: 2;
+    }
+
+    .tabs {
+      display: flex;
+      gap: 18px;
+      border-bottom: 1px solid #edf1f6;
+    }
+
+    .tab {
+      position: relative;
+      min-width: 0;
+      padding: 0 0 10px;
+      border: 0;
+      background: transparent;
+      color: #98a4b2;
+      cursor: pointer;
+      font-size: 14.5px;
+      line-height: 20px;
+      white-space: nowrap;
+    }
+
+    .tab.selected {
+      color: var(--uniplat-user-login-text);
+      font-weight: 800;
+    }
+
+    .tab.selected::after {
+      position: absolute;
+      right: 0;
+      bottom: -1px;
+      left: 0;
+      height: 2px;
+      border-radius: 2px;
+      background: var(--uniplat-user-login-primary);
+      content: '';
+    }
+
+    .tab:disabled {
+      color: #98a4b2;
+      cursor: not-allowed;
+    }
+
+    .method-panel {
+      display: flex;
+      gap: 12px;
+      padding-top: 18px;
+      flex-direction: column;
+    }
+
+    .field {
+      min-height: 0;
+    }
+
+    .input-row {
+      display: flex;
+      width: 100%;
+      height: 44px;
+      overflow: hidden;
+      align-items: center;
+      border: 1px solid #e2e9f3;
+      border-radius: 9px;
+      background: var(--uniplat-user-login-input-background);
+      transition:
+        border-color 0.16s ease,
+        box-shadow 0.16s ease;
+    }
+
+    .input-row:hover,
+    .input-row:focus-within {
+      border-color: #8eaff9;
+      box-shadow: 0 0 0 3px rgb(46 107 245 / 10%);
+    }
+
+    .input-row.error {
+      border-color: var(--uniplat-user-login-error);
+      box-shadow: none;
+    }
+
+    .country-code {
+      padding-left: 12px;
+      color: #5a6673;
+      font-size: 13.5px;
+      font-weight: 600;
+      white-space: nowrap;
+    }
+
+    .country-divider {
+      width: 1px;
+      height: 16px;
+      margin: 0 8px;
+      flex: none;
+      background: #e2e9f3;
+    }
+
+    .input {
+      width: 100%;
+      min-width: 0;
+      height: 100%;
+      padding: 0 12px;
+      border: 0;
+      outline: 0;
+      background: transparent;
+      color: #25303f;
+      font-size: 13.5px;
+    }
+
+    .phone-input {
+      padding-left: 0;
+    }
+
+    .input::placeholder {
+      color: var(--uniplat-user-login-placeholder);
+    }
+
+    .error-text {
+      display: flex;
+      gap: 5px;
+      align-items: center;
+      margin-top: 6px;
+      color: var(--uniplat-user-login-error);
+      font-size: 12px;
+      line-height: 16px;
+    }
+
+    .error-dot {
+      display: grid;
+      width: 13px;
+      height: 13px;
+      flex: none;
+      border-radius: 50%;
+      background: currentcolor;
+      color: #fff;
+      font-size: 9px;
+      font-weight: 800;
+      place-items: center;
+    }
+
+    .send-button,
+    .countdown {
+      display: grid;
+      width: 100%;
+      height: 44px;
+      padding: 0 8px;
+      flex: none;
+      border: 0;
+      border-radius: 9px;
+      font-size: 13px;
+      font-weight: 700;
+      text-align: center;
+      white-space: nowrap;
+      place-items: center;
+    }
+
+    .sms-row {
+      display: flex;
+      gap: 10px;
+    }
+
+    .sms-row .input-row {
+      min-width: 0;
+      flex: 1;
+    }
+
+    .sms-action {
+      width: 96px;
+      height: 44px;
+      flex: none;
+    }
+
+    .send-button {
+      background: #f4f7fc;
+      color: var(--uniplat-user-login-primary);
+      cursor: pointer;
+    }
+
+    .send-button:disabled,
+    .countdown {
+      background: #f4f7fc;
+      color: #98a4b2;
+      cursor: not-allowed;
+    }
+
+    .password-toggle {
+      display: grid;
+      width: 42px;
+      height: 42px;
+      padding: 0;
+      flex: none;
+      border: 0;
+      background: transparent;
+      color: #98a4b2;
+      cursor: pointer;
+      font-size: 16px;
+      place-items: center;
+    }
+
+    .options,
+    .agreement {
+      display: flex;
+      color: var(--uniplat-user-login-muted);
+      font-size: 12.5px;
+      line-height: 20px;
+    }
+
+    .options {
+      align-items: center;
+      justify-content: space-between;
+      margin-top: 1px;
+    }
+
+    .check-label {
+      display: inline-flex;
+      gap: 6px;
+      align-items: center;
+      cursor: pointer;
+    }
+
+    .checkbox {
+      position: relative;
+      width: 15px;
+      height: 15px;
+      margin: 0;
+      appearance: none;
+      border: 1.5px solid #c4ceda;
+      border-radius: 4px;
+      background: #fff;
+      cursor: pointer;
+    }
+
+    .checkbox:checked {
+      border-color: var(--uniplat-user-login-primary);
+      background: var(--uniplat-user-login-primary);
+    }
+
+    .checkbox.error {
+      border-color: var(--uniplat-user-login-error);
+    }
+
+    .checkbox:checked::after {
+      position: absolute;
+      top: 1px;
+      left: 4px;
+      width: 4px;
+      height: 8px;
+      border: solid #fff;
+      border-width: 0 1.5px 1.5px 0;
+      content: '';
+      transform: rotate(45deg);
+    }
+
+    .options .checkbox {
+      width: 14px;
+      height: 14px;
+    }
+
+    .text-button,
+    .agreement-link {
+      padding: 0;
+      border: 0;
+      background: transparent;
+      color: var(--uniplat-user-login-primary);
+      cursor: pointer;
+      text-decoration: none;
+    }
+
+    .agreement {
+      gap: 8px;
+      align-items: flex-start;
+      margin-top: 2px;
+    }
+
+    .agreement .checkbox {
+      margin-top: 3px;
+    }
+
+    .agreement-copy {
+      display: inline;
+    }
+
+    .agreement-link {
+      margin: 0 2px;
+      white-space: nowrap;
+    }
+
+    .submit {
+      display: flex;
+      width: 100%;
+      height: 46px;
+      align-items: center;
+      justify-content: center;
+      margin-top: 4px;
+      border: 0;
+      border-radius: 10px;
+      background: var(--uniplat-user-login-primary);
+      color: #fff;
+      cursor: pointer;
+      font-size: 15px;
+      font-weight: 700;
+      transition: opacity 0.16s ease;
+    }
+
+    .submit:hover:not(:disabled) {
+      opacity: 0.92;
+    }
+
+    .submit:disabled {
+      background: #a9c2f6;
+      cursor: not-allowed;
+    }
+
+    .helper {
+      margin-top: 0;
+      color: #98a4b2;
+      font-size: 12.5px;
+      line-height: 18px;
+      text-align: center;
+    }
+
+    .verification-panel .submit {
+      margin-top: 6px;
+    }
+
+    .verification-panel.has-errors {
+      gap: 16px;
+      padding-top: 16px;
+    }
+
+    .verification-panel.has-errors .submit {
+      margin-top: 0;
+    }
+
+    .global-message {
+      min-height: 18px;
+      margin-top: 10px;
+      color: var(--uniplat-user-login-muted);
+      font-size: 12px;
+      line-height: 18px;
+      text-align: center;
+    }
+
+    .global-message.error {
+      color: var(--uniplat-user-login-error);
+    }
+
+    .qr-panel {
+      gap: 0;
+      padding-top: 16px;
+      align-items: center;
+    }
+
+    .qr-frame {
+      position: relative;
+      display: grid;
+      width: 172px;
+      height: 172px;
+      overflow: hidden;
+      border: 1px solid #e4ebf3;
+      border-radius: 12px;
+      background: #fafcfe;
+      place-items: center;
+    }
+
+    .qr-image {
+      width: 150px;
+      height: 150px;
+      object-fit: contain;
+    }
+
+    .qr-placeholder {
+      color: #98a4b2;
+      font-size: 12px;
+    }
+
+    .qr-overlay {
+      position: absolute;
+      display: flex;
+      inset: 0;
+      align-items: center;
+      justify-content: center;
+      padding: 18px;
+      border: 0;
+      background: rgb(255 255 255 / 92%);
+      color: var(--uniplat-user-login-text);
+      cursor: default;
+      font-size: 13px;
+      font-weight: 700;
+      line-height: 20px;
+      text-align: center;
+    }
+
+    button.qr-overlay.retry {
+      color: var(--uniplat-user-login-primary);
+      cursor: pointer;
+    }
+
+    .qr-heading {
+      margin-top: 14px;
+      color: var(--uniplat-user-login-text);
+      font-size: 13.5px;
+      font-weight: 700;
+      line-height: 20px;
+      text-align: center;
+    }
+
+    .qr-steps {
+      display: flex;
+      width: 100%;
+      gap: 7px;
+      margin: 10px 0 0;
+      padding: 0;
+      color: var(--uniplat-user-login-muted);
+      flex-direction: column;
+      font-size: 12.5px;
+      line-height: 1.6;
+      list-style: none;
+    }
+
+    .qr-step {
+      display: flex;
+      gap: 8px;
+    }
+
+    .step-number {
+      display: grid;
+      width: 17px;
+      height: 17px;
+      margin-top: 2px;
+      flex: none;
+      border-radius: 50%;
+      background: #edf1f6;
+      color: #5a6673;
+      font-size: 11px;
+      font-weight: 700;
+      place-items: center;
+    }
+
+    .qr-tip {
+      display: flex;
+      width: 100%;
+      gap: 6px;
+      align-items: center;
+      margin-top: 12px;
+      padding: 8px 12px;
+      border-radius: 8px;
+      background: #eaf1fe;
+      color: var(--uniplat-user-login-primary);
+      font-size: 12.5px;
+      line-height: 20px;
+    }
+
+    .qr-tip-icon {
+      position: relative;
+      width: 10px;
+      height: 15px;
+      flex: none;
+      border: 1.4px solid currentcolor;
+      border-radius: 2px;
+    }
+
+    .qr-tip-icon::after {
+      position: absolute;
+      bottom: 1px;
+      left: 3px;
+      width: 2px;
+      height: 1px;
+      border-radius: 1px;
+      background: currentcolor;
+      content: '';
+    }
+
+    .form.success-form {
+      padding: 34px 24px;
+    }
+
+    .success-panel {
+      display: flex;
+      width: 100%;
+      align-items: center;
+      flex-direction: column;
+      text-align: center;
+    }
+
+    .success-icon {
+      display: grid;
+      width: 62px;
+      height: 62px;
+      border-radius: 50%;
+      background: #e3f7ef;
+      color: #0ca678;
+      place-items: center;
+    }
+
+    .success-title {
+      margin-top: 16px;
+      color: var(--uniplat-user-login-text);
+      font-size: 18px;
+      font-weight: 800;
+      line-height: 25px;
+    }
+
+    .success-description {
+      margin-top: 8px;
+      color: #61708a;
+      font-size: 13.5px;
+      line-height: 1.75;
+    }
+
+    .success-countdown {
+      display: flex;
+      gap: 7px;
+      align-items: center;
+      margin-top: 18px;
+      color: #98a4b2;
+      font-size: 12.5px;
+      line-height: 18px;
+    }
+
+    .success-spinner {
+      width: 15px;
+      height: 15px;
+      border: 1.5px solid #d4dce6;
+      border-top-color: #98a4b2;
+      border-radius: 50%;
+      animation: onboarding-spin 0.8s linear infinite;
+    }
+
+    .onboarding-button {
+      display: flex;
+      width: 100%;
+      height: 44px;
+      align-items: center;
+      justify-content: center;
+      margin-top: 18px;
+      border: 0;
+      border-radius: 10px;
+      background: var(--uniplat-user-login-primary);
+      color: #fff;
+      cursor: pointer;
+      font-size: 14.5px;
+      font-weight: 700;
+    }
+
+    @keyframes onboarding-spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    .security-footer {
+      display: flex;
+      min-height: 38px;
+      gap: 8px;
+      align-items: center;
+      justify-content: center;
+      padding: 10px 18px;
+      border-top: 1px solid #edf1f6;
+      color: var(--uniplat-user-login-placeholder);
+      font-size: 12px;
+      line-height: 18px;
+      order: 3;
+      text-align: center;
+    }
+
+    .security-icon {
+      position: relative;
+      width: 14px;
+      height: 10px;
+      margin-top: 4px;
+      flex: none;
+      border: 1.3px solid currentcolor;
+      border-radius: 2px;
+    }
+
+    .security-icon::before {
+      position: absolute;
+      bottom: 8px;
+      left: 2px;
+      width: 8px;
+      height: 6px;
+      border: 1.3px solid currentcolor;
+      border-bottom: 0;
+      border-radius: 6px 6px 0 0;
+      content: '';
+    }
+
+    .tab:focus-visible,
+    .send-button:focus-visible,
+    .password-toggle:focus-visible,
+    .text-button:focus-visible,
+    .agreement-link:focus-visible,
+    .submit:focus-visible,
+    .qr-overlay:focus-visible,
+    .onboarding-button:focus-visible {
+      outline: 2px solid var(--uniplat-user-login-primary);
+      outline-offset: 2px;
+    }
+
+    @media (max-width: 420px) {
+      .form {
+        padding-right: 18px;
+        padding-left: 18px;
+      }
+
+      .tabs {
+        gap: 10px;
+      }
+
+      .tab {
+        font-size: 13.5px;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .input-row,
+      .submit {
+        transition: none;
+      }
+
+      .success-spinner {
+        animation: none;
+      }
+    }
+  `
+
+  declare private activeMethod: UserLoginMethod
+  declare private mobile: string
+  declare private smsCode: string
+  declare private password: string
+  declare private passwordVisible: boolean
+  declare private agreed: boolean
+  declare private rememberSession: boolean
+  declare private sendingSms: boolean
+  declare private loggingIn: boolean
+  declare private countdown: number
+  declare private errors: FormErrors
+  declare private statusMessage: string
+  declare private branding: UserLoginBranding
+  declare private qrState: QrViewState
+  declare private qrImageUrl: string
+  declare private registrationSucceeded: boolean
+
+  private config: ResolvedUserLoginConfig | null = null
+  private countdownTimer: number | undefined
+  private qrChallengeId = ''
+  private qrPollIntervalMs = 0
+  private qrGeneration = 0
+  private qrPollTimer: number | undefined
+  private onboardingTimer: number | undefined
+  private onboardingRequested = false
+
+  constructor() {
+    super()
+    this.activeMethod = 'verification-code'
+    this.mobile = ''
+    this.smsCode = ''
+    this.password = ''
+    this.passwordVisible = false
+    this.agreed = false
+    this.rememberSession = true
+    this.sendingSms = false
+    this.loggingIn = false
+    this.countdown = 0
+    this.errors = { ...EMPTY_ERRORS }
+    this.statusMessage = ''
+    this.branding = {
+      headerTitle: '',
+      headerSubtitle: '',
+      headerIconUrl: '',
+      securityHint: '',
+    }
+    this.qrState = 'idle'
+    this.qrImageUrl = ''
+    this.registrationSucceeded = false
+  }
+
+  configure(config: UserLoginConfig): void {
+    if (
+      !config ||
+      !config.transport ||
+      typeof config.transport.sendSmsCode !== 'function' ||
+      typeof config.transport.login !== 'function'
+    ) {
+      throw new TypeError('user-login requires a complete verification-code transport')
+    }
+    const countdownSeconds = config.countdownSeconds ?? 60
+    if (!Number.isInteger(countdownSeconds) || countdownSeconds < 1 || countdownSeconds > 300) {
+      throw new TypeError('user-login countdownSeconds must be an integer from 1 to 300')
+    }
+    const qrPollIntervalMs = config.qrPollIntervalMs ?? 2_000
+    if (
+      !Number.isInteger(qrPollIntervalMs) ||
+      qrPollIntervalMs < 500 ||
+      qrPollIntervalMs > 10_000
+    ) {
+      throw new TypeError('user-login qrPollIntervalMs must be an integer from 500 to 10000')
+    }
+    const nextBranding: UserLoginBranding = {
+      headerTitle: normalizeDisplayText(config.headerTitle, 80),
+      headerSubtitle: normalizeDisplayText(config.headerSubtitle, 160),
+      headerIconUrl: safeConfiguredImageUrl(config.headerIconUrl),
+      securityHint: normalizeDisplayText(config.securityHint, 200),
+    }
+    this.stopQrFlow()
+    this.clearCountdown()
+    this.clearOnboardingTimer()
+    this.config = {
+      transport: config.transport,
+      applicationName: normalizeApplicationName(config.applicationName),
+      userAgreementUrl: safeNavigationUrl(config.userAgreementUrl, 'Agreement URL'),
+      privacyAgreementUrl: safeNavigationUrl(config.privacyAgreementUrl, 'Agreement URL'),
+      forgotPasswordUrl: safeNavigationUrl(config.forgotPasswordUrl, 'Forgot-password URL'),
+      countdownSeconds,
+      qrPollIntervalMs,
+    }
+    this.branding = nextBranding
+    this.activeMethod = this.resolveInitialMethod(normalizeLoginMethod(config.initialMethod))
+    this.mobile = ''
+    this.smsCode = ''
+    this.password = ''
+    this.passwordVisible = false
+    this.agreed = config.initiallyAgreed ?? false
+    this.rememberSession = config.initiallyRememberSession ?? true
+    this.qrState = 'idle'
+    this.qrImageUrl = ''
+    this.registrationSucceeded = false
+    this.onboardingRequested = false
+    this.errors = { ...EMPTY_ERRORS }
+    this.statusMessage = ''
+    if (this.isConnected) this.startActiveMethod()
+  }
+
+  override connectedCallback(): void {
+    super.connectedCallback()
+    if (this.registrationSucceeded) this.startOnboardingTimer()
+    else if (this.config) this.startActiveMethod()
+  }
+
+  override disconnectedCallback(): void {
+    this.clearCountdown()
+    this.clearOnboardingTimer()
+    this.stopQrFlow()
+    const passwordInput =
+      this.shadowRoot?.querySelector<HTMLInputElement>('#uniplat-login-password')
+    if (passwordInput) passwordInput.value = ''
+    this.password = ''
+    this.passwordVisible = false
+    super.disconnectedCallback()
+  }
+
+  override render() {
+    const hasHeader = Boolean(
+      this.branding.headerTitle || this.branding.headerSubtitle || this.branding.headerIconUrl,
+    )
+    return html`
+      <section class="shell" part="shell">
+        ${hasHeader ? this.renderHeader() : nothing}
+        ${
+          this.branding.securityHint
+            ? html`<div class="security-footer" part="security-footer">
+                <span class="security-icon" part="security-icon" aria-hidden="true"></span>
+                <span>${this.branding.securityHint}</span>
+              </div>`
+            : nothing
+        }
+        <form
+          class=${`form${this.registrationSucceeded ? ' success-form' : ''}`}
+          part="form"
+          novalidate
+          @submit=${this.submitLogin}
+        >
+          ${
+            this.registrationSucceeded
+              ? this.renderRegistrationSuccess()
+              : html`${this.renderTabs()} ${this.renderActivePanel()}`
+          }
+        </form>
+      </section>
+    `
+  }
+
+  private renderHeader() {
+    return html`
+      <header class=${`header${this.branding.headerIconUrl ? '' : ' no-icon'}`} part="header">
+        ${
+          this.branding.headerIconUrl
+            ? html`<img
+                class="header-icon"
+                part="header-icon"
+                src=${this.branding.headerIconUrl}
+                alt=""
+              />`
+            : nothing
+        }
+        <div class="header-copy">
+          ${
+            this.branding.headerTitle
+              ? html`<div class="header-title" part="header-title">
+                  ${this.branding.headerTitle}
+                </div>`
+              : nothing
+          }
+          ${
+            this.branding.headerSubtitle
+              ? html`<div class="header-subtitle" part="header-subtitle">
+                  ${this.branding.headerSubtitle}
+                </div>`
+              : nothing
+          }
+        </div>
+      </header>
+    `
+  }
+
+  private renderRegistrationSuccess() {
+    return html`
+      <div class="success-panel" part="registration-success" role="status" aria-live="polite">
+        <span class="success-icon" part="registration-success-icon" aria-hidden="true">
+          <svg
+            width="32"
+            height="32"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.8"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <circle cx="12" cy="12" r="9"></circle>
+            <path d="m8 12 2.6 2.6L16.5 9"></path>
+          </svg>
+        </span>
+        <div class="success-title">注册成功，欢迎加入亲亲企服</div>
+        <div class="success-description">接下来创建你的团队 / 企业，即可开始办理业务</div>
+        <div class="success-countdown">
+          <span class="success-spinner" aria-hidden="true"></span>
+          <span>2 秒后自动进入入驻引导</span>
+        </div>
+        <button
+          class="onboarding-button"
+          part="onboarding-button"
+          type="button"
+          @click=${this.requestOnboardingManually}
+        >
+          立即开始
+        </button>
+      </div>
+    `
+  }
+
+  private renderTabs() {
+    return html`
+      <div class="tabs" part="title tabs" role="tablist" aria-label="登录方式">
+        ${LOGIN_METHODS.map(({ method, label }) => {
+          const available = this.isMethodAvailable(method)
+          return html`
+            <button
+              class=${`tab${this.activeMethod === method ? ' selected' : ''}`}
+              part="tab"
+              type="button"
+              role="tab"
+              aria-selected=${String(this.activeMethod === method)}
+              title=${available ? '' : '当前 Host 未配置此登录方式'}
+              ?disabled=${!available}
+              @click=${() => this.selectMethod(method)}
+            >
+              ${label}
+            </button>
+          `
+        })}
+      </div>
+    `
+  }
+
+  private renderActivePanel() {
+    if (this.activeMethod === 'password') return this.renderPasswordPanel()
+    if (this.activeMethod === 'qr-code') return this.renderQrPanel()
+    return this.renderVerificationPanel()
+  }
+
+  private renderPasswordPanel() {
+    const busy = this.loggingIn || this.sendingSms
+    const canSubmit = Boolean(this.isMobileValid() && this.password.length >= 6 && !busy)
+    return html`
+      <div class="method-panel" part="method-panel" role="tabpanel">
+        ${this.renderMobileField()}
+        <div class="field" part="field">
+          <div class=${`input-row${this.errors.password ? ' error' : ''}`}>
+            <input
+              id="uniplat-login-password"
+              class="input"
+              part="input"
+              type=${this.passwordVisible ? 'text' : 'password'}
+              autocomplete="current-password"
+              maxlength="128"
+              placeholder="请输入密码"
+              aria-label="密码"
+              aria-invalid=${String(Boolean(this.errors.password))}
+              .value=${this.password}
+              @input=${this.updatePassword}
+              @blur=${this.validatePasswordField}
+            />
+            <button
+              class="password-toggle"
+              part="password-toggle"
+              type="button"
+              aria-label=${this.passwordVisible ? '隐藏密码' : '显示密码'}
+              @click=${this.togglePasswordVisibility}
+            >
+              ${this.renderPasswordVisibilityIcon()}
+            </button>
+          </div>
+          ${this.renderFieldError(this.errors.password)}
+        </div>
+        <div class="options" part="login-options">
+          <label class="check-label">
+            <input
+              class="checkbox"
+              type="checkbox"
+              .checked=${this.rememberSession}
+              @change=${this.updateRememberSession}
+            />
+            <span>7 天内免登录</span>
+          </label>
+          <button
+            class="text-button"
+            part="forgot-password"
+            type="button"
+            @click=${this.openForgotPassword}
+          >
+            忘记密码
+          </button>
+        </div>
+        <button class="submit" part="submit-button" type="submit" ?disabled=${!canSubmit}>
+          ${this.loggingIn ? '登录中…' : '登录'}
+        </button>
+        ${this.renderGlobalMessage()}
+      </div>
+    `
+  }
+
+  private renderVerificationPanel() {
+    const busy = this.sendingSms || this.loggingIn
+    const hasValidationErrors = Boolean(
+      this.errors.mobile || this.errors.smsCode || this.errors.agreement,
+    )
+    const canSubmit = Boolean(this.agreed && this.isMobileValid() && this.isSmsCodeValid() && !busy)
+    return html`
+      <div
+        class=${`method-panel verification-panel${hasValidationErrors ? ' has-errors' : ''}`}
+        part="method-panel"
+        role="tabpanel"
+      >
+        ${this.renderMobileField()}
+        <div class="field" part="field">
+          <div class="sms-row" part="sms-row">
+            <div class=${`input-row${this.errors.smsCode ? ' error' : ''}`}>
+              <input
+                id="uniplat-login-sms-code"
+                class="input"
+                part="input"
+                type="text"
+                inputmode="numeric"
+                autocomplete="one-time-code"
+                maxlength="6"
+                placeholder="请输入 6 位验证码"
+                aria-label="手机验证码"
+                aria-invalid=${String(Boolean(this.errors.smsCode))}
+                .value=${this.smsCode}
+                @input=${this.updateSmsCode}
+                @blur=${this.validateSmsCodeField}
+              />
+            </div>
+            <div class="sms-action">
+              <button
+                class="send-button"
+                part="send-button"
+                type="button"
+                ?disabled=${busy || this.countdown > 0 || !this.config || !this.isMobileValid()}
+                @click=${this.sendSmsCode}
+              >
+                ${
+                  this.sendingSms
+                    ? '发送中…'
+                    : this.countdown > 0
+                      ? `${this.countdown}s 后重发`
+                      : '获取验证码'
+                }
+              </button>
+            </div>
+          </div>
+          ${this.renderFieldError(this.errors.smsCode)}
+        </div>
+        <div class="agreement-field">
+          <div class="agreement" part="agreement">
+            <input
+              class=${`checkbox${this.errors.agreement ? ' error' : ''}`}
+              type="checkbox"
+              aria-label="同意用户服务协议和隐私政策"
+              aria-invalid=${String(Boolean(this.errors.agreement))}
+              .checked=${this.agreed}
+              @change=${this.updateAgreement}
+              @blur=${this.validateAgreementField}
+            />
+            <span class="agreement-copy">
+              我已阅读并同意 ${this.renderAgreementLink('user', '《用户服务协议》')} 与
+              ${this.renderAgreementLink('privacy', '《隐私政策》')}
+            </span>
+          </div>
+          ${this.renderFieldError(this.errors.agreement)}
+        </div>
+        <button class="submit" part="submit-button" type="submit" ?disabled=${!canSubmit}>
+          ${this.loggingIn ? '登录中…' : '注册 / 登录'}
+        </button>
+        ${hasValidationErrors ? nothing : html`<div class="helper">未注册的手机号将自动创建账号</div>`}
+        ${this.renderGlobalMessage()}
+      </div>
+    `
+  }
+
+  private renderMobileField() {
+    return html`
+      <div class="field" part="field">
+        <div class=${`input-row${this.errors.mobile ? ' error' : ''}`}>
+          <span class="country-code">+86</span>
+          <span class="country-divider" aria-hidden="true"></span>
+          <input
+            id="uniplat-login-mobile"
+            class="input phone-input"
+            part="input"
+            type="tel"
+            inputmode="numeric"
+            autocomplete="tel"
+            maxlength="11"
+            placeholder="请输入手机号"
+            aria-label="手机号"
+            aria-invalid=${String(Boolean(this.errors.mobile))}
+            .value=${this.mobile}
+            @input=${this.updateMobile}
+            @blur=${this.validateMobileField}
+          />
+        </div>
+        ${this.renderFieldError(this.errors.mobile)}
+      </div>
+    `
+  }
+
+  private renderQrPanel() {
+    const overlay = this.renderQrOverlay()
+    return html`
+      <div class="method-panel qr-panel" part="method-panel qr-panel" role="tabpanel">
+        <div class="qr-frame" part="qr-code">
+          ${
+            this.qrImageUrl
+              ? html`<img class="qr-image" src=${this.qrImageUrl} alt="登录二维码" />`
+              : html`<span class="qr-placeholder"
+                  >${this.qrState === 'loading' ? '加载中…' : ''}</span
+                >`
+          }
+          ${overlay}
+        </div>
+        <div class="qr-heading">
+          ${this.qrState === 'scanned' ? '扫码成功，请在手机上确认' : '请使用微信扫描小程序码登录'}
+        </div>
+        <ol class="qr-steps">
+          <li class="qr-step">
+            <span class="step-number">1</span><span>打开微信右上角「扫一扫」</span>
+          </li>
+          <li class="qr-step">
+            <span class="step-number">2</span><span>扫描上方小程序码，未登录时先完成登录</span>
+          </li>
+          <li class="qr-step">
+            <span class="step-number">3</span><span>在小程序确认后，电脑端同步登录</span>
+          </li>
+        </ol>
+        <div class="qr-tip" part="qr-tip">
+          <span class="qr-tip-icon" aria-hidden="true"></span>
+          <span>扫码将直接打开「亲亲企服」小程序</span>
+        </div>
+        ${this.renderGlobalMessage()}
+      </div>
+    `
+  }
+
+  private renderQrOverlay() {
+    if (this.qrState === 'expired') {
+      return html`<button
+        class="qr-overlay retry"
+        part="qr-overlay"
+        type="button"
+        @click=${this.startQrChallenge}
+      >
+        二维码已失效<br />点击刷新
+      </button>`
+    }
+    if (this.qrState === 'error') {
+      return html`<button
+        class="qr-overlay retry"
+        part="qr-overlay"
+        type="button"
+        @click=${this.startQrChallenge}
+      >
+        加载失败<br />点击重试
+      </button>`
+    }
+    if (this.qrState === 'rejected') {
+      return html`<button
+        class="qr-overlay retry"
+        part="qr-overlay"
+        type="button"
+        @click=${this.startQrChallenge}
+      >
+        登录已取消<br />点击刷新
+      </button>`
+    }
+    if (this.qrState === 'scanned') {
+      return html`<div class="qr-overlay" part="qr-overlay">✓<br />等待手机确认</div>`
+    }
+    if (this.qrState === 'confirmed') {
+      return html`<div class="qr-overlay" part="qr-overlay">✓<br />登录成功</div>`
+    }
+    return nothing
+  }
+
+  private renderPasswordVisibilityIcon() {
+    return this.passwordVisible
+      ? html`<svg
+          aria-hidden="true"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z"></path>
+          <circle cx="12" cy="12" r="3"></circle>
+        </svg>`
+      : html`<svg
+          aria-hidden="true"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="m3 3 18 18"></path>
+          <path d="M10.6 10.7a2 2 0 0 0 2.7 2.7"></path>
+          <path d="M9.9 4.2A10.5 10.5 0 0 1 12 4c6.5 0 10 8 10 8a18.8 18.8 0 0 1-2.1 3.2"></path>
+          <path d="M6.6 6.6C3.6 8.6 2 12 2 12s3.5 8 10 8a9.8 9.8 0 0 0 4.1-.9"></path>
+        </svg>`
+  }
+
+  private renderFieldError(message: string) {
+    return message
+      ? html`<span class="error-text" part="field-error" role="alert">
+          <span class="error-dot" aria-hidden="true">!</span>${message}
+        </span>`
+      : nothing
+  }
+
+  private renderGlobalMessage() {
+    if (!this.errors.global && !this.statusMessage) return nothing
+    return html`<div
+      class=${`global-message${this.errors.global ? ' error' : ''}`}
+      part=${this.errors.global ? 'error' : 'status'}
+      role=${this.errors.global ? 'alert' : 'status'}
+      aria-live="polite"
+    >
+      ${this.errors.global || this.statusMessage}
+    </div>`
+  }
+
+  private renderAgreementLink(type: 'user' | 'privacy', label: string) {
+    return html`
+      <button
+        class="agreement-link"
+        part="agreement-link"
+        type="button"
+        @click=${() => this.openAgreement(type)}
+      >
+        ${label}
+      </button>
+    `
+  }
+
+  private readonly selectMethod = (method: UserLoginMethod): void => {
+    if (method === this.activeMethod || !this.isMethodAvailable(method)) return
+    if (this.activeMethod === 'qr-code') this.stopQrFlow()
+    if (this.activeMethod === 'password') {
+      this.password = ''
+      this.passwordVisible = false
+    }
+    this.activeMethod = method
+    this.errors = { ...EMPTY_ERRORS }
+    this.statusMessage = ''
+    this.startActiveMethod()
+  }
+
+  private startActiveMethod(): void {
+    if (this.activeMethod === 'qr-code') {
+      void this.startQrChallenge()
+    }
+  }
+
+  private isMethodAvailable(method: UserLoginMethod): boolean {
+    const transport = this.config?.transport
+    if (method === 'verification-code') return Boolean(transport)
+    if (method === 'password') return typeof transport?.loginWithPassword === 'function'
+    return (
+      typeof transport?.createQrChallenge === 'function' &&
+      typeof transport.pollQrChallenge === 'function'
+    )
+  }
+
+  private resolveInitialMethod(method: UserLoginMethod | undefined): UserLoginMethod {
+    return method && this.isMethodAvailable(method) ? method : 'verification-code'
+  }
+
+  private readonly updateMobile = (event: InputEvent): void => {
+    const input = event.currentTarget as HTMLInputElement
+    this.mobile = input.value.replace(/\D/g, '').slice(0, 11)
+    input.value = this.mobile
+    this.errors = { ...this.errors, mobile: '', global: '' }
+  }
+
+  private readonly updateSmsCode = (event: InputEvent): void => {
+    const input = event.currentTarget as HTMLInputElement
+    this.smsCode = input.value.replace(/\D/g, '').slice(0, 6)
+    input.value = this.smsCode
+    this.errors = { ...this.errors, smsCode: '', global: '' }
+  }
+
+  private readonly updatePassword = (event: InputEvent): void => {
+    this.password = (event.currentTarget as HTMLInputElement).value.slice(0, 128)
+    this.errors = { ...this.errors, password: '', global: '' }
+  }
+
+  private readonly updateAgreement = (event: Event): void => {
+    this.agreed = (event.currentTarget as HTMLInputElement).checked
+    this.errors = { ...this.errors, agreement: '', global: '' }
+  }
+
+  private readonly updateRememberSession = (event: Event): void => {
+    this.rememberSession = (event.currentTarget as HTMLInputElement).checked
+  }
+
+  private readonly togglePasswordVisibility = (): void => {
+    this.passwordVisible = !this.passwordVisible
+  }
+
+  private readonly validateMobileField = (): void => {
+    const mobile = this.mobileError()
+    this.errors = { ...this.errors, mobile }
+  }
+
+  private readonly validateSmsCodeField = (): void => {
+    const smsCode = this.smsCodeError()
+    this.errors = { ...this.errors, smsCode }
+  }
+
+  private readonly validatePasswordField = (): void => {
+    const password = this.passwordError()
+    this.errors = { ...this.errors, password }
+  }
+
+  private readonly validateAgreementField = (): void => {
+    const agreement = this.agreed ? '' : '请先阅读并同意服务协议'
+    this.errors = { ...this.errors, agreement }
+  }
+
+  private readonly sendSmsCode = async (): Promise<void> => {
+    const config = this.config
+    if (!config || this.sendingSms || this.loggingIn || this.countdown > 0) return
+    if (!this.validateMobile()) return
+
+    this.sendingSms = true
+    this.statusMessage = ''
+    try {
+      await config.transport.sendSmsCode({ mobile: this.mobile })
+      this.startCountdown(config.countdownSeconds)
+      this.statusMessage = '验证码已发送'
+      this.dispatchPublicEvent('sms-sent', {})
+    } catch (error) {
+      const message =
+        error instanceof UserLoginTransportError && error.code === 'SMS_SEND_TOO_FREQUENT'
+          ? '验证码发送频繁，请稍后重试。'
+          : '验证码发送失败，请检查后重试。'
+      this.handleError('SMS_SEND_FAILED', message, true)
+    } finally {
+      this.sendingSms = false
+    }
+  }
+
+  private readonly submitLogin = async (event: SubmitEvent): Promise<void> => {
+    event.preventDefault()
+    if (this.activeMethod === 'password') await this.submitPasswordLogin()
+    if (this.activeMethod === 'verification-code') await this.submitVerificationLogin()
+  }
+
+  private async submitPasswordLogin(): Promise<void> {
+    const config = this.config
+    if (
+      !config ||
+      typeof config.transport.loginWithPassword !== 'function' ||
+      this.loggingIn ||
+      this.sendingSms
+    ) {
+      return
+    }
+    if (!this.validatePasswordForm()) return
+
+    this.loggingIn = true
+    this.statusMessage = ''
+    try {
+      const result = await config.transport.loginWithPassword({
+        mobile: this.mobile,
+        password: this.password,
+        applicationName: config.applicationName,
+        rememberSession: this.rememberSession,
+      })
+      this.finishLogin(result)
+    } catch (error) {
+      const failure = passwordLoginFailure(error, config.applicationName)
+      this.handleError(failure.code, failure.message, failure.recoverable)
+    } finally {
+      this.loggingIn = false
+    }
+  }
+
+  private async submitVerificationLogin(): Promise<void> {
+    const config = this.config
+    if (!config || this.loggingIn || this.sendingSms) return
+    if (!this.validateVerificationForm()) return
+
+    this.loggingIn = true
+    this.statusMessage = ''
+    try {
+      const result = await config.transport.login({
+        mobile: this.mobile,
+        smsCode: this.smsCode,
+        applicationName: config.applicationName,
+      })
+      this.finishLogin(result)
+    } catch (error) {
+      if (
+        error instanceof UserLoginTransportError &&
+        error.code === 'SMS_CODE_INVALID_OR_EXPIRED'
+      ) {
+        this.handleSmsCodeError('验证码错误或已失效，请重新获取')
+      } else if (error instanceof UserLoginTransportError && error.code === 'ORG_ACCESS_DENIED') {
+        this.handleError(
+          'ORG_ACCESS_DENIED',
+          applicationAccessDeniedMessage(error, config.applicationName),
+          false,
+        )
+      } else {
+        this.handleError('LOGIN_FAILED', '登录失败，请检查手机验证码后重试。', true)
+      }
+    } finally {
+      this.loggingIn = false
+    }
+  }
+
+  private finishLogin(result: UserLoginSuccess): void {
+    const applicationName =
+      typeof result.applicationName === 'string' ? result.applicationName.trim() : ''
+    if (!applicationName || applicationName !== this.config?.applicationName) {
+      throw new Error('Invalid login result')
+    }
+    const isNewUser = result.isNewUser === true
+    this.clearCountdown()
+    this.clearOnboardingTimer()
+    this.password = ''
+    this.passwordVisible = false
+    this.errors = { ...EMPTY_ERRORS }
+    this.statusMessage = isNewUser ? '' : '登录成功'
+    this.registrationSucceeded = isNewUser
+    this.onboardingRequested = false
+    const detail: UserLoginSuccess = {
+      applicationName,
+      ...(typeof result.isNewUser === 'boolean' ? { isNewUser } : {}),
+    }
+    this.dispatchPublicEvent('login-success', detail)
+    if (isNewUser && this.isConnected) this.startOnboardingTimer()
+  }
+
+  private validateMobile(): boolean {
+    const mobile = this.mobileError()
+    this.errors = { ...this.errors, mobile, global: '' }
+    return !mobile
+  }
+
+  private validateVerificationForm(): boolean {
+    const validMobile = this.validateMobile()
+    const smsCode = this.smsCodeError()
+    const agreement = this.agreed ? '' : '请先阅读并同意服务协议'
+    this.errors = { ...this.errors, smsCode, agreement, global: '' }
+    return validMobile && !smsCode && !agreement
+  }
+
+  private validatePasswordForm(): boolean {
+    const mobile = this.mobileError()
+    const password = this.passwordError()
+    this.errors = { ...this.errors, mobile, password, global: '' }
+    return !mobile && !password
+  }
+
+  private mobileError(): string {
+    return this.isMobileValid() ? '' : '请输入正确的 11 位手机号'
+  }
+
+  private smsCodeError(): string {
+    return this.isSmsCodeValid() ? '' : '请输入正确的手机验证码'
+  }
+
+  private isMobileValid(): boolean {
+    return /^1[3-9]\d{9}$/.test(this.mobile)
+  }
+
+  private isSmsCodeValid(): boolean {
+    return /^\d{6}$/.test(this.smsCode)
+  }
+
+  private passwordError(): string {
+    return this.password.length >= 6 ? '' : '请输入至少 6 位密码'
+  }
+
+  private openAgreement(type: 'user' | 'privacy'): void {
+    const config = this.config
+    const proceed = this.dispatchPublicEvent('agreement-requested', { type }, true)
+    if (!proceed || !config) return
+    const url = type === 'user' ? config.userAgreementUrl : config.privacyAgreementUrl
+    if (url && typeof window !== 'undefined') window.open(url, '_blank', 'noopener,noreferrer')
+  }
+
+  private readonly openForgotPassword = (): void => {
+    const proceed = this.dispatchPublicEvent('forgot-password-requested', {}, true)
+    const url = this.config?.forgotPasswordUrl
+    if (proceed && url && typeof window !== 'undefined') {
+      window.open(url, '_blank', 'noopener,noreferrer')
+    }
+  }
+
+  private readonly requestOnboardingManually = (): void => {
+    this.requestOnboarding('manual')
+  }
+
+  private startOnboardingTimer(): void {
+    if (!this.registrationSucceeded || this.onboardingRequested) return
+    this.clearOnboardingTimer()
+    this.onboardingTimer = window.setTimeout(() => {
+      this.onboardingTimer = undefined
+      this.requestOnboarding('automatic')
+    }, 2_000)
+  }
+
+  private requestOnboarding(trigger: 'automatic' | 'manual'): void {
+    const applicationName = this.config?.applicationName
+    if (!this.registrationSucceeded || this.onboardingRequested || !applicationName) return
+    this.clearOnboardingTimer()
+    this.onboardingRequested = true
+    this.dispatchPublicEvent('onboarding-requested', { applicationName, trigger })
+  }
+
+  private readonly startQrChallenge = async (): Promise<void> => {
+    const config = this.config
+    if (
+      !config ||
+      typeof config.transport.createQrChallenge !== 'function' ||
+      typeof config.transport.pollQrChallenge !== 'function' ||
+      this.activeMethod !== 'qr-code'
+    ) {
+      return
+    }
+    this.stopQrFlow()
+    const generation = this.qrGeneration
+    this.qrState = 'loading'
+    this.qrImageUrl = ''
+    this.errors = { ...this.errors, global: '' }
+    this.statusMessage = ''
+    try {
+      const challenge = await config.transport.createQrChallenge({
+        applicationName: config.applicationName,
+      })
+      if (!this.isCurrentQr(generation)) return
+      const challengeId = normalizeQrChallengeId(challenge.challengeId)
+      const imageUrl = safeQrImageUrl(challenge.imageUrl)
+      const pollIntervalMs = normalizeQrPollInterval(
+        challenge.pollIntervalMs,
+        config.qrPollIntervalMs,
+      )
+      if (!challengeId || !imageUrl || imageUrl.includes(challengeId)) {
+        throw new Error('Invalid QR challenge')
+      }
+      this.qrChallengeId = challengeId
+      this.qrPollIntervalMs = pollIntervalMs
+      this.qrImageUrl = imageUrl
+      this.qrState = 'pending'
+      this.scheduleQrPoll(generation)
+    } catch (error) {
+      if (this.isCurrentQr(generation)) {
+        this.qrState = 'error'
+        const unavailable =
+          error instanceof UserLoginTransportError && error.code === 'QR_LOGIN_UNAVAILABLE'
+        const accessDenied =
+          error instanceof UserLoginTransportError && error.code === 'ORG_ACCESS_DENIED'
+        this.handleError(
+          unavailable
+            ? 'QR_LOGIN_UNAVAILABLE'
+            : accessDenied
+              ? 'ORG_ACCESS_DENIED'
+              : 'QR_LOAD_FAILED',
+          unavailable
+            ? '扫码登录服务暂不可用，请稍后重试。'
+            : accessDenied
+              ? applicationAccessDeniedMessage(error, config.applicationName)
+              : '登录二维码加载失败，请点击重试。',
+          !accessDenied,
+        )
+      }
+    }
+  }
+
+  private scheduleQrPoll(generation: number): void {
+    const interval = this.qrPollIntervalMs
+    if (!interval || !this.qrChallengeId || !this.isCurrentQr(generation)) return
+    this.qrPollTimer = window.setTimeout(() => void this.pollQrChallenge(generation), interval)
+  }
+
+  private async pollQrChallenge(generation: number): Promise<void> {
+    const config = this.config
+    const challengeId = this.qrChallengeId
+    if (
+      !config ||
+      typeof config.transport.pollQrChallenge !== 'function' ||
+      !challengeId ||
+      !this.isCurrentQr(generation)
+    ) {
+      return
+    }
+    this.qrPollTimer = undefined
+    try {
+      const result = await config.transport.pollQrChallenge(challengeId, config.applicationName)
+      if (!this.isCurrentQr(generation)) return
+      if (!['pending', 'scanned', 'confirmed', 'expired', 'rejected'].includes(result.status)) {
+        throw new Error('Invalid QR status')
+      }
+      this.qrState = result.status
+      if (result.status === 'confirmed') {
+        if (!result.result) throw new Error('Missing QR login result')
+        this.finishLogin(result.result)
+        this.finishQrFlow()
+        return
+      }
+      if (result.status === 'expired') {
+        this.finishQrFlow()
+        return
+      }
+      if (result.status === 'rejected') {
+        this.finishQrFlow()
+        this.handleError('QR_LOGIN_REJECTED', '已在手机上取消登录，请点击刷新。', true)
+        return
+      }
+      this.scheduleQrPoll(generation)
+    } catch (error) {
+      if (this.isCurrentQr(generation)) {
+        this.qrState = 'error'
+        this.finishQrFlow()
+        const unavailable =
+          error instanceof UserLoginTransportError && error.code === 'QR_LOGIN_UNAVAILABLE'
+        const accessDenied =
+          error instanceof UserLoginTransportError && error.code === 'ORG_ACCESS_DENIED'
+        this.handleError(
+          unavailable
+            ? 'QR_LOGIN_UNAVAILABLE'
+            : accessDenied
+              ? 'ORG_ACCESS_DENIED'
+              : 'QR_POLL_FAILED',
+          unavailable
+            ? '扫码登录服务暂不可用，请稍后重试。'
+            : accessDenied
+              ? applicationAccessDeniedMessage(error, config.applicationName)
+              : '扫码登录状态确认失败，请点击重试。',
+          !accessDenied,
+        )
+      }
+    }
+  }
+
+  private startCountdown(seconds: number): void {
+    this.clearCountdown()
+    this.countdown = seconds
+    this.countdownTimer = window.setInterval(() => {
+      this.countdown -= 1
+      if (this.countdown <= 0) this.clearCountdown()
+    }, 1_000)
+  }
+
+  private clearCountdown(): void {
+    if (this.countdownTimer !== undefined) {
+      window.clearInterval(this.countdownTimer)
+      this.countdownTimer = undefined
+    }
+    this.countdown = 0
+  }
+
+  private clearOnboardingTimer(): void {
+    if (this.onboardingTimer !== undefined) {
+      window.clearTimeout(this.onboardingTimer)
+      this.onboardingTimer = undefined
+    }
+  }
+
+  private stopQrFlow(): void {
+    this.qrGeneration += 1
+    this.finishQrFlow()
+  }
+
+  private finishQrFlow(): void {
+    if (this.qrPollTimer !== undefined) {
+      window.clearTimeout(this.qrPollTimer)
+      this.qrPollTimer = undefined
+    }
+    this.qrChallengeId = ''
+    this.qrPollIntervalMs = 0
+  }
+
+  private handleError(code: UserLoginErrorCode, message: string, recoverable: boolean): void {
+    this.errors = { ...this.errors, global: message }
+    this.statusMessage = ''
+    this.dispatchPublicEvent('error', { code, message, recoverable })
+  }
+
+  private handleSmsCodeError(message: string): void {
+    this.errors = { ...this.errors, smsCode: message, global: '' }
+    this.statusMessage = ''
+    this.dispatchPublicEvent('error', {
+      code: 'SMS_CODE_INVALID_OR_EXPIRED',
+      message,
+      recoverable: true,
+    })
+  }
+
+  private dispatchPublicEvent<K extends keyof UserLoginEventMap>(
+    type: K,
+    detail: UserLoginEventMap[K]['detail'],
+    cancelable = false,
+  ): boolean {
+    return this.dispatchEvent(
+      new CustomEvent(type, { detail, bubbles: true, composed: true, cancelable }),
+    )
+  }
+
+  private isCurrentQr(generation: number): boolean {
+    return this.isConnected && this.activeMethod === 'qr-code' && generation === this.qrGeneration
+  }
+}
+
+function safeNavigationUrl(rawValue: string | undefined, label: string): string {
+  if (rawValue === undefined) return ''
+  const value = rawValue.trim()
+  if (!value) return ''
+  const documentBase = typeof document === 'undefined' ? 'https://localhost/' : document.baseURI
+  let url: URL
+  try {
+    url = new URL(value, documentBase)
+  } catch {
+    throw new TypeError(`${label} is invalid`)
+  }
+  if (!['http:', 'https:'].includes(url.protocol) || url.username || url.password) {
+    throw new TypeError(`${label} must use HTTP(S) without user credentials`)
+  }
+  if (hasSensitiveUrlParameter(url)) {
+    throw new TypeError(`${label} must not contain authentication parameters`)
+  }
+  return url.href
+}
+
+function normalizeDisplayText(rawValue: string | undefined, maxLength: number): string {
+  return typeof rawValue === 'string' ? rawValue.trim().slice(0, maxLength) : ''
+}
+
+function normalizeLoginMethod(rawValue: UserLoginMethod | undefined): UserLoginMethod | undefined {
+  if (rawValue === undefined) return undefined
+  if (LOGIN_METHODS.some(({ method }) => method === rawValue)) return rawValue
+  throw new TypeError('user-login initialMethod is invalid')
+}
+
+function normalizeApplicationName(rawValue: string): string {
+  const value = typeof rawValue === 'string' ? rawValue.trim() : ''
+  if (!value || value.length > 128) {
+    throw new TypeError('user-login applicationName must contain 1 to 128 characters')
+  }
+  return value
+}
+
+function normalizeQrChallengeId(rawValue: unknown): string {
+  const value = typeof rawValue === 'string' ? rawValue.trim() : ''
+  return /^[A-Za-z0-9_-]{16,512}$/.test(value) ? value : ''
+}
+
+function normalizeQrPollInterval(rawValue: unknown, fallback: number): number {
+  return typeof rawValue === 'number' &&
+    Number.isInteger(rawValue) &&
+    rawValue >= 500 &&
+    rawValue <= 10_000
+    ? rawValue
+    : fallback
+}
+
+function passwordLoginFailure(
+  error: unknown,
+  applicationName: string,
+): {
+  code: UserLoginErrorCode
+  message: string
+  recoverable: boolean
+} {
+  if (error instanceof UserLoginTransportError) {
+    if (error.code === 'ACCOUNT_LOCKED') {
+      return {
+        code: 'ACCOUNT_LOCKED',
+        message: '账号暂时锁定，请稍后重试。',
+        recoverable: false,
+      }
+    }
+    if (error.code === 'ACCOUNT_DISABLED') {
+      return {
+        code: 'ACCOUNT_DISABLED',
+        message: '账号已停用，请联系管理员。',
+        recoverable: false,
+      }
+    }
+    if (error.code === 'ORG_ACCESS_DENIED') {
+      return {
+        code: 'ORG_ACCESS_DENIED',
+        message: applicationAccessDeniedMessage(error, applicationName),
+        recoverable: false,
+      }
+    }
+    if (error.code === 'PASSWORD_INVALID') {
+      return {
+        code: 'PASSWORD_INVALID',
+        message: '手机号或密码错误，请检查后重试。',
+        recoverable: true,
+      }
+    }
+  }
+  return {
+    code: 'LOGIN_FAILED',
+    message: '登录失败，请稍后重试。',
+    recoverable: true,
+  }
+}
+
+function applicationAccessDeniedMessage(
+  error: UserLoginTransportError,
+  applicationName: string,
+): string {
+  return error.displayMessage ?? `当前用户没有可用的${applicationName}应用实例`
+}
+
+function safeConfiguredImageUrl(rawValue: string | undefined): string {
+  if (rawValue === undefined || rawValue.trim() === '') return ''
+  const url = safeImageUrl(rawValue)
+  if (!url) throw new TypeError('Header icon URL is invalid')
+  return url
+}
+
+function safeQrImageUrl(rawValue: string): string {
+  const value = safeImageUrl(rawValue)
+  if (!value || value.startsWith('data:')) return value
+  const url = new URL(value)
+  return url.search || url.hash ? '' : value
+}
+
+function safeImageUrl(rawValue: string): string {
+  const value = typeof rawValue === 'string' ? rawValue.trim() : ''
+  if (!value) return ''
+  if (/^data:image\/(?:png|jpeg|gif|webp|svg\+xml)[;,]/i.test(value)) return value
+  const documentBase = typeof document === 'undefined' ? 'https://localhost/' : document.baseURI
+  try {
+    const url = new URL(value, documentBase)
+    return ['http:', 'https:'].includes(url.protocol) &&
+      !url.username &&
+      !url.password &&
+      !hasSensitiveUrlParameter(url)
+      ? url.href
+      : ''
+  } catch {
+    return ''
+  }
+}
+
+function hasSensitiveUrlParameter(url: URL): boolean {
+  const sensitiveNames = new Set([
+    'token',
+    'jwt',
+    'access_token',
+    'authorization',
+    'auth_code',
+    'ticket',
+    'challenge',
+    'challenge_id',
+    'login_token',
+    'qr_token',
+  ])
+  return Array.from(url.searchParams.keys()).some((name) => sensitiveNames.has(name.toLowerCase()))
+}