refactor(ui): 将通用按钮样式提取到可复用的基础类中

将共享的按钮交互样式（悬停、激活、聚焦、禁用）移至 common.scss 中的新 `.btn-custom-bg` 类，并更新 ActionButton.vue 以扩展该类，从而简化组件特定样式并提高可维护性。

packages/screen/src/views/3DSituationalAwarenessRefactor/assets/styles/common.scss

@@ -107,6 +107,47 @@
   }
 }
 
+// 自定义背景图按钮基类（用于使用背景图片的 button 元素）
+.btn-custom-bg {
+  // 重置 button 默认样式
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  border: none;
+  outline: none;
+  background: transparent;
+  background-color: transparent;
+  padding: 0;
+  margin: 0;
+
+  // 基础交互样式
+  cursor: pointer;
+  transition: opacity 0.3s, transform 0.2s;
+  user-select: none;
+
+  // 焦点样式（键盘导航时显示）
+  &:focus-visible {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 2px;
+  }
+
+  // 交互效果
+  &:hover {
+    opacity: 0.8;
+  }
+
+  &:active {
+    transform: scale(0.98);
+  }
+
+  // 禁用状态
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    transform: none;
+  }
+}
+
 // Flexbox 工具类
 .flex {
   display: flex;

packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/ActionButton.vue

@@ -48,26 +48,16 @@ const handleClick = () => {
 @use '../../assets/styles/common.scss' as *;
 
 .action-button {
+  @extend .btn-custom-bg; // 继承自定义背景按钮基类
+
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: vw(6);
-  border: none;
-  border-radius: vw(4);
-  cursor: pointer;
   font-family: SourceHanSansCN-Medium, sans-serif;
   font-weight: 500;
-  transition: opacity 0.3s, transform 0.2s;
   white-space: nowrap;
 
-  &:hover {
-    opacity: 0.8;
-  }
-
-  &:active {
-    transform: scale(0.98);
-  }
-
   &__icon {
     width: vw(16);
     height: vh(16);
@@ -79,7 +69,10 @@ const handleClick = () => {
 
   // 类型样式
   &--primary {
-    background: var(--primary-color);
+    background-image: url('../../assets/images/文本按钮bg.png');
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    background-position: center;
     color: var(--text-white);
   }