修复与增强 DockLayout/Area：实现最大化/还原联动；默认 300x250 居中；修复模板闭合标签；调整最小尺寸匹配默认大小

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

@@ -1,5 +1,6 @@
 <template>
-  <div class="vs-area select-none" :class="{ 'is-maximized': isMaximized }">
+  <div class="vs-area-wrapper">
+    <div class="vs-area select-none" :class="{ 'is-maximized': isMaximized }" :style="areaStyle">
     <!-- 顶部标题栏 -->
     <div class="vs-title-bar">
       <div class="vs-title-left">
@@ -61,6 +62,7 @@
         </div>
       </div>
     </div>
+    </div>
   </div>
 </template>
 
@@ -72,12 +74,23 @@ const props = defineProps({
   title: { type: String, default: '面板区' },
   resizable: { type: Boolean, default: true },
   // 新增：初始状态（支持中文值）
-  WindowState: { type: String, default: '正常' }
+  WindowState: { type: String, default: '正常' },
+  // 新增：默认尺寸
+  width: { type: Number, default: 300 },
+  height: { type: Number, default: 250 }
 })
 
 // 根据初始状态计算是否最大化
 const isMaximized = computed(() => props.WindowState === '最大化' || props.WindowState === 'maximized')
 
+// 新增：根据状态计算尺寸样式
+const areaStyle = computed(() => {
+  if (isMaximized.value) {
+    return { width: '100%', height: '100%' }
+  }
+  return { width: `${props.width}px`, height: `${props.height}px` }
+})
+
 const emit = defineEmits(['update:WindowState', 'close'])
 
 const onToggleMaximize = () => {
@@ -110,8 +123,8 @@ const onClose = () => emit('close')
   flex-direction: column;
   background: var(--vs-bg);
   border: 1px solid var(--vs-border);
-  min-width: 400px;
-  min-height: 200px;
+  min-width: 300px;
+  min-height: 250px;
 }
 
 /* 标题栏 */
@@ -196,4 +209,13 @@ const onClose = () => emit('close')
 .vs-app-icon { width: 14px; height: 14px; display: inline-block; background: transparent; opacity: 0.95; }
 .vs-icon { width: 100%; height: 100%; shape-rendering: crispEdges; }
 .vs-app-icon svg { display: block; }
+
+/* 外层包裹，居中内容 */
+.vs-area-wrapper { 
+  width: 100%; 
+  height: 100%; 
+  display: flex; 
+  align-items: center; 
+  justify-content: center; 
+}
 </style>

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

@@ -1,7 +1,10 @@
 <template>
-  <Area WindowState="最大化" />
+  <Area :WindowState="windowState" @update:WindowState="handleUpdate" />
 </template>
 
 <script setup>
+import { ref } from 'vue'
 import Area from './Area.vue';
+const windowState = ref('最大化')
+const handleUpdate = (next) => { windowState.value = next }
 </script>