From 574cc5a39e2a76c9120fafa78ccfaf8f6b6cf4ab Mon Sep 17 00:00:00 2001
From: Zzc <1373857752@qq.com>
Date: Thu, 20 Nov 2025 12:48:19 +0800
Subject: [PATCH] =?UTF-8?q?refactor(ui):=20=E5=B0=86=E9=80=9A=E7=94=A8?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E6=A0=B7=E5=BC=8F=E6=8F=90=E5=8F=96=E5=88=B0?=
 =?UTF-8?q?=E5=8F=AF=E5=A4=8D=E7=94=A8=E7=9A=84=E5=9F=BA=E7=A1=80=E7=B1=BB?=
 =?UTF-8?q?=E4=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将共享的按钮交互样式（悬停、激活、聚焦、禁用）移至 common.scss 中的新 `.btn-custom-bg` 类，并更新 ActionButton.vue 以扩展该类，从而简化组件特定样式并提高可维护性。
---
 .../assets/styles/common.scss                 | 41 +++++++++++++++++++
 .../components/shared/ActionButton.vue        | 19 +++------
 2 files changed, 47 insertions(+), 13 deletions(-)

diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/styles/common.scss b/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/styles/common.scss
index 14cfbeb..41e16c8 100644
--- a/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/styles/common.scss
+++ b/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;
diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/ActionButton.vue b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/ActionButton.vue
index 8299f89..f4587fd 100644
--- a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/ActionButton.vue
+++ b/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);
   }