From bc53d875b351fc86cef5ed9c5c1670c1fd9848e5 Mon Sep 17 00:00:00 2001
From: Zzc <1373857752@qq.com>
Date: Mon, 17 Nov 2025 17:56:47 +0800
Subject: [PATCH] =?UTF-8?q?feat(screen):=20=E4=B8=BA=E5=8F=AF=E6=8A=98?=
 =?UTF-8?q?=E5=8F=A0=E9=9D=A2=E6=9D=BF=E4=B8=BB=E4=BD=93=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E8=83=8C=E6=99=AF=E5=9B=BE=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

使用 CSS `border-image` 为可折叠面板主体添加九宫格背景，以增强视觉设计。伪元素确保背景位于内容下方，不干扰交互。调整了内边距和定位以适应新的背景图层。
---
 .../components/shared/CollapsiblePanel.vue    | 22 ++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/CollapsiblePanel.vue b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/CollapsiblePanel.vue
index f418820..fd2fe50 100644
--- a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/CollapsiblePanel.vue
+++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/CollapsiblePanel.vue
@@ -207,12 +207,31 @@ function onAfterLeave(el) {
   }
 
   &__body {
+    position: relative;
     overflow: hidden;
     transition: height 0.3s ease;
+
+    // 使用伪元素作为背景层，九宫格实现
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-style: solid;
+      border-width: vh(25) vw(30);
+      border-image-source: url('../../assets/images/面板bg.png');
+      border-image-slice: 25 30 25 30 fill;
+      border-image-width: vh(25) vw(30);
+      border-image-repeat: stretch;
+      box-sizing: border-box;
+      pointer-events: none;  // 不阻挡鼠标事件
+      z-index: -1;  // 放在内容下方
+    }
   }
 
   &__content {
-    padding: vh(12) vw(5) vh(20);
+    position: relative;
+    padding: vh(5) vw(20) vh(15);  // 留出空间避免被圆角遮挡
+    z-index: 1;
 
     // 如果内容需要滚动
     &.scrollable {
@@ -226,6 +245,7 @@ function onAfterLeave(el) {
   &--collapsed {
     .collapsible-panel__body {
       height: 0;
+      border-width: 0;  // 折叠时移除 border
     }
   }
 }