@tencentcloud/roomkit-electron-vue3 2.6.7-beta.1 → 2.7.0

package/src/TUIRoom/components/Whiteboard/index.vue

@@ -2,25 +2,13 @@
   <div>
     <div class="canvas-wrap" ref="canvasWrapRef">
       <div class="tool-box-out" v-show="isControllerVisiable">
-        <ToolBox />
+        <ToolBox
+          @updateSetting="updateSetting"
+          :step="step"
+          :history-list-length="historyListLength"
+          :change-tool="changeTool"
+        />
       </div>
-      <div class="redo-undo-box" v-show="isControllerVisiable">
-        <RedoUndo />
-      </div>
-      <div class="controller-box">
-        <div class="save-controller" v-show="isSaveControllerVisiable">
-          <SaveController />
-        </div>
-        <div class="close-controller" v-show="isControllerVisiable">
-          <CloseController />
-        </div>
-      </div>
-      <div class="image-controller" v-show="isImageControllerVisiable">
-        <ImageController />
-      </div>
-      <!-- <div class="zoom-controller-box">
-        <ZoomController />
-      </div> -->
       <canvas class="whiteboard-canvas" id="canvas"></canvas>
     </div>
   </div>
@@ -29,18 +17,27 @@
 <script setup lang="ts">
 import { computed, onMounted, provide, Ref, ref, onUnmounted } from 'vue';
 import { ipcRenderer } from 'electron';
+import {
+  ToolSettings,
+  DrawingTool,
+  toolCursorStyleMap,
+} from '../Whiteboard/type';
 import FabricCanvas from './core';
-import ToolBox from './controller/ToolBox/index.vue';
-import RedoUndo from './controller/RedoUndo/index.vue';
-import CloseController from './controller/CloseController/index.vue';
+import HistoryManager from './core/historyManager';
+import ToolBox from './ToolBox/index.vue';
+
 import { getUrlParam } from '../../utils/utils';
-import SaveController from './controller/SaveController/index.vue';
-import ImageController from './controller/ImageController/index.vue';
+import logger from '../../../TUIRoom/utils/common/logger';
 
 const isAnnotationWin: Ref<boolean> = ref(false);
 const isAnnotationStarted: Ref<boolean> = ref(false);
 const canvas = ref<FabricCanvas>();
 const canvasWrapRef = ref<HTMLDivElement>();
+let upperCanvas = null as HTMLCanvasElement | null;
+const step = ref<number>(0);
+const historyListLength = ref<number>(0);
+const changeTool = ref<string>('');
+let historyManager: HistoryManager;
 
 provide('canvas', canvas);
 
@@ -48,11 +45,33 @@ const isControllerVisiable = computed(
   () => !isAnnotationWin.value || isAnnotationStarted.value
 );
 
-const isSaveControllerVisiable = computed(() => !isAnnotationWin.value);
-const isImageControllerVisiable = computed(() => !isAnnotationWin.value);
 function init() {
   const fabricCanvas = new FabricCanvas('canvas');
   canvas.value = fabricCanvas;
+  historyManager = new HistoryManager(canvas.value);
+}
+
+const toolActiveMap = {
+  [DrawingTool.Image]: () => insertImage(),
+  [DrawingTool.Clear]: () => historyManager.clear(),
+  [DrawingTool.Redo]: () => historyManager.redo(),
+  [DrawingTool.Undo]: () => historyManager.undo(),
+  [DrawingTool.Download]: () => downloadCanvas(),
+  [DrawingTool.Retract]: () => stopWhiteboard(),
+  [DrawingTool.Select]: () => canvas.value?.setDrawingTool(DrawingTool.Select),
+};
+
+function stopWhiteboard() {
+  canvas.value?.discardActiveObject();
+  canvas.value?.renderAll();
+  let isAnnotationWin = false;
+  const annotationParam = getUrlParam('isAnnotationWin');
+  if (annotationParam && annotationParam === 'true') {
+    isAnnotationWin = true;
+  }
+  if (isAnnotationWin) {
+    ipcRenderer.send('annotation:stop-from-annotation-window');
+  }
 }
 
 function resizeCanvas() {
@@ -60,6 +79,125 @@ function resizeCanvas() {
   canvas.value.setHeight(canvasWrapRef.value?.offsetHeight);
 }
 
+function updateSetting(toolSetting: ToolSettings) {
+  const behavior =
+    toolActiveMap[toolSetting.drawingTool as keyof typeof toolActiveMap];
+  if (behavior) {
+    behavior();
+    if (changeTool.value === DrawingTool.Select) {
+      return;
+    }
+    changeTool.value = '';
+    return;
+  }
+  const currentClass =
+    toolCursorStyleMap[
+      toolSetting.drawingTool as keyof typeof toolCursorStyleMap
+    ];
+  Object.values(toolCursorStyleMap).forEach(className => {
+    if (className) {
+      upperCanvas?.classList.remove(className);
+    }
+  });
+  if (currentClass) {
+    upperCanvas?.classList.add(currentClass);
+    canvas.value?.setDrawingTool(toolSetting.drawingTool);
+    changeTool.value = '';
+    return;
+  }
+  canvas.value?.setDrawingTool(toolSetting.drawingTool);
+  canvas.value?.setOptions(toolSetting);
+  changeTool.value = '';
+}
+
+function insertImage() {
+  if (!canvas.value || !canvas.value) {
+    logger.error('Canvas is not available or not initialized.');
+    return;
+  }
+  const input = document.createElement('input');
+  input.type = 'file';
+  const mimeTypes = ['image/png', 'image/jpeg', 'image/jpg', 'image/bmp'].join(
+    ','
+  );
+  input.accept = mimeTypes;
+  input.onchange = event => {
+    const file = (event.target as HTMLInputElement).files?.[0];
+    if (!file) {
+      logger.info('No file selected.');
+      return;
+    }
+    const validTypes = mimeTypes.split(',').map(type => type.trim());
+    if (!validTypes.includes(file.type)) {
+      logger.error(
+        'Invalid file type. Please upload a PNG, JPEG, JPG, or BMP image.'
+      );
+      return;
+    }
+    const reader = new FileReader();
+    reader.onload = event => {
+      const img = new Image();
+      img.onload = () => {
+        canvas.value?.insertImage(img.src);
+      };
+      img.src = event.target?.result as string;
+    };
+    reader.onerror = () => {
+      logger.error('Failed to read file.');
+    };
+    reader.readAsDataURL(file);
+  };
+  input.onerror = () => {
+    logger.error('Failed to create file input.');
+  };
+  input.click();
+}
+
+function generateImageName() {
+  const date = new Date();
+  const year = date.getFullYear();
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  const hours = date.getHours();
+  const minutes = date.getMinutes();
+  const seconds = date.getSeconds();
+  const formattedMonth = month < 10 ? `0${month}` : month;
+  const formattedDay = day < 10 ? `0${day}` : day;
+  const formattedHours = hours < 10 ? `0${hours}` : hours;
+  const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes;
+  const formattedSeconds = seconds < 10 ? `0${seconds}` : seconds;
+  return `${year}-${formattedMonth}-${formattedDay}-${formattedHours}.${formattedMinutes}.${formattedSeconds}.png`;
+}
+
+function downloadCanvas() {
+  if (!canvas.value || !canvas.value) {
+    return;
+  }
+  const dataURL = canvas.value.toDataURL({
+    format: 'png',
+  } as any);
+  const link = document.createElement('a');
+  link.style.display = 'none';
+  link.href = dataURL;
+  link.download = generateImageName();
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  ipcRenderer.send('whiteboard:save-from-whiteboard-window');
+}
+
+function handleStepChange(stepNumber: number) {
+  step.value = stepNumber;
+}
+
+function handleHistoryChange(historyListLengthNumber: number) {
+  historyListLength.value = historyListLengthNumber;
+}
+
+function handleToolChange() {
+  changeTool.value = DrawingTool.Select;
+}
+
 onMounted(() => {
   init();
 
@@ -67,18 +205,25 @@ onMounted(() => {
   if (annotationParam && annotationParam === 'true') {
     isAnnotationWin.value = true;
   }
-
   if (!isAnnotationWin.value) {
     canvas.value?.setBackgroundColor('white');
   }
+  upperCanvas = document.querySelector(
+    '.upper-canvas.whiteboard-canvas'
+  ) as HTMLCanvasElement | null;
 
+  historyManager.on('change-step', handleStepChange);
+  historyManager.on('change-history', handleHistoryChange);
+  canvas.value?.on('insert-images', handleToolChange);
   canvas.value.setWidth(canvasWrapRef.value?.offsetWidth);
   canvas.value.setHeight(canvasWrapRef.value?.offsetHeight);
-
   window.addEventListener('resize', resizeCanvas);
 });
 
 onUnmounted(() => {
+  historyManager.off('change-step', handleStepChange);
+  historyManager.off('change-history', handleHistoryChange);
+  canvas.value?.off('insert-images', handleToolChange);
   window.removeEventListener('resize', resizeCanvas);
 });
 
@@ -93,17 +238,27 @@ ipcRenderer.on('annotation:annotating-stopped', () => {
 ipcRenderer.on('whiteboard:clear', () => {
   if (canvas.value) {
     canvas.value.reloadCanvas();
+    changeTool.value = DrawingTool.Pencil;
   }
 });
 
 ipcRenderer.on('annotation:clear', () => {
   if (canvas.value) {
     canvas.value.reloadCanvas();
+    changeTool.value = DrawingTool.Pencil;
   }
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
+.eraser-cursor {
+  cursor: url('./resources/editor/eraser-cursor.svg'), auto !important;
+}
+
+.laser-cursor {
+  cursor: url('./resources/editor/laser-cursor.svg'), auto !important;
+}
+
 .canvas-wrap {
   position: relative;
   width: 100vw;
@@ -118,42 +273,12 @@ ipcRenderer.on('annotation:clear', () => {
   z-index: 3;
   display: flex;
   flex-direction: column;
+  align-items: center;
   justify-content: center;
   width: 0;
   height: 100%;
 }
 
-.redo-undo-box {
-  position: absolute;
-  bottom: 8px;
-  left: 8px;
-  z-index: 3;
-  display: flex;
-}
-
-.zoom-controller-box {
-  position: absolute;
-  bottom: 8px;
-  left: 76px;
-  z-index: 3;
-}
-
-.controller-box {
-  position: absolute;
-  top: 18px;
-  right: 18px;
-  z-index: 3;
-  display: flex;
-}
-
-.image-controller {
-  position: absolute;
-  right: 18px;
-  bottom: 18px;
-  z-index: 3;
-  display: flex;
-}
-
 .whiteboard-canvas {
   width: 100%;
   height: 100%;

package/src/TUIRoom/components/Whiteboard/resources/editor/eraser-cursor.svg

@@ -0,0 +1,18 @@
+  <svg
+    width="20"
+    height="17"
+    viewBox="0 0 20 17"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M11.4578 14.4166L5.88893 7.54161L13.2986 1.95801L18.6585 9.07086L12.8559 13.4434L11.4578 14.4166ZM11.4578 14.4166L9.85831 15.6978L5.45685 15.6974L1.69336 10.7031L6.04101 7.42695M5.50176 15.6966H18.5683"
+      stroke="#22262E"
+      style="
+        stroke: #22262e;
+        stroke: color(display-p3 0.1333 0.149 0.1804);
+        stroke-opacity: 1;
+      "
+      stroke-width="1.66667"
+    />
+  </svg>

package/src/TUIRoom/components/Whiteboard/resources/editor/laser-cursor.svg

@@ -0,0 +1,28 @@
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M8.70147 10.0003C8.70147 10.7174 9.28278 11.2987 9.99986 11.2987C10.7169 11.2987 11.2983 10.7174 11.2983 10.0003C11.2983 9.28322 10.7169 8.7019 9.99986 8.7019C9.28278 8.7019 8.70147 9.28322 8.70147 10.0003Z"
+      fill="#22262E"
+      style="
+        fill: #22262e;
+        fill: color(display-p3 0.1333 0.149 0.1804);
+        fill-opacity: 1;
+      "
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M9.99984 19.1666C4.93723 19.1666 0.833169 15.0625 0.833169 9.99992C0.83317 4.93731 4.93723 0.833251 9.99984 0.833252C15.0624 0.833252 19.1665 4.93731 19.1665 9.99992C19.1665 15.0625 15.0624 19.1666 9.99984 19.1666ZM9.1665 17.4541C5.69015 17.0699 2.9299 14.3096 2.54561 10.8333L4.99984 10.8333L4.99984 9.16659L2.54561 9.16658C2.9299 5.69026 5.69013 2.93001 9.16645 2.5457L9.1663 4.99971L10.833 4.99972L10.8331 2.54569C14.3095 2.92995 17.0698 5.69022 17.4541 9.16659L14.9999 9.16659L14.9999 10.8333L17.4541 10.8333C17.0698 14.3096 14.3095 17.0699 10.8332 17.4541L10.8332 14.9999L9.1665 14.9999L9.1665 17.4541Z"
+      fill="#22262E"
+      style="
+        fill: #22262e;
+        fill: color(display-p3 0.1333 0.149 0.1804);
+        fill-opacity: 1;
+      "
+    />
+  </svg>

package/src/TUIRoom/components/Whiteboard/type.ts

@@ -0,0 +1,53 @@
+export enum DrawingTool {
+  Pointer = 'Pointer',
+  Laser = 'Laser',
+  Rectangle = 'Rectangle',
+  Triangle = 'Triangle',
+  Circle = 'Circle',
+  Ellipse = 'Ellipse',
+  Line = 'Line',
+  Arrow = 'Arrow',
+  Text = 'Text',
+  Pencil = 'Pencil',
+  Select = 'Select',
+  Eraser = 'Eraser',
+  Image = 'Image',
+  Clear = 'Clear',
+  Redo = 'Redo',
+  Undo = 'Undo',
+  Download = 'Download',
+  Retract = 'Retract',
+  None = 'null',
+}
+
+export interface ShapeOptions {
+  stroke?: string;
+  strokeWidth?: number;
+  fill?: string;
+  opacity?: number;
+  lineDash?: number[];
+}
+
+export interface ToolSettings {
+  drawingTool: DrawingTool;
+  shapeOptions?: ShapeOptions;
+}
+
+export const toolCursorStyleMap = {
+  [DrawingTool.Laser]: 'laser-cursor',
+  [DrawingTool.Eraser]: 'eraser-cursor',
+  [DrawingTool.Pointer]: null,
+  [DrawingTool.Rectangle]: null,
+  [DrawingTool.Triangle]: null,
+  [DrawingTool.Circle]: null,
+  [DrawingTool.Ellipse]: null,
+  [DrawingTool.Line]: null,
+  [DrawingTool.Arrow]: null,
+  [DrawingTool.Text]: null,
+  [DrawingTool.Pencil]: null,
+  [DrawingTool.Select]: null,
+  [DrawingTool.Download]: null,
+  [DrawingTool.Clear]: null,
+  [DrawingTool.Redo]: null,
+  [DrawingTool.Undo]: null,
+};

package/src/TUIRoom/components/common/base/ActionSheep.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <div class="mask" v-show="show && showMask" @click.stop="toggleShow"></div>
+    <div class="mask" v-show="show && showMask" v-tap="toggleShow"></div>
     <div class="container" v-show="show" :style="{ height: props.height }">
-      <div class="container-close" @click="toggleShow" v-if="showClose">
+      <div class="container-close" v-tap="toggleShow" v-if="showClose">
         <svg-icon :icon="ArrowDown" />
       </div>
       <div v-if="title" class="container-header">{{ title }}</div>
@@ -14,6 +14,7 @@
 import { ref, defineProps, watch, defineEmits } from 'vue';
 import SvgIcon from './SvgIcon.vue';
 import ArrowDown from '../icons/ArrowDown.vue';
+import vTap from '../../../directives/vTap';
 const props = defineProps({
   visible: {
     type: Boolean,
@@ -36,7 +37,7 @@ const props = defineProps({
     default: '',
   },
 });
-const emit = defineEmits(['input']);
+const emit = defineEmits(['input', 'close']);
 const show = ref(false);
 
 watch(
@@ -44,9 +45,20 @@ watch(
   val => (show.value = val),
   { immediate: true }
 );
-watch(show, val => emit('input', val), { immediate: true });
+watch(
+  show,
+  val => {
+    emit('input', val);
+  },
+  { immediate: true }
+);
 
-const toggleShow = () => (show.value = !show.value);
+const toggleShow = () => {
+  show.value = !show.value;
+  if (!show.value) {
+    emit('close');
+  }
+};
 </script>
 <style scoped lang="scss">
 .mask {

package/src/TUIRoom/components/common/base/Input/index.vue

@@ -9,10 +9,10 @@
       :placeholder="placeholder"
       :disabled="disabled"
       :maxlength="props.maxlength"
-      :type="type"
+      :type="props.type"
       :enterkeyhint="enterkeyhint"
       :readonly="readonly"
-      :style="{ paddingRight: hasSuffixIcon ? '40px' : '16px' }"
+      :style="inputStyle"
       @focus="focus"
       @blur="blur"
       @keyup.enter="done"
@@ -69,6 +69,14 @@ interface Props {
   select?: (data: any) => any;
   maxlength?: string;
   border?: boolean;
+  align?:
+    | 'center'
+    | 'end'
+    | 'justify'
+    | 'left'
+    | 'match-parent'
+    | 'right'
+    | 'start';
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -81,6 +89,7 @@ const props = withDefaults(defineProps<Props>(), {
   enterkeyhint: '',
   maxlength: '80',
   border: true,
+  align: 'left',
 });
 
 const themeClass = computed(() =>
@@ -163,6 +172,20 @@ const showResults = computed(
 );
 
 const hasSuffixIcon = computed(() => !!slots.suffixIcon);
+
+const inputStyle = computed(() => {
+  let paddingRight = '16px';
+  if (hasSuffixIcon.value) {
+    paddingRight = '40px';
+  } else if (props.align === 'right') {
+    paddingRight = '0';
+  }
+
+  return {
+    paddingRight,
+    textAlign: props.align,
+  };
+});
 </script>
 
 <style lang="scss" scoped>

package/src/TUIRoom/components/common/base/Swiper.vue

@@ -76,7 +76,12 @@ const swiperStyle = computed(() => {
   return { transform: `translateX(${translateX.value}px)` };
 });
 
+let isInOnceTouch = false;
 function handleTouchStart(event: TouchEvent) {
+  if (event.touches.length > 1 || isInOnceTouch) {
+    return;
+  }
+  isInOnceTouch = true;
   touchData.x = event.changedTouches[0].pageX;
   touchData.y = event.changedTouches[0].pageY;
 }
@@ -84,12 +89,22 @@ function handleTouchStart(event: TouchEvent) {
 const handleTouchMoveThrottle = throttle(handleTouchMove, 200);
 
 function handleTouchMove(event: TouchEvent) {
+  if (event.touches.length > 1 || !isInOnceTouch) {
+    isInOnceTouch = false;
+    translateX.value =
+      0 - swiperRef.value.offsetWidth * activeSwiperIndex.value;
+    return;
+  }
   const offsetX = event.changedTouches[0].pageX - touchData.x;
   translateX.value =
     0 - swiperRef.value.offsetWidth * activeSwiperIndex.value + offsetX;
 }
 
 function handleTouchEnd(event: TouchEvent) {
+  if (!isInOnceTouch) {
+    return;
+  }
+  isInOnceTouch = false;
   const offsetX = event.changedTouches[0].pageX - touchData.x;
   if (
     Math.abs(event.changedTouches[0].pageX - touchData.x) >

package/src/TUIRoom/components/common/icons/EarpieceIcon.vue

@@ -0,0 +1,22 @@
+<template>
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M10.7895 14.134V11.9614C10.7895 11.9614 8.53747 10.8221 9.51777 8.96746C10.4981 7.11282 12.6971 8.04013 12.6971 8.04013C12.6971 8.04013 12.6971 5.33771 9.9152 5.33771C7.1333 5.33771 7.1333 8.04013 7.1333 8.04013"
+      stroke="currentColor"
+      style="stroke: currentcolor; stroke-opacity: 1"
+      stroke-width="1.5"
+    />
+    <path
+      d="M15.9135 8.17616C15.9135 8.17616 15.9135 2.48633 10.0401 2.48633C4.16666 2.48633 4.16666 8.17616 4.16666 8.17616C4.11982 8.58605 4.28684 9.72601 5.32972 11.0067C6.37259 12.2874 6.83923 12.9507 7.15941 14.0256C7.47959 15.1005 7.79977 17.5018 10.6356 17.5018C13.4715 17.5018 13.4715 14.0256 13.4715 14.0256"
+      stroke="currentColor"
+      style="stroke: currentcolor; stroke-opacity: 1"
+      stroke-width="1.5"
+    />
+  </svg>
+</template>

package/src/TUIRoom/components/common/icons/SpeakerPhoneIcon.vue

@@ -0,0 +1,30 @@
+<template>
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <mask id="path-1-inside-1_4183_14105" fill="white">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M4.818 14H2C1.44772 14 1 13.5523 1 13V7.00001C1 6.44773 1.44772 6.00001 2 6.00001H4.81837L11.4785 1.92956C12.1449 1.52231 13 2.00187 13 2.78282V17.2167C13 17.9976 12.1449 18.4772 11.4786 18.07L4.818 14Z"
+      />
+    </mask>
+    <path
+      d="M4.818 14L5.60012 12.7201L5.24002 12.5H4.818V14ZM4.81837 6.00001V7.50001H5.24045L5.60059 7.2799L4.81837 6.00001ZM11.4785 1.92956L10.6963 0.649666V0.649666L11.4785 1.92956ZM11.4786 18.07L12.2607 16.7901L12.2607 16.7901L11.4786 18.07ZM4.818 12.5H2V15.5H4.818V12.5ZM2 12.5C2.27614 12.5 2.5 12.7239 2.5 13H-0.5C-0.5 14.3807 0.619288 15.5 2 15.5V12.5ZM2.5 13V7.00001H-0.5V13H2.5ZM2.5 7.00001C2.5 7.27615 2.27614 7.50001 2 7.50001V4.50001C0.619288 4.50001 -0.5 5.6193 -0.5 7.00001H2.5ZM2 7.50001H4.81837V4.50001H2V7.50001ZM5.60059 7.2799L12.2607 3.20945L10.6963 0.649666L4.03614 4.72012L5.60059 7.2799ZM12.2607 3.20945C11.9276 3.41307 11.5 3.17329 11.5 2.78282H14.5C14.5 0.830448 12.3622 -0.368461 10.6963 0.649666L12.2607 3.20945ZM11.5 2.78282V17.2167H14.5V2.78282H11.5ZM11.5 17.2167C11.5 16.8262 11.9275 16.5865 12.2607 16.7901L10.6965 19.35C12.3623 20.3679 14.5 19.169 14.5 17.2167H11.5ZM12.2607 16.7901L5.60012 12.7201L4.03587 15.28L10.6965 19.35L12.2607 16.7901Z"
+      fill="currentColor"
+      style="fill: currentcolor; fill-opacity: 1"
+      mask="url(#path-1-inside-1_4183_14105)"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M15.5 15.6585C17.8304 14.8348 19.5 12.6123 19.5 9.9999C19.5 7.38746 17.8304 5.16498 15.5 4.34131V5.96766C16.9817 6.70401 18 8.23304 18 9.9999C18 11.7668 16.9817 13.2958 15.5 14.0321V15.6585Z"
+      fill="currentColor"
+      style="fill: currentcolor; fill-opacity: 1"
+    />
+  </svg>
+</template>

package/src/TUIRoom/conference.ts

@@ -82,8 +82,6 @@ interface IConference {
 
   enableVirtualBackground: () => void;
 
-  enableBasicBeauty: () => void;
-
   hideFeatureButton: (name: FeatureButton) => void;
 
   replaceFriendList: (userList: Array<any>) => void;
@@ -176,10 +174,6 @@ class Conference implements IConference {
     roomService.setComponentConfig({ VirtualBackground: { visible: true } });
   }
 
-  public enableBasicBeauty() {
-    roomService.setComponentConfig({ BasicBeauty: { visible: true } });
-  }
-
   public hideFeatureButton(name: FeatureButton) {
     roomService.dataReportManager.reportCount(MetricsKey.hideFeatureButton);
     roomService.setComponentConfig({ [name]: { visible: false } });

package/src/TUIRoom/conference.vue

@@ -24,6 +24,7 @@
     <room-sidebar />
     <room-setting />
     <AISubtitlesOverlay v-if="overlayMap.AISubtitlesOverlay.visible" />
+    <RoomInviteOverlay v-if="overlayMap.RoomInviteOverlay.visible" />
     <loading-overlay v-if="isShowLoading" />
     <password-dialog
       :visible="isShowPasswordContainer"
@@ -53,6 +54,7 @@ import RoomSetting from './components/RoomSetting/index.vue';
 import LoadingOverlay from './components/PreRoom/LoadingOverlay.vue';
 import PasswordDialog from './components/PreRoom/PasswordDialog.vue';
 import AISubtitlesOverlay from './components/AITools/AISubtitles.vue';
+import RoomInviteOverlay from './components/RoomInvite/index.vue';
 import { debounce, throttle } from './utils/utils';
 import { useBasicStore } from './stores/basic';
 import { isMobile, isWeChat } from './utils/environment';
@@ -87,9 +89,11 @@ const props = withDefaults(
 
 const overlayMap = ref<{
   AISubtitlesOverlay: { visible: boolean };
+  RoomInviteOverlay: { visible: boolean };
   [key: string]: { visible: boolean };
 }>({
   AISubtitlesOverlay: { visible: false },
+  RoomInviteOverlay: { visible: false },
 });
 
 const conferenceShow = computed(