perf: 客户端会议优化

package.json

@@ -55,7 +55,7 @@
         "stylus-loader": "^7.1.0",
         "tinymce": "^5.10.3",
         "tui-calendar-hi": "^1.15.1-5",
-        "view-design-hi": "^4.7.0-50",
+        "view-design-hi": "^4.7.0-53",
         "vite": "^2.9.15",
         "vite-plugin-file-copy": "^1.0.0",
         "vite-plugin-require": "^1.1.10",

resources/assets/js/pages/manage/components/MeetingManager.vue

@@ -56,6 +56,7 @@
             :transition-names="['', '']"
             :beforeClose="onClose"
             :class-name="`meeting-manager${meetingMini ? ' meeting-hidden' : ''}`"
+            :ignore-remove-last="meetingMini"
             fullscreen>
             <ul>
                 <li v-if="localUser.uid">
@@ -398,28 +399,30 @@ export default {
             AgoraRTC.onMicrophoneChanged = async (changedDevice) => {
                 // When plugging in a device, switch to a device that is newly plugged in.
                 if (changedDevice.state === "ACTIVE") {
-                    this.localUser.audioTrack.setDevice(changedDevice.device.deviceId);
+                    this.localUser.audioTrack?.setDevice(changedDevice.device.deviceId);
                     // Switch to an existing device when the current device is unplugged.
                 } else if (changedDevice.device.label === this.localUser.audioTrack.getTrackLabel()) {
                     const oldMicrophones = await AgoraRTC.getMicrophones();
-                    oldMicrophones[0] && this.localUser.audioTrack.setDevice(oldMicrophones[0].deviceId);
+                    oldMicrophones[0] && this.localUser.audioTrack?.setDevice(oldMicrophones[0].deviceId);
                 }
             }
             // 视频采集设备状态变化回调
             AgoraRTC.onCameraChanged = async (changedDevice) => {
                 // When plugging in a device, switch to a device that is newly plugged in.
                 if (changedDevice.state === "ACTIVE") {
-                    this.localUser.videoTrack.setDevice(changedDevice.device.deviceId);
+                    this.localUser.videoTrack?.setDevice(changedDevice.device.deviceId);
                     // Switch to an existing device when the current device is unplugged.
                 } else if (changedDevice.device.label === this.localUser.videoTrack.getTrackLabel()) {
                     const oldCameras = await AgoraRTC.getCameras();
-                    oldCameras[0] && this.localUser.videoTrack.setDevice(oldCameras[0].deviceId);
+                    oldCameras[0] && this.localUser.videoTrack?.setDevice(oldCameras[0].deviceId);
                 }
             }
             // 音频或视频轨道自动播放失败回调
             AgoraRTC.onAutoplayFailed = () => {
                 $A.messageWarning("点击屏幕开始会议");
             }
+            // 设置日志级别
+            AgoraRTC.setLogLevel(window.systemInfo.debug === "yes" ? 0 : 3);
 
             // 创建客户端
             this.agoraClient = AgoraRTC.createClient({mode: "rtc", codec: "vp8"});

resources/assets/js/pages/manage/components/MeetingPlayer.vue

@@ -1,6 +1,11 @@
 <template>
     <div class="meeting-player">
         <div :id="id" class="player" :style="playerStyle"></div>
+        <ETooltip :disabled="$isEEUiApp || windowTouch || !username">
+            <div slot="content">
+                {{username}}
+            </div>
+            <div class="meeting-avatar">
                 <UserAvatar v-if="userid" :userid="userid" :size="36" :borderWitdh="2"/>
                 <div v-else-if="tourist.userimg" class="common-avatar avatar-wrapper">
                     <div class="avatar-box online">
@@ -8,6 +13,8 @@
                         <EAvatar :size="36" :src="tourist.userimg"></EAvatar>
                     </div>
                 </div>
+            </div>
+        </ETooltip>
         <div class="player-state">
             <i v-if="!audio" class="taskfont">&#xe7c7;</i>
             <i v-if="!video" class="taskfont">&#xe7c8;</i>
@@ -71,6 +78,16 @@ export default {
             }
             return 0
         },
+        username() {
+            if (this.userid) {
+                const user = this.cacheUserBasic.find(({userid}) => userid == this.userid);
+                if (user) {
+                    return user.nickname
+                }
+                return ''
+            }
+            return this.tourist.nickname || ''
+        },
         playerStyle() {
             const user = this.cacheUserBasic.find(({userid}) => userid == this.userid);
             if (user) {

resources/assets/sass/pages/components/meeting-manager.scss

@@ -41,18 +41,20 @@ body {
                                             margin-left: 8px;
                                         }
                                     }
-                                    .common-avatar {
+                                    .meeting-avatar {
                                         position: absolute;
                                         bottom: -8px;
                                         right: -8px;
                                         z-index: 2;
                                     }
+
                                     .avatar-box {
                                         em {
                                             transform: scale(1.0625);
                                         }
+
                                         .el-avatar--circle {
-                                            border: 2px solid #FFFFFF;
+                                            border: 1px solid #FFFFFF;
                                         }
                                     }
                                 }
@@ -104,7 +106,7 @@ body.window-portrait {
     padding: 6px 12px;
     white-space: nowrap;
     border-radius: 4px;
-    box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 0 3px rgba(45, 45, 45, 0.3);
     cursor: pointer;
     display: flex;
     align-items: center;