@ndscnj/roomkit-web-vue3 25.12.23181 → 25.12.24111

package/lib/components/RoomVote/indexPC.vue2.js

@@ -14,6 +14,7 @@ const _hoisted_5 = { class: "item-title" };
 const _hoisted_6 = { class: "more-item" };
 const _hoisted_7 = { class: "item-title" };
 const _hoisted_8 = { class: "more-content" };
+const _hoisted_9 = { class: "contact-container" };
 const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
   __name: "indexPC",
   setup(__props) {
@@ -22,7 +23,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
       return Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
         Vue.createElementVNode("div", _hoisted_2, [
           Vue.createVNode(Vue.unref(uikitBaseComponentVue3.IconEmail), { class: "email-icon" }),
-          Vue.createElementVNode("div", _hoisted_3, Vue.toDisplayString(Vue.unref(t)("If you have any questions, please email us.")), 1)
+          Vue.createElementVNode("div", _hoisted_3, Vue.toDisplayString(Vue.unref(t)("Vote")), 1)
         ]),
         Vue.unref(isZH) ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_4, [
           Vue.createElementVNode("div", _hoisted_5, Vue.toDisplayString(Vue.unref(t)("Join our product discussion group")), 1),
@@ -40,6 +41,9 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
             class: "copy-icon",
             onClick: _cache[0] || (_cache[0] = ($event) => Vue.unref(onCopy)(Vue.unref(email)))
           })
+        ]),
+        Vue.createElementVNode("div", _hoisted_9, [
+          Vue.renderSlot(_ctx.$slots, "content", {}, void 0, true)
         ])
       ]);
     };

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-d9ae22c4"]]);
+const ConferenceMainView = /* @__PURE__ */ _pluginVue_exportHelper.default(conference_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-3b59b436"]]);
 exports.default = ConferenceMainView;

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,25 +3928,45 @@ to {
 }
 .footer .mirror-container .mirror-text[data-v-21a63691] {
   margin-left: 4px;
-}.more-container[data-v-412ed740] {
-  padding: 20px;
+}.show-more-content[data-v-1506794c] {
+  position: absolute;
+  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);
 }
-.more-container .more-title[data-v-412ed740] {
-  display: flex;
-  align-items: center;
+@keyframes popup-1506794c {
+from {
+    bottom: 0;
+}
+to {
+    bottom: 15px;
 }
-.more-container .more-title .email-icon[data-v-412ed740] {
-  color: var(--uikit-color-gray-7);
 }
-.more-container .more-title .more-notice[data-v-412ed740] {
+.control-compent[data-v-1506794c] {
+  display: flex;
+}
+.close[data-v-1506794c] {
+  position: relative;
+  top: 10%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 100%;
-  height: 22px;
-  padding-left: 8px;
-  font-size: 14px;
+  padding: 10px;
+  font-style: normal;
   font-weight: 400;
-  line-height: 22px;
+  line-height: 24px;
+  text-align: center;
+  border-radius: 8px;
   color: var(--text-color-primary);
-}.footer-container[data-v-6b90d75f] {
+  background-color: var(--button-color-secondary-default);
+}.footer-container[data-v-3a373c3a] {
   position: absolute;
   bottom: 0;
   display: flex;
@@ -3960,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%;
@@ -5055,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;
@@ -5074,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;
@@ -5090,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;
@@ -5110,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;
@@ -9148,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;
@@ -9160,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;
@@ -9171,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;
@@ -9196,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/lib/locales/zh-CN.js

@@ -62,7 +62,7 @@ const ZH = {
   me: "我",
   Admin: "管理员",
   RoomOwner: "主持人",
-  Vote: "表决",
+  "Vote": "表决",
   More: "更多",
   "AI Assistant": "AI 助手",
   "AI real-time conference content": "AI 实时会议内容",

package/lib/stores/basic.d.ts

@@ -1,7 +1,7 @@
 import { LAYOUT } from '../constants/render';
 import { TUINetwork } from '../../../node_modules/@tencentcloud/tuiroom-engine-js';
 
-type SideBarType = 'chat' | 'invite' | 'manage-member' | 'more' | 'transfer-leave' | 'apply' | 'aiTranscription' | 'vote' | '';
+type SideBarType = 'chat' | 'invite' | 'manage-member' | 'vote' | 'more' | 'transfer-leave' | 'apply' | 'aiTranscription' | '';
 type SceneType = 'chat' | 'default';
 interface BasicState {
     sdkAppId: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndscnj/roomkit-web-vue3",
-  "version": "25.12.23181",
+  "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,19 +7,26 @@
     >
       <IconAIIcon size="24" />
     </icon-button>
-    {{ sidebarName }}
-    <div @click="toggleToolBox">测试</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>
 
 <script setup lang="ts">
-  import { roomService } from '../../services';
+import { roomService } from '../../services';
 import { defineEmits, ref,computed,watch } from 'vue';
 import { useI18n } from '../../locales';
+import IconButton from '../common/base/IconButton.vue';
+import {
+  IconAIIcon,
+} from '@tencentcloud/uikit-base-component-vue3';
+import roomVote from '../RoomVote';
 const { basicStore } = roomService;
 const isSidebarOpen = computed(() => basicStore.isSidebarOpen);
 const sidebarName = computed(() => basicStore.sidebarName);
@@ -28,40 +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>
-.more-container {
-  padding: 20px;
-
-  .more-title {
-    display: flex;
-    align-items: center;
-
-    .email-icon {
-      color: var(--uikit-color-gray-7);
-    }
-
-    .more-notice {
-      width: 100%;
-      height: 22px;
-      padding-left: 8px;
-      font-size: 14px;
-      font-weight: 400;
-      line-height: 22px;
-      color: var(--text-color-primary);
-    }
-  }
-
+.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/src/TUIRoom/locales/zh-CN.ts

@@ -66,7 +66,7 @@ export default {
   me: '我',
   Admin: '管理员',
   RoomOwner: '主持人',
-  Vote: '表决',
+  'Vote': '表决',
   More: '更多',
   'AI Assistant': 'AI 助手',
   'AI real-time conference content': 'AI 实时会议内容',