From b7d389e46de4401afce283f67002fad69dbe62da Mon Sep 17 00:00:00 2001
From: zqm <zqm@example.com>
Date: Fri, 7 Nov 2025 09:44:17 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9Area.vue=E4=B8=AD=E7=9A=84SVG?=
 =?UTF-8?q?=E8=B7=AF=E5=BE=84=E5=AE=9A=E4=B9=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Windows/Robot/Web/src/DockLayout/Area.vue | 112 ++++++++++++------
 1 file changed, 73 insertions(+), 39 deletions(-)

diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue b/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue
index 00d1327..07d0dd2 100644
--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue
@@ -92,62 +92,96 @@
       <!-- 内容区域 -->
       <div class="vs-content">
         <!-- 这里是内容区域，使用slot接收子组件，并监听Panel的maximize事件 -->
-        <slot @maximize="onPanelMaximize"></slot>
-        <svg width="41" height="41" viewBox="0 0 40 40" aria-hidden="true">
+        <slot @maximize="onPanelMaximize"></slot>        
+        <!-- 1. 定义可复用组件（symbol）：封装所有渐变和路径（只写一次） -->
+        <svg width="0" height="0" viewBox="0 0 40 40" aria-hidden="true">
           <defs>
+            <!-- 渐变定义（共用，只写一次） -->
             <linearGradient 
               id="lightGradient" 
-              x1="0%" y1="0%"
-              x2="100%" y2="100%">
-              <stop offset="0%" stop-color="#DCE3F5" /> <!-- 高光色（比原色亮2个色阶） -->
-              <stop offset="100%" stop-color="#B7BED1" /> <!-- 阴影色（比原色暗2个色阶） -->
+              x1="0%" y1="0%" x2="100%" y2="100%">
+              <stop offset="0%" stop-color="#DCE3F5" />
+              <stop offset="100%" stop-color="#B7BED1" />
             </linearGradient>
             <linearGradient 
               id="Area" 
-              x1="50%" y1="0%"
-              x2="50%" y2="100%">
+              x1="50%" y1="0%" x2="50%" y2="100%">
               <stop offset="0%" stop-color="#F0E2BC" /> 
               <stop offset="100%" stop-color="#B09556" />
             </linearGradient>
           </defs>
-          <path
-            fill="#61697E"
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M0 0 L40 0 L40 40 L0 40 Z
-              M1 1 L39 1 L39 39 L1 39 Z" />
-          <path
-            fill="#A1A9C4"
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M1 1 L39 1 L39 39 L1 39 Z
-              M4 5 L5 4 L35 4 L36 5 L36 35 L35 36 L5 36 L4 35 Z" />
-          <path
-            fill="#7E869C"
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M4 5 L5 4 L35 4 L36 5 L36 35 L35 36 L5 36 L4 35 Z
-                M6 7 L7 6 L33 6 L34 7 L34 33 L33 34 L7 34 L6 33 Z" />
-          <path
-            fill="url(#lightGradient)"
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M6 7 L7 6 L33 6 L34 7 L34 33 L33 34 L7 34 L6 33 Z" />
-          <path
-            fill="#4C5E83"
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M8 8 L32 8 L32 20 L31 21 L9 21 L8 20 Z" />
+
+          <!-- 封装所有图形为 symbol（id 用于后续调用） -->
+          <symbol id="shared-icon" viewBox="0 0 40 40">
+            <path
+              fill="#61697E"
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M0 0 L40 0 L40 40 L0 40 Z M1 1 L39 1 L39 39 L1 39 Z" />
+            <path
+              fill="#A1A9C4"
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M1 1 L39 1 L39 39 L1 39 Z M4 5 L5 4 L35 4 L36 5 L36 35 L35 36 L5 36 L4 35 Z" />
+            <path
+              fill="#7E869C"
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M4 5 L5 4 L35 4 L36 5 L36 35 L35 36 L5 36 L4 35 Z M6 7 L7 6 L33 6 L34 7 L34 33 L33 34 L7 34 L6 33 Z" />
+            <path
+              fill="url(#lightGradient)"
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M6 7 L7 6 L33 6 L34 7 L34 33 L33 34 L7 34 L6 33 Z" />
+            <path
+              fill="#4C5E83"
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M8 8 L32 8 L32 20 L31 21 L9 21 L8 20 Z" />
+            <path
+              fill="#4C5E83"
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M16 30 L20 26 L23 30 Z" />
+          </symbol>
+        </svg>
+
+        <!-- 2. 第一个 SVG：不旋转，直接调用共用组件 -->
+        <svg width="41" height="41" viewBox="0 0 40 40" aria-hidden="true">
+          <use xlink:href="#shared-icon" />           
+            <path
+              fill="url(#Area)"
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M10 13 L30 13 L30 19 L10 19 Z" />
+        </svg>
+
+        <!-- 3. 第二个 SVG：旋转90度，调用同一共用组件 -->
+        <svg width="41" height="41" viewBox="0 0 40 40" aria-hidden="true">
+          <use xlink:href="#shared-icon" transform="rotate(90 20 20)" />
+            <path
+              fill="url(#Area)"
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M21 14 L30 14 L30 30 L21 30 Z" />
+        </svg>
+        <!-- 4. 第二个 SVG：旋转180度，调用同一共用组件 -->
+        <svg width="41" height="41" viewBox="0 0 40 40" aria-hidden="true">
+          <use xlink:href="#shared-icon" transform="rotate(180 20 20)" />
           <path
             fill="url(#Area)"
             fill-rule="evenodd"
             clip-rule="evenodd"
-            d="M10 13 L30 13 L30 19 L10 19 Z" />
+            d="M10 24 L30 24 L30 30 L10 30 Z" />
+        </svg>
+        <!-- 5. 第二个 SVG：旋转270度，调用同一共用组件 -->
+        <svg width="41" height="41" viewBox="0 0 40 40" aria-hidden="true">
+          <use xlink:href="#shared-icon" transform="rotate(270 20 20)" />
           <path
-            fill="#4C5E83"
+            fill="url(#Area)"
             fill-rule="evenodd"
             clip-rule="evenodd"
-            d="M16 30 L20 26 L23 30 Z" />
+            d="M10 14 L19 14 L19 30 L10 30 Z" />
         </svg>
       </div>
     </div>