feat(slider): 添加仅可拖拽滑块的音量滑条组件

- 新增 ThumbOnlyRangeSlider 组件，限制只允许拖拽滑块调整数值 - 替换 Home 页面中音量滑条为 ThumbOnlyRangeSlider 组件 - 移除原有的滑条拖拽检测和事件处理逻辑 - 统一滑条拖拽开始/结束以及释放时的回调处理 - 修正 BrandDrawer 组件中响应式高度的样式支持问题
2026-09-15 17:09:22 +08:00
parent 19172275a9
commit b008307f82
3 changed files with 175 additions and 65 deletions
@@ -0,0 +1,162 @@
+import { cn } from "@/lib/utils";
+import { useRef, type CSSProperties } from "react";
+
+/** Generous hit area around the thumb for touch. */
+const THUMB_HIT_RADIUS_PX = 24;
+/** Half of the .cyan-slider thumb (~17.6-18px wide); the thumb center never reaches the track ends. */
+const THUMB_HALF_WIDTH_PX = 9;
+
+function thumbCenterXPx(trackWidth: number, min: number, max: number, value: number): number {
+  const span = max - min;
+  const ratio = span > 0 ? (value - min) / span : 0;
+  const travel = Math.max(0, trackWidth - THUMB_HALF_WIDTH_PX * 2);
+  return THUMB_HALF_WIDTH_PX + ratio * travel;
+}
+
+function valueFromOffsetXPx(trackWidth: number, min: number, max: number, offsetX: number): number {
+  const travel = Math.max(1, trackWidth - THUMB_HALF_WIDTH_PX * 2);
+  const ratio = Math.max(0, Math.min(1, (offsetX - THUMB_HALF_WIDTH_PX) / travel));
+  return Math.round(min + ratio * (max - min));
+}
+
+const RELEASE_KEYS = [
+  "ArrowLeft",
+  "ArrowRight",
+  "ArrowUp",
+  "ArrowDown",
+  "Home",
+  "End",
+  "PageUp",
+  "PageDown",
+] as const;
+
+export interface ThumbOnlyRangeSliderProps {
+  value: number;
+  min: number;
+  max: number;
+  disabled?: boolean;
+  className?: string;
+  style?: CSSProperties;
+  onChange: (value: number) => void;
+  /** Fires when the user releases the thumb after a drag or keyboard adjust. */
+  onRelease?: (value: number) => void;
+  onDragStart?: () => void;
+  onDragEnd?: () => void;
+}
+
+/**
+ * Range slider that ignores track clicks/taps — only the thumb can be dragged.
+ * Prevents accidental jumps to high volume when missing the thumb.
+ *
+ * The native <input type="range"> is rendered pointer-events:none and driven
+ * entirely by wrapper pointer events. On touch input the native tap-to-position
+ * behavior cannot be reliably canceled via preventDefault on pointerdown (React
+ * listens to touchstart passively at the root, and the touch-driven path differs
+ * from desktop mouse), so the only robust fix is to remove the native pointer
+ * interaction surface altogether. The input stays keyboard-focusable for a11y.
+ */
+export default function ThumbOnlyRangeSlider({
+  value,
+  min,
+  max,
+  disabled = false,
+  className,
+  style,
+  onChange,
+  onRelease,
+  onDragStart,
+  onDragEnd,
+}: ThumbOnlyRangeSliderProps) {
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const dragRef = useRef<{ pointerId: number; grabOffsetPx: number } | null>(null);
+  const valueRef = useRef(value);
+  valueRef.current = value;
+
+  const finishDrag = (pointerId: number | null) => {
+    const drag = dragRef.current;
+    if (!drag) return;
+    if (pointerId !== null && drag.pointerId !== pointerId) return;
+    dragRef.current = null;
+    onRelease?.(valueRef.current);
+    onDragEnd?.();
+  };
+
+  return (
+    <div
+      className={cn(
+        "relative z-10 flex h-6 w-full items-center",
+        disabled ? "cursor-default" : "cursor-pointer",
+        className,
+      )}
+      style={{ touchAction: "none", ...style }}
+      onPointerDown={(e) => {
+        if (disabled || dragRef.current) return;
+        if (e.pointerType === "mouse" && e.button !== 0) return;
+        const input = inputRef.current;
+        if (!input) return;
+        const rect = input.getBoundingClientRect();
+        const pressX = e.clientX - rect.left;
+        const centerX = thumbCenterXPx(rect.width, min, max, valueRef.current);
+        // Track press: ignore entirely — no value change, no drag.
+        if (Math.abs(pressX - centerX) > THUMB_HIT_RADIUS_PX) return;
+        e.preventDefault();
+        dragRef.current = { pointerId: e.pointerId, grabOffsetPx: pressX - centerX };
+        onDragStart?.();
+        e.currentTarget.setPointerCapture(e.pointerId);
+      }}
+      onPointerMove={(e) => {
+        const drag = dragRef.current;
+        if (disabled || !drag || drag.pointerId !== e.pointerId) return;
+        const input = inputRef.current;
+        if (!input) return;
+        const rect = input.getBoundingClientRect();
+        const offsetX = e.clientX - rect.left - drag.grabOffsetPx;
+        onChange(valueFromOffsetXPx(rect.width, min, max, offsetX));
+      }}
+      onPointerUp={(e) => {
+        const drag = dragRef.current;
+        if (!drag || drag.pointerId !== e.pointerId) return;
+        try {
+          e.currentTarget.releasePointerCapture(e.pointerId);
+        } catch {
+          // ignore
+        }
+        finishDrag(e.pointerId);
+      }}
+      onPointerCancel={() => finishDrag(null)}
+      onLostPointerCapture={() => finishDrag(null)}
+    >
+      <input
+        ref={inputRef}
+        type="range"
+        min={min}
+        max={max}
+        value={value}
+        disabled={disabled}
+        className="cyan-slider block w-full"
+        style={{ pointerEvents: "none", touchAction: "none" }}
+        onChange={(e) => {
+          // Only reachable via keyboard — the input no longer receives pointer input.
+          if (disabled || dragRef.current) return;
+          onChange(Number(e.target.value));
+        }}
+        onBlur={(e) => {
+          if (dragRef.current) {
+            finishDrag(null);
+            return;
+          }
+          if (!disabled) {
+            onRelease?.(Number(e.currentTarget.value));
+          }
+        }}
+        onKeyUp={(e) => {
+          if (disabled) return;
+          if (RELEASE_KEYS.includes(e.key as (typeof RELEASE_KEYS)[number])) {
+            onRelease?.(Number(e.currentTarget.value));
+            onDragEnd?.();
+          }
+        }}
+      />
+    </div>
+  );
+}
@@ -12,6 +12,7 @@
 import { useDevice } from "@/contexts/DeviceContext";
 import ConnectionPlaceholder from "@/components/ConnectionPlaceholder";
 import BottomNav from "@/components/BottomNav";
+import ThumbOnlyRangeSlider from "@/components/ThumbOnlyRangeSlider";
 import {
  AlertDialog,
  AlertDialogAction,
@@ -254,8 +255,6 @@ export default function Home() {

  const [localVol, setLocalVol] = useState(deviceState?.volume ?? 100);
  const isDragging = useRef(false);
-  const volumeSliderRef = useRef<HTMLInputElement>(null);
-  const volumeSliderDragAllowedRef = useRef(false);
  const knobDraggingRef = useRef(false);
  const knobActivePointerIdRef = useRef<number | null>(null);
  const knobStartAngleRef = useRef(0);
@@ -272,16 +271,6 @@ export default function Home() {
    knobLastVolRef.current = localVol;
  }, [localVol]);

-  const isPointerOnVolumeSliderThumb = useCallback((clientX: number) => {
-    const el = volumeSliderRef.current;
-    if (!el) return false;
-    const rect = el.getBoundingClientRect();
-    if (rect.width <= 0) return false;
-    const thumbCenterX = rect.left + (localVol / 200) * rect.width;
-    const hitRadius = Math.max(28, rect.width * 0.05);
-    return Math.abs(clientX - thumbCenterX) <= hitRadius;
-  }, [localVol]);
-
  const handlePowerOff = useCallback(async () => {
    if (powerActionRef.current) return;
    powerActionRef.current = true;
@@ -700,67 +689,26 @@ export default function Home() {
                background: "#00FFF6", 
                boxShadow: "0 0 8px rgba(0,255,246,0.5)" 
              }} />
-            <input
-              ref={volumeSliderRef}
-              type="range" min={0} max={200} value={localVol}
+            <ThumbOnlyRangeSlider
+              min={0}
+              max={200}
+              value={localVol}
              disabled={volumePassthroughActive}
-              className="cyan-slider cyan-slider-thumb-only relative z-10 disabled:opacity-50"
-              onChange={(e) => {
+              className={volumePassthroughActive ? "opacity-50" : undefined}
+              onChange={(v) => {
                if (volumePassthroughActive) return;
-                if (!volumeSliderDragAllowedRef.current) {
-                  e.target.value = String(localVol);
-                  return;
-                }
-                const v = Number(e.target.value);
                setLocalVol(v);
              }}
-              onPointerDown={(e) => {
+              onDragStart={() => {
                if (volumePassthroughActive) return;
-                const onThumb = isPointerOnVolumeSliderThumb(e.clientX);
-                volumeSliderDragAllowedRef.current = onThumb;
-                if (!onThumb) {
-                  e.preventDefault();
-                  return;
-                }
                isDragging.current = true;
              }}
-              onPointerUp={(e) => {
-                const allowed = volumeSliderDragAllowedRef.current;
-                volumeSliderDragAllowedRef.current = false;
+              onDragEnd={() => {
                isDragging.current = false;
-                if (!allowed || volumePassthroughActive) return;
-                applyVolume(Number(e.currentTarget.value));
              }}
-              onPointerCancel={(e) => {
-                const allowed = volumeSliderDragAllowedRef.current;
-                volumeSliderDragAllowedRef.current = false;
-                isDragging.current = false;
-                if (!volumePassthroughActive && allowed) {
-                  applyVolume(Number(e.currentTarget.value));
-                }
-              }}
-              onBlur={(e) => {
-                const allowed = volumeSliderDragAllowedRef.current;
-                volumeSliderDragAllowedRef.current = false;
-                isDragging.current = false;
-                if (!volumePassthroughActive && allowed) {
-                  applyVolume(Number(e.currentTarget.value));
-                }
-              }}
-              onKeyUp={(e) => {
-                const k = e.key;
-                if (
-                  k === "ArrowLeft" ||
-                  k === "ArrowRight" ||
-                  k === "ArrowUp" ||
-                  k === "ArrowDown" ||
-                  k === "Home" ||
-                  k === "End" ||
-                  k === "PageUp" ||
-                  k === "PageDown"
-                ) {
-                  applyVolume(Number(e.currentTarget.value));
-                }
+              onRelease={(v) => {
+                if (volumePassthroughActive) return;
+                applyVolume(v);
              }}
            />
          </div>
@@ -164,7 +164,7 @@ export function BrandDrawer({
        onClick={onClose}
      />
      <div
-        className="relative z-10 flex h-[58dvh] flex-shrink-0 flex-col overflow-hidden rounded-t-[18px] bg-white shadow-[0_-8px_32px_rgba(0,0,0,0.35)]"
+        className="relative z-10 flex h-[58vh] max-h-full flex-shrink-0 flex-col overflow-hidden rounded-t-[18px] bg-white shadow-[0_-8px_32px_rgba(0,0,0,0.35)] supports-[height:1dvh]:h-[58dvh]"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="flex shrink-0 items-center justify-center pt-2 pb-1">