xtj-login-kit 0.3.1

package/dist/chunks/ui-C58EkuFV.js

@@ -0,0 +1,268 @@
+import { L as LOGIN_STATUS } from "./index-Cuix-7nW.js";
+const isMiniProgramMethod = (loginMethod) => loginMethod === "mini-program";
+const MINI_PROGRAM_LAUNCH_RECOVERY_MS = 2500;
+const ALERT_ICON = new URL("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%20class='icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-exclamation-circle'%3e%3cpath%20stroke='none'%20d='M0%200h24v24H0z'%20fill='none'%20/%3e%3cpath%20d='M3%2012a9%209%200%201%200%2018%200a9%209%200%201%200%20-18%200'%20/%3e%3cpath%20d='M12%209v4'%20/%3e%3cpath%20d='M12%2016v.01'%20/%3e%3c/svg%3e", import.meta.url).href;
+const LOADING_ICON = new URL("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%20class='icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-loader'%3e%3cpath%20stroke='none'%20d='M0%200h24v24H0z'%20fill='none'%20/%3e%3cpath%20d='M12%206l0%20-3'%20/%3e%3cpath%20d='M16.25%207.75l2.15%20-2.15'%20/%3e%3cpath%20d='M18%2012l3%200'%20/%3e%3cpath%20d='M16.25%2016.25l2.15%202.15'%20/%3e%3cpath%20d='M12%2018l0%203'%20/%3e%3cpath%20d='M7.75%2016.25l-2.15%202.15'%20/%3e%3cpath%20d='M6%2012l-3%200'%20/%3e%3cpath%20d='M7.75%207.75l-2.15%20-2.15'%20/%3e%3c/svg%3e", import.meta.url).href;
+const REFRESH_ICON = new URL("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%20class='icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-refresh'%3e%3cpath%20stroke='none'%20d='M0%200h24v24H0z'%20fill='none'%20/%3e%3cpath%20d='M20%2011a8.1%208.1%200%200%200%20-15.5%20-2m-.5%20-4v4h4'%20/%3e%3cpath%20d='M4%2013a8.1%208.1%200%200%200%2015.5%202m.5%204v-4h-4'%20/%3e%3c/svg%3e", import.meta.url).href;
+const SUCCESS_ICON = new URL("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%20class='icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-circle-check'%3e%3cpath%20stroke='none'%20d='M0%200h24v24H0z'%20fill='none'%20/%3e%3cpath%20d='M3%2012a9%209%200%201%200%2018%200a9%209%200%201%200%20-18%200'%20/%3e%3cpath%20d='M9%2012l2%202l4%20-4'%20/%3e%3c/svg%3e", import.meta.url).href;
+const WECHAT_ICON = new URL("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%20class='icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-brand-wechat'%3e%3cpath%20stroke='none'%20d='M0%200h24v24H0z'%20fill='none'%20/%3e%3cpath%20d='M16.5%2010c3.038%200%205.5%202.015%205.5%204.5c0%201.397%20-.778%202.645%20-2%203.47l0%202.03l-1.964%20-1.178a6.649%206.649%200%200%201%20-1.536%20.178c-3.038%200%20-5.5%20-2.015%20-5.5%20-4.5s2.462%20-4.5%205.5%20-4.5'%20/%3e%3cpath%20d='M11.197%2015.698c-.69%20.196%20-1.43%20.302%20-2.197%20.302a8.008%208.008%200%200%201%20-2.612%20-.432l-2.388%201.432v-2.801c-1.237%20-1.082%20-2%20-2.564%20-2%20-4.199c0%20-3.314%203.134%20-6%207%20-6c3.782%200%206.863%202.57%207%205.785l0%20.233'%20/%3e%3cpath%20d='M10%208h.01'%20/%3e%3cpath%20d='M7%208h.01'%20/%3e%3cpath%20d='M15%2014h.01'%20/%3e%3cpath%20d='M18%2014h.01'%20/%3e%3c/svg%3e", import.meta.url).href;
+const LOGIN_MOTION_STYLES = `
+@keyframes xtj-login-qr-spin {
+  from { transform: translate(-50%, -50%) rotate(0deg); }
+  to { transform: translate(-50%, -50%) rotate(360deg); }
+}
+
+@keyframes xtj-login-mini-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.xtj-login__state-icon--loading {
+  animation: xtj-login-qr-spin 1s linear infinite;
+  will-change: transform;
+}
+
+.xtj-login__mini-icon--loading {
+  animation: xtj-login-mini-spin 1s linear infinite;
+  will-change: transform;
+}
+
+.xtj-login__state-icon--refresh {
+  transition: transform 120ms ease-out;
+}
+
+.xtj-login__state--action:active .xtj-login__state-icon--refresh {
+  transform: translate(-50%, -50%) scale(0.86) !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .xtj-login__state-icon--loading,
+  .xtj-login__mini-icon--loading {
+    animation: none;
+  }
+
+  .xtj-login__state-icon--refresh {
+    transition: none;
+  }
+}
+`;
+const QR_LOGIN_STYLE = Object.freeze({
+  boxSizing: "border-box",
+  position: "relative",
+  display: "block",
+  width: "min(100%, var(--xtj-login-size, 232px))",
+  aspectRatio: "1 / 1",
+  overflow: "hidden",
+  borderRadius: "6px",
+  background: "#ffffff"
+});
+const MINI_PROGRAM_LOGIN_STYLE = Object.freeze({
+  boxSizing: "border-box",
+  display: "inline-flex",
+  width: "fit-content",
+  maxWidth: "100%"
+});
+const getLoginRootStyle = (loginMethod) => isMiniProgramMethod(loginMethod) ? MINI_PROGRAM_LOGIN_STYLE : QR_LOGIN_STYLE;
+const qrContentStyle = Object.freeze({
+  position: "absolute",
+  inset: "0",
+  overflow: "hidden",
+  background: "#ffffff"
+});
+const QR_IMAGE_STYLE = Object.freeze({
+  boxSizing: "border-box",
+  position: "absolute",
+  inset: "0",
+  display: "block",
+  width: "100%",
+  height: "100%",
+  padding: "10px",
+  background: "#ffffff",
+  objectFit: "contain",
+  transition: "filter 160ms ease, opacity 160ms ease, transform 160ms ease"
+});
+const getQrImageStyle = (obscured) => ({
+  ...QR_IMAGE_STYLE,
+  filter: obscured ? "blur(6px)" : "none",
+  opacity: obscured ? 0.5 : 1,
+  transform: obscured ? "scale(1.04)" : "scale(1)"
+});
+const qrOverlayStyle = Object.freeze({
+  boxSizing: "border-box",
+  position: "absolute",
+  inset: "0",
+  width: "100%",
+  height: "100%",
+  margin: "0",
+  padding: "24px",
+  border: "0",
+  background: "rgba(255, 255, 255, 0.68)",
+  color: "#344054",
+  textAlign: "center"
+});
+const qrActionStyle = Object.freeze({
+  ...qrOverlayStyle,
+  appearance: "none",
+  borderRadius: "0",
+  font: "inherit",
+  cursor: "pointer",
+  touchAction: "manipulation",
+  WebkitTapHighlightColor: "transparent"
+});
+const qrIconStyle = Object.freeze({
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  display: "block",
+  width: "36px",
+  height: "36px",
+  transform: "translate(-50%, -50%)"
+});
+const getQrLabelStyle = (hasIcon) => ({
+  position: "absolute",
+  top: hasIcon ? "calc(50% + 29px)" : "50%",
+  left: "50%",
+  width: "160px",
+  maxWidth: "calc(100% - 32px)",
+  transform: hasIcon ? "translateX(-50%)" : "translate(-50%, -50%)",
+  color: "#667085",
+  fontSize: "13px",
+  fontWeight: "400",
+  lineHeight: "1.5",
+  textAlign: "center"
+});
+const getQrPresentation = (status, active = true) => {
+  if (!active) return { icon: null, label: "登录未开始" };
+  if (status.kind === LOGIN_STATUS.QR_READY && !status.recovering) return null;
+  if (status.kind === LOGIN_STATUS.SCANNED) {
+    return {
+      icon: SUCCESS_ICON,
+      label: "请在手机上确认"
+    };
+  }
+  if (status.kind === LOGIN_STATUS.AUTHENTICATED) {
+    return { icon: SUCCESS_ICON, label: "登录成功" };
+  }
+  if (status.kind === LOGIN_STATUS.EXPIRED) {
+    return { icon: REFRESH_ICON, iconState: "refresh", label: "二维码已过期", action: "retry" };
+  }
+  if (status.kind === LOGIN_STATUS.ERROR) {
+    return {
+      icon: ALERT_ICON,
+      label: status.retryable === false ? "登录失败" : "登录失败，点击重试",
+      action: status.retryable === false ? null : "retry"
+    };
+  }
+  if (status.kind === LOGIN_STATUS.CANCELLED) {
+    return { icon: ALERT_ICON, label: "登录已取消" };
+  }
+  if (status.kind === LOGIN_STATUS.QR_READY) {
+    return { icon: LOADING_ICON, iconState: "loading", label: "网络波动，正在重试" };
+  }
+  return { icon: LOADING_ICON, iconState: "loading", label: "正在准备二维码" };
+};
+const MINI_BUTTON_STYLE = Object.freeze({
+  boxSizing: "border-box",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "7px",
+  width: "184px",
+  maxWidth: "100%",
+  height: "40px",
+  margin: "0",
+  padding: "0 16px",
+  appearance: "none",
+  border: "1px solid transparent",
+  borderRadius: "6px",
+  font: "inherit",
+  fontSize: "14px",
+  fontWeight: "400",
+  lineHeight: "1",
+  whiteSpace: "nowrap",
+  opacity: "1",
+  touchAction: "manipulation",
+  transition: "background-color 160ms ease, border-color 160ms ease",
+  WebkitTapHighlightColor: "transparent"
+});
+const MINI_BUTTON_TONES = Object.freeze({
+  primary: { background: "var(--xtj-login-mini-program, #07c160)", borderColor: "#07ad56", color: "#ffffff" },
+  success: { background: "var(--xtj-login-success, #087443)", borderColor: "#07663b", color: "#ffffff" },
+  danger: { background: "var(--xtj-login-danger, #b42318)", borderColor: "#991f15", color: "#ffffff" },
+  muted: { background: "#f2f4f7", borderColor: "#e4e7ec", color: "#667085" }
+});
+const getMiniProgramButtonStyle = (presentation) => ({
+  ...MINI_BUTTON_STYLE,
+  ...MINI_BUTTON_TONES[presentation.tone],
+  cursor: presentation.disabled ? "default" : "pointer"
+});
+const getMiniProgramIconStyle = (presentation) => ({
+  display: "block",
+  flex: "0 0 auto",
+  width: "19px",
+  height: "19px",
+  opacity: presentation.tone === "muted" ? 0.62 : 1,
+  filter: presentation.tone === "muted" ? "none" : "brightness(0) invert(1)"
+});
+const getMiniProgramPresentation = (status, phase = "idle", active = true) => {
+  if (!active) {
+    return { icon: WECHAT_ICON, label: "登录未开始", tone: "muted", disabled: true };
+  }
+  if (status.kind === LOGIN_STATUS.SCANNED) {
+    return {
+      icon: LOADING_ICON,
+      iconState: "loading",
+      label: "等待小程序确认",
+      tone: "muted",
+      disabled: true
+    };
+  }
+  if (status.kind === LOGIN_STATUS.AUTHENTICATED) {
+    return { icon: SUCCESS_ICON, label: "登录成功", tone: "success", disabled: true };
+  }
+  if (status.kind === LOGIN_STATUS.EXPIRED) {
+    return { icon: REFRESH_ICON, label: "重新获取登录入口", tone: "primary", disabled: false, action: "retry" };
+  }
+  if (status.kind === LOGIN_STATUS.ERROR) {
+    const retryable = status.retryable !== false;
+    return {
+      icon: ALERT_ICON,
+      label: retryable ? "登录失败，重新获取" : "登录失败",
+      tone: "danger",
+      disabled: !retryable,
+      action: retryable ? "retry" : null
+    };
+  }
+  if (status.kind === LOGIN_STATUS.CANCELLED) {
+    return { icon: ALERT_ICON, label: "登录已取消", tone: "muted", disabled: true };
+  }
+  if (phase === "launching") {
+    return { icon: LOADING_ICON, iconState: "loading", label: "正在拉起微信", tone: "muted", disabled: true };
+  }
+  if (phase === "awaiting") {
+    return { icon: LOADING_ICON, iconState: "loading", label: "等待登录确认", tone: "muted", disabled: true };
+  }
+  if (phase === "retry-launch") {
+    return { icon: WECHAT_ICON, label: "重新打开微信", tone: "primary", disabled: false, action: "open" };
+  }
+  if (status.kind === LOGIN_STATUS.QR_READY) {
+    return { icon: WECHAT_ICON, label: "微信登录", tone: "primary", disabled: false, action: "open" };
+  }
+  return { icon: LOADING_ICON, iconState: "loading", label: "正在准备登录", tone: "muted", disabled: true };
+};
+export {
+  LOGIN_MOTION_STYLES as L,
+  MINI_PROGRAM_LAUNCH_RECOVERY_MS as M,
+  getMiniProgramPresentation as a,
+  getMiniProgramIconStyle as b,
+  getMiniProgramButtonStyle as c,
+  getQrPresentation as d,
+  getQrImageStyle as e,
+  getQrLabelStyle as f,
+  getLoginRootStyle as g,
+  qrActionStyle as h,
+  isMiniProgramMethod as i,
+  qrOverlayStyle as j,
+  qrContentStyle as k,
+  qrIconStyle as q
+};

package/dist/index.d.ts

@@ -0,0 +1,101 @@
+export type LoginStatusKind =
+  | 'idle'
+  | 'loading'
+  | 'qr-ready'
+  | 'scanned'
+  | 'authenticated'
+  | 'expired'
+  | 'cancelled'
+  | 'error'
+
+export type AuthLoginData = Record<string, unknown> & { token: string }
+export type LoginResult = {
+  login: AuthLoginData
+}
+
+export type LoginErrorCode =
+  | 'INVALID_APP_CODE'
+  | 'INVALID_GATEWAY_CONFIG'
+  | 'NETWORK_ERROR'
+  | 'GATEWAY_ERROR'
+  | 'UNSUPPORTED_ENVIRONMENT'
+  | 'TIMEOUT'
+  | 'DUPLICATE_INSTANCE'
+  | 'GENERIC_ERROR'
+
+export type LoginError = {
+  code: LoginErrorCode
+  stage: 'init' | 'poll' | 'mini-program'
+  message: string
+  retryable: boolean
+}
+
+export class AuthError extends Error {
+  readonly name: 'AuthError'
+  readonly code: string
+  readonly details?: unknown
+  constructor(code: string, message: string, details?: unknown)
+}
+
+export type LoginStatus = {
+  kind: LoginStatusKind
+  platform: 'web' | 'mobile-web' | string
+  message?: string
+  stage?: 'init' | 'poll' | 'mini-program'
+  code?: LoginErrorCode
+  loginImg?: string
+  retryable?: boolean
+  recovering?: boolean
+}
+
+export type LoginGatewayPaths = {
+  genLoginId: string
+  checkLogin: string
+  miniProgramScheme?: string
+}
+
+export type LoginGatewayOptions = {
+  baseUrl: string
+  codeType?: string
+  schemeTarget?: string
+  schemeMiniPath?: string
+  requestTimeoutMs?: number
+  fetchImpl?: typeof fetch
+  paths: LoginGatewayPaths
+}
+
+export type LoginHandle = {
+  readonly element: HTMLDivElement | null
+  retry(): Promise<LoginResult | null>
+  cancel(reason?: string): void
+}
+
+export type LoginSessionOptions = {
+  gatewayOptions: LoginGatewayOptions
+  appCode: string | number
+  platform?: 'web' | 'mobile-web' | string
+  loginMethod?: 'qr' | 'mini-program' | string
+  pollIntervalMs?: number
+  requestTimeoutMs?: number
+  timeoutMs?: number
+  debug?: boolean
+  windowRef?: Window
+  documentRef?: Document
+  onStatus?: (status: LoginStatus) => void
+  onSuccess?: (result: LoginResult) => void
+  onError?: (error: LoginError) => void
+}
+
+export class LoginSession {
+  constructor(options: LoginSessionOptions)
+  mount(root: HTMLElement | null): this
+  unmount(): void
+  start(): Promise<LoginResult | null>
+  retry(): Promise<LoginResult | null>
+  cancel(reason?: string): void
+  openMiniProgram(): Promise<string>
+  snapshot(): LoginStatus
+}
+
+export function createLoginSession(options: LoginSessionOptions): LoginSession
+export const LOGIN_STATUS: Readonly<Record<'IDLE' | 'LOADING' | 'QR_READY' | 'SCANNED' | 'AUTHENTICATED' | 'EXPIRED' | 'CANCELLED' | 'ERROR', LoginStatusKind>>

package/dist/index.js

@@ -0,0 +1,7 @@
+import { A, L, d, c } from "./chunks/index-Cuix-7nW.js";
+export {
+  A as AuthError,
+  L as LOGIN_STATUS,
+  d as LoginSession,
+  c as createLoginSession
+};

package/dist/react.d.ts

@@ -0,0 +1,25 @@
+import type { CSSProperties } from 'react'
+import type { LoginError, LoginGatewayOptions, LoginHandle, LoginResult, LoginStatus } from './index.js'
+
+export type { LoginHandle } from './index.js'
+
+export type LoginProps = {
+  appCode: string | number
+  active?: boolean
+  className?: string
+  style?: CSSProperties
+  platform?: 'web' | 'mobile-web' | string
+  loginMethod?: 'qr' | 'mini-program' | string
+  pollIntervalMs?: number
+  requestTimeoutMs?: number
+  timeoutMs?: number
+  debug?: boolean
+  gatewayOptions: LoginGatewayOptions
+  windowRef?: Window
+  documentRef?: Document
+  onSuccess?: (result: LoginResult) => void
+  onError?: (error: LoginError) => void
+  onStatus?: (status: LoginStatus) => void
+}
+
+export const Login: import('react').ForwardRefExoticComponent<LoginProps & import('react').RefAttributes<LoginHandle>>