tuikit-atomicx-vue3 3.3.1 → 3.3.2

package/dist/components/LiveCoreView/index.js

@@ -1,11 +1,14 @@
 import { addI18n } from "../../i18n/index.js";
 import DefaultStreamViewUI from "./DefaultStreamViewUI.js";
-import { defineComponent, useSlots, computed, ref, onMounted, onBeforeUnmount, watch, createElementBlock, openBlock, normalizeClass, createCommentVNode, createElementVNode, toDisplayString, unref, normalizeStyle, renderSlot, Fragment, renderList, createBlock, mergeProps, normalizeProps } from "vue";
+import { defineComponent, useSlots, computed, ref, onMounted, onBeforeUnmount, watch, createElementBlock, openBlock, normalizeClass, createCommentVNode, createElementVNode, createBlock, toDisplayString, unref, normalizeStyle, renderSlot, Fragment, renderList, mergeProps, normalizeProps, Teleport } from "vue";
 import { useUIKit } from "@tencentcloud/uikit-base-component-vue3";
 import { useLiveSeatState } from "../../states/LiveSeatState/index.js";
 import { useLiveState } from "../../states/LiveState/index.js";
 import { useLoginState } from "../../states/LoginState.js";
 import { getContentSize } from "../../utils/domOperation.js";
+import PlayerControl from "./PlayerControl/PlayerControl.js";
+import { usePlayerControlState } from "./PlayerControl/PlayerControlState.js";
+import { isMobile } from "../../utils/env.js";
 import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
 import { resource } from "./i18n/en-US/index.js";
 import { resource as resource$1 } from "./i18n/zh-CN/index.js";
@@ -21,6 +24,7 @@ const _hoisted_3 = {
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "index",
   setup(__props) {
+    const { isFullscreen, isLandscapeStyleMode } = usePlayerControlState();
     const { t } = useUIKit();
     const { seatList, canvas, startPlayStream, stopPlayStream } = useLiveSeatState();
     const { currentLive } = useLiveState();
@@ -35,6 +39,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return true;
     });
+    const isShowPlayerControl = computed(() => {
+      var _a;
+      return ((_a = currentLive.value) == null ? void 0 : _a.liveId) && !seatList.value.some((item) => {
+        var _a2, _b;
+        return ((_a2 = item.userInfo) == null ? void 0 : _a2.userId) === ((_b = loginUserInfo.value) == null ? void 0 : _b.userId);
+      });
+    });
     onMounted(async () => {
       isMounted.value = true;
       await startPlayStream({ view: "atomicx-live-stream-content" });
@@ -228,7 +239,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         fillMode.value = "fit";
       }
       handleStreamRegionSize();
-    });
+    }, { deep: true });
     function handleStreamRegionSize() {
       if (!liveCoreViewContainerRef.value) {
         return;
@@ -297,6 +308,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         ref_key: "liveCoreViewContainerRef",
         ref: liveCoreViewContainerRef,
+        id: "live-core-view-container",
         class: normalizeClass(["live-core-view-container", { "align-center": isAlignCenter.value }])
       }, [
         !_ctx.$slots.localVideo && !isPlayedVideo.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
@@ -326,12 +338,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }), 128))
           ])) : createCommentVNode("", true),
           _ctx.$slots.localVideo && isMounted.value ? renderSlot(_ctx.$slots, "localVideo", normalizeProps(mergeProps({ key: 1 }, { style: (_a = localStreamViewInfo.value) == null ? void 0 : _a.region })), void 0, true) : createCommentVNode("", true)
-        ], 4)
+        ], 4),
+        !unref(isFullscreen) ? (openBlock(), createBlock(Teleport, {
+          key: 1,
+          to: "body",
+          disabled: !unref(isMobile)
+        }, [
+          isShowPlayerControl.value ? (openBlock(), createBlock(PlayerControl, {
+            key: 0,
+            isLandscapeStyleMode: unref(isLandscapeStyleMode)
+          }, null, 8, ["isLandscapeStyleMode"])) : createCommentVNode("", true)
+        ], 8, ["disabled"])) : createCommentVNode("", true),
+        isShowPlayerControl.value && unref(isFullscreen) ? (openBlock(), createBlock(PlayerControl, {
+          key: 2,
+          isLandscapeStyleMode: unref(isLandscapeStyleMode)
+        }, null, 8, ["isLandscapeStyleMode"])) : createCommentVNode("", true)
       ], 2);
     };
   }
 });
-const LiveCoreViewComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-466946d8"]]);
+const LiveCoreViewComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4d9101b9"]]);
 addI18n("en-US", { translation: resource });
 addI18n("zh-CN", { translation: resource$1 });
 export {

package/dist/components/StreamView/Layout/CustomLayout.js

@@ -232,8 +232,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               streamViewUI: withCtx((slotProps) => [
                 renderSlot(_ctx.$slots, "streamViewUI", mergeProps({ ref_for: true }, slotProps), void 0, true)
               ]),
-              _: 2
-            }, 1032, ["userInfo", "stream-type", "style"]);
+              _: 3
+            }, 8, ["userInfo", "stream-type", "style"]);
           }), 128))
         ], 4)
       ], 512);

package/dist/components/StreamView/Layout/GridLayout.js

@@ -221,8 +221,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               streamViewUI: withCtx((slotProps) => [
                 renderSlot(_ctx.$slots, "streamViewUI", mergeProps({ ref_for: true }, slotProps), void 0, true)
               ]),
-              _: 2
-            }, 1032, ["userInfo", "stream-type", "style"]);
+              _: 3
+            }, 8, ["userInfo", "stream-type", "style"]);
           }), 128))
         ], 36)
       ], 2);

package/dist/components/StreamView/common/StreamList/index.js

@@ -195,8 +195,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               streamViewUI: withCtx((slotProps) => [
                 renderSlot(_ctx.$slots, "streamViewUI", mergeProps({ ref_for: true }, slotProps), void 0, true)
               ]),
-              _: 2
-            }, 1032, ["user-info", "stream-type", "streamInfo", "style", "streamPlayMode", "streamPlayQuality"]);
+              _: 3
+            }, 8, ["user-info", "stream-type", "streamInfo", "style", "streamPlayMode", "streamPlayQuality"]);
           }), 128))
         ], 36)
       ], 2);

package/dist/styles/index.css

@@ -865,12 +865,12 @@ span.unique-icon-btn:active {
   color: #666;
   font-size: 12px;
   border-top: 1px solid #f0f0f0;
-}.group-actions[data-v-21a17b84] {
+}.group-actions[data-v-a8fcc66e] {
   display: flex;
   flex-direction: column;
   gap: 10px;
 }
-.group-actions__button[data-v-21a17b84] {
+.group-actions__button[data-v-a8fcc66e] {
   width: 100%;
 }.group-info__item[data-v-5b84a613] {
   padding: 10px 0;
@@ -1095,42 +1095,42 @@ span.unique-icon-btn:active {
 100% {
     opacity: 1;
 }
-}.group-management[data-v-91345f9d] {
+}.group-management[data-v-a5ebaab5] {
   padding: 0 20px;
 }
-.group-management__header[data-v-91345f9d] {
+.group-management__header[data-v-a5ebaab5] {
   padding: 16px 0;
   border-bottom: 1px solid var(--border-color-light);
 }
-.group-management__back-btn[data-v-91345f9d] {
+.group-management__back-btn[data-v-a5ebaab5] {
   width: 28px;
   height: 28px;
   padding: 6px;
   cursor: pointer;
   color: var(--text-color-primary);
 }
-.group-management__back-btn[data-v-91345f9d]:hover {
+.group-management__back-btn[data-v-a5ebaab5]:hover {
   color: var(--text-color-secondary);
 }
-.group-management__title[data-v-91345f9d] {
+.group-management__title[data-v-a5ebaab5] {
   font-size: 18px;
   font-weight: 600;
   color: var(--text-color-primary);
 }
-.group-management__mute-all[data-v-91345f9d] {
+.group-management__mute-all[data-v-a5ebaab5] {
   color: var(--text-color-primary);
 }
-.group-management__mute-all-header[data-v-91345f9d] {
+.group-management__mute-all-header[data-v-a5ebaab5] {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 8px;
 }
-.group-management__mute-all-title[data-v-91345f9d] {
+.group-management__mute-all-title[data-v-a5ebaab5] {
   font-size: 16px;
   font-weight: 500;
 }
-.group-management__mute-all-desc[data-v-91345f9d] {
+.group-management__mute-all-desc[data-v-a5ebaab5] {
   font-size: 14px;
   color: var(--text-color-secondary);
 }.group-management-entry[data-v-55b0dd4c] {
@@ -1161,7 +1161,7 @@ span.unique-icon-btn:active {
   display: flex;
   flex-direction: column;
   gap: 0;
-}.group-chat-setting[data-v-358c1266] {
+}.group-chat-setting[data-v-7374cfa4] {
   gap: 16px;
   padding: 16px;
 }.user-picker-dialog {
@@ -5531,7 +5531,7 @@ to {
   *   @include multi-line-ellipsis(3);
   * }
   */
-.contact-group-info[data-v-ce333195] {
+.contact-group-info[data-v-8f45a224] {
   height: 100%;
   width: 100%;
   overflow: hidden;
@@ -5540,21 +5540,21 @@ to {
   background-color: var(--bg-color-topbar);
   padding: 48px;
 }
-.contact-group-info__header[data-v-ce333195] {
+.contact-group-info__header[data-v-8f45a224] {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   gap: 20px;
   margin-bottom: 32px;
 }
-.contact-group-info__main-info[data-v-ce333195] {
+.contact-group-info__main-info[data-v-8f45a224] {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 20px;
   width: 0;
 }
-.contact-group-info__name[data-v-ce333195] {
+.contact-group-info__name[data-v-8f45a224] {
   font-size: 24px;
   font-weight: 400;
   color: var(--text-color-primary);
@@ -5564,8 +5564,8 @@ to {
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.contact-group-info__id[data-v-ce333195],
-.contact-group-info__intro[data-v-ce333195] {
+.contact-group-info__id[data-v-8f45a224],
+.contact-group-info__intro[data-v-8f45a224] {
   font-size: 16px;
   color: var(--text-color-tertiary);
   width: 100%;
@@ -5576,7 +5576,7 @@ to {
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
 }
-.contact-group-info__actions[data-v-ce333195] {
+.contact-group-info__actions[data-v-8f45a224] {
   border-top: 1px solid var(--stroke-color-secondary);
   padding-top: 32px;
   display: flex;
@@ -5972,21 +5972,21 @@ to {
 ._conversationCreateUserSelectList--h5_pa6me_7 {
   height: 100%;
   padding: 0 20px;
-}.conversationCreate__container[data-v-87d3c1d2] {
+}.conversationCreate__container[data-v-bdcdab3b] {
   display: flex;
   flex-direction: column;
   justify-content: center;
 }
-.conversationCreate__detail[data-v-87d3c1d2] {
+.conversationCreate__detail[data-v-bdcdab3b] {
   flex: 1;
 }
-[data-v-87d3c1d2] .conversationCreate__dialog {
+[data-v-bdcdab3b] .conversationCreate__dialog {
   width: 100%;
   height: 100%;
   max-width: 100%;
   border-radius: 0;
 }
-[data-v-87d3c1d2] .conversationCreate__dialog .dialog-body {
+[data-v-bdcdab3b] .conversationCreate__dialog .dialog-body {
   height: 0;
 }/**
   * Multi-line ellipsis
@@ -9877,17 +9877,320 @@ to {
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
-}.live-core-view-container[data-v-466946d8] {
+}.audio-control[data-v-22bb0b88] {
+  --volume-control-primary: rgb(255, 255, 255);
+  --volume-control-primary-hover: rgba(255, 255, 255, 0.1);
+  --volume-control-background: rgba(0, 0, 0, 0.8);
+  --volume-control-background-light: rgba(0, 0, 0, 0.5);
+  --volume-control-border: rgba(255, 255, 255, 0.1);
+  --volume-control-shadow: rgba(0, 0, 0, 0.2);
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.volume-btn[data-v-22bb0b88] {
+  width: 100%;
+  height: 100%;
+  flex-shrink: 0;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+.volume-slider-container[data-v-22bb0b88] {
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-bottom: 12px;
+  z-index: 100;
+}
+.volume-slider-wrapper[data-v-22bb0b88] {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  background: var(--volume-control-background);
+  padding: 12px 8px;
+  border-radius: 8px;
+  backdrop-filter: blur(10px);
+  border: 1px solid var(--volume-control-border);
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+@media (hover: none) and (pointer: coarse) {
+.volume-slider-wrapper[data-v-22bb0b88] {
+    cursor: grab;
+}
+.volume-slider-wrapper[data-v-22bb0b88]:active {
+    cursor: grabbing;
+}
+}
+.volume-slider-wrapper-inner[data-v-22bb0b88] {
+  position: relative;
+  width: 20px;
+  height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 12px;
+}
+.custom-volume-slider[data-v-22bb0b88] {
+  position: relative;
+  width: 4px;
+  height: 80px;
+  cursor: pointer;
+  z-index: 2;
+  margin: 0;
+}
+.slider-track[data-v-22bb0b88] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 2px;
+  background: rgba(255, 255, 255, 0.2);
+  border: none;
+}
+.slider-progress[data-v-22bb0b88] {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background: #ffffff;
+  border-radius: 2px;
+}
+.slider-thumb[data-v-22bb0b88] {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 12px;
+  height: 12px;
+  background: #ffffff;
+  border-radius: 50%;
+  border: 2px solid rgba(255, 255, 255, 0.8);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  transition: transform 0.1s ease;
+  z-index: 3;
+  cursor: grab;
+}
+.slider-thumb.no-transition[data-v-22bb0b88] {
+  transition: none;
+}
+.slider-thumb[data-v-22bb0b88]:active {
+  cursor: grabbing;
+  transform: translateX(-50%) scale(1.1);
+}
+.slider-thumb[data-v-22bb0b88]:hover {
+  transform: translateX(-50%) scale(1.1);
+}
+.volume-value[data-v-22bb0b88] {
+  color: var(--volume-control-primary);
+  font-size: 12px;
+  font-weight: 500;
+  text-align: center;
+  min-width: 32px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  pointer-events: none;
+}
+@media (hover: none) and (pointer: coarse) {
+.volume-slider-wrapper[data-v-22bb0b88] {
+    padding: 16px 12px;
+}
+.volume-slider-wrapper[data-v-22bb0b88]:active {
+    background: var(--volume-control-background-light);
+    transform: scale(0.98);
+    transition: all 0.1s ease;
+}
+.volume-slider-wrapper-inner[data-v-22bb0b88] {
+    height: 100px;
+}
+}.playback-controls[data-v-28ed6eb9] {
+  background: #000000;
+  padding: 12px 0;
+  display: flex;
+  width: calc(100% + 1px);
+  align-items: center;
+  box-sizing: border-box;
+}
+.pc-mode[data-v-28ed6eb9] {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
+}
+.mobile-mode[data-v-28ed6eb9] {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 999999;
+  pointer-events: auto;
+}
+@media screen and (orientation: portrait) {
+.mobile-landscape-mode[data-v-28ed6eb9] {
+    position: fixed;
+    bottom: unset;
+    transform: rotate(90deg);
+    transform-origin: left bottom;
+    top: -60px;
+    bottom: unset;
+    width: 100vh;
+    padding-right: 16px;
+}
+.mobile-landscape-mode.player-control-enter-active[data-v-28ed6eb9], .mobile-landscape-mode.player-control-leave-active[data-v-28ed6eb9] {
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    will-change: transform, opacity;
+}
+.mobile-landscape-mode.player-control-enter-from[data-v-28ed6eb9] {
+    opacity: 0;
+    transform: rotate(90deg) translateY(60px);
+}
+.mobile-landscape-mode.player-control-enter-to[data-v-28ed6eb9] {
+    opacity: 1;
+    transform: rotate(90deg) translateY(0);
+}
+.mobile-landscape-mode.player-control-leave-from[data-v-28ed6eb9] {
+    opacity: 1;
+    transform: rotate(90deg) translateY(0);
+}
+.mobile-landscape-mode.player-control-leave-to[data-v-28ed6eb9] {
+    opacity: 0;
+    transform: rotate(90deg) translateY(60px);
+}
+}
+.control-buttons[data-v-28ed6eb9] {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  width: 100%;
+  pointer-events: all;
+}
+.center-controls[data-v-28ed6eb9] {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+.control-btn[data-v-28ed6eb9] {
+  background: transparent;
+  border: none;
+  border-radius: 50%;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: white;
+}
+.control-btn[data-v-28ed6eb9]:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+.control-btn[data-v-28ed6eb9]:active {
+  transform: scale(0.95);
+}
+.control-btn .btn-icon[data-v-28ed6eb9] {
+  width: 20px;
+  height: 20px;
+  fill: currentColor;
+}
+.play-pause-btn .tui-icon[data-v-28ed6eb9] {
+  transform: scale(1.5);
+}
+.audio-control-btn[data-v-28ed6eb9]:active {
+  transform: unset;
+}
+.playback-time[data-v-28ed6eb9] {
+  color: white;
+  font-size: 14px;
+  font-weight: 500;
+  margin-left: 16px;
+}
+.right-controls[data-v-28ed6eb9] {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+.fullscreen-btn .btn-icon[data-v-28ed6eb9] {
+  width: 18px;
+  height: 18px;
+}
+.more-btn .btn-icon[data-v-28ed6eb9] {
+  width: 18px;
+  height: 18px;
+}
+.player-control-enter-active[data-v-28ed6eb9],
+.player-control-leave-active[data-v-28ed6eb9] {
+  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: transform, opacity;
+}
+.player-control-enter-from[data-v-28ed6eb9] {
+  opacity: 0;
+  transform: translateY(100%);
+}
+.player-control-enter-to[data-v-28ed6eb9] {
+  opacity: 1;
+  transform: translateY(0);
+}
+.player-control-leave-from[data-v-28ed6eb9] {
+  opacity: 1;
+  transform: translateY(0);
+}
+.player-control-leave-to[data-v-28ed6eb9] {
+  opacity: 0;
+  transform: translateY(100%);
+}.fullscreen-mode {
+  width: 100vw !important;
+  height: 100vh !important;
+  z-index: 9999 !important;
+  background-color: #000 !important;
+}
+.fullscreen-mode-portrait {
+  z-index: 9999 !important;
+  background-color: #000 !important;
+}
+.landscape-mode {
+  transform: rotate(90deg) !important;
+  transform-origin: center center !important;
+  width: 100vh !important;
+  height: 100vw !important;
+  overflow: hidden !important;
+  transition: transform 0.3s ease-in-out !important;
+}
+@media screen and (orientation: landscape) {
+.landscape-mode {
+    transform: none !important;
+    width: 100vw !important;
+    height: 100vh !important;
+}
+}
+@media screen and (orientation: landscape) and (max-width: 768px) {
+.live-core-view.landscape-mode {
+    background-color: #000;
+    transform: none !important;
+}
+}
+@media screen and (orientation: portrait) and (max-width: 768px) {
+.live-core-view.landscape-mode {
+    transform: rotate(90deg) !important;
+    transform-origin: center center !important;
+}
+}.live-core-view-container[data-v-4d9101b9] {
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   overflow: hidden;
 }
-.live-core-view-container.align-center[data-v-466946d8] {
+.live-core-view-container.align-center[data-v-4d9101b9] {
   align-items: center;
 }
-.live-core-view-container .live-core-placeholder[data-v-466946d8] {
+.live-core-view-container .live-core-placeholder[data-v-4d9101b9] {
   position: absolute;
   top: 0;
   left: 0;
@@ -9897,26 +10200,26 @@ to {
   align-items: center;
   justify-content: center;
 }
-.live-core-view-container .live-core-placeholder .placeholder-text[data-v-466946d8] {
+.live-core-view-container .live-core-placeholder .placeholder-text[data-v-4d9101b9] {
   color: var(--text-color-secondary, rgba(255, 255, 255, 0.55));
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
   line-height: 22px;
 }
-.live-core-view-container .live-core-view[data-v-466946d8] {
+.live-core-view-container .live-core-view[data-v-4d9101b9] {
   width: 100%;
   height: 100%;
   position: absolute;
 }
-.live-core-view-container .live-core-view .stream-content[data-v-466946d8] {
+.live-core-view-container .live-core-view .stream-content[data-v-4d9101b9] {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
 }
-.live-core-view-container .live-core-view .live-core-ui[data-v-466946d8] {
+.live-core-view-container .live-core-view .live-core-ui[data-v-4d9101b9] {
   width: 100%;
   height: 100%;
   position: absolute;
@@ -10164,7 +10467,6 @@ to {
   width: 100%;
   overflow: auto;
   align-items: center;
-  scrollbar-width: none;
 }
 .live-list[data-v-96626ee9]::-webkit-scrollbar {
   width: 0px;
@@ -10182,6 +10484,9 @@ to {
 .live-list[data-v-96626ee9]::-webkit-scrollbar-thumb:hover {
   background: var(--uikit-color-gray-3);
 }
+.live-list[data-v-96626ee9] {
+  scrollbar-width: none;
+}
 .live-list-items[data-v-96626ee9] {
   flex: 1;
   width: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tuikit-atomicx-vue3",
-  "version": "3.3.1",
+  "version": "3.3.2",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -48,10 +48,10 @@
     "publish:github": "node scripts/publish-github.js"
   },
   "peerDependencies": {
-    "@tencentcloud/chat": "^3.5.4",
+    "@tencentcloud/chat": "^3.5.8",
     "@tencentcloud/chat-uikit-engine": "~2.5.1",
     "@tencentcloud/tui-core": "latest",
-    "@tencentcloud/tuiroom-engine-js": "~3.3.1",
+    "@tencentcloud/tuiroom-engine-js": "~3.3.2",
     "@tencentcloud/uikit-base-component-vue3": "1.0.1",
     "vue": "^3.4.21"
   },

package/src/components/ChatSetting/GroupChatSetting/GroupActions/GroupActions.vue

@@ -39,7 +39,6 @@
 
     <!-- Transfer Group Owner Dialog -->
     <TUIDialog
-      appendTo="body"
       :visible="isShowTransferDialog"
       :title="t('ChatSetting.transfer_group_owner')"
       :custom-classes="['user-picker-dialog']"
@@ -63,7 +62,6 @@
 
     <!-- Dismiss Group Dialog -->
     <TUIDialog
-      appendTo="body"
       :visible="isShowDismissDialog"
       :title="t('ChatSetting.dismiss_group')"
       @close="() => isShowDismissDialog = false"
@@ -73,7 +71,6 @@
 
     <!-- Quit Group Dialog -->
     <TUIDialog
-      appendTo="body"
       :visible="isShowQuitDialog"
       :title="t('ChatSetting.quit_group')"
       @close="() => isShowQuitDialog = false"

package/src/components/ChatSetting/GroupChatSetting/GroupChatSetting.vue

@@ -260,7 +260,6 @@ const userPickerDialogTitle = computed(() => {
       <PersonalSettings />
       <GroupActions />
       <TUIDialog
-        appendTo="body"
         :visible="isShowUserPickerDialog"
         :title="userPickerDialogTitle"
         :custom-classes="['user-picker-dialog']"