@trtc/calls-uikit-react 4.1.0

package/src/TUICallService/CallService/miniProgram.ts

@@ -0,0 +1,65 @@
+import { CallMediaType, CallStatus } from '../const/index';
+
+export function initialUI() {
+  // 收起键盘
+  // @ts-ignore
+  wx.hideKeyboard && wx.hideKeyboard({
+    complete: () => {},
+  });
+};
+// 检测运行时环境, 当是微信开发者工具时, 提示用户需要手机调试
+export function checkRunPlatform() {
+  // @ts-ignore
+  const systemInfo = wx.getSystemInfoSync();
+  if (systemInfo.platform === 'devtools') {
+    // 当前运行在微信开发者工具里
+    // @ts-ignore
+    wx.showModal({
+      icon: 'none',
+      title: '运行环境提醒',
+      content: '微信开发者工具不支持原生推拉流组件(即 <live-pusher> 和 <live-player> 标签)，请使用真机调试或者扫码预览。',
+      showCancel: false,
+    });
+  }
+};
+export function initAndCheckRunEnv() {
+  initialUI(); // miniProgram 收起键盘, 隐藏 tabBar
+  checkRunPlatform(); // miniProgram 检测运行时环境
+}
+export async function beforeCall(type: CallMediaType, that: any) {
+  try {
+    initAndCheckRunEnv();
+    // 检查设备权限
+    const deviceMap = {
+      microphone: true,
+      camera: type === CallMediaType.VIDEO,
+    };
+    const hasDevicePermission = await that._tuiCallEngine.deviceCheck(deviceMap); // miniProgram 检查设备权限
+    return hasDevicePermission ? CallStatus.CALLING : CallStatus.IDLE;
+  } catch (error) {
+    console.debug(error);
+    return CallStatus.IDLE;
+  }
+}
+// 套餐问题提示, 小程序最低需要群组通话版, 1v1 通话版本使用 TRTC 就会报错
+export function handlePackageError(error) {
+  if (error?.code === -1002) {
+    // @ts-ignore
+    wx.showModal({
+      icon: 'none',
+      title: 'error',
+      content: error?.message || '',
+      showCancel: false,
+    });
+  }
+}
+
+export function handleNoPusherCapabilityError(){
+  // @ts-ignore
+  wx.showModal({
+    icon: 'none',
+    title: '权限提示',
+    content: '当前小程序 appid 不具备 <live-pusher> 和 <live-player> 的使用权限，您将无法正常使用实时通话能力，请使用企业小程序账号申请权限后再进行开发体验',
+    showCancel: false,
+  });
+}

package/src/TUICallService/CallService/utils.ts

@@ -0,0 +1,281 @@
+import { NAME, StoreName, CallStatus, StatusChange, CallMediaType, ROOM_ID_TYPE } from '../const/index';
+import { handleNoDevicePermissionError } from '../utils/common-utils';
+import { IUserInfo } from '../interface/ICallService';
+import { ITUIStore } from '../interface/ITUIStore';
+import { CallTips, t } from '../locales/index';
+import TuiStore from '../TUIStore/tuiStore';
+// @ts-ignore
+const TUIStore: ITUIStore = TuiStore.getInstance();
+
+// 设置默认的 UserInfo 信息
+export function setDefaultUserInfo(userId: string, domId?: string): IUserInfo {
+  const userInfo: IUserInfo = {
+    userId,
+    nick: '',
+    avatar: '',
+    remark: '',
+    displayUserInfo: '',
+    isAudioAvailable: false,
+    isVideoAvailable: false,
+    isEnter: false,
+    domId: domId || userId,
+  };
+  return domId ? userInfo : { ...userInfo, isEnter: false }; // localUserInfo 没有 isEnter, remoteUserInfoList 有 isEnter
+}
+// 获取个人用户信息
+export async function getMyProfile(myselfUserId: string, tim: any): Promise<IUserInfo> {
+  let localUserInfo: IUserInfo = setDefaultUserInfo(myselfUserId, NAME.LOCAL_VIDEO);
+  try {
+    if (!tim) return localUserInfo;
+    const res = await tim.getMyProfile();
+    const currentLocalUserInfo = TUIStore?.getData(StoreName.CALL, NAME.LOCAL_USER_INFO); // localUserInfo may have been updated
+    if (res?.code === 0) {
+      localUserInfo = {
+        ...localUserInfo,
+        ...currentLocalUserInfo,
+        userId: res?.data?.userID,
+        nick: res?.data?.nick,
+        avatar: res?.data?.avatar,
+        displayUserInfo: res?.data?.nick || res?.data?.userID,
+      };
+    }
+    return localUserInfo;
+  } catch (error) {
+    console.error(`${NAME.PREFIX}getMyProfile failed, error: ${error}.`);
+    return localUserInfo;
+  }
+}
+// 获取远端用户列表信息
+export async function getRemoteUserProfile(userIdList: Array<string>, tim: any): Promise<any> {
+  let remoteUserInfoList: IUserInfo[] = userIdList.map((userId: string) => setDefaultUserInfo(userId));
+  try {
+    if (!tim) return remoteUserInfoList;
+
+    if (tim?.getFriendProfile) {
+      const res = await tim.getFriendProfile({ userIDList: userIdList });
+      if (res.code === 0) {
+        const { friendList = [], failureUserIDList = [] } = res.data;
+        let unFriendList: IUserInfo[] = failureUserIDList.map((obj: any) => obj.userID);
+        if (failureUserIDList.length > 0) {
+          const res = await tim.getUserProfile({ userIDList: failureUserIDList.map((obj: any) => obj.userID) });
+          if (res?.code === 0) {
+            unFriendList = res?.data || [];
+          }
+        }
+        const currentRemoteUserInfoList = TUIStore?.getData(StoreName.CALL, NAME.REMOTE_USER_INFO_LIST); // remoteUserInfoList may have been updated
+        const tempFriendIdList: string[] = friendList.map((obj: any) => obj.userID);
+        const tempUnFriendIdList: string[] = unFriendList.map((obj: any) => obj.userID);
+        remoteUserInfoList = userIdList.map((userId: string) => {
+          const defaultUserInfo: IUserInfo = setDefaultUserInfo(userId);
+          const friendListIndex: number = tempFriendIdList.indexOf(userId);
+          const unFriendListIndex: number = tempUnFriendIdList.indexOf(userId);
+          let remark = '';
+          let nick = '';
+          let displayUserInfo = '' ;
+          let avatar = '';
+          if (friendListIndex !== -1) {
+            remark = friendList[friendListIndex]?.remark || '';
+            nick = friendList[friendListIndex]?.profile?.nick || '';
+            displayUserInfo = remark || nick || defaultUserInfo.userId || '';
+            avatar = friendList[friendListIndex]?.profile?.avatar || '';
+          }
+          if (unFriendListIndex !== -1) {
+            nick = unFriendList[unFriendListIndex]?.nick || '';
+            displayUserInfo = nick || defaultUserInfo.userId || '';
+            avatar = unFriendList[unFriendListIndex]?.avatar || '';
+          }
+          const userInfo = currentRemoteUserInfoList.find(subObj => subObj.userId === userId) || {};
+          return { ...defaultUserInfo, ...userInfo, remark, nick, displayUserInfo, avatar };
+        });
+      }
+      return remoteUserInfoList;
+    } else {
+      const res = await tim.getUserProfile({ userIDList: userIdList });
+      const currentRemoteUserInfoList = TUIStore?.getData(StoreName.CALL, NAME.REMOTE_USER_INFO_LIST); // remoteUserInfoList may have been updated
+
+      remoteUserInfoList = userIdList.map((userId: string) => {
+        const defaultUserInfo: IUserInfo = setDefaultUserInfo(userId);
+        const userInfo = currentRemoteUserInfoList.find(subObj => subObj.userId === userId) || {};
+        const userData = (res.data || []).find(obj => obj.userID === userId) || {};
+
+        return {
+          ...defaultUserInfo,
+          ...userInfo,
+          nick: userData?.nick || '', 
+          displayUserInfo: userData?.nick || userId, 
+          avatar: userData?.avatar || '',
+        };
+      });
+      return remoteUserInfoList;
+    }
+  } catch (error) {
+    console.error(`${NAME.PREFIX}getRemoteUserProfile failed, error: ${error}.`);
+    return remoteUserInfoList;
+  }
+}
+// 生成弹框提示文案
+export function generateText(key: string, prefix?: string, suffix?: string): string {
+  const isGroup = TUIStore.getData(StoreName.CALL, NAME.IS_GROUP);
+  let callTips = `${t(key)}`;
+  if (isGroup) {
+    callTips = prefix ? `${prefix} ${callTips}` : callTips;
+    callTips = suffix ? `${callTips} ${suffix}` : callTips;
+  }
+  return callTips;
+}
+// 生成 statusChange 抛出的字符串
+export function generateStatusChangeText(): string {
+  const callStatus = TUIStore.getData(StoreName.CALL, NAME.CALL_STATUS);
+  if (callStatus === CallStatus.IDLE) {
+    return StatusChange.IDLE;
+  }
+  const isGroup = TUIStore.getData(StoreName.CALL, NAME.IS_GROUP);
+  if (callStatus === CallStatus.CALLING) {
+    return isGroup ? StatusChange.DIALING_GROUP : StatusChange.DIALING_C2C;
+  }
+  const callMediaType = TUIStore.getData(StoreName.CALL, NAME.CALL_MEDIA_TYPE);
+  if (isGroup) {
+    return callMediaType === CallMediaType.AUDIO ? StatusChange.CALLING_GROUP_AUDIO : StatusChange.CALLING_GROUP_VIDEO;
+  }
+  return callMediaType === CallMediaType.AUDIO ? StatusChange.CALLING_C2C_AUDIO : StatusChange.CALLING_C2C_VIDEO;
+}
+// 获取群组[offset, count + offset]区间成员
+export async function getGroupMemberList(groupID: string, tim: any, count, offset) {
+  let groupMemberList = [];
+  try {
+    const res = await tim.getGroupMemberList({ groupID, count, offset });
+    if (res.code === 0) {
+      return res.data.memberList || groupMemberList;
+    }
+  } catch(error) {
+    console.error(`${NAME.PREFIX}getGroupMember failed, error: ${error}.`);
+    return groupMemberList;
+  }
+}
+// 获取 IM 群信息
+export async function getGroupProfile(groupID: string, tim: any): Promise<any> {
+  let groupProfile = {};
+  try {
+    const res = await tim.getGroupProfile({ groupID });
+    return res.data.group || groupProfile;
+  } catch(error) {
+    console.warn(`${NAME.PREFIX}getGroupProfile failed, error: ${error}.`);
+    return groupProfile;
+  }
+}
+/**
+ * update roomId and roomIdType
+ * @param {number} roomId number roomId
+ * @param {string} strRoomId string roomId
+ */
+export function updateRoomIdAndRoomIdType(roomId, strRoomId) {
+  if (roomId === 0 && strRoomId) { // use strRoomID
+    TUIStore.update(StoreName.CALL, NAME.ROOM_ID, strRoomId);
+    TUIStore.update(StoreName.CALL, NAME.ROOM_ID_TYPE, ROOM_ID_TYPE.STRING_ROOM_ID);
+  } else {
+    TUIStore.update(StoreName.CALL, NAME.ROOM_ID, roomId);
+    TUIStore.update(StoreName.CALL, NAME.ROOM_ID_TYPE, ROOM_ID_TYPE.NUMBER_ROOM_ID);
+  }
+}
+/**
+ * web and miniProgram call engine throw event data structure are different
+ * @param {any} event call engine throw out data
+ * @returns {any} data
+ */
+export function analyzeEventData(event: any): any {
+  return event || {};
+}
+/**
+ * delete user from remoteUserInfoList
+ * @param {string[]} userIdList to be deleted userIdList
+ * @param {ITUIStore} TUIStore TUIStore instance
+ */
+export function deleteRemoteUser(userIdList: string[]): void {
+  if (userIdList.length === 0) return;
+  let remoteUserInfoList = TUIStore.getData(StoreName.CALL, NAME.REMOTE_USER_INFO_LIST);
+  userIdList.forEach((userId) => {
+    remoteUserInfoList = remoteUserInfoList.filter((obj: IUserInfo) => obj.userId !== userId);
+  });
+  TUIStore.update(StoreName.CALL, NAME.REMOTE_USER_INFO_LIST, remoteUserInfoList);
+  TUIStore.update(StoreName.CALL, NAME.REMOTE_USER_INFO_EXCLUDE_VOLUMN_LIST, remoteUserInfoList);
+}
+export function updateDeviceList(tuiCallEngine) {
+  tuiCallEngine?.getDeviceList('speaker').then((result)=>{
+    const deviceList = TUIStore.getData(StoreName.CALL, NAME.DEVICE_LIST);
+    const currentSpeaker = result?.[0] || {};
+    TUIStore.update(
+      StoreName.CALL,
+      NAME.DEVICE_LIST,
+      { ...deviceList, speakerList: result, currentSpeaker },
+    );
+  }).catch(error =>{
+    console.error(`${NAME.PREFIX}updateSpeakerList failed, error: ${JSON.stringify(error)}.`);
+  });
+  const callMediaType = TUIStore.getData(StoreName.CALL, NAME.CALL_MEDIA_TYPE);
+  if (callMediaType === CallMediaType.VIDEO) {
+    tuiCallEngine?.getDeviceList('camera').then((result) => {
+      const deviceList = TUIStore.getData(StoreName.CALL, NAME.DEVICE_LIST);
+      const currentCamera = result?.[0] || {};
+      TUIStore.update(
+        StoreName.CALL,
+        NAME.DEVICE_LIST,
+        { ...deviceList, cameraList: result, currentCamera },
+      );
+    }).catch(error => {
+      console.error(`${NAME.PREFIX}updateCameraList failed, error: ${error}.`);
+    });
+  }
+  tuiCallEngine?.getDeviceList('microphones').then((result) => {
+    const deviceList = TUIStore.getData(StoreName.CALL, NAME.DEVICE_LIST);
+    const currentMicrophone = result?.[0] || {};
+    TUIStore.update(
+      StoreName.CALL,
+      NAME.DEVICE_LIST,
+      { ...deviceList, microphoneList: result, currentMicrophone },
+    );
+  }).catch(error => {
+    console.error(`${NAME.PREFIX}updateMicrophoneList failed, error: ${error}.`);
+  });
+}
+/**
+ * update the no device permission toast
+ * @param {any} error error
+ * @param {CallMediaType} type call midia type
+ * @param {any} tuiCallEngine TUICallEngine instance
+ */
+export function noDevicePermissionToast(error, type: CallMediaType, tuiCallEngine: any) {
+  let toastInfoKey = '';
+  if (handleNoDevicePermissionError(error)) {
+    if (type === CallMediaType.AUDIO) {
+      toastInfoKey = CallTips.NO_MICROPHONE_DEVICE_PERMISSION;
+    }
+    if (type === CallMediaType.VIDEO) {
+      toastInfoKey = CallTips.NO_CAMERA_DEVICE_PERMISSION;
+    }
+
+    const permission = tuiCallEngine?.getDevicePermission();
+    if (!permission?.audio) {
+      TUIStore.update(StoreName.CALL, NAME.SHOW_PERMISSION_TIP, true);
+    }
+
+    toastInfoKey && TUIStore.update(StoreName.CALL, NAME.TOAST_INFO, { content: toastInfoKey, type: NAME.ERROR });
+    console.error(`${NAME.PREFIX}call failed, error: ${error.message}.`);
+  }
+}
+/**
+ * set localUserInfo audio/video available
+ * @param {boolean} isAvailable is available
+ * @param {string} type callMediaType 'audio' | 'video'
+ * @param {ITUIStore} TUIStore TUIStore instance
+ */
+export function setLocalUserInfoAudioVideoAvailable(isAvailable: boolean, type: string) {
+  let localUserInfo = TUIStore.getData(StoreName.CALL, NAME.LOCAL_USER_INFO);
+  if (type === NAME.AUDIO) {
+    localUserInfo = { ...localUserInfo, isAudioAvailable: isAvailable };
+  }
+  if (type === NAME.VIDEO) {
+    localUserInfo = { ...localUserInfo, isVideoAvailable: isAvailable };
+  }
+  TUIStore.update(StoreName.CALL, NAME.LOCAL_USER_INFO, localUserInfo);
+  TUIStore.update(StoreName.CALL, NAME.LOCAL_USER_INFO_EXCLUDE_VOLUMN, localUserInfo);
+}

package/src/TUICallService/TUIGlobal/tuiGlobal.ts

@@ -0,0 +1,43 @@
+import { APP_NAMESPACE, IS_PC, IS_H5, IN_WX_MINI_APP, IN_UNI_NATIVE_APP, IN_UNI_APP, IS_MAC, IS_WIN } from '../utils/env';
+import { ITUIGlobal } from '../interface/ITUIGlobal';
+
+export default class TUIGlobal implements ITUIGlobal {
+  static instance: TUIGlobal;
+  public global: any = APP_NAMESPACE;
+  public isPC: boolean = false;
+  public isH5: boolean = false;
+  public isWeChat: boolean = false;
+  public isApp: boolean = false;
+  public isUniPlatform: boolean = false;
+  public isOfficial: boolean = false;
+  public isWIN: boolean = false;
+  public isMAC: boolean = false;
+  constructor() {
+    this.initEnv();
+  }
+
+  /**
+   * 获取 TUIGlobal 实例
+   * @returns {TUIGlobal}
+  */
+  static getInstance() {
+    if (!TUIGlobal.instance) {
+      TUIGlobal.instance = new TUIGlobal();
+    }
+    return TUIGlobal.instance;
+  }
+
+  initEnv() {
+    this.isPC = IS_PC;
+    this.isH5 = IS_H5;
+    this.isWeChat = IN_WX_MINI_APP;
+    this.isApp = IN_UNI_NATIVE_APP && !IN_WX_MINI_APP; // uniApp 打包小程序时 IN_UNI_NATIVE_APP 为 true，所以此处需要增加条件
+    this.isUniPlatform = IN_UNI_APP;
+    this.isWIN = IS_WIN;
+    this.isMAC = IS_MAC;
+  }
+
+  initOfficial(SDKAppID: number) {
+    this.isOfficial = (SDKAppID === 1400187352 || SDKAppID === 1400188366);
+  }
+}

package/src/TUICallService/TUIStore/callStore.ts

@@ -0,0 +1,93 @@
+import { CallStatus, CallRole, CallMediaType, VideoDisplayMode, VideoResolution, CameraPosition, LayoutMode, NAME } from '../const/index';
+import { ICallStore } from '../interface/ICallStore';
+import { t } from '../locales/index';
+import { getLanguage } from '../utils/common-utils';
+import { deepClone } from "../utils/index";
+
+export default class CallStore {
+  public defaultStore: ICallStore = {
+    callStatus: CallStatus.IDLE,
+    callRole: CallRole.UNKNOWN,
+    callMediaType: CallMediaType.UNKNOWN,
+    localUserInfo: { userId: '' },
+    localUserInfoExcludeVolume: { userId: '' },
+    remoteUserInfoList: [],
+    remoteUserInfoExcludeVolumeList: [],
+    callerUserInfo: { userId: '' },
+    isGroup: false,
+    callDuration: '00:00:00', // 通话时长
+    callTips: '', // 通话提示的信息. 例如: '等待谁接听', 'xxx 拒绝通话', 'xxx 挂断通话'
+    toastInfo: { text: '' }, // 远端用户挂断、拒绝、超时、忙线等的 toast 提示信息
+    isMinimized: false, // 用来记录当前是否悬浮窗模式
+    enableFloatWindow: false, // 开启/关闭悬浮窗功能，设置为false，通话界面左上角的悬浮窗按钮会隐藏
+    bigScreenUserId: '', // 当前大屏幕显示的 userID 用户
+    language: getLanguage(), // en, zh-cn
+    isClickable: false, // 是否可点击, 用于按钮增加 loading 效果，不可点击
+    deviceList: { cameraList: [], microphoneList: [], currentCamera: {}, currentMicrophone: {} },
+    showPermissionTip: false,
+    netWorkQualityList: [], // 显示网络状态差的提示
+    isMuteSpeaker: false,
+    callID: '', // callEngine 3.1 support
+    groupID: '',
+    roomID: 0,
+    roomIdType: 0,
+    cameraPosition: CameraPosition.FRONT, // 前置或后置，值为front, back
+    groupCallMembers: [], // chat 群会话在的通话中的成员
+    // TUICallKit 组件上的属性
+    displayMode: VideoDisplayMode.COVER, // 设置预览远端的画面显示模式
+    videoResolution: VideoResolution.RESOLUTION_720P,
+    showSelectUser: false,
+    // 小程序相关属性
+    pusher: {},
+    player: [],
+    isEarPhone: false, // 是否是听筒, 默认: false
+    pusherId: NAME.INITIAL_PUSHER, // 重新渲染 live-Pusher 的标识位
+    // 是否开启虚拟背景, 目前仅 web 支持
+    isShowEnableVirtualBackground: false, // 是否显示虚拟背景图标, 默认: false
+    enableVirtualBackground: false, // 是否开启虚拟背景， 默认: false
+    // customUIConfig
+    customUIConfig: {
+      button: {},
+      viewBackground: {},
+      layoutMode: LayoutMode.RemoteInLargeView,
+    },
+    // translate function
+    translate: t,
+    isForceUseV2API: false,
+  };
+  public store: ICallStore = deepClone(this.defaultStore);
+  public prevStore: ICallStore = deepClone(this.defaultStore);
+
+  public update(key: keyof ICallStore, data: any): void {
+    switch (key) {
+      case NAME.CALL_TIPS:
+        const preData = this.getData(key);
+        (this.prevStore[key] as any) = preData;
+      default:
+        // resolve "Type 'any' is not assignable to type 'never'.ts", ref: https://github.com/microsoft/TypeScript/issues/31663
+        (this.store[key] as any) = data as any;
+    }
+  }
+
+  public getPrevData(key: string | undefined): any {
+    if (!key) return this.prevStore;
+    return this.prevStore[key as keyof ICallStore];
+  }
+
+  public getData(key: string | undefined): any {
+    if (!key) return this.store;
+    return this.store[key as keyof ICallStore];
+  }
+  // reset call store
+  public reset(keyList: Array<string> = []) {
+    if (keyList.length === 0) {
+      keyList = Object.keys(this.store);
+    }
+    const resetToDefault = keyList.reduce((acc, key) => ({ ...acc, [key]: this.defaultStore[key as keyof ICallStore] }), {});
+    this.store = {
+      ...this.defaultStore,
+      ...this.store,
+      ...resetToDefault,
+    };
+  }
+}

package/src/TUICallService/TUIStore/tuiStore.ts

@@ -0,0 +1,167 @@
+import { ITUIStore, IOptions, Task } from '../interface/ITUIStore';
+import { StoreName, NAME } from '../const/index';
+import CallStore from './callStore';
+import { isString, isNumber, isBoolean } from '../utils/common-utils';
+
+export default class TUIStore implements ITUIStore {
+  static instance: TUIStore;
+  public task: Task;
+  private storeMap: Partial<Record<StoreName, any>>;
+  private timerId: number = -1;
+  constructor() {
+    this.storeMap = {
+      [StoreName.CALL]: new CallStore(),
+    };
+    // todo 此处后续优化结构后调整
+    this.task = {} as Task; // 保存监听回调列表
+  }
+
+  /**
+   * 获取 TUIStore 实例
+   * @returns {TUIStore}
+  */
+  static getInstance() {
+    if (!TUIStore.instance) {
+      TUIStore.instance = new TUIStore();
+    }
+    return TUIStore.instance;
+  }
+
+  /**
+   * UI 组件注册监听回调
+   * @param {StoreName} storeName store 名称
+   * @param {IOptions} options 监听信息
+   * @param {Object} params 扩展参数
+   * @param {String} params.notifyRangeWhenWatch 注册时监听时的通知范围, 'all' - 通知所有注册该 key 的监听; 'myself' - 通知本次注册该 key 的监听; 默认不通知
+  */
+  watch(storeName: StoreName, options: IOptions, params?: any) {
+    if (!this.task[storeName]) {
+      this.task[storeName] = {};
+    }
+    const watcher = this.task[storeName];
+    Object.keys(options).forEach((key) => {
+      const callback = options[key];
+      if (!watcher[key]) {
+        watcher[key] = new Map();
+      }
+      watcher[key].set(callback, 1);
+      const { notifyRangeWhenWatch } = params || {};
+      // 注册监听后, 通知所有注册该 key 的监听，使用 'all' 时要特别注意是否对其他地方的监听产生影响
+      if (notifyRangeWhenWatch === NAME.ALL) {
+        this.notify(storeName, key);
+      }
+      // 注册监听后, 仅通知自己本次监听该 key 的数据
+      if (notifyRangeWhenWatch === NAME.MYSELF) {
+        const data = this.getData(storeName, key);
+        callback.call(this, data);
+      }
+    });
+  }
+
+  /**
+   * UI 取消组件监听回调
+   * @param {StoreName} storeName store 名称
+   * @param {IOptions} options 监听信息,包含需要取消的回掉等
+   */
+  unwatch(storeName: StoreName, options: IOptions) {
+    // todo 该接口暂未支持，unwatch掉同一类，如仅传入store注销掉该store下的所有callback，同样options仅传入key注销掉该key下的所有callback
+    // options的callback function为必填参数，后续修改
+    if (!this.task[storeName]) {
+      return;
+    };
+    // if (isString(options)) {
+    //   // 移除所有的监听
+    //   if (options === '*') {
+    //     const watcher = this.task[storeName];
+    //     Object.keys(watcher).forEach(key => {
+    //       watcher[key].clear();
+    //     });
+    //   } else {
+    //     console.warn(`${NAME.PREFIX}unwatch warning: options is ${options}`);
+    //   }
+    //   return;
+    // }
+    const watcher = this.task[storeName];
+    Object.keys(options).forEach((key: string) => {
+      watcher[key].delete(options[key]);
+    });
+  }
+
+  /**
+   * 通用 store 数据更新，messageList 的变更需要单独处理
+   * @param {StoreName} storeName store 名称
+   * @param {string} key 变更的 key
+   * @param {unknown} data 变更的数据
+  */
+  update(storeName: StoreName, key: string, data: unknown) {
+    // 基本数据类型时, 如果相等, 就不进行更新, 减少不必要的 notify
+    if (isString(data) || isNumber(data) || isBoolean(data)) {
+      const currentData = this.storeMap[storeName]['store'][key]; // eslint-disable-line
+      if (currentData === data) return;
+    }
+    this.storeMap[storeName]?.update(key, data);
+    this.notify(storeName, key);
+  }
+
+  /**
+   * 获取 Store 的上一个状态值
+   * @param {StoreName} storeName store 名称
+   * @param {string} key 待获取的 key
+   * @returns {Any}
+  */
+  getPrevData(storeName: StoreName, key: string) {
+    return this.storeMap[storeName]?.getPrevData(key);
+  }
+
+  /**
+   * 获取 Store 数据
+   * @param {StoreName} storeName store 名称
+   * @param {string} key 待获取的 key
+   * @returns {Any}
+  */
+  getData(storeName: StoreName, key: string) {
+    return this.storeMap[storeName]?.getData(key);
+  }
+
+  /**
+   * UI 组件注册监听回调
+   * @param {StoreName} storeName store 名称
+   * @param {string} key 变更的 key
+  */
+  private notify(storeName: StoreName, key: string) {
+    if (!this.task[storeName]) {
+      return;
+    }
+    const watcher = this.task[storeName];
+    if (watcher[key]) {
+      const callbackMap = watcher[key];
+      const data = this.getData(storeName, key);
+      for (const [callback] of callbackMap.entries()) {
+        callback.call(this, data);
+      }
+    }
+  }
+
+  public reset(storeName: StoreName, keyList: Array<string> = [], isNotificationNeeded = false) {
+    if (storeName in this.storeMap) {
+      const store = this.storeMap[storeName];
+      // reset all
+      if (keyList.length === 0) {
+        keyList = Object.keys(store?.store);
+      }
+      store.reset(keyList);
+      if (isNotificationNeeded) {
+        keyList.forEach((key) => {
+          this.notify(storeName, key);
+        });
+      }
+    }
+  }
+  // 批量修改多个 key-value
+  public updateStore(params: any, name?: StoreName): void {
+    const storeName = name ? name : StoreName.CALL;
+    Object.keys(params).forEach((key) => {
+      this.update(storeName, key, params[key]);
+    });
+  }
+}