mdm-client 1.0.3 → 1.0.4

package/src/components/other/customLayout.vue

@@ -14,18 +14,17 @@
         <div class="custom-layout-simulate-header">
           <div class="custom-layout-simulate-header-options">
             <div class="layout-list">
-              <div 
-                :class="['layout-list-item', item]" 
-                v-for="item of layoutList" 
+              <div
+                :class="['layout-list-item', item]"
+                v-for="item of layoutList"
                 :key="item"
                 @click="handleLayoutChange(item)"
               >
                 <div
-                  :class="
-                    ['layout-list-item-icon',
-                    { 'layout-list-item-icon-active': activeLayout === item }
-                  ]
-                  "
+                  :class="[
+                    'layout-list-item-icon',
+                    { 'layout-list-item-icon-active': activeLayout === item },
+                  ]"
                 ></div>
               </div>
             </div>
@@ -40,7 +39,7 @@
         <div :class="['custom-layout-simulate-show', `layout-${activeLayout}`]">
           <div class="layout-container">
             <LayoutPlaceholder
-              v-for="index in placeholderCount" 
+              v-for="index in placeholderCount"
               :key="index"
               :index="index"
               :member="assignedMembers[index]"
@@ -72,11 +71,14 @@
         <div class="custom-layout-member-list">
           <div
             class="custom-layout-member-list-item"
-            :class="{ 'is-dragging': isDragging && currentDragMember && currentDragMember.identity === item.identity }"
+            :class="{
+              'is-dragging':
+                isDragging && currentDragMember && currentDragMember.identity === item.identity,
+            }"
             v-for="item of memberList"
             :key="item.identity"
           >
-            <div 
+            <div
               class="custom-layout-member-list-item-drag-icon"
               @mousedown="handleMouseDown(item, $event)"
               @touchstart="handleTouchStart(item, $event)"
@@ -87,13 +89,9 @@
             </div>
           </div>
         </div>
-        
+
         <!-- 拖拽时的浮动元素 -->
-        <div 
-          v-if="isDragging && currentDragMember"
-          class="drag-ghost"
-          :style="dragGhostStyle"
-        >
+        <div v-if="isDragging && currentDragMember" class="drag-ghost" :style="dragGhostStyle">
           <div class="drag-ghost-avatar"></div>
           <div class="drag-ghost-name">{{ currentDragMember.name }}</div>
         </div>
@@ -106,10 +104,12 @@
 import LayoutPlaceholder from "./LayoutPlaceholder.vue";
 import { ShowMessage } from "../../utils/index";
 
+const STORAGE_PREFIX = "customLayoutState";
+let reconcileTimer = null;
 export default {
   name: "CustomLayout",
   components: {
-    LayoutPlaceholder
+    LayoutPlaceholder,
   },
   props: {
     participantList: {
@@ -126,7 +126,7 @@ export default {
       searchVal: "",
       memberList: [],
       autoFill: true,
-      layoutList: ["grid4", "grid9", "ring", "topSide", "rightSide"],
+      layoutList: ["grid4", "grid9", "ring", "rightSide"],
       activeLayout: "grid4",
       // 拖拽相关状态
       isDragging: false,
@@ -138,7 +138,9 @@ export default {
       hoverPlaceholderIndex: null,
       currentMousePosition: { x: 0, y: 0 },
       liveClient: null,
-      showMessage: new ShowMessage()
+      showMessage: new ShowMessage(),
+      // 参会者变化对齐延迟标记，避免拖拽过程被打断
+      pendingReconcile: false,
     };
   },
   computed: {
@@ -151,19 +153,44 @@ export default {
     // 计算不同布局下的占位元素数量
     placeholderCount() {
       return this.getLayoutPlaceholderCount(this.activeLayout);
-    }
+    },
+    // 监听参会者身份集合变化（不仅仅是数量），防抖处理
+    participantIdentitySignature() {
+      return (this.participantList || [])
+        .map((m) => m && m.identity)
+        .filter(Boolean)
+        .sort()
+        .join(",");
+    },
   },
   watch: {
     searchVal(newVal) {
-      this.getMemberList(newVal);
+      this.$nextTick(() => {
+        this.getMemberList(newVal);
+      });
     },
     participantNum(newVal) {
       this.getMemberList();
-    }
+    },
+    isDragging(newVal) {
+      if (!newVal && this.pendingReconcile) {
+        // 拖拽结束后再处理未完成的对齐
+        this.pendingReconcile = false;
+        Promise.resolve().then(() => this.reconcileAssignedMembers());
+      }
+    },
+    participantIdentitySignature(newVal) {
+      if (reconcileTimer) clearTimeout(reconcileTimer);
+      reconcileTimer = setTimeout(() => {
+        this.reconcileAssignedMembers();
+      }, 120);
+    },
   },
   mounted() {
     this.getMemberList();
     this.liveClient = window["liveClient"];
+    // 打开弹窗时尝试恢复上一次应用的布局
+    this.restoreLayoutState();
   },
   beforeDestroy() {
     this.liveClient = null;
@@ -175,8 +202,7 @@ export default {
         grid4: 4,
         grid9: 9,
         ring: 8,
-        topSide: 4,
-        rightSide: 4
+        rightSide: 4,
       };
       return layoutCountMap[layout] || 4;
     },
@@ -184,95 +210,96 @@ export default {
     // 长按开始拖拽 - 鼠标事件
     handleMouseDown(member, event) {
       event.preventDefault();
-      
+
       // 使用固定偏移量，让浮动元素在鼠标右下角
       this.dragOffset = { x: 10, y: 10 };
-      
+
       // 设置初始鼠标位置
       this.currentMousePosition = { x: event.clientX, y: event.clientY };
-      
+
       this.startDragTimer(member);
-      
+
       const startX = event.clientX;
       const startY = event.clientY;
-      
+
       const handleMouseMove = (e) => {
         // 保存鼠标实际位置
         this.currentMousePosition = { x: e.clientX, y: e.clientY };
-        
+
         // 如果鼠标移动超过5px，清除长按定时器
         const deltaX = Math.abs(e.clientX - startX);
         const deltaY = Math.abs(e.clientY - startY);
         if ((deltaX > 5 || deltaY > 5) && !this.isDragging) {
           this.clearDragTimer();
         }
-        
+
         if (this.isDragging) {
           this.updateDragPosition(e.clientX, e.clientY);
         }
       };
-      
+
       const handleMouseUp = () => {
         this.clearDragTimer();
         this.endDrag();
-        document.removeEventListener('mousemove', handleMouseMove);
-        document.removeEventListener('mouseup', handleMouseUp);
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
       };
-      
-      document.addEventListener('mousemove', handleMouseMove);
-      document.addEventListener('mouseup', handleMouseUp);
+
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
     },
 
     // 长按开始拖拽 - 触摸事件
     handleTouchStart(member, event) {
       event.preventDefault();
       const touch = event.touches[0];
-      
+
       // 使用固定偏移量，让浮动元素在触摸点右下角
       this.dragOffset = { x: 10, y: 10 };
-      
+
       // 设置初始触摸位置
       this.currentMousePosition = { x: touch.clientX, y: touch.clientY };
-      
+
       this.startDragTimer(member);
-      
+
       const startX = touch.clientX;
       const startY = touch.clientY;
-      
+
       const handleTouchMove = (e) => {
         const touch = e.touches[0];
         // 保存触摸实际位置
         this.currentMousePosition = { x: touch.clientX, y: touch.clientY };
-        
+
         // 如果触摸移动超过5px，清除长按定时器
         const deltaX = Math.abs(touch.clientX - startX);
         const deltaY = Math.abs(touch.clientY - startY);
         if ((deltaX > 5 || deltaY > 5) && !this.isDragging) {
           this.clearDragTimer();
         }
-        
+
         if (this.isDragging) {
           this.updateDragPosition(touch.clientX, touch.clientY);
         }
       };
-      
+
       const handleTouchEnd = () => {
         this.clearDragTimer();
         this.endDrag();
-        document.removeEventListener('touchmove', handleTouchMove);
-        document.removeEventListener('touchend', handleTouchEnd);
+        document.removeEventListener("touchmove", handleTouchMove);
+        document.removeEventListener("touchend", handleTouchEnd);
       };
-      
-      document.addEventListener('touchmove', handleTouchMove);
-      document.addEventListener('touchend', handleTouchEnd);
+
+      document.addEventListener("touchmove", handleTouchMove);
+      document.addEventListener("touchend", handleTouchEnd);
     },
 
     // 开始长按计时器
     startDragTimer(member) {
       this.clearDragTimer();
-      this.dragStartTimer = setTimeout(() => {
-        this.startDrag(member);
-      }, 500);
+      // this.dragStartTimer = setTimeout(() => {
+      //   this.startDrag(member);
+      // }, 500);
+      this.startDrag(member);
     },
 
     // 清除长按计时器
@@ -287,24 +314,24 @@ export default {
     startDrag(member) {
       this.isDragging = true;
       this.currentDragMember = member;
-      
+
       // 设置初始浮动元素位置
       const { x, y } = this.currentMousePosition;
       this.updateDragPosition(x, y);
-      
-      console.log('开始拖拽:', member.name);
+
+      console.log("开始拖拽:", member.name);
     },
 
     // 更新拖拽位置
     updateDragPosition(clientX, clientY) {
       this.dragGhostStyle = {
-        position: 'fixed',
+        position: "fixed",
         left: `${clientX + this.dragOffset.x}px`,
         top: `${clientY + this.dragOffset.y}px`,
-        pointerEvents: 'none',
-        zIndex: 9999
+        pointerEvents: "none",
+        zIndex: 9999,
       };
-      
+
       // 检测是否悬停在占位符上
       this.checkHoverTarget(clientX, clientY);
     },
@@ -313,8 +340,8 @@ export default {
     checkHoverTarget(clientX, clientY) {
       // 使用鼠标的实际位置来检测下方元素
       const elementBelow = document.elementFromPoint(clientX, clientY);
-      const placeholder = elementBelow?.closest('.layout-placeholder');
-      
+      const placeholder = elementBelow?.closest(".layout-placeholder");
+
       if (placeholder) {
         const index = Array.from(placeholder.parentNode.children).indexOf(placeholder) + 1;
         if (index > 0 && index <= this.placeholderCount) {
@@ -332,7 +359,7 @@ export default {
       if (this.isDragging) {
         // 检查是否拖拽到了占位符上
         this.checkDropTarget();
-        
+
         this.isDragging = false;
         this.currentDragMember = null;
         this.dragGhostStyle = {};
@@ -345,10 +372,10 @@ export default {
     checkDropTarget() {
       // 使用保存的鼠标位置来检测拖拽目标
       const { x, y } = this.currentMousePosition;
-      
+
       const elementBelow = document.elementFromPoint(x, y);
-      const placeholder = elementBelow?.closest('.layout-placeholder');
-      
+      const placeholder = elementBelow?.closest(".layout-placeholder");
+
       if (placeholder) {
         const index = Array.from(placeholder.parentNode.children).indexOf(placeholder) + 1;
         if (index > 0 && index <= this.placeholderCount) {
@@ -362,17 +389,20 @@ export default {
       if (draggedMember) {
         // 1. 清除该成员在其他位置的显示
         this.clearMemberFromOtherPositions(draggedMember.identity);
-        
+
         // 2. 将成员分配到新位置（直接覆盖原有成员）
         const previousMember = this.assignedMembers[index];
         this.assignedMembers[index] = draggedMember;
-        
+
         if (previousMember) {
-          console.log('位置替换:', `位置 ${index} 的 ${previousMember.name} 被 ${draggedMember.name} 替换`);
+          console.log(
+            "位置替换:",
+            `位置 ${index} 的 ${previousMember.name} 被 ${draggedMember.name} 替换`
+          );
         } else {
-          console.log('拖拽成功:', draggedMember.name, '已分配到位置', index);
+          console.log("拖拽成功:", draggedMember.name, "已分配到位置", index);
         }
-        
+
         // 可以在这里添加成功提示
         // ElMessage.success(`${draggedMember.name} 已分配到位置 ${index}`);
       }
@@ -388,7 +418,7 @@ export default {
         }
       }
       if (clearedPositions.length > 0) {
-        console.log('清除重复显示:', `成员在位置 [${clearedPositions.join(', ')}] 的显示已清除`);
+        console.log("清除重复显示:", `成员在位置 [${clearedPositions.join(", ")}] 的显示已清除`);
       }
     },
 
@@ -397,32 +427,32 @@ export default {
       const member = this.assignedMembers[index];
       if (member) {
         delete this.assignedMembers[index];
-        console.log('手动清空:', `位置 ${index} 的 ${member.name} 已清空`);
+        console.log("手动清空:", `位置 ${index} 的 ${member.name} 已清空`);
       }
     },
 
     handleLayoutChange(layout) {
       const oldLayout = this.activeLayout;
       this.activeLayout = layout;
-      
+
       // 获取新布局的占位符数量
       const newPlaceholderCount = this.getLayoutPlaceholderCount(layout);
-      
+
       // 特殊处理：切换到topSide布局时的成员重排
-      if (layout === 'topSide' && oldLayout !== 'topSide') {
+      if (layout === "topSide" && oldLayout !== "topSide") {
         this.handleTopSideLayoutTransition();
       }
-      
+
       // 特殊处理：切换到rightSide布局时的成员重排
-      if (layout === 'rightSide' && oldLayout !== 'rightSide') {
+      if (layout === "rightSide" && oldLayout !== "rightSide") {
         this.handleRightSideLayoutTransition();
       }
-      
+
       // 特殊处理：切换到ring布局时的成员重排
-      if (layout === 'ring' && oldLayout !== 'ring') {
+      if (layout === "ring" && oldLayout !== "ring") {
         this.handleRingLayoutTransition();
       }
-      
+
       // 清空超出新布局占位符数量的成员
       const clearedMembers = [];
       for (const key in this.assignedMembers) {
@@ -433,68 +463,76 @@ export default {
           delete this.assignedMembers[key];
         }
       }
-      
+
       if (clearedMembers.length > 0) {
-        console.log(`布局切换：清空超出范围的成员 [${clearedMembers.join(', ')}]`);
+        console.log(`布局切换：清空超出范围的成员 [${clearedMembers.join(", ")}]`);
       }
-      
-      console.log(`布局切换：${oldLayout} -> ${layout}，保留了 ${Object.keys(this.assignedMembers).length} 个已分配成员`);
+
+      console.log(
+        `布局切换：${oldLayout} -> ${layout}，保留了 ${
+          Object.keys(this.assignedMembers).length
+        } 个已分配成员`
+      );
     },
 
     // 处理切换到topSide布局时的成员重排
     handleTopSideLayoutTransition() {
       // 在topSide布局中，位置1是焦点位置，位置2-4是上排小窗口
       // 如果位置1已有成员，则无需调整；如果位置1没有成员但其他位置有，可以考虑智能重排
-      
+
       if (!this.assignedMembers[1]) {
         // 如果焦点位置（位置1）为空，尝试将最重要的成员移到焦点位置
         for (let i = 2; i <= 4; i++) {
           if (this.assignedMembers[i]) {
-            console.log(`topSide布局优化：将位置${i}的${this.assignedMembers[i].name}移动到焦点位置`);
+            console.log(
+              `topSide布局优化：将位置${i}的${this.assignedMembers[i].name}移动到焦点位置`
+            );
             this.assignedMembers[1] = this.assignedMembers[i];
             delete this.assignedMembers[i];
             break;
           }
         }
       }
-      
-      console.log('topSide布局转换完成：位置1为焦点位置，位置2-4为上排小窗口');
+
+      console.log("topSide布局转换完成：位置1为焦点位置，位置2-4为上排小窗口");
     },
 
     // 处理切换到rightSide布局时的成员重排
     handleRightSideLayoutTransition() {
       // 在rightSide布局中，位置1是焦点位置，位置2-4是右侧纵向排列
       // 如果位置1已有成员，则无需调整；如果位置1没有成员但其他位置有，可以考虑智能重排
-      
+
       if (!this.assignedMembers[1]) {
         // 如果焦点位置（位置1）为空，尝试将最重要的成员移到焦点位置
         for (let i = 2; i <= 4; i++) {
           if (this.assignedMembers[i]) {
-            console.log(`rightSide布局优化：将位置${i}的${this.assignedMembers[i].name}移动到焦点位置`);
+            console.log(
+              `rightSide布局优化：将位置${i}的${this.assignedMembers[i].name}移动到焦点位置`
+            );
             this.assignedMembers[1] = this.assignedMembers[i];
             delete this.assignedMembers[i];
             break;
           }
         }
       }
-      
-      console.log('rightSide布局转换完成：位置1为焦点位置，位置2-4为右侧纵向排列');
+
+      console.log("rightSide布局转换完成：位置1为焦点位置，位置2-4为右侧纵向排列");
     },
 
     // 处理切换到ring布局时的成员重排
     handleRingLayoutTransition() {
       // 在ring布局中，位置1是焦点位置（左上角大窗口），位置2-8是环状排列
       // 如果位置1已有成员，则无需调整；如果位置1没有成员但其他位置有，按优先级智能重排
-      
+
       if (!this.assignedMembers[1]) {
         // 如果焦点位置（位置1）为空，按优先级顺序选择成员移到焦点位置
         // 优先级：位置2 > 位置3 > 位置4 > 位置5 > 位置6 > 位置7 > 位置8
         // 这样可以确保最重要或最早分配的成员优先显示在焦点位置
-        
+
         const priorityOrder = [2, 3, 4, 5, 6, 7, 8];
         let movedMember = null;
         let fromPosition = null;
-        
+
         for (const position of priorityOrder) {
           if (this.assignedMembers[position]) {
             movedMember = this.assignedMembers[position];
@@ -502,22 +540,22 @@ export default {
             break;
           }
         }
-        
+
         if (movedMember && fromPosition) {
           console.log(`ring布局优化：将位置${fromPosition}的${movedMember.name}移动到焦点位置`);
           this.assignedMembers[1] = movedMember;
           delete this.assignedMembers[fromPosition];
-          
+
           // 启用环状分布优化，让剩余成员排列更加平衡
           this.optimizeRingMemberDistribution();
         } else {
-          console.log('ring布局：没有成员需要移动到焦点位置');
+          console.log("ring布局：没有成员需要移动到焦点位置");
         }
       } else {
         console.log(`ring布局：焦点位置已有成员 ${this.assignedMembers[1].name}，无需重排`);
       }
-      
-      console.log('ring布局转换完成：位置1为焦点位置，位置2-8为环状排列');
+
+      console.log("ring布局转换完成：位置1为焦点位置，位置2-8为环状排列");
     },
 
     // 优化ring布局的成员分布
@@ -528,180 +566,193 @@ export default {
         if (this.assignedMembers[i]) {
           ringMembers.push({
             member: this.assignedMembers[i],
-            originalPosition: i
+            originalPosition: i,
           });
           delete this.assignedMembers[i];
         }
       }
-      
+
       if (ringMembers.length === 0) {
-        console.log('ring布局优化：没有环状位置的成员需要重新排列');
+        console.log("ring布局优化：没有环状位置的成员需要重新排列");
         return;
       }
-      
+
       // 重新分配到环状位置，优先使用前面的位置以保持视觉平衡
       // 这样可以避免成员分布过于分散，让界面看起来更整洁
       const ringPositions = [2, 3, 4, 5, 6, 7, 8];
       let optimizedCount = 0;
-      
+
       for (let i = 0; i < ringMembers.length && i < ringPositions.length; i++) {
         const newPosition = ringPositions[i];
         const memberInfo = ringMembers[i];
-        
+
         this.assignedMembers[newPosition] = memberInfo.member;
-        
+
         if (memberInfo.originalPosition !== newPosition) {
           optimizedCount++;
         }
       }
-      
+
       if (optimizedCount > 0) {
         console.log(`ring布局优化：重新排列了${optimizedCount}个成员，使环状分布更加平衡`);
       } else {
-        console.log('ring布局优化：成员分布已经是最优状态，无需调整');
+        console.log("ring布局优化：成员分布已经是最优状态，无需调整");
       }
     },
 
     handleReset() {
-      this.activeLayout = "grid4";
-      this.autoFill = true;
-      this.assignedMembers = {};
+      this.liveClient.resetVolteLayout(this.meetingNum).then((res) => {
+        if (res.code == 200) {
+          this.activeLayout = "grid4";
+          this.autoFill = true;
+          this.assignedMembers = {};
+          // 清空保存的状态
+          this.clearLayoutState();
+        } else {
+          this.showMessage.error(res?.msg || "volte融屏重置布局失败");
+        }
+      });
     },
 
     handleApply() {
       // 获取当前布局的占位符数量
       const currentPlaceholderCount = this.getLayoutPlaceholderCount(this.activeLayout);
-      
+
       // 生成布局映射数组
       const layoutArray = this.generateLayoutArray(currentPlaceholderCount);
-      
+
       // 验证布局数组
       const validation = this.validateLayoutArray(layoutArray);
-      
+
       if (!validation.isValid) {
-        console.error('布局验证失败:', validation.errors);
+        console.error("布局验证失败:", validation.errors);
         // 可以在这里显示错误提示给用户
         // ElMessage.error('布局配置有误，请检查后重试');
         return null;
       }
-      
+
       if (validation.warnings.length > 0) {
-        console.warn('布局验证警告:', validation.warnings);
+        console.warn("布局验证警告:", validation.warnings);
         // 可以在这里显示警告提示给用户
         // ElMessage.warning('布局配置存在一些问题，建议检查');
       }
-      
+
       // 这里可以发送应用布局的事件或API调用
-      console.log('应用布局成功:', {
+      console.log("应用布局成功:", {
         layout: this.activeLayout,
         autoFill: this.autoFill,
         placeholderCount: currentPlaceholderCount,
         layoutArray: layoutArray,
         assignedMembers: this.assignedMembers,
-        validation: validation
+        validation: validation,
       });
-      
+
       const handleCurrentLayout = () => {
-        let layout = ""
-        switch(this.activeLayout) {
+        let layout = "";
+        switch (this.activeLayout) {
           case "grid4":
-            layout = "four_grids"
+            layout = "four_grids";
             break;
           case "grid9":
-            layout = "nine_grids"
+            layout = "nine_grids";
             break;
           case "ring":
-            layout = "custom1"
+            layout = "custom1";
             break;
           case "topSide":
-            layout = "custom2"
+            layout = "custom2";
             break;
           case "rightSide":
-            layout = "custom3"
+            layout = "custom3";
             break;
           default:
-            layout = "four_grids"
+            layout = "four_grids";
             break;
         }
-        return layout
+        return layout;
       };
-      
-      this.liveClient.modifyVolteLayout({
-        roomNum: this.meetingNum,
-        layout: handleCurrentLayout(),
-        identitys: layoutArray.map(item => item && item?.identity ? item.identity : ""),
-        autoFill: this.autoFill
-      }).then(res => {
-        if(res.code == 200) {
-          this.showMessage.success("volte融屏应用布局成功")
-          this.closeCustomLayout()
-        } else {
-          this.showMessage.error(res?.msg || "volte融屏应用布局失败")
-        }
-      }).catch(err => {
-        this.showMessage.error(err?.message || "volte融屏应用布局失败")
-      });
+
+      this.liveClient
+        .modifyVolteLayout({
+          roomNum: this.meetingNum,
+          layout: handleCurrentLayout(),
+          identitys: layoutArray.map((item) => (item && item?.identity ? item.identity : "")),
+          autoFill: this.autoFill,
+        })
+        .then((res) => {
+          if (res.code == 200) {
+            this.showMessage.success("volte融屏应用布局成功");
+            // 成功后保存当前布局状态，便于下次打开还原
+            this.saveLayoutState();
+            this.closeCustomLayout();
+          } else {
+            this.showMessage.error(res?.msg || "volte融屏应用布局失败");
+          }
+        })
+        .catch((err) => {
+          this.showMessage.error(err?.message || "volte融屏应用布局失败");
+        });
     },
 
     // 生成布局映射数组
     generateLayoutArray(placeholderCount) {
       const layoutArray = [];
-      
+
       // 遍历每个位置，构建数组
       for (let i = 1; i <= placeholderCount; i++) {
         const member = this.assignedMembers[i];
-        
+
         if (member) {
           // 如果该位置有与会者，添加成员信息
           layoutArray.push(member);
         } else {
           // 如果该位置是空占位符，添加空字符串
-          layoutArray.push('');
+          layoutArray.push("");
         }
       }
-      
+
       // 输出详细信息
       const statistics = this.getLayoutArrayStatistics(layoutArray);
-      console.log('生成布局数组:', {
+      console.log("生成布局数组:", {
         layout: this.activeLayout,
         placeholderCount: placeholderCount,
         ...statistics,
-        array: layoutArray
+        array: layoutArray,
       });
-      
+
       // 输出格式化的数组显示
-      console.log('布局数组格式化显示:', this.formatLayoutArrayDisplay(layoutArray));
-      
+      console.log("布局数组格式化显示:", this.formatLayoutArrayDisplay(layoutArray));
+
       return layoutArray;
     },
 
     // 获取布局数组统计信息
     getLayoutArrayStatistics(layoutArray) {
-      const memberCount = layoutArray.filter(item => item !== '').length;
-      const emptyCount = layoutArray.filter(item => item === '').length;
-      const memberNames = layoutArray
-        .filter(item => item !== '')
-        .map(member => member.name);
-      
+      const memberCount = layoutArray.filter((item) => item !== "").length;
+      const emptyCount = layoutArray.filter((item) => item === "").length;
+      const memberNames = layoutArray.filter((item) => item !== "").map((member) => member.name);
+
       return {
         arrayLength: layoutArray.length,
         memberCount: memberCount,
         emptyCount: emptyCount,
         memberNames: memberNames,
-        utilizationRate: Math.round((memberCount / layoutArray.length) * 100) + '%'
+        utilizationRate: Math.round((memberCount / layoutArray.length) * 100) + "%",
       };
     },
 
     // 格式化布局数组显示
     formatLayoutArrayDisplay(layoutArray) {
-      return layoutArray.map((item, index) => {
-        const position = index + 1;
-        if (item === '') {
-          return `位置${position}: [空]`;
-        } else {
-          return `位置${position}: ${item.name}`;
-        }
-      }).join('\n');
+      return layoutArray
+        .map((item, index) => {
+          const position = index + 1;
+          if (item === "") {
+            return `位置${position}: [空]`;
+          } else {
+            return `位置${position}: ${item.name}`;
+          }
+        })
+        .join("\n");
     },
 
     // 验证布局数组
@@ -709,32 +760,32 @@ export default {
       const validation = {
         isValid: true,
         errors: [],
-        warnings: []
+        warnings: [],
       };
-      
+
       // 检查数组长度
       const expectedLength = this.getLayoutPlaceholderCount(this.activeLayout);
       if (layoutArray.length !== expectedLength) {
         validation.isValid = false;
         validation.errors.push(`数组长度不匹配：期望${expectedLength}，实际${layoutArray.length}`);
       }
-      
+
       // 检查重复成员
-      const members = layoutArray.filter(item => item !== '');
-      const memberIds = members.map(member => member.identity);
+      const members = layoutArray.filter((item) => item !== "");
+      const memberIds = members.map((member) => member.identity);
       const uniqueIds = [...new Set(memberIds)];
-      
+
       if (memberIds.length !== uniqueIds.length) {
         validation.isValid = false;
-        validation.errors.push('检测到重复的成员分配');
+        validation.errors.push("检测到重复的成员分配");
       }
-      
+
       // 检查成员利用率
       const utilizationRate = (members.length / layoutArray.length) * 100;
       if (utilizationRate < 50) {
         validation.warnings.push(`成员利用率较低：${Math.round(utilizationRate)}%`);
       }
-      
+
       return validation;
     },
 
@@ -743,15 +794,129 @@ export default {
         val ? item.name.includes(val) : item.name.includes(this.searchVal)
       );
     },
-    
+
     refreshMemberList() {
       this.getMemberList();
     },
-    
+
     closeCustomLayout() {
       this.$emit("closeCustomLayout");
-    }
-  }
+    },
+    // =============================
+    // 布局记忆：存/取/清/还原
+    // =============================
+    getStorageKey() {
+      const meeting = this.meetingNum || "default";
+      return `${STORAGE_PREFIX}:${meeting}`;
+    },
+    saveLayoutState() {
+      try {
+        const layout = this.activeLayout;
+        const count = this.getLayoutPlaceholderCount(layout);
+        const slots = [];
+        for (let i = 1; i <= count; i++) {
+          const m = this.assignedMembers[i];
+          slots.push(m && m.identity ? m.identity : "");
+        }
+        const state = {
+          version: 1,
+          layout,
+          autoFill: !!this.autoFill,
+          slots,
+          updatedAt: Date.now(),
+        };
+        localStorage.setItem(this.getStorageKey(), JSON.stringify(state));
+      } catch (e) {
+        console.warn("保存布局状态失败:", e);
+      }
+    },
+    loadLayoutState() {
+      try {
+        const raw = localStorage.getItem(this.getStorageKey());
+        if (!raw) return null;
+        const state = JSON.parse(raw);
+        if (!state || !Array.isArray(state.slots) || typeof state.layout !== "string") return null;
+        return state;
+      } catch (e) {
+        console.warn("读取布局状态失败:", e);
+        return null;
+      }
+    },
+    clearLayoutState() {
+      try {
+        localStorage.removeItem(this.getStorageKey());
+      } catch (e) {
+        console.warn("清理布局状态失败:", e);
+      }
+    },
+    restoreLayoutState() {
+      const state = this.loadLayoutState();
+      if (!state) return;
+
+      const savedLayout = state.layout;
+      const slotCount = this.getLayoutPlaceholderCount(savedLayout);
+      this.activeLayout = savedLayout;
+      this.autoFill = !!state.autoFill;
+
+      // 根据当前参会者映射还原
+      const identityToMember = new Map();
+      (this.participantList || []).forEach((m) => {
+        if (m && m.identity) identityToMember.set(m.identity, m);
+      });
+      const nextAssigned = {};
+      for (let i = 0; i < Math.min(state.slots.length, slotCount); i++) {
+        const id = state.slots[i];
+        if (id && identityToMember.has(id)) {
+          nextAssigned[i + 1] = identityToMember.get(id);
+        }
+      }
+      this.assignedMembers = nextAssigned;
+    },
+    // 当参会者变化时，移除已离开的与会者，同时更新已保存的状态
+    reconcileAssignedMembers() {
+      const currentIds = new Set((this.participantList || []).map((m) => m.identity));
+
+      // 拖拽期间不打断，延迟处理
+      if (this.isDragging) {
+        this.pendingReconcile = true;
+        return;
+      }
+
+      // 1) 清理界面中的离会成员
+      let removed = false;
+      const nextAssigned = { ...this.assignedMembers };
+      Object.keys(nextAssigned).forEach((k) => {
+        const mem = nextAssigned[k];
+        if (mem && mem.identity && !currentIds.has(mem.identity)) {
+          delete nextAssigned[k];
+          removed = true;
+        }
+      });
+      if (removed) {
+        this.assignedMembers = nextAssigned;
+      }
+
+      // 2) 同步本地保存的 slots
+      const saved = this.loadLayoutState();
+      if (saved && Array.isArray(saved.slots)) {
+        let changed = false;
+        for (let i = 0; i < saved.slots.length; i++) {
+          const id = saved.slots[i];
+          if (id && !currentIds.has(id)) {
+            saved.slots[i] = "";
+            changed = true;
+          }
+        }
+        if (changed) {
+          try {
+            localStorage.setItem(this.getStorageKey(), JSON.stringify(saved));
+          } catch (e) {
+            console.warn("更新保存的布局状态失败:", e);
+          }
+        }
+      }
+    },
+  },
 };
 </script>
 
@@ -763,7 +928,7 @@ export default {
   position: absolute;
   right: 0;
   top: 0;
-  z-index: 2000;
+  z-index: 3000;
   overflow: hidden;
   color: var(--theme-font-color);
   background: var(--dialog-bg);
@@ -911,7 +1076,7 @@ export default {
         align-items: center;
         justify-content: center;
         padding: 16px;
-        
+
         .layout-container {
           width: 100%;
           max-width: 100%;
@@ -919,44 +1084,44 @@ export default {
           display: grid;
           gap: 8px;
         }
-        
+
         // 4宫格布局 - 2x2网格
         &.layout-grid4 .layout-container {
           grid-template-columns: 1fr 1fr;
           grid-template-rows: 1fr 1fr;
         }
-        
+
         // 9宫格布局 - 3x3网格
         &.layout-grid9 .layout-container {
           grid-template-columns: repeat(3, 1fr);
           grid-template-rows: repeat(3, 1fr);
         }
-        
+
         // 环状布局 - 左上角大窗口 + 右侧纵向 + 下侧横向 + 右下角
         &.layout-ring .layout-container {
           grid-template-columns: repeat(4, 1fr);
           grid-template-rows: repeat(4, 1fr);
-          grid-template-areas: 
+          grid-template-areas:
             "main main main slot1"
             "main main main slot2"
             "main main main slot3"
             "slot4 slot5 slot6 slot7";
         }
-        
+
         // 下焦点布局 - 上排3个小窗口，下方1个大窗口
         &.layout-topSide .layout-container {
           grid-template-columns: repeat(3, 1fr);
           grid-template-rows: 1fr 2fr;
-          grid-template-areas: 
+          grid-template-areas:
             "slot2 slot3 slot4"
             "main main main";
         }
-        
+
         // 左焦点布局 - 左侧1个大窗口，右侧3个纵向排列
         &.layout-rightSide .layout-container {
           grid-template-columns: 2fr 1fr;
           grid-template-rows: repeat(3, 1fr);
-          grid-template-areas: 
+          grid-template-areas:
             "main slot2"
             "main slot3"
             "main slot4";
@@ -1014,7 +1179,8 @@ export default {
         .input-suffix-icon {
           width: 20px;
           height: 20px;
-          background: url("../../assets/image/common/input_search_icon.png") no-repeat center / 100% 100%;
+          background: url("../../assets/image/common/input_search_icon.png") no-repeat center / 100%
+            100%;
         }
       }
       &-list {
@@ -1027,14 +1193,14 @@ export default {
           display: flex;
           align-items: center;
           transition: all 0.2s ease;
-          
+
           &.is-dragging {
             opacity: 0.5;
             background: rgba(255, 255, 255, 0.1);
             border-radius: 4px;
             transform: scale(0.95);
           }
-          
+
           &-drag-icon {
             width: 16px;
             height: 16px;
@@ -1042,7 +1208,7 @@ export default {
             cursor: pointer;
             margin-right: 12px;
             transition: opacity 0.2s ease;
-            
+
             &:hover {
               opacity: 0.8;
             }
@@ -1089,7 +1255,7 @@ export default {
   pointer-events: none;
   user-select: none;
   max-width: 200px;
-  
+
   &-avatar {
     width: 20px;
     height: 20px;
@@ -1098,7 +1264,7 @@ export default {
     margin-right: 6px;
     flex-shrink: 0;
   }
-  
+
   &-name {
     color: var(--theme-font-color);
     font-size: 11px;