tuikit-atomicx-vue3 3.4.2 → 3.5.0-beta.7

package/dist/types/seat.d.ts

@@ -1,15 +1,20 @@
-import { DeviceStatus, DeviceStatusReason } from './device';
+import { DeviceStatus } from './device';
 
 export type SeatUserInfo = {
-    liveId: string;
     userId: string;
     userName: string;
     avatarUrl: string;
+    liveId: string;
     microphoneStatus: DeviceStatus;
-    microphoneStatusReason: DeviceStatusReason;
+    allowOpenMicrophone: boolean;
     cameraStatus: DeviceStatus;
-    cameraStatusReason: DeviceStatusReason;
+    allowOpenCamera: boolean;
 };
+export declare enum Role {
+    Owner = 0,
+    Administrator = 1,
+    GeneralUser = 2
+}
 export type RegionInfo = {
     x: number;
     y: number;
@@ -28,3 +33,17 @@ export interface LiveCanvas {
     height: number;
     background: string;
 }
+export declare enum MoveSeatPolicy {
+    AbortWhenOccupied = 0,
+    ForceReplace = 1,
+    SwapPosition = 2
+}
+export declare enum DeviceControlPolicy {
+    UnlockOnly = 1
+}
+export declare enum LiveSeatEvent {
+    onLocalCameraOpenedByAdmin = "onLocalCameraOpenedByAdmin",
+    onLocalCameraClosedByAdmin = "onLocalCameraClosedByAdmin",
+    onLocalMicrophoneOpenedByAdmin = "onLocalMicrophoneOpenedByAdmin",
+    onLocalMicrophoneClosedByAdmin = "onLocalMicrophoneClosedByAdmin"
+}

package/dist/types/seat.js

@@ -1 +1,7 @@
-
+var r = /* @__PURE__ */ ((n) => (n[n.Owner = 0] = "Owner", n[n.Administrator = 1] = "Administrator", n[n.GeneralUser = 2] = "GeneralUser", n))(r || {}), o = /* @__PURE__ */ ((n) => (n[n.AbortWhenOccupied = 0] = "AbortWhenOccupied", n[n.ForceReplace = 1] = "ForceReplace", n[n.SwapPosition = 2] = "SwapPosition", n))(o || {}), a = /* @__PURE__ */ ((n) => (n[n.UnlockOnly = 1] = "UnlockOnly", n))(a || {}), d = /* @__PURE__ */ ((n) => (n.onLocalCameraOpenedByAdmin = "onLocalCameraOpenedByAdmin", n.onLocalCameraClosedByAdmin = "onLocalCameraClosedByAdmin", n.onLocalMicrophoneOpenedByAdmin = "onLocalMicrophoneOpenedByAdmin", n.onLocalMicrophoneClosedByAdmin = "onLocalMicrophoneClosedByAdmin", n))(d || {});
+export {
+  a as DeviceControlPolicy,
+  d as LiveSeatEvent,
+  o as MoveSeatPolicy,
+  r as Role
+};

package/dist/utils/call.d.ts

@@ -4,5 +4,5 @@ import { MessageModel } from '../types/engine';
 declare function isCallMessage(message: MessageModel): boolean;
 declare function startCall(params: StartCallParams): void;
 declare function parseCallMessage(message: MessageModel): CallMessagePayload | undefined;
-declare function parseCallMessageText(message: MessageModel): string;
+declare function parseCallMessageText(message: MessageModel, t: any): string;
 export { startCall, isCallMessage, parseCallMessage, parseCallMessageText };

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/eventCenter.d.ts

@@ -0,0 +1,88 @@
+/**
+ * 事件中心工具类
+ * 提供事件的订阅、取消订阅和触发功能
+ */
+export type EventCallback<T = any> = (data?: T) => void;
+export declare class EventCenter {
+    private listeners;
+    private listenerIdCounter;
+    /**
+     * 订阅事件
+     * @param event 事件名称
+     * @param callback 回调函数
+     * @returns 返回取消订阅的函数
+     */
+    on<T = any>(event: string, callback: EventCallback<T>): () => void;
+    /**
+     * 订阅事件（只触发一次）
+     * @param event 事件名称
+     * @param callback 回调函数
+     * @returns 返回取消订阅的函数
+     */
+    once<T = any>(event: string, callback: EventCallback<T>): () => void;
+    /**
+     * 取消订阅事件
+     * @param event 事件名称
+     * @param callbackOrId 回调函数或监听器ID
+     */
+    off(event: string, callbackOrId?: EventCallback | string): void;
+    /**
+     * 触发事件
+     * @param event 事件名称
+     * @param data 传递给回调函数的数据
+     */
+    emit<T = any>(event: string, data?: T): void;
+    /**
+     * 获取指定事件的监听器数量
+     * @param event 事件名称
+     * @returns 监听器数量
+     */
+    getListenerCount(event?: string): number;
+    /**
+     * 获取所有已注册的事件名称
+     * @returns 事件名称数组
+     */
+    getEventNames(): string[];
+    /**
+     * 检查是否有指定事件的监听器
+     * @param event 事件名称
+     * @returns 是否有监听器
+     */
+    hasListeners(event: string): boolean;
+    /**
+     * 清除所有事件监听器
+     */
+    clear(): void;
+    /**
+     * 清除指定事件的所有监听器
+     * @param event 事件名称
+     */
+    clearEvent(event: string): void;
+    /**
+     * 生成唯一的监听器ID
+     * @returns 监听器ID
+     */
+    private generateListenerId;
+    /**
+     * 验证事件名称是否有效
+     * @param event 事件名称
+     * @returns 是否有效
+     */
+    private isValidEvent;
+    /**
+     * 验证回调函数是否有效
+     * @param callback 回调函数
+     * @returns 是否有效
+     */
+    private isValidCallback;
+}
+export declare const eventCenter: EventCenter;
+export declare const on: <T = any>(event: string, callback: EventCallback<T>) => () => void;
+export declare const once: <T = any>(event: string, callback: EventCallback<T>) => () => void;
+export declare const off: (event: string, callbackOrId?: EventCallback | string) => void;
+export declare const emit: <T = any>(event: string, data?: T) => void;
+export declare const clear: () => void;
+export declare const getListenerCount: (event?: string) => number;
+export declare const getEventNames: () => string[];
+export declare const hasListeners: (event: string) => boolean;
+export default eventCenter;

package/dist/utils/eventCenter.js

@@ -0,0 +1,161 @@
+var c = Object.defineProperty;
+var f = (o, e, t) => e in o ? c(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
+var h = (o, e, t) => f(o, typeof e != "symbol" ? e + "" : e, t);
+class d {
+  constructor() {
+    // 存储所有事件监听器
+    h(this, "listeners", /* @__PURE__ */ new Map());
+    // 用于生成唯一的监听器ID
+    h(this, "listenerIdCounter", 0);
+  }
+  /**
+   * 订阅事件
+   * @param event 事件名称
+   * @param callback 回调函数
+   * @returns 返回取消订阅的函数
+   */
+  on(e, t) {
+    if (!this.isValidEvent(e) || !this.isValidCallback(t))
+      throw new Error("Invalid event name or callback function");
+    const s = this.generateListenerId(), r = {
+      callback: t,
+      once: !1,
+      id: s
+    };
+    return this.listeners.has(e) || this.listeners.set(e, []), this.listeners.get(e).push(r), () => this.off(e, s);
+  }
+  /**
+   * 订阅事件（只触发一次）
+   * @param event 事件名称
+   * @param callback 回调函数
+   * @returns 返回取消订阅的函数
+   */
+  once(e, t) {
+    if (!this.isValidEvent(e) || !this.isValidCallback(t))
+      throw new Error("Invalid event name or callback function");
+    const s = this.generateListenerId(), r = {
+      callback: t,
+      once: !0,
+      id: s
+    };
+    return this.listeners.has(e) || this.listeners.set(e, []), this.listeners.get(e).push(r), () => this.off(e, s);
+  }
+  /**
+   * 取消订阅事件
+   * @param event 事件名称
+   * @param callbackOrId 回调函数或监听器ID
+   */
+  off(e, t) {
+    if (!this.isValidEvent(e))
+      return;
+    const s = this.listeners.get(e);
+    if (!s)
+      return;
+    if (t === void 0) {
+      this.listeners.delete(e);
+      return;
+    }
+    const r = typeof t == "string", l = s.filter((n) => r ? n.id !== t : n.callback !== t);
+    l.length === 0 ? this.listeners.delete(e) : this.listeners.set(e, l);
+  }
+  /**
+   * 触发事件
+   * @param event 事件名称
+   * @param data 传递给回调函数的数据
+   */
+  emit(e, t) {
+    if (!this.isValidEvent(e))
+      return;
+    const s = this.listeners.get(e);
+    if (!s || s.length === 0)
+      return;
+    const r = [...s], l = [];
+    r.forEach((n) => {
+      try {
+        n.callback(t), n.once && l.push(n.id);
+      } catch (a) {
+        console.error(`Error executing event listener for "${e}":`, a);
+      }
+    }), l.length > 0 && l.forEach((n) => this.off(e, n));
+  }
+  /**
+   * 获取指定事件的监听器数量
+   * @param event 事件名称
+   * @returns 监听器数量
+   */
+  getListenerCount(e) {
+    if (e) {
+      const s = this.listeners.get(e);
+      return s ? s.length : 0;
+    }
+    let t = 0;
+    for (const s of this.listeners.values())
+      t += s.length;
+    return t;
+  }
+  /**
+   * 获取所有已注册的事件名称
+   * @returns 事件名称数组
+   */
+  getEventNames() {
+    return Array.from(this.listeners.keys());
+  }
+  /**
+   * 检查是否有指定事件的监听器
+   * @param event 事件名称
+   * @returns 是否有监听器
+   */
+  hasListeners(e) {
+    return this.getListenerCount(e) > 0;
+  }
+  /**
+   * 清除所有事件监听器
+   */
+  clear() {
+    this.listeners.clear();
+  }
+  /**
+   * 清除指定事件的所有监听器
+   * @param event 事件名称
+   */
+  clearEvent(e) {
+    this.isValidEvent(e) && this.listeners.delete(e);
+  }
+  /**
+   * 生成唯一的监听器ID
+   * @returns 监听器ID
+   */
+  generateListenerId() {
+    return `listener_${++this.listenerIdCounter}_${Date.now()}`;
+  }
+  /**
+   * 验证事件名称是否有效
+   * @param event 事件名称
+   * @returns 是否有效
+   */
+  isValidEvent(e) {
+    return typeof e == "string" && e.trim().length > 0;
+  }
+  /**
+   * 验证回调函数是否有效
+   * @param callback 回调函数
+   * @returns 是否有效
+   */
+  isValidCallback(e) {
+    return typeof e == "function";
+  }
+}
+const i = new d(), g = i.on.bind(i), E = i.once.bind(i), C = i.off.bind(i), L = i.emit.bind(i), b = i.clear.bind(i), m = i.getListenerCount.bind(i), V = i.getEventNames.bind(i), p = i.hasListeners.bind(i);
+export {
+  d as EventCenter,
+  b as clear,
+  i as default,
+  L as emit,
+  i as eventCenter,
+  V as getEventNames,
+  m as getListenerCount,
+  p as hasListeners,
+  C as off,
+  g as on,
+  E as once
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tuikit-atomicx-vue3",
-  "version": "3.4.2",
+  "version": "3.5.0-beta.7",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -31,6 +31,7 @@
   "scripts": {
     "dev": "vite build --watch",
     "build": "vite build",
+    "build:local": "vite build",
     "build:watch": "vite build --mode development -w",
     "lint": "eslint .",
     "check-chinese": "node scripts/check-chinese-simple.js",
@@ -52,8 +53,8 @@
     "@tencentcloud/chat": "^3.5.8",
     "@tencentcloud/chat-uikit-engine": "~2.5.6",
     "@tencentcloud/tui-core": "latest",
-    "@tencentcloud/tuiroom-engine-js": "~3.4.2",
-    "@tencentcloud/uikit-base-component-vue3": "1.1.0",
+    "@tencentcloud/tuiroom-engine-js": "~3.5.0-beta.7",
+    "@tencentcloud/uikit-base-component-vue3": "1.1.1",
     "vue": "^3.4.21"
   },
   "dependencies": {

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

@@ -8,7 +8,6 @@
       :has-more="
         audioSettingProps?.displayMode === MediaSettingDisplayMode.IconWithPanel
       "
-      :disabled="microphoneStatus === DeviceStatus.OffNeedPermission"
       :is-not-support="microphoneLastError !== DeviceError.NoError"
       @click-icon="handleClickIcon"
       @click-more="handleMore"
@@ -16,7 +15,6 @@
       <audio-icon
         :audio-volume="captureVolume"
         :is-muted="isMuted"
-        :is-disabled="microphoneStatus === DeviceStatus.OffNeedPermission"
       />
     </icon-button>
     <audio-setting-tab
@@ -34,7 +32,7 @@ import AudioIcon from '../../baseComp/AudioIcon.vue';
 import AudioSettingTab from './AudioSettingTab.vue';
 import { useI18n } from '../../locales';
 import vClickOutside from '../../directives/vClickOutside';
-import useDeviceState from '../../states/DeviceState';
+import { useDeviceState } from '../../states/DeviceState';
 import { DeviceStatus, DeviceError, AudioSettingProps, MediaSettingDisplayMode } from '../../types';
 import { useRoomState } from '../../states/RoomState';
 

package/src/components/AudioSetting/AudioSettingTab.vue

@@ -45,7 +45,7 @@ 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 { useDeviceState } from '../../states/DeviceState';
 import { AudioSettingProps, MediaSettingDisplayMode } from '../../types';
 
 const { t } = useI18n();
@@ -169,4 +169,3 @@ onBeforeUnmount(() => {
   }
 }
 </style>
-../../states/DeviceState

package/src/components/AudioSetting/MicrophoneSelect.vue

@@ -21,7 +21,7 @@
 import { ref, watch, defineProps, withDefaults, onBeforeMount } from 'vue';
 import TuiSelect from '../../baseComp/Select';
 import TuiOption from '../../baseComp/Option';
-import useDeviceState from '../../states/DeviceState';
+import { useDeviceState } from '../../states/DeviceState';
 import { TUIDeviceInfo } from '@tencentcloud/tuiroom-engine-js';
 const { microphoneList, currentMicrophone, setCurrentMicrophone, getMicrophoneList } = useDeviceState();
 
@@ -71,4 +71,3 @@ onBeforeMount(async () => {
   font-size: 14px;
 }
 </style>
-../../states/DeviceState

package/src/components/AudioSetting/SpeakerSelect.vue

@@ -22,7 +22,7 @@ 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 useDeviceState from '../../states/DeviceState';
+import { useDeviceState } from '../../states/DeviceState';
 
 interface Props {
   onChange?: (id: string) => void;
@@ -72,4 +72,3 @@ onBeforeMount(async () => {
   font-size: 14px;
 }
 </style>
-../../states/DeviceState

package/src/components/AudioSettingPanel/i18n/en-US/index.ts

@@ -4,4 +4,5 @@ export const resource = {
   'Input volume': 'Input volume',
   Speaker: 'Speaker',
   'Output volume': '输出音量',
+  'Unrecognized device': 'Unrecognized device',
 };

package/src/components/AudioSettingPanel/i18n/zh-CN/index.ts

@@ -4,4 +4,5 @@ export const resource = {
   'Input volume': '输入音量',
   Speaker: '扬声器',
   'Output volume': '输出音量',
+  'Unrecognized device': '未识别设备',
 };