@tencentcloud/roomkit-electron-vue3 2.8.2 → 2.9.0

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

@@ -2,7 +2,6 @@
   <div class="container">
     <TuiSelect
       v-model="selectedTime"
-      theme="white"
       :teleported="false"
       :custom-select-content-style="{ 'font-weight': 400 }"
       :value="selectedTime"
@@ -11,7 +10,6 @@
       <TuiOption
         v-for="time in timeOptions"
         :key="time.value"
-        theme="white"
         :value="time.value"
         :label="time.label"
         :custom-option-content-style="{ 'font-weight': 400 }"

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

@@ -80,11 +80,11 @@ const scheduleInviteList = computed(() => {
     font-size: 14px;
     font-weight: 400;
     line-height: 20px;
-    color: #4f586b;
 
     .invite-member-title {
       min-width: 80px;
       margin-right: 10px;
+      color: var(--text-color-primary);
     }
 
     .invite-member-content {
@@ -93,6 +93,7 @@ const scheduleInviteList = computed(() => {
       font-weight: 500;
       text-overflow: ellipsis;
       white-space: nowrap;
+      color: var(--text-color-secondary);
     }
 
     .copy {
@@ -100,8 +101,8 @@ const scheduleInviteList = computed(() => {
       min-width: 20px;
       height: 20px;
       margin-left: 8px;
-      color: var(--active-color-1);
       cursor: pointer;
+      color: var(--text-color-link);
     }
   }
 }
@@ -110,7 +111,7 @@ const scheduleInviteList = computed(() => {
   .invite-member-title {
     font-size: 14px;
     font-weight: 400;
-    color: #8f9ab2;
+    color: var(--text-color-secondary);
   }
 
   .invite-member-container {

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

@@ -85,7 +85,7 @@ const handleEdit = () => emit('edit');
   flex-direction: column;
   width: 100%;
   height: 100%;
-  background-color: #f8f9fb;
+  background-color: var(--bg-color-topbar);
 
   .container-header {
     display: flex;
@@ -94,9 +94,9 @@ const handleEdit = () => emit('edit');
     padding: 5%;
     font-size: 16px;
     font-weight: 500;
-    color: #2b2e38;
     text-align: center;
-    background-color: #fff;
+    color: var(--text-color-primary);
+    background-color: var(--bg-color-topbar);
 
     .container-header-back {
       flex: 1;
@@ -111,8 +111,8 @@ const handleEdit = () => emit('edit');
 
     .container-header-edit {
       flex: 1;
-      color: #1c66e5;
       text-align: right;
+      color: var(--text-color-link);
     }
   }
 

package/src/TUIRoom/components/ScheduleConference/ScheduleConferencePanel/index.vue

@@ -11,7 +11,6 @@
           <TuiInput
             :model-value="form.roomName"
             @input="form.roomName = $event"
-            theme="white"
             class="form-value"
             :placeholder="t('please enter the room name')"
             maxlength=""
@@ -22,7 +21,6 @@
           <div class="form-value">
             <tui-select
               v-model="form.roomMode"
-              theme="white"
               class="select"
               :teleported="false"
               :popper-append-to-body="false"
@@ -31,7 +29,6 @@
               <tui-option
                 v-for="item in roomTypeList"
                 :key="item.value"
-                theme="white"
                 :value="item.value"
                 :label="t(item.label)"
                 :custom-option-content-style="{ 'font-weight': 400 }"
@@ -148,7 +145,6 @@
               v-if="passwordChecked"
               :model-value="form.password"
               @input="form.password = $event"
-              theme="white"
               class="form-value"
               style="margin-top: 8px"
               :placeholder="t('Enter 6-digit password')"
@@ -681,7 +677,7 @@ const cancel = () => {
       min-width: 100px;
       font-size: 14px;
       font-weight: 400;
-      color: #4f586b;
+      color: var(--text-color-secondary);
     }
 
     .form-value {
@@ -692,7 +688,7 @@ const cancel = () => {
       font-size: 14px;
       font-weight: 400;
       line-height: 42px;
-      color: #0f1014;
+      color: var(--text-color-secondary);
 
       .search-user {
         height: 42px;
@@ -711,7 +707,7 @@ const cancel = () => {
         }
 
         &-item:hover {
-          color: #409eff;
+          color: var(--uikit-color-theme-5);
         }
       }
 
@@ -732,7 +728,7 @@ const cancel = () => {
       }
 
       .select-attendees:hover {
-        color: var(--active-color-1);
+        color: var(--text-color-link);
       }
 
       .select-search-result-item {
@@ -762,7 +758,7 @@ const cancel = () => {
           padding: 2px 8px;
           overflow: hidden;
           line-height: normal;
-          background-color: #e3f0fd;
+          background-color: var(--bg-color-bubble-own);
           border-radius: 4px;
 
           &-avatar {
@@ -784,7 +780,7 @@ const cancel = () => {
 
           &-remove {
             margin-left: auto;
-            color: #b3acac;
+            color: var(--uikit-color-gray-7);
             cursor: pointer;
           }
         }
@@ -820,7 +816,7 @@ const cancel = () => {
       width: 100%;
 
       .form-title {
-        color: #0f1014;
+        color: var(--text-color-secondary);
       }
     }
   }
@@ -845,7 +841,7 @@ const cancel = () => {
   gap: 20px;
 
   .invite-member-title {
-    color: #4f586b;
+    color: var(--text-color-secondary);
   }
 
   .invite-member-item {
@@ -853,9 +849,9 @@ const cancel = () => {
     justify-content: space-between;
     padding: 10px 16px;
     margin-top: 8px;
-    color: #0f1014;
-    background: #f9fafc;
-    border: 1px solid #e4e8ee;
+    color: var(--text-color-primary);
+    background: var(--uikit-color-white-2);
+    border: 1px solid var(--uikit-color-white-2);
     border-radius: 8px;
 
     .copy {

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

@@ -92,8 +92,6 @@
       <div class="room-detail h5" v-if="isMobile">
         <div class="detail-footer">
           <tui-button
-            type="primary"
-            :round="false"
             plain
             class="footer-button"
             :custom-style="{ width: '100%', padding: '10px', fontSize: '16px' }"
@@ -101,8 +99,6 @@
             >{{ t('Join Room') }}
           </tui-button>
           <tui-button
-            type="primary"
-            :round="false"
             plain
             class="footer-button"
             :custom-style="{ width: '100%', padding: '10px', fontSize: '16px' }"
@@ -111,7 +107,6 @@
           </tui-button>
           <tui-button
             type="danger"
-            :round="false"
             plain
             class="footer-button"
             :custom-style="{ width: '100%', padding: '10px', fontSize: '16px' }"
@@ -522,6 +517,7 @@ async function toggleClickMoreBtn() {
   if (!showMoreControl.value) {
     await handleDropDownPosition();
   }
+  handleFetchRoomInfo();
   showMoreControl.value = !showMoreControl.value;
 }
 
@@ -573,6 +569,7 @@ const toggleInvitePanelShow = () => {
 };
 const showDetail = () => {
   if (!isMobile) return;
+  handleFetchRoomInfo();
   emit('show-more', { roomId: props.item.basicRoomInfo.roomId });
   viewDetails.value.func();
 };
@@ -580,6 +577,7 @@ function toggleInviteRoom() {
   if (showRoomDetail.value) {
     showRoomDetail.value = false;
   }
+  handleFetchRoomInfo();
   showRoomInvite.value = !showRoomInvite.value;
 }
 
@@ -609,7 +607,10 @@ async function handleCancelSchedule() {
   showRoomDetail.value = false;
 }
 
-onMounted(async () => {
+async function handleFetchRoomInfo() {
+  if (roomInfo.value) {
+    return;
+  }
   try {
     const roomInfoParams = {
       roomId: props.item.basicRoomInfo.roomId,
@@ -619,19 +620,10 @@ onMounted(async () => {
   } catch (error) {
     logger.error('fetch roomInfo failed:', error);
   }
-});
+}
 </script>
 
 <style scoped lang="scss">
-.tui-theme-black .operate-list {
-  --operation-box-shadow: 0px 3px 8px rgba(34, 38, 46, 0.3),
-    0px 6px 40px rgba(34, 38, 46, 0.3);
-}
-
-.tui-theme-white .operate-list {
-  --operation-box-shadow: 0px 3px 8px #e9f0fb, 0px 6px 40px rgba(0, 0, 0, 0.1);
-}
-
 .schedule-room-control {
   display: flex;
   flex-wrap: nowrap;
@@ -649,7 +641,7 @@ onMounted(async () => {
       max-width: 220px;
       font-size: 16px;
       font-weight: 500;
-      color: var(--font-color-4);
+      color: var(--text-color-primary);
 
       .schedule-title-text {
         overflow: hidden;
@@ -667,7 +659,7 @@ onMounted(async () => {
       margin-top: 6px;
       font-size: 14px;
       font-weight: 400;
-      color: var(--font-color-4);
+      color: var(--text-color-primary);
 
       .schedule-content-time {
         min-width: 94px;
@@ -681,7 +673,7 @@ onMounted(async () => {
           width: 10px;
           height: 1px;
           margin: 0 4px 4px;
-          background-color: var(--font-color-4);
+          background-color: var(--text-color-primary);
         }
       }
 
@@ -697,21 +689,21 @@ onMounted(async () => {
         width: 1px;
         height: 10px;
         margin: 5px 10px 0 5px;
-        background-color: #969eb4;
+        background-color: var(--text-color-primary);
       }
     }
   }
 
   &:hover {
     cursor: pointer;
-    background-color: rgba(150, 158, 180, 0.1);
+    background-color: var(--list-color-hover);
     border-radius: 8px;
   }
 }
 
 .room-detail-content {
-  background-color: #fff;
   border-radius: 8px;
+  background-color: var(--bg-color-dialog);
 }
 
 .room-detail.h5 {
@@ -736,8 +728,8 @@ onMounted(async () => {
   z-index: 1000;
   width: 100%;
   padding: 20px 12px 36px;
-  background-color: #fff;
   border-radius: 18px 18px 0 0;
+  background-color: var(--bg-color-operate);
 
   .invite-member-close {
     display: flex;
@@ -750,7 +742,7 @@ onMounted(async () => {
     margin-bottom: 12px;
     font-size: 18px;
     font-weight: 500;
-    color: #4f586b;
+    color: var(--text-color-primary);
   }
 }
 
@@ -765,10 +757,10 @@ onMounted(async () => {
     width: 30px;
     height: 30px;
     margin-right: 6px;
-    color: var(--active-color-1);
+    color: var(--text-color-link);
 
     &:hover {
-      background: rgba(150, 158, 180, 0.1);
+      background: var(--bg-color-function);
       border-radius: 4px;
     }
   }
@@ -780,9 +772,12 @@ onMounted(async () => {
     flex-direction: column;
     min-width: 96px;
     padding: 20px;
-    background: #fff;
     border-radius: 8px;
-    box-shadow: var(--operation-box-shadow);
+    background: var(--dropdown-color-default);
+    box-shadow:
+      0 12px 26px var(--uikit-color-black-8),
+      0 8px 12px var(--uikit-color-black-8),
+      0 1px 5px var(--uikit-color-black-8);
 
     &::before {
       position: absolute;
@@ -790,15 +785,15 @@ onMounted(async () => {
       content: '';
       border-top: 10px solid transparent;
       border-right: 10px solid transparent;
-      border-bottom: 10px solid #fff;
       border-left: 10px solid transparent;
+      border-bottom: 10px solid var(--dropdown-color-default);
     }
 
     .operate-item {
       display: flex;
       justify-content: center;
       height: 20px;
-      color: #6b758a;
+      color: var(--text-color-primary);
       cursor: pointer;
 
       .operate-text {
@@ -811,15 +806,15 @@ onMounted(async () => {
       }
 
       &:hover {
-        color: var(--active-color-1);
+        color: var(--text-color-link-hover);
       }
     }
 
     .cancel-text {
-      color: var(--red-color-2);
+      color: var(--text-color-error);
 
       &:hover {
-        color: var(--red-color-2);
+        color: var(--text-color-error);
       }
     }
   }
@@ -857,23 +852,19 @@ onMounted(async () => {
 }
 
 .schedule-detail-closed {
-  color: #4f586b;
+  color: var(--text-color-secondary);
 }
 
 .button {
   margin-left: 10px;
 }
 
-.status-not-start {
-  color: var(--font-color-10);
-}
-
 .status-running {
-  color: var(--active-color-1);
+  color: var(--text-color-success);
 }
 
 .status-finished {
-  color: #b2bbd1;
+  color: var(--uikit-color-gray-7);
 }
 
 .mask {
@@ -883,7 +874,7 @@ onMounted(async () => {
   z-index: 1000;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: var(--uikit-color-black-4);
 }
 
 .hidden {

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

@@ -310,9 +310,11 @@ onUnmounted(() => {
   padding: 20px 0;
   margin-left: 20px;
   user-select: none;
-  background-color: var(--white-color);
   border-radius: 24px;
-  box-shadow: rgba(197, 210, 229, 0.3);
+  box-shadow:
+    0 2px 6px var(--uikit-color-black-8),
+    0 8px 18px var(--uikit-color-black-8);
+  background-color: var(--bg-color-operate);
 }
 
 .schedule-room {
@@ -326,7 +328,6 @@ onUnmounted(() => {
     display: flex;
     font-size: 14px;
     font-weight: 500;
-    color: var(--active-color-1);
     cursor: pointer;
 
     .arrow {
@@ -342,7 +343,7 @@ onUnmounted(() => {
     height: 100%;
     font-size: 14px;
     font-weight: 400;
-    color: #8f9ab2;
+    color: var(--text-color-secondary);
 
     .loading {
       margin-bottom: 10px;
@@ -361,7 +362,7 @@ onUnmounted(() => {
       padding: 10px;
       font-size: 14px;
       font-weight: 400;
-      color: var(--font-color-9);
+      color: var(--text-color-secondary);
 
       .date {
         margin-right: 2px;
@@ -381,7 +382,7 @@ onUnmounted(() => {
       font-size: 14px;
       font-style: normal;
       font-weight: 400;
-      color: #8f9ab2;
+      color: var(--text-color-secondary);
     }
   }
 
@@ -392,10 +393,9 @@ onUnmounted(() => {
   ::-webkit-scrollbar {
     width: 6px;
   }
-
   ::-webkit-scrollbar-thumb {
-    background-color: #e0e2e9;
     border-radius: 10px;
+    background-color: var(--stroke-color-secondary);
   }
 }
 

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

@@ -142,7 +142,7 @@ watch(
   user-select: none;
 
   .invite-member-title {
-    color: #4f586b;
+    color: var(--text-color-primary);
   }
 
   .invite-member-item {
@@ -150,10 +150,10 @@ watch(
     justify-content: space-between;
     padding: 10px 16px;
     margin-top: 8px;
-    color: #0f1014;
-    background: #f9fafc;
-    border: 1px solid #e4e8ee;
     border-radius: 8px;
+    background-color: var(--bg-color-input);
+    color: var(--text-color-primary);
+    border: 1px solid var(--stroke-color-module);
 
     .invite-member-content {
       max-width: 400px;
@@ -166,6 +166,7 @@ watch(
       width: 20px;
       height: 20px;
       cursor: pointer;
+      color: var(--text-color-link);
     }
   }
 }

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

@@ -2,7 +2,6 @@
   <div class="container">
     <TuiSelect
       v-model="selectedTime"
-      theme="white"
       :teleported="false"
       :custom-select-content-style="{ 'font-weight': 400 }"
       :value="selectedTime"
@@ -11,7 +10,6 @@
       <TuiOption
         v-for="time in timeOptions"
         :key="time.value"
-        theme="white"
         :value="time.value"
         :label="time.label"
         :custom-option-content-style="{ 'font-weight': 400 }"

package/src/TUIRoom/components/Stream/MultiStreamView/index.vue

@@ -121,14 +121,13 @@ function handleTurnPageRight() {
     justify-content: center;
     width: 32px;
     height: 60px;
-    color: var(--turn-page-arrow-color);
+    color: var(--uikit-color-white-1);
     cursor: pointer;
-    background: var(--turn-page-background-color);
-    backdrop-filter: blur(2.25px);
     border-radius: 32px;
+    background-color: var(--bg-color-tag-mask);
 
     &:hover {
-      background: var(--turn-page-hover-background-color);
+      background-color: var(--button-color-secondary-hover);
     }
   }
 
@@ -146,16 +145,4 @@ function handleTurnPageRight() {
     transform: rotateY(180deg);
   }
 }
-
-.tui-theme-black .turn-page-container {
-  --turn-page-background-color: rgba(114, 122, 138, 0.4);
-  --turn-page-hover-background-color: rgba(114, 122, 138, 0.7);
-  --turn-page-arrow-color: #d5e0f2;
-}
-
-.tui-theme-white .turn-page-container {
-  --turn-page-background-color: rgba(114, 122, 138, 0.4);
-  --turn-page-hover-background-color: rgba(114, 122, 138, 0.7);
-  --turn-page-arrow-color: white;
-}
 </style>

package/src/TUIRoom/components/Stream/common/LocalScreenView/index.vue

@@ -89,13 +89,13 @@ onBeforeUnmount(() => {
   justify-content: center;
   width: 100%;
   height: 100%;
-  background-color: var(--background-color-1);
+  background-color: var(--bg-color-bubble-reciprocal);
 
   &::before {
     width: 100%;
     height: 100%;
     content: '';
-    background-color: var(--local-screen-stream-bg-color);
+    background-color: var(--bg-color-bubble-reciprocal);
   }
 
   .local-screen-control-container {
@@ -105,8 +105,8 @@ onBeforeUnmount(() => {
     display: flex;
     flex-direction: column;
     align-items: center;
-    color: var(--screen-font-color);
     transform: translate(-50%, -50%);
+    color: var(--text-color-tertiary);
 
     &.mini {
       transform: translate(-50%, -50%) scale(0.7);
@@ -128,22 +128,12 @@ onBeforeUnmount(() => {
 
     .stop-button {
       margin-top: 30px;
-      background-color: var(--red-color-3);
-      border: 1.5px solid var(--red-color-3);
+      background-color: var(--text-color-error);
+      border: 1.5px solid var(--text-color-error);
     }
   }
 }
 
-.tui-theme-white .local-screen-container {
-  --local-screen-stream-bg-color: rgba(228, 232, 238, 0.4);
-  --screen-font-color: #8f9ab2;
-}
-
-.tui-theme-black .local-screen-container {
-  --screen-font-color: #b2bbd1;
-  --local-screen-stream-bg-color: rgba(34, 38, 46, 0.5);
-}
-
 .dialog-button {
   margin-right: 12px;
 }