@ndscnj/roomkit-web-vue3 25.12.24164 → 25.12.24166

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

@@ -1,122 +1,41 @@
 <template>
-  <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 v-if="moreControlConfig.visible" class="more-control-container">
+    <icon-button
+      :is-active="sidebarName === 'vote'"
+      :title="t('Vote')"
+      @click-icon="toggleMoreSidebar"
+    >
+      <IconMore size="24" />
+      <img class="ndsc-img-box" src="../../../assets/imgs/vote-icon.png" alt=""/>
+    </icon-button>
   </div>
 </template>
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, defineEmits } from 'vue';
-import { IconExtension } from '@tencentcloud/uikit-base-component-vue3';
+import { IconMore } 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 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;
+const { t, basicStore, sidebarName } = userMoreControl();
+const emit = defineEmits(['on-vote']);
+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,
+  });
 }
-
-onMounted(() => {
-  document?.addEventListener('click', handleDocumentClick, true);
-});
-
-onUnmounted(() => {
-  document?.removeEventListener('click', handleDocumentClick, true);
-});
 </script>
 <style lang="scss" scoped>
-.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);
+.ndsc-img-box{
+  width: 50px;
+  height: 50px
 }
 </style>

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

@@ -6,8 +6,8 @@
       @click-icon="toggleMoreSidebar"
     >
       <IconMore size="24" />
+      <img class="ndsc-img-box" src="../../../assets/imgs/vote-icon.png" alt=""/>
     </icon-button>
-    <img class="ndsc-img-box" src="../../../assets/imgs/vote-icon.png" alt="" click="toggleMoreSidebar"/>
   </div>
 </template>
 <script setup lang="ts">

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

@@ -14,7 +14,6 @@
       v-if="!roomStore.isSpeakAfterTakingSeatMode"
       v-tap="() => handleControlClick('chatControl')"
     />
-    <slot name="contentH5"></slot>
     <AIControl
       @click="handleControlClick('AIControl')"
     />

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

@@ -12,6 +12,9 @@
         <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,112 +1,84 @@
 <template>
-  <div class="contact-container-main">
-    <slot name="content"></slot>
+  <div class="more-container">
+    <slot name="contentH5"></slot>
   </div>
 </template>
 
 <script setup lang="ts">
-
 </script>
 
 <style lang="scss" scoped>
-span {
-  padding-right: 5px;
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 17px;
-}
+.more-container {
+  padding: 20px;
 
-.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);
+  .more-title {
+    display: flex;
+    align-items: center;
 
-  @keyframes popup {
-    from {
-      transform: scaleY(0);
-      transform-origin: bottom;
+    .email-icon {
+      color: var(--uikit-color-gray-7);
     }
 
-    to {
-      transform: scaleY(1);
-      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);
     }
   }
 
-  .contact-title-main {
-    display: flex;
-    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);
-  }
-
-  .contact-content-main {
+  .more-item {
+    position: relative;
     display: flex;
-    flex-direction: row;
-    align-items: center;
-    width: 90%;
-    height: 15%;
-    padding: 0 0 0 25px;
-    margin-bottom: 10px;
-  }
+    flex-direction: column;
 
-  .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);
-  }
+    &:not(:first-child) {
+      margin-top: 20px;
 
-  .contact-content {
-    width: 62%;
-    overflow: hidden;
-    font-size: 14px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    color: var(--text-color-secondary);
-  }
+      .item-title {
+        width: 100%;
+        padding-bottom: 8px;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 22px;
+        color: var(--text-color-primary);
+      }
 
-  .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);
-  }
+      .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);
+      }
 
-  .copy {
-    margin-left: 30px;
-    color: var(--text-color-link);
+      .copy-icon {
+        position: absolute;
+        top: 45px;
+        right: 10px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        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,16 +18,13 @@
       @show-overlay="handleShowOverlay"
       @on-vote="onVote"
     >
-    <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>
+          <slot name="content"></slot>
+        </template>
+      <template #contentH5>
+        <slot name="contentH5"></slot>
       </template>
     </room-sidebar>
     <room-setting />