主持人富文本、leave meeting after close the browser

src/views/meeting.vue

@@ -32,9 +32,9 @@
           ></el-button>
         </div>
       </div>
-      <div id="right-chat">
+      <div id="right-chat" ref="rightChatRef">
         <Chat
-          :is-rich="route.name === 'Host'"
+          :is-host="route.name === 'Host'"
           place="right"
           :account="joinName"
           :message-list="messages"
@@ -57,7 +57,7 @@
       ></el-tab-pane>
       <el-tab-pane label="聊天" class="chat-pane" v-if="screenWidth < 900">
         <Chat
-          :is-rich="route.name === 'Host'"
+          :is-host="route.name === 'Host'"
           place="bottom"
           :account="joinName"
           :message-list="messages"
@@ -646,6 +646,7 @@ const getStageQuestionnaireAnswer = (val) => {
 };
 
 const isFullScreen = ref(false);
+const rightChatRef = ref(null);
 onMounted(() => {
   meetingContainerRef.value.style.background = ` url(${
     store.getters.templateBackgroundPic || store.getters.defaultBackground
@@ -654,7 +655,9 @@ onMounted(() => {
   meetingHeight.value = (meetingWidth.value * 9) / 16;
 
   videoElementRef.value.style.height = `${meetingHeight.value + 42}px`;
-
+  rightChatRef.value.style.height = `${
+    meetingContainerRef.value.offsetWidth * 0.08 + meetingHeight.value + 42
+  }px`;
   const handleFullscreenChange = () => {
     if (document.fullscreenElement) {
       isFullScreen.value = true;
@@ -729,6 +732,7 @@ const leaveConference = () => {
   meetingConfig.client.leaveMeeting();
 };
 window.addEventListener("beforeunload", leaveConference);
+window.addEventListener("unload", leaveConference);
 onUnmounted(() => {
   window.removeEventListener("beforeunload", leaveConference);
 });
@@ -742,7 +746,9 @@ $meetingBackgroundWidth: 80vw; //会议背景宽度
 $meetingBackgroundHeight: 80vw * 9 / 16;
 
 :deep(#right-chat .chat-container .message-list) {
-  height: $meetingComponentWitdh * 9 / 16;
+  // height: $meetingComponentWitdh * 9 / 16;
+  // height: 100%;
+  flex-grow: 1;
   overflow-y: scroll;
 }
 
@@ -750,6 +756,9 @@ $meetingBackgroundHeight: 80vw * 9 / 16;
   #meeting-chat-row {
     display: flex;
     justify-content: space-between;
+    :deep(.rich-editor) {
+      width: 14vw !important;
+    }
     #meeting-container {
       box-sizing: border-box;
       padding-top: calc(80vw * 0.08);
@@ -896,6 +905,10 @@ $meetingBackgroundHeight: 80vw * 9 / 16;
       #meeting-container {
         padding-top: calc(100vw * 0.08);
         width: 100vw;
+        .text-label-container {
+          width: 100vw;
+          // height: 100%;
+        }
         #video-element {
           width: 96vw;
           :deep(div[id*="suspension-view-tabpanel"]
@@ -952,6 +965,10 @@ $meetingBackgroundHeight: 80vw * 9 / 16;
         }
         width: 100vw;
         height: 100vh;
+        .text-label-container {
+          width: 100vw;
+          height: 100%;
+        }
         #video-element {
           width: $meetingComponentWitdh;
         }
@@ -1027,7 +1044,10 @@ $meetingBackgroundHeight: 80vw * 9 / 16;
         left: 100vw;
         width: 100vh !important;
         height: 100vw;
-
+        .text-label-container {
+          width: 100vh;
+          height: 100vw;
+        }
         #video-element {
           width: $meetingComponentWitdh;
           :deep(div[id*="suspension-view-tabpanel"]