@tencentcloud/roomkit-electron-vue3 2.4.1 → 2.5.0

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

@@ -17,8 +17,24 @@
         <div class="tui-message-box-body">
           <div>{{ message }}</div>
         </div>
-        <div class="tui-message-box-footer">
-          <tui-button size="default" class="button" @click="handleClose">{{ confirmButtonText }}</tui-button>
+        <div v-if="isMobile" class="tui-message-box-footer">
+          <div v-if="cancelButtonText" class="button-container" @click="handleClose('cancel')">
+            <tui-button type="text" size="default" class="button">{{ cancelButtonText }}</tui-button>
+          </div>
+          <div class="button-container" @click="handleClose('confirm')">
+            <tui-button type="text" size="default" class="button confirm-button">{{ confirmButtonText }}</tui-button>
+          </div>
+        </div>
+        <div v-else class="tui-message-box-footer">
+          <tui-button size="default" @click="handleClose('confirm')">{{ confirmButtonText }}</tui-button>
+          <tui-button
+            v-if="cancelButtonText"
+            type="primary"
+            size="default"
+            @click="handleClose('cancel')"
+          >
+            {{ cancelButtonText }}
+          </tui-button>
         </div>
       </div>
     </div>
@@ -37,12 +53,13 @@ const visible = ref(false);
 const overlayContentStyle = ref({});
 const { nextZIndex } = useZIndex();
 
-type BeforeCloseFn = () => void;
+type BeforeCloseFn = (action?: Action) => void;
 
 interface Props {
   title: string;
   message: string;
   callback?: BeforeCloseFn | null;
+  cancelButtonText: string,
   confirmButtonText: string;
   remove: Function;
 }
@@ -51,6 +68,7 @@ const props = withDefaults(defineProps<Props>(), {
   title: '',
   message: '',
   callback: null,
+  cancelButtonText: '',
   confirmButtonText: '',
   remove: () => {},
 });
@@ -63,8 +81,9 @@ watch(visible, (val) => {
 
 const emit = defineEmits(['close']);
 
-function handleClose() {
-  props.callback && props.callback();
+type Action = 'cancel' | 'confirm' | 'close';
+function handleClose(action: Action) {
+  props.callback && props.callback(action);
   doClose();
 }
 
@@ -78,7 +97,7 @@ function handleOverlayClick(event: any) {
   if (event.target !== event.currentTarget) {
     return;
   }
-  handleClose();
+  handleClose('close');
 }
 
 function onOpen() {
@@ -143,7 +162,25 @@ onMounted(async () => {
       cursor: pointer;
     }
   }
+  .tui-message-box-body {
+    flex: 1;
+    padding: 20px 24px;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+    color: #4f586b;
+  }
+  .tui-message-box-footer {
+    padding: 20px 30px;
+    display: flex;
+    justify-content: center;
+    & > :not(:first-child) {
+      margin-left: 16px;
+    }
+  }
 }
+
 .tui-message-box-h5 {
   min-width: 80vw;
   max-width: 80vw;
@@ -181,32 +218,26 @@ onMounted(async () => {
     width: 100%;
     border-top: 1px solid #d5e0f2;
     display: flex;
-    justify-content: center;
-    padding: 11px 0;
+    justify-content: space-around;
+    .button-container {
+      padding: 11px 0;
+      flex: 1;
+      display: flex;
+      justify-content: center;
+      &:not(:first-child) {
+        border-left: 1px solid #d5e0f2;
+      }
+    }
     .button {
+      font-size: 16px;
+      font-weight: 500;
+    }
+    .confirm-button {
       background-color: #fff;
       color: var(--active-color-1);
       border: none;
       text-align: center;
-      font-size: 16px;
-      font-weight: 500;
     }
   }
 }
-
-.tui-message-box-body {
-  flex: 1;
-  padding: 20px 24px;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 22px;
-  color: #4f586b;
-}
-
-.tui-message-box-footer {
-  padding: 20px 30px;
-  display: flex;
-  justify-content: flex-end;
-}
 </style>

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

@@ -1,15 +1,21 @@
 <template>
-  <div :class="['option-container', { 'active': isSelected }]" @click="handleChooseOption">
-    <span class="option-content">{{ label || value }}</span>
+  <div ref="optionRef" :class="['option-container', { 'active': isSelected }]" @click="handleChooseOption">
+    <template v-if="$slots.customOptionContent">
+      <slot name="customOptionContent"></slot>
+    </template>
+    <template v-else>
+      <span :style="props.customOptionContentStyle" class="option-content">{{ label || value }}</span>
+    </template>
   </div>
 </template>
 
 <script setup lang="ts">
-import { inject, watch, computed, onBeforeUnmount } from 'vue';
+import { ref, inject, watch, computed, onBeforeUnmount, StyleValue, onMounted } from 'vue';
 
 interface OptionData {
   label: string,
   value: string | number | boolean | object,
+  customOptionContentStyle?: StyleValue,
 }
 
 interface SelectData {
@@ -21,6 +27,7 @@ interface SelectData {
   onOptionSelected: (optionData: OptionData) => void,
 }
 
+const optionRef = ref(null);
 const props = defineProps<OptionData>();
 
 const select: SelectData | undefined = inject('select');
@@ -30,9 +37,12 @@ const isSelected = computed(() => select && select.selectedValue === props.value
 const optionData = computed(() => ({
   label: props.label,
   value: props.value,
+  ref: optionRef,
 }));
 
-select?.onOptionCreated(optionData.value);
+onMounted(() => {
+  select?.onOptionCreated(optionData.value);
+});
 
 onBeforeUnmount(() => {
   select?.onOptionDestroyed(props.value);

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

@@ -8,9 +8,14 @@
       :class="['select-content', { 'disabled': disabled }]"
       @click="handleClickSelect"
     >
-      <span class="select-text">
-        {{ selectedLabel || selectedValue }}
-      </span>
+      <template v-if="$slots.customSelectContent">
+        <slot name="customSelectContent"></slot>
+      </template>
+      <template v-else>
+        <span class="select-text" :style="props.customSelectContentStyle">
+          {{ selectedLabel || selectedValue }}
+        </span>
+      </template>
       <svg-icon
         :class="['arrow-icon', { 'reverse': showSelectDropdown }]"
         :icon="ArrowStrokeSelectDownIcon"
@@ -30,7 +35,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, provide, computed, reactive, watch } from 'vue';
+import { ref, provide, computed, reactive, watch, StyleValue } from 'vue';
 import SvgIcon from './SvgIcon.vue';
 import ArrowStrokeSelectDownIcon from '../icons/ArrowStrokeSelectDownIcon.vue';
 import useZIndex from '../../../hooks/useZIndex';
@@ -43,6 +48,7 @@ interface Props {
   modelValue: string | number | boolean | object,
   disabled?: boolean,
   theme?: 'white' | 'black',
+  customSelectContentStyle?: StyleValue,
 }
 
 const props = defineProps<Props>();
@@ -53,18 +59,16 @@ const showSelectDropdown = ref(false);
 const optionObj = ref(new Map());
 const optionDataList = computed(() => Array.from(optionObj.value.values()));
 const selectedLabel = ref('');
-const selectedValue = ref(props.modelValue);
 const selectContainerRef = ref();
 const selectDropDownRef = ref();
 const dropDirection = ref('down');
 const themeClass = computed(() => (props.theme ? `tui-theme-${props.theme}` : ''));
 
 watch(() => props.modelValue, (val) => {
-  selectedValue.value = val;
   if (optionObj.value.get(val)) {
     selectedLabel.value = optionObj.value.get(props.modelValue).label;
   }
-});
+}, { immediate: true });
 
 watch(optionDataList, () => {
   if (optionObj.value.get(props.modelValue)) {
@@ -88,14 +92,12 @@ function onOptionDestroyed(value: string | number | boolean | object) {
 }
 
 function onOptionSelected(option: OptionData) {
-  selectedValue.value = option.value;
   showSelectDropdown.value = false;
   emits('update:modelValue', option.value);
+  emits('change', option.value);
 }
 
-watch(selectedValue, (val) => {
-  emits('change', val);
-});
+const selectedValue = computed(() => props.modelValue);
 
 provide('select', reactive({
   selectedValue,
@@ -116,6 +118,7 @@ function handleClickSelect() {
     handleDropDownPosition();
     dropDownStyle.value = { zIndex: nextZIndex() };
     showSelectDropdown.value = true;
+    optionObj.value.get(props.modelValue).ref.scrollIntoView({ block: 'center' });
   }
 }
 
@@ -149,6 +152,7 @@ function handleClickOutside() {
 
 .select-container {
   position: relative;
+  height: 100%;
   .select-content {
     box-sizing: border-box;
     position: relative;
@@ -156,10 +160,11 @@ function handleClickOutside() {
     background-color: var(--background-color-7);
     color: var(--font-color-3);
     border-radius: 8px;
-    height: 42px;
-    padding: 10px 16px;
+    padding: 0px 16px;
     cursor: pointer;
     display: flex;
+    align-items: center;
+    height: 42px;
     &.disabled {
       background-color: rgba(255, 255, 255, 0.50);
       color: #8F9AB2;

package/src/TUIRoom/components/common/base/index.ts

@@ -7,7 +7,7 @@ import TuiBadge from './Badge.vue';
 import TuiButton from './Button.vue';
 import TuiDrawer from './Drawer.vue';
 import IconButton from './IconButton.vue';
-import TuiInput from './Input.vue';
+import TuiInput from './Input/index.vue';
 import TuiOption from './Option.vue';
 import TuiSelect from './Select.vue';
 import SvgIcon from './SvgIcon.vue';

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

@@ -0,0 +1,15 @@
+<template>
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="design-iconfont">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M1.66669 14.9998C1.66669 12.3681 3.69998 10.2112 6.28134 10.0145C6.40852 10.0048 6.53703 9.99985 6.66669 9.99985H10C10.1297 9.99985 10.2582 10.0048 10.3854 10.0145C12.9667 10.2112 15 12.3681 15 14.9998V18.3332H1.66669V14.9998ZM13.3334 14.9998V16.6665H3.33335V14.9998C3.33335 13.1589 4.82574 11.6665 6.66669 11.6665H10C11.841 11.6665 13.3334 13.1589 13.3334 14.9998Z" fill="#4E5461" style="fill:#4E5461;fill:color(display-p3 0.3040 0.3284 0.3800);fill-opacity:1;" />
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M6.66669 8.3602C6.64897 8.3514 6.63135 8.34246 6.61379 8.33339C5.40776 7.70998 4.58335 6.45126 4.58335 5C4.58335 2.92893 6.26229 1.25 8.33335 1.25C10.4044 1.25 12.0834 2.92893 12.0834 5C12.0834 6.45126 11.259 7.70998 10.0529 8.33339C10.0354 8.34246 10.0177 8.3514 10 8.3602C9.49795 8.60971 8.93204 8.75 8.33335 8.75C7.73467 8.75 7.16875 8.60971 6.66669 8.3602ZM10.4167 5C10.4167 6.15059 9.48395 7.08333 8.33335 7.08333C7.18276 7.08333 6.25002 6.15059 6.25002 5C6.25002 3.84941 7.18276 2.91667 8.33335 2.91667C9.48395 2.91667 10.4167 3.84941 10.4167 5Z" fill="#4E5461" style="fill:#4E5461;fill:color(display-p3 0.3040 0.3284 0.3800);fill-opacity:1;" />
+      <path d="M12.5651 8.67685L13.2006 7.38123C13.5522 6.66449 13.7504 5.85772 13.7504 4.99992C13.7504 4.13294 13.5467 3.31354 13.1846 2.58695L14.6269 1.74561C15.1318 2.72004 15.417 3.82667 15.417 4.99992C15.417 6.11771 15.1581 7.17503 14.697 8.11518C16.8927 9.61592 18.3337 12.1396 18.3337 14.9999V18.3333L16.667 18.3333V14.9999C16.667 12.7132 15.5172 10.6946 13.7565 9.49115L12.5651 8.67685Z" fill="#4E5461" style="fill:#4E5461;fill:color(display-p3 0.3040 0.3284 0.3800);fill-opacity:1;" />
+    <defs>
+      <filter id="filter0_b_10685_2618" x="-4.99998" y="-5.41667" width="30.0003" height="30.4166" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feGaussianBlur in="BackgroundImageFix" stdDeviation="3.33333" />
+        <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_10685_2618" />
+        <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_10685_2618" result="shape" />
+      </filter>
+    </defs>
+  </svg>
+</template>

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

@@ -0,0 +1,8 @@
+<template>
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="Group 7815">
+      <path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M12.3935 8L8.64345 3.5H10.8564L14.1529 7.45584L14.6064 8L14.1529 8.54416L10.8564 12.5H8.64345L12.3935 8ZM8 7.15H1V8.85H8V7.15Z" fill="currentColor" />
+    </g>
+  </svg>
+</template>
+

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

@@ -0,0 +1,6 @@
+<template>
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10 3H6L6 1.5H5L5 3H3C2.44772 3 2 3.44771 2 4V13C2 13.5523 2.44772 14 3 14H13C13.5523 14 14 13.5523 14 13V4C14 3.44772 13.5523 3 13 3H11V1.5H10L10 3ZM5 5L6 5L6 4H10L10 5L11 5V4H13V6H3V4H5L5 5ZM3 7H13V13H3L3 7Z" fill="currentColor" />
+  </svg>
+</template>
+

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

@@ -0,0 +1,13 @@
+<template>
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#231;&#148;&#187;&#231;&#172;&#148;">
+<g id="Union">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5791 4.48698L7.10505 17.4325L2.40326 18.4929L0.970703 13.8908L8.4448 0.945312L14.5791 4.48698ZM9.05484 3.22202L2.77894 14.0922L3.53735 16.5286L6.02653 15.9672L12.3024 5.09702L9.05484 3.22202Z" fill="currentColor"/>
+<path d="M9.5978 17.5003L18.3329 17.5003V15.8337H10.5601L9.5978 17.5003Z" fill="currentColor"/>
+<path d="M18.3331 13.7503L11.7633 13.7503L12.7256 12.0837H18.3331V13.7503Z" fill="currentColor"/>
+</g>
+</g>
+</svg>  
+</template>
+
+

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

@@ -0,0 +1,8 @@
+<template>
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M3 9C2.44775 9 2 8.55228 2 8C2 7.44772 2.44775 7 3 7C3.55225 7 4 7.44772 4 8C4 8.55228 3.55225 9 3 9Z" fill="currentColor" />
+    <path d="M7 8C7 8.55228 7.44775 9 8 9C8.55225 9 9 8.55228 9 8C9 7.44772 8.55225 7 8 7C7.44775 7 7 7.44772 7 8Z" fill="currentColor" />
+    <path d="M12 8C12 8.55228 12.4478 9 13 9C13.5522 9 14 8.55228 14 8C14 7.44772 13.5522 7 13 7C12.4478 7 12 7.44772 12 8Z" fill="currentColor" />
+  </svg>
+</template>
+

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

@@ -0,0 +1,13 @@
+<template>
+  <svg width="20" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="design-iconfont">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M5.84823 10.4236C2.98532 10.5677 0.708374 12.9346 0.708374 15.8333V19.5833H15.2917V15.8333C15.2917 12.9346 13.0148 10.5677 10.1519 10.4236C10.0602 10.419 9.96788 10.4167 9.87504 10.4167H6.12504C6.03221 10.4167 5.93992 10.419 5.84823 10.4236ZM6.18166 8.75001C6.73114 9.01695 7.3481 9.16668 8.00004 9.16668C8.65198 9.16668 9.26894 9.01695 9.81843 8.75001C11.2085 8.07471 12.1667 6.64926 12.1667 5.00001C12.1667 2.69882 10.3012 0.833344 8.00004 0.833344C5.69885 0.833344 3.83337 2.69882 3.83337 5.00001C3.83337 6.64926 4.79158 8.07471 6.18166 8.75001ZM13.625 17.9167V15.8333C13.625 13.7623 11.9461 12.0833 9.87504 12.0833H6.12504C4.05397 12.0833 2.37504 13.7623 2.37504 15.8333V17.9167H13.625ZM8.00004 7.50001C9.38075 7.50001 10.5 6.38072 10.5 5.00001C10.5 3.6193 9.38075 2.50001 8.00004 2.50001C6.61933 2.50001 5.50004 3.6193 5.50004 5.00001C5.50004 6.38072 6.61933 7.50001 8.00004 7.50001Z" fill="#4E5461" style="fill:#4E5461;fill:color(display-p3 0.3040 0.3284 0.3800);fill-opacity:1;" />
+    <defs>
+      <filter id="filter0_b_10687_41" x="-5.95829" y="-5.83332" width="27.9167" height="32.0833" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feGaussianBlur in="BackgroundImageFix" stdDeviation="3.33333" />
+        <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_10687_41" />
+        <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_10687_41" result="shape" />
+      </filter>
+    </defs>
+  </svg>
+</template>

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

@@ -0,0 +1,10 @@
+<template>
+  <svg width="14" height="13" viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="Group 1792">
+      <g id="Group 7870">
+        <path id="Vector 88" d="M5.35 1H2C1.72386 1 1.5 1.22386 1.5 1.5V11.5C1.5 11.7761 1.72386 12 2 12H12C12.2761 12 12.5 11.7761 12.5 11.5V8.15" stroke="currentColor" stroke-width="1.5" />
+        <path id="Vector 87" d="M7.5 1H12.5M12.5 1V6M12.5 1L7.5 6" stroke="currentColor" stroke-width="1.5" />
+      </g>
+    </g>
+  </svg>
+</template>

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

@@ -0,0 +1,6 @@
+<template>
+<svg width="36" height="36" fill="#1C66EF" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z" class="spinner_aj0A"/>
+</svg>
+</template>
+

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

@@ -0,0 +1,13 @@
+<template>
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" @click="emit('click')">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M0.666748 12C0.666748 9.8945 2.29352 8.16896 4.35874 8.01169C4.46039 8.00395 4.56311 8.00001 4.66675 8.00001H7.33341C7.43705 8.00001 7.53977 8.00395 7.64142 8.01169C9.70664 8.16896 11.3334 9.89451 11.3334 12V14.633H0.666748V12ZM10.0001 12V13.2997H2.00008V12C2.00008 10.5272 3.19399 9.33334 4.66675 9.33334H7.33341C8.80617 9.33334 10.0001 10.5272 10.0001 12Z" fill="currentColor" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M4.66675 6.68816C4.65266 6.68116 4.63864 6.67405 4.62468 6.66684C3.65972 6.16815 3.00008 5.16111 3.00008 4C3.00008 2.34315 4.34323 1 6.00008 1C7.65693 1 9.00008 2.34315 9.00008 4C9.00008 5.16111 8.34045 6.16815 7.37548 6.66684C7.36152 6.67405 7.3475 6.68116 7.33341 6.68816C6.93176 6.88776 6.47903 7 6.00008 7C5.52113 7 5.0684 6.88776 4.66675 6.68816ZM7.66675 4C7.66675 4.92047 6.92056 5.66667 6.00008 5.66667C5.07961 5.66667 4.33341 4.92047 4.33341 4C4.33341 3.07953 5.07961 2.33333 6.00008 2.33333C6.92056 2.33333 7.66675 3.07953 7.66675 4Z" fill="currentColor" />
+    <path d="M10.6667 5H15.3334V3.66667H10.6667V5Z" fill="currentColor" />
+    <path d="M11.6667 8.66667H15.3334V7.33333H11.6667V8.66667Z" fill="currentColor" />
+    <path d="M15.3334 12.3333H12.6667V11H15.3334V12.3333Z" fill="currentColor" />
+  </svg>
+</template>
+<script setup lang="ts">
+import { defineEmits } from 'vue';
+const emit = defineEmits(['click']);
+</script>

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

@@ -0,0 +1,6 @@
+<template>
+  <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 2.5H6L6 0.25H4.5L4.5 2.5H1.5C0.671573 2.5 0 3.17157 0 4V17.5C0 18.3284 0.671573 19 1.5 19H16.5C17.3284 19 18 18.3284 18 17.5V4C18 3.17157 17.3284 2.5 16.5 2.5H13.5V0.25H12L12 2.5ZM4.5 5.5L6 5.5V4H12L12 5.5L13.5 5.5V4H16.5V7H1.5V4H4.5L4.5 5.5ZM1.5 8.5H16.5V17.5H1.5L1.5 8.5Z" fill="currentColor" />
+  </svg>
+</template>
+

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

@@ -0,0 +1,8 @@
+<template>
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Union">
+<path d="M5.58366 10.0765L9.18 13.7056L14.6337 7.55301L13.5737 6.66671L8.97813 10.9392L6.42526 9.16785L5.58366 10.0765Z" fill="#00B89C"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.1668 10C19.1668 15.0626 15.0628 19.1667 10.0002 19.1667C4.93755 19.1667 0.833496 15.0626 0.833496 10C0.833496 4.93743 4.93755 0.833374 10.0002 0.833374C15.0628 0.833374 19.1668 4.93743 19.1668 10ZM17.5002 10C17.5002 14.1422 14.1423 17.5 10.0002 17.5C5.85803 17.5 2.50016 14.1422 2.50016 10C2.50016 5.8579 5.85803 2.50004 10.0002 2.50004C14.1423 2.50004 17.5002 5.8579 17.5002 10Z" fill="#00B89C"/>
+</g>
+</svg>
+</template>

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

@@ -0,0 +1,13 @@
+<template>
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="&#230;&#179;&#168;&#230;&#132;&#143;">
+      <path
+        id="Vector"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M10.0007 2.49919C14.1428 2.49919 17.5006 5.85702 17.5006 9.99919C17.5006 14.1413 14.1428 17.4992 10.0007 17.4992C5.85852 17.4992 2.50065 14.1413 2.50065 9.99919C2.50065 5.85702 5.85852 2.49919 10.0007 2.49919ZM19.1673 9.99919C19.1673 4.9366 15.0632 0.83252 10.0007 0.83252C4.93804 0.83252 0.833984 4.9366 0.833984 9.99919C0.833984 15.0618 4.93804 19.1659 10.0007 19.1659C15.0632 19.1659 19.1673 15.0618 19.1673 9.99919ZM9.16732 5.41585V11.6659H10.834V5.41585H9.16732ZM10.834 12.9159H9.16407V14.5858H10.834V12.9159Z"
+        fill="#FFAD66"
+      />
+    </g>
+  </svg>
+</template>

package/src/TUIRoom/conference.ts

@@ -63,6 +63,8 @@ interface IConference {
   enableVirtualBackground: () => void;
 
   hideFeatureButton: (name: FeatureButton) => void;
+
+  replaceFriendList: (userList: Array<any>) => void;
 }
 class Conference implements IConference {
   public login(params: {
@@ -144,6 +146,10 @@ class Conference implements IConference {
   public hideFeatureButton(name: FeatureButton) {
     roomService.setComponentConfig({ [name]: { visible: false } });
   }
+
+  public replaceFriendList(userList: Array<any>) {
+    return roomService.scheduleConferenceManager.replaceFriendList(userList);
+  }
 }
 
 export const conference = new Conference();

package/src/TUIRoom/conference.vue

@@ -7,7 +7,7 @@
     ></room-header>
     <room-content
       ref="roomContentRef"
-      v-tap="handleRoomContentTap"
+      v-tap.lazy="handleRoomContentTap"
       :show-room-tool="showRoomTool"
       class="content"
     ></room-content>
@@ -75,22 +75,23 @@ const showMessageBox = (data: {
   code?: number;
   message: string;
   title: string;
+  cancelButtonText: string,
   confirmButtonText: string;
   callback?: () => void;
 }) => {
   const {
     message,
     title = roomService.t('Note'),
+    cancelButtonText,
     confirmButtonText = roomService.t('Sure'),
-    callback = () => { },
+    callback = () => {},
   } = data;
   TUIMessageBox({
     title,
     message,
+    cancelButtonText,
     confirmButtonText,
-    callback: async () => {
-      callback && callback();
-    },
+    callback,
   });
 };
 const showMessage = (data: {
@@ -294,6 +295,16 @@ const onKickedOffLine = (eventInfo: { message: string }) => {
   --footer-shadow-color: rgba(34, 38, 46, 0.3);
 }
 
+.tui-theme-white.tui-room {
+  --header-shadow-color: #e3eaf7;
+  --footer-shadow-color: rgba(197, 210, 229, 0.2);
+}
+
+.tui-theme-black.tui-room {
+  --header-shadow-color: rgba(34, 38, 46, 0.3);
+  --footer-shadow-color: rgba(34, 38, 46, 0.3);
+}
+
 .tui-room {
   width: 100%;
   height: 100%;

package/src/TUIRoom/directives/vDblTouch.ts

@@ -0,0 +1,41 @@
+
+const eventMap = new Map();
+
+const TIME_OUT = 300;
+
+class DblTouch {
+  public dom: HTMLElement;
+  public callback: Function;
+
+  constructor(el: HTMLElement, binding: any) {
+    this.dom = el;
+    this.callback = binding.value;
+
+    el?.addEventListener('touchend', (event: TouchEvent) => {
+      if (binding.modifiers.stop) {
+        event.stopPropagation();
+      }
+      this.touchend(event);
+    });
+  }
+
+  touchend(event: TouchEvent) {
+    const lastEvent = eventMap.get(this.dom);
+    if (lastEvent) {
+      this.callback && this.callback(event);
+    } else {
+      eventMap.set(this.dom, event);
+      setTimeout(() => {
+        eventMap.delete(this.dom);
+      }, TIME_OUT);
+    }
+  }
+}
+
+const vDblTouch = {
+  mounted(el: HTMLElement, binding: any) {
+    return new DblTouch(el, binding);
+  },
+};
+
+export default vDblTouch;

package/src/TUIRoom/directives/vTap.ts

@@ -1,24 +1,39 @@
 
+const eventMap = new Map();
+
+const TIME_OUT = 300;
+
 class VueTouch {
   public dom: HTMLElement;
   public callback: Function;
   public isMove: boolean;
+  public isLazyTap: boolean;
 
   constructor(el: HTMLElement, binding: any) {
     this.dom = el;
     this.callback = binding.value;
+    this.isLazyTap = binding.modifiers.lazy;
 
     this.isMove = false;
 
-    el?.addEventListener('touchstart', () => {
+    el?.addEventListener('touchstart', (event: TouchEvent) => {
+      if (binding.modifiers.stop) {
+        event.stopPropagation();
+      }
       this.touchstart();
     });
 
-    el?.addEventListener('touchmove', () => {
+    el?.addEventListener('touchmove', (event: TouchEvent) => {
+      if (binding.modifiers.stop) {
+        event.stopPropagation();
+      }
       this.touchmove();
     });
 
     el?.addEventListener('touchend', (event: TouchEvent) => {
+      if (binding.modifiers.stop) {
+        event.stopPropagation();
+      }
       this.touchend(event);
     });
   }
@@ -32,7 +47,21 @@ class VueTouch {
   }
 
   touchend(event?: TouchEvent) {
-    if (!this.isMove) {
+    if (this.isMove) {
+      return;
+    }
+    if (this.isLazyTap) {
+      if (eventMap.get(this.dom)) {
+        clearTimeout(eventMap.get(this.dom));
+        eventMap.delete(this.dom);
+        return;
+      }
+      const timer = setTimeout(() => {
+        this.callback(event);
+        eventMap.delete(this.dom);
+      }, TIME_OUT);
+      eventMap.set(this.dom, timer);
+    } else {
       this.callback(event);
     }
   }

package/src/TUIRoom/extension/chatExtension.ts

@@ -195,7 +195,7 @@ export class ChatExtension {
       ...userList,
       {
         faceUrl: userInfo.avatarUrl,
-        nickName: userInfo.userName,
+        nickName: userInfo.nameCard || userInfo.userName,
         userId: userInfo.userId,
       },
     ];

package/src/TUIRoom/hooks/useMasterApplyControl.ts

@@ -109,7 +109,7 @@ export default function () {
     let hasErrorOccurred = false;
     const applyUserList = applyToAnchorList.value.map(item => ({
       userId: item.userId,
-      userName: item.userName,
+      userName: item.nameCard || item.userName,
       applyToAnchorRequestId: item.applyToAnchorRequestId,
     }));
     for (const { applyToAnchorRequestId } of applyUserList) {
@@ -258,7 +258,7 @@ export default function () {
       const onlyOneUserTakeStage = newVal.length === 1;
       const firstUser = applyToAnchorList.value[0];
       const lastIndex = applyToAnchorList.value.length - 1;
-      const userName = applyToAnchorList.value[lastIndex]?.userName || applyToAnchorList.value[lastIndex]?.userId;
+      const userName = applyToAnchorList.value[lastIndex]?.nameCard || applyToAnchorList.value[lastIndex]?.userName || applyToAnchorList.value[lastIndex]?.userId;
       const message = onlyOneUserTakeStage
         ? `${userName} ${t('Applying for the stage')}`
         : `${userName} ${t('and so on number people applying to stage', { number: applyToAnchorList.value.length })}`;