@ndscnj/roomkit-web-vue3 25.11.1916 → 25.12.2316

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';