@authing/react-ui-components 3.1.39-beta.0 → 3.1.39-beta.1

package/lib/index.d.ts

@@ -1575,6 +1575,329 @@ declare module '@authing/react-ui-components/components/Guard/config' {
   }
   export const getDefaultGuardLocalConfig: () => GuardLocalConfig;
 
+}
+declare module '@authing/react-ui-components/components/Guard/core/hooks/useMultipleAccounts' {
+  /**
+   * 整体的思路：
+   * 在所有登录方式中，当进行登录时保存登录方式（FE侧自定义）
+   * 之后在登录成功（onLogin）中，触发store的方法保存用户信息以及对应的登录方式进入localStorage。
+   * 当用户再次打开页面时，拿出数据进行对比。（主要对比 LoginWay ），TODO: 这里的代码主要显得乱的原因是因为枚举的不正当使用。（主要要和Server端进行互相映射，后续维护时可优化）
+   *
+   * 核心思路：登录成功时，保存的FE侧自定义 LoginWay
+   * 再次打开页面时，初始化时先根据 FE 自定义的 LoginWay 跳转到不同的 tab 下（way）下使用 account 进行回填。TODO: 这里也可优化，应该在登录成功时候就进行 LoginWay 的格式化，而非转来转去。（但是这样无法直观的体现是哪种方式进行登录）
+  */
+  import { SelectOptions } from '@authing/react-ui-components/components/Login/multipleAccounts/panel';
+  export const QR_CODE_WAY: LoginWay[];
+  /**
+   * 登录时所有支持的登录列表(前端定义列表)
+   * 这里稍微有点乱 因为Login中的登录方式和这里的不匹配，暂时放在了一起
+   */
+  export type LoginWay = 'email' | 'phone' | 'password' | 'phone-code' | 'email-code' | 'social' | 'wechat-miniprogram-qrcode' | 'wechatmp-qrcode' | 'app-qrcode' | 'ad' | 'ldap' | 'ldap-password' | 'ldap-email' | 'ldap-phone';
+  /**
+   * when： 多账号页面跳转进入登录页面
+   * 携带的回填数据信息
+   */
+  export interface BackFillMultipleState extends Omit<User, 'id' | 'name' | 'nickname' | 'username' | 'phone' | 'email' | 'photo' | '_updateTime'> {
+      /**
+       * 回填的账号名称 邮箱/用户名/手机
+        */
+      account: string;
+  }
+  /**
+   * Store instance
+   */
+  export type StoreInstance = ReturnType<MultipleAccount['getStore']>;
+  /**
+   * 当前 userId 对应的类型
+   */
+  export interface CurrentStore {
+      [id: string]: User;
+  }
+  export interface User {
+      /**
+       * userId
+       */
+      id: string;
+      /**
+       * Tab 栏状态
+       */
+      tab: 'input' | 'qrcode';
+      /**
+       * 登录方式
+       */
+      way: LoginWay;
+      /**
+       * 姓名
+       */
+      name?: string | null;
+      /**
+       * 昵称
+       */
+      nickname?: string | null;
+      /**
+       * 用户名
+       */
+      username?: string | null;
+      /**
+       * 手机号
+       */
+      phone?: string | null;
+      /**
+       * 邮箱
+       */
+      email?: string | null;
+      /**
+       * 头像
+       */
+      photo?: string | null;
+      /**
+       * qrCodeId 对应的ID
+       */
+      qrCodeId?: string;
+      /**
+       * 国际化短信区号
+       */
+      phoneCountryCode?: string;
+      /**
+       * 国际化短信选择框回填
+       */
+      areaCode?: string;
+      /**
+       * 登录时间
+       */
+      _updateTime?: string;
+  }
+  class MultipleAccount {
+      /**
+       * 原始的登录账号
+      */
+      private originAccount;
+      private originWay;
+      /**
+       * 原始的 localStore 值
+       */
+      private originStore;
+      /**
+       * 当前 AppId Store
+       */
+      private currentStore;
+      /**
+       * 单账号直接回填
+       */
+      private firstBackFillData?;
+      /**
+      * server 返回支持的登录方式
+      */
+      private serverSideLoginMethods;
+      /**
+       * 是否显示多账号登录页面
+       * true 存在
+       */
+      private memberState;
+      /**
+     * 二维码登录时的ID
+     */
+      private qrCodeId?;
+      /**
+     * 国际化短信前缀 区号
+     */
+      private phoneCountryCode?;
+      /**
+    * 国际化短信前缀 选中地区编号
+    */
+      private areaCode?;
+      private tabStatus?;
+      /**
+       * 当前登录二级状态
+       */
+      private loginWay?;
+      private appId;
+      /**
+       * 是否开启国际化短信
+       */
+      private isInternationSms?;
+      constructor();
+      /**
+       * 页面首次加载时初始化 Store
+       * 从 LocalStore 中拿值 放到这里来
+       */
+      private initStore;
+      /**
+       * 初始化记住账号相关信息
+       * @param normalCount
+       * @returns
+       */
+      private initMemberState;
+      /**
+       * 获取当前ID下有效账号个数
+       * @returns qrCount 有效的二维码登录个数 normalCount 有效的账号登录方式
+       */
+      private memberStateCount;
+      /**
+       * 初始化第一次的数据 TODO: 逻辑有点脏 待整理
+       */
+      private initBackfillData;
+      /**
+       * 根据前端存储的登录方式返回后端映射方式
+       * @param front
+       */
+      private getServerLoginMethodByFront;
+      /**
+       * 当前 Store  DONE
+       */
+      private getCurrentStore;
+      /**
+       * 国际化短信过滤
+       * true 表示通过 需要保留
+       * false 表示不通过 需要过滤
+       */
+      private validateInternationSms;
+      /**
+       * 校验有效的登录方式账号
+       * @param user
+       * @param serverSideLoginMethods
+       * @returns
+       */
+      private validateMethod;
+      /**
+       *
+       * @param tab 一级Tab状态
+       * @param way 二级Tab状态
+       * @param id 二维码登录时 记录对应的二维码 ID
+       */
+      private setLoginWay;
+      /**
+       * 设置/更新 store 内的用户信息
+       */
+      private setUserInfo;
+      /**
+       * 持久化保存
+       */
+      private saveStore;
+      /**
+       * 根据登录的 account 判断本次登录的方式
+       * @param account 登录输入的账号
+       * @param param1 登录成功返回的相关信息 用户名/手机号/邮箱
+       * @returns
+       */
+      private setLoginWayByHttpData;
+      /**
+     * 根据登录的 account 判断本次LDAP登录方式
+     * @param account 登录输入的账号
+     * @param param1 登录成功返回的相关信息 用户名/手机号/邮箱
+     * @returns
+     */
+      private setLoginWayByLDAPData;
+      /**
+       * 根据用户 ID 删除 localStorage 中当前用户 ID
+       */
+      private delUserById;
+      /**
+       * 获得多账号登录页面的所有用户列表
+       * @param excludeWays
+       */
+      private getMemoUser;
+      /**
+       * 根据 id 获得当前已登录的用户信息
+       * @param userId
+       * @returns User / undefined
+       */
+      private getMemoSingleUser;
+      /**
+       * 该方法仅仅需要回填账号的登录方式，其他都不计入
+       * 当用户名/手机号/邮箱/AD/LDAP 相同时，根据登录顺序匹配不同的账号
+       * 根据记住的用户登录方式获取对应的登录账户名
+       * @param way
+       * @param user
+       * @returns
+       */
+      private getAccountByWay;
+      private _mappingUser;
+      /**
+       * 外部暴露方法
+       */
+      getStore: () => {
+          initStore: (appId: string, options: {
+              serverSideLoginMethods: LoginWay[];
+              isInternationSms: boolean;
+          }) => void;
+          setLoginWay: (tab: 'input' | 'qrcode', way: LoginWay, id?: string | undefined, internation?: {
+              phoneCountryCode: string;
+              areaCode: string;
+          } | undefined) => void;
+          setUserInfo: (user: Pick<User & {
+              id: string;
+          }, "email" | "username" | "phone" | "id" | "nickname" | "photo" | "name" | "_updateTime" | "qrCodeId" | "areaCode">) => void;
+          setLoginWayByHttpData: (account: string, data: {
+              username?: string | undefined;
+              phone?: string | undefined;
+              email?: string | undefined;
+          }) => void;
+          setLoginWayByLDAPData: (account: string, data: {
+              name?: string | undefined;
+              phone?: string | undefined;
+              email?: string | undefined;
+          }) => void;
+          getMemoUser: (excludeWays?: LoginWay[]) => SelectOptions[];
+          getMemoSingleUser: (id: string) => {
+              way: LoginWay;
+              account: string;
+          } | undefined;
+          delUserById: (id: string) => string;
+          getMemberState: () => boolean;
+          getFirstBackFillData: () => BackFillMultipleState | undefined;
+          getOriginAccount: () => string;
+          getOriginWay: () => string;
+      };
+  }
+  /**
+   * MultipleAccounts 相关 Hook
+   * Finally Config 类型过滤
+   */
+  const useMultipleAccounts: ({ appId, finallyConfig }: {
+      appId?: string | undefined;
+      finallyConfig?: any;
+  }) => {
+      instance: {
+          initStore: (appId: string, options: {
+              serverSideLoginMethods: LoginWay[];
+              isInternationSms: boolean;
+          }) => void;
+          setLoginWay: (tab: 'input' | 'qrcode', way: LoginWay, id?: string | undefined, internation?: {
+              phoneCountryCode: string;
+              areaCode: string;
+          } | undefined) => void;
+          setUserInfo: (user: Pick<User & {
+              id: string;
+          }, "email" | "username" | "phone" | "id" | "nickname" | "photo" | "name" | "_updateTime" | "qrCodeId" | "areaCode">) => void;
+          setLoginWayByHttpData: (account: string, data: {
+              username?: string | undefined;
+              phone?: string | undefined;
+              email?: string | undefined;
+          }) => void;
+          setLoginWayByLDAPData: (account: string, data: {
+              name?: string | undefined;
+              phone?: string | undefined;
+              email?: string | undefined;
+          }) => void;
+          getMemoUser: (excludeWays?: LoginWay[]) => SelectOptions[];
+          getMemoSingleUser: (id: string) => {
+              way: LoginWay;
+              account: string;
+          } | undefined;
+          delUserById: (id: string) => string;
+          getMemberState: () => boolean;
+          getFirstBackFillData: () => BackFillMultipleState | undefined;
+          getOriginAccount: () => string;
+          getOriginWay: () => string;
+      } | undefined;
+      isMultipleAccount: boolean;
+      referMultipleState: (type: 'login' | 'multiple', data?: BackFillMultipleState | undefined) => void;
+      multipleAccountData: BackFillMultipleState | undefined;
+      clearBackFillData: () => void;
+  };
+  export default useMultipleAccounts;
+
 }
 declare module '@authing/react-ui-components/components/Guard/core/index' {
   /// <reference types="react" />
@@ -1634,7 +1957,39 @@ declare module '@authing/react-ui-components/components/Guard/event' {
   export interface GuardEvents extends LoginEvents, RegisterEvents, CompleteInfoEvents, ForgetPasswordEvents, IdentityBindingEvents, IdentityBindingAskEvents {
       onBeforeChangeModule?: (key: GuardModuleType, initData?: any) => boolean | Promise<boolean>;
   }
-  export const guardEventsFilter: (props: any, openEventsMapping?: boolean | undefined) => GuardEvents;
+  export const guardEventsFilter: (props: any, multipleInstance?: {
+      initStore: (appId: string, options: {
+          serverSideLoginMethods: import("@authing/react-ui-components/components/Guard/core/hooks/useMultipleAccounts").LoginWay[];
+          isInternationSms: boolean;
+      }) => void;
+      setLoginWay: (tab: "input" | "qrcode", way: import("@authing/react-ui-components/components/Guard/core/hooks/useMultipleAccounts").LoginWay, id?: string | undefined, internation?: {
+          phoneCountryCode: string;
+          areaCode: string;
+      } | undefined) => void;
+      setUserInfo: (user: Pick<import("@authing/react-ui-components/components/Guard/core/hooks/useMultipleAccounts").User & {
+          id: string;
+      }, "email" | "username" | "phone" | "id" | "nickname" | "photo" | "name" | "_updateTime" | "qrCodeId" | "areaCode">) => void;
+      setLoginWayByHttpData: (account: string, data: {
+          username?: string | undefined;
+          phone?: string | undefined;
+          email?: string | undefined;
+      }) => void;
+      setLoginWayByLDAPData: (account: string, data: {
+          name?: string | undefined;
+          phone?: string | undefined;
+          email?: string | undefined;
+      }) => void;
+      getMemoUser: (excludeWays?: import("@authing/react-ui-components/components/Guard/core/hooks/useMultipleAccounts").LoginWay[]) => import("../Login/multipleAccounts/panel").SelectOptions[];
+      getMemoSingleUser: (id: string) => {
+          way: import("@authing/react-ui-components/components/Guard/core/hooks/useMultipleAccounts").LoginWay;
+          account: string;
+      } | undefined;
+      delUserById: (id: string) => string;
+      getMemberState: () => boolean;
+      getFirstBackFillData: () => import("@authing/react-ui-components/components/Guard/core/hooks/useMultipleAccounts").BackFillMultipleState | undefined;
+      getOriginAccount: () => string;
+      getOriginWay: () => string;
+  } | undefined, openEventsMapping?: boolean | undefined) => GuardEvents;
   export const guardEventsHijacking: (events: GuardEvents, openEventsMapping?: boolean | undefined) => GuardEvents;
   export const GuardEventsCamelToKebabMapping: {
       readonly onLoad: "load";
@@ -1926,6 +2281,7 @@ declare module '@authing/react-ui-components/components/Login/codemap' {
 declare module '@authing/react-ui-components/components/Login/core/withAD' {
   /// <reference types="react" />
   import { Agreement } from '@authing/react-ui-components/components/AuthingGuard/api/index';
+  import { BackFillMultipleState, StoreInstance } from '@authing/react-ui-components/components/Guard/core/hooks/useMultipleAccounts';
   interface LoginWithADProps {
       publicKey: string;
       autoRegister?: boolean;
@@ -1933,6 +2289,14 @@ declare module '@authing/react-ui-components/components/Login/core/withAD' {
       onLoginFailed: any;
       onBeforeLogin: any;
       agreements: Agreement[];
+      /**
+       * 回填的数据
+       */
+      backfillData?: BackFillMultipleState;
+      /**
+       * 根据输入的账号 & 返回获得对应的登录方法
+       */
+      multipleInstance?: StoreInstance;
   }
   export const LoginWithAD: (props: LoginWithADProps) => JSX.Element;
   export {};
@@ -1940,17 +2304,21 @@ declare module '@authing/react-ui-components/components/Login/core/withAD' {
 }
 declare module '@authing/react-ui-components/components/Login/core/withAppQrcode' {
   /// <reference types="react" />
+  import { StoreInstance } from '@authing/react-ui-components/components/Guard/core/hooks/useMultipleAccounts';
   interface LoginWithAppQrcodeProps {
       onLoginSuccess: any;
       canLoop: boolean;
+      qrCodeScanOptions: any;
+      multipleInstance?: StoreInstance;
   }
-  export const LoginWithAppQrcode: (props: LoginWithAppQrcodeProps) => JSX.Element | null;
+  export const LoginWithAppQrcode: (props: LoginWithAppQrcodeProps) => JSX.Element;
   export {};
 
 }
 declare module '@authing/react-ui-components/components/Login/core/withLDAP' {
   /// <reference types="react" />
   import { Agreement } from '@authing/react-ui-components/components/AuthingGuard/api/index';
+  import { BackFillMultipleState, StoreInstance } from '@authing/react-ui-components/components/Guard/core/hooks/useMultipleAccounts';
   interface LoginWithLDAPProps {
       publicKey: string;
       autoRegister?: boolean;
@@ -1959,6 +2327,14 @@ declare module '@authing/react-ui-components/components/Login/core/withLDAP' {
       onLoginFailed: any;
       onBeforeLogin: any;
       agreements: Agreement[];
+      /**
+       * 根据输入的账号 & 返回获得对应的登录方法
+       */
+      multipleInstance?: StoreInstance;
+      /**
+       * 多账号回填的数据
+       */
+      backfillData?: BackFillMultipleState;
   }
   export const LoginWithLDAP: (props: LoginWithLDAPProps) => JSX.Element;
   export {};
@@ -1999,6 +2375,7 @@ declare module '@authing/react-ui-components/components/Login/core/withPassword/
   import { Agreement, PasswordLoginMethods } from '@authing/react-ui-components/components/AuthingGuard/api/index';
   import { LoginMethods } from '@authing/react-ui-components/components/index';
   import { AuthingResponse } from '@authing/react-ui-components/components/_utils/http';
+  import { BackFillMultipleState, StoreInstance } from '@authing/react-ui-components/components/Guard/core/hooks/useMultipleAccounts';
   interface LoginWithPasswordProps {
       publicKey: string;
       autoRegister?: boolean;
@@ -2012,6 +2389,14 @@ declare module '@authing/react-ui-components/components/Login/core/withPassword/
       loginWay?: LoginMethods;
       submitButText?: string;
       saveIdentify?: (type: LoginMethods, identity: string) => void;
+      /**
+       * 根据输入的账号 & 返回获得对应的登录方法
+       */
+      multipleInstance?: StoreInstance;
+      /**
+       * 多账号回填的数据
+       */
+      backfillData?: BackFillMultipleState;
   }
   export const LoginWithPassword: (props: LoginWithPasswordProps) => JSX.Element;
   export {};
@@ -2045,6 +2430,10 @@ declare module '@authing/react-ui-components/components/Login/core/withVerifyCod
   import React, { FC } from 'react';
   import './styles.less';
   export interface VirtualDropdownProps {
+      /**
+       * 回填的国际化区号
+       */
+      regionCode?: string;
       value?: string;
       onChange?: (value: string) => void;
       style?: React.CSSProperties;
@@ -2055,7 +2444,8 @@ declare module '@authing/react-ui-components/components/Login/core/withVerifyCod
 declare module '@authing/react-ui-components/components/Login/core/withVerifyCode/index' {
   /// <reference types="react" />
   import './styles.less';
-  export const LoginWithVerifyCode: (props: any) => JSX.Element;
+  const LoginWithVerifyCode: (props: any) => JSX.Element;
+  export { LoginWithVerifyCode };
 
 }
 declare module '@authing/react-ui-components/components/Login/core/withVerifyCode/inputIdentify' {
@@ -2070,23 +2460,99 @@ declare module '@authing/react-ui-components/components/Login/core/withVerifyCod
 }
 declare module '@authing/react-ui-components/components/Login/core/withWechatMiniQrcode' {
   /// <reference types="react" />
+  import { StoreInstance } from '@authing/react-ui-components/components/Guard/core/hooks/useMultipleAccounts';
   interface LoginWithWechatMiniQrcodeProps {
       onLoginSuccess: any;
       canLoop: boolean;
+      qrCodeScanOptions: any;
+      id: string;
+      multipleInstance?: StoreInstance;
   }
-  export const LoginWithWechatMiniQrcode: (props: LoginWithWechatMiniQrcodeProps) => JSX.Element | null;
+  export const LoginWithWechatMiniQrcode: (props: LoginWithWechatMiniQrcodeProps) => JSX.Element;
   export {};
 
 }
 declare module '@authing/react-ui-components/components/Login/core/withWechatmpQrcode' {
   /// <reference types="react" />
+  import { StoreInstance } from '@authing/react-ui-components/components/Guard/core/hooks/useMultipleAccounts';
   interface LoginWithWechatmpQrcodeProps {
       onLoginSuccess: any;
       canLoop: boolean;
+      qrCodeScanOptions: any;
+      id: string;
+      /**
+       * 多账号存储实例
+       */
+      multipleInstance?: StoreInstance;
   }
-  export const LoginWithWechatmpQrcode: (props: LoginWithWechatmpQrcodeProps) => JSX.Element | null;
+  export const LoginWithWechatmpQrcode: (props: LoginWithWechatmpQrcodeProps) => JSX.Element;
   export {};
 
+}
+declare module '@authing/react-ui-components/components/Login/hooks/useLoginMultiple' {
+  /// <reference types="react" />
+  import { FormInstance } from 'antd/lib/form';
+  import { BackFillMultipleState, LoginWay } from '@authing/react-ui-components/components/Guard/core/hooks/useMultipleAccounts';
+  /**
+   * 多账号登录下 账户 & 登录方式自动回填
+   * TODO: HOOK 参数有时间整理成为对象，开始没有想到有这么多
+   * 调用地方 core 中需要回填的两个登录方式
+   */
+  function useLoginMultipleBackFill(options: {
+      form: FormInstance<any>;
+      way: LoginWay;
+      formKey: string;
+      backfillData?: BackFillMultipleState;
+      isOnlyInternationSms?: boolean;
+      setAreaCode?: React.Dispatch<React.SetStateAction<string>>;
+      cancelBackfill?: boolean;
+  }): void;
+  /**
+   * 多账号统一状态管理
+   * @param setLoginWay
+   * @returns
+   */
+  function useLoginMultiple(setLoginWay: React.Dispatch<any>): {
+      isMultipleAccount: boolean;
+      multipleInstance: {
+          initStore: (appId: string, options: {
+              serverSideLoginMethods: LoginWay[];
+              isInternationSms: boolean;
+          }) => void;
+          setLoginWay: (tab: "input" | "qrcode", way: LoginWay, id?: string | undefined, internation?: {
+              phoneCountryCode: string;
+              areaCode: string;
+          } | undefined) => void;
+          setUserInfo: (user: Pick<import("@authing/react-ui-components/components/Guard/core/hooks/useMultipleAccounts").User & {
+              id: string;
+          }, "email" | "username" | "phone" | "id" | "nickname" | "photo" | "name" | "_updateTime" | "qrCodeId" | "areaCode">) => void;
+          setLoginWayByHttpData: (account: string, data: {
+              username?: string | undefined;
+              phone?: string | undefined;
+              email?: string | undefined;
+          }) => void;
+          setLoginWayByLDAPData: (account: string, data: {
+              name?: string | undefined;
+              phone?: string | undefined;
+              email?: string | undefined;
+          }) => void;
+          getMemoUser: (excludeWays?: LoginWay[]) => import("@authing/react-ui-components/components/Login/multipleAccounts/panel").SelectOptions[];
+          getMemoSingleUser: (id: string) => {
+              way: LoginWay;
+              account: string;
+          } | undefined;
+          delUserById: (id: string) => string;
+          getMemberState: () => boolean;
+          getFirstBackFillData: () => BackFillMultipleState | undefined;
+          getOriginAccount: () => string;
+          getOriginWay: () => string;
+      } | undefined;
+      referMultipleState: ((type: "login" | "multiple") => void) | undefined;
+      backfillData: BackFillMultipleState | undefined;
+      defaultQrWay: string | undefined;
+  };
+  export { useLoginMultipleBackFill, useLoginMultiple };
+
 }
 declare module '@authing/react-ui-components/components/Login/index' {
   /// <reference types="react" />
@@ -2135,6 +2601,79 @@ declare module '@authing/react-ui-components/components/Login/interface' {
   }
   export const getDefaultLoginConfig: () => LoginConfig;
 
+}
+declare module '@authing/react-ui-components/components/Login/multipleAccounts/index' {
+  import React from 'react';
+  import { LoginWay, StoreInstance } from '@authing/react-ui-components/components/Guard/core/hooks/useMultipleAccounts';
+  import { GuardModuleType } from '@authing/react-ui-components/components/Guard/index';
+  interface MultipleAccountsProps {
+      /**
+       * 多账号存储实例
+       */
+      multipleInstance?: StoreInstance;
+      /**
+       * 切换 Guard 方法
+       */
+      changeModule?: (moduleName: GuardModuleType, initData?: any) => Promise<void>;
+      /**
+       * 切换多账号状态
+       */
+      referMultipleState?: (type: 'login' | 'multiple', data?: {
+          account: string;
+          way: LoginWay;
+      }) => void;
+  }
+  const MultipleAccounts: React.NamedExoticComponent<MultipleAccountsProps>;
+  export { MultipleAccounts };
+
+}
+declare module '@authing/react-ui-components/components/Login/multipleAccounts/panel' {
+  import React from 'react';
+  import './style.less';
+  interface SelectPanelProps {
+      lists: SelectOptions[];
+      /**
+       * 点击删除
+       */
+      handleDel: (id: string) => void;
+      /**
+       * 点击 li
+       */
+      onClick: (id: string) => void;
+  }
+  export interface SelectOptions {
+      /**
+       * 头像
+       */
+      photo?: string;
+      /**
+       * 标题
+       */
+      title?: string;
+      /**
+       * 描述
+       */
+      description?: string;
+      /**
+       * 用户 ID 唯一标识符
+       */
+      id: string | 'other';
+      /**
+       * 显示操作栏 default: true
+       */
+      operation?: boolean;
+      /**
+       * 登录时间
+       */
+      _updateTime: number;
+      /**
+       * 替代图片元素
+       */
+      element?: React.ReactElement;
+  }
+  const SelectPanel: React.FC<SelectPanelProps>;
+  export { SelectPanel };
+
 }
 declare module '@authing/react-ui-components/components/Login/socialLogin/IdpButton/index' {
   /// <reference types="react" />
@@ -2146,6 +2685,7 @@ declare module '@authing/react-ui-components/components/Login/socialLogin/index'
   import { ApplicationConfig, SocialConnectionItem } from '@authing/react-ui-components/components/AuthingGuard/api/index';
   import './style.less';
   import { GuardLocalConfig } from '@authing/react-ui-components/components/Guard/index';
+  import { StoreInstance } from '@authing/react-ui-components/components/Guard/core/hooks/useMultipleAccounts';
   export interface SocialLoginProps {
       appId: string;
       config: GuardLocalConfig;
@@ -2153,6 +2693,10 @@ declare module '@authing/react-ui-components/components/Login/socialLogin/index'
       onLoginSuccess: any;
       enterpriseConnectionObjs: ApplicationConfig['identityProviders'];
       socialConnectionObjs: SocialConnectionItem[];
+      /**
+       * 根据输入的账号 & 返回获得对应的登录方法
+       */
+      multipleInstance?: StoreInstance;
   }
   export const SocialLogin: React.FC<SocialLoginProps>;
 
@@ -2429,233 +2973,6 @@ declare module '@authing/react-ui-components/components/NeedHelpView/index' {
   /// <reference types="react" />
   export const GuardNeedHelpView: (props: any) => JSX.Element;
 
-}
-declare module '@authing/react-ui-components/components/Qrcode/UiQrCode' {
-  import React from 'react';
-  import './index.less';
-  import { CodeStatusDescriptions } from '@authing/react-ui-components/components/Qrcode/WorkQrCode';
-  export type CodeStatus = 'loading' | 'ready' | 'already' | 'success' | 'error' | 'expired' | 'cancel' | 'MFA';
-  export const prefix = "refactor";
-  export interface UiQrProps {
-      /**
-       * Loading 组件
-       */
-      loadingComponent?: React.ReactElement;
-      /**
-       * 二维码组件三种状态
-       * ready 准备状态
-       * already 已扫描状态
-       * success 扫描成功/登录成功状态
-       * error 错误状态（超时、网络错误）
-       */
-      status: CodeStatus;
-      /**
-       * 二维码 URL
-       */
-      src?: string;
-      /**
-       * 二维码底部内容
-       */
-      descriptions: CodeStatusDescriptions;
-      /**
-       * 外层 container 样式
-       */
-      containerStyle?: React.CSSProperties;
-      /**
-       * 内层 container 样式(图片)
-       */
-      imageStyle?: React.CSSProperties;
-      /**
-       * 二维码图片准备好的回调
-       */
-      onLoad?: () => void;
-      /**
-       * 点击遮罩中的内容区
-       * status 当前组件所处状态
-       */
-      onClickMaskEl?: (status: CodeStatus) => void;
-      /**
-       * 点击全部遮罩区域
-       * status 当前组件所处状态
-       */
-      onMaskContent?: (status: CodeStatus) => void;
-  }
-  const UiQrCode: React.NamedExoticComponent<UiQrProps>;
-  export { UiQrCode };
-
-}
-declare module '@authing/react-ui-components/components/Qrcode/WorkQrCode' {
-  import React from 'react';
-  import { QrCodeResponse } from '@authing/react-ui-components/components/Qrcode/hooks/usePostQrCode';
-  import { CodeStatus, UiQrProps } from '@authing/react-ui-components/components/Qrcode/UiQrCode';
-  /**
-   * 二维码不同状态下的底部描述文字
-   */
-  export type CodeStatusDescriptions = Partial<Record<Exclude<CodeStatus, 'loading'>, React.ReactNode | ((referQrCode?: () => void) => React.ReactNode)>>;
-  export interface WorkQrCodeRef {
-      referQrCode: () => Promise<{
-          random: string;
-          url: string;
-      } | undefined>;
-  }
-  interface WorkQrCodeProps extends Omit<UiQrProps, 'description' | 'status'> {
-      /**
-       * 二维码场景
-       */
-      scene: 'WXAPP_AUTH' | 'APP_AUTH' | 'WECHATMP_AUTH';
-      /**
-       * 不同状态请求文字
-       */
-      descriptions: CodeStatusDescriptions;
-      /**
-       * 睡眠时间 默认 1000
-       */
-      sleepTime?: number;
-      /**
-       * 每当状态变化时，触发的 callback 。
-       */
-      onStatusChange?: (status: CodeStatus, data: QrCodeResponse) => void;
-      /**
-       * 不同状态下点击遮罩中间区域方法
-       */
-      onClickMaskContent?: (status: CodeStatus) => void;
-  }
-  const WorkQrCode: React.ForwardRefExoticComponent<WorkQrCodeProps & React.RefAttributes<any>>;
-  export { WorkQrCode };
-
-}
-declare module '@authing/react-ui-components/components/Qrcode/hooks/useImage' {
-  const useImage: (src: string | undefined, options: {
-      onLoad?: (() => void) | undefined;
-  }) => (string | undefined)[];
-  export { useImage };
-
-}
-declare module '@authing/react-ui-components/components/Qrcode/hooks/usePostQrCode' {
-  /// <reference types="react" />
-  import { AuthingGuardResponse, AuthingResponse } from '@authing/react-ui-components/components/_utils/http';
-  import { CodeStatus } from '@authing/react-ui-components/components/Qrcode/UiQrCode';
-  import { CodeStatusDescriptions } from '@authing/react-ui-components/components/Qrcode/WorkQrCode';
-  import { ReducerType, RootState } from '@authing/react-ui-components/components/Qrcode/hooks/usePreQrCode';
-  export interface QrCodeResponse {
-      /**
-       * 根据状态确定不同的流程
-       */
-      status: number;
-      /**
-       * 返回的随机值
-       */
-      random: number;
-      /**
-       * 返回的用户信息
-       */
-      userInfo?: any;
-      /**
-       * 扫码成功后 Tick 换取用户信息
-       */
-      ticket?: string;
-      /**
-       * MFA 状态下的返回
-       */
-      scannedResult?: AuthingResponse;
-  }
-  /**
-   * 二维码请求相关
-   */
-  interface QrCodeRequest {
-      genCodeRequest?: () => Promise<AuthingGuardResponse<{
-          random: string;
-          url: string;
-      }>>;
-      /**
-       * 未扫码下的请求方法
-       */
-      readyCheckedRequest?: () => Promise<AuthingGuardResponse<QrCodeResponse>>;
-      /**
-       * 已经扫码下的请求方法（待确认）
-       */
-      alreadyCheckedRequest?: () => Promise<AuthingGuardResponse<QrCodeResponse>>;
-      /**
-       * 使用 ticket 交换用户信息
-       */
-      exchangeUserInfo?: (ticket: string) => Promise<any>;
-  }
-  interface QrCodeOptions {
-      state: RootState;
-      dispatch: React.Dispatch<{
-          type: ReducerType;
-          payload: Partial<RootState>;
-      }>;
-      descriptions: CodeStatusDescriptions;
-      sleepTime?: number;
-      /**
-       * 状态改变时触发事件，仅在 Server 返回的二维码状态改变时进行触发
-       */
-      onStatusChange?: (status: CodeStatus, data: QrCodeResponse) => void;
-  }
-  /**
-   * 二维码处理阶段
-   * 二维码处理阶段分为两个主要流程
-   * 1. 同一状态下的轮询逻辑处理
-   * 2. 根据不同返回状态码进行处理
-   */
-  export const useQrCode: (options: QrCodeOptions, request: QrCodeRequest) => void;
-  export {};
-
-}
-declare module '@authing/react-ui-components/components/Qrcode/hooks/usePreQrCode' {
-  /// <reference types="react" />
-  import { CodeStatus } from '@authing/react-ui-components/components/Qrcode/UiQrCode';
-  export type ReducerType = 'change' | 'changeStatus' | 'changeDesc';
-  export type RootState = {
-      /**
-       * 状态
-       */
-      status: CodeStatus;
-      /**
-       * 底部描述
-       */
-      /**
-       * 当前二维码 URL
-       */
-      src?: string;
-      /**
-       * 二维码随机值
-       */
-      random?: string;
-  };
-  /**
-   * QrCode 准备阶段 Hook
-   */
-  const usePreQrCode: () => {
-      state: RootState;
-      dispatch: import("react").Dispatch<{
-          type: ReducerType;
-          payload: Partial<RootState>;
-      }>;
-  };
-  export { usePreQrCode };
-
-}
-declare module '@authing/react-ui-components/components/Qrcode/hooks/useStatus' {
-  import { CodeStatus } from '@authing/react-ui-components/components/Qrcode/UiQrCode';
-  /**
-   * 根据不同状态添加不同的元素
-   * 维护不同状态的处理
-   */
-  const useStatus: (status: CodeStatus) => ({} | null | undefined)[];
-  export { useStatus };
-
-}
-declare module '@authing/react-ui-components/components/Qrcode/index' {
-  import { UiQrCode } from '@authing/react-ui-components/components/Qrcode/UiQrCode';
-  import { WorkQrCode } from '@authing/react-ui-components/components/Qrcode/WorkQrCode';
-  type IQrCode = typeof WorkQrCode & {
-      UI: typeof UiQrCode;
-  };
-  const QrCode: IQrCode;
-  export { QrCode };
-
 }
 declare module '@authing/react-ui-components/components/RecoveryCode/businessRequest' {
   export enum TotpRecoveryCodeBusinessAction {
@@ -3245,6 +3562,7 @@ declare module '@authing/react-ui-components/components/_utils/context' {
   import React from 'react';
   import { GuardEvents, GuardLocalConfig, GuardModuleType, GuardPageConfig } from '@authing/react-ui-components/components/index';
   import { ApplicationConfig } from '@authing/react-ui-components/components/AuthingGuard/api/index';
+  import { BackFillMultipleState, StoreInstance } from '@authing/react-ui-components/components/Guard/core/hooks/useMultipleAccounts';
   import { ModuleState } from '@authing/react-ui-components/components/Guard/GuardModule/stateMachine';
   import { GuardHttp } from '@authing/react-ui-components/components/_utils/guardHttp';
   export interface IGuardContext {
@@ -3262,6 +3580,29 @@ declare module '@authing/react-ui-components/components/_utils/context' {
       isAuthFlow: boolean;
       contextLoaded: boolean;
       guardPageConfig: Partial<GuardPageConfig>;
+      multipleInstance: {
+          /**
+           * 多账号相关
+           */
+          isMultipleAccount: boolean;
+          /**
+           * when： 多账号页面跳转进入登录页面
+           * 携带的回填数据信息
+           */
+          multipleAccountData?: BackFillMultipleState;
+          /**
+           * 多账号 store 实例
+           */
+          instance?: StoreInstance;
+          /**
+           * 切换多账号 isMultipleAccount 状态
+           */
+          referMultipleState?: (type: 'login' | 'multiple') => void;
+          /**
+           * 清空回填数据
+           */
+          clearBackFillData?: () => void;
+      };
   }
   export const createGuardXContext: () => {
       Provider: React.FC<{
@@ -3299,6 +3640,64 @@ declare module '@authing/react-ui-components/components/_utils/context' {
   export const useGuardContextLoaded: () => boolean;
   export const useGuardIsAuthFlow: () => boolean;
   export const useGuardPageConfig: () => Partial<GuardPageConfig>;
+  /**
+   * 多账号登录 store 实例
+   */
+  export const useGuardMultipleInstance: () => {
+      /**
+       * 多账号相关
+       */
+      isMultipleAccount: boolean;
+      /**
+       * when： 多账号页面跳转进入登录页面
+       * 携带的回填数据信息
+       */
+      multipleAccountData?: BackFillMultipleState | undefined;
+      /**
+       * 多账号 store 实例
+       */
+      instance?: {
+          initStore: (appId: string, options: {
+              serverSideLoginMethods: import("@authing/react-ui-components/components/Guard/core/hooks/useMultipleAccounts").LoginWay[];
+              isInternationSms: boolean;
+          }) => void;
+          setLoginWay: (tab: "input" | "qrcode", way: import("@authing/react-ui-components/components/Guard/core/hooks/useMultipleAccounts").LoginWay, id?: string | undefined, internation?: {
+              phoneCountryCode: string;
+              areaCode: string;
+          } | undefined) => void;
+          setUserInfo: (user: Pick<import("@authing/react-ui-components/components/Guard/core/hooks/useMultipleAccounts").User & {
+              id: string;
+          }, "email" | "username" | "phone" | "id" | "nickname" | "photo" | "name" | "_updateTime" | "qrCodeId" | "areaCode">) => void;
+          setLoginWayByHttpData: (account: string, data: {
+              username?: string | undefined;
+              phone?: string | undefined;
+              email?: string | undefined;
+          }) => void;
+          setLoginWayByLDAPData: (account: string, data: {
+              name?: string | undefined;
+              phone?: string | undefined;
+              email?: string | undefined;
+          }) => void;
+          getMemoUser: (excludeWays?: import("@authing/react-ui-components/components/Guard/core/hooks/useMultipleAccounts").LoginWay[]) => import("../Login/multipleAccounts/panel").SelectOptions[];
+          getMemoSingleUser: (id: string) => {
+              way: import("@authing/react-ui-components/components/Guard/core/hooks/useMultipleAccounts").LoginWay;
+              account: string;
+          } | undefined;
+          delUserById: (id: string) => string;
+          getMemberState: () => boolean;
+          getFirstBackFillData: () => BackFillMultipleState | undefined;
+          getOriginAccount: () => string;
+          getOriginWay: () => string;
+      } | undefined;
+      /**
+       * 切换多账号 isMultipleAccount 状态
+       */
+      referMultipleState?: ((type: 'login' | 'multiple') => void) | undefined;
+      /**
+       * 清空回填数据
+       */
+      clearBackFillData?: (() => void) | undefined;
+  };
 
 }
 declare module '@authing/react-ui-components/components/_utils/corsVerification' {
@@ -3509,7 +3908,11 @@ declare module '@authing/react-ui-components/components/_utils/index' {
    * @param ...sources
    */
   export function deepMerge<T extends any = any>(target: T, ...sources: any[]): T;
-  export const getUserRegisterParams: () => {
+  /**
+   *  在托管页下上传query中指定的用户自定义字段进行补全
+   * @param params 指定上传的用户自定义字段
+   */
+  export const getUserRegisterParams: (params?: string[] | undefined) => {
       key: string;
       value: string | string[] | qs.ParsedQs | qs.ParsedQs[] | undefined;
   }[];
@@ -3763,7 +4166,7 @@ declare module '@authing/react-ui-components/components/version/index' {
 
 }
 declare module '@authing/react-ui-components/components/version/version' {
-  const _default: "3.1.39-beta.0";
+  const _default: "3.1.39-beta.1";
   export default _default;
 
 }