@tencentcloud/roomkit-electron-vue3 2.5.0 → 2.6.0

package/lib/components/Whiteboard/core/initControlsRotate.js

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const fabric = require("fabric");
+function rotateIcon(angle) {
+  return `url("data:image/svg+xml,%3Csvg height='18' width='18' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'%3E%3Cg fill='none' transform='rotate(${angle} 16 16)'%3E%3Cpath d='M22.4484 0L32 9.57891L22.4484 19.1478V13.1032C17.6121 13.8563 13.7935 17.6618 13.0479 22.4914H19.2141L9.60201 32.01L0 22.4813H6.54912C7.36524 14.1073 14.0453 7.44023 22.4484 6.61688V0Z' fill='white'/%3E%3Cpath d='M24.0605 3.89587L29.7229 9.57896L24.0605 15.252V11.3562C17.0479 11.4365 11.3753 17.0895 11.3048 24.0879H15.3048L9.60201 29.7308L3.90932 24.0879H8.0806C8.14106 15.3223 15.2645 8.22345 24.0605 8.14313V3.89587Z' fill='black'/%3E%3C/g%3E%3C/svg%3E ") 12 12,crosshair`;
+}
+function initControlsRotate(canvas) {
+  fabric.fabric.Object.prototype.controls.mtr = new fabric.fabric.Control({
+    x: -0.5,
+    y: -0.5,
+    offsetY: -10,
+    offsetX: -10,
+    rotate: 20,
+    actionName: "rotate",
+    actionHandler: fabric.fabric.controlsUtils.rotationWithSnapping,
+    render: () => {
+    }
+  });
+  fabric.fabric.Object.prototype.controls.mtr2 = new fabric.fabric.Control({
+    x: 0.5,
+    y: -0.5,
+    offsetY: -10,
+    offsetX: 10,
+    rotate: 20,
+    actionName: "rotate",
+    actionHandler: fabric.fabric.controlsUtils.rotationWithSnapping,
+    render: () => {
+    }
+  });
+  fabric.fabric.Object.prototype.controls.mtr3 = new fabric.fabric.Control({
+    x: 0.5,
+    y: 0.5,
+    offsetY: 10,
+    offsetX: 10,
+    rotate: 20,
+    actionName: "rotate",
+    actionHandler: fabric.fabric.controlsUtils.rotationWithSnapping,
+    render: () => {
+    }
+  });
+  fabric.fabric.Object.prototype.controls.mtr4 = new fabric.fabric.Control({
+    x: -0.5,
+    y: 0.5,
+    offsetY: 10,
+    offsetX: -10,
+    rotate: 20,
+    actionName: "rotate",
+    actionHandler: fabric.fabric.controlsUtils.rotationWithSnapping,
+    render: () => {
+    }
+  });
+  canvas.on("after:render", () => {
+    const activeObject = canvas.getActiveObject();
+    if (!activeObject) return;
+    fabric.fabric.Object.prototype.controls.mtr.cursorStyle = rotateIcon(
+      Number(activeObject.angle.toFixed(2))
+    );
+    fabric.fabric.Object.prototype.controls.mtr2.cursorStyle = rotateIcon(
+      Number(activeObject.angle.toFixed(2)) + 90
+    );
+    fabric.fabric.Object.prototype.controls.mtr3.cursorStyle = rotateIcon(
+      Number(activeObject.angle.toFixed(2)) + 180
+    );
+    fabric.fabric.Object.prototype.controls.mtr4.cursorStyle = rotateIcon(
+      Number(activeObject.angle.toFixed(2)) + 270
+    );
+  });
+  canvas.on("object:rotating", (event) => {
+    var _a;
+    const activeObject = canvas.getActiveObject();
+    if (!activeObject) return;
+    const body = canvas.getElement().nextSibling;
+    switch ((_a = event.transform) == null ? void 0 : _a.corner) {
+      case "mtr":
+        body.style.cursor = rotateIcon(
+          Number(activeObject.angle.toFixed(2))
+        );
+        break;
+      case "mtr2":
+        body.style.cursor = rotateIcon(
+          Number(activeObject.angle.toFixed(2)) + 90
+        );
+        break;
+      case "mtr3":
+        body.style.cursor = rotateIcon(
+          Number(activeObject.angle.toFixed(2)) + 180
+        );
+        break;
+      case "mtr4":
+        body.style.cursor = rotateIcon(
+          Number(activeObject.angle.toFixed(2)) + 270
+        );
+        break;
+    }
+  });
+}
+exports.default = initControlsRotate;

package/lib/components/Whiteboard/core/initHotKeys.d.ts

@@ -0,0 +1,16 @@
+import { Canvas } from 'fabric/fabric-impl';
+import { default as hotkeys } from 'hotkeys-js';
+import { default as FabricCanvas } from './index';
+
+declare const keyNames: {
+    lrdu: string;
+    backspace: string;
+    delete: string;
+    ctrlz: string;
+    ctrly: string;
+    ctrlc: string;
+    ctrlv: string;
+};
+declare function initHotkeys(canvas: Canvas, fabricCanvas: FabricCanvas): void;
+export default initHotkeys;
+export { keyNames, hotkeys };

package/lib/components/Whiteboard/emitter.d.ts

@@ -0,0 +1,11 @@
+import { EventType, Handler } from 'mitt';
+
+declare class EventEmitter<T extends Record<EventType, unknown>> {
+    private emitter;
+    constructor();
+    on(eventName: keyof T, handler: Handler<T[keyof T]>): void;
+    off(eventName: keyof T, handler: Handler<T[keyof T]>): void;
+    emit(eventName: keyof T, event: T[keyof T]): void;
+    removeAllListeners(): void;
+}
+export default EventEmitter;

package/lib/components/Whiteboard/emitter.js

@@ -0,0 +1,25 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const mitt = require("mitt");
+class EventEmitter {
+  constructor() {
+    __publicField(this, "emitter");
+    this.emitter = mitt();
+  }
+  on(eventName, handler) {
+    this.emitter.on(eventName, handler);
+  }
+  off(eventName, handler) {
+    this.emitter.off(eventName, handler);
+  }
+  emit(eventName, event) {
+    this.emitter.emit(eventName, event);
+  }
+  removeAllListeners() {
+    this.emitter.all.clear();
+  }
+}
+exports.default = EventEmitter;

package/lib/components/Whiteboard/index.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/lib/components/Whiteboard/index.vue.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const index_vue_vue_type_script_setup_true_lang = require("./index.vue2.js");
+;/* empty css            */
+const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.js");
+const index = /* @__PURE__ */ _pluginVue_exportHelper.default(index_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-ba2dec44"]]);
+exports.default = index;

package/lib/components/Whiteboard/index.vue2.js

@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const Vue = require("vue");
+const electron = require("electron");
+const index$4 = require("./core/index.js");
+const index = require("./controller/ToolBox/index.vue.js");
+const index$1 = require("./controller/RedoUndo/index.vue.js");
+const index$3 = require("./controller/CloseController/index.vue.js");
+const utils = require("../../utils/utils.js");
+const index$2 = require("./controller/SaveController/index.vue.js");
+const _withScopeId = (n) => (Vue.pushScopeId("data-v-ba2dec44"), n = n(), Vue.popScopeId(), n);
+const _hoisted_1 = { class: "tool-box-out" };
+const _hoisted_2 = { class: "redo-undo-box" };
+const _hoisted_3 = { class: "controller-box" };
+const _hoisted_4 = { class: "save-controller" };
+const _hoisted_5 = { class: "close-controller" };
+const _hoisted_6 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ Vue.createElementVNode("canvas", {
+  class: "whiteboard-canvas",
+  id: "canvas"
+}, null, -1));
+const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
+  __name: "index",
+  setup(__props) {
+    const isAnnotationWin = Vue.ref(false);
+    const isAnnotationStarted = Vue.ref(false);
+    const canvas = Vue.ref();
+    const canvasWrapRef = Vue.ref();
+    Vue.provide("canvas", canvas);
+    const isControllerVisiable = Vue.computed(
+      () => !isAnnotationWin.value || isAnnotationStarted.value
+    );
+    const isSaveControllerVisiable = Vue.computed(() => !isAnnotationWin.value);
+    function init() {
+      const fabricCanvas = new index$4.default("canvas");
+      canvas.value = fabricCanvas;
+    }
+    function resizeCanvas() {
+      var _a, _b;
+      canvas.value.setWidth((_a = canvasWrapRef.value) == null ? void 0 : _a.offsetWidth);
+      canvas.value.setHeight((_b = canvasWrapRef.value) == null ? void 0 : _b.offsetHeight);
+    }
+    Vue.onMounted(() => {
+      var _a, _b, _c;
+      init();
+      const annotationParam = utils.getUrlParam("isAnnotationWin");
+      if (annotationParam && annotationParam === "true") {
+        isAnnotationWin.value = true;
+      }
+      if (!isAnnotationWin.value) {
+        (_a = canvas.value) == null ? void 0 : _a.setBackgroundColor("white");
+      }
+      canvas.value.setWidth((_b = canvasWrapRef.value) == null ? void 0 : _b.offsetWidth);
+      canvas.value.setHeight((_c = canvasWrapRef.value) == null ? void 0 : _c.offsetHeight);
+      window.addEventListener("resize", resizeCanvas);
+    });
+    Vue.onUnmounted(() => {
+      window.removeEventListener("resize", resizeCanvas);
+    });
+    electron.ipcRenderer.on("annotation:annotating-started", () => {
+      isAnnotationStarted.value = true;
+    });
+    electron.ipcRenderer.on("annotation:annotating-stopped", () => {
+      isAnnotationStarted.value = false;
+    });
+    electron.ipcRenderer.on("whiteboard:clear", () => {
+      if (canvas.value) {
+        canvas.value.reloadCanvas();
+      }
+    });
+    electron.ipcRenderer.on("annotation:clear", () => {
+      if (canvas.value) {
+        canvas.value.reloadCanvas();
+      }
+    });
+    return (_ctx, _cache) => {
+      return Vue.openBlock(), Vue.createElementBlock("div", null, [
+        Vue.createElementVNode("div", {
+          class: "canvas-wrap",
+          ref_key: "canvasWrapRef",
+          ref: canvasWrapRef
+        }, [
+          Vue.withDirectives(Vue.createElementVNode("div", _hoisted_1, [
+            Vue.createVNode(index.default)
+          ], 512), [
+            [Vue.vShow, isControllerVisiable.value]
+          ]),
+          Vue.withDirectives(Vue.createElementVNode("div", _hoisted_2, [
+            Vue.createVNode(index$1.default)
+          ], 512), [
+            [Vue.vShow, isControllerVisiable.value]
+          ]),
+          Vue.createElementVNode("div", _hoisted_3, [
+            Vue.withDirectives(Vue.createElementVNode("div", _hoisted_4, [
+              Vue.createVNode(index$2.default)
+            ], 512), [
+              [Vue.vShow, isSaveControllerVisiable.value]
+            ]),
+            Vue.withDirectives(Vue.createElementVNode("div", _hoisted_5, [
+              Vue.createVNode(index$3.default)
+            ], 512), [
+              [Vue.vShow, isControllerVisiable.value]
+            ])
+          ]),
+          _hoisted_6
+        ], 512)
+      ]);
+    };
+  }
+});
+exports.default = _sfc_main;

package/lib/components/Whiteboard/resources/editor/edgecontrol.svg.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const edgeImg = "data:image/svg+xml,%3csvg%20width='19'%20height='18'%20viewBox='0%200%2019%2018'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20filter='url(%23filter0_d)'%3e%3ccircle%20cx='9.99609'%20cy='9'%20r='5'%20fill='white'/%3e%3ccircle%20cx='9.99609'%20cy='9'%20r='4.75'%20stroke='black'%20stroke-opacity='0.3'%20stroke-width='0.5'/%3e%3c/g%3e%3cdefs%3e%3cfilter%20id='filter0_d'%20x='0.996094'%20y='0'%20width='18'%20height='18'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3e%3cfeColorMatrix%20in='SourceAlpha'%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200'/%3e%3cfeOffset/%3e%3cfeGaussianBlur%20stdDeviation='2'/%3e%3cfeColorMatrix%20type='matrix'%20values='0%200%200%200%200.137674%200%200%200%200%200.190937%200%200%200%200%200.270833%200%200%200%200.15%200'/%3e%3cfeBlend%20mode='normal'%20in2='BackgroundImageFix'%20result='effect1_dropShadow'/%3e%3cfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='effect1_dropShadow'%20result='shape'/%3e%3c/filter%3e%3c/defs%3e%3c/svg%3e";
+exports.default = edgeImg;

package/lib/components/Whiteboard/resources/editor/middlecontrol.svg.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const verticalImg = "data:image/svg+xml,%3csvg%20width='12'%20height='24'%20viewBox='0%200%2012%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20filter='url(%23filter0_d)'%3e%3crect%20x='4'%20y='4'%20width='4'%20height='16'%20rx='2'%20fill='white'/%3e%3crect%20x='4.25'%20y='4.25'%20width='3.5'%20height='15.5'%20rx='1.75'%20stroke='black'%20stroke-opacity='0.3'%20stroke-width='0.5'/%3e%3c/g%3e%3cdefs%3e%3cfilter%20id='filter0_d'%20x='0'%20y='0'%20width='12'%20height='24'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3e%3cfeColorMatrix%20in='SourceAlpha'%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200'/%3e%3cfeOffset/%3e%3cfeGaussianBlur%20stdDeviation='2'/%3e%3cfeColorMatrix%20type='matrix'%20values='0%200%200%200%200.137674%200%200%200%200%200.190937%200%200%200%200%200.270833%200%200%200%200.15%200'/%3e%3cfeBlend%20mode='normal'%20in2='BackgroundImageFix'%20result='effect1_dropShadow'/%3e%3cfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='effect1_dropShadow'%20result='shape'/%3e%3c/filter%3e%3c/defs%3e%3c/svg%3e";
+exports.default = verticalImg;

package/lib/components/Whiteboard/resources/editor/middlecontrolhoz.svg.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const horizontalImg = "data:image/svg+xml,%3csvg%20width='24'%20height='12'%20viewBox='0%200%2024%2012'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20filter='url(%23filter0_d)'%3e%3crect%20x='20'%20y='4'%20width='4'%20height='16'%20rx='2'%20transform='rotate(90%2020%204)'%20fill='white'/%3e%3crect%20x='19.75'%20y='4.25'%20width='3.5'%20height='15.5'%20rx='1.75'%20transform='rotate(90%2019.75%204.25)'%20stroke='black'%20stroke-opacity='0.3'%20stroke-width='0.5'/%3e%3c/g%3e%3cdefs%3e%3cfilter%20id='filter0_d'%20x='0'%20y='0'%20width='24'%20height='12'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3e%3cfeColorMatrix%20in='SourceAlpha'%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200'/%3e%3cfeOffset/%3e%3cfeGaussianBlur%20stdDeviation='2'/%3e%3cfeColorMatrix%20type='matrix'%20values='0%200%200%200%200.137674%200%200%200%200%200.190937%200%200%200%200%200.270833%200%200%200%200.15%200'/%3e%3cfeBlend%20mode='normal'%20in2='BackgroundImageFix'%20result='effect1_dropShadow'/%3e%3cfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='effect1_dropShadow'%20result='shape'/%3e%3c/filter%3e%3c/defs%3e%3c/svg%3e";
+exports.default = horizontalImg;

package/lib/components/Whiteboard/resources/editor/rotateicon.svg.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const rotateImg = "data:image/svg+xml,%3csvg%20width='18'%20height='18'%20viewBox='0%200%2018%2018'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20filter='url(%23filter0_d)'%3e%3ccircle%20cx='9'%20cy='9'%20r='5'%20fill='white'/%3e%3ccircle%20cx='9'%20cy='9'%20r='4.75'%20stroke='black'%20stroke-opacity='0.3'%20stroke-width='0.5'/%3e%3c/g%3e%3cpath%20d='M10.8047%2011.1242L9.49934%2011.1242L9.49934%209.81885'%20stroke='black'%20stroke-width='0.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M6.94856%206.72607L8.25391%206.72607L8.25391%208.03142'%20stroke='black'%20stroke-width='0.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M9.69517%206.92267C10.007%207.03301%2010.2858%207.22054%2010.5055%207.46776C10.7252%207.71497%2010.8787%208.01382%2010.9517%208.33642C11.0247%208.65902%2011.0148%208.99485%2010.9229%209.31258C10.831%209.63031%2010.6601%209.91958%2010.4262%2010.1534L9.49701%2011.0421M8.25792%206.72607L7.30937%207.73554C7.07543%207.96936%206.90454%208.25863%206.81264%208.57636C6.72073%208.89408%206.71081%209.22992%206.78381%209.55251C6.8568%209.87511%207.01032%2010.174%207.23005%2010.4212C7.44978%2010.6684%207.72855%2010.8559%208.04036%2010.9663'%20stroke='black'%20stroke-width='0.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cdefs%3e%3cfilter%20id='filter0_d'%20x='0'%20y='0'%20width='18'%20height='18'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3e%3cfeColorMatrix%20in='SourceAlpha'%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200'/%3e%3cfeOffset/%3e%3cfeGaussianBlur%20stdDeviation='2'/%3e%3cfeColorMatrix%20type='matrix'%20values='0%200%200%200%200.137674%200%200%200%200%200.190937%200%200%200%200%200.270833%200%200%200%200.15%200'/%3e%3cfeBlend%20mode='normal'%20in2='BackgroundImageFix'%20result='effect1_dropShadow'/%3e%3cfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='effect1_dropShadow'%20result='shape'/%3e%3c/filter%3e%3c/defs%3e%3c/svg%3e";
+exports.default = rotateImg;

package/lib/components/common/ArrowStroke.vue.d.ts

@@ -3,9 +3,9 @@ interface Props {
     arrowDirection: string;
     hasStroke: boolean;
 }
-declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "click-arrow": (...args: any[]) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {
+}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {
     "onClick-arrow"?: ((...args: any[]) => any) | undefined;
 }, {}, {}>;
 export default _default;

package/lib/components/common/ArrowStroke.vue.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const ArrowStroke_vue_vue_type_script_setup_true_lang = require("./ArrowStroke.vue2.js");
-require("./ArrowStroke.vue3.js");
+;/* empty css                  */
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.js");
-const ArrowStroke = /* @__PURE__ */ _pluginVue_exportHelper.default(ArrowStroke_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-19325188"]]);
+const ArrowStroke = /* @__PURE__ */ _pluginVue_exportHelper.default(ArrowStroke_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-e586d337"]]);
 exports.default = ArrowStroke;

package/lib/components/common/ArrowStroke.vue2.js

@@ -14,7 +14,9 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emits = __emit;
-    const arrowStrokeClass = Vue.computed(() => `arrow-stroke-container-${props.strokePosition}`);
+    const arrowStrokeClass = Vue.computed(
+      () => `arrow-stroke-container-${props.strokePosition}`
+    );
     function handleClickArrow() {
       emits("click-arrow");
     }

package/lib/components/common/AudioIcon.vue.d.ts

@@ -5,7 +5,7 @@ interface Props {
     size?: string;
     isDisabled?: boolean;
 }
-declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>;
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {

package/lib/components/common/AudioIcon.vue.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const AudioIcon_vue_vue_type_script_setup_true_lang = require("./AudioIcon.vue2.js");
-require("./AudioIcon.vue3.js");
+;/* empty css                */
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.js");
-const AudioIcon = /* @__PURE__ */ _pluginVue_exportHelper.default(AudioIcon_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-09a04b4a"]]);
+const AudioIcon = /* @__PURE__ */ _pluginVue_exportHelper.default(AudioIcon_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-6e9fcb9f"]]);
 exports.default = AudioIcon;

package/lib/components/common/AudioMediaControl.vue.d.ts

@@ -8,9 +8,9 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
     hasMore: boolean;
     isDisabled: boolean;
     audioVolume: number;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     click: (...args: any[]) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
     hasMore: boolean;
     isDisabled: boolean;
     audioVolume: number;

package/lib/components/common/AudioMediaControl.vue.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const AudioMediaControl_vue_vue_type_script_setup_true_lang = require("./AudioMediaControl.vue2.js");
-require("./AudioMediaControl.vue3.js");
+;/* empty css                        */
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.js");
-const AudioMediaControl = /* @__PURE__ */ _pluginVue_exportHelper.default(AudioMediaControl_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-cf4e2f9b"]]);
+const AudioMediaControl = /* @__PURE__ */ _pluginVue_exportHelper.default(AudioMediaControl_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-b2cd3aa5"]]);
 exports.default = AudioMediaControl;

package/lib/components/common/AudioSettingTab.vue.d.ts

@@ -5,7 +5,7 @@ interface Props {
     audioVolume?: number;
     theme?: string;
 }
-declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>;
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {

package/lib/components/common/AudioSettingTab.vue.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const AudioSettingTab_vue_vue_type_script_setup_true_lang = require("./AudioSettingTab.vue2.js");
-require("./AudioSettingTab.vue3.js");
+;/* empty css                      */
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.js");
-const AudioSettingTab = /* @__PURE__ */ _pluginVue_exportHelper.default(AudioSettingTab_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-31046864"]]);
+const AudioSettingTab = /* @__PURE__ */ _pluginVue_exportHelper.default(AudioSettingTab_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-4cbcecda"]]);
 exports.default = AudioSettingTab;

package/lib/components/common/AudioSettingTab.vue2.js

@@ -41,19 +41,24 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
     const { speakerList, userVolumeObj, currentSpeakerId } = pinia.storeToRefs(roomStore);
     const roomEngine = useRoomEngine.default();
     const trtcCloud = (_a = roomEngine.instance) == null ? void 0 : _a.getTRTCCloud();
-    const themeClass = Vue.computed(() => props.theme ? `tui-theme-${props.theme}` : "");
+    const themeClass = Vue.computed(
+      () => props.theme ? `tui-theme-${props.theme}` : ""
+    );
     const volumeTotalNum = Vue.computed(() => isDetailMode.value ? 36 : 28);
     const volumeNum = Vue.computed(() => {
       const volume = props.audioVolume || userVolumeObj.value[userId.value] || 0;
       return volume * volumeTotalNum.value / 100;
     });
-    const showVolume = Vue.computed(() => isSampleMode.value || isDetailMode.value && isTestingMicrophone.value);
+    const showVolume = Vue.computed(
+      () => isSampleMode.value || isDetailMode.value && isTestingMicrophone.value
+    );
     const isTestingMicrophone = Vue.ref(false);
     function handleMicrophoneTest() {
       isTestingMicrophone.value = !isTestingMicrophone.value;
     }
     const isTestingSpeaker = Vue.ref(false);
     const audioPlayer = document == null ? void 0 : document.createElement("audio");
+    audioPlayer.loop = true;
     const { t } = index.useI18n();
     async function handleSpeakerTest() {
       const SPEAKER_TEST_URL = "https://web.sdk.qcloud.com/trtc/electron/download/resources/media/TestSpeaker.mp3";
@@ -116,7 +121,10 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
             (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(new Array(volumeTotalNum.value).fill(""), (item, index2) => {
               return Vue.openBlock(), Vue.createElementBlock("div", {
                 key: index2,
-                class: Vue.normalizeClass(["mic-bar", `${showVolume.value && volumeNum.value > index2 ? "active" : ""}`])
+                class: Vue.normalizeClass([
+                  "mic-bar",
+                  `${showVolume.value && volumeNum.value > index2 ? "active" : ""}`
+                ])
               }, null, 2);
             }), 128))
           ])

package/lib/components/common/Avatar.vue.d.ts

@@ -1,7 +1,7 @@
 interface Props {
     imgSrc?: string | undefined;
 }
-declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>;
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {

package/lib/components/common/Avatar.vue.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const Avatar_vue_vue_type_script_setup_true_lang = require("./Avatar.vue2.js");
-require("./Avatar.vue3.js");
+;/* empty css             */
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.js");
-const TuiAvatar = /* @__PURE__ */ _pluginVue_exportHelper.default(Avatar_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-94a403fe"]]);
-exports.default = TuiAvatar;
+const Avatar = /* @__PURE__ */ _pluginVue_exportHelper.default(Avatar_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-460d4fdf"]]);
+exports.default = Avatar;

package/lib/components/common/DeviceSelect.vue.d.ts

@@ -3,7 +3,7 @@ interface Props {
     onChange?: (id: string) => void;
     disabled?: boolean;
 }
-declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>;
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {

package/lib/components/common/DeviceSelect.vue.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const DeviceSelect_vue_vue_type_script_setup_true_lang = require("./DeviceSelect.vue2.js");
-require("./DeviceSelect.vue3.js");
+;/* empty css                   */
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.js");
-const DeviceSelect = /* @__PURE__ */ _pluginVue_exportHelper.default(DeviceSelect_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-0cca651b"]]);
+const DeviceSelect = /* @__PURE__ */ _pluginVue_exportHelper.default(DeviceSelect_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-86b2cd04"]]);
 exports.default = DeviceSelect;

package/lib/components/common/DeviceSelect.vue2.js

@@ -3,8 +3,8 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const Vue = require("vue");
 const room = require("../../stores/room.js");
 const pinia = require("pinia");
-const Select = require("./base/Select.vue.js");
-const Option = require("./base/Option.vue.js");
+const index = require("./base/Select/index.vue.js");
+const index$1 = require("./base/Option/index.vue.js");
 const TUIRoomEngine = require("@tencentcloud/tuiroom-engine-electron");
 const useDeviceManager = require("../../hooks/useDeviceManager.js");
 const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
@@ -41,25 +41,37 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
       return "";
     }
     if (deviceType === "camera") {
-      Vue.watch(currentCameraId, (val) => {
-        if (currentDeviceId.value !== val) {
-          currentDeviceId.value = val;
-        }
-      }, { immediate: true });
+      Vue.watch(
+        currentCameraId,
+        (val) => {
+          if (currentDeviceId.value !== val) {
+            currentDeviceId.value = val;
+          }
+        },
+        { immediate: true }
+      );
     }
     if (deviceType === "microphone") {
-      Vue.watch(currentMicrophoneId, (val) => {
-        if (currentDeviceId.value !== val) {
-          currentDeviceId.value = val;
-        }
-      }, { immediate: true });
+      Vue.watch(
+        currentMicrophoneId,
+        (val) => {
+          if (currentDeviceId.value !== val) {
+            currentDeviceId.value = val;
+          }
+        },
+        { immediate: true }
+      );
     }
     if (deviceType === "speaker") {
-      Vue.watch(currentSpeakerId, (val) => {
-        if (currentDeviceId.value !== val) {
-          currentDeviceId.value = val;
-        }
-      }, { immediate: true });
+      Vue.watch(
+        currentSpeakerId,
+        (val) => {
+          if (currentDeviceId.value !== val) {
+            currentDeviceId.value = val;
+          }
+        },
+        { immediate: true }
+      );
     }
     function getDeviceList() {
       if (deviceType === "camera") {
@@ -119,7 +131,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
       }
     }
     return (_ctx, _cache) => {
-      return Vue.openBlock(), Vue.createBlock(Select.default, {
+      return Vue.openBlock(), Vue.createBlock(index.default, {
         modelValue: currentDeviceId.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => currentDeviceId.value = $event),
         placeholder: "placeholder",
@@ -131,7 +143,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
       }, {
         default: Vue.withCtx(() => [
           (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(deviceList.value, (item) => {
-            return Vue.openBlock(), Vue.createBlock(Option.default, {
+            return Vue.openBlock(), Vue.createBlock(index$1.default, {
               key: item.deviceId,
               label: item.deviceName,
               value: item.deviceId

package/lib/components/common/Language.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/lib/components/common/Language.vue.js

@@ -15,21 +15,14 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
   __name: "Language",
   setup(__props) {
     const basicStore = basic.useBasicStore();
-    const title = Vue.computed(() => basicStore.lang === "en-US" ? "English" : "中文");
+    const title = Vue.computed(
+      () => basicStore.lang === "en-US" ? "English" : "中文"
+    );
     const languageConfig = roomService.roomService.getComponentConfig("Language");
     const handleChange = () => {
-      switch (index.default.global.locale.value) {
-        case "en-US":
-          index.default.global.locale.value = "zh-CN";
-          basicStore.setLang("zh-CN");
-          localStorage.setItem("tuiRoom-language", "zh-CN");
-          break;
-        case "zh-CN":
-          index.default.global.locale.value = "en-US";
-          basicStore.setLang("en-US");
-          localStorage.setItem("tuiRoom-language", "en-US");
-          break;
-      }
+      roomService.roomService.setLanguage(
+        index.default.global.locale.value === "en-US" ? "zh-CN" : "en-US"
+      );
     };
     return (_ctx, _cache) => {
       return Vue.unref(languageConfig).visible ? (Vue.openBlock(), Vue.createBlock(IconButton.default, {