From 87ccd2bbec8e705259b3abf3dd244c0088c9e059 Mon Sep 17 00:00:00 2001
From: AutoRobot Dev <autobot@example.local>
Date: Sat, 1 Nov 2025 14:23:35 +0700
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E4=B8=8E=E5=A2=9E=E5=BC=BA?=
 =?UTF-8?q?=20DockLayout/Area=EF=BC=9A=E5=AE=9E=E7=8E=B0=E6=9C=80=E5=A4=A7?=
 =?UTF-8?q?=E5=8C=96/=E8=BF=98=E5=8E=9F=E8=81=94=E5=8A=A8=EF=BC=9B?=
 =?UTF-8?q?=E9=BB=98=E8=AE=A4=20300x250=20=E5=B1=85=E4=B8=AD=EF=BC=9B?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=A8=A1=E6=9D=BF=E9=97=AD=E5=90=88=E6=A0=87?=
 =?UTF-8?q?=E7=AD=BE=EF=BC=9B=E8=B0=83=E6=95=B4=E6=9C=80=E5=B0=8F=E5=B0=BA?=
 =?UTF-8?q?=E5=AF=B8=E5=8C=B9=E9=85=8D=E9=BB=98=E8=AE=A4=E5=A4=A7=E5=B0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Windows/Robot/Web/src/DockLayout/Area.vue | 30 ++++++++++++++++---
 .../Robot/Web/src/DockLayout/DockLayout.vue   |  5 +++-
 2 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue b/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue
index 389718f..3fd8e26 100644
--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue
+++ b/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>
\ No newline at end of file
diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue b/AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue
index 2e71953..8f5481c 100644
--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue
+++ b/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>
\ No newline at end of file