优化Panel组件渲染：简化图标结构、修复DOM渲染问题、将v-show改为v-if

AutoRobot/Windows/Robot/Web/src/DockLayout/Panel.js

@@ -185,10 +185,7 @@ export default defineComponent({
               @click.stop="handleToggleCollapse" 
               aria-label="折叠/展开"
             >
-              <!-- 三角形图标 -->
+              <div class="icon-triangle-down"></div>
-              <svg width="8" height="5" viewBox="0 0 8 5" fill="none">
-                <path d="M1 1.5L4 4L7 1.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-              </svg>
             </button>
             
             <!-- 最大化按钮 -->
@@ -197,12 +194,7 @@ export default defineComponent({
               @click.stop="handleMaximize" 
               aria-label="最大化"
             >
-              <svg class="icon-square-svg" width="11" height="11" viewBox="0 0 11 11" aria-hidden="true">
+              <div class="icon-square"></div>
-                <!-- 外框与底色（仅1px边框） -->
-                <rect x="0.5" y="0.5" width="10" height="10" fill="#cbd6ff" stroke="#8ea3d8" stroke-width="1" />
-                <!-- 两行填充：上行1px浅蓝，下行标题栏色 -->
-                <rect x="1" y="3" width="8.5" height="6.5" fill="#435d9c" />
-              </svg>
             </button>
             
             <!-- 关闭按钮 -->
@@ -211,11 +203,7 @@ export default defineComponent({
               @click.stop="handleClose" 
               aria-label="关闭"
             >
-              <!-- X图标 -->
+              <div class="icon-x"></div>
-              <svg width="8" height="8" viewBox="0 0 8 8" fill="none">
-                <path d="M1 1L7 7" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
-                <path d="M7 1L1 7" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
-              </svg>
             </button>
           </div>
         </div>
@@ -231,25 +219,45 @@ export default defineComponent({
             @click.stop="handleToggleToolbar" 
             aria-label="展开工具栏"
           >
-            <!-- 替代Font Awesome图标的SVG -->
+            <span v-if="panel.toolbarExpanded" class="text-xs">-</span>
-            <svg v-if="panel.toolbarExpanded" width="8" height="8" viewBox="0 0 8 8" fill="none">
+            <span v-else class="text-xs">+</span>
-              <path d="M6 4L2 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-              <path d="M2 4L4 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-              <path d="M2 4L4 2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-            </svg>
-            <svg v-else width="8" height="8" viewBox="0 0 8 8" fill="none">
-              <path d="M2 4L6 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-              <path d="M6 4L4 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-              <path d="M6 4L4 2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-            </svg>
           </button>
         </div>
         
         <!-- 内容区 -->
-        <div class="bg-[#f5f7fb] flex-1 p-2" v-show="!panel.collapsed">
+        <div class="bg-[#f5f7fb] flex-1 p-2" v-if="!panel.collapsed">
           <slot name="content"></slot>
         </div>
       </div>
     </div>
+
+    <style scoped>
+      /* 向下小三角 */
+      .icon-triangle-down {
+        width: 0; height: 0;
+        border-left: 5px solid transparent;
+        border-right: 5px solid transparent;
+        border-top: 6px solid #cbd6ff;
+      }
+      
+      /* 最大化图标 */
+      .icon-square {
+        position: relative;
+        width: 11px; height: 11px;
+        background: linear-gradient(180deg, #cbd6ff 0%, #b9c8ff 100%);
+        border: 1px solid #b8c6ff;
+        box-sizing: border-box;
+      }
+      
+      /* X图标 */
+      .icon-x {
+        position: relative; width: 11px; height: 11px;
+      }
+      .icon-x::before, .icon-x::after {
+        content: ''; position: absolute; left: 5px; top: 0; width: 1px; height: 11px; background: #e6efff;
+      }
+      .icon-x::before { transform: rotate(45deg); }
+      .icon-x::after { transform: rotate(-45deg); }
+    </style>
   `
 });