feat(cockpit): 为提示和警告组件添加背景图像和图标

- 更新 EmergencyForceTooltip 以使用三部分可拉伸的背景图像（顶部、中间、底部）和用于尺寸的 CSS 变量，取代纯色背景和边框
- 修改关闭按钮为透明点击区域，并添加 focus-visible 轮廓以提高可访问性
- 为 WeatherWarning 级别徽章添加警告图标，并调整徽章高度和对齐方式以实现更好的视觉整合

packages/screen/src/views/cockpit/components/EmergencyForceTooltip.vue

@@ -136,6 +136,13 @@ const handleClose = () => {
 @use '@/styles/mixins.scss' as *;
 
 .emergency-force-tooltip {
+  // CSS 变量：控制背景图片尺寸和内边距
+  // 注意：修改图片资源时，需要同步更新这些高度值以匹配实际 PNG 尺寸
+  --tooltip-top-height: 68px;
+  --tooltip-bottom-height: 68px;
+  --tooltip-side-padding: 24px;
+  --tooltip-body-padding: 16px;
+
   position: absolute;
   z-index: 9999;
   pointer-events: auto;
@@ -145,14 +152,42 @@ const handleClose = () => {
 
   min-width: 200px;
   max-width: 300px;
-  padding: 1rem;
 
-  // 与左右面板一致的样式
-  background: rgba(9, 22, 45, 0.95);
-  border: 1px solid rgba(71, 186, 255, 0.4);
-  border-radius: 0.5rem;
-  backdrop-filter: blur(12px);
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
+  // 上下 padding 需要容纳顶部和底部图片 + 内容间距
+  // 左右 padding 保持一致
+  padding: calc(var(--tooltip-top-height))
+    var(--tooltip-side-padding)
+    calc(var(--tooltip-bottom-height));
+
+  // 三段式可拉伸背景：顶部固定高度、中部可拉伸、底部固定高度
+  background-image:
+    url('@/views/cockpit/assets/emergencyForceTooltip/top.png'),
+    url('@/views/cockpit/assets/emergencyForceTooltip/bottom.png'),
+    url('@/views/cockpit/assets/emergencyForceTooltip/middle.png');
+
+  // 顶部/底部/中部都不重复，中部通过 background-size 拉伸填充
+  background-repeat: no-repeat, no-repeat, no-repeat;
+
+  // 背景定位：顶部居中对齐顶边，底部居中对齐底边
+  // 中部略向上偏移 1px，结合高度 +2px 在上下各覆盖 1px 避免子像素渲染缝隙
+  background-position:
+    center top,
+    center bottom,
+    center calc(var(--tooltip-top-height) - 1px);
+
+  // 背景尺寸：顶部/底部高度固定
+  // 中部填充剩余空间并增加 2px，在上下各多覆盖约 1px 避免间隙
+  background-size:
+    100% var(--tooltip-top-height),
+    100% var(--tooltip-bottom-height),
+    100% calc(100% - var(--tooltip-top-height) - var(--tooltip-bottom-height) + 2px);
+
+  // 移除原有的 border 和 border-radius，使用图片背景
+  border: none;
+
+  // 保留毛玻璃效果和阴影以增强视觉层次
+  // backdrop-filter: blur(12px);
+  // box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
 
   color: #fff;
   font-size: 14px;
@@ -173,31 +208,28 @@ const handleClose = () => {
   }
 }
 
-// 关闭按钮
+// 关闭按钮 - 仅作为透明点击热区，视觉由背景图中的关闭图标承载
 .close-button {
   position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
+  top: 18px;
+  right: 2px;
   width: 24px;
   height: 24px;
   padding: 0;
-  background: rgba(255, 255, 255, 0.1);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 50%;
-  color: #fff;
-  font-size: 18px;
+
+  // 透明化所有视觉元素，仅保留点击功能
+  border: none;
+  background: transparent;
+  color: transparent;
+  font-size: 0;
   line-height: 1;
+  box-shadow: none;
   cursor: pointer;
-  transition: all 0.2s ease;
 
-  &:hover {
-    background: rgba(255, 255, 255, 0.2);
-    border-color: rgba(71, 186, 255, 0.6);
-    transform: scale(1.1);
-  }
-
-  &:active {
-    transform: scale(0.95);
+  // 为键盘用户提供可见的焦点轮廓（仅在键盘导航时显示）
+  &:focus-visible {
+    outline: 2px solid rgba(255, 255, 255, 0.8);
+    outline-offset: 2px;
   }
 }
 
@@ -241,8 +273,9 @@ const handleClose = () => {
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
-  background: rgba(9, 22, 45, 0.95);
-  border-radius: 0.5rem;
+
+  // 使用半透明背景，让背景图片纹理仍然可见
+  background: rgba(0, 0, 0, 1);
   backdrop-filter: blur(12px);
 
   span {

packages/screen/src/views/cockpit/components/WeatherWarning.vue

@@ -14,7 +14,7 @@
         <!-- 六边形徽章容器 -->
         <div class="badge-container">
           <!-- 六边形徽章 -->
-          <div class="level-badge">
+          <div class="level-badge" :style="{ backgroundImage: `url(${level.warningIcon})` }">
             <!-- <img
               src="../assets/img/weather-badge-hexagon.png"
               alt="badge"
@@ -70,6 +70,10 @@ import { ref } from 'vue'
 // 导入图片
 import glowTopIcon from '../assets/img/weather-badge-glow-top.png'
 import glowBottomIcon from '../assets/img/weather-badge-glow-bottom.png'
+import blueWarningIcon from '../assets/img/weather-badge-blue-warning.png'
+import yellowWarningIcon from '../assets/img/weather-badge-yellow-warning.png'
+import orangeWarningIcon from '../assets/img/weather-badge-orange-warning.png'
+import redWarningIcon from '../assets/img/weather-badge-red-warning.png'
 
 const warningLevels = ref([
   {
@@ -78,7 +82,8 @@ const warningLevels = ref([
     count: 320,
     color: 'rgba(132, 199, 255, 1)',
     glowTopIcon: glowTopIcon,
-    glowBottomIcon: glowBottomIcon
+    glowBottomIcon: glowBottomIcon,
+    warningIcon: blueWarningIcon
   },
   {
     id: 2,
@@ -86,7 +91,8 @@ const warningLevels = ref([
     count: 36,
     color: 'rgba(215, 209, 38, 1)',
     glowTopIcon: glowTopIcon,
-    glowBottomIcon: glowBottomIcon
+    glowBottomIcon: glowBottomIcon,
+    warningIcon: yellowWarningIcon
   },
   {
     id: 3,
@@ -94,7 +100,8 @@ const warningLevels = ref([
     count: 2,
     color: 'rgba(255, 114, 0, 1)',
     glowTopIcon: glowTopIcon,
-    glowBottomIcon: glowBottomIcon
+    glowBottomIcon: glowBottomIcon,
+    warningIcon: orangeWarningIcon
   },
   {
     id: 4,
@@ -102,7 +109,8 @@ const warningLevels = ref([
     count: 1,
     color: 'rgba(255, 32, 0, 1)',
     glowTopIcon: glowTopIcon,
-    glowBottomIcon: glowBottomIcon
+    glowBottomIcon: glowBottomIcon,
+    warningIcon: redWarningIcon
   }
 ])
 
@@ -171,9 +179,9 @@ const districts = ref([
   .level-badge {
     position: relative;
     width: vw(80);
-    height: vh(90);
+    height: vh(70);
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     justify-content: center;
     z-index: 2;
     background: url(../assets/img/weather-badge-bg.png) center center / 100% 100% no-repeat;