@tencentcloud/roomkit-electron-vue3 2.5.0 → 2.6.0

package/src/TUIRoom/components/RoomHeader/RoomInfo/useRoomInfoHooks.ts

@@ -14,24 +14,66 @@ export default function useRoomInfo() {
   const basicStore = useBasicStore();
   const roomStore = useRoomStore();
   const { roomId, isRoomLinkVisible } = storeToRefs(basicStore);
-  const { masterUserId, roomName } = storeToRefs(roomStore);
+  const { masterUserId, roomName, password } = storeToRefs(roomStore);
   const { t } = useI18n();
   const isShowRoomInfo = ref(false);
-  const roomType = computed(() => (roomStore.isFreeSpeakMode ? t('Free Speech Room') : t('On-stage Speaking Room')));
+  const roomType = computed(() =>
+    roomStore.isFreeSpeakMode
+      ? t('Free Speech Room')
+      : t('On-stage Speaking Room')
+  );
   const arrowDirection = ref(false);
   const roomLinkConfig = roomService.getComponentConfig('RoomLink');
 
-  const masterUserName = computed(() => roomStore.getUserName(masterUserId.value) || masterUserId.value);
+  const masterUserName = computed(
+    () => roomStore.getUserName(masterUserId.value) || masterUserId.value
+  );
 
   const isShowRoomInfoTitle = computed(() => masterUserName.value);
 
   const conferenceTitle = computed(() => `${roomName.value}`);
 
   const roomInfoTabList = computed(() => [
-    { id: 1, title: 'Host', content: masterUserName.value, copyLink: '', isShowCopyIcon: false, visible: true },
-    { id: 2, title: 'Room Type', content: roomType.value, copyLink: '', isShowCopyIcon: false, visible: true },
-    { id: 3, title: 'Room ID', content: roomId.value, copyLink: roomId.value, isShowCopyIcon: true, visible: true },
-    { id: 4, title: 'Room Link', content: inviteLink.value, copyLink: inviteLink.value, isShowCopyIcon: true, visible: isRoomLinkVisible.value && roomLinkConfig.visible },
+    {
+      id: 1,
+      title: 'Host',
+      content: masterUserName.value,
+      copyLink: '',
+      isShowCopyIcon: false,
+      visible: true,
+    },
+    {
+      id: 2,
+      title: 'Room Type',
+      content: roomType.value,
+      copyLink: '',
+      isShowCopyIcon: false,
+      visible: true,
+    },
+    {
+      id: 3,
+      title: 'Room ID',
+      content: roomId.value,
+      copyLink: roomId.value,
+      isShowCopyIcon: true,
+      visible: true,
+    },
+    {
+      id: 4,
+      title: 'Room Password',
+      content: password.value,
+      copyLink: password.value,
+      isShowCopyIcon: true,
+      visible: password.value,
+    },
+    {
+      id: 5,
+      title: 'Room Link',
+      content: inviteLink.value,
+      copyLink: inviteLink.value,
+      isShowCopyIcon: true,
+      visible: isRoomLinkVisible.value && roomLinkConfig.visible,
+    },
   ]);
 
   function toggleShowRoomInfoStatus() {

package/src/TUIRoom/components/RoomHeader/UserInfo/index.vue

@@ -1,15 +1,21 @@
 <template>
-  <div v-if="userInfoConfig.visible" ref="userInfoRef" class="user-info-container">
+  <div
+    v-if="userInfoConfig.visible"
+    ref="userInfoRef"
+    class="user-info-container"
+  >
     <div class="user-info-content" @click="handleUserControl">
-      <Avatar class="avatar" :img-src="avatarUrl"></Avatar>
+      <Avatar class="avatar" :img-src="avatarUrl" />
       <div class="name">{{ userName || userId }}</div>
       <svg-icon
         :class="[showUserControl ? 'up-icon' : 'down-icon']"
         :icon="ArrowStrokeSelectDownIcon"
-      ></svg-icon>
+      />
     </div>
     <div v-if="showUserControl" class="user-control-container">
-      <div class="user-control-item-foot" @click="$emit('log-out')">{{ t('Log out') }}</div>
+      <div class="user-control-item-foot" @click="$emit('log-out')">
+        {{ t('Log out') }}
+      </div>
     </div>
   </div>
 </template>
@@ -41,12 +47,14 @@ const {
   closeEditUserNameDialog,
 } = useUserInfo();
 
-const props = withDefaults(defineProps<{
-  userId: string,
-  userName: string,
-  avatarUrl?: string,
-}>(), {
-});
+const props = withDefaults(
+  defineProps<{
+    userId: string;
+    userName: string;
+    avatarUrl?: string;
+  }>(),
+  {}
+);
 
 // /**
 //  * Save the new userName
@@ -67,98 +75,107 @@ const props = withDefaults(defineProps<{
 //   roomStore.setLocalUser({ userName });
 //   closeEditUserNameDialog();
 // }
-
 </script>
 <style lang="scss" scoped>
 .tui-theme-white .user-control-container {
-  --filter-color:
-    drop-shadow(0px 0px 4px rgba(32, 77, 141, 0.03))
+  --filter-color: drop-shadow(0px 0px 4px rgba(32, 77, 141, 0.03))
     drop-shadow(0px 4px 10px rgba(32, 77, 141, 0.06))
     drop-shadow(0px 1px 14px rgba(32, 77, 141, 0.05));
 }
+
 .tui-theme-black .user-control-container {
-  --filter-color:
-    drop-shadow(0px 8px 40px rgba(23, 25, 31, 0.6))
+  --filter-color: drop-shadow(0px 8px 40px rgba(23, 25, 31, 0.6))
     drop-shadow(0px 4px 12px rgba(23, 25, 31, 0.4));
 }
 
 .user-info-container {
   position: relative;
+
   .user-info-content {
     display: flex;
     align-items: center;
     cursor: pointer;
+
     .avatar {
       width: 28px;
       height: 28px;
       border-radius: 50%;
     }
+
     .name {
       max-width: 100px;
       margin-left: 10px;
-      font-size: 16px;
-      white-space: nowrap;
       overflow: hidden;
-      text-overflow: ellipsis;
+      font-size: 16px;
       color: var(--font-color);
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
+
     .down-icon {
       margin-left: 4px;
     }
+
     .up-icon {
       margin-left: 4px;
       transform: rotate(180deg);
     }
   }
+
   .user-control-container {
     position: absolute;
     top: calc(100% + 15px);
     right: 0;
-    padding: 10px;
     min-width: 100px;
-    background: #ffffff;
-    border-radius: 8px;
+    padding: 10px;
+    background: #fff;
     filter: var(--filter-color);
+    border-radius: 8px;
+
     &::before {
-      content: '';
       position: absolute;
-      right: 20px;
       top: -20px;
-      width: 0px;
+      right: 20px;
+      width: 0;
+      content: '';
       border-top: 10px solid transparent;
       border-right: 10px solid transparent;
-      border-bottom: 10px solid #ffffff;
+      border-bottom: 10px solid #fff;
       border-left: 10px solid transparent;
     }
+
     &::after {
-      content: '';
-      width: 100%;
-      height: 20px;
       position: absolute;
-      left: 0px;
       top: -20px;
+      left: 0;
+      width: 100%;
+      height: 20px;
+      content: '';
       background-color: transparent;
     }
 
     .user-control-item-foot,
     .user-control-item-head {
-      text-align: center;
-      color: #4f586b;
+      height: 20px;
       font-size: 14px;
+      color: #4f586b;
+      text-align: center;
       cursor: pointer;
-      height: 20px;
     }
   }
 }
+
 .edit-content {
-  width: 100%;
   display: flex;
   align-items: center;
+  width: 100%;
+
   .edit-name-input {
-    margin-left: 16px;
     flex-grow: 1;
+    margin-left: 16px;
   }
 }
+
 .button {
   margin-left: 12px;
 }

package/src/TUIRoom/components/RoomHeader/UserInfo/useUserInfoHooks.ts

@@ -7,17 +7,17 @@ export default function useUserInfo() {
   const showUserControl = ref(false);
 
   /**
-     * Whether to display the user information operation box
-     *
-    **/
+   * Whether to display the user information operation box
+   *
+   **/
   function handleUserControl() {
     showUserControl.value = !showUserControl.value;
   }
 
   /**
-     * Hide the user information action box
-     *
-    **/
+   * Hide the user information action box
+   *
+   **/
   function hideUserControl(event: Event) {
     if (!userInfoRef.value?.contains(event.target)) {
       showUserControl.value = false;

package/src/TUIRoom/components/RoomHeader/index/InfoControl.vue

@@ -11,7 +11,7 @@
       icon-name="info"
       size="medium"
       @click.stop="handleClickInfoIcon"
-    ></svg-icon>
+    />
     <div ref="infoRef"></div>
   </div>
 </template>
@@ -21,7 +21,7 @@ import { ref, Ref } from 'vue';
 import SvgIcon from '../../common/base/SvgIcon.vue';
 
 const showInfoTab = ref(false);
-const infoRef:Ref<Node | undefined> = ref(undefined);
+const infoRef: Ref<Node | undefined> = ref(undefined);
 
 function handleClickInfoIcon() {
   if (!showInfoTab.value) {
@@ -34,12 +34,15 @@ function handleClickInfoIcon() {
 }
 
 function handleDocumentClick(event: MouseEvent) {
-  if (showInfoTab.value && infoRef.value && !infoRef.value.contains(event.target as Node)) {
+  if (
+    showInfoTab.value &&
+    infoRef.value &&
+    !infoRef.value.contains(event.target as Node)
+  ) {
     document.removeEventListener('click', handleDocumentClick);
     showInfoTab.value = false;
   }
 }
-
 </script>
 
 <style lang="scss" scoped>
@@ -47,69 +50,79 @@ function handleDocumentClick(event: MouseEvent) {
   position: relative;
   width: 20px;
   height: 20px;
+
   .layout-icon {
     cursor: pointer;
   }
+
   .layout-list {
     position: absolute;
     top: 47px;
     right: 0;
+    display: flex;
+    padding: 20px;
     background-color: $toolBarBackgroundColor;
-    box-shadow: 0 1px 10px 0 rgba(0,0,0,0.30);
     border-radius: 4px;
-    padding: 20px;
-    display: flex;
+    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.3);
+
     .layout-item {
+      position: relative;
       width: 180px;
       height: 133px;
       padding: 20px 30px 39px;
+      cursor: pointer;
       background-color: $primaryColor;
-      border-radius: 2px;
       border: 1px solid transparent;
-      cursor: pointer;
-      position: relative;
+      border-radius: 2px;
+
       &:not(:first-child) {
         margin-left: 20px;
       }
+
       &:hover {
         border: 1px solid $primaryHighLightColor;
         border-radius: 2px;
       }
+
       &.checked {
         border: 1px solid $primaryHighLightColor;
         border-radius: 2px;
-        &:after {
-          content: '';
+
+        &::after {
+          position: absolute;
+          top: 0;
+          right: 0;
           display: block;
           width: 20px;
           height: 20px;
+          content: '';
           background-image: url('../../assets/imgs/checked.png');
           background-size: 100% 100%;
-          position: absolute;
-          top: 0;
-          right: 0;
         }
       }
+
       .layout-block-container {
         width: 120px;
         height: 74px;
       }
+
       .layout-title {
+        display: inline-block;
+        width: 100%;
+        margin-top: 10px;
         font-size: 16px;
         font-weight: 400;
         line-height: 24px;
-        display: inline-block;
-        margin-top: 10px;
-        width: 100%;
         text-align: center;
       }
     }
+
     .layout1 {
       .layout-block-container {
         display: flex;
         flex-wrap: wrap;
-        justify-content: space-between;
-        align-content: space-between;
+        place-content: space-between space-between;
+
         .layout-block {
           width: 38px;
           height: 22px;
@@ -117,22 +130,25 @@ function handleDocumentClick(event: MouseEvent) {
         }
       }
     }
+
     .layout2 {
       .layout-block-container {
         display: flex;
         justify-content: space-between;
+
         .left-container {
           width: 90px;
           height: 74px;
           background-color: $layoutBlockColor;
         }
+
         .right-container {
-          width: 27px;
-          height: 74px;
           display: flex;
           flex-wrap: wrap;
-          justify-content: space-between;
-          align-content: space-between;
+          place-content: space-between space-between;
+          width: 27px;
+          height: 74px;
+
           > div {
             width: 27px;
             height: 16px;
@@ -141,24 +157,27 @@ function handleDocumentClick(event: MouseEvent) {
         }
       }
     }
+
     .layout3 {
       .layout-block-container {
         display: flex;
         flex-wrap: wrap;
         align-content: space-between;
+
         .top-container {
-          width: 120px;
-          height: 16px;
           display: flex;
           flex-wrap: wrap;
-          justify-content: space-between;
-          align-content: space-between;
+          place-content: space-between space-between;
+          width: 120px;
+          height: 16px;
+
           > div {
             width: 28px;
             height: 16px;
             background-color: $layoutBlockColor;
           }
         }
+
         .bottom-container {
           width: 120px;
           height: 55px;