From b87b984a4db14add99ebef8b3195e58a27bccb35 Mon Sep 17 00:00:00 2001
From: JoyD <12854922+zqm114@user.noreply.gitee.com>
Date: Fri, 31 Oct 2025 23:58:26 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9VS=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Windows/Robot/Web/src/DockLayout/Area.vue | 63 ++++++++++++++++---
 .../Robot/Web/src/DockLayout/DockLayout.vue   |  7 +++
 2 files changed, 61 insertions(+), 9 deletions(-)
 create mode 100644 AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue

diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue b/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue
index 8b5814c..f604c58 100644
--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue
@@ -1,20 +1,31 @@
 <template>
-  <div class="vs-area select-none">
+  <div class="vs-area select-none" :class="{ 'is-maximized': isMaximized }">
     <!-- 顶部标题栏 -->
     <div class="vs-title-bar">
       <div class="vs-title-left">
-        <span class="vs-app-icon">◈</span>
-        <span class="vs-title-text">{{ title || 'GlobalHook_Test' }}</span>
+        <div class="vs-app-icon" aria-label="AppIcon">
+          <svg class="vs-icon" viewBox="0 0 17 17" aria-hidden="true">
+            <path
+              fill="#68217A"
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              style="shape-rendering: crispEdges;"
+              d="M1.5 4 L4.5 2 L12.5 6.2 L12.5 7.8 L4.5 12 L1.5 10 L6.2 7 Z
+                 M4.7 4.8 L6.3 5.7 L4.7 6.6 Z
+                 M10.9 8.2 L9.3 7.3 L10.9 6.4 Z" />
+          </svg>
+        </div>
+        <span class="vs-title-text">{{ title || '面板区' }}</span>
       </div>
       <div class="vs-title-right title-bar-buttons flex items-center gap-0.5">
-        <button class="button-icon p-[2px] rounded hover:opacity-100 opacity-80" aria-label="最大化">
+        <button class="button-icon p-[2px] rounded hover:opacity-100 opacity-80" aria-label="最大化" @click="onToggleMaximize">
           <svg class="icon-square-svg" width="11" height="11" viewBox="0 0 11 11" aria-hidden="true">
             <rect x="0.5" y="0.5" width="10" height="10" fill="#cbd6ff" stroke="#8ea3d8" stroke-width="1"></rect>
             <rect x="3" y="3" width="5" height="1" fill="#b8c6ff"></rect>
             <rect x="1" y="3" width="8.5" height="6.5" fill="#435d9c"></rect>
           </svg>
         </button>
-        <button class="button-icon p-[2px] rounded hover:opacity-100 opacity-80" aria-label="关闭">
+        <button class="button-icon p-[2px] rounded hover:opacity-100 opacity-80" aria-label="关闭" @click="onClose">
           <svg width="11" height="11" viewBox="0 0 11 11" aria-hidden="true">
             <line x1="2" y1="2" x2="9" y2="9" stroke="#e6efff" stroke-width="1"></line>
             <line x1="2" y1="9" x2="9" y2="2" stroke="#e6efff" stroke-width="1"></line>
@@ -25,19 +36,47 @@
 
     <!-- 内容区域（空） -->
     <div class="vs-content">
-      <div class="vs-right"></div>
+      <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 105 L45 85 L145 165 L315 0 L415 45 L415 375 L310 415 L150 255 L45 335 L0 315 Z
+                M45 145 L105 210 L45 270 Z
+                M205 210 L315 125 L310 290 Z" />                 
+            </svg>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { defineProps } from 'vue'
+import { defineProps, computed, defineEmits } from 'vue'
 
 const props = defineProps({
   id: { type: String, required: true },
-  title: { type: String, default: 'GlobalHook_Test' },
-  resizable: { type: Boolean, default: true }
+  title: { type: String, default: '面板区' },
+  resizable: { type: Boolean, default: true },
+  // 新增：初始状态（支持中文值）
+  WindowState: { type: String, default: '正常' }
 })
+
+// 根据初始状态计算是否最大化
+const isMaximized = computed(() => props.WindowState === '最大化' || props.WindowState === 'maximized')
+
+const emit = defineEmits(['update:WindowState', 'close'])
+
+const onToggleMaximize = () => {
+  const next = isMaximized.value ? '正常' : '最大化'
+  emit('update:WindowState', next)
+}
+
+const onClose = () => emit('close')
 </script>
 
 <style scoped>
@@ -142,4 +181,10 @@ const props = defineProps({
 :deep(::-webkit-scrollbar-thumb:hover) { background: linear-gradient(to bottom, #c1c7e2, #b2b8d9); }
 
 :deep(*) { box-sizing: border-box; }
+.vs-area.is-maximized { width: 100%; height: 100%; }
+.vs-icon-stage { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: transparent; overflow: auto; }
+.vs-app-icon--x200 { width: 2800px; height: 2800px; }
+.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; }
 </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
new file mode 100644
index 0000000..2e71953
--- /dev/null
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue
@@ -0,0 +1,7 @@
+<template>
+  <Area WindowState="最大化" />
+</template>
+
+<script setup>
+import Area from './Area.vue';
+</script>
\ No newline at end of file