本地提交：添加浮动区域列表功能

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

@@ -46,21 +46,7 @@
 
     <!-- 内容区域（空） -->
     <div class="vs-content">
-      <div class="vs-right">
-        <div class="vs-icon-stage">
-          <div aria-label="AppIcon">
-            <svg width="560" height="560" viewBox="0 0 415 415" aria-hidden="true">
-              <path
-                fill="#68217A"
-                fill-rule="evenodd"
-                clip-rule="evenodd"
-                d="M0 4.2 L1.8 3.4 L5.8 6.6 L12.6 0 L16.6 1.8 L16.6 15 L12.4 16.6 L6 10.2 L1.8 13.4 L0 12.6 Z
-                 M1.8 5.8 L4.2 8.4 L1.8 10.8 Z
-                 M8.2 8.4 L12.6 5 L12.4 11.6 Z" />                 
-            </svg>
-          </div>
-        </div>
-      </div>
+      <!-- 内容区域已清空 -->
     </div>
     </div>
   </div>

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

@@ -1,9 +1,91 @@
 <template>
-  <Area :WindowState="windowState" :showTitleBar="false" />
+  <div class="dock-layout">
+    <!-- 主区域 -->
+    <Area :WindowState="windowState" :showTitleBar="false" title="主区域" />
+   </div>
 </template>
 
 <script setup>
 import { ref } 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
+  }
+}
 </script>
+
+<style scoped>
+.dock-layout {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+/* 添加浮动区域按钮样式 */
+.add-floating-btn {
+  font-size: 14px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.add-floating-btn:active {
+  transform: scale(0.98);
+}
+</style>