tuikit-atomicx-vue3 0.1.0

package/src/types/user.ts

@@ -0,0 +1,106 @@
+import { defineComponent } from 'vue';
+import { PropType } from 'vue';
+import { TUIRole, TUINetworkQuality } from './types';
+import { DeviceStatus } from './device';
+
+export enum SeatStatus {
+  On = "On",            // 在麦上
+  Off = "Off",          // 在麦下
+  OffNeedPermission= "OffNeedPermission",  // 关闭状态且需要申请权限
+  OffInvitationPending = "OffInvitationPending",   // 关闭状态且正在被邀请中
+  OffApplicationPending = "OffApplicationPending", // 关闭状态且正在申请中
+}
+
+export enum UserRoomStatus {
+  NotInRoom = "NotInRoom",       // 不在房间内
+  InRoom = "InRoom",             // 在房间内
+  InCalling = "InCalling"        // 在呼叫中
+}
+
+export enum ConnectionStatus {
+  On = "On",            // 连接
+  Off = "Off",          // 未连接
+  OffInvitationPending = "OffInvitationPending",   // 未连接状态且正在被邀请中
+  OffApplicationPending = "OffApplicationPending", // 未连接状态且正在申请中
+}
+
+export enum BattleStatus {
+  On = "On",            // 连接
+  Off = "Off",          // 未连接
+  OffInvitationPending = "OffInvitationPending",   // 未连接状态且正在被邀请中
+  OffApplicationPending = "OffApplicationPending", // 未连接状态且正在申请中
+}
+
+export enum StreamPlayStatus {
+  Loading = 'Loading',
+  Playing = 'Playing',
+  Stopped = 'Stopped',
+}
+
+export enum RequestType {
+  Seat = 'Seat',
+  Microphone = 'Microphone',
+  Camera = 'Camera',
+  ScreenShare = 'ScreenShare',
+  Connection = 'Connection',
+}
+
+export interface BattleInfo {
+  score: number;
+}
+
+export interface UserInfo {
+  // 基础信息
+  userId: string;
+  userName: string;
+  avatarUrl: string;
+  nameCard: string;
+  roomCustomInfo: Record<string, any>;
+  userRole: TUIRole;
+  isMessageDisabled: boolean;
+  joinedTimestamp: number;
+  // 会控信息
+  seatStatus: SeatStatus;
+  onSeatTimestamp: number;   // 新增，需要评审
+  // 设备状态
+  microphoneStatus: DeviceStatus;
+  cameraStatus: DeviceStatus; // 有摄像头但是要播放 cdn 的流
+  screenStatus: DeviceStatus;
+  // 媒体流
+  audioVolume: number;
+  videoPlayStatus: StreamPlayStatus;
+  screenPlayStatus: StreamPlayStatus;
+  // 网络
+  networkQuality: TUINetworkQuality;
+  // 跨房字段
+  roomId: string;
+  userRoomStatus: UserRoomStatus;
+  hostConnectionStatus: ConnectionStatus;
+}
+
+export enum UserAction {
+  AudioAction = 'AudioAction',
+  VideoAction = 'VideoAction',
+  ChatAction = 'ChatAction',
+  AdministratorAction = 'AdministratorAction',
+  TransferOwnerAction = 'TransferOwnerAction',
+  KickOutOfRoomAction = 'KickOutOfRoomAction',
+  ChangeUserNameCardAction = 'ChangeUserNameCardAction',
+  SeatAction = 'SeatAction',
+  InviteEnterRoomAction = 'InviteEnterRoomAction',
+
+  InviteOnSeatAction = 'InviteOnSeatAction',
+  AgreeOnSeatAction = 'AgreeOnSeatAction',
+  DenyOnSeatAction = 'DenyOnSeatAction',
+  KickOffSeatAction = 'KickOutSeatAction',
+}
+
+export type ActionType<T> = {
+  key: T;
+  icon?: PropType<ReturnType<typeof defineComponent>>;
+  label: string;
+  handler: (data?: any) => void;
+  style?: string;
+};
+
+export type UserActionType = ActionType<UserAction>;

package/src/types/videoMixer.ts

@@ -0,0 +1,12 @@
+import { TRTCMediaSource } from '@tencentcloud/tuiroom-engine-js';
+
+export type MediaSource = TRTCMediaSource & {
+  name: string;
+  text?: {
+    content: string;
+    fontSize?: number;
+    fontColor?: string;
+    fontFamily?: string;
+    fontWeight?: number;
+  };
+};

package/src/utils/__tests__/time.test.js

@@ -0,0 +1,82 @@
+// time.test.js
+// 简单的测试脚本，用于测试 time.ts 中的 getTimeStampAuto 函数
+
+// 导入需要测试的函数
+import { getTimeStampAuto } from '../../../dist/utils/time.js';
+
+// 测试函数
+function testGetTimeStampAuto() {
+  console.log('===== getTimeStampAuto 函数测试 =====');
+
+  // 获取当前时间
+  const now = new Date();
+  console.log('当前时间:', now.toLocaleString());
+  console.log('');
+
+  // 测试今天的时间
+  console.log('1. 今天的时间:');
+  const today = now.getTime();
+  console.log('  英文:', getTimeStampAuto(today, 'en-US'));
+  console.log('  中文:', getTimeStampAuto(today, 'zh-CN'));
+  console.log('');
+
+  // 测试昨天的时间
+  console.log('2. 昨天的时间:');
+  const yesterday = new Date(now);
+  yesterday.setDate(yesterday.getDate() - 1);
+  console.log('  英文:', getTimeStampAuto(yesterday.getTime(), 'en-US'));
+  console.log('  中文:', getTimeStampAuto(yesterday.getTime(), 'zh-CN'));
+  console.log('');
+
+  // 测试本周的时间
+  console.log('3. 本周的时间:');
+  // 获取当前是周几
+  const dayOfWeek = now.getDay(); // 0 是周日，1 是周一，以此类推
+
+  // 如果今天不是周三，则测试周三的时间
+  // 如果今天是周三，则测试周二的时间
+  const testDay = dayOfWeek !== 3 ? 3 : 2;
+  const weekday = new Date(now);
+  weekday.setDate(weekday.getDate() - dayOfWeek + testDay);
+
+  console.log(`  测试周${testDay === 0 ? '日' : testDay}的时间:`);
+  console.log('  英文:', getTimeStampAuto(weekday.getTime(), 'en-US'));
+  console.log('  中文:', getTimeStampAuto(weekday.getTime(), 'zh-CN'));
+  console.log('');
+
+  // 测试早于本周但属于今年的时间
+  console.log('4. 早于本周但属于今年的时间:');
+  const thisYear = new Date(now);
+  // 设置为2个月前
+  thisYear.setMonth(thisYear.getMonth() - 2);
+  console.log('  英文:', getTimeStampAuto(thisYear.getTime(), 'en-US'));
+  console.log('  中文:', getTimeStampAuto(thisYear.getTime(), 'zh-CN'));
+  console.log('  日语:', getTimeStampAuto(thisYear.getTime(), 'ja-JP'));
+  console.log('  韩语:', getTimeStampAuto(thisYear.getTime(), 'ko-KR'));
+  console.log('');
+  
+  // 测试7月15日的特定日期
+  console.log('5. 测试特定日期 (7月15日):');
+  const specificDate = new Date(now.getFullYear(), 6, 15); // 7月15日，月份从0开始
+  console.log('  英文:', getTimeStampAuto(specificDate.getTime(), 'en-US'));
+  console.log('  中文:', getTimeStampAuto(specificDate.getTime(), 'zh-CN'));
+  console.log('');
+
+  // 测试去年的时间
+  console.log('6. 去年的时间:');
+  const lastYear = new Date(now);
+  lastYear.setFullYear(lastYear.getFullYear() - 1);
+  console.log('  英文:', getTimeStampAuto(lastYear.getTime(), 'en-US'));
+  console.log('  中文:', getTimeStampAuto(lastYear.getTime(), 'zh-CN'));
+  console.log('');
+
+  // 测试空时间
+  console.log('7. 空时间:');
+  console.log('  空时间:', getTimeStampAuto(0, 'en-US'));
+  console.log('');
+
+  console.log('===== 测试完成 =====');
+}
+
+// 运行测试
+testGetTimeStampAuto();

package/src/utils/call.ts

@@ -0,0 +1,21 @@
+import { safeJSONParse } from './json';
+import type { IMessageModel as MessageModel } from '@tencentcloud/chat-uikit-engine';
+
+function isCallMessage(message: MessageModel) {
+  try {
+    const payloadData = safeJSONParse(message.payload.data, {} as any);
+    if (payloadData.businessID === 1 && payloadData.data) {
+      const payloadDataData = safeJSONParse(payloadData.data, {} as any);
+      if (payloadDataData.businessID === 'av_call') {
+        return true;
+      }
+    }
+  } catch {
+    return false;
+  }
+  return false;
+}
+
+export {
+  isCallMessage,
+};

package/src/utils/copyText.ts

@@ -0,0 +1,52 @@
+async function copyTextToClipboard(text: string): Promise<boolean> {
+  // Try Clipboard API first
+  if (navigator.clipboard?.writeText) {
+    try {
+      await navigator.clipboard.writeText(text);
+      return true;
+    } catch (err) {
+      console.warn('Clipboard API failed:', err);
+    }
+  }
+
+  // Fallback 1: execCommand (PC)
+  try {
+    const textarea = document.createElement('textarea');
+    textarea.value = text;
+    // Prevent scrolling
+    textarea.style.position = 'fixed';
+    textarea.style.opacity = '0';
+    document.body.appendChild(textarea);
+
+    // Special handling for iOS
+    if (navigator.userAgent.match(/ipad|iphone/i)) {
+      textarea.contentEditable = 'true';
+      textarea.readOnly = false;
+
+      const range = document.createRange();
+      range.selectNodeContents(textarea);
+
+      const selection = window.getSelection();
+      if (selection) {
+        selection.removeAllRanges();
+        selection.addRange(range);
+        textarea.setSelectionRange(0, 999999);
+      }
+    } else {
+      textarea.select();
+    }
+
+    const result = document.execCommand('copy');
+    document.body.removeChild(textarea);
+    return result;
+  } catch (err) {
+    console.warn('execCommand failed:', err);
+  }
+
+  // Fallback 2: Prompt user to copy manually
+  throw new Error('Failed to copy text to clipboard, please copy manually');
+}
+
+export {
+  copyTextToClipboard,
+};

package/src/utils/documentLink.ts

@@ -0,0 +1,23 @@
+const Link = {
+  product: {
+    label: '产品文档',
+    url: 'https://cloud.tencent.com/document/product/269/1499#.E7.BE.A4.E7.BB.84.E5.8A.9F.E8.83.BD',
+  },
+  customMessage: {
+    label: '自定义消息',
+    url: 'https://web.sdk.qcloud.com/im/doc/v3/zh-cn/SDK.html#createCustomMessage',
+  },
+  complaint: {
+    label: '点此投诉',
+    url: 'https://cloud.tencent.com/apply/p/xc3oaubi98g',
+  },
+  implement: {
+    label: '集成TUICallKit',
+    url: 'https://cloud.tencent.com/document/product/269/79861',
+  },
+  purchase: {
+    label: '开通腾讯实时音视频服务',
+    url: 'https://cloud.tencent.com/document/product/1640/79968',
+  },
+};
+export default Link;

package/src/utils/domOperation.ts

@@ -0,0 +1,281 @@
+import { isWeChat } from './environment';
+
+interface IDomRect {
+  id: string;
+  top: number;
+  left: number;
+  right: number;
+  width: number;
+  bottom: number;
+  height: number;
+  x?: number;
+  y?: number;
+}
+
+interface IScrollInfo {
+  scrollHeight: number;
+  scrollLeft: number;
+  scrollTop: number;
+  scrollWidth: number;
+  id: string;
+}
+
+interface IFields {
+  [key: string]: any;
+}
+
+declare const uni: any;
+
+type registeredPage = 'messageList';
+
+export const instanceMapping = new Map<registeredPage, any>();
+
+/**
+ *
+ * @param selector string: e.g. #app | .class
+ * @param instanceName string
+ * @returns Promise<IDomRect>
+ */
+export function getBoundingClientRect(
+  selector: string | HTMLElement,
+  instanceName?: registeredPage
+): Promise<IDomRect> {
+  if (!selector)
+    return Promise.reject(
+      new Error(
+        `getBoundingClientRect() get error selector ${typeof selector}.`
+      )
+    );
+
+  if (window || document) {
+    const dom: HTMLElement | null =
+      typeof selector === 'object'
+        ? selector
+        : document.querySelector(selector);
+    if (!dom)
+      return Promise.reject(
+        new Error(`getBoundingClientRect() can't find ${selector} dom.`)
+      );
+    const domRect = dom.getBoundingClientRect();
+    return Promise.resolve({
+      id: dom.id,
+      top: domRect.top,
+      left: domRect.left,
+      right: domRect.right,
+      bottom: domRect.bottom,
+      width: domRect.width,
+      height: domRect.height,
+      x: domRect.x,
+      y: domRect.y,
+    });
+  }
+
+  if (isWeChat) {
+    if (!instanceName)
+      return Promise.reject(
+        new Error('uni.getBoundingClientRect() need instanceName in params.')
+      );
+    const _query = uni
+      .createSelectorQuery()
+      .in(instanceMapping.get(instanceName));
+    return new Promise((resolve, reject) => {
+      _query
+        .select(selector)
+        .boundingClientRect((data: IDomRect) => {
+          if (data) {
+            resolve(data);
+          }
+        })
+        .exec();
+      setTimeout(
+        () =>
+          reject(new Error(`uni.getBoundingClientRect(${selector}) timeout.`)),
+        500
+      );
+    });
+  }
+
+  return Promise.reject(new Error('getBoundingClientRect() occur error'));
+}
+
+export function getBoundingClientRectSync(
+  selector: string | HTMLElement
+): IDomRect {
+  if (isWeChat) {
+    throw new Error('getBoundingClientRectSync() can not use in uni-app.');
+  }
+
+  if (window || document) {
+    const dom: HTMLElement | null =
+      typeof selector === 'object'
+        ? selector
+        : document.querySelector(selector);
+    if (!dom)
+      throw new Error(
+        `getBoundingClientRectSync() can't find ${selector} dom.`
+      );
+    const domRect = dom.getBoundingClientRect();
+    return {
+      id: dom.id,
+      top: domRect.top,
+      left: domRect.left,
+      right: domRect.right,
+      bottom: domRect.bottom,
+      width: domRect.width,
+      height: domRect.height,
+      x: domRect.x,
+      y: domRect.y,
+    };
+  }
+
+  throw new Error('getBoundingClientRectSync() occur error.');
+}
+
+/**
+ *
+ * @param selector string: e.g. #app | .class
+ * @param instanceName string
+ * @returns Promise<IScrollInfo>
+ */
+export function getScrollInfo(
+  selector: string | HTMLElement,
+  instanceName?: registeredPage
+): Promise<IScrollInfo> {
+  if (!selector)
+    return Promise.reject(
+      new Error(`getScrollInfo() get error selector ${typeof selector}.`)
+    );
+
+  if (!isWeChat && window) {
+    const dom: HTMLElement | null =
+      typeof selector === 'object'
+        ? selector
+        : document.querySelector(selector);
+    if (!dom)
+      return Promise.reject(
+        new Error(`getScrollInfo() can't find ${selector} dom.`)
+      );
+    return Promise.resolve({
+      id: dom.id,
+      scrollTop: dom.scrollTop,
+      scrollLeft: dom.scrollLeft,
+      scrollWidth: dom.scrollWidth,
+      scrollHeight: dom.scrollHeight,
+    });
+  }
+
+  if (isWeChat) {
+    if (!instanceName)
+      return Promise.reject(
+        new Error('uni.getScrollInfo() need instanceName in params.')
+      );
+    const _query = uni
+      .createSelectorQuery()
+      .in(instanceMapping.get(instanceName));
+    return new Promise((resolve, reject) => {
+      _query
+        .select(selector)
+        .scrollOffset((data: IScrollInfo) => {
+          if (data) {
+            resolve(data);
+          }
+        })
+        .exec();
+      setTimeout(
+        () => reject(new Error(`uni.getScrollInfo(${selector}) timeout.`)),
+        500
+      );
+    });
+  }
+
+  return Promise.reject(new Error('getScrollInfo() occur error'));
+}
+
+export function getScrollInfoSync(selector: string | HTMLElement): IScrollInfo {
+  if (isWeChat) {
+    throw new Error('getScrollInfoSync() can not use in uni-app.');
+  }
+
+  if (!isWeChat && window) {
+    const dom: HTMLElement | null =
+      typeof selector === 'object'
+        ? selector
+        : document.querySelector(selector);
+    if (!dom)
+      throw new Error(`getScrollInfoSync() can't find ${selector} dom.`);
+    return {
+      id: dom.id,
+      scrollTop: dom.scrollTop,
+      scrollLeft: dom.scrollLeft,
+      scrollWidth: dom.scrollWidth,
+      scrollHeight: dom.scrollHeight,
+    };
+  }
+
+  throw new Error('getScrollInfoSync() occur error.');
+}
+
+export function getFields(
+  selector: string | HTMLElement,
+  instanceName?: registeredPage
+): Promise<IFields> {
+  if (isWeChat) {
+    if (!instanceName)
+      return Promise.reject(
+        new Error('uni.getFields() need instanceName in params.')
+      );
+    const _query = uni
+      .createSelectorQuery()
+      .in(instanceMapping.get(instanceName));
+    return new Promise((resolve, reject) => {
+      _query
+        .select(selector)
+        .fields(
+          {
+            rect: true,
+            size: true,
+            scrollOffset: true,
+          },
+          (data: IFields) => {
+            if (data) {
+              resolve(data);
+            }
+          }
+        )
+        .exec();
+      setTimeout(
+        () => reject(new Error(`get ${selector} fields timeout.`)),
+        500
+      );
+    });
+  }
+
+  return Promise.reject(new Error('getFields() occur error'));
+}
+
+export function getContentSize(element: HTMLElement) {
+  const computedStyle = getComputedStyle(element);
+
+  const paddingTop = Number(computedStyle.paddingTop.replace('px', ''));
+  const paddingBottom = Number(computedStyle.paddingBottom.replace('px', ''));
+  const borderTop = Number(computedStyle.borderTopWidth.replace('px', ''));
+  const borderBottom = Number(
+    computedStyle.borderBottomWidth.replace('px', '')
+  );
+
+  const paddingLeft = Number(computedStyle.paddingLeft.replace('px', ''));
+  const paddingRight = Number(computedStyle.paddingRight.replace('px', ''));
+  const borderLeft = Number(computedStyle.borderLeftWidth.replace('px', ''));
+  const borderRight = Number(computedStyle.borderRightWidth.replace('px', ''));
+
+  const contentWidth =
+    element.offsetWidth - paddingLeft - paddingRight - borderLeft - borderRight;
+  const contentHeight =
+    element.offsetHeight -
+    paddingTop -
+    paddingBottom -
+    borderTop -
+    borderBottom;
+
+  return { width: contentWidth, height: contentHeight };
+}

package/src/utils/downFile.ts

@@ -0,0 +1,32 @@
+function downFile(url: string, fileName?: string) {
+  const options = {
+    mode: 'cors',
+    headers: new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' }),
+  } as RequestInit;
+
+  let _fileName = fileName;
+  if (!fileName) {
+    _fileName = Math.random().toString(36).substring(7);
+  }
+  // If the browser supports fetch, use blob to download, so as to avoid the browser clicking the a tag and jumping to the preview of the new page
+  if (typeof window.fetch === 'function') {
+    fetch(url, options)
+      .then(res => res.blob())
+      .then((blob) => {
+        const a = document.createElement('a');
+        const url = window.URL.createObjectURL(blob);
+        a.href = url;
+        a.download = _fileName || 'file';
+        a.click();
+      });
+  } else {
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = _fileName || 'file';
+    a.click();
+  }
+}
+
+export {
+  downFile,
+};

package/src/utils/emoji.ts

@@ -0,0 +1,50 @@
+import { i18next } from '@tencentcloud/uikit-base-component-vue3';
+import { emojiUrlMap } from '../constants/emoji';
+
+/**
+ * Transforms a text containing emoji keys to a emoji names with i18n
+ * Example:
+ * 'hello[TUIEmoji_Smile]!' => 'hello[Smile]!''
+ * @param {string} text - The text containing emoji keys.
+ * @return {string} The transformed text with emoji keys replaced by emoji names.
+ */
+export function transformTextWithEmojiKeyToName(text: string) {
+  if (!text) {
+    return '';
+  }
+  const reg = /(\[.+?\])/g;
+  let transformResult: string = text;
+  if (reg.test(text)) {
+    transformResult = text.replace(reg, match => emojiUrlMap[match] ? i18next.t(`Emoji.${match}`) : match);
+  }
+  return transformResult;
+}
+
+const emojiTranslationMap: Record<string, any> = {};
+
+/**
+ * Transforms a text containing emoji names to emoji keys with i18n
+ * Example:
+ * 'hello[Smile]!' => 'hello[TUIEmoji_Smile]!'
+ * @param {string} text - The text containing emoji names.
+ * @return {string} The transformed text with emoji names replaced by emoji keys.
+ */
+export function transformTextWithEmojiNameToKey(text: string) {
+  if (!text) {
+    return '';
+  }
+  const reg = /(\[.+?\])/g;
+  let transformResult: string = text;
+  if (reg.test(text)) {
+    const currentLanguage = i18next.language;
+    if (!emojiTranslationMap[currentLanguage]) {
+      const lngResource = i18next.getDataByLanguage(currentLanguage);
+      if (lngResource?.translation?.Emoji) {
+        emojiTranslationMap[currentLanguage]
+          = Object.fromEntries(Object.entries(lngResource.translation.Emoji).map(([key, value]) => [value, key]));
+      }
+    }
+    transformResult = text.replace(reg, match => emojiTranslationMap[currentLanguage]?.match ?? match);
+  }
+  return transformResult;
+}

package/src/utils/enableSampleTaskStatus.ts

@@ -0,0 +1,8 @@
+import { TUIStore, StoreName } from "@tencentcloud/chat-uikit-engine";
+export function enableSampleTaskStatus(taskKey: string) {
+  const tasks = TUIStore.getData(StoreName.APP, "tasks");
+  if (taskKey in tasks && !tasks[taskKey]) {
+    tasks[taskKey] = true;
+    TUIStore.update(StoreName.APP, "tasks", tasks);
+  }
+}

package/src/utils/env.ts

@@ -0,0 +1,17 @@
+import { getPlatform } from '@tencentcloud/universal-api';
+
+declare const uni: any;
+
+export const isPC = getPlatform() === 'pc';
+
+export const isH5 = getPlatform() === 'h5';
+
+export const isWeChat = getPlatform() === 'wechat';
+
+export const isApp = getPlatform() === 'app';
+
+export const isUniFrameWork = typeof uni !== 'undefined';
+
+// H5, mini programs, and apps are all considered mobile.
+// If you need to unify the mobile UI style, you can directly use isMobile to control
+export const isMobile = isH5 || isWeChat || isApp;