@ndscnj/roomkit-web-vue3 25.12.2417 → 25.12.2418

package/lib/index.js

@@ -3664,13 +3664,7 @@ to {
 .tool-box .tool-box-item[data-v-34681937]:hover {
   border-radius: 8px;
   background-color: var(--list-color-hover);
-}.ndsc-img-box[data-v-2a47be79] {
-  width: 24px;
-  height: 24px;
-}.ndsc-img-box[data-v-997feff9] {
-  width: 24px;
-  height: 24px;
-}.footer-container[data-v-df7f3346] {
+}.footer-container[data-v-f3bbac91] {
   position: absolute;
   bottom: 0;
   display: flex;
@@ -3934,6 +3928,44 @@ to {
 }
 .footer .mirror-container .mirror-text[data-v-21a63691] {
   margin-left: 4px;
+}.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);
 }.footer-container[data-v-4afcea78] {
   position: absolute;
   bottom: 0;
@@ -4948,76 +4980,101 @@ to {
   justify-content: space-around;
   margin: 20px 0;
   cursor: pointer;
-}.sidebar-container-mobile[data-v-83d339c1] {
+}.sidebar-container-mobile[data-v-e545b2de] {
   position: fixed;
   top: 0;
   right: 0;
   z-index: 101;
   height: 100%;
-}.more-container[data-v-5d02e842] {
-  padding: 20px;
+}span[data-v-939000cb] {
+  padding-right: 5px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 17px;
 }
-.more-container .more-title[data-v-5d02e842] {
+.contact-container-main[data-v-939000cb] {
+  position: fixed;
+  bottom: 0;
   display: flex;
-  align-items: center;
+  flex-direction: column;
+  width: 100%;
+  padding-bottom: 4vh;
+  border-radius: 15px 15px 0 0;
+  animation-name: popup-939000cb;
+  animation-duration: 200ms;
+  background-color: var(--bg-color-operate);
 }
-.more-container .more-title .email-icon[data-v-5d02e842] {
-  color: var(--uikit-color-gray-7);
+@keyframes popup-939000cb {
+from {
+    transform: scaleY(0);
+    transform-origin: bottom;
 }
-.more-container .more-title .more-notice[data-v-5d02e842] {
-  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-container .more-item[data-v-5d02e842] {
-  position: relative;
+}
+.contact-container-main .contact-title-main[data-v-939000cb] {
   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);
 }
-.more-container .more-item[data-v-5d02e842]:not(:first-child) {
-  margin-top: 20px;
+.contact-container-main .contact-content-main[data-v-939000cb] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 90%;
+  height: 15%;
+  padding: 0 0 0 25px;
+  margin-bottom: 10px;
 }
-.more-container .more-item:not(:first-child) .item-title[data-v-5d02e842] {
-  width: 100%;
-  padding-bottom: 8px;
+.contact-container-main .contact-title[data-v-939000cb],
+.contact-container-main .contact-content[data-v-939000cb] {
+  width: 28%;
+  font-family: "PingFang SC";
   font-size: 14px;
+  font-style: normal;
   font-weight: 400;
-  line-height: 22px;
+  line-height: 20px;
+  white-space: nowrap;
   color: var(--text-color-primary);
 }
-.more-container .more-item:not(:first-child) .more-content[data-v-5d02e842] {
-  position: relative;
-  box-sizing: border-box;
-  display: inline-block;
-  flex: 1;
-  height: 42px;
-  padding: 10px 30px 10px 16px;
+.contact-container-main .contact-content[data-v-939000cb] {
+  width: 62%;
   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);
+  color: var(--text-color-secondary);
 }
-.more-container .more-item:not(:first-child) .copy-icon[data-v-5d02e842] {
-  position: absolute;
-  top: 45px;
-  right: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
+.contact-container-main .contact-bottom[data-v-939000cb] {
+  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);
+}
+.contact-container-main .copy[data-v-939000cb] {
+  margin-left: 30px;
   color: var(--text-color-link);
+}
+.cancel[data-v-939000cb] {
+  flex: 1;
+  padding-right: 30px;
+  font-size: 16px;
+  font-weight: 400;
+  text-align: end;
 }.more-container[data-v-41107c5f] {
   padding: 20px;
 }
@@ -9111,7 +9168,7 @@ body, html {
 }
 .tui-room :not([class|=el]) {
   transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
-}.tui-room[data-v-3d7b72df] {
+}.tui-room[data-v-b4d71215] {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -9123,7 +9180,7 @@ body, html {
   text-align: left;
   background-color: var(--bg-color-topbar);
 }
-.tui-room .header[data-v-3d7b72df] {
+.tui-room .header[data-v-b4d71215] {
   position: absolute;
   top: 0;
   left: 0;
@@ -9134,20 +9191,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-3d7b72df] {
+.tui-room .content[data-v-b4d71215] {
   position: absolute;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: var(--bg-color-topbar);
 }
-.tui-room.tui-room-h5[data-v-3d7b72df] {
+.tui-room.tui-room-h5[data-v-b4d71215] {
   width: 100%;
   min-width: 350px;
   height: 100%;
   min-height: 525px;
 }
-#roomContainer.chat-room[data-v-3d7b72df] {
+#roomContainer.chat-room[data-v-b4d71215] {
   position: absolute;
   top: 0;
   right: 0;
@@ -9159,8 +9216,8 @@ body, html {
   margin: auto;
   border-radius: 10px;
 }
-#roomContainer.tui-room-h5[data-v-3d7b72df],
-#roomContainer .chat-room[data-v-3d7b72df] {
+#roomContainer.tui-room-h5[data-v-b4d71215],
+#roomContainer .chat-room[data-v-b4d71215] {
   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.2417",
+  "version": "25.12.2418",
   "main": "./lib/index.js",
   "module": "./es/index.mjs",
   "types": "./es/index.d.ts",

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

@@ -5,7 +5,7 @@
       :title="t('Vote')"
       @click-icon="toggleMoreSidebar"
     >
-      <img class="ndsc-img-box" src="../../../assets/imgs/vote-icon.png" alt=""/>
+      <IconMore size="24" />
     </icon-button>
   </div>
 </template>
@@ -14,10 +14,10 @@ import { IconMore } from '@tencentcloud/uikit-base-component-vue3';
 import IconButton from '../../common/base/IconButton.vue';
 import userMoreControl from './useMoreControlHooks';
 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);
@@ -26,15 +26,6 @@ function toggleMoreSidebar() {
   }
   basicStore.setSidebarOpenStatus(true);
   basicStore.setSidebarName('vote');
-  emit('on-vote', {
-    name: 'onVote',
-    visible:basicStore.isSidebarOpen,
-  });
 }
 </script>
-<style lang="scss" scoped>
-.ndsc-img-box{
-  width: 24px;
-  height: 24px
-}
-</style>
+<style lang="scss" scoped></style>

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

@@ -9,7 +9,7 @@ export default function useControl() {
 
   const basicStore = useBasicStore();
   const { sidebarName } = storeToRefs(basicStore);
-  const isSidebarOpen = computed(() => basicStore.isSidebarOpen);
+
   const iconName = computed(() =>
     sidebarName.value === 'vote' ? ICON_NAME.MoreActive : ICON_NAME.More
   );
@@ -19,6 +19,5 @@ export default function useControl() {
     basicStore,
     iconName,
     sidebarName,
-    isSidebarOpen
   };
 }

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 #content>
-      <slot name="content"></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/indexH5.vue

@@ -5,11 +5,6 @@
         <chat v-if="sidebarName === 'chat'" />
         <manage-member v-if="sidebarName === 'manage-member'" />
         <master-apply v-if="sidebarName === 'apply'" />
-        <room-vote v-if="sidebarName == 'vote'" >
-          <template #content>
-            <slot name="content"></slot>
-          </template>
-        </room-vote>
       </div>
     </template>
     <template #sidebarFooter>