@ndscnj/roomkit-web-vue3 25.12.24162 → 25.12.24164

package/es/components/RoomFooter/VoteControl/MoreControlH5.vue.d.ts

@@ -1,2 +1,6 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "show-overlay": (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{
+    "onShow-overlay"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

package/es/components/RoomFooter/VoteControl/MoreControlH5.vue.mjs

@@ -1,7 +1,7 @@
 import _sfc_main from "./MoreControlH5.vue2.mjs";
 /* empty css                    */
 import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.mjs";
-const MoreControlH5 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-70cfb5f8"]]);
+const MoreControlH5 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c413959d"]]);
 export {
   MoreControlH5 as default
 };

package/es/components/RoomFooter/VoteControl/MoreControlH5.vue2.mjs

@@ -1,72 +1,102 @@
-import { defineComponent, createElementBlock, createCommentVNode, unref, openBlock, createVNode, createElementVNode, withCtx } from "vue";
-import _imports_0 from "../../../assets/imgs/vote-icon.png.mjs";
+import { defineComponent, ref, onMounted, onUnmounted, createElementBlock, openBlock, createCommentVNode, unref, withDirectives, createBlock, withCtx, createVNode, createElementVNode, createTextVNode, toDisplayString } from "vue";
+import { IconExtension } from "@tencentcloud/uikit-base-component-vue3";
 import IconButton from "../../common/base/IconButton.vue.mjs";
-import { IconChat } from "@tencentcloud/uikit-base-component-vue3";
-import { useBasicStore } from "../../../stores/basic.mjs";
-import { useChatStore } from "../../../stores/chat.mjs";
-import { storeToRefs } from "pinia";
-import { useI18n } from "../../../locales/index.mjs";
-import TuiBadge from "../../common/base/Badge.vue.mjs";
+import useControl from "./useMoreControlHooks.mjs";
+import _sfc_main$1 from "../ChatControl.vue.mjs";
+import InviteControl from "../InviteControl.vue.mjs";
+import ContactControl from "../ContactControl.vue.mjs";
+import { useRoomStore } from "../../../stores/room.mjs";
+import bus from "../../../hooks/useMitt.mjs";
+import vTap from "../../../directives/vTap.mjs";
 import "../../../services/main.mjs";
 import { roomService } from "../../../services/roomService.mjs";
+import "../../../locales/index.mjs";
 import "@tencentcloud/tuiroom-engine-js";
 import "../../../utils/environment.mjs";
 import "mitt";
 import "../../../services/manager/roomActionManager.mjs";
 import "@tencentcloud/tui-core";
-import { MetricsKey } from "../../../services/manager/dataReportManager.mjs";
 const _hoisted_1 = {
   key: 0,
-  class: "vote-control-container"
+  class: "more-control-container"
 };
+const _hoisted_2 = { class: "control-compent" };
+const _hoisted_3 = { class: "close" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "MoreControlH5",
-  setup(__props) {
-    const { t } = useI18n();
-    const chatControlConfig = roomService.getComponentConfig("MoreControl");
-    const basicStore = useBasicStore();
-    const chatStore = useChatStore();
-    const { sidebarName } = storeToRefs(basicStore);
-    async function toggleChatSidebar() {
-      if (basicStore.isSidebarOpen && basicStore.sidebarName === "vote") {
-        basicStore.setSidebarOpenStatus(false);
-        basicStore.setSidebarName("");
-        return;
+  emits: ["show-overlay"],
+  setup(__props, { emit: __emit }) {
+    const moreControlConfig = roomService.getComponentConfig("MoreControl");
+    const showMoreContent = ref(false);
+    const moreContentRef = ref();
+    const { t, sidebarName } = useControl();
+    const roomStore = useRoomStore();
+    const emit = __emit;
+    function showMore() {
+      showMoreContent.value = true;
+    }
+    function handleCancelControl() {
+      showMoreContent.value = false;
+    }
+    function handleControlClick(name) {
+      bus.emit("experience-communication", name);
+    }
+    function handleShowOverlay(data) {
+      showMoreContent.value = false;
+      emit("show-overlay", data);
+    }
+    function handleDocumentClick(event) {
+      if (showMoreContent.value && !moreContentRef.value.contains(event.target)) {
+        showMoreContent.value = false;
       }
-      basicStore.setSidebarOpenStatus(true);
-      basicStore.setSidebarName("vote");
-      chatStore.updateUnReadCount(0);
-      roomService.dataReportManager.reportCount(MetricsKey.openChat);
-      roomService.trackingManager.sendMessage("experience-vote");
     }
+    onMounted(() => {
+      document == null ? void 0 : document.addEventListener("click", handleDocumentClick, true);
+    });
+    onUnmounted(() => {
+      document == null ? void 0 : document.removeEventListener("click", handleDocumentClick, true);
+    });
     return (_ctx, _cache) => {
-      return unref(chatControlConfig).visible ? (openBlock(), createElementBlock("div", _hoisted_1, [
-        createVNode(TuiBadge, {
-          hidden: unref(chatStore).unReadCount === 0,
-          value: unref(chatStore).unReadCount,
-          max: 10
-        }, {
-          default: withCtx(() => [
-            createVNode(IconButton, {
-              title: unref(t)("Vote"),
-              "is-active": unref(sidebarName) === "vote",
-              onClickIcon: toggleChatSidebar
-            }, {
-              default: withCtx(() => [
-                createVNode(unref(IconChat), { size: "24" })
-              ]),
-              _: 1
-            }, 8, ["title", "is-active"])
+      return openBlock(), createElementBlock("div", null, [
+        unref(moreControlConfig).visible ? (openBlock(), createElementBlock("div", _hoisted_1, [
+          withDirectives((openBlock(), createBlock(IconButton, {
+            "is-active": unref(sidebarName) === "more",
+            title: unref(t)("More")
+          }, {
+            default: withCtx(() => [
+              createVNode(unref(IconExtension), { size: "24" })
+            ]),
+            _: 1
+          }, 8, ["is-active", "title"])), [
+            [unref(vTap), showMore]
+          ])
+        ])) : createCommentVNode("", true),
+        showMoreContent.value ? (openBlock(), createElementBlock("div", {
+          key: 1,
+          ref_key: "moreContentRef",
+          ref: moreContentRef,
+          class: "show-more-content"
+        }, [
+          createElementVNode("div", _hoisted_2, [
+            unref(roomStore).isSpeakAfterTakingSeatMode ? (openBlock(), createBlock(_sfc_main$1, {
+              key: 0,
+              onClick: _cache[0] || (_cache[0] = ($event) => handleControlClick("chatControl"))
+            })) : createCommentVNode("", true),
+            createVNode(ContactControl, {
+              onClick: _cache[1] || (_cache[1] = ($event) => handleControlClick("contactControl"))
+            }),
+            createVNode(InviteControl, {
+              onShowOverlay: handleShowOverlay,
+              onClick: _cache[2] || (_cache[2] = ($event) => handleControlClick("inviteControl"))
+            })
           ]),
-          _: 1
-        }, 8, ["hidden", "value"]),
-        _cache[0] || (_cache[0] = createElementVNode("img", {
-          class: "ndsc-img-box",
-          src: _imports_0,
-          alt: "",
-          click: "toggleChatSidebar"
-        }, null, -1))
-      ])) : createCommentVNode("", true);
+          withDirectives((openBlock(), createElementBlock("div", _hoisted_3, [
+            createTextVNode(toDisplayString(unref(t)("Cancel")), 1)
+          ])), [
+            [unref(vTap), handleCancelControl]
+          ])
+        ], 512)) : createCommentVNode("", true)
+      ]);
     };
   }
 });

package/es/components/RoomFooter/VoteControl/index.d.ts

@@ -1,4 +1,8 @@
-declare const MoreControl: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any> | import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+declare const MoreControl: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "show-overlay": (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{
+    "onShow-overlay"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any> | import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "on-vote": (...args: any[]) => void;
 }, string, import('vue').PublicProps, Readonly<{}> & Readonly<{
     "onOn-vote"?: ((...args: any[]) => any) | undefined;

package/es/components/RoomFooter/index/indexH5.vue.mjs

@@ -1,7 +1,7 @@
 import _sfc_main from "./indexH5.vue2.mjs";
 /* empty css              */
 import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.mjs";
-const indexH5 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-253a50f0"]]);
+const indexH5 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4905d960"]]);
 export {
   indexH5 as default
 };

package/es/conference.vue.d.ts

@@ -16,6 +16,7 @@ declare function enterRoom(options: {
 declare function resetStore(): void;
 declare function __VLS_template(): {
     content?(_: {}): any;
+    contentH5?(_: {}): any;
 };
 declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     displayMode: "permanent" | "wake-up";

package/es/conference.vue.mjs

@@ -2,7 +2,7 @@ import _sfc_main from "./conference.vue2.mjs";
 /* empty css                 */
 /* empty css                 */
 import _export_sfc from "./_virtual/_plugin-vue_export-helper.mjs";
-const ConferenceMainView = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4dd66a12"]]);
+const ConferenceMainView = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-14e58a3b"]]);
 export {
   ConferenceMainView as default
 };

package/es/conference.vue2.mjs

@@ -278,6 +278,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           content: withCtx(() => [
             renderSlot(_ctx.$slots, "content", {}, void 0, true)
           ]),
+          contentH5: withCtx(() => [
+            renderSlot(_ctx.$slots, "contentH5", {}, void 0, true)
+          ]),
           _: 3
         }, 512), [
           [vShow, unref(showRoomTool)]

package/es/index.mjs

@@ -3664,7 +3664,7 @@ to {
 .tool-box .tool-box-item[data-v-34681937]:hover {
   border-radius: 8px;
   background-color: var(--list-color-hover);
-}.footer-container[data-v-253a50f0] {
+}.footer-container[data-v-4905d960] {
   position: absolute;
   bottom: 0;
   display: flex;
@@ -3928,9 +3928,44 @@ to {
 }
 .footer .mirror-container .mirror-text[data-v-21a63691] {
   margin-left: 4px;
-}.ndsc-img-box[data-v-70cfb5f8] {
-  width: 50px;
-  height: 50px;
+}.show-more-content[data-v-c413959d] {
+  position: absolute;
+  bottom: 15px;
+  left: 5%;
+  width: 90%;
+  height: 17vh;
+  padding: 10px;
+  border-radius: 13px;
+  animation-name: popup-c413959d;
+  animation-duration: 200ms;
+  background-color: var(--bg-color-operate);
+}
+@keyframes popup-c413959d {
+from {
+    bottom: 0;
+}
+to {
+    bottom: 15px;
+}
+}
+.control-compent[data-v-c413959d] {
+  display: flex;
+}
+.close[data-v-c413959d] {
+  position: relative;
+  top: 10%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 10px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+  text-align: center;
+  border-radius: 8px;
+  color: var(--text-color-primary);
+  background-color: var(--button-color-secondary-default);
 }.ndsc-img-box[data-v-50420946] {
   width: 50px;
   height: 50px;
@@ -9136,7 +9171,7 @@ body, html {
 }
 .tui-room :not([class|=el]) {
   transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
-}.tui-room[data-v-4dd66a12] {
+}.tui-room[data-v-14e58a3b] {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -9148,7 +9183,7 @@ body, html {
   text-align: left;
   background-color: var(--bg-color-topbar);
 }
-.tui-room .header[data-v-4dd66a12] {
+.tui-room .header[data-v-14e58a3b] {
   position: absolute;
   top: 0;
   left: 0;
@@ -9159,20 +9194,20 @@ body, html {
   border-bottom: 1px solid var(--stroke-color-primary);
   box-shadow: 0 1px 0 var(--uikit-color-black-8);
 }
-.tui-room .content[data-v-4dd66a12] {
+.tui-room .content[data-v-14e58a3b] {
   position: absolute;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: var(--bg-color-topbar);
 }
-.tui-room.tui-room-h5[data-v-4dd66a12] {
+.tui-room.tui-room-h5[data-v-14e58a3b] {
   width: 100%;
   min-width: 350px;
   height: 100%;
   min-height: 525px;
 }
-#roomContainer.chat-room[data-v-4dd66a12] {
+#roomContainer.chat-room[data-v-14e58a3b] {
   position: absolute;
   top: 0;
   right: 0;
@@ -9184,8 +9219,8 @@ body, html {
   margin: auto;
   border-radius: 10px;
 }
-#roomContainer.tui-room-h5[data-v-4dd66a12],
-#roomContainer .chat-room[data-v-4dd66a12] {
+#roomContainer.tui-room-h5[data-v-14e58a3b],
+#roomContainer .chat-room[data-v-14e58a3b] {
   width: 100%;
   height: 100%;
 }.user-info-container[data-v-9e9aff53] {

package/lib/components/RoomFooter/VoteControl/MoreControlH5.vue.d.ts

@@ -1,2 +1,6 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "show-overlay": (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{
+    "onShow-overlay"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

package/lib/components/RoomFooter/VoteControl/MoreControlH5.vue.js

@@ -3,5 +3,5 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const MoreControlH5_vue_vue_type_script_setup_true_lang = require("./MoreControlH5.vue2.js");
 ;/* empty css                    */
 const _pluginVue_exportHelper = require("../../../_virtual/_plugin-vue_export-helper.js");
-const MoreControlH5 = /* @__PURE__ */ _pluginVue_exportHelper.default(MoreControlH5_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-70cfb5f8"]]);
+const MoreControlH5 = /* @__PURE__ */ _pluginVue_exportHelper.default(MoreControlH5_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-c413959d"]]);
 exports.default = MoreControlH5;

package/lib/components/RoomFooter/VoteControl/MoreControlH5.vue2.js

@@ -1,74 +1,104 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const Vue = require("vue");
-const voteIcon = require("../../../assets/imgs/vote-icon.png.js");
-const IconButton = require("../../common/base/IconButton.vue.js");
 const uikitBaseComponentVue3 = require("@tencentcloud/uikit-base-component-vue3");
-const basic = require("../../../stores/basic.js");
-const chat = require("../../../stores/chat.js");
-const pinia = require("pinia");
-const index = require("../../../locales/index.js");
-const Badge = require("../../common/base/Badge.vue.js");
+const IconButton = require("../../common/base/IconButton.vue.js");
+const useMoreControlHooks = require("./useMoreControlHooks.js");
+const ChatControl_vue_vue_type_script_setup_true_lang = require("../ChatControl.vue.js");
+const InviteControl = require("../InviteControl.vue.js");
+const ContactControl = require("../ContactControl.vue.js");
+const room = require("../../../stores/room.js");
+const useMitt = require("../../../hooks/useMitt.js");
+const vTap = require("../../../directives/vTap.js");
 require("../../../services/main.js");
 const roomService = require("../../../services/roomService.js");
+require("../../../locales/index.js");
 require("@tencentcloud/tuiroom-engine-js");
 require("../../../utils/environment.js");
 require("mitt");
 require("../../../services/manager/roomActionManager.js");
 require("@tencentcloud/tui-core");
-const dataReportManager = require("../../../services/manager/dataReportManager.js");
 const _hoisted_1 = {
   key: 0,
-  class: "vote-control-container"
+  class: "more-control-container"
 };
+const _hoisted_2 = { class: "control-compent" };
+const _hoisted_3 = { class: "close" };
 const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
   __name: "MoreControlH5",
-  setup(__props) {
-    const { t } = index.useI18n();
-    const chatControlConfig = roomService.roomService.getComponentConfig("MoreControl");
-    const basicStore = basic.useBasicStore();
-    const chatStore = chat.useChatStore();
-    const { sidebarName } = pinia.storeToRefs(basicStore);
-    async function toggleChatSidebar() {
-      if (basicStore.isSidebarOpen && basicStore.sidebarName === "vote") {
-        basicStore.setSidebarOpenStatus(false);
-        basicStore.setSidebarName("");
-        return;
+  emits: ["show-overlay"],
+  setup(__props, { emit: __emit }) {
+    const moreControlConfig = roomService.roomService.getComponentConfig("MoreControl");
+    const showMoreContent = Vue.ref(false);
+    const moreContentRef = Vue.ref();
+    const { t, sidebarName } = useMoreControlHooks.default();
+    const roomStore = room.useRoomStore();
+    const emit = __emit;
+    function showMore() {
+      showMoreContent.value = true;
+    }
+    function handleCancelControl() {
+      showMoreContent.value = false;
+    }
+    function handleControlClick(name) {
+      useMitt.default.emit("experience-communication", name);
+    }
+    function handleShowOverlay(data) {
+      showMoreContent.value = false;
+      emit("show-overlay", data);
+    }
+    function handleDocumentClick(event) {
+      if (showMoreContent.value && !moreContentRef.value.contains(event.target)) {
+        showMoreContent.value = false;
       }
-      basicStore.setSidebarOpenStatus(true);
-      basicStore.setSidebarName("vote");
-      chatStore.updateUnReadCount(0);
-      roomService.roomService.dataReportManager.reportCount(dataReportManager.MetricsKey.openChat);
-      roomService.roomService.trackingManager.sendMessage("experience-vote");
     }
+    Vue.onMounted(() => {
+      document == null ? void 0 : document.addEventListener("click", handleDocumentClick, true);
+    });
+    Vue.onUnmounted(() => {
+      document == null ? void 0 : document.removeEventListener("click", handleDocumentClick, true);
+    });
     return (_ctx, _cache) => {
-      return Vue.unref(chatControlConfig).visible ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
-        Vue.createVNode(Badge.default, {
-          hidden: Vue.unref(chatStore).unReadCount === 0,
-          value: Vue.unref(chatStore).unReadCount,
-          max: 10
-        }, {
-          default: Vue.withCtx(() => [
-            Vue.createVNode(IconButton.default, {
-              title: Vue.unref(t)("Vote"),
-              "is-active": Vue.unref(sidebarName) === "vote",
-              onClickIcon: toggleChatSidebar
-            }, {
-              default: Vue.withCtx(() => [
-                Vue.createVNode(Vue.unref(uikitBaseComponentVue3.IconChat), { size: "24" })
-              ]),
-              _: 1
-            }, 8, ["title", "is-active"])
+      return Vue.openBlock(), Vue.createElementBlock("div", null, [
+        Vue.unref(moreControlConfig).visible ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
+          Vue.withDirectives((Vue.openBlock(), Vue.createBlock(IconButton.default, {
+            "is-active": Vue.unref(sidebarName) === "more",
+            title: Vue.unref(t)("More")
+          }, {
+            default: Vue.withCtx(() => [
+              Vue.createVNode(Vue.unref(uikitBaseComponentVue3.IconExtension), { size: "24" })
+            ]),
+            _: 1
+          }, 8, ["is-active", "title"])), [
+            [Vue.unref(vTap.default), showMore]
+          ])
+        ])) : Vue.createCommentVNode("", true),
+        showMoreContent.value ? (Vue.openBlock(), Vue.createElementBlock("div", {
+          key: 1,
+          ref_key: "moreContentRef",
+          ref: moreContentRef,
+          class: "show-more-content"
+        }, [
+          Vue.createElementVNode("div", _hoisted_2, [
+            Vue.unref(roomStore).isSpeakAfterTakingSeatMode ? (Vue.openBlock(), Vue.createBlock(ChatControl_vue_vue_type_script_setup_true_lang.default, {
+              key: 0,
+              onClick: _cache[0] || (_cache[0] = ($event) => handleControlClick("chatControl"))
+            })) : Vue.createCommentVNode("", true),
+            Vue.createVNode(ContactControl.default, {
+              onClick: _cache[1] || (_cache[1] = ($event) => handleControlClick("contactControl"))
+            }),
+            Vue.createVNode(InviteControl.default, {
+              onShowOverlay: handleShowOverlay,
+              onClick: _cache[2] || (_cache[2] = ($event) => handleControlClick("inviteControl"))
+            })
           ]),
-          _: 1
-        }, 8, ["hidden", "value"]),
-        _cache[0] || (_cache[0] = Vue.createElementVNode("img", {
-          class: "ndsc-img-box",
-          src: voteIcon.default,
-          alt: "",
-          click: "toggleChatSidebar"
-        }, null, -1))
-      ])) : Vue.createCommentVNode("", true);
+          Vue.withDirectives((Vue.openBlock(), Vue.createElementBlock("div", _hoisted_3, [
+            Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("Cancel")), 1)
+          ])), [
+            [Vue.unref(vTap.default), handleCancelControl]
+          ])
+        ], 512)) : Vue.createCommentVNode("", true)
+      ]);
     };
   }
 });

package/lib/components/RoomFooter/VoteControl/index.d.ts

@@ -1,4 +1,8 @@
-declare const MoreControl: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any> | import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+declare const MoreControl: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "show-overlay": (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{
+    "onShow-overlay"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any> | import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "on-vote": (...args: any[]) => void;
 }, string, import('vue').PublicProps, Readonly<{}> & Readonly<{
     "onOn-vote"?: ((...args: any[]) => any) | undefined;

package/lib/components/RoomFooter/index/indexH5.vue.js

@@ -3,5 +3,5 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const indexH5_vue_vue_type_script_setup_true_lang = ;/* empty css              */
 ;/* empty css              */
 const _pluginVue_exportHelper = require("../../../_virtual/_plugin-vue_export-helper.js");
-const indexH5 = /* @__PURE__ */ _pluginVue_exportHelper.default(indexH5_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-253a50f0"]]);
+const indexH5 = /* @__PURE__ */ _pluginVue_exportHelper.default(indexH5_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-4905d960"]]);
 exports.default = indexH5;

package/lib/conference.vue.d.ts

@@ -16,6 +16,7 @@ declare function enterRoom(options: {
 declare function resetStore(): void;
 declare function __VLS_template(): {
     content?(_: {}): any;
+    contentH5?(_: {}): any;
 };
 declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     displayMode: "permanent" | "wake-up";

package/lib/conference.vue.js

@@ -4,5 +4,5 @@ const conference_vue_vue_type_script_setup_true_lang = require("./conference.vue
 ;/* empty css                 */
 ;/* empty css                 */
 const _pluginVue_exportHelper = require("./_virtual/_plugin-vue_export-helper.js");
-const ConferenceMainView = /* @__PURE__ */ _pluginVue_exportHelper.default(conference_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-4dd66a12"]]);
+const ConferenceMainView = /* @__PURE__ */ _pluginVue_exportHelper.default(conference_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-14e58a3b"]]);
 exports.default = ConferenceMainView;

package/lib/conference.vue2.js

@@ -280,6 +280,9 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
           content: Vue.withCtx(() => [
             Vue.renderSlot(_ctx.$slots, "content", {}, void 0, true)
           ]),
+          contentH5: Vue.withCtx(() => [
+            Vue.renderSlot(_ctx.$slots, "contentH5", {}, void 0, true)
+          ]),
           _: 3
         }, 512), [
           [Vue.vShow, Vue.unref(showRoomTool)]

package/lib/index.js

@@ -3664,7 +3664,7 @@ to {
 .tool-box .tool-box-item[data-v-34681937]:hover {
   border-radius: 8px;
   background-color: var(--list-color-hover);
-}.footer-container[data-v-253a50f0] {
+}.footer-container[data-v-4905d960] {
   position: absolute;
   bottom: 0;
   display: flex;
@@ -3928,9 +3928,44 @@ to {
 }
 .footer .mirror-container .mirror-text[data-v-21a63691] {
   margin-left: 4px;
-}.ndsc-img-box[data-v-70cfb5f8] {
-  width: 50px;
-  height: 50px;
+}.show-more-content[data-v-c413959d] {
+  position: absolute;
+  bottom: 15px;
+  left: 5%;
+  width: 90%;
+  height: 17vh;
+  padding: 10px;
+  border-radius: 13px;
+  animation-name: popup-c413959d;
+  animation-duration: 200ms;
+  background-color: var(--bg-color-operate);
+}
+@keyframes popup-c413959d {
+from {
+    bottom: 0;
+}
+to {
+    bottom: 15px;
+}
+}
+.control-compent[data-v-c413959d] {
+  display: flex;
+}
+.close[data-v-c413959d] {
+  position: relative;
+  top: 10%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 10px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+  text-align: center;
+  border-radius: 8px;
+  color: var(--text-color-primary);
+  background-color: var(--button-color-secondary-default);
 }.ndsc-img-box[data-v-50420946] {
   width: 50px;
   height: 50px;
@@ -9136,7 +9171,7 @@ body, html {
 }
 .tui-room :not([class|=el]) {
   transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
-}.tui-room[data-v-4dd66a12] {
+}.tui-room[data-v-14e58a3b] {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -9148,7 +9183,7 @@ body, html {
   text-align: left;
   background-color: var(--bg-color-topbar);
 }
-.tui-room .header[data-v-4dd66a12] {
+.tui-room .header[data-v-14e58a3b] {
   position: absolute;
   top: 0;
   left: 0;
@@ -9159,20 +9194,20 @@ body, html {
   border-bottom: 1px solid var(--stroke-color-primary);
   box-shadow: 0 1px 0 var(--uikit-color-black-8);
 }
-.tui-room .content[data-v-4dd66a12] {
+.tui-room .content[data-v-14e58a3b] {
   position: absolute;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: var(--bg-color-topbar);
 }
-.tui-room.tui-room-h5[data-v-4dd66a12] {
+.tui-room.tui-room-h5[data-v-14e58a3b] {
   width: 100%;
   min-width: 350px;
   height: 100%;
   min-height: 525px;
 }
-#roomContainer.chat-room[data-v-4dd66a12] {
+#roomContainer.chat-room[data-v-14e58a3b] {
   position: absolute;
   top: 0;
   right: 0;
@@ -9184,8 +9219,8 @@ body, html {
   margin: auto;
   border-radius: 10px;
 }
-#roomContainer.tui-room-h5[data-v-4dd66a12],
-#roomContainer .chat-room[data-v-4dd66a12] {
+#roomContainer.tui-room-h5[data-v-14e58a3b],
+#roomContainer .chat-room[data-v-14e58a3b] {
   width: 100%;
   height: 100%;
 }.user-info-container[data-v-9e9aff53] {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndscnj/roomkit-web-vue3",
-  "version": "25.12.24162",
+  "version": "25.12.24164",
   "main": "./lib/index.js",
   "module": "./es/index.mjs",
   "types": "./es/index.d.ts",

package/src/TUIRoom/components/RoomFooter/VoteControl/MoreControlH5.vue

@@ -1,53 +1,122 @@
 <template>
-  <div v-if="chatControlConfig.visible" class="vote-control-container">
-    <tui-badge
-      :hidden="chatStore.unReadCount === 0"
-      :value="chatStore.unReadCount"
-      :max="10"
-    >
+  <div>
+    <div v-if="moreControlConfig.visible" class="more-control-container">
       <icon-button
-        :title="t('Vote')"
-        :is-active="sidebarName === 'vote'"
-        @click-icon="toggleChatSidebar"
+        v-tap="showMore"
+        :is-active="sidebarName === 'more'"
+        :title="t('More')"
       >
-        <IconChat size="24" />
+        <IconExtension size="24" />
       </icon-button>
-    </tui-badge>
-    <img class="ndsc-img-box" src="../../../assets/imgs/vote-icon.png" alt="" click="toggleChatSidebar"/>
+    </div>
+    <div v-if="showMoreContent" ref="moreContentRef" class="show-more-content">
+      <div class="control-compent">
+        <chat-control
+          v-if="roomStore.isSpeakAfterTakingSeatMode"
+          @click="handleControlClick('chatControl')"
+        />
+        <contact-control @click="handleControlClick('contactControl')" />
+        <invite-control
+          @show-overlay="handleShowOverlay"
+          @click="handleControlClick('inviteControl')"
+        />
+      </div>
+      <div v-tap="handleCancelControl" class="close">{{ t('Cancel') }}</div>
+    </div>
   </div>
 </template>
-
 <script setup lang="ts">
+import { ref, onMounted, onUnmounted, defineEmits } from 'vue';
+import { IconExtension } from '@tencentcloud/uikit-base-component-vue3';
 import IconButton from '../../common/base/IconButton.vue';
-import { IconChat } from '@tencentcloud/uikit-base-component-vue3';
-import { useBasicStore } from '../../../stores/basic';
-import { useChatStore } from '../../../stores/chat';
-import { storeToRefs } from 'pinia';
-import { useI18n } from '../../../locales';
-import TuiBadge from '../../common/base/Badge.vue';
-import { roomService, MetricsKey } from '../../../services';
-const { t } = useI18n();
-const chatControlConfig = roomService.getComponentConfig('MoreControl');
-const basicStore = useBasicStore();
-const chatStore = useChatStore();
-const { sidebarName } = storeToRefs(basicStore);
-
-async function toggleChatSidebar() {
-  if (basicStore.isSidebarOpen && basicStore.sidebarName === 'vote') {
-    basicStore.setSidebarOpenStatus(false);
-    basicStore.setSidebarName('');
-    return;
+import userMoreControl from './useMoreControlHooks';
+import ChatControl from '../ChatControl.vue';
+import InviteControl from '../InviteControl.vue';
+import ContactControl from '../ContactControl.vue';
+import { useRoomStore } from '../../../stores/room';
+import bus from '../../../hooks/useMitt';
+import vTap from '../../../directives/vTap';
+import { roomService } from '../../../services';
+
+const moreControlConfig = roomService.getComponentConfig('MoreControl');
+const showMoreContent = ref(false);
+const moreContentRef = ref();
+
+const { t, sidebarName } = userMoreControl();
+const roomStore = useRoomStore();
+const emit = defineEmits(['show-overlay']);
+function showMore() {
+  showMoreContent.value = true;
+}
+
+function handleCancelControl() {
+  showMoreContent.value = false;
+}
+function handleControlClick(name: string) {
+  bus.emit('experience-communication', name);
+}
+
+function handleShowOverlay(data: { name: string; visible: boolean }) {
+  showMoreContent.value = false;
+  emit('show-overlay', data);
+}
+
+function handleDocumentClick(event: MouseEvent) {
+  if (showMoreContent.value && !moreContentRef.value.contains(event.target)) {
+    showMoreContent.value = false;
   }
-  basicStore.setSidebarOpenStatus(true);
-  basicStore.setSidebarName('vote');
-  chatStore.updateUnReadCount(0);
-  roomService.dataReportManager.reportCount(MetricsKey.openChat);
-  roomService.trackingManager.sendMessage('experience-vote');
 }
+
+onMounted(() => {
+  document?.addEventListener('click', handleDocumentClick, true);
+});
+
+onUnmounted(() => {
+  document?.removeEventListener('click', handleDocumentClick, true);
+});
 </script>
 <style lang="scss" scoped>
-.ndsc-img-box{
-  width: 50px;
-  height: 50px
+.show-more-content {
+  position: absolute;
+  bottom: 15px;
+  left: 5%;
+  width: 90%;
+  height: 17vh;
+  padding: 10px;
+  border-radius: 13px;
+  animation-name: popup;
+  animation-duration: 200ms;
+  background-color: var(--bg-color-operate);
+}
+
+@keyframes popup {
+  from {
+    bottom: 0;
+  }
+
+  to {
+    bottom: 15px;
+  }
+}
+
+.control-compent {
+  display: flex;
+}
+
+.close {
+  position: relative;
+  top: 10%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 10px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+  text-align: center;
+  border-radius: 8px;
+  color: var(--text-color-primary);
+  background-color: var(--button-color-secondary-default);
 }
 </style>

package/src/TUIRoom/components/RoomFooter/index/indexH5.vue

@@ -47,7 +47,6 @@ import ChatControl from '../ChatControl.vue';
 import MasterApplyControl from '../ManageStageControl.vue';
 import MemberApplyControl from '../ApplyControl/MemberApplyControl.vue';
 import MoreControl from '../MoreControl/index';
-import VoteControl from '../VoteControl/index.ts';
 import AIControl from '../AIControl.vue';
 import bus from '../../../hooks/useMitt';
 import vTap from '../../../directives/vTap';
@@ -57,6 +56,7 @@ import useRoomFooter from './useRoomFooterHooks';
 const { roomStore, isMaster, isAdmin, isAudience } = useRoomFooter();
 
 const emit = defineEmits(['show-overlay']);
+
 function handleControlClick(name: string) {
   bus.emit('experience-communication', name);
 }

package/src/TUIRoom/conference.vue

@@ -21,11 +21,14 @@
     <template #content>
       <slot name="content"></slot>
     </template>
+    <template #contentH5>
+      <slot name="contentH5"></slot>
+    </template>
     </room-footer>
     <room-sidebar @on-vote="onVote">
       <template #content>
-          <slot name="content"></slot>
-        </template>
+        <slot name="content"></slot>
+      </template>
     </room-sidebar>
     <room-setting />
     <room-overlay />