JoyD/AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue

<template>
  <div class="dock-layout">
    <!-- 主区域 -->
    <Area :WindowState="windowState" :showTitleBar="false" title="主区域" />
    
    <!-- 浮动区域列表 -->
    <Area
      v-for="area in floatingAreas"
      :key="area.id"
      :id="area.id"
      :title="area.title"
      :WindowState="area.WindowState"
      :showTitleBar="area.showTitleBar"
      :width="area.width"
      :height="area.height"
      :style="{
        position: 'absolute',
        left: area.x + 'px',
        top: area.y + 'px',
        zIndex: 10
      }"
      @close="onCloseFloatingArea(area.id)"
    />
  </div>
</template>

<script setup>
import { ref, defineExpose } from 'vue'
import Area from './Area.vue';
import Panel from './Panel.vue';

// 主区域状态
const windowState = ref('最大化')

// 浮动区域列表
const floatingAreas = ref([])

// 区域ID计数器
let areaIdCounter = 1

// 添加新的浮动区域
const addFloatingArea = () => {
  // 创建新的Area组件配置
  const newArea = {
    id: `floating-area-${areaIdCounter++}`,
    title: `浮动区域 ${areaIdCounter - 1}`,
    x: 50 + (areaIdCounter - 2) * 20, // 错开位置
    y: 50 + (areaIdCounter - 2) * 20,
    width: 300,
    height: 200,
    WindowState: '正常',
    showTitleBar: true
  }
  floatingAreas.value.push(newArea)
}

// 切换折叠状态
const onToggleCollapse = (id) => {
  const area = floatingAreas.value.find(a => a.id === id)
  if (area) {
    area.collapsed = !area.collapsed
  }
}

// 最大化/还原
const onMaximize = (id) => {
  const area = floatingAreas.value.find(a => a.id === id)
  if (area) {
    // 简单实现：交换宽高
    const temp = area.width
    area.width = area.height
    area.height = temp
  }
}

// 关闭浮动区域
const onCloseFloatingArea = (id) => {
  const index = floatingAreas.value.findIndex(a => a.id === id)
  if (index !== -1) {
    floatingAreas.value.splice(index, 1)
  }
}

// 切换工具栏
const onToggleToolbar = (id) => {
  const area = floatingAreas.value.find(a => a.id === id)
  if (area) {
    area.toolbarExpanded = !area.toolbarExpanded
  }
}

// 暴露方法给父组件
defineExpose({
  addFloatingArea
})
</script>

<style scoped>
.dock-layout {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* 浮动区域样式已直接应用到Area组件 */

/* 添加浮动区域按钮样式 */
.add-floating-btn {
  font-size: 14px;
  cursor: pointer;
  user-select: none;
}

.add-floating-btn:active {
  transform: scale(0.98);
}
</style>