tuikit-atomicx-vue3 4.4.0-beta.1 → 4.5.0

package/dist/utils/call.js

@@ -1,13 +1,12 @@
 import { TUIChatEngine as k, TUIFriendService as U, TUIUserService as L } from "@tencentcloud/chat-uikit-engine";
 import R, { TUIConstants as T } from "@tencentcloud/tui-core";
-import { i18next as i } from "@tencentcloud/uikit-base-component-vue3";
 import { safeJSONParse as u } from "./json.js";
-function q(a) {
+function P(r) {
   try {
-    const r = u(a.payload.data, {});
-    if (r.businessID === 1 && r.data) {
-      const t = u(r.data, {});
-      if (t.businessID === "av_call" || t.businessID === "rtc_call")
+    const e = u(r.payload.data, {});
+    if (e.businessID === 1 && e.data) {
+      const s = u(e.data, {});
+      if (s.businessID === "av_call" || s.businessID === "rtc_call")
         return !0;
     }
   } catch {
@@ -15,119 +14,119 @@ function q(a) {
   }
   return !1;
 }
-function D(a) {
+function q(r) {
   R.callService({
     serviceName: T.TUICalling.SERVICE.NAME,
     method: T.TUICalling.SERVICE.METHOD.START_CALL,
     params: {
-      ...a,
+      ...r,
       version: "v3"
     }
   });
 }
-function A(a) {
-  const r = u(a.payload.data, void 0);
-  if (!r)
+function A(r) {
+  const e = u(r.payload.data, void 0);
+  if (!e)
     return;
-  const t = u(r.data, void 0);
-  return t ? {
-    description: a.payload.description,
-    extension: a.payload.extension,
+  const s = u(e.data, void 0);
+  return s ? {
+    description: r.payload.description,
+    extension: r.payload.extension,
     data: {
-      businessID: r.businessID,
-      timeout: r.timeout,
+      businessID: e.businessID,
+      timeout: e.timeout,
       data: {
-        businessID: t.businessID,
-        call_end: t.call_end,
-        call_type: t.call_type,
+        businessID: s.businessID,
+        call_end: s.call_end,
+        call_type: s.call_type,
         data: {
-          cmd: t.data.cmd,
-          inviter: t.data.inviter,
-          message: t.data.message,
-          room_id: t.data.room_id,
-          str_room_id: t.data.str_room_id
+          cmd: s.data.cmd,
+          inviter: s.data.inviter,
+          message: s.data.message,
+          room_id: s.data.room_id,
+          str_room_id: s.data.str_room_id
         },
-        platform: t.platform,
-        room_id: t.room_id,
-        userData: t.userData,
-        version: t.version
+        platform: s.platform,
+        room_id: s.room_id,
+        userData: s.userData,
+        version: s.version
       },
-      inviteID: r.inviteID,
-      groupID: r.groupID,
-      actionType: r.actionType,
-      inviter: r.inviter,
-      inviteeList: r.inviteeList
+      inviteID: e.inviteID,
+      groupID: e.groupID,
+      actionType: e.actionType,
+      inviter: e.inviter,
+      inviteeList: e.inviteeList
     }
   } : void 0;
 }
-function N(a) {
-  if (!a || a <= 0)
+function N(r) {
+  if (!r || r <= 0)
     return "00:00";
-  const r = Math.floor(a / 3600), t = Math.floor(a % 3600 / 60), e = Math.floor(a % 60);
-  return r > 0 ? `${r.toString().padStart(2, "0")}:${t.toString().padStart(2, "0")}:${e.toString().padStart(2, "0")}` : `${t.toString().padStart(2, "0")}:${e.toString().padStart(2, "0")}`;
+  const e = Math.floor(r / 3600), s = Math.floor(r % 3600 / 60), i = Math.floor(r % 60);
+  return e > 0 ? `${e.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}:${i.toString().padStart(2, "0")}` : `${s.toString().padStart(2, "0")}:${i.toString().padStart(2, "0")}`;
 }
-function S(a, r = 12) {
-  return !a || a.length <= r ? a : `${a.substring(0, r)}...`;
+function S(r, e = 12) {
+  return !r || r.length <= e ? r : `${r.substring(0, e)}...`;
 }
-function x(a) {
-  return U.getFriendRemark([a])[a] || "";
+function V(r) {
+  return U.getFriendRemark([r])[r] || "";
 }
-const f = /* @__PURE__ */ new Map(), $ = /* @__PURE__ */ new Map();
-function H(a) {
-  var d, g, _, m, p, C, M, h, v, I, w;
-  const r = A(a);
-  if (!r || r.data.businessID !== 1)
+const c = /* @__PURE__ */ new Map(), $ = /* @__PURE__ */ new Map();
+function D(r, e) {
+  var f, g, _, m, p, C, M, h, v, I, w;
+  const s = A(r);
+  if (!s || s.data.businessID !== 1)
     return "";
-  const { data: t } = r, e = t.data, n = a.fromAccount || a.from, c = x(n), l = k.getMyUserID();
-  let s = c || a.nameCard || a.nick || n;
-  switch (s = S(s), t.actionType) {
+  const { data: i } = s, a = i.data, l = r.fromAccount || r.from, d = V(l), t = k.getMyUserID();
+  let n = d || r.nameCard || r.nick || l;
+  switch (n = S(n), i.actionType) {
     case 1:
-      return (((d = e == null ? void 0 : e.data) == null ? void 0 : d.cmd) === "audioCall" || ((g = e == null ? void 0 : e.data) == null ? void 0 : g.cmd) === "videoCall") && t.groupID ? i.t("CallMessage.start_call", { messageSender: s }) : ((_ = e == null ? void 0 : e.data) == null ? void 0 : _.cmd) === "hangup" ? t.groupID ? i.t("CallMessage.call_ended") : `${i.t("CallMessage.call_duration")}: ${N(e == null ? void 0 : e.call_end)}` : ((m = e == null ? void 0 : e.data) == null ? void 0 : m.cmd) === "switchToAudio" ? i.t("CallMessage.switch_to_audio_call") : ((p = e == null ? void 0 : e.data) == null ? void 0 : p.cmd) === "switchToVideo" ? i.t("CallMessage.switch_to_video_call") : i.t("CallMessage.start_call");
+      return (((f = a == null ? void 0 : a.data) == null ? void 0 : f.cmd) === "audioCall" || ((g = a == null ? void 0 : a.data) == null ? void 0 : g.cmd) === "videoCall") && i.groupID ? e("CallMessage.start_call", { messageSender: n }) : ((_ = a == null ? void 0 : a.data) == null ? void 0 : _.cmd) === "hangup" ? i.groupID ? e("CallMessage.call_ended") : `${e("CallMessage.call_duration")}: ${N(a == null ? void 0 : a.call_end)}` : ((m = a == null ? void 0 : a.data) == null ? void 0 : m.cmd) === "switchToAudio" ? e("CallMessage.switch_to_audio_call") : ((p = a == null ? void 0 : a.data) == null ? void 0 : p.cmd) === "switchToVideo" ? e("CallMessage.switch_to_video_call") : e("CallMessage.start_call", { messageSender: "" });
     case 2:
-      return t.groupID ? `${s} ${i.t("CallMessage.cancel_call")}` : t.inviter === l ? i.t("CallMessage.canceled") : i.t("CallMessage.canceled_by_recipient");
+      return i.groupID ? `${n} ${e("CallMessage.cancel_call")}` : i.inviter === t ? e("CallMessage.canceled") : e("CallMessage.canceled_by_recipient");
     case 3:
-      return ((C = e == null ? void 0 : e.data) == null ? void 0 : C.cmd) === "switchToAudio" ? i.t("CallMessage.switch_to_audio_call") : ((M = e == null ? void 0 : e.data) == null ? void 0 : M.cmd) === "switchToVideo" ? i.t("CallMessage.switch_to_video_call") : t.groupID ? `${s} ${i.t("CallMessage.answered")}` : i.t("CallMessage.answered");
+      return ((C = a == null ? void 0 : a.data) == null ? void 0 : C.cmd) === "switchToAudio" ? e("CallMessage.switch_to_audio_call") : ((M = a == null ? void 0 : a.data) == null ? void 0 : M.cmd) === "switchToVideo" ? e("CallMessage.switch_to_video_call") : i.groupID ? `${n} ${e("CallMessage.answered")}` : e("CallMessage.answered");
     case 4:
-      return t.groupID ? `${s} ${i.t("CallMessage.decline_call")}` : (e == null ? void 0 : e.line_busy) === "line_busy" || ((h = e == null ? void 0 : e.data) == null ? void 0 : h.message) === "lineBusy" ? t.inviter === l ? i.t("CallMessage.line_busy") : i.t("CallMessage.missed_due_to_busy") : t.inviter === l ? i.t("CallMessage.declined_by_recipient") : i.t("CallMessage.declined");
+      return i.groupID ? `${n} ${e("CallMessage.decline_call")}` : (a == null ? void 0 : a.line_busy) === "line_busy" || ((h = a == null ? void 0 : a.data) == null ? void 0 : h.message) === "lineBusy" ? i.inviter === t ? e("CallMessage.line_busy") : e("CallMessage.missed_due_to_busy") : i.inviter === t ? e("CallMessage.declined_by_recipient") : e("CallMessage.declined");
     case 5:
-      if (((v = e == null ? void 0 : e.data) == null ? void 0 : v.cmd) === "switchToAudio")
-        return i.t("CallMessage.switch_to_audio_call");
-      if (((I = e == null ? void 0 : e.data) == null ? void 0 : I.cmd) === "switchToVideo")
-        return i.t("CallMessage.switch_to_video_call");
-      if (t.groupID) {
-        if (n === t.inviter) {
-          V(t.inviteeList);
+      if (((v = a == null ? void 0 : a.data) == null ? void 0 : v.cmd) === "switchToAudio")
+        return e("CallMessage.switch_to_audio_call");
+      if (((I = a == null ? void 0 : a.data) == null ? void 0 : I.cmd) === "switchToVideo")
+        return e("CallMessage.switch_to_video_call");
+      if (i.groupID) {
+        if (l === i.inviter) {
+          x(i.inviteeList);
           let o = "";
-          return (w = t.inviteeList) == null || w.forEach((y) => {
-            const E = f.get(y) || y;
+          return (w = i.inviteeList) == null || w.forEach((y) => {
+            const E = c.get(y) || y;
             o += `${S(E)}、`;
-          }), o = o.substring(0, o.lastIndexOf("、")), `${o} ${i.t("CallMessage.no_answer")}`;
+          }), o = o.substring(0, o.lastIndexOf("、")), `${o} ${e("CallMessage.no_answer")}`;
         }
-        return `${s} ${i.t("CallMessage.no_answer")}`;
+        return `${n} ${e("CallMessage.no_answer")}`;
       }
-      return t.inviter === l ? i.t("CallMessage.no_answer_from_recipient") : i.t("CallMessage.no_answer_timeout");
+      return i.inviter === t ? e("CallMessage.no_answer_from_recipient") : e("CallMessage.no_answer_timeout");
     default:
       return "";
   }
 }
-function V(a = []) {
-  if (a.length === 0)
+function x(r = []) {
+  if (r.length === 0)
     return;
-  const r = U.getFriendRemark(a), t = [];
-  a.forEach((e) => {
-    const n = r[e];
-    n ? f.set(e, n) : $.has(e) || (t.push(e), $.set(e, 1));
-  }), t.length > 0 && L.getUserProfile({ userIDList: t }).then((e) => {
-    (e.data || []).forEach((c) => {
-      const { userID: l, nick: s } = c, d = s || l;
-      f.set(l, d);
+  const e = U.getFriendRemark(r), s = [];
+  r.forEach((i) => {
+    const a = e[i];
+    a ? c.set(i, a) : $.has(i) || (s.push(i), $.set(i, 1));
+  }), s.length > 0 && L.getUserProfile({ userIDList: s }).then((i) => {
+    (i.data || []).forEach((l) => {
+      const { userID: d, nick: t } = l, n = t || d;
+      c.set(d, n);
     });
   }).catch(() => {
   });
 }
 export {
-  q as isCallMessage,
+  P as isCallMessage,
   A as parseCallMessage,
-  H as parseCallMessageText,
-  D as startCall
+  D as parseCallMessageText,
+  q as startCall
 };

package/dist/utils/compare.d.ts

@@ -0,0 +1,10 @@
+export type Comparator<T> = (a: T, b: T) => -1 | 0 | 1;
+/**
+ * Creates a new combined {@link Comparator<T>} which sorts items by the given comparators.
+ * The comparators are applied in the order they are given (left -> right).
+ *
+ * @param comparators the comparators to use for sorting.
+ * @returns a combined {@link Comparator<T>}.
+ */
+export declare const combineComparators: <T>(...comparators: Comparator<T>[]) => Comparator<T>;
+export declare const createComparator: <T>(compareRules: (data1: T, data2: T) => boolean) => (a: T, b: T) => 0 | 1 | -1;

package/dist/utils/compare.js

@@ -0,0 +1,12 @@
+const e = (...r) => (t, n) => {
+  for (const f of r) {
+    const o = f(t, n);
+    if (o !== 0)
+      return o;
+  }
+  return 0;
+}, i = (r) => (t, n) => r(t, n) && r(n, t) ? 0 : r(t, n) ? -1 : r(n, t) ? 1 : 0;
+export {
+  e as combineComparators,
+  i as createComparator
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tuikit-atomicx-vue3",
-  "version": "4.4.0-beta.1",
+  "version": "4.5.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -19,9 +19,13 @@
       "types": "./dist/chat/index.d.ts",
       "import": "./dist/chat/index.js"
     },
-    "./rtc": {
-      "types": "./dist/rtc/index.d.ts",
-      "import": "./dist/rtc/index.js"
+    "./live": {
+      "types": "./dist/subEntry/live/index.d.ts",
+      "import": "./dist/subEntry/live/index.js"
+    },
+    "./room": {
+      "types": "./dist/subEntry/room/index.d.ts",
+      "import": "./dist/subEntry/room/index.js"
     },
     "./types": {
       "types": "./dist/types/index.d.ts",
@@ -50,10 +54,10 @@
   },
   "peerDependencies": {
     "@tencentcloud/chat": "^3.5.8",
-    "@tencentcloud/chat-uikit-engine": "~2.5.6",
+    "@tencentcloud/chat-uikit-engine": "~2.5.7",
     "@tencentcloud/tui-core": "latest",
-    "@tencentcloud/tuiroom-engine-js": "~3.5.0-beta.1",
-    "@tencentcloud/uikit-base-component-vue3": "1.1.1",
+    "@tencentcloud/tuiroom-engine-js": "~3.5.0",
+    "@tencentcloud/uikit-base-component-vue3": "1.3.0",
     "vue": "^3.4.21"
   },
   "dependencies": {

package/src/baseComp/AudioIcon.vue

@@ -1,10 +1,18 @@
 <template>
   <div :class="['audio-icon-container', `${size == 'small' && 'small'}`]">
     <div class="audio-level-container">
-      <div class="audio-level" :style="audioLevelStyle"></div>
+      <div class="audio-level" :style="audioLevelStyle" />
     </div>
-    <IconMicOff class="audio-icon" size="24" v-if="props.isMuted" />
-    <IconMicOn class="audio-icon" size="24" v-else />
+    <IconMicOff
+      v-if="props.isMuted"
+      class="audio-icon"
+      :size="24"
+    />
+    <IconMicOn
+      v-else
+      class="audio-icon"
+      :size="24"
+    />
   </div>
 </template>
 

package/src/chat/server.ts

@@ -111,7 +111,6 @@ export default class ChatLoginServer {
   }
 
   public logout() {
-    TUIChatEngine.logout();
     this.isLogin.value = false;
     this.isEngineLoggingIn = false;
   }

package/src/components/AudioSetting/AudioMediaControl.vue

@@ -26,19 +26,20 @@
 </template>
 
 <script setup lang="ts">
-import { ref, Ref, defineEmits, computed, inject } from 'vue';
-import IconButton from '../../baseComp/IconButton.vue';
+import type { Ref } from 'vue';
+import { ref, defineEmits, computed, inject } from 'vue';
 import AudioIcon from '../../baseComp/AudioIcon.vue';
-import AudioSettingTab from './AudioSettingTab.vue';
-import { useI18n } from '../../locales';
+import IconButton from '../../baseComp/IconButton.vue';
 import vClickOutside from '../../directives/vClickOutside';
+import { useI18n } from '../../locales';
 import { useDeviceState } from '../../states/DeviceState';
-import { DeviceStatus, DeviceError, AudioSettingProps, MediaSettingDisplayMode } from '../../types';
 import { useRoomState } from '../../states/RoomState';
+import { DeviceStatus, DeviceError, MediaSettingDisplayMode } from '../../types';
+import AudioSettingTab from './AudioSettingTab.vue';
+import type { AudioSettingProps } from '../../types';
 
-const audioSettingProps: AudioSettingProps | undefined =
-  inject('audioSettingProps');
-
+const audioSettingProps: AudioSettingProps | undefined
+  = inject('audioSettingProps');
 
 const { currentRoom } = useRoomState();
 const {
@@ -59,7 +60,7 @@ const showAudioSettingTab: Ref<boolean> = ref(false);
 const { t } = useI18n();
 
 const isMuted = computed(() => {
-  if (!currentRoom.value) {
+  if (!currentRoom?.value) {
     return !isMicrophoneTesting.value;
   }
   return microphoneStatus.value !== DeviceStatus.On;

package/src/components/AudioSetting/AudioRequestDialog.vue

@@ -14,7 +14,7 @@
   >
     <span>{{ dialogContent }}</span>
     <template #footer>
-      <TUIButton @click="handleAccept" type="primary">
+      <TUIButton type="primary" @click="handleAccept">
         {{ t('Turn on the microphone') }}
       </TUIButton>
       <TUIButton @click="handleReject">
@@ -25,21 +25,21 @@
 </template>
 
 <script setup lang="ts">
-import { ref, Ref, onUnmounted } from 'vue';
+import type { Ref } from 'vue';
+import { ref, onUnmounted } from 'vue';
 import TUIRoomEngine, {
   TUIRoomEvents,
-  TUIRequest,
   TUIRequestAction,
   TUIRole,
 } from '@tencentcloud/tuiroom-engine-js';
-import { TUIButton } from '@tencentcloud/uikit-base-component-vue3';
+import { TUIButton, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import TuiDialog from '../../baseComp/Dialog';
-import { useI18n } from '../../locales';
-import useRoomEngine from '../../hooks/useRoomEngine';
-import useUserState from '../../states/UserState/index';
+import { useRoomEngine } from '../../hooks/useRoomEngine';
+import { useUserState } from '../../states/UserState';
+import type { TUIRequest } from '@tencentcloud/tuiroom-engine-js';
 
 const roomEngine = useRoomEngine();
-const { t } = useI18n();
+const { t } = useUIKit();
 const dialogContent: Ref<string> = ref('');
 
 const { getUserInfo } = useUserState();
@@ -52,8 +52,8 @@ const requestOpenMicRequestId: Ref<string> = ref('');
 async function onRequestReceived(eventInfo: { request: TUIRequest }) {
   const { userId, requestAction, requestId } = eventInfo.request;
   if (requestAction === TUIRequestAction.kRequestToOpenRemoteMicrophone) {
-    const userRole =
-      getUserInfo({ userId })?.userRole === TUIRole.kRoomOwner
+    const userRole
+      = getUserInfo({ userId })?.userRole === TUIRole.kRoomOwner
         ? t('RoomOwner')
         : t('Admin');
     dialogContent.value = t('Sb invites you to turn on the microphone', {
@@ -99,7 +99,7 @@ onUnmounted(() => {
   roomEngine.instance?.off(TUIRoomEvents.onRequestReceived, onRequestReceived);
   roomEngine.instance?.off(
     TUIRoomEvents.onRequestCancelled,
-    onRequestCancelled
+    onRequestCancelled,
   );
 });
 </script>

package/src/components/AudioSetting/AudioSettingTab.vue

@@ -19,7 +19,7 @@
             'mic-bar',
             `${showVolume && volumeNum > index ? 'active' : ''}`,
           ]"
-        ></div>
+        />
       </div>
     </div>
     <div v-if="audioSettingProps?.supportSwitchSpeaker" class="item-setting">
@@ -41,14 +41,14 @@
 
 <script setup lang="ts">
 import { computed, onBeforeUnmount, inject } from 'vue';
+import { TUIButton, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { useDeviceState } from '../../states/DeviceState';
+import { MediaSettingDisplayMode } from '../../types';
 import MicrophoneSelect from './MicrophoneSelect.vue';
 import SpeakerSelect from './SpeakerSelect.vue';
-import { useI18n } from '../../locales';
-import { TUIButton } from '@tencentcloud/uikit-base-component-vue3';
-import { useDeviceState } from '../../states/DeviceState';
-import { AudioSettingProps, MediaSettingDisplayMode } from '../../types';
+import type { AudioSettingProps } from '../../types';
 
-const { t } = useI18n();
+const { t } = useUIKit();
 const {
   captureVolume,
   isMicrophoneTesting,
@@ -59,24 +59,24 @@ const {
   stopSpeakerTest,
 } = useDeviceState();
 
-const audioSettingProps: AudioSettingProps | undefined =
-  inject('audioSettingProps');
+const audioSettingProps: AudioSettingProps | undefined
+  = inject('audioSettingProps');
 
 const isSimpleMode = computed(
-  () => audioSettingProps?.displayMode === MediaSettingDisplayMode.IconWithPanel
+  () => audioSettingProps?.displayMode === MediaSettingDisplayMode.IconWithPanel,
 );
 const isDetailMode = computed(
-  () => audioSettingProps?.displayMode === MediaSettingDisplayMode.Panel
+  () => audioSettingProps?.displayMode === MediaSettingDisplayMode.Panel,
 );
 
 const volumeTotalNum = computed(() => (isDetailMode.value ? 36 : 28));
 
 const volumeNum = computed(
-  () => (captureVolume.value * volumeTotalNum.value) / 100
+  () => (captureVolume.value * volumeTotalNum.value) / 100,
 );
 
 const showVolume = computed(
-  () => isSimpleMode.value || (isDetailMode.value && isMicrophoneTesting.value)
+  () => isSimpleMode.value || (isDetailMode.value && isMicrophoneTesting.value),
 );
 
 /**
@@ -93,8 +93,8 @@ function handleMicrophoneTest() {
  * Click on the speaker [Test] button
  **/
 async function handleSpeakerTest() {
-  const SPEAKER_TEST_URL =
-    'https://web.sdk.qcloud.com/trtc/electron/download/resources/media/TestSpeaker.mp3';
+  const SPEAKER_TEST_URL
+    = 'https://web.sdk.qcloud.com/trtc/electron/download/resources/media/TestSpeaker.mp3';
   if (isSpeakerTesting.value) {
     stopSpeakerTest();
   } else {

package/src/components/AudioSetting/MicrophoneSelect.vue

@@ -1,5 +1,5 @@
 <template>
-  <tui-select
+  <TUISelect
     v-model="currentDeviceId"
     placeholder="placeholder"
     class="select"
@@ -8,21 +8,21 @@
     :popper-append-to-body="false"
     @change="handleChange"
   >
-    <tui-option
+    <TUIOption
       v-for="item in microphoneList"
       :key="item.deviceId"
       :label="item.deviceName"
       :value="item.deviceId"
     />
-  </tui-select>
+  </TUISelect>
 </template>
 
 <script setup lang="ts">
 import { ref, watch, defineProps, withDefaults, onBeforeMount } from 'vue';
-import TuiSelect from '../../baseComp/Select';
-import TuiOption from '../../baseComp/Option';
+import { TUISelect, TUIOption } from '@tencentcloud/uikit-base-component-vue3';
 import { useDeviceState } from '../../states/DeviceState';
-import { TUIDeviceInfo } from '@tencentcloud/tuiroom-engine-js';
+import type { TUIDeviceInfo } from '@tencentcloud/tuiroom-engine-js';
+
 const { microphoneList, currentMicrophone, setCurrentMicrophone, getMicrophoneList } = useDeviceState();
 
 interface Props {
@@ -36,12 +36,12 @@ const currentDeviceId = ref(currentMicrophone.value?.deviceId);
 
 watch(
   () => currentMicrophone.value?.deviceId,
-  val => {
+  (val) => {
     if (currentDeviceId.value !== val) {
       currentDeviceId.value = val;
     }
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 async function handleChange(deviceId: string) {
@@ -50,8 +50,8 @@ async function handleChange(deviceId: string) {
     await setCurrentMicrophone({ deviceId });
   } catch (error) {
     if (
-      currentMicrophone.value?.deviceId &&
-      microphoneList.value
+      currentMicrophone.value?.deviceId
+      && microphoneList.value
         .map((item: TUIDeviceInfo) => item.deviceId)
         .includes(currentMicrophone.value?.deviceId)
     ) {
@@ -62,7 +62,7 @@ async function handleChange(deviceId: string) {
 
 onBeforeMount(async () => {
   await getMicrophoneList();
-})
+});
 </script>
 
 <style lang="scss" scoped>

package/src/components/AudioSetting/SpeakerSelect.vue

@@ -1,5 +1,5 @@
 <template>
-  <tui-select
+  <TUISelect
     v-model="currentDeviceId"
     placeholder="placeholder"
     class="select"
@@ -8,21 +8,20 @@
     :popper-append-to-body="false"
     @change="handleChange"
   >
-    <tui-option
+    <TUIOption
       v-for="item in speakerList"
       :key="item.deviceId"
       :label="item.deviceName"
       :value="item.deviceId"
     />
-  </tui-select>
+  </TUISelect>
 </template>
 
 <script setup lang="ts">
 import { ref, watch, defineProps, withDefaults, onBeforeMount } from 'vue';
-import { TUIDeviceInfo } from '@tencentcloud/tuiroom-engine-js';
-import TuiSelect from '../../baseComp/Select';
-import TuiOption from '../../baseComp/Option';
+import { TUISelect, TUIOption } from '@tencentcloud/uikit-base-component-vue3';
 import { useDeviceState } from '../../states/DeviceState';
+import type { TUIDeviceInfo } from '@tencentcloud/tuiroom-engine-js';
 
 interface Props {
   onChange?: (id: string) => void;
@@ -37,12 +36,12 @@ const currentDeviceId = ref(currentSpeaker.value?.deviceId);
 
 watch(
   () => currentSpeaker.value?.deviceId,
-  val => {
+  (val) => {
     if (currentDeviceId.value !== val) {
       currentDeviceId.value = val;
     }
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 async function handleChange(deviceId: string) {
@@ -51,8 +50,8 @@ async function handleChange(deviceId: string) {
     await setCurrentSpeaker({ deviceId });
   } catch (error) {
     if (
-      currentSpeaker.value?.deviceId &&
-      speakerList.value
+      currentSpeaker.value?.deviceId
+      && speakerList.value
         .map((item: TUIDeviceInfo) => item.deviceId)
         .includes(currentSpeaker.value?.deviceId)
     ) {
@@ -63,7 +62,7 @@ async function handleChange(deviceId: string) {
 
 onBeforeMount(async () => {
   await getSpeakerList();
-})
+});
 </script>
 
 <style lang="scss" scoped>

package/src/components/AudioSetting/index.ts

@@ -1,4 +1,4 @@
 import AudioSetting from './index.vue';
 
 export { AudioSetting };
-export default AudioSetting;
+export default AudioSetting;