@tencentcloud/roomkit-electron-vue3 2.4.2 → 2.6.0

package/src/TUIRoom/assets/style/white-theme.scss

@@ -1,24 +1,27 @@
 .tui-theme-white {
-  --background-color-1: #FFFFFF;
+  --background-color-1: #FFF;
   --background-color-2: #FBFCFE;
   --background-color-3: #F0F3FA;
   --background-color-4: #D5E0F2;
   --background-color-5: transparent;
   --background-color-6: #BDBDBD;
   --background-color-7: #F9FAFC;
-  --background-color-8: #FFFFFF;
+  --background-color-8: #FFF;
   --background-color-9: #F7F9FC;
   --background-color-10: #E7EAF7;
   --background-color-11: #F0F3FA;
-  --background-color-12: #FFFFFF;
+  --background-color-12: #FFF;
+  --hover-background-color-1: rgba(213, 224, 242, 0.5);
   --font-color-1: #4F586B;
   --font-color-2: #B2BBD1;
-  --font-color-3: #000000;
+  --font-color-3: #000;
   --font-color-4: #4F586B;
   --font-color-5: #4F586B;
   --font-color-6: #0F1014;
-  --font-color-7: #FFFFFF;
+  --font-color-7: #FFF;
   --font-color-8: #4F586B;
+  --font-color-9: #969EB4;
+  --font-color-10: #FF643D;
   --title-color: #0F1014;
   --stroke-color: #E4EAF7;
   --stroke-color-2: #EAEFF8;
@@ -28,104 +31,104 @@
   --active-color-2: #1C66E5;
   --green-color: #27C39F;
   --orange-color: #F06C4B;
-  --white-color: #FFFFFF;
-  --black-color: #000000;
+  --white-color: #FFF;
+  --black-color: #000;
   --red-color: #ED414D;
   --red-color-2: #F23C5B;
   --red-color-3: #E5395C;
-
-  --control-content: #FFFFFF;
+  --control-content: #FFF;
   --background-image-color: transparent;
-  --input-color: #FFFFFF;
-  --create-room-mode-color-bg: #FFFFFF;
+  --input-color: #FFF;
+  --create-room-mode-color-bg: #FFF;
   --user-control-container-color-bg: #E8E8E8;
   --user-control-container-shadow: 0 12px 32px rgba(0, 0, 0, .1), 0 2px 6px;
   --stream-container-flatten-bg-color: rgba(242,242,242,1);
-  --room-header-bg-color: #FFFFFF;
-  --room-footer-bg-color: #FFFFFF;
-  --room-network-bg-color: #FFFFFF;
-  --room-audiotab-bg-color: #FFFFFF;
-  --room-videotab-bg-color: #FFFFFF;
-  --stop-share-region-bg-color: #FFFFFF;
-  --setting-dialog-bg-color: #FFFFFF;
+  --room-header-bg-color: #FFF;
+  --room-footer-bg-color: #FFF;
+  --room-network-bg-color: #FFF;
+  --room-audiotab-bg-color: #FFF;
+  --room-videotab-bg-color: #FFF;
+  --stop-share-region-bg-color: #FFF;
+  --setting-dialog-bg-color: #FFF;
   --icon-arrow-hover: rgba(232, 232, 232, 0.7);
-  --el-dialog-bg-color: #FFFFFF;
-  --tabs-title-font-color: #000000;
+  --el-dialog-bg-color: #FFF;
+  --tabs-title-font-color: #000;
   --center-user-info-container-bg-color: #F2F2F2;
-  --stream-info-bg-color: #FFFFFF;
-  --title-color-bg: #666666;
-  --title-color-font: #000000;
-  --el-dialog-bg-color-select: #FFFFFF;
-  --el-text-color-primary-select: #000000;
+  --stream-info-bg-color: #FFF;
+  --title-color-bg: #666;
+  --title-color-font: #000;
+  --el-dialog-bg-color-select: #FFF;
+  --el-text-color-primary-select: #000;
   --el-text-color-regular-select: #596174;
-  --el-fill-color-blank-select: #FFFFFF;
+  --el-fill-color-blank-select: #FFF;
   --el-border-color-select: #C8CACC;
-  --setting-name-color: #000000;
-  --el-drawer-header-color: #000000;
+  --setting-name-color: #000;
+  --el-drawer-header-color: #000;
   --user-extra-info-bg-color: #006EFF;
-  --user-extra-info-color: #FFFFFF;
+  --user-extra-info-color: #FFF;
   --member-item-container-hover-bg-color: #F3F3F3;
-  --el-bg-color-select: #FFFFFF;
+  --el-bg-color-select: #FFF;
   --el-bg-color-overlay-select: #F2F2F2;
   --el-border-color-light-select: #F2F2F2;
   --el-fill-color-light-select: rgba(222, 222, 215, 0.7);
   --input-bg-color: #F2F2F2;
-  --input-font-color: #000000;
+  --input-font-color: #000;
   --input-border-color: #F2F2F2;
   --invite-title-color: #7C85A6;
-  --chat-editor-bg-color: #FFFFFF;
+  --chat-editor-bg-color: #FFF;
   --message-list-color: #F6F6F6;
-  --textarea-color: #000000;
+  --textarea-color: #000;
   --send-btn-color: #006EFF;
   --message-color: #006EFF;
-  --stream-container-border: #ffffff;
+  --stream-container-border: #fff;
   --apply-list-container-bg-color: #F2F2F2;
-  --apply-list-container-color: #000000;
+  --apply-list-container-color: #000;
   --room-sidebar-bg-color: #F2F2F2;
-  --create-room-option: #eeeeee;
+  --create-room-option: #eee;
   --create-room-option-tab: #006EFF;
   --create-room-option-color: #006EFF;
-  --create-room-option-icon: #000000;
+  --create-room-option-icon: #000;
   --create-room-option-icon-color:#006EFF;
-  --control-region-bg-color: #EEEEEE;
+  --control-region-bg-color: #EEE;
   --dialog-tabs-bg-color: #F0F3FA;
   --divide-line-color: transparent;
   --divice-line: #dcdcdc;
   --el-drawer-divide: transparent;
-  --send-btn: #FFFFFF;
-  --invite-region: #000000;
-  --layout-list: #EEEEEE;
-  --layout-item: #FFFFFF;
-  --stream-list-container: #EEEEEE;
+  --send-btn: #FFF;
+  --invite-region: #000;
+  --layout-list: #EEE;
+  --layout-item: #FFF;
+  --stream-list-container: #EEE;
   --more-btn-background: #006EFF;
-  --user-operate-list: #EEEEEE;
+  --user-operate-list: #EEE;
   --user-operate-item: #1D1029;
   --active-blur-background-color: transparent;
   --divide-line-color-setting: #dcdcdc;
   --el-disabled-border: #b6b6b6;
   --el-disabled-background: #dcdcdc;
   --el-border-lighter: #dcdcdc;
-  --title-active: #666666;
+  --title-active: #666;
   --mic-bar-color: #babbbe;
-  --more-notice-color: #000000;
+  --more-notice-color: #000;
   --setting-dialog: 8px;
-  --caret-color: #000000;
-  --apply-container-primary: #FFFFFF;
-  --apply-container-outline: #000000;
-  --el-drawer-body: #FFFFFF;
-  --input-color-setting: #FFFFFF;
+  --caret-color: #000;
+  --apply-container-primary: #FFF;
+  --apply-container-outline: #000;
+  --el-drawer-body: #FFF;
+  --input-color-setting: #FFF;
   --input-color-setting-hover: #f5f7fa;
   --switch-core-bg: #dcdfe6;
   --input-color-font: #646366;
   --input-color-setting-border: #babebe;
-  --el-message-box: #FFFFFF;
-  --el-message-box-title: #000000;
+  --el-message-box: #FFF;
+  --el-message-box-title: #000;
   --el-button-text-color: #646366;
   --selected-screen-share-dialog: #006EFF;
+
   /* H5 New Content */
   --log-out-mobile: rgba(0, 0, 0, 0.7);
   --log-out: #F9F9F9C7;
-  --log-out-cancel: #FFFFFF;
+  --log-out-cancel: #FFF;
   --room-detail: #F5F5F5;
   --room-detail-background: white;
   --room-detail-title: black;
@@ -135,9 +138,9 @@
   --chat-editor-bg-color-h5: #f1f1f1;
   --message-list-color-h5: #d4d4d4;
   --popup-mute-background-color-h5: #ececed;
-  --mute-button-color-h5: #FFFFFF;
+  --mute-button-color-h5: #FFF;
   --member-control-background-color-h5: #F2F2F2;
-  --member-border-color-h5: #FFFFFF;
+  --member-border-color-h5: #FFF;
   --member-title-content-h5: #5f5c5c;
   --end-control-text-h5: #CFD4E6;
   --end-control-title-h5: rgba(37, 37, 37, 0.78);
@@ -151,8 +154,7 @@
   --manage-member-button-h5:#006EFF;
   --message-body-h5: #817e7e;
   --user-extra-info-bg-color-h5: #006EFF;
-  --user-extra-info-color-h5: #FFFFFF;
+  --user-extra-info-color-h5: #FFF;
   --apply-container-background-outline-h5: #006EFF;
-  --apply-container-outline-h5: #FFFFFF;
-  --mute-all-h5: #FFFFFF
+  --apply-container-outline-h5: #FFF;
 }

package/src/TUIRoom/components/Chat/ChatEditor/index.vue

@@ -1,14 +1,16 @@
 <template>
-  <div :class="['chat-editor', { 'disable': isMessageDisabled }]">
-    <emoji class="chat-emoji" @choose-emoji="handleChooseEmoji"></emoji>
+  <div :class="['chat-editor', { disable: isMessageDisabled }]">
+    <emoji class="chat-emoji" @choose-emoji="handleChooseEmoji" />
     <textarea
       ref="editorInputEle"
       v-model="sendMsg"
       :disabled="isMessageDisabled"
       class="content-bottom-input"
-      :placeholder="isMessageDisabled ? t('Muted by the moderator') : t('Type a message')"
+      :placeholder="
+        isMessageDisabled ? t('Muted by the moderator') : t('Type a message')
+      "
       @keyup.enter="sendMessage"
-    />
+    ></textarea>
   </div>
 </template>
 
@@ -30,58 +32,67 @@ const {
   --input-border-color: var(--background-color-10);
   --chat-editor-color: var(--background-color-8);
 }
+
 .tui-theme-black textarea {
   --input-border-color: rgba(213, 224, 242, 0.2);
   --chat-editor-color: var(--background-color-2);
 }
 
 .chat-editor {
-  width: 100%;
-  height: 150px;
+  position: relative;
   box-sizing: border-box;
-  margin-top: 20px;
   display: flex;
   flex-direction: column;
+  width: 100%;
+  height: 150px;
+  padding: 12px 16px;
+  margin-top: 20px;
   border: 1px solid var(--input-border-color);
   border-radius: 8px;
-  padding: 12px 16px;
-  position: relative;
+
   .chat-emoji {
     display: flex;
   }
+
   .content-bottom-input {
-    height: 100%;
-    border: none;
-    background: var(--chat-editor-color);
-    color: var(--textarea-color);
     box-sizing: border-box;
-    caret-color: var(--caret-color);
-    resize: none;
+    height: 100%;
     padding: 0;
     margin-top: 8px;
     font-family: 'PingFang SC';
     font-size: 14px;
     font-weight: 400;
     line-height: 22px;
+    color: var(--textarea-color);
+    caret-color: var(--caret-color);
+    resize: none;
+    background: var(--chat-editor-color);
+    border: none;
+
     &:focus-visible {
       outline: none;
     }
+
     &::placeholder {
-      color: rgba(143, 154, 178, 0.7);
       font-size: 14px;
       font-weight: 400;
       line-height: 22px;
+      color: rgba(143, 154, 178, 0.7);
     }
+
     &::-webkit-scrollbar {
       display: none;
     }
   }
+
   &.disable {
     background-color: var(--disable-color);
+
     .chat-emoji {
       color: #8f9ab2;
       pointer-events: none;
     }
+
     .content-bottom-input {
       &:disabled {
         background-color: var(--disable-color);

package/src/TUIRoom/components/Chat/ChatEditor/useChatEditor.ts

@@ -22,7 +22,7 @@ export default function useChatEditor() {
   const editorInputEle = ref();
   const sendMsg = ref('');
   const isEmojiToolbarVisible = ref(false);
-  watch(isMessageDisabled, (value) => {
+  watch(isMessageDisabled, value => {
     if (value) {
       sendMsg.value = '';
     }
@@ -53,15 +53,18 @@ export default function useChatEditor() {
         payload: {
           text: result,
         },
-        nick: roomStore.localUser.userName || roomStore.localUser.userId,
+        nick:
+          roomStore.localUser.nameCard ||
+          roomStore.localUser.userName ||
+          roomStore.localUser.userId,
         from: roomStore.localUser.userId,
         flow: 'out',
         sequence: Math.random(),
       });
     } catch (e) {
-    /**
-     * Message delivery failure
-    **/
+      /**
+       * Message delivery failure
+       **/
       TUIMessage({ type: 'error', message: t('Failed to send the message') });
     }
   };

package/src/TUIRoom/components/Chat/EditorTools/index.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="emoji-tool">
-    <svg-icon :icon="EmojiIcon" class="emoji-icon" @click.stop="handleEmojiToobar"></svg-icon>
+    <svg-icon
+      :icon="EmojiIcon"
+      class="emoji-icon"
+      @click.stop="handleEmojiToobar"
+    />
     <div
       v-show="showEmojiToolbar"
       v-click-outside="handleClickOutsideEmojiToobar"
@@ -44,14 +48,13 @@ const handleClickOutsideEmojiToobar = () => {
 
 <style lang="scss" scoped>
 .tui-theme-white .emoji-list {
-  --emoji-box-shadow:
-    0px 2px 4px -3px rgba(32, 77, 141, 0.03),
+  --emoji-box-shadow: 0px 2px 4px -3px rgba(32, 77, 141, 0.03),
     0px 6px 10px 1px rgba(32, 77, 141, 0.06),
     0px 3px 14px 2px rgba(32, 77, 141, 0.05);
 }
+
 .tui-theme-black .emoji-list {
-  --emoji-box-shadow:
-    0px 8px 40px 0px rgba(23, 25, 31, 0.6),
+  --emoji-box-shadow: 0px 8px 40px 0px rgba(23, 25, 31, 0.6),
     0px 4px 12px 0px rgba(23, 25, 31, 0.8);
 }
 
@@ -59,41 +62,45 @@ const handleClickOutsideEmojiToobar = () => {
   .emoji-icon {
     cursor: pointer;
   }
+
   .emoji-list,
   .emoji-list-h5 {
-    height: 204px;
-    width: 100%;
     position: absolute;
     bottom: 160px;
-    left: 0px;
+    left: 0;
     display: flex;
     flex-wrap: wrap;
+    gap: 5px;
+    width: 100%;
+    height: 204px;
+    padding: 10px;
     overflow-y: auto;
     background-color: var(--background-color-8);
-    padding: 10px;
     border-radius: 8px;
     box-shadow: var(--emoji-box-shadow);
-    gap: 5px;
 
     &::-webkit-scrollbar {
       display: none;
     }
+
     .emoji-item {
       &:hover {
         cursor: pointer;
       }
     }
+
     img {
       width: 23px;
       height: 23px;
     }
   }
+
   .emoji-list-h5 {
-    width: 298px;
-    height: 148px;
     position: fixed;
     bottom: 77px;
     left: 30px;
+    width: 298px;
+    height: 148px;
   }
 }
 </style>

package/src/TUIRoom/components/Chat/MessageList/index.vue

@@ -1,5 +1,7 @@
 <template>
-  <div :class="isMobile ? 'message-list-container-h5' : 'message-list-container'">
+  <div
+    :class="isMobile ? 'message-list-container-h5' : 'message-list-container'"
+  >
     <div id="messageScrollList" ref="messageListRef" class="message-list">
       <div
         v-for="(item, index) in messageList"
@@ -7,8 +9,12 @@
         ref="messageAimId"
         :class="['message-item', `${'out' === item.flow ? 'is-me' : ''}`]"
       >
-        <div v-if="getDisplaySenderName(index)" class="message-header" :title="item.nick || item.from">
-          {{ item.nick || item.from }}
+        <div
+          v-if="getDisplaySenderName(index)"
+          class="message-header"
+          :title="item.nick || item.from"
+        >
+          {{ getDisplayName(item.from) }}
         </div>
         <div class="message-body">
           <message-text :data="item.payload.text" />
@@ -20,13 +26,17 @@
 
 <script setup lang="ts">
 import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
+import { storeToRefs } from 'pinia';
 import MessageText from '../MessageTypes/MessageText.vue';
-import { isMobile }  from '../../../utils/environment';
+import { isMobile } from '../../../utils/environment';
 import useMessageList from './useMessageListHook';
 import { getScrollInfo } from '../../../utils/domOperation';
 import { throttle } from '../../../utils/utils';
+import { useRoomStore } from '../../../stores/room';
 
 const messageListRef = ref<HTMLElement>();
+const roomStore = useRoomStore();
+const { getDisplayName } = storeToRefs(roomStore);
 
 const {
   messageList,
@@ -38,11 +48,13 @@ const {
 
 let isScrollAtBottom = true;
 
-
 const handleMessageListScroll = (e: Event) => {
   const messageContainer = e.target as HTMLElement;
-  const bottom = messageContainer.scrollHeight - messageContainer.scrollTop - messageContainer.clientHeight;
-  isScrollAtBottom = (bottom <= 80);
+  const bottom =
+    messageContainer.scrollHeight -
+    messageContainer.scrollTop -
+    messageContainer.clientHeight;
+  isScrollAtBottom = bottom <= 80;
   if (messageContainer.scrollTop < 40 && !isCompleted.value) {
     handleGetHistoryMessageList();
   }
@@ -50,7 +62,6 @@ const handleMessageListScroll = (e: Event) => {
 
 const handleScroll = throttle(handleMessageListScroll, 1000);
 
-
 async function scrollToLatestMessage() {
   const { scrollHeight } = await getScrollInfo('#messageScrollList');
   if (messageListRef.value) {
@@ -90,130 +101,148 @@ onUnmounted(() => {
   --user-font-color: var(--black-color);
   --host-font-color: var(--white-color);
 }
+
 .tui-theme-black .message-body {
   --user-chat-color: rgba(213, 224, 242, 0.1);
   --user-font-color: var(--background-color-4);
   --host-font-color: var(--background-color-4);
 }
+
 .message-list-container {
+  flex: 1;
   height: 100%;
   overflow: auto;
-  flex: 1;
+
   .message-list {
     height: 100%;
-    overflow-y: auto;
-    overflow-x: hidden;
+    overflow: hidden auto;
+
     &::-webkit-scrollbar {
       display: none;
     }
   }
+
   .message-top {
     display: flex;
     justify-content: center;
   }
 
   .message-item {
-    margin-bottom: 8px;
-    word-break: break-all;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
+    margin-bottom: 8px;
+    word-break: break-all;
+
     &:last-of-type {
       margin-bottom: 0;
     }
+
     &.is-me {
       align-items: end;
+
       .message-body {
-        background-color: var(--active-color-1);
         min-width: 24px;
         padding: 10px;
         color: var(--host-font-color);
+        background-color: var(--active-color-1);
         border-radius: 8px;
       }
     }
+
     .message-header {
-      font-size: 14px;
-      color: var(--font-color-8);
-      margin-bottom: 4px;
       max-width: 180px;
-      white-space: nowrap;
-      text-overflow: ellipsis;
+      margin-bottom: 4px;
       overflow: hidden;
+      font-size: 14px;
       font-weight: 400;
       line-height: 22px;
+      color: var(--font-color-8);
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
+
     .message-body {
-      background-color: var(--user-chat-color);
       display: inline-block;
       padding: 10px;
-      font-weight: 400;
       font-size: 14px;
+      font-weight: 400;
       color: var(--user-font-color);
+      background-color: var(--user-chat-color);
       border-radius: 8px;
     }
   }
 }
 
 .message-list-container-h5 {
+  width: 100%;
+  height: 100%;
   padding: 10px 23px 10px 32px;
   background-color: var(--message-list-color-h5);
-  height: 100%;
-  width: 100%;
-  .message-list{
+
+  .message-list {
     height: 100%;
-    overflow-y: auto;
-    overflow-x: hidden;
+    overflow: hidden auto;
+
     &::-webkit-scrollbar {
       display: none;
     }
   }
+
   .message-top {
     display: flex;
     justify-content: center;
   }
+
   .message-list {
     overflow-y: scroll;
+
     .message-item {
-      margin-bottom: 20px;
-      word-break: break-all;
       display: flex;
       flex-direction: column;
       align-items: flex-start;
+      margin-bottom: 20px;
+      word-break: break-all;
+
       &:last-of-type {
         margin-bottom: 0;
       }
+
       &.is-me {
         align-items: end;
+
         .message-body {
-          background-color: #4791ff;
-          min-width: 24px;
-          border-radius: 8px;
           display: inline-block;
+          min-width: 24px;
           padding: 7px;
-          font-weight: 400;
           font-size: 14px;
-          color: #ffffff;
+          font-weight: 400;
+          color: #fff;
+          background-color: #4791ff;
+          border-radius: 8px;
         }
       }
+
       .message-header {
-        margin-bottom: 10px;
         max-width: 180px;
-        white-space: nowrap;
-        text-overflow: ellipsis;
+        margin-bottom: 10px;
         overflow: hidden;
+        font-size: 10px;
         font-style: normal;
         font-weight: 500;
-        font-size: 10px;
-        color: #ff7200;
         line-height: 14px;
+        color: #ff7200;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
+
       .message-body {
-        background-color: var(--message-body-h5);
         display: inline-block;
         padding: 7px;
-        font-weight: 400;
         font-size: 14px;
-        color: #ffffff;
+        font-weight: 400;
+        color: #fff;
+        background-color: var(--message-body-h5);
         border-radius: 8px;
       }
     }