@tencentcloud/roomkit-electron-vue3 2.4.2 → 2.6.0

package/src/TUIRoom/components/RoomMore/index.vue

@@ -1,8 +1,10 @@
 <template>
   <div class="more-container">
     <div class="more-title">
-      <svg-icon class="email-icon" :icon="EmailIcon"></svg-icon>
-      <div class="more-notice">{{ t('If you have any questions, please email us.') }}</div>
+      <svg-icon class="email-icon" :icon="EmailIcon" />
+      <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>
@@ -13,8 +15,7 @@
     <div class="more-item">
       <div class="item-title">{{ t('Our email address') }}</div>
       <div class="more-content">{{ email }}</div>
-      <svg-icon class="copy-icon" :icon="CopyIcon" @click="onCopy(email)">
-      </svg-icon>
+      <svg-icon class="copy-icon" :icon="CopyIcon" @click="onCopy(email)" />
     </div>
   </div>
 </template>
@@ -26,76 +27,84 @@ import CopyIcon from '../common/icons/CopyIcon.vue';
 import EmailIcon from '../common/icons/EmailIcon.vue';
 import TuiButton from '../common/base/Button.vue';
 
-
 const { t, onCopy, handleClick, email, isZH } = useRoomMoreControl();
 </script>
 
 <style lang="scss" scoped>
 .more-container {
   padding: 20px;
+
   .more-title {
     display: flex;
+
     .email-icon {
       color: #7c85a6;
     }
+
     .more-notice {
-      font-size: 14px;
       width: 100%;
       height: 22px;
-      line-height: 22px;
+      padding-left: 8px;
+      font-size: 14px;
       font-weight: 400;
+      line-height: 22px;
       color: var(--font-color-5);
-      padding-left: 8px;
     }
   }
+
   .more-item {
+    position: relative;
     display: flex;
     flex-direction: column;
-    position: relative;
+
     &:not(:first-child) {
       margin-top: 20px;
+
       .item-title {
+        width: 100%;
+        padding-bottom: 8px;
         font-size: 14px;
         font-weight: 400;
         line-height: 22px;
         color: var(--font-color-5);
-        width: 100%;
-        padding-bottom: 8px;
       }
+
       .join-button {
         height: 42px;
         font-weight: 600;
       }
+
       .more-content {
-        flex: 1;
-        background-color: var(--background-color-7);
-        border-radius: 8px;
-        border: 1px solid var(--border-color);
+        position: relative;
         box-sizing: border-box;
-        color: var(--font-color-6);
         display: inline-block;
-        font-size: 14px;
+        flex: 1;
         height: 42px;
-        font-weight: 500;
-        line-height: 22px;
-        outline: none;
         padding: 10px 30px 10px 16px;
-        transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
         overflow: hidden;
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 22px;
+        color: var(--font-color-6);
         text-overflow: ellipsis;
         white-space: nowrap;
-        position: relative;
+        background-color: var(--background-color-7);
+        border: 1px solid var(--border-color);
+        border-radius: 8px;
+        outline: none;
+        transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
       }
+
       .copy-icon {
+        position: absolute;
+        top: 36px;
+        right: 0;
         display: flex;
         align-items: center;
         justify-content: center;
         width: 32px;
         height: 32px;
         cursor: pointer;
-        position: absolute;
-        top: 36px;
-        right: 0;
       }
     }
   }

package/src/TUIRoom/components/RoomSetting/index.vue

@@ -1,16 +1,27 @@
 <template>
-  <div v-if="showSettingDialog" class="overlay-container overlay" @click="handleOverlayClick">
+  <div
+    v-if="showSettingDialog"
+    class="overlay-container overlay"
+    @click="handleOverlayClick"
+  >
     <div class="setting-container">
       <div class="setting-header">
         <span class="setting-title">{{ t('Settings') }}</span>
-        <svg-icon class="close-icon" :icon="CloseIcon" @click="handleCloseSettingDialog" />
+        <svg-icon
+          class="close-icon"
+          :icon="CloseIcon"
+          @click="handleCloseSettingDialog"
+        />
       </div>
       <div class="setting-body">
         <div class="setting-tabs">
           <div
             v-for="(item, index) in settingTabsTitleList"
             :key="index"
-            :class="['tabs-title', `${activeSettingTab === item.value ? 'active' : ''}`]"
+            :class="[
+              'tabs-title',
+              `${activeSettingTab === item.value ? 'active' : ''}`,
+            ]"
             @click="handleUpdateActiveTab(item.value)"
           >
             {{ item.label }}
@@ -23,13 +34,13 @@
             class="setting-tab"
             :mode="SettingMode.DETAIL"
             theme="white"
-          ></audio-setting-tab>
+          />
           <video-setting-tab
             v-else-if="activeSettingTab === 'video'"
             class="setting-tab"
             :with-preview="true"
             theme="white"
-          ></video-setting-tab>
+          />
         </div>
       </div>
     </div>
@@ -79,94 +90,101 @@ function handleOverlayClick(event: any) {
 .overlay-container {
   position: fixed;
   top: 0;
+  right: 0;
   bottom: 0;
   left: 0;
-  right: 0;
   z-index: 2007;
+
   &.overlay {
     background-color: rgba(15, 16, 20, 0.6);
   }
 }
 
 .setting-container {
-  width: 610px;
-  height: 590px;
   position: absolute;
   top: 50%;
   left: 50%;
-  transform: translate(-50%, -50%);
   display: flex;
-  background-color: #ffffff;
-  border-radius: 20px;
   flex-direction: column;
+  width: 610px;
+  height: 590px;
+  background-color: #fff;
+  border-radius: 20px;
+  transform: translate(-50%, -50%);
 
   .setting-header {
-    height: 64px;
-    border-bottom: 1px solid rgba(235, 240, 247, 1);
-    box-shadow: 0px 7px 10px -5px rgba(230, 236, 245, 0.8);
+    position: relative;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    position: relative;
+    height: 64px;
+    border-bottom: 1px solid rgba(235, 240, 247, 1);
+    box-shadow: 0 7px 10px -5px rgba(230, 236, 245, 0.8);
+
     .close-icon {
-      width: 32px;
-      height: 32px;
       position: absolute;
       top: 50%;
-      transform: translateY(-50%);
       right: 20px;
       display: flex;
-      justify-content: center;
       align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
       color: #4f586b;
       cursor: pointer;
+      transform: translateY(-50%);
     }
+
     .setting-title {
       display: inline-block;
-      font-weight: 500;
-      line-height: 24px;
-      color: #000;
       padding: 20px 0 20px 24px;
       font-size: 16px;
       font-style: normal;
       font-weight: 600;
       line-height: 24px;
+      color: #000;
     }
   }
+
   .setting-body {
-    height: 100%;
     display: flex;
+    height: 100%;
+
     .setting-tabs {
       width: 170px;
-      background-color: #f0f3fa;
       padding-top: 7px;
+      background-color: #f0f3fa;
       border-bottom-left-radius: 10px;
 
       .tabs-title {
+        position: relative;
         width: 100%;
         height: 36px;
         padding-left: 32px;
-        font-weight: 400;
         font-size: 14px;
-        color: #4f586b;
+        font-weight: 400;
         line-height: 36px;
-        position: relative;
+        color: #4f586b;
         cursor: pointer;
+
         &.active {
-          background-color: #1c66e5;
-          color: #fff;
           font-weight: 400;
+          color: #fff;
+          background-color: #1c66e5;
         }
       }
     }
+
     .divide-line {
       width: 1px;
       height: 100%;
       background: var(--divide-line-color-setting);
     }
+
     .setting-content {
       flex-grow: 1;
       padding: 16px 30px;
+
       .setting-tab {
         width: 100%;
       }

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

@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="sidebar-container"
-  >
+  <div class="sidebar-container">
     <Drawer
       v-model="isSidebarOpen"
       :modal="false"
@@ -9,10 +7,9 @@
       :before-close="handleClose"
       :size="400"
     >
-      <chat v-if="sidebarName == 'chat'"></chat>
-      <room-invite v-if="sidebarName == 'invite'"></room-invite>
-      <room-more v-if="sidebarName == 'more'"></room-more>
-      <manage-member v-if="sidebarName == 'manage-member'"></manage-member>
+      <chat v-if="sidebarName == 'chat'" />
+      <room-more v-if="sidebarName == 'more'" />
+      <manage-member v-if="sidebarName == 'manage-member'" />
     </Drawer>
   </div>
 </template>
@@ -21,17 +18,9 @@
 import Chat from '../Chat/index.vue';
 import Drawer from '../common/base/Drawer.vue';
 import useSideBar from './useSideBarHooks';
-import RoomInvite from '../RoomInvite/index.vue';
 import ManageMember from '../ManageMember/index.vue';
 import RoomMore from '../RoomMore/index.vue';
-const {
-  isSidebarOpen,
-  title,
-  handleClose,
-  sidebarName,
-} = useSideBar();
-
+const { isSidebarOpen, title, handleClose, sidebarName } = useSideBar();
 </script>
 
-<style lang="scss">
-</style>
+<style lang="scss"></style>

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

@@ -13,11 +13,14 @@ export default function useSideBar() {
 
   const chatStore = useChatStore();
   const basicStore = useBasicStore();
-  const { sdkAppId, isSidebarOpen, sidebarName } = storeToRefs(basicStore);
+  const { sdkAppId, isSidebarOpen, sidebarName, roomId } =
+    storeToRefs(basicStore);
   const roomStore = useRoomStore();
   const { userNumber } = storeToRefs(roomStore);
 
-  const showSideBar = computed(() => isSidebarOpen.value && sidebarName.value !== 'transfer-leave');
+  const showSideBar = computed(
+    () => isSidebarOpen.value && sidebarName.value !== 'transfer-leave'
+  );
   const title = computed((): string => {
     let sidebarTitle = '';
     switch (sidebarName.value) {
@@ -53,8 +56,12 @@ export default function useSideBar() {
     if (!options || !options.data) {
       return;
     }
+    const currentConversationId = `GROUP${roomId.value}`;
     options.data.forEach((message: any) => {
-      if (message.type === TencentCloudChat.TYPES.MSG_TEXT) {
+      if (
+        message.conversationID === currentConversationId &&
+        message.type === TencentCloudChat.TYPES.MSG_TEXT
+      ) {
         if (!basicStore.isSidebarOpen || basicStore.sidebarName !== 'chat') {
           // eslint-disable-next-line no-plusplus
           chatStore.updateUnReadCount(++chatStore.unReadCount);
@@ -66,7 +73,6 @@ export default function useSideBar() {
   let tim = roomEngine.instance?.getTIM();
   tim?.on(TencentCloudChat.EVENT.MESSAGE_RECEIVED, onReceiveMessage);
 
-
   watch(sdkAppId, () => {
     if (!tim && sdkAppId.value) {
       tim = TencentCloudChat.create({ SDKAppID: basicStore.sdkAppId });
@@ -85,7 +91,5 @@ export default function useSideBar() {
     sidebarName,
     handleClose,
     showSideBar,
-  }
-  ;
+  };
 }
-

package/src/TUIRoom/components/ScheduleConference/ConferenceDetail.vue

@@ -0,0 +1,163 @@
+<template>
+  <div :class="['detail-container', isMobile ? 'h5' : '']">
+    <template v-for="(item, index) in props.scheduleRoomDetailList">
+      <div v-if="item.isVisible" :class="['detail-content']" :key="index">
+        <span class="detail-title">{{ t(item.title) }}</span>
+        <span class="detail-info">
+          <span class="detail-item" :title="item.content">{{
+            item.content
+          }}</span>
+          <span
+            v-if="item.isShowCopyIcon"
+            class="copy-container"
+            @click="onCopy(item.content)"
+          >
+            <svg-icon class="copy" :icon="copyIcon" />
+          </span>
+          <div
+            v-if="item.isShowStatus"
+            :class="[
+              'detail-status',
+              getStatusTextAndClass(item.status).className,
+            ]"
+          >
+            {{ t(getStatusTextAndClass(item.status).text) }}
+          </div>
+        </span>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps } from 'vue';
+import useRoomInfo from '../../components/RoomHeader/RoomInfo/useRoomInfoHooks';
+import copyIcon from '../common/icons/CopyIcon.vue';
+import SvgIcon from '../common/base/SvgIcon.vue';
+import { isMobile } from '../../utils/environment';
+import {
+  TUIConferenceStatus,
+  TUIConferenceInfo,
+} from '@tencentcloud/tuiroom-engine-electron';
+import { useI18n } from '../../locales';
+const { t } = useI18n();
+
+type StatusMapType = {
+  [key: number]: {
+    text: string;
+    className: string;
+  };
+};
+
+const statusMap: StatusMapType = {
+  [TUIConferenceStatus.kConferenceStatusRunning]: {
+    text: 'Ongoing',
+    className: 'status-running',
+  },
+};
+const props = defineProps<{
+  conferenceInfo: TUIConferenceInfo;
+  scheduleRoomDetailList: {
+    title: string;
+    content: string;
+    isShowCopyIcon: boolean;
+    status: TUIConferenceStatus | null;
+    isShowStatus: boolean;
+    isVisible: boolean;
+  }[];
+}>();
+const { onCopy } = useRoomInfo();
+
+const getStatusTextAndClass = (status?: TUIConferenceStatus | null) => {
+  if (!status) return { text: '', className: '' };
+  return statusMap[status] || { text: '', className: '' };
+};
+</script>
+
+<style scoped lang="scss">
+.detail-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.detail-content {
+  display: flex;
+  align-items: stretch;
+  min-width: 300px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  color: #4f586b;
+
+  .detail-title {
+    width: 84px;
+    margin-right: 12px;
+    color: #2b2e38;
+  }
+
+  .detail-info {
+    display: flex;
+    flex: 1;
+    flex-direction: row;
+    align-items: center;
+    overflow: auto;
+    text-wrap: nowrap;
+    white-space: nowrap;
+  }
+
+  .detail-item {
+    max-width: 360px;
+    overflow: hidden;
+    font-weight: 500;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .copy-container {
+    display: flex;
+    margin-left: 6px;
+    color: var(--active-color-2);
+    cursor: pointer;
+
+    .copy {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  .detail-status {
+    margin-left: 10px;
+  }
+}
+
+.h5.detail-container {
+  padding: 16px 5%;
+
+  .detail-content {
+    font-size: 16px;
+    font-weight: 400;
+  }
+
+  .detail-info {
+    justify-content: flex-end;
+    color: rgba(43, 46, 56, 0.7);
+  }
+
+  .detail-item {
+    font-weight: 400;
+  }
+}
+
+.status-not-start {
+  color: var(--font-color-10);
+}
+
+.status-running {
+  color: var(--active-color-1);
+}
+
+.status-finished {
+  color: #b2bbd1;
+}
+</style>