feat(scale-ruler): 添加中心指示器并实时显示当前值

- 新增中心指示器组件，包含上方数值框、中间线条和下方三角形
- 实现滚动过程中当前值的实时更新
- 在初始化和触摸结束时同步更新显示值
- 样式调整以支持指示器的视觉呈现和定位

src/components/scale-ruler.vue

@@ -12,7 +12,12 @@
         </view>
       </view>
     </scroll-view>
-    <view class="indicator"></view>
+    <!-- 中心指示器：上方显示当前值的方框，下方显示指向刻度的三角形 -->
+    <view class="indicator">
+      <view class="value-box"><text class="value-text">{{ currentValue }}</text></view>
+      <view class="indicator-line"></view>
+      <view class="indicator-triangle"></view>
+    </view>
   </view>
 </template>
 
@@ -38,6 +43,8 @@ const emit = defineEmits(['update:value', 'change'])
 const instance = getCurrentInstance()
 const scrollLeft = ref(0)
 const actualScrollLeft = ref(0)
+// 当前中心值（整数）
+const currentValue = ref(Math.round(props.initialValue || props.min))
 
 // prepare grid
 const totalUnits = computed(() => Math.round((props.max - props.min) / props.step))
@@ -80,6 +87,8 @@ onMounted(() => {
   const initIndex = Math.round((props.initialValue - props.min) / props.step)
   // place the center of the initIndex cell under the center indicator
   scrollLeft.value = offsetScroll.value + initIndex * props.gutter + props.gutter / 2 - halfWindow
+  // 初始化当前显示值
+  currentValue.value = Math.round(initIndex * props.step + props.min)
 })
 
 function onScroll(e: any) {
@@ -90,6 +99,8 @@ function onScroll(e: any) {
   let value = numIndex * props.step + props.min
   if (value < props.min) value = props.min
   if (value > props.max) value = props.max
+  // 更新当前显示值（滚动中实时更新）
+  currentValue.value = Math.round(value)
   emit('update:value', value)
 }
 
@@ -115,6 +126,8 @@ function onTouchEnd() {
     let value = numIndex * props.step + props.min
   if (value < props.min) value = props.min
   if (value > props.max) value = props.max
+  // 更新当前显示值（吸附后确定值）
+  currentValue.value = Math.round(value)
   emit('change', value)
 }
 </script>
@@ -174,6 +187,44 @@ function onTouchEnd() {
   transform: translateX(-50%);
   width: 2px;
   height: 100%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  pointer-events: none;
+}
+
+.indicator-line {
+  width: 2px;
+  height: 60px; /* 可视为指示器从 value box 底部到 triangle 顶部的线长，可调整 */
+  background: #ff6a00;
+  margin-top: 8px;
+}
+
+.value-box {
+  position: absolute;
+  top: -44px; /* 将方框放在指示线之上，距离可根据值框高度调整 */
+  left: 50%;
+  transform: translateX(-50%);
   background: #ff6a00;
+  padding: 6rpx 12rpx;
+  border-radius: 6rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.value-text {
+  color: #fff;
+  font-size: 24px; /* 使用 24px 显示当前数值 */
+  line-height: 1;
+}
+
+.indicator-triangle {
+  width: 0;
+  height: 0;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  border-top: 10px solid #ff6a00; /* 向下的三角形，颜色与指示线相同 */
+  margin-top: 4px;
 }
 </style>