@ndscnj/roomkit-web-vue3 25.12.24167 → 25.12.24171

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

@@ -1,40 +1,122 @@
 <template>
-  <div v-if="moreControlConfig.visible" class="more-control-container">
-    <icon-button
-      :is-active="sidebarName === 'vote'"
-      :title="t('Vote')"
-      @click-icon="toggleMoreSidebar"
-    >
-      <img class="ndsc-img-box" src="../../../assets/imgs/vote-icon.png" alt=""/>
-    </icon-button>
+  <div>
+    <div v-if="moreControlConfig.visible" class="more-control-container">
+      <icon-button
+        v-tap="showMore"
+        :is-active="sidebarName === 'more'"
+        :title="t('More')"
+      >
+        <IconExtension size="24" />
+      </icon-button>
+    </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 { IconMore } from '@tencentcloud/uikit-base-component-vue3';
+import { ref, onMounted, onUnmounted, defineEmits } from 'vue';
+import { IconExtension } from '@tencentcloud/uikit-base-component-vue3';
 import IconButton from '../../common/base/IconButton.vue';
 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';
-import { defineEmits} from 'vue';
+
 const moreControlConfig = roomService.getComponentConfig('MoreControl');
-const { t, basicStore, sidebarName } = userMoreControl();
-const emit = defineEmits(['on-vote']);
-function toggleMoreSidebar() {
-  if (basicStore.setSidebarOpenStatus && basicStore.sidebarName === 'vote') {
-    basicStore.setSidebarOpenStatus(false);
-    basicStore.setSidebarName('');
-    return;
+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');
-  emit('on-vote', {
-    name: 'onVote',
-    visible:basicStore.isSidebarOpen,
-  });
 }
+
+onMounted(() => {
+  document?.addEventListener('click', handleDocumentClick, true);
+});
+
+onUnmounted(() => {
+  document?.removeEventListener('click', handleDocumentClick, true);
+});
 </script>
 <style lang="scss" scoped>
-.ndsc-img-box{
-  width: 24px;
-  height: 24px
+.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/VoteControl/MoreControlPC.vue

@@ -34,7 +34,7 @@ function toggleMoreSidebar() {
 </script>
 <style lang="scss" scoped>
 .ndsc-img-box{
-  width: 24px;
+  width:24px;
   height: 24px
 }
 </style>

package/src/TUIRoom/components/RoomFooter/VoteControl/index.ts

@@ -1,4 +1,4 @@
-import MoreControlH5 from './MoreControlH5.vue';
+import MoreControlH5 from './MoreControlPC.vue';
 import MoreControlPc from './MoreControlPC.vue';
 
 import { isMobile } from '../../../utils/environment';

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

@@ -10,15 +10,6 @@
       :display-mode="MediaSettingDisplayMode.Icon"
       v-tap="() => handleControlClick('videoControl')"
     />
-    <voteControl
-      class="center-container-item"
-      @click="handleControlClick('voteControl')"
-      @on-vote="onVote"
-    >
-    <template #contentH5>
-      <slot name="contentH5"></slot>
-    </template>
-    </voteControl>
     <chat-control
       v-if="!roomStore.isSpeakAfterTakingSeatMode"
       v-tap="() => handleControlClick('chatControl')"
@@ -56,7 +47,6 @@ import MasterApplyControl from '../ManageStageControl.vue';
 import MemberApplyControl from '../ApplyControl/MemberApplyControl.vue';
 import MoreControl from '../MoreControl/index';
 import AIControl from '../AIControl.vue';
-import voteControl from '../VoteControl';
 import bus from '../../../hooks/useMitt';
 import vTap from '../../../directives/vTap';
 
@@ -64,11 +54,8 @@ import useRoomFooter from './useRoomFooterHooks';
 
 const { roomStore, isMaster, isAdmin, isAudience } = useRoomFooter();
 
-const emit = defineEmits(['show-overlay','on-vote']);
-const onVote = (data: { name: string; visible: boolean }) => {
-  console.log(data,"data111")
-  emit('on-vote', { code: data.visible, message: 'vote' });
-};
+const emit = defineEmits(['show-overlay']);
+
 function handleControlClick(name: string) {
   bus.emit('experience-communication', name);
 }

package/src/TUIRoom/components/RoomSidebar/indexPC.vue

@@ -12,9 +12,6 @@
         <template #content>
           <slot name="content"></slot>
         </template>
-        <template #contentH5>
-          <slot name="contentH5"></slot>
-        </template>
       </room-vote>
       <room-more v-if="sidebarName == 'more'" />
       <manage-member v-if="sidebarName == 'manage-member'" />

package/src/TUIRoom/components/RoomVote/indexH5.vue

@@ -1,84 +1,141 @@
 <template>
-  <div class="more-container">
-    <slot name="contentH5"></slot>
+  <div class="contact-container-main">
+    <div class="contact-title-main">
+      <div>{{ t('Contact us') }}</div>
+      <span v-tap="handleCloseContact" class="cancel">{{ t('Cancel') }}</span>
+    </div>
+    <div
+      v-for="item in contactContentList"
+      :key="item.id"
+      class="contact-content-main"
+    >
+      <span class="contact-title">{{ t(item.title) }}</span>
+      <span class="contact-content">{{ item.content }}</span>
+      <IconCopy v-tap="() => onCopy(item.copyLink)" class="copy" />
+    </div>
+    <span class="contact-bottom">
+      {{
+        t(
+          'If you have any questions, please feel free to join our QQ group or send an email'
+        )
+      }}
+    </span>
   </div>
 </template>
 
 <script setup lang="ts">
+import useRoomMoreControl from './useRoomMoreHooks';
+import { IconCopy } from '@tencentcloud/uikit-base-component-vue3';
+import vTap from '../../directives/vTap';
+
+const { t, onCopy, contactContentList } = useRoomMoreControl();
+
+const emit = defineEmits(['on-close-contact']);
+
+function handleCloseContact() {
+  emit('on-close-contact');
+}
 </script>
 
 <style lang="scss" scoped>
-.more-container {
-  padding: 20px;
+span {
+  padding-right: 5px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 17px;
+}
 
-  .more-title {
-    display: flex;
-    align-items: center;
+.contact-container-main {
+  position: fixed;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding-bottom: 4vh;
+  border-radius: 15px 15px 0 0;
+  animation-name: popup;
+  animation-duration: 200ms;
+  background-color: var(--bg-color-operate);
 
-    .email-icon {
-      color: var(--uikit-color-gray-7);
+  @keyframes popup {
+    from {
+      transform: scaleY(0);
+      transform-origin: bottom;
     }
 
-    .more-notice {
-      width: 100%;
-      height: 22px;
-      padding-left: 8px;
-      font-size: 14px;
-      font-weight: 400;
-      line-height: 22px;
-      color: var(--text-color-primary);
+    to {
+      transform: scaleY(1);
+      transform-origin: bottom;
     }
   }
 
-  .more-item {
-    position: relative;
+  .contact-title-main {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
+    align-items: center;
+    padding: 30px 0 20px 25px;
+    font-family: 'PingFang SC';
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 24px;
+    color: var(--text-color-primary);
+  }
 
-    &:not(:first-child) {
-      margin-top: 20px;
+  .contact-content-main {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 90%;
+    height: 15%;
+    padding: 0 0 0 25px;
+    margin-bottom: 10px;
+  }
 
-      .item-title {
-        width: 100%;
-        padding-bottom: 8px;
-        font-size: 14px;
-        font-weight: 400;
-        line-height: 22px;
-        color: var(--text-color-primary);
-      }
+  .contact-title,
+  .contact-content {
+    width: 28%;
+    font-family: 'PingFang SC';
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+    white-space: nowrap;
+    color: var(--text-color-primary);
+  }
 
-      .more-content {
-        position: relative;
-        box-sizing: border-box;
-        display: inline-block;
-        flex: 1;
-        height: 42px;
-        padding: 10px 30px 10px 16px;
-        overflow: hidden;
-        font-size: 14px;
-        font-weight: 500;
-        line-height: 22px;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        border-radius: 8px;
-        outline: none;
-        transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
-        color: var(--text-color-primary);
-        background-color: var(--bg-color-input);
-        border: 1px solid var(--stroke-color-module);
-      }
+  .contact-content {
+    width: 62%;
+    overflow: hidden;
+    font-size: 14px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--text-color-secondary);
+  }
 
-      .copy-icon {
-        position: absolute;
-        top: 45px;
-        right: 10px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        color: var(--text-color-link);
-      }
-    }
+  .contact-bottom {
+    width: 90%;
+    padding-left: 40px;
+    font-family: 'PingFang SC';
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 17px;
+    text-align: center;
+    color: var(--text-color-secondary);
   }
+
+  .copy {
+    margin-left: 30px;
+    color: var(--text-color-link);
+  }
+}
+
+.cancel {
+  flex: 1;
+  padding-right: 30px;
+  font-size: 16px;
+  font-weight: 400;
+  text-align: end;
 }
 </style>

package/src/TUIRoom/conference.vue

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

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

@@ -1,6 +0,0 @@
-declare const _default: 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;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export default _default;

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

@@ -1,7 +0,0 @@
-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-2a47be79"]]);
-export {
-  MoreControlH5 as default
-};

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

@@ -1,59 +0,0 @@
-import { defineComponent, createElementBlock, createCommentVNode, unref, openBlock, createVNode, withCtx, createElementVNode } from "vue";
-import _imports_0 from "../../../assets/imgs/vote-icon.png.mjs";
-import IconButton from "../../common/base/IconButton.vue.mjs";
-import useControl from "./useMoreControlHooks.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";
-const _hoisted_1 = {
-  key: 0,
-  class: "more-control-container"
-};
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "MoreControlH5",
-  emits: ["on-vote"],
-  setup(__props, { emit: __emit }) {
-    const moreControlConfig = roomService.getComponentConfig("MoreControl");
-    const { t, basicStore, sidebarName } = useControl();
-    const emit = __emit;
-    function toggleMoreSidebar() {
-      if (basicStore.setSidebarOpenStatus && basicStore.sidebarName === "vote") {
-        basicStore.setSidebarOpenStatus(false);
-        basicStore.setSidebarName("");
-        return;
-      }
-      basicStore.setSidebarOpenStatus(true);
-      basicStore.setSidebarName("vote");
-      emit("on-vote", {
-        name: "onVote",
-        visible: basicStore.isSidebarOpen
-      });
-    }
-    return (_ctx, _cache) => {
-      return unref(moreControlConfig).visible ? (openBlock(), createElementBlock("div", _hoisted_1, [
-        createVNode(IconButton, {
-          "is-active": unref(sidebarName) === "vote",
-          title: unref(t)("Vote"),
-          onClickIcon: toggleMoreSidebar
-        }, {
-          default: withCtx(() => [..._cache[0] || (_cache[0] = [
-            createElementVNode("img", {
-              class: "ndsc-img-box",
-              src: _imports_0,
-              alt: ""
-            }, null, -1)
-          ])]),
-          _: 1
-        }, 8, ["is-active", "title"])
-      ])) : createCommentVNode("", true);
-    };
-  }
-});
-export {
-  _sfc_main as default
-};

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

@@ -1,6 +0,0 @@
-declare const _default: 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;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export default _default;

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

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-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-2a47be79"]]);
-exports.default = MoreControlH5;

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

@@ -1,59 +0,0 @@
-"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 useMoreControlHooks = require("./useMoreControlHooks.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 _hoisted_1 = {
-  key: 0,
-  class: "more-control-container"
-};
-const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
-  __name: "MoreControlH5",
-  emits: ["on-vote"],
-  setup(__props, { emit: __emit }) {
-    const moreControlConfig = roomService.roomService.getComponentConfig("MoreControl");
-    const { t, basicStore, sidebarName } = useMoreControlHooks.default();
-    const emit = __emit;
-    function toggleMoreSidebar() {
-      if (basicStore.setSidebarOpenStatus && basicStore.sidebarName === "vote") {
-        basicStore.setSidebarOpenStatus(false);
-        basicStore.setSidebarName("");
-        return;
-      }
-      basicStore.setSidebarOpenStatus(true);
-      basicStore.setSidebarName("vote");
-      emit("on-vote", {
-        name: "onVote",
-        visible: basicStore.isSidebarOpen
-      });
-    }
-    return (_ctx, _cache) => {
-      return Vue.unref(moreControlConfig).visible ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
-        Vue.createVNode(IconButton.default, {
-          "is-active": Vue.unref(sidebarName) === "vote",
-          title: Vue.unref(t)("Vote"),
-          onClickIcon: toggleMoreSidebar
-        }, {
-          default: Vue.withCtx(() => [..._cache[0] || (_cache[0] = [
-            Vue.createElementVNode("img", {
-              class: "ndsc-img-box",
-              src: voteIcon.default,
-              alt: ""
-            }, null, -1)
-          ])]),
-          _: 1
-        }, 8, ["is-active", "title"])
-      ])) : Vue.createCommentVNode("", true);
-    };
-  }
-});
-exports.default = _sfc_main;