mdm-client 1.0.0

package/src/components/other/customLayout.vue

@@ -0,0 +1,1112 @@
+<template>
+  <div class="custom-layout">
+    <div class="custom-layout-header">
+      <div class="custom-layout-header-left">
+        <div class="custom-layout-header-left-icon"></div>
+        <div class="custom-layout-header-left-title">
+          <span>自定义布局</span>
+        </div>
+      </div>
+      <div class="close-icon" @click="closeCustomLayout"></div>
+    </div>
+    <div class="custom-layout-content">
+      <div class="custom-layout-simulate">
+        <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" 
+                :key="item"
+                @click="handleLayoutChange(item)"
+              >
+                <div
+                  :class="
+                    ['layout-list-item-icon',
+                    { 'layout-list-item-icon-active': activeLayout === item }
+                  ]
+                  "
+                ></div>
+              </div>
+            </div>
+          </div>
+          <div class="custom-layout-simulate-header-options">
+            <div class="auto-fill">
+              <span>画面动态填充</span>
+              <el-switch v-model="autoFill" />
+            </div>
+          </div>
+        </div>
+        <div :class="['custom-layout-simulate-show', `layout-${activeLayout}`]">
+          <div class="layout-container">
+            <LayoutPlaceholder
+              v-for="index in placeholderCount" 
+              :key="index"
+              :index="index"
+              :member="assignedMembers[index]"
+              :layout-type="activeLayout"
+              :is-hover="hoverPlaceholderIndex === index"
+              @clear="handleClearMember(index)"
+            />
+          </div>
+        </div>
+        <div class="custom-layout-simulate-footer">
+          <div class="btn btn-primary" v-throttle-click:500="handleReset">重置</div>
+          <div class="btn btn-primary" v-throttle-click:1000="handleApply">应用</div>
+        </div>
+      </div>
+      <div class="custom-layout-member">
+        <div class="custom-layout-member-header">
+          <div class="custom-layout-member-header-options">
+            <span>参会人员</span>
+          </div>
+          <div class="custom-layout-member-header-options">
+            <div class="refresh-icon" @click="refreshMemberList"></div>
+          </div>
+        </div>
+        <el-input v-model="searchVal" placeholder="请输入名称查询">
+          <template slot="suffix">
+            <div class="input-suffix-icon"></div>
+          </template>
+        </el-input>
+        <div class="custom-layout-member-list">
+          <div
+            class="custom-layout-member-list-item"
+            :class="{ 'is-dragging': isDragging && currentDragMember && currentDragMember.identity === item.identity }"
+            v-for="item of memberList"
+            :key="item.identity"
+          >
+            <div 
+              class="custom-layout-member-list-item-drag-icon"
+              @mousedown="handleMouseDown(item, $event)"
+              @touchstart="handleTouchStart(item, $event)"
+            ></div>
+            <div class="custom-layout-member-list-item-group">
+              <div class="custom-layout-member-list-item-group-avatar"></div>
+              <div class="custom-layout-member-list-item-group-name">{{ item.name }}</div>
+            </div>
+          </div>
+        </div>
+        
+        <!-- 拖拽时的浮动元素 -->
+        <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>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import LayoutPlaceholder from "./LayoutPlaceholder.vue";
+import { ShowMessage } from "@/utils/index";
+
+export default {
+  name: "CustomLayout",
+  components: {
+    LayoutPlaceholder
+  },
+  props: {
+    participantList: {
+      type: Array,
+      default: () => [],
+    },
+    meetingNum: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      searchVal: "",
+      memberList: [],
+      autoFill: true,
+      layoutList: ["grid4", "grid9", "ring", "topSide", "rightSide"],
+      activeLayout: "grid4",
+      // 拖拽相关状态
+      isDragging: false,
+      dragStartTimer: null,
+      currentDragMember: null,
+      assignedMembers: {},
+      dragGhostStyle: {},
+      dragOffset: { x: 0, y: 0 },
+      hoverPlaceholderIndex: null,
+      currentMousePosition: { x: 0, y: 0 },
+      liveClient: null,
+      showMessage: new ShowMessage()
+    };
+  },
+  computed: {
+    participantNum() {
+      return this.participantList.length;
+    },
+    memberNum() {
+      return this.memberList.length;
+    },
+    // 计算不同布局下的占位元素数量
+    placeholderCount() {
+      return this.getLayoutPlaceholderCount(this.activeLayout);
+    }
+  },
+  watch: {
+    searchVal(newVal) {
+      this.getMemberList(newVal);
+    },
+    participantNum(newVal) {
+      this.getMemberList();
+    }
+  },
+  mounted() {
+    this.getMemberList();
+    this.liveClient = window["liveClient"];
+  },
+  beforeDestroy() {
+    this.liveClient = null;
+  },
+  methods: {
+    // 获取指定布局的占位符数量
+    getLayoutPlaceholderCount(layout) {
+      const layoutCountMap = {
+        grid4: 4,
+        grid9: 9,
+        ring: 8,
+        topSide: 4,
+        rightSide: 4
+      };
+      return layoutCountMap[layout] || 4;
+    },
+
+    // 长按开始拖拽 - 鼠标事件
+    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.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.addEventListener('touchmove', handleTouchMove);
+      document.addEventListener('touchend', handleTouchEnd);
+    },
+
+    // 开始长按计时器
+    startDragTimer(member) {
+      this.clearDragTimer();
+      this.dragStartTimer = setTimeout(() => {
+        this.startDrag(member);
+      }, 500);
+    },
+
+    // 清除长按计时器
+    clearDragTimer() {
+      if (this.dragStartTimer) {
+        clearTimeout(this.dragStartTimer);
+        this.dragStartTimer = null;
+      }
+    },
+
+    // 开始拖拽
+    startDrag(member) {
+      this.isDragging = true;
+      this.currentDragMember = member;
+      
+      // 设置初始浮动元素位置
+      const { x, y } = this.currentMousePosition;
+      this.updateDragPosition(x, y);
+      
+      console.log('开始拖拽:', member.name);
+    },
+
+    // 更新拖拽位置
+    updateDragPosition(clientX, clientY) {
+      this.dragGhostStyle = {
+        position: 'fixed',
+        left: `${clientX + this.dragOffset.x}px`,
+        top: `${clientY + this.dragOffset.y}px`,
+        pointerEvents: 'none',
+        zIndex: 9999
+      };
+      
+      // 检测是否悬停在占位符上
+      this.checkHoverTarget(clientX, clientY);
+    },
+
+    // 检测悬停目标
+    checkHoverTarget(clientX, clientY) {
+      // 使用鼠标的实际位置来检测下方元素
+      const elementBelow = document.elementFromPoint(clientX, clientY);
+      const placeholder = elementBelow?.closest('.layout-placeholder');
+      
+      if (placeholder) {
+        const index = Array.from(placeholder.parentNode.children).indexOf(placeholder) + 1;
+        if (index > 0 && index <= this.placeholderCount) {
+          this.hoverPlaceholderIndex = index;
+        } else {
+          this.hoverPlaceholderIndex = null;
+        }
+      } else {
+        this.hoverPlaceholderIndex = null;
+      }
+    },
+
+    // 结束拖拽
+    endDrag() {
+      if (this.isDragging) {
+        // 检查是否拖拽到了占位符上
+        this.checkDropTarget();
+        
+        this.isDragging = false;
+        this.currentDragMember = null;
+        this.dragGhostStyle = {};
+        this.hoverPlaceholderIndex = null;
+        this.currentMousePosition = { x: 0, y: 0 };
+      }
+    },
+
+    // 检查拖拽目标
+    checkDropTarget() {
+      // 使用保存的鼠标位置来检测拖拽目标
+      const { x, y } = this.currentMousePosition;
+      
+      const elementBelow = document.elementFromPoint(x, y);
+      const placeholder = elementBelow?.closest('.layout-placeholder');
+      
+      if (placeholder) {
+        const index = Array.from(placeholder.parentNode.children).indexOf(placeholder) + 1;
+        if (index > 0 && index <= this.placeholderCount) {
+          this.handleDrop(index, this.currentDragMember);
+        }
+      }
+    },
+
+    // 处理拖拽到占位符
+    handleDrop(index, draggedMember) {
+      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} 替换`);
+        } else {
+          console.log('拖拽成功:', draggedMember.name, '已分配到位置', index);
+        }
+        
+        // 可以在这里添加成功提示
+        // ElMessage.success(`${draggedMember.name} 已分配到位置 ${index}`);
+      }
+    },
+
+    // 清除指定成员在其他位置的显示
+    clearMemberFromOtherPositions(memberIdentity) {
+      const clearedPositions = [];
+      for (const key in this.assignedMembers) {
+        if (this.assignedMembers[key]?.identity === memberIdentity) {
+          clearedPositions.push(key);
+          delete this.assignedMembers[key];
+        }
+      }
+      if (clearedPositions.length > 0) {
+        console.log('清除重复显示:', `成员在位置 [${clearedPositions.join(', ')}] 的显示已清除`);
+      }
+    },
+
+    // 清空占位符成员
+    handleClearMember(index) {
+      const member = this.assignedMembers[index];
+      if (member) {
+        delete this.assignedMembers[index];
+        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') {
+        this.handleTopSideLayoutTransition();
+      }
+      
+      // 特殊处理：切换到rightSide布局时的成员重排
+      if (layout === 'rightSide' && oldLayout !== 'rightSide') {
+        this.handleRightSideLayoutTransition();
+      }
+      
+      // 特殊处理：切换到ring布局时的成员重排
+      if (layout === 'ring' && oldLayout !== 'ring') {
+        this.handleRingLayoutTransition();
+      }
+      
+      // 清空超出新布局占位符数量的成员
+      const clearedMembers = [];
+      for (const key in this.assignedMembers) {
+        const index = parseInt(key);
+        if (index > newPlaceholderCount) {
+          const member = this.assignedMembers[key];
+          clearedMembers.push(`${member.name}(位置${index})`);
+          delete this.assignedMembers[key];
+        }
+      }
+      
+      if (clearedMembers.length > 0) {
+        console.log(`布局切换：清空超出范围的成员 [${clearedMembers.join(', ')}]`);
+      }
+      
+      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}移动到焦点位置`);
+            this.assignedMembers[1] = this.assignedMembers[i];
+            delete this.assignedMembers[i];
+            break;
+          }
+        }
+      }
+      
+      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}移动到焦点位置`);
+            this.assignedMembers[1] = this.assignedMembers[i];
+            delete this.assignedMembers[i];
+            break;
+          }
+        }
+      }
+      
+      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];
+            fromPosition = position;
+            break;
+          }
+        }
+        
+        if (movedMember && fromPosition) {
+          console.log(`ring布局优化：将位置${fromPosition}的${movedMember.name}移动到焦点位置`);
+          this.assignedMembers[1] = movedMember;
+          delete this.assignedMembers[fromPosition];
+          
+          // 启用环状分布优化，让剩余成员排列更加平衡
+          this.optimizeRingMemberDistribution();
+        } else {
+          console.log('ring布局：没有成员需要移动到焦点位置');
+        }
+      } else {
+        console.log(`ring布局：焦点位置已有成员 ${this.assignedMembers[1].name}，无需重排`);
+      }
+      
+      console.log('ring布局转换完成：位置1为焦点位置，位置2-8为环状排列');
+    },
+
+    // 优化ring布局的成员分布
+    optimizeRingMemberDistribution() {
+      // 收集所有非焦点位置的成员
+      const ringMembers = [];
+      for (let i = 2; i <= 8; i++) {
+        if (this.assignedMembers[i]) {
+          ringMembers.push({
+            member: this.assignedMembers[i],
+            originalPosition: i
+          });
+          delete this.assignedMembers[i];
+        }
+      }
+      
+      if (ringMembers.length === 0) {
+        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布局优化：成员分布已经是最优状态，无需调整');
+      }
+    },
+
+    handleReset() {
+      this.activeLayout = "grid4";
+      this.autoFill = true;
+      this.assignedMembers = {};
+    },
+
+    handleApply() {
+      // 获取当前布局的占位符数量
+      const currentPlaceholderCount = this.getLayoutPlaceholderCount(this.activeLayout);
+      
+      // 生成布局映射数组
+      const layoutArray = this.generateLayoutArray(currentPlaceholderCount);
+      
+      // 验证布局数组
+      const validation = this.validateLayoutArray(layoutArray);
+      
+      if (!validation.isValid) {
+        console.error('布局验证失败:', validation.errors);
+        // 可以在这里显示错误提示给用户
+        // ElMessage.error('布局配置有误，请检查后重试');
+        return null;
+      }
+      
+      if (validation.warnings.length > 0) {
+        console.warn('布局验证警告:', validation.warnings);
+        // 可以在这里显示警告提示给用户
+        // ElMessage.warning('布局配置存在一些问题，建议检查');
+      }
+      
+      // 这里可以发送应用布局的事件或API调用
+      console.log('应用布局成功:', {
+        layout: this.activeLayout,
+        autoFill: this.autoFill,
+        placeholderCount: currentPlaceholderCount,
+        layoutArray: layoutArray,
+        assignedMembers: this.assignedMembers,
+        validation: validation
+      });
+      
+      const handleCurrentLayout = () => {
+        let layout = ""
+        switch(this.activeLayout) {
+          case "grid4":
+            layout = "four_grids"
+            break;
+          case "grid9":
+            layout = "nine_grids"
+            break;
+          case "ring":
+            layout = "custom1"
+            break;
+          case "topSide":
+            layout = "custom2"
+            break;
+          case "rightSide":
+            layout = "custom3"
+            break;
+          default:
+            layout = "four_grids"
+            break;
+        }
+        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融屏应用布局失败")
+      });
+    },
+
+    // 生成布局映射数组
+    generateLayoutArray(placeholderCount) {
+      const layoutArray = [];
+      
+      // 遍历每个位置，构建数组
+      for (let i = 1; i <= placeholderCount; i++) {
+        const member = this.assignedMembers[i];
+        
+        if (member) {
+          // 如果该位置有与会者，添加成员信息
+          layoutArray.push(member);
+        } else {
+          // 如果该位置是空占位符，添加空字符串
+          layoutArray.push('');
+        }
+      }
+      
+      // 输出详细信息
+      const statistics = this.getLayoutArrayStatistics(layoutArray);
+      console.log('生成布局数组:', {
+        layout: this.activeLayout,
+        placeholderCount: placeholderCount,
+        ...statistics,
+        array: 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);
+      
+      return {
+        arrayLength: layoutArray.length,
+        memberCount: memberCount,
+        emptyCount: emptyCount,
+        memberNames: memberNames,
+        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');
+    },
+
+    // 验证布局数组
+    validateLayoutArray(layoutArray) {
+      const validation = {
+        isValid: true,
+        errors: [],
+        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 uniqueIds = [...new Set(memberIds)];
+      
+      if (memberIds.length !== uniqueIds.length) {
+        validation.isValid = false;
+        validation.errors.push('检测到重复的成员分配');
+      }
+      
+      // 检查成员利用率
+      const utilizationRate = (members.length / layoutArray.length) * 100;
+      if (utilizationRate < 50) {
+        validation.warnings.push(`成员利用率较低：${Math.round(utilizationRate)}%`);
+      }
+      
+      return validation;
+    },
+
+    getMemberList(val) {
+      this.memberList = this.participantList.filter((item) =>
+        val ? item.name.includes(val) : item.name.includes(this.searchVal)
+      );
+    },
+    
+    refreshMemberList() {
+      this.getMemberList();
+    },
+    
+    closeCustomLayout() {
+      this.$emit("closeCustomLayout");
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/style/mixin.scss";
+.custom-layout {
+  width: 820px;
+  height: 100%;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 2000;
+  overflow: hidden;
+  color: var(--theme-font-color);
+  background: var(--dialog-bg);
+  border: 1px solid var(--dialog-border-color);
+  padding: 0 18px;
+  &-header {
+    width: 100%;
+    height: 62px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-top: 14px;
+    border-bottom: 1px solid var(--dialog-border-color);
+    &-left {
+      display: flex;
+      align-items: center;
+      &-icon {
+        width: 24px;
+        height: 24px;
+        background: var(--custom-layout-header-icon) no-repeat center / 100% 100%;
+        margin-right: 12px;
+      }
+      &-title {
+        font-weight: 400;
+        font-size: 18px;
+        font-family: var(--title-font);
+      }
+    }
+    .close-icon {
+      width: 17px;
+      height: 17px;
+      background: var(--close-icon) no-repeat center / 100% 100%;
+      cursor: pointer;
+    }
+  }
+  &-content {
+    width: 100%;
+    height: calc(100% - 62px);
+    display: flex;
+    align-items: flex-start;
+    flex-wrap: nowrap;
+    .custom-layout-simulate {
+      width: 548px;
+      flex: 0 0 auto;
+      height: 100%;
+      &-header {
+        width: 100%;
+        height: 58px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        &-options {
+          .layout-list {
+            display: flex;
+            align-items: center;
+            &-item {
+              width: 29px;
+              height: 22px;
+              cursor: pointer;
+              &-icon {
+                width: 100%;
+                height: 100%;
+              }
+              &:not(:last-child) {
+                margin-right: 17px;
+              }
+            }
+            .grid4 {
+              .layout-list-item-icon {
+                background: var(--custom-layout-grid4-icon) no-repeat center / 100% 100%;
+              }
+              .layout-list-item-icon-active {
+                background: var(--custom-layout-grid4-active-icon) no-repeat center / 100% 100%;
+              }
+            }
+            .grid9 {
+              .layout-list-item-icon {
+                background: var(--custom-layout-grid9-icon) no-repeat center / 100% 100%;
+              }
+              .layout-list-item-icon-active {
+                background: var(--custom-layout-grid9-active-icon) no-repeat center / 100% 100%;
+              }
+            }
+            .grid16 {
+              .layout-list-item-icon {
+                background: var(--custom-layout-grid16-icon) no-repeat center / 100% 100%;
+              }
+              .layout-list-item-icon-active {
+                background: var(--custom-layout-grid16-active-icon) no-repeat center / 100% 100%;
+              }
+            }
+            .ring {
+              .layout-list-item-icon {
+                background: var(--custom-layout-ring-icon) no-repeat center / 100% 100%;
+              }
+              .layout-list-item-icon-active {
+                background: var(--custom-layout-ring-active-icon) no-repeat center / 100% 100%;
+              }
+            }
+            .topSide {
+              .layout-list-item-icon {
+                background: var(--custom-layout-topside-icon) no-repeat center / 100% 100%;
+              }
+              .layout-list-item-icon-active {
+                background: var(--custom-layout-topside-active-icon) no-repeat center / 100% 100%;
+              }
+            }
+            .rightSide {
+              .layout-list-item-icon {
+                background: var(--custom-layout-rightside-icon) no-repeat center / 100% 100%;
+              }
+              .layout-list-item-icon-active {
+                background: var(--custom-layout-rightside-active-icon) no-repeat center / 100% 100%;
+              }
+            }
+          }
+          .auto-fill {
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+            span {
+              font-weight: 400;
+              font-size: 12px;
+              font-family: var(--main-font);
+              margin-right: 6px;
+              white-space: nowrap;
+              flex: 0 0 auto;
+            }
+            :deep(.el-switch) {
+              @include switch;
+              &.is-checked {
+                .el-switch__core {
+                  background: var(--switch-on-color);
+                }
+              }
+            }
+          }
+        }
+      }
+      &-show {
+        width: 100%;
+        height: calc(100% - 139px);
+        background: var(--custom-layout-show-bg) no-repeat center / 100% 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 16px;
+        
+        .layout-container {
+          width: 100%;
+          max-width: 100%;
+          aspect-ratio: 16 / 9;
+          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: 
+            "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: 
+            "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: 
+            "main slot2"
+            "main slot3"
+            "main slot4";
+        }
+      }
+      &-footer {
+        width: 100%;
+        height: 81px;
+        display: flex;
+        padding-top: 20px;
+        align-items: flex-start;
+        justify-content: center;
+        .btn {
+          width: 80px;
+          height: 36px;
+          @include button;
+          &:not(:last-child) {
+            margin-right: 12px;
+          }
+          &-primary {
+            @include btnPrimary;
+          }
+        }
+      }
+    }
+    .custom-layout-member {
+      margin-left: 16px;
+      flex: 1;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      &-header {
+        width: 100%;
+        height: 58px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        &-options {
+          font-weight: 400;
+          font-size: 18px;
+          font-family: var(--title-font);
+          .refresh-icon {
+            width: 16px;
+            height: 16px;
+            background: var(--custom-layout-refresh-icon) no-repeat center / 100% 100%;
+            cursor: pointer;
+          }
+        }
+      }
+      :deep(.el-input) {
+        width: 100%;
+        height: 42px;
+        margin-bottom: 16px;
+        @include elInput;
+        .input-suffix-icon {
+          width: 20px;
+          height: 20px;
+          background: url("../../assets/image/common/input_search_icon.png") no-repeat center / 100% 100%;
+        }
+      }
+      &-list {
+        width: 100%;
+        height: calc(100% - 120px);
+        overflow-y: auto;
+        &-item {
+          width: 100%;
+          height: 32px;
+          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;
+            background: var(--custom-layout-drag-icon) no-repeat center / 100% 100%;
+            cursor: pointer;
+            margin-right: 12px;
+            transition: opacity 0.2s ease;
+            
+            &:hover {
+              opacity: 0.8;
+            }
+          }
+          &-group {
+            display: flex;
+            align-items: center;
+            &-avatar {
+              width: 32px;
+              height: 32px;
+              background: var(--custom-layout-user-avatar) no-repeat center / 100% 100%;
+              margin-right: 12px;
+            }
+            &-name {
+              font-weight: 400;
+              font-size: 16px;
+              font-family: var(--main-font);
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              max-width: 200px;
+              width: fit-content;
+            }
+          }
+          &:not(:last-child) {
+            margin-bottom: 12px;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 拖拽时的浮动元素样式
+.drag-ghost {
+  background: var(--meeting-participant-bg);
+  border: 2px solid var(--theme-color);
+  border-radius: 6px;
+  padding: 6px 10px;
+  display: flex;
+  align-items: center;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  opacity: 0.9;
+  pointer-events: none;
+  user-select: none;
+  max-width: 200px;
+  
+  &-avatar {
+    width: 20px;
+    height: 20px;
+    background: var(--custom-layout-user-avatar) no-repeat center / cover;
+    border-radius: 50%;
+    margin-right: 6px;
+    flex-shrink: 0;
+  }
+  
+  &-name {
+    color: var(--theme-font-color);
+    font-size: 11px;
+    font-weight: 400;
+    font-family: var(--main-font);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+</style>