@tencentcloud/roomkit-electron-vue3 2.4.2 → 2.5.0

package/src/TUIRoom/components/ScheduleConference/ScheduleRoomList.vue

@@ -0,0 +1,295 @@
+<template>
+  <div v-show="props.isShowScheduledConference && !isMobile" id="scheduleRoomContainer" class="schedule-room">
+    <div class="schedule-loading" v-if="isShowLoading">
+      <svg-icon :icon="LoadingScheduleIcon" class="loading"></svg-icon>
+      <span class="text">{{ t('Schedule room loading') }}</span>
+    </div>
+    <div v-else>
+      <div v-if="scheduleRoomList.length > 0" class="schedule-room-container">
+        <div v-for="(item, index) in scheduleContentList" :key="index">
+          <div v-show="item.showTimestamp" class="schedule-room-date">
+            <svg-icon class="date" :icon="CalendarIcon"></svg-icon>
+            <span>{{ getScheduleDate(item.scheduleStartTime) }}</span>
+          </div>
+          <ScheduleRoomControl
+            :item="item"
+            :schedule-start-date="getScheduleDate(item.scheduleStartTime)"
+            :schedule-end-date="getScheduleDate(item.scheduleEndTime)"
+            :schedule-start-time="getScheduleTime(item.scheduleStartTime)"
+            :schedule-end-time="getScheduleTime(item.scheduleEndTime)"
+            @join-conference="joinConference"
+            @show-more="(data) => handleShowMore(data, index)"
+          />
+        </div>
+      </div>
+      <div v-else class="schedule-no-body">
+        <svg-icon :icon="ApplyStageLabelIcon"></svg-icon>
+        <span class="text">{{ t('No room available for booking') }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { EventType, roomService } from '../../services';
+import SvgIcon from '../../components/common/base/SvgIcon.vue';
+import CalendarIcon from '../../components/common/icons/CalendarIcon.vue';
+import ApplyStageLabelIcon from '../../components/common/icons/ApplyStageLabelIcon.vue';
+import ScheduleRoomControl from './ScheduleRoomControl.vue';
+import LoadingScheduleIcon from '../common/icons/LoadingScheduleIcon.vue';
+import { useI18n } from '../../locales';
+import { TUIConferenceInfo, TUIConferenceListManagerEvents, TUIConferenceModifyInfo, TUIConferenceStatus } from '@tencentcloud/tuiroom-engine-electron';
+import { isMobile } from '../../utils/environment';
+import { objectMerge } from '../../utils/utils.ts';
+
+const { t } = useI18n();
+const scheduleRoomList = ref<TUIConferenceInfo[]>([]);
+const emit = defineEmits(['join-conference']);
+const isShowLoading = ref(true);
+
+const joinConference = (options: any) => {
+  emit('join-conference', options);
+};
+
+const props = withDefaults(defineProps<{
+  isShowScheduledConference?: boolean,
+}>(), {
+  isShowScheduledConference: true,
+});
+
+const sortedScheduleRoomList = computed(() => scheduleRoomList.value.sort((a, b) => a.scheduleStartTime - b.scheduleStartTime));
+
+const fetchScheduledData = async (cursor = '', result: any[] = []) => {
+  const res = await roomService.scheduleConferenceManager.
+    fetchScheduledConferenceList({
+      cursor,
+      count: 20,
+    });
+  res?.conferenceList && result.push(...res?.conferenceList);
+  if (res.cursor !== '') {
+    await fetchScheduledData(res.cursor, result);
+  }
+  return result;
+};
+
+const scheduleContentList = computed(() => sortedScheduleRoomList.value.map((item, index, arr) => {
+  if (index === 0 || getScheduleDate(item.scheduleStartTime) !== getScheduleDate(arr[index - 1].scheduleStartTime)) {
+    return { ...item, showTimestamp: true };
+  }
+  return { ...item, showTimestamp: false };
+}));
+
+function getScheduleDate(timestamp: number) {
+  const date = new Date(timestamp * 1000);
+  const year = `${date.getFullYear()}`;
+  const month = `${date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1}`;
+  const day = `${date.getDate() < 10 ? `0${date.getDate()}` : date.getDate()}`;
+  return `${year}${t('schedule year')}${month}${t('schedule month')}${day}${t('schedule day')}`;
+}
+
+function getScheduleTime(timestamp: number) {
+  const date = new Date(timestamp * 1000);
+  const hours = `${date.getHours() < 10 ? `0${date.getHours()}` : date.getHours()}`;
+  const minutes = `${date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes()}`;
+  return `${hours}:${minutes}`;
+}
+
+const fetchAttendeeList = async (roomId: string, cursor = '', result: any[] = []) => {
+  const res = await roomService.scheduleConferenceManager.
+    fetchAttendeeList({ roomId, cursor, count: 20 });
+  if (!res?.attendeeList) return [];
+  result.push(...res?.attendeeList);
+  if (res.cursor !== '') {
+    await fetchAttendeeList(roomId, res.cursor, result);
+  }
+  return result;
+};
+
+const handleShowMore = async (data: { roomId: string }, index: number) => {
+  const attendeeList = await fetchAttendeeList(data.roomId);
+  scheduleRoomList.value[index].scheduleAttendees = attendeeList;
+};
+
+const fetchData = async () => {
+  scheduleRoomList.value = await fetchScheduledData();
+  isShowLoading.value = false;
+};
+
+const updateAttendees = (originList: any[] = [], changeData: { joinedUsers: any[], leftUsers: any[] }) => {
+  const { joinedUsers, leftUsers } = changeData;
+  // Add joined users to the attendees array
+  let resultList = [...originList, ...joinedUsers];
+  // Remove left users from the attendees array
+  resultList = resultList.filter((attendee: any) => !leftUsers.some(leftUser => leftUser.userId === attendee.userId));
+  return resultList;
+};
+const onConferenceScheduled = async (data: { conferenceInfo: any }) => {
+  const { conferenceInfo } = data;
+  scheduleRoomList.value.push(conferenceInfo);
+};
+const onConferenceCancelled = async (data: any) => {
+  scheduleRoomList.value = scheduleRoomList.value.filter(item => item.basicRoomInfo.roomId !== data.roomId);
+};
+const onConferenceInfoChanged = async (data: { conferenceModifyInfo: TUIConferenceModifyInfo }) => {
+  const aimConferenceIndex = scheduleRoomList.value
+    .findIndex(item => item.basicRoomInfo.roomId === data.conferenceModifyInfo.basicRoomInfo.roomId);
+  if (aimConferenceIndex !== -1) {
+    scheduleRoomList.value[aimConferenceIndex] = objectMerge(
+      scheduleRoomList.value[aimConferenceIndex],
+      data.conferenceModifyInfo,
+    );
+  }
+};
+const onScheduleAttendeesChanged = async (data: any) => {
+  const aimConference = scheduleRoomList.value.find(item => item.basicRoomInfo.roomId === data.roomId);
+  if (aimConference) {
+    aimConference.scheduleAttendees = updateAttendees(aimConference.scheduleAttendees, data);
+  }
+};
+
+const onConferenceStatusChanged = (data: {
+  roomId: string;
+  status: TUIConferenceStatus;
+}) => {
+  const aimConference = scheduleRoomList.value.find(item => item.basicRoomInfo.roomId === data.roomId);
+  if (aimConference) {
+    aimConference.status = data.status;
+  }
+};
+
+onMounted(() => {
+  roomService.on(EventType.ROOM_LOGIN, fetchData);
+  roomService.scheduleConferenceManager.on(TUIConferenceListManagerEvents.onConferenceScheduled, onConferenceScheduled);
+  roomService.scheduleConferenceManager.on(TUIConferenceListManagerEvents.onConferenceCancelled, onConferenceCancelled);
+  roomService.scheduleConferenceManager.on(
+    TUIConferenceListManagerEvents.onConferenceInfoChanged,
+    onConferenceInfoChanged,
+  );
+  roomService.scheduleConferenceManager.on(
+    TUIConferenceListManagerEvents.onScheduleAttendeesChanged,
+    onScheduleAttendeesChanged,
+  );
+  roomService.scheduleConferenceManager.on(
+    TUIConferenceListManagerEvents.onConferenceStatusChanged,
+    onConferenceStatusChanged,
+  );
+});
+onUnmounted(() => {
+  roomService.off(EventType.ROOM_LOGIN, fetchData);
+  roomService.scheduleConferenceManager.off(
+    TUIConferenceListManagerEvents.onConferenceScheduled,
+    onConferenceScheduled,
+  );
+  roomService.scheduleConferenceManager.off(
+    TUIConferenceListManagerEvents.onConferenceCancelled,
+    onConferenceCancelled,
+  );
+  roomService.scheduleConferenceManager.off(
+    TUIConferenceListManagerEvents.onConferenceInfoChanged,
+    onConferenceInfoChanged,
+  );
+  roomService.scheduleConferenceManager.off(
+    TUIConferenceListManagerEvents.onScheduleAttendeesChanged,
+    onScheduleAttendeesChanged,
+  );
+  roomService.scheduleConferenceManager.off(
+    TUIConferenceListManagerEvents.onConferenceStatusChanged,
+    onConferenceStatusChanged,
+  );
+});
+</script>
+
+<style lang="scss" scoped>
+
+@keyframes loading-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.schedule-room {
+    width: 100%;
+    min-width: 470px;
+    background-color: var(--white-color);
+    margin-left: 20px;
+    border-radius: 24px;
+    box-shadow: rgba(197, 210, 229, 0.3);
+    position: relative;
+    padding: 20px 0;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    .schedule-room-history {
+        position: absolute;
+        top: 20px;
+        right: 20px;
+        color: var(--active-color-1);
+        cursor: pointer;
+        display: flex;
+        font-size: 14px;
+        font-weight: 500;
+        .arrow {
+            margin-left: 4px;
+        }
+    }
+    .schedule-loading {
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        color: #8f9ab2;
+        font-size: 14px;
+        font-weight: 400;
+        .loading {
+          margin-bottom: 10px;
+          animation: loading-rotate 1.5s linear infinite;
+        }
+    }
+    .schedule-room-container{
+      overflow-y: scroll;
+      padding: 0 2px 0 10px;
+      height: 504px;
+      margin-right: 2px;
+        .schedule-room-date {
+          display: flex;
+          font-size: 14px;
+          font-weight: 400;
+          color: var(--font-color-9);
+          padding: 10px;
+          .date {
+              margin-right: 2px;
+          }
+       }
+    }
+    .schedule-no-body {
+        height: 504px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        .text {
+          color: #8f9ab2;
+          font-size: 14px;
+          font-style: normal;
+          font-weight: 400;
+          margin-top: 10px;
+        }
+    }
+    ::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    ::-webkit-scrollbar {
+      width: 6px;
+    }
+    ::-webkit-scrollbar-thumb {
+      background-color: #E0E2E9;
+      border-radius: 10px;
+    }
+}
+</style>

package/src/TUIRoom/components/ScheduleConference/ShareLink.vue

@@ -0,0 +1,122 @@
+<template>
+  <TuiDialog
+    v-model="showRoomInvite"
+    :title="t('Schedule successful, invite members to join')"
+    :modal="true"
+    :show-close="true"
+    :close-on-click-modal="true"
+    width="540px"
+    :append-to-body="true"
+    :title-icon="SuccessIcon"
+  >
+    <div class="invite-member">
+      <div v-for="item in scheduleInviteList" :key="item.id" class="invite-member-container">
+        <div class="invite-member-title">{{ t(item.title) }}</div>
+        <div class="invite-member-item">
+          <span class="invite-member-content"> {{ item.content }}</span>
+          <svg-icon class="copy" :icon="copyIcon" @click="onCopy(item.content)"></svg-icon>
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <span>
+        <tui-button class="dialog-button" size="default" @click="copyRoomIdAndRoomLink()">{{ t('Copy the conference number and link') }}</tui-button>
+      </span>
+    </template>
+  </TuiDialog>
+</template>
+
+<script setup lang="ts">
+import { ref, defineProps, watch, computed } from 'vue';
+import { useI18n } from '../../locales';
+import TuiDialog from '../common/base/Dialog/index.vue';
+import TuiButton from '../common/base/Button.vue';
+import SuccessIcon from '../common/icons/SuccessIcon.vue';
+import { TUIConferenceInfo } from '@tencentcloud/tuiroom-engine-electron';
+import copyIcon from '../common/icons/CopyIcon.vue';
+import SvgIcon from '../common/base/SvgIcon.vue';
+import useRoomInfo from '../RoomHeader/RoomInfo/useRoomInfoHooks';
+import { getUrlWithRoomId } from '../../utils/utils';
+
+const { t } = useI18n();
+const { onCopy } = useRoomInfo();
+
+interface Props {
+  conferenceInfo?: TUIConferenceInfo,
+  scheduleParams?: any;
+  visible: boolean;
+}
+const props = defineProps<Props>();
+const emit = defineEmits(['input', 'close']);
+const showRoomInvite = ref(false);
+
+watch(
+  () => props.visible,
+  (val) => {
+    showRoomInvite.value = val;
+  },
+  {
+    immediate: true,
+  },
+);
+
+const updateVisible = (val: boolean) => {
+  emit('input', val);
+};
+
+const roomType = computed(() => (props.scheduleParams.isSeatEnabled ? `${t('On-stage Speaking Room')}` : `${t('Free Speech Room')}`));
+
+function copyRoomIdAndRoomLink() {
+  const invitation = `${props.scheduleParams.roomName}\n
+${t('Room Type')}: ${roomType.value}\n
+${t('Room Time')}: ${new Date(props.scheduleParams.scheduleStartTime * 1000)} - ${new Date(props.scheduleParams.scheduleEndTime * 1000)}\n
+${t('Room ID')}: ${props.scheduleParams.roomId}\n
+${t('Room Link')}: ${getUrlWithRoomId(props.scheduleParams.roomId)}`;
+  onCopy(invitation);
+}
+
+const scheduleInviteList = computed(() => [
+  { id: 1, title: `${t('Invitation by room ID')}`, content: props.scheduleParams.roomId },
+  { id: 2, title: `${t('Invitation via room link')}`, content: getUrlWithRoomId(props.scheduleParams.roomId) },
+]);
+
+watch(showRoomInvite, (val) => {
+  updateVisible(val);
+}, { immediate: true });
+</script>
+
+<style lang="scss" scoped>
+.invite-member {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  .invite-member-title {
+    color: #4F586B;
+  }
+  .invite-member-item {
+    margin-top: 8px;
+    border-radius: 8px;
+    border: 1px solid #E4E8EE;
+    background: #F9FAFC;
+    padding: 10px 16px;
+    color: #0F1014;
+    display: flex;
+    justify-content: space-between;
+    .invite-member-content {
+      max-width: 400px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    .copy {
+      width: 20px;
+      height: 20px;
+      cursor: pointer;
+    }
+  }
+}
+</style>

package/src/TUIRoom/components/ScheduleConference/TimezonePicker.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="container">
+    <TuiSelect
+      v-model="selectedTime"
+      theme="white" class="timepicker-select" :teleported="false" :custom-select-content-style="{ 'font-weight': 400 }"
+    >
+      <TuiOption
+        v-for="time in timeOptions"
+        :key="time.value" theme="white"
+        :value="time.value" :label="time.label" :custom-option-content-style="{ 'font-weight': 400 }"
+      ></TuiOption>
+    </TuiSelect>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, defineProps, defineEmits, watch } from 'vue';
+import TuiSelect from '../common/base/Select.vue';
+import TuiOption from '../common/base/Option.vue';
+
+interface Props {
+    modelValue: string;
+}
+const props = defineProps<Props>();
+const emit = defineEmits(['input']);
+const selectedTime = ref(props.modelValue);
+
+const timeOptions = computed(() => [
+  { label: 'GMT-12:00 世界时 - 国际日期变更线西', value: 'Etc/GMT+12' },
+  { label: 'GMT-11:00 世界时 - 协调世界时-11', value: 'Etc/GMT+11' },
+  { label: 'GMT-10:00 夏威夷 - 阿留申标准时间', value: 'Pacific/Honolulu' },
+  { label: 'GMT-09:00 阿拉斯加标准时间', value: 'America/Anchorage' },
+  { label: 'GMT-08:00 太平洋标准时间', value: 'America/Los_Angeles' },
+  { label: 'GMT-07:00 美国山地标准时间', value: 'America/Denver' },
+  { label: 'GMT-06:00 美国中部标准时间', value: 'America/Chicago' },
+  { label: 'GMT-05:00 美国东部标准时间', value: 'America/New_York' },
+  { label: 'GMT-04:00 大西洋标准时间', value: 'America/Halifax' },
+  { label: 'GMT-03:00 阿根廷标准时间', value: 'America/Argentina/Buenos_Aires' },
+  { label: 'GMT-02:00 协调世界时-02', value: 'Etc/GMT+2' },
+  { label: 'GMT-01:00 佛得角标准时间', value: 'Atlantic/Cape_Verde' },
+  { label: 'GMT+00:00 格林威治标准时间', value: 'Europe/London' },
+  { label: 'GMT+01:00 中欧标准时间', value: 'Europe/Berlin' },
+  { label: 'GMT+02:00 东欧标准时间', value: 'Europe/Kiev' },
+  { label: 'GMT+03:00 莫斯科标准时间', value: 'Europe/Moscow' },
+  { label: 'GMT+04:00 阿布扎比标准时间', value: 'Asia/Dubai' },
+  { label: 'GMT+05:00 巴基斯坦标准时间', value: 'Asia/Karachi' },
+  { label: 'GMT+05:30 印度标准时间', value: 'Asia/Kolkata' },
+  { label: 'GMT+06:00 孟加拉国标准时间', value: 'Asia/Dhaka' },
+  { label: 'GMT+07:00 泰国标准时间', value: 'Asia/Bangkok' },
+  { label: 'GMT+08:00 中国标准时间 - 北京', value: 'Asia/Shanghai' },
+  { label: 'GMT+09:00 日本标准时间', value: 'Asia/Tokyo' },
+  { label: 'GMT+10:00 澳大利亚东部标准时间 - 悉尼', value: 'Australia/Sydney' },
+  { label: 'GMT+11:00 所罗门群岛标准时间', value: 'Pacific/Guadalcanal' },
+  { label: 'GMT+12:00 新西兰标准时间', value: 'Pacific/Auckland' },
+  { label: 'GMT+13:00 汤加标准时间', value: 'Pacific/Tongatapu' },
+]);
+
+const updateTime = () => {
+  emit('input', selectedTime.value);
+};
+
+watch(selectedTime, () => {
+  updateTime();
+}, {
+  immediate: true,
+});
+watch(() => props.modelValue, (newValue) => {
+  selectedTime.value = newValue;
+}, { immediate: true });
+</script>

package/src/TUIRoom/components/common/DeviceSelect.vue

@@ -25,13 +25,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref, Ref } from 'vue';
+import { ref, Ref, watch } from 'vue';
 import { useRoomStore } from '../../stores/room';
 import { storeToRefs } from 'pinia';
 import TuiSelect from './base/Select.vue';
 import TuiOption from './base/Option.vue';
 
-import { TRTCDeviceInfo, TUIMediaDeviceType } from '@tencentcloud/tuiroom-engine-electron';
+import { TRTCDeviceInfo, TUIDeviceInfo, TUIMediaDeviceType } from '@tencentcloud/tuiroom-engine-electron';
 import useDeviceManager from '../../hooks/useDeviceManager';
 const { deviceManager } = useDeviceManager();
 
@@ -59,17 +59,41 @@ const currentDeviceId = ref(getInitDeviceId());
 
 function getInitDeviceId() {
   if (deviceType === 'camera') {
-    return currentCameraId;
+    return currentCameraId.value;
   }
   if (deviceType === 'microphone') {
-    return currentMicrophoneId;
+    return currentMicrophoneId.value;
   }
   if (deviceType === 'speaker') {
-    return currentSpeakerId;
+    return currentSpeakerId.value;
   }
   return '';
 }
 
+if (deviceType === 'camera') {
+  watch(currentCameraId, (val) => {
+    if (currentDeviceId.value !== val) {
+      currentDeviceId.value = val;
+    }
+  }, { immediate: true });
+}
+
+if (deviceType === 'microphone') {
+  watch(currentMicrophoneId, (val) => {
+    if (currentDeviceId.value !== val) {
+      currentDeviceId.value = val;
+    }
+  }, { immediate: true });
+}
+
+if (deviceType === 'speaker') {
+  watch(currentSpeakerId, (val) => {
+    if (currentDeviceId.value !== val) {
+      currentDeviceId.value = val;
+    }
+  }, { immediate: true });
+}
+
 function getDeviceList() {
   if (deviceType === 'camera') {
     return cameraList;
@@ -87,25 +111,43 @@ async function handleChange(deviceId: string) {
   onChange && onChange(deviceId);
   switch (deviceType) {
     case 'camera':
-      await deviceManager.instance?.setCurrentDevice({
-        type: TUIMediaDeviceType.kMediaDeviceTypeVideoCamera,
-        deviceId,
-      });
-      roomStore.setCurrentCameraId(deviceId);
+      try {
+        await deviceManager.instance?.setCurrentDevice({
+          type: TUIMediaDeviceType.kMediaDeviceTypeVideoCamera,
+          deviceId,
+        });
+        roomStore.setCurrentCameraId(deviceId);
+      } catch (error) {
+        if (cameraList.value.map((item: TUIDeviceInfo) => item.deviceId).includes(currentCameraId.value)) {
+          currentDeviceId.value = currentCameraId.value;
+        }
+      }
       break;
     case 'microphone':
-      await deviceManager.instance?.setCurrentDevice({
-        type: TUIMediaDeviceType.kMediaDeviceTypeAudioInput,
-        deviceId,
-      });
-      roomStore.setCurrentMicrophoneId(deviceId);
+      try {
+        await deviceManager.instance?.setCurrentDevice({
+          type: TUIMediaDeviceType.kMediaDeviceTypeAudioInput,
+          deviceId,
+        });
+        roomStore.setCurrentMicrophoneId(deviceId);
+      } catch (error) {
+        if (microphoneList.value.map((item: TUIDeviceInfo) => item.deviceId).includes(currentMicrophoneId.value)) {
+          currentDeviceId.value = currentMicrophoneId.value;
+        }
+      }
       break;
     case 'speaker':
-      await deviceManager.instance?.setCurrentDevice({
-        type: TUIMediaDeviceType.kMediaDeviceTypeAudioOutput,
-        deviceId,
-      });
-      roomStore.setCurrentSpeakerId(deviceId);
+      try {
+        await deviceManager.instance?.setCurrentDevice({
+          type: TUIMediaDeviceType.kMediaDeviceTypeAudioOutput,
+          deviceId,
+        });
+        roomStore.setCurrentSpeakerId(deviceId);
+      } catch (error) {
+        if (speakerList.value.map((item: TUIDeviceInfo) => item.deviceId).includes(currentSpeakerId.value)) {
+          currentDeviceId.value = currentSpeakerId.value;
+        }
+      }
       break;
     default:
       break;

package/src/TUIRoom/components/common/Logo.vue

@@ -32,7 +32,7 @@
 
 <script setup lang="ts">
 import i18n from '../../locales/index';
-import { isMobile, isWeChat } from '../../utils/environment';
+import { isMobile } from '../../utils/environment';
 import { computed } from 'vue';
 import { useBasicStore } from '../../stores/basic';
 import { storeToRefs } from 'pinia';
@@ -48,8 +48,8 @@ const basicStore = useBasicStore();
 
 const { defaultTheme } = storeToRefs(basicStore);
 
-const isEN = computed(() => !isWeChat && i18n.global.locale.value === 'en-US');
-const isZH = computed(() => isWeChat || i18n.global.locale.value === 'zh-CN');
+const isEN = computed(() => i18n.global.locale.value === 'en-US');
+const isZH = computed(() => i18n.global.locale.value === 'zh-CN');
 const isBlackTheme = computed(() => defaultTheme.value === 'black');
 const isWhiteTheme = computed(() => defaultTheme.value === 'white');
 

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

@@ -1,45 +1,53 @@
 <template>
   <div class="tui-checkbox">
-    <input
-      v-model="checked"
-      type="checkbox"
-      @change="handleValueChange"
-    />
-    <span @click="handleCheckBoxClick">
+    <input v-model="checked" type="checkbox" @change="handleValueChange" />
+    <span class="tui-checkbox-slot-container" @click="handleCheckBoxClick">
       <slot></slot>
     </span>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, Ref } from 'vue';
+import { ref, Ref, watch } from 'vue';
 interface Props {
   modelValue: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   modelValue: false,
+  slotCustomStyle: () => ({}),
 });
-
 const checked: Ref<boolean> = ref(props.modelValue);
+const emit = defineEmits(['input']);
+
+
+watch(() => props.modelValue, (value) => {
+  checked.value = value;
+});
+
 
 function handleCheckBoxClick() {
   checked.value = !checked.value;
+  emit('input', checked.value);
 }
 
-const emit = defineEmits(['update:modelValue']);
 
 function handleValueChange(event: any) {
   checked.value = event.target.checked;
-  emit('update:modelValue', event.target.checked);
+  emit('input', event.target.checked);
 }
 </script>
 
 <style lang="scss" scoped>
 .tui-checkbox {
   position: relative;
-  display: inline-block;
+  display: flex;
+  align-items: center;
   cursor: pointer;
+  .tui-checkbox-slot-container {
+    flex: 1;
+    overflow: auto;
+  }
 }
 
 input {