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

src/components/chat.vue

@@ -25,15 +25,28 @@
       </div>
     </div>
     <div class="input-bar">
-      <div
+      <!-- <div
-        v-if="isRich"
+        v-if="isHost"
         @click="openRichMessageEditor"
         v-html="editingMessage"
         class="display-message"
         :style="`border-color: ${
           showRichEditor === true ? '#409eff' : '#c0c4cc'
         }`"
-      ></div>
+      ></div> -->
+      <wangEditor
+        v-if="isHost"
+        class="rich-editor"
+        v-model="editingMessage"
+        width="100%"
+        height="200px"
+      ></wangEditor>
+
+      <!-- <el-input v-if="isHost" v-model="editingMessage" class="message-input">
+        <template #prepend>
+          <el-button :icon="Expand" />
+        </template>
+      </el-input> -->
       <el-input
         v-else
         v-model="editingMessage"
@@ -60,10 +73,10 @@ import { ref, toRefs } from "vue";
 import { uniqueId } from "lodash";
 import dayjs from "dayjs";
 import wangEditor from "@/components/wangEditor";
-
+import { Expand } from "@element-plus/icons-vue";
 const emit = defineEmits(["send"]);
 const props = defineProps({
-  isRich: {
+  isHost: {
     type: Boolean,
     default: false,
   },
@@ -80,7 +93,7 @@ const props = defineProps({
     required: true,
   },
 });
-const { isRich, messageList, account } = toRefs(props);
+const { isHost, messageList, account } = toRefs(props);
 
 /* 聊天功能 */
 const editingMessage = ref(""); // 正在编辑的内容
@@ -171,7 +184,8 @@ const sendMessage = () => {
   }
   .input-bar {
     display: flex;
-    margin: 0 5px;
+    margin: 5px;
+    align-items: center;
     .message-input {
       margin-right: 5px;
     }

src/components/wangEditor/index.vue

@@ -7,7 +7,7 @@
       :mode="mode"
     />
     <Editor
-      :style="`min-height: ${height}; overflow-y: hidden`"
+      :style="`min-height: ${minHeight}; height: ${height} overflow-y: hidden`"
       v-model="valueHtml"
       :defaultConfig="editorConfig"
       :mode="mode"
@@ -29,6 +29,10 @@ export default {
       type: String,
       default: "",
     },
+    minHeight: {
+      type: String,
+      default: "150px",
+    },
     height: {
       type: String,
       default: "320px",
@@ -41,6 +45,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    mode: {
+      type: String,
+      default: "default",
+    },
   },
   setup(props, context) {
     // 编辑器实例，必须用 shallowRef
@@ -66,9 +74,9 @@ export default {
         "fontSize",
         "fontFamily",
         "lineHeight",
-        "emotion",
+        // "emotion",
-        "redo",
+        // "redo",
-        "undo",
+        // "undo",
       ],
     };
     const editorConfig = {

src/router/index.js

@@ -64,8 +64,9 @@ router.beforeEach(async (to) => {
   // 前往主持人页面
   if (to.name === "Host") {
     console.log("host");
-    // const bytes = cryptoJs.AES.decrypt(to.params.hostinfo, "secret");
+    if (to.params.meetingId !== store.state.joinUser.meetingId) {
-    // const decryptedData = JSON.parse(bytes.toString(cryptoJs.enc.Utf8));
+      store.commit("setMessagesList", []);
+    }
     store.commit("setJoinUser", {
       nickname: to.params.nickname,
       username: to.params.username,

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"]