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

<template>
  <div class="dock-layout">
    <!-- 主区域 -->
    <Area :WindowState="windowState" :showTitleBar="false" title="主区域" />
    
    <!-- 浮动区域列表 -->
    <div
      v-for="area in floatingAreas"
      :key="area.id"
      class="floating-area"
      :style="{
        left: area.x + 'px',
        top: area.y + 'px',
        width: area.width + 'px',
        height: area.height + 'px'
      }"
    >
      <Area
        :id="area.id"
        :title="area.title"
        :WindowState="'正常'"
        :showTitleBar="true"
        :width="area.width"
        :height="area.height"
        @close="onCloseFloatingArea(area.id)"
      />
    </div>
  </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 = () => {
  const newArea = {
    id: `floating-area-${areaIdCounter++}`,
    title: `浮动区域 ${areaIdCounter - 1}`,
    x: 50 + (areaIdCounter - 2) * 20, // 错开位置
    y: 50 + (areaIdCounter - 2) * 20,
    width: 300,
    height: 200,
    collapsed: false,
    toolbarExpanded: false
  }
  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;
}

/* 浮动区域样式 */
.floating-area {
  position: absolute;
  z-index: 10;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  background-color: #fff;
  overflow: hidden;
}

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

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