feat(ui): 为协作信息面板添加可折叠功能并更新文本颜色

- 为 CollaborationInfo 组件实现折叠/展开功能，并添加平滑动画
- 将硬编码的文本颜色替换为 CSS 变量 --text-white，以保持一致性
- 调整 PageHeader 中的 Logo 高度以获得更好的响应性
- 更新相关的资源图片

packages/screen/src/views/3DSituationalAwarenessRefactor/components/LeftPanel/ForceDispatch.vue

@@ -169,14 +169,14 @@ const handleStartDispatch = () => {
 .force-dispatch__level-label {
   font-size: fs(18);
   font-family: SourceHanSansCN-Regular, sans-serif;
-  color: rgba(255, 255, 255, 0.8);
+  color: var(--text-white);
 }
 
 .force-dispatch__level-value {
   font-size: fs(18);
   font-family: SourceHanSansCN-Bold, sans-serif;
   font-weight: 600;
-  color: rgba(255, 255, 255, 0.95);
+  color: var(--text-white);
 }
 
 /* 智能应急方案按钮 */
@@ -210,7 +210,7 @@ const handleStartDispatch = () => {
   font-size: fs(18);
   font-family: SourceHanSansCN-Medium, sans-serif;
   font-weight: 500;
-  color: rgba(255, 255, 255, 0.95);
+  color: var(--text-white);
 }
 
 .force-dispatch__plan-icon {
@@ -254,7 +254,7 @@ const handleStartDispatch = () => {
 .force-dispatch__stat-label {
   font-size: fs(12);
   font-family: SourceHanSansCN-Regular, sans-serif;
-  color: rgba(255, 255, 255, 0.7);
+  color: var(--text-white);
 }
 
 .force-dispatch__stat-value {
@@ -272,7 +272,7 @@ const handleStartDispatch = () => {
   font-size: fs(12);
   font-family: SourceHanSansCN-Regular, sans-serif;
   font-weight: 400;
-  color: rgba(255, 255, 255, 0.8);
+  color: var(--text-white);
   margin-left: vw(2);
 }
 
@@ -349,14 +349,14 @@ const handleStartDispatch = () => {
   font-size: fs(14);
   font-family: SourceHanSansCN-Medium, sans-serif;
   font-weight: 500;
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--text-white);
 }
 
 .force-dispatch__circle-line2 {
   font-size: fs(13);
   font-family: SourceHanSansCN-Regular, sans-serif;
   font-weight: 400;
-  color: rgba(255, 255, 255, 0.8);
+  color: var(--text-white);
 }
 
 /* 旋转动画 */
@@ -391,13 +391,13 @@ const handleStartDispatch = () => {
 .force-dispatch__eta-label {
   font-size: fs(11);
   font-family: SourceHanSansCN-Regular, sans-serif;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--text-white);
 }
 
 .force-dispatch__eta-value {
   font-size: fs(13);
   font-family: SourceHanSansCN-Bold, sans-serif;
   font-weight: 600;
-  color: rgba(255, 255, 255, 0.95);
+  color: var(--text-white);
 }
 </style>

packages/screen/src/views/3DSituationalAwarenessRefactor/components/PageHeader.vue

@@ -106,7 +106,7 @@ const handleBack = () => {
     .logo-section {
       .logo-image {
         width: vw(42);
-        height: vh(30);
+        height: vw(42);
         border-radius: 50%;
       }
     }

packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/CollaborationInfo.vue

@@ -1,16 +1,17 @@
 <template>
-  <div class="collaboration-info">
+  <div class="collaboration-info" :class="{ 'is-collapsed': isCollapsed }">
     <div class="collaboration-info__header">
       <img
         src="../../assets/images/SketchPng5d7d0c9a19ebbe31859bb19ed24fd41e757f04c7980ce640abb9c2c693b54728.png"
         alt="info"
         class="header-icon"
+        @click="toggleCollapse"
       />
     </div>
 
     <div class="collaboration-info__list">
       <div
-        v-for="info in collaborationInfo"
+        v-for="(info, index) in displayedInfo"
         :key="info.id"
         class="info-item"
       >
@@ -25,10 +26,28 @@
 </template>
 
 <script setup>
-import { inject } from 'vue'
+import { inject, ref, computed } from 'vue'
 
 const { collaborationInfo } = inject('disasterData')
 
+// 折叠状态
+const isCollapsed = ref(false)
+
+// 切换折叠状态
+const toggleCollapse = () => {
+  isCollapsed.value = !isCollapsed.value
+}
+
+// 根据折叠状态显示的信息
+const displayedInfo = computed(() => {
+  if (isCollapsed.value && collaborationInfo.value.length > 0) {
+    // 折叠时只显示第一条
+    return [collaborationInfo.value[0]]
+  }
+  // 展开时显示全部
+  return collaborationInfo.value
+})
+
 // 根据信息源返回对应的颜色
 const getSourceColor = (source) => {
   const colorMap = {
@@ -42,7 +61,7 @@ const getSourceColor = (source) => {
     '宣传部门': '#00D68F'       // 绿色
   }
 
-  return colorMap[source] || '#4A9EFF' // <EFBFBD><EFBFBD><EFBFBD>认蓝色
+  return colorMap[source] || '#4A9EFF' // 默认蓝色
 }
 </script>
 
@@ -59,13 +78,19 @@ const getSourceColor = (source) => {
 
   &__header {
     position: absolute;
-    top: vh(16);
+    top: 10px;
     right: vw(5);
     z-index: 1;
 
     .header-icon {
       width: vw(20);
       height: vh(20);
+      cursor: pointer;
+      transition: all 0.3s ease;
+
+      &:hover {
+        opacity: 0.8;
+      }
     }
   }
 
@@ -76,6 +101,8 @@ const getSourceColor = (source) => {
     padding: vw(8) vw(16);
     max-height: vh(200);
     overflow-y: auto;
+    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
+    opacity: 1;
 
     &::-webkit-scrollbar {
       width: vw(4);
@@ -114,5 +141,27 @@ const getSourceColor = (source) => {
       }
     }
   }
+
+  // 折叠状态
+  &.is-collapsed {
+    .header-icon {
+      transform: rotate(180deg);
+    }
+
+    .collaboration-info__list {
+      max-height: vh(30); // 折叠时只显示一行的高度
+      overflow: hidden;
+
+      .info-item:not(:first-child) {
+        opacity: 0;
+        transform: translateY(-10px);
+      }
+    }
+  }
+
+  // 为列表项添加过渡
+  .info-item {
+    transition: opacity 0.3s ease, transform 0.3s ease;
+  }
 }
 </style>