feat(screen): 为可折叠面板主体添加背景图片

使用 CSS `border-image` 为可折叠面板主体添加九宫格背景，以增强视觉设计。伪元素确保背景位于内容下方，不干扰交互。调整了内边距和定位以适应新的背景图层。

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
     }
   }
 }