From 21adafc3be9b2ce33ab29d7d7f99ee185431f7ce Mon Sep 17 00:00:00 2001
From: zhanghao <774378400@qq.com>
Date: Tue, 21 Jul 2026 16:30:26 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E8=B0=83=E6=95=B4slider=E5=AE=B9?=
 =?UTF-8?q?=E5=99=A8=E7=9A=84tooltip?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/arm/MechanicalArm.vue | 67 ++++++++++++++++++++++++++++++---
 1 file changed, 61 insertions(+), 6 deletions(-)

diff --git a/src/views/arm/MechanicalArm.vue b/src/views/arm/MechanicalArm.vue
index bbba985..8588257 100644
--- a/src/views/arm/MechanicalArm.vue
+++ b/src/views/arm/MechanicalArm.vue
@@ -67,8 +67,12 @@
 
         <div class="speed-container">
           <div class="label">速度：</div>
-          <el-slider v-model="jointSpeed" :min="0.1" :step="0.1" :max="3" />
-          <div class="proportion">{{ (jointSpeed / 3 * 100).toFixed(0) }} %</div>
+          <div class="speed-slider" @mouseenter="hoveredSlider = 'joint'" @mouseleave="hoveredSlider = null">
+            <el-slider v-model="jointSpeed" :min="0.01" :step="0.01" :max="1" :show-tooltip="false" />
+            <span v-show="hoveredSlider === 'joint'" class="speed-tooltip"
+              :style="getTooltipPosition(jointSpeed)">{{ formatSpeedTooltip(jointSpeed) }}</span>
+          </div>
+          <div class="proportion">{{ (jointSpeed / 1 * 100).toFixed(0) }} %</div>
         </div>
       </div>
 
@@ -156,8 +160,12 @@
           </div>
           <div class="speed-container">
             <div class="label">速度：</div>
-            <el-slider v-model="endSpeed" :min="0.1" :step="0.1" :max="2" />
-            <div class="proportion">{{ (endSpeed / 2 * 100).toFixed(0) }} %</div>
+            <div class="speed-slider" @mouseenter="hoveredSlider = 'end'" @mouseleave="hoveredSlider = null">
+              <el-slider v-model="endSpeed" :min="0.01" :step="0.01" :max="1" :show-tooltip="false" />
+              <span v-show="hoveredSlider === 'end'" class="speed-tooltip"
+                :style="getTooltipPosition(endSpeed)">{{ formatSpeedTooltip(endSpeed) }}</span>
+            </div>
+            <div class="proportion">{{ (endSpeed / 1 * 100).toFixed(0) }} %</div>
           </div>
         </div>
 
@@ -232,8 +240,12 @@
           </div>
           <div class="speed-container">
             <div class="label">速度：</div>
-            <el-slider v-model="postureSpeed" :min="0.1" :step="0.1" :max="2" />
-            <div class="proportion">{{ (postureSpeed / 2 * 100).toFixed(0) }} %</div>
+            <div class="speed-slider" @mouseenter="hoveredSlider = 'posture'" @mouseleave="hoveredSlider = null">
+              <el-slider v-model="postureSpeed" :min="0.01" :step="0.01" :max="1" :show-tooltip="false" />
+              <span v-show="hoveredSlider === 'posture'" class="speed-tooltip"
+                :style="getTooltipPosition(postureSpeed)">{{ formatSpeedTooltip(postureSpeed) }}</span>
+            </div>
+            <div class="proportion">{{ (postureSpeed / 1 * 100).toFixed(0) }} %</div>
           </div>
         </div>
       </div>
@@ -336,6 +348,13 @@ const updateJoint = async (jointName, _dir) => {
 
 const postureSpeed = ref(0.8)
 const endSpeed = ref(0.8)
+const hoveredSlider = ref(null)
+
+const getTooltipPosition = (value) => ({
+  left: `${((value - 0.01) / 0.99) * 100}%`
+})
+
+const formatSpeedTooltip = (value) => Number(value).toFixed(2)
 
 const speedData = reactive({
   vx: 0,
@@ -673,6 +692,42 @@ onUnmounted(() => {
         width: 100px;
         text-align: center;
       }
+
+      .speed-slider {
+        position: relative;
+        flex: 1;
+        min-width: 0;
+
+        .speed-tooltip {
+          position: absolute;
+          bottom: calc(100% + 7px);
+          z-index: 10;
+          padding: 5px 8px;
+          border: 1px solid $color-accent-border-strong;
+          border-radius: 4px;
+          color: $color-text-bright;
+          background: $color-background-tooltip-translucent;
+          box-shadow: 0 4px 12px $color-shadow-tooltip;
+          font-size: 12px;
+          line-height: 1;
+          white-space: nowrap;
+          pointer-events: none;
+          transform: translateX(-50%);
+
+          &::after {
+            position: absolute;
+            top: 100%;
+            left: 50%;
+            width: 7px;
+            height: 7px;
+            border-right: 1px solid $color-accent-border-strong;
+            border-bottom: 1px solid $color-accent-border-strong;
+            background: $color-background-tooltip-translucent;
+            content: '';
+            transform: translate(-50%, -50%) rotate(45deg);
+          }
+        }
+      }
     }
   }
 }