@ndscnj/roomkit-web-vue3 25.12.23182 → 25.12.24111

package/lib/conference.vue2.js

@@ -219,6 +219,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
       roomService.roomService.resetStore();
     }
     const onVote = (data) => {
+      console.log(data, "data222");
       emit("on-vote", { code: data.visible, message: "vote" });
     };
     const onStartRoom = () => {

package/lib/constants/icon.d.ts

@@ -20,6 +20,8 @@ export declare enum ICON_NAME {
     ManageMember = "manage-member",
     More = "more",
     MoreActive = "more-active",
+    Vote = "vote",
+    VoteActive = "vote-active",
     SettingActive = "setting-active",
     Setting = "setting",
     LineArrowUp = "line-arrow-up",

package/lib/constants/icon.js

@@ -22,6 +22,8 @@ var ICON_NAME = /* @__PURE__ */ ((ICON_NAME2) => {
   ICON_NAME2["ManageMember"] = "manage-member";
   ICON_NAME2["More"] = "more";
   ICON_NAME2["MoreActive"] = "more-active";
+  ICON_NAME2["Vote"] = "vote";
+  ICON_NAME2["VoteActive"] = "vote-active";
   ICON_NAME2["SettingActive"] = "setting-active";
   ICON_NAME2["Setting"] = "setting";
   ICON_NAME2["LineArrowUp"] = "line-arrow-up";

package/lib/index.js

@@ -3928,36 +3928,45 @@ to {
 }
 .footer .mirror-container .mirror-text[data-v-21a63691] {
   margin-left: 4px;
-}.tool-box[data-v-45795e90] {
+}.show-more-content[data-v-1506794c] {
   position: absolute;
-  bottom: 72px;
-  z-index: 2;
+  bottom: 15px;
+  left: 5%;
+  width: 90%;
+  height: 17vh;
+  padding: 10px;
+  border-radius: 13px;
+  animation-name: popup-1506794c;
+  animation-duration: 200ms;
+  background-color: var(--bg-color-operate);
+}
+@keyframes popup-1506794c {
+from {
+    bottom: 0;
+}
+to {
+    bottom: 15px;
+}
+}
+.control-compent[data-v-1506794c] {
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 5px 0;
-  border-radius: 15px;
-  background-color: var(--bg-color-dialog);
-  box-shadow: 0 -8px 30p var(--uikit-color-black-8);
 }
-.tool-box .tool-box-item[data-v-45795e90] {
+.close[data-v-1506794c] {
+  position: relative;
+  top: 10%;
   display: flex;
   align-items: center;
-  justify-content: flex-start;
+  justify-content: center;
   width: 100%;
-  padding: 7px 10px;
-  font-size: 12px;
-  white-space: nowrap;
-  cursor: pointer;
-}
-.tool-box .tool-box-item .icon[data-v-45795e90] {
-  margin-right: 8px;
-}
-.tool-box .tool-box-item[data-v-45795e90]:hover {
+  padding: 10px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+  text-align: center;
   border-radius: 8px;
-  background-color: var(--list-color-hover);
-}.footer-container[data-v-6b90d75f] {
+  color: var(--text-color-primary);
+  background-color: var(--button-color-secondary-default);
+}.footer-container[data-v-3a373c3a] {
   position: absolute;
   bottom: 0;
   display: flex;
@@ -3971,25 +3980,25 @@ to {
   background-color: var(--bg-color-topbar);
   box-shadow: 0 -8px 30px var(--uikit-color-black-8);
 }
-.footer-container .left-container[data-v-6b90d75f] {
+.footer-container .left-container[data-v-3a373c3a] {
   display: flex;
   align-items: center;
   height: 100%;
 }
-.footer-container .left-container .left-container-item[data-v-6b90d75f]:not(:first-child) {
+.footer-container .left-container .left-container-item[data-v-3a373c3a]:not(:first-child) {
   margin-left: 1rem;
 }
-.footer-container .center-container[data-v-6b90d75f] {
+.footer-container .center-container[data-v-3a373c3a] {
   position: relative;
   display: flex;
   align-items: center;
   height: 100%;
   margin: 0 auto;
 }
-.footer-container .center-container .center-container-item[data-v-6b90d75f]:not(:first-child) {
+.footer-container .center-container .center-container-item[data-v-3a373c3a]:not(:first-child) {
   margin-left: 16px;
 }
-.footer-container .right-container[data-v-6b90d75f] {
+.footer-container .right-container[data-v-3a373c3a] {
   display: flex;
   align-items: center;
   height: 100%;
@@ -5066,17 +5075,17 @@ to {
   font-size: 16px;
   font-weight: 400;
   text-align: end;
-}.more-container[data-v-17479e8d] {
+}.more-container[data-v-11728c2b] {
   padding: 20px;
 }
-.more-container .more-title[data-v-17479e8d] {
+.more-container .more-title[data-v-11728c2b] {
   display: flex;
   align-items: center;
 }
-.more-container .more-title .email-icon[data-v-17479e8d] {
+.more-container .more-title .email-icon[data-v-11728c2b] {
   color: var(--uikit-color-gray-7);
 }
-.more-container .more-title .more-notice[data-v-17479e8d] {
+.more-container .more-title .more-notice[data-v-11728c2b] {
   width: 100%;
   height: 22px;
   padding-left: 8px;
@@ -5085,15 +5094,15 @@ to {
   line-height: 22px;
   color: var(--text-color-primary);
 }
-.more-container .more-item[data-v-17479e8d] {
+.more-container .more-item[data-v-11728c2b] {
   position: relative;
   display: flex;
   flex-direction: column;
 }
-.more-container .more-item[data-v-17479e8d]:not(:first-child) {
+.more-container .more-item[data-v-11728c2b]:not(:first-child) {
   margin-top: 20px;
 }
-.more-container .more-item:not(:first-child) .item-title[data-v-17479e8d] {
+.more-container .more-item:not(:first-child) .item-title[data-v-11728c2b] {
   width: 100%;
   padding-bottom: 8px;
   font-size: 14px;
@@ -5101,7 +5110,7 @@ to {
   line-height: 22px;
   color: var(--text-color-primary);
 }
-.more-container .more-item:not(:first-child) .more-content[data-v-17479e8d] {
+.more-container .more-item:not(:first-child) .more-content[data-v-11728c2b] {
   position: relative;
   box-sizing: border-box;
   display: inline-block;
@@ -5121,7 +5130,7 @@ to {
   background-color: var(--bg-color-input);
   border: 1px solid var(--stroke-color-module);
 }
-.more-container .more-item:not(:first-child) .copy-icon[data-v-17479e8d] {
+.more-container .more-item:not(:first-child) .copy-icon[data-v-11728c2b] {
   position: absolute;
   top: 45px;
   right: 10px;
@@ -9159,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-d9ae22c4] {
+}.tui-room[data-v-3b59b436] {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -9171,7 +9180,7 @@ body, html {
   text-align: left;
   background-color: var(--bg-color-topbar);
 }
-.tui-room .header[data-v-d9ae22c4] {
+.tui-room .header[data-v-3b59b436] {
   position: absolute;
   top: 0;
   left: 0;
@@ -9182,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-d9ae22c4] {
+.tui-room .content[data-v-3b59b436] {
   position: absolute;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: var(--bg-color-topbar);
 }
-.tui-room.tui-room-h5[data-v-d9ae22c4] {
+.tui-room.tui-room-h5[data-v-3b59b436] {
   width: 100%;
   min-width: 350px;
   height: 100%;
   min-height: 525px;
 }
-#roomContainer.chat-room[data-v-d9ae22c4] {
+#roomContainer.chat-room[data-v-3b59b436] {
   position: absolute;
   top: 0;
   right: 0;
@@ -9207,8 +9216,8 @@ body, html {
   margin: auto;
   border-radius: 10px;
 }
-#roomContainer.tui-room-h5[data-v-d9ae22c4],
-#roomContainer .chat-room[data-v-d9ae22c4] {
+#roomContainer.tui-room-h5[data-v-3b59b436],
+#roomContainer .chat-room[data-v-3b59b436] {
   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.23182",
+  "version": "25.12.24111",
   "main": "./lib/index.js",
   "module": "./es/index.mjs",
   "types": "./es/index.d.ts",

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

@@ -54,6 +54,7 @@
       <voteControl
         class="center-container-item"
         @click="handleControlClick('voteControl')"
+        @on-vote="onVote"
       >
       <template #content>
         <slot name="content"></slot>
@@ -81,6 +82,7 @@
 </template>
 
 <script setup lang="ts">
+import { defineEmits } from "vue";
 import {
   AudioSetting,
   VideoSetting,
@@ -101,13 +103,18 @@ import VirtualBackground from '../VirtualBackground.vue';
 import AIControl from '../AIControl.vue';
 import BasicBeauty from '../BasicBeauty.vue';
 import bus from '../../../hooks/useMitt';
-import voteControl from '../voteControl.vue';
+import voteControl from '../voteControl';
 import useRoomFooter from './useRoomFooterHooks';
 import { isElectron } from '../../../utils/environment';
 const { roomStore, isMaster, isAdmin, isAudience } = useRoomFooter();
 function handleControlClick(name: string) {
   bus.emit('experience-communication', name);
 }
+const emit = defineEmits(['on-vote']);
+const onVote = (data: { name: string; visible: boolean }) => {
+  console.log(data,"data111")
+  emit('on-vote', { code: data.visible, message: 'vote' });
+};
 </script>
 
 <style lang="scss" scoped>

package/src/TUIRoom/components/RoomFooter/voteControl/VoteControlH5.vue

@@ -0,0 +1,122 @@
+<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>
+</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 userVoteControl from './useVoteControlHooks';
+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 } = userVoteControl();
+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;
+  }
+}
+
+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);
+}
+</style>

package/src/TUIRoom/components/RoomFooter/voteControl/VoteControlPC.vue

@@ -0,0 +1,35 @@
+<template>
+  <div v-if="voteControlConfig.visible" class="vote-control-container">
+    <icon-button
+      :is-active="sidebarName === 'vote'"
+      :title="t('Vote')"
+      @click-icon="toggleMoreSidebar"
+    >
+      <IconMore size="24" />
+    </icon-button>
+  </div>
+</template>
+<script setup lang="ts">
+import { IconMore } from '@tencentcloud/uikit-base-component-vue3';
+import IconButton from '../../common/base/IconButton.vue';
+import userVoteControl from './useVoteControlHooks';
+import { roomService } from '../../../services';
+import { defineEmits } from 'vue';
+const voteControlConfig = roomService.getComponentConfig('VoteControl');
+const { t, basicStore, sidebarName } = userVoteControl();
+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: voteControlConfig.visible,
+  });
+}
+</script>
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,8 @@
+import VoteControlH5 from './VoteControlH5.vue';
+import VoteControlPc from './VoteControlPC.vue';
+
+import { isMobile } from '../../../utils/environment';
+
+const VoteControl = isMobile ? VoteControlH5 : VoteControlPc;
+
+export default VoteControl;

package/src/TUIRoom/components/RoomFooter/voteControl/useVoteControlHooks.ts

@@ -0,0 +1,23 @@
+import { computed } from 'vue';
+import { useBasicStore } from '../../../stores/basic';
+import { storeToRefs } from 'pinia';
+import { useI18n } from '../../../locales';
+import { ICON_NAME } from '../../../constants/icon';
+
+export default function useControl() {
+  const { t } = useI18n();
+
+  const basicStore = useBasicStore();
+  const { sidebarName } = storeToRefs(basicStore);
+
+  const iconName = computed(() =>
+    sidebarName.value === 'vote' ? ICON_NAME.VoteActive : ICON_NAME.Vote
+  );
+
+  return {
+    t,
+    basicStore,
+    iconName,
+    sidebarName,
+  };
+}

package/src/TUIRoom/components/RoomFooter/voteControl.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="more-container" v-if="voteControlConfig.visible">
+  <div class="vote-control-container">
     <icon-button
       :is-active="sidebarName === 'vote'"
       :title="t('Vote')"
@@ -7,11 +7,13 @@
     >
       <IconAIIcon size="24" />
     </icon-button>
-    {{ sidebarName }}
-    <div @click="toggleToolBox">0测试</div>
-    <div class="tool-box" v-if="!isSidebarOpen && showToolBox">
-      123
+    <div class="contact-container" v-if="!isSidebarOpen && showToolBox">
       <slot name="content"></slot>
+      <!-- <room-vote ref="contactRef" @on-close-contact="handleOnCloseContact">
+        <template #content>
+          <slot name="content"></slot>
+        </template>
+      </room-vote> -->
     </div>
   </div>
 </template>
@@ -23,9 +25,8 @@ import { useI18n } from '../../locales';
 import IconButton from '../common/base/IconButton.vue';
 import {
   IconAIIcon,
-  IconAISubtitles,
-  IconAITranscription,
 } from '@tencentcloud/uikit-base-component-vue3';
+import roomVote from '../RoomVote';
 const { basicStore } = roomService;
 const isSidebarOpen = computed(() => basicStore.isSidebarOpen);
 const sidebarName = computed(() => basicStore.sidebarName);
@@ -34,50 +35,30 @@ const showToolBox = ref(false);
 watch(isSidebarOpen, newValue => {
   showToolBox.value = newValue && false;
 });
-const voteControlConfig = roomService.getComponentConfig('VoteControl');
 const emit = defineEmits(['on-vote']);
 function toggleToolBox() {
+  console.log(showToolBox.value,"0000")
   showToolBox.value = !showToolBox.value;
   emit('on-vote', {
-      name: 'onVote',
-      visible: showToolBox.value,
-    });
+    name: 'onVote',
+    visible: showToolBox.value,
+  });
+}
+function handleOnCloseContact() {
+  showToolBox.value = false;
 }
-
 </script>
 
 <style lang="scss" scoped>
-.tool-box {
-  position: absolute;
-  bottom: 72px;
-  z-index: 2;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 5px 0;
-  border-radius: 15px;
-  background-color: var(--bg-color-dialog);
-  box-shadow: 0 -8px 30p var(--uikit-color-black-8);
-
-  .tool-box-item {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    width: 100%;
-    padding: 7px 10px;
-    font-size: 12px;
-    white-space: nowrap;
-    cursor: pointer;
-
-    .icon {
-      margin-right: 8px;
-    }
-  }
-
-  .tool-box-item:hover {
-    border-radius: 8px;
-    background-color: var(--list-color-hover);
-  }
+.contact-container {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 11;
+  box-sizing: border-box;
+  width: 100vw;
+  height: auto;
+  background-color: var(--uikit-color-black-8);
 }
 </style>

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

@@ -3,7 +3,7 @@
     <div class="more-title">
       <IconEmail class="email-icon" />
       <div class="more-notice">
-        {{ t('If you have any questions, please email us.') }}
+        {{ t('Vote') }}
       </div>
     </div>
     <div v-if="isZH" class="more-item">
@@ -15,6 +15,9 @@
       <div class="more-content">{{ email }}</div>
       <IconCopy class="copy-icon" @click="onCopy(email)" />
     </div>
+    <div class="contact-container">
+      <slot name="content"></slot>
+    </div>
   </div>
 </template>
 

package/src/TUIRoom/conference.vue

@@ -322,6 +322,7 @@ function resetStore() {
 }
 
 const onVote = (data: { name: string; visible: boolean }) => {
+  console.log(data,"data222")
   emit('on-vote', { code: data.visible, message: 'vote' });
 };
 const onStartRoom = () => {

package/src/TUIRoom/constants/icon.ts

@@ -20,6 +20,8 @@ export enum ICON_NAME {
   ManageMember = 'manage-member',
   More = 'more',
   MoreActive = 'more-active',
+  Vote = 'vote',
+  VoteActive = 'vote-active',
   SettingActive = 'setting-active',
   Setting = 'setting',
   LineArrowUp = 'line-arrow-up',

package/es/components/RoomFooter/voteControl.vue.d.ts

@@ -1,15 +0,0 @@
-declare function __VLS_template(): {
-    content?(_: {}): any;
-};
-declare const __VLS_component: 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>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/es/components/RoomFooter/voteControl.vue.mjs

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