@ndscnj/roomkit-web-vue3 25.11.1917 → 25.12.2316

package/lib/conference.vue.d.ts

@@ -27,6 +27,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     resetStore: typeof resetStore;
     t: any;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "on-vote": (...args: any[]) => void;
     "on-log-out": (...args: any[]) => void;
     "on-create-room": (...args: any[]) => void;
     "on-enter-room": (...args: any[]) => void;
@@ -40,6 +41,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
 }>, {
     displayMode: string;
 }>>> & Readonly<{
+    "onOn-vote"?: ((...args: any[]) => any) | undefined;
     "onOn-log-out"?: ((...args: any[]) => any) | undefined;
     "onOn-create-room"?: ((...args: any[]) => any) | undefined;
     "onOn-enter-room"?: ((...args: any[]) => any) | undefined;

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

package/lib/conference.vue2.js

@@ -40,7 +40,8 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
     "on-destroy-room",
     "on-kicked-out-of-room",
     "on-kicked-off-line",
-    "on-userSig-expired"
+    "on-userSig-expired",
+    "on-vote"
   ],
   setup(__props, { expose: __expose, emit: __emit }) {
     const { theme } = uikitBaseComponentVue3.useUIKit();
@@ -217,6 +218,9 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
     function resetStore() {
       roomService.roomService.resetStore();
     }
+    const onVote = (data) => {
+      emit("on-vote", { code: data.visible, message: "vote" });
+    };
     const onStartRoom = () => {
       isShowLoading.value = false;
       emit("on-create-room", { code: 0, message: "create room" });
@@ -269,7 +273,8 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
         ]),
         Vue.withDirectives(Vue.createVNode(Vue.unref(index$2.default), {
           class: "footer",
-          onShowOverlay: handleShowOverlay
+          onShowOverlay: handleShowOverlay,
+          onOnVote: onVote
         }, null, 512), [
           [Vue.vShow, Vue.unref(showRoomTool)]
         ]),

package/lib/index.js

@@ -3928,7 +3928,25 @@ to {
 }
 .footer .mirror-container .mirror-text[data-v-21a63691] {
   margin-left: 4px;
-}.footer-container[data-v-203d11fc] {
+}.more-container[data-v-7493ac70] {
+  padding: 20px;
+}
+.more-container .more-title[data-v-7493ac70] {
+  display: flex;
+  align-items: center;
+}
+.more-container .more-title .email-icon[data-v-7493ac70] {
+  color: var(--uikit-color-gray-7);
+}
+.more-container .more-title .more-notice[data-v-7493ac70] {
+  width: 100%;
+  height: 22px;
+  padding-left: 8px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+  color: var(--text-color-primary);
+}.footer-container[data-v-28ae2921] {
   position: absolute;
   bottom: 0;
   display: flex;
@@ -3942,25 +3960,25 @@ to {
   background-color: var(--bg-color-topbar);
   box-shadow: 0 -8px 30px var(--uikit-color-black-8);
 }
-.footer-container .left-container[data-v-203d11fc] {
+.footer-container .left-container[data-v-28ae2921] {
   display: flex;
   align-items: center;
   height: 100%;
 }
-.footer-container .left-container .left-container-item[data-v-203d11fc]:not(:first-child) {
+.footer-container .left-container .left-container-item[data-v-28ae2921]:not(:first-child) {
   margin-left: 1rem;
 }
-.footer-container .center-container[data-v-203d11fc] {
+.footer-container .center-container[data-v-28ae2921] {
   position: relative;
   display: flex;
   align-items: center;
   height: 100%;
   margin: 0 auto;
 }
-.footer-container .center-container .center-container-item[data-v-203d11fc]:not(:first-child) {
+.footer-container .center-container .center-container-item[data-v-28ae2921]:not(:first-child) {
   margin-left: 16px;
 }
-.footer-container .right-container[data-v-203d11fc] {
+.footer-container .right-container[data-v-28ae2921] {
   display: flex;
   align-items: center;
   height: 100%;
@@ -8977,7 +8995,7 @@ body, html {
 }
 .tui-room :not([class|=el]) {
   transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
-}.tui-room[data-v-c5f5a591] {
+}.tui-room[data-v-dc8a7460] {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -8989,7 +9007,7 @@ body, html {
   text-align: left;
   background-color: var(--bg-color-topbar);
 }
-.tui-room .header[data-v-c5f5a591] {
+.tui-room .header[data-v-dc8a7460] {
   position: absolute;
   top: 0;
   left: 0;
@@ -9000,20 +9018,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-c5f5a591] {
+.tui-room .content[data-v-dc8a7460] {
   position: absolute;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: var(--bg-color-topbar);
 }
-.tui-room.tui-room-h5[data-v-c5f5a591] {
+.tui-room.tui-room-h5[data-v-dc8a7460] {
   width: 100%;
   min-width: 350px;
   height: 100%;
   min-height: 525px;
 }
-#roomContainer.chat-room[data-v-c5f5a591] {
+#roomContainer.chat-room[data-v-dc8a7460] {
   position: absolute;
   top: 0;
   right: 0;
@@ -9025,8 +9043,8 @@ body, html {
   margin: auto;
   border-radius: 10px;
 }
-#roomContainer.tui-room-h5[data-v-c5f5a591],
-#roomContainer .chat-room[data-v-c5f5a591] {
+#roomContainer.tui-room-h5[data-v-dc8a7460],
+#roomContainer .chat-room[data-v-dc8a7460] {
   width: 100%;
   height: 100%;
 }.user-info-container[data-v-9e9aff53] {

package/lib/locales/en-US.d.ts

@@ -63,6 +63,7 @@ declare const _default: {
     RoomOwner: string;
     Me: string;
     me: string;
+    Vote: string;
     More: string;
     'AI Assistant': string;
     'AI real-time conference content': string;

package/lib/locales/en-US.js

@@ -65,6 +65,7 @@ const EN = {
   RoomOwner: "RoomOwner",
   Me: "Me",
   me: "me",
+  "Vote": "Vote",
   More: "More",
   "AI Assistant": "AI Assistant",
   "AI real-time conference content": "AI real-time conference content",

package/lib/locales/zh-CN.d.ts

@@ -60,6 +60,7 @@ declare const _default: {
     me: string;
     Admin: string;
     RoomOwner: string;
+    Vote: string;
     More: string;
     'AI Assistant': string;
     'AI real-time conference content': string;

package/lib/locales/zh-CN.js

@@ -62,6 +62,7 @@ const ZH = {
   me: "我",
   Admin: "管理员",
   RoomOwner: "主持人",
+  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' | '';
+type SideBarType = 'chat' | 'invite' | 'manage-member' | 'more' | 'transfer-leave' | 'apply' | 'aiTranscription' | 'vote' | '';
 type SceneType = 'chat' | 'default';
 interface BasicState {
     sdkAppId: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndscnj/roomkit-web-vue3",
-  "version": "25.11.1917",
+  "version": "25.12.2316",
   "main": "./lib/index.js",
   "module": "./es/index.mjs",
   "types": "./es/index.d.ts",

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

@@ -51,6 +51,10 @@
         class="center-container-item"
         @click="handleControlClick('MasterApplyControl')"
       />
+      <voteControl
+        class="center-container-item"
+        @click="handleControlClick('voteControl')"
+      />
       <more-control
         class="center-container-item"
         @click="handleControlClick('moreControl')"
@@ -93,7 +97,7 @@ 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 useRoomFooter from './useRoomFooterHooks';
 import { isElectron } from '../../../utils/environment';
 const { roomStore, isMaster, isAdmin, isAudience } = useRoomFooter();

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

@@ -0,0 +1,65 @@
+<template>
+  <div class="more-container">
+    <icon-button
+      :is-active="sidebarName === 'vote'"
+      :title="t('Vote')"
+      @click-icon="toggleToolBox"
+    >
+      <IconAIIcon size="24" />
+    </icon-button>
+    测试
+    <div class="tool-box" v-if="!isSidebarOpen && showToolBox">
+      123
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { roomService } from '../../services';
+import { defineEmits, ref,computed,watch } from 'vue';
+import { useI18n } from '../../locales';
+const { basicStore } = roomService;
+const isSidebarOpen = computed(() => basicStore.isSidebarOpen);
+const sidebarName = computed(() => basicStore.sidebarName);
+const { t } = useI18n();
+const showToolBox = ref(false);
+watch(isSidebarOpen, newValue => {
+  showToolBox.value = newValue && false;
+});
+const emit = defineEmits(['on-vote']);
+function toggleToolBox() {
+  showToolBox.value = !showToolBox.value;
+  emit('on-vote', {
+      name: 'onVote',
+      visible: showToolBox.value,
+    });
+}
+
+</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);
+    }
+  }
+
+}
+</style>

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

@@ -8,6 +8,7 @@
       :size="400"
     >
       <chat v-if="sidebarName == 'chat'" />
+      <room-vote v-if="sidebarName == 'vote'" />
       <room-more v-if="sidebarName == 'more'" />
       <manage-member v-if="sidebarName == 'manage-member'" />
       <AITranscription v-if="sidebarName == 'aiTranscription'" />

package/src/TUIRoom/components/RoomSidebar/useSideBarHooks.ts

@@ -31,6 +31,9 @@ export default function useSideBar() {
       case 'invite':
         sidebarTitle = t('Invite');
         break;
+      case 'vote':
+      sidebarTitle = `${t('Vote')}`;
+        break;
       case 'more':
         sidebarTitle = t('More');
         break;

package/src/TUIRoom/components/RoomVote/index.ts

@@ -0,0 +1,7 @@
+import indexH5 from './indexH5.vue';
+import indexPC from './indexPC.vue';
+import { isMobile } from '../../utils/environment';
+
+const Index = isMobile ? indexH5 : indexPC;
+
+export default Index;

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

@@ -0,0 +1,141 @@
+<template>
+  <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>
+span {
+  padding-right: 5px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 17px;
+}
+
+.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);
+
+  @keyframes popup {
+    from {
+      transform: scaleY(0);
+      transform-origin: bottom;
+    }
+
+    to {
+      transform: scaleY(1);
+      transform-origin: bottom;
+    }
+  }
+
+  .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 {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 90%;
+    height: 15%;
+    padding: 0 0 0 25px;
+    margin-bottom: 10px;
+  }
+
+  .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);
+  }
+
+  .contact-content {
+    width: 62%;
+    overflow: hidden;
+    font-size: 14px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--text-color-secondary);
+  }
+
+  .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/components/RoomVote/indexPC.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="more-container">
+    <div class="more-title">
+      <IconEmail class="email-icon" />
+      <div class="more-notice">
+        {{ t('If you have any questions, please email us.') }}
+      </div>
+    </div>
+    <div v-if="isZH" class="more-item">
+      <div class="item-title">{{ t('Join our product discussion group') }}</div>
+      <TUIButton @click="handleClick">{{ t('Join now') }}</TUIButton>
+    </div>
+    <div class="more-item">
+      <div class="item-title">{{ t('Our email address') }}</div>
+      <div class="more-content">{{ email }}</div>
+      <IconCopy class="copy-icon" @click="onCopy(email)" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  TUIButton,
+  IconCopy,
+  IconEmail,
+} from '@tencentcloud/uikit-base-component-vue3';
+import useRoomMoreControl from './useRoomMoreHooks';
+
+const { t, onCopy, handleClick, email, isZH } = useRoomMoreControl();
+</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);
+    }
+  }
+
+  .more-item {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+
+    &:not(:first-child) {
+      margin-top: 20px;
+
+      .item-title {
+        width: 100%;
+        padding-bottom: 8px;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 22px;
+        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);
+      }
+
+      .copy-icon {
+        position: absolute;
+        top: 45px;
+        right: 10px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        color: var(--text-color-link);
+      }
+    }
+  }
+}
+</style>

package/src/TUIRoom/components/RoomVote/useRoomMoreHooks.ts

@@ -0,0 +1,47 @@
+import { computed } from 'vue';
+import { TUIToast, TOAST_TYPE } from '@tencentcloud/uikit-base-component-vue3';
+import { useI18n } from '../../locales';
+import { clipBoard } from '../../utils/utils';
+import i18n from '../../locales/index';
+
+export default function useRoomMoreHooks() {
+  const { t } = useI18n();
+
+  const groupNumber = '770645461';
+  const email = 'chaooliang@tencent.com';
+
+  async function onCopy(value: string | number) {
+    try {
+      await clipBoard(value);
+      TUIToast({
+        message: t('Copied successfully'),
+        type: TOAST_TYPE.SUCCESS,
+      });
+    } catch (error) {
+      TUIToast({
+        message: t('Copied failure'),
+        type: TOAST_TYPE.ERROR,
+      });
+    }
+  }
+
+  const isZH = computed(() => i18n.global.locale.value === 'zh-CN');
+
+  const contactContentList = [
+    { id: 1, title: 'group chat', content: groupNumber, copyLink: groupNumber },
+    { id: 2, title: 'Email', content: email, copyLink: email },
+  ];
+
+  const handleClick = () => {
+    window.open('https://zhiliao.qq.com/s/c5GY7HIM62CK', '_blank');
+  };
+
+  return {
+    t,
+    onCopy,
+    contactContentList,
+    email,
+    handleClick,
+    isZH,
+  };
+}

package/src/TUIRoom/conference.vue

@@ -16,6 +16,7 @@
       v-show="showRoomTool"
       class="footer"
       @show-overlay="handleShowOverlay"
+      @on-vote="onVote"
     />
     <room-sidebar />
     <room-setting />
@@ -127,6 +128,7 @@ const emit = defineEmits([
   'on-kicked-out-of-room',
   'on-kicked-off-line',
   'on-userSig-expired',
+  'on-vote',
 ]);
 
 const basicStore = useBasicStore();
@@ -315,6 +317,9 @@ function resetStore() {
   roomService.resetStore();
 }
 
+const onVote = (data: { name: string; visible: boolean }) => {
+  emit('on-vote', { code: data.visible, message: 'vote' });
+};
 const onStartRoom = () => {
   isShowLoading.value = false;
   emit('on-create-room', { code: 0, message: 'create room' });

package/src/TUIRoom/locales/en-US.ts

@@ -72,6 +72,7 @@ export default {
   RoomOwner: 'RoomOwner',
   Me: 'Me',
   me: 'me',
+  'Vote': 'Vote',
   More: 'More',
   'AI Assistant': 'AI Assistant',
   'AI real-time conference content': 'AI real-time conference content',

package/src/TUIRoom/locales/zh-CN.ts

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

package/src/TUIRoom/stores/basic.ts

@@ -13,6 +13,7 @@ type SideBarType =
   | 'transfer-leave'
   | 'apply'
   | 'aiTranscription'
+  | 'vote'
   | '';
 type SceneType = 'chat' | 'default';