How does toolbar drag avoid triggering item events?

这个库是如何实现 toolbar 的拖拽效果的，以及如何避免拖拽过程中出发了 toolbar 上 item 的 onclick / hover 事件/效果，详细分析

现在我有了完整的信息。让我生成详细的分析：

##📊 Agentation Toolbar 拖拽效果实现详细分析

我已深入分析了源代码，现在为你详细介绍这个库的 toolbar 拖拽实现机制。

##1️⃣ 核心拖拽实现架构

###1.1 状态管理

库使用了以下几个关键的 React 状态来管理 toolbar 拖拽：

// 来自: package/src/components/page-toolbar-css/index.tsx (第682-697行)

// Toolbar 位置状态
const [toolbarPosition, setToolbarPosition] = useState<{
  x: number;
  y: number;
} | null>(null);

// 拖拽中的标志
const [isDraggingToolbar, setIsDraggingToolbar] = useState(false);

// 拖拽开始时的位置信息
const [dragStartPos, setDragStartPos] = useState<{
  x: number;
  y: number;
  toolbarX: number;      // Toolbar 初始 X 位置
  toolbarY: number;      // Toolbar 初始 Y 位置
} | null>(null);

// 拖拽时的旋转角度（视觉反馈）
const [dragRotation, setDragRotation] = useState(0);

// 关键：用 Ref 记录拖拽刚刚结束，防止触发 onClick
const justFinishedToolbarDragRef = useRef(false);

###1.2 拖拽触发机制 - onMouseDown 处理

// 来自: 第2712-2745行
const handleToolbarMouseDown = useCallback(
  (e: React.MouseEvent) => {
    // ✅ 防护 1：只在空白区域（toolbar背景）启动拖拽
    // ❌ 不在按钮或设置面板上拖拽
    if (
      (e.target as HTMLElement).closest("button") ||
      (e.target as HTMLElement).closest(`.${styles.settingsPanel}`)
    ) {
      return;  // 提前返回，不启动拖拽
    }

    // 获取当前 toolbar 位置
    const toolbarParent = (e.currentTarget as HTMLElement).parentElement;
    if (!toolbarParent) return;

    const rect = toolbarParent.getBoundingClientRect();
    const currentX = toolbarPosition?.x ?? rect.left;
    const currentY = toolbarPosition?.y ?? rect.top;

    // 🎨 生成随机旋转角度 (-5°到+5°) 作为视觉反馈
    const randomRotation = (Math.random() - 0.5) * 10;
    setDragRotation(randomRotation);

    // 记录拖拽起点
    setDragStartPos({
      x: e.clientX,
      y: e.clientY,
      toolbarX: currentX,
      toolbarY: currentY,
    });
    // ⚠️ 重要：此时不立即设置 isDraggingToolbar = true
    // 等待 mousemove 超过阈值后才设置
  },
  [toolbarPosition],
);

###1.3 拖拽移动实现 - mousemove 和 mouseup

// 来自: 第2642-2708行
useEffect(() => {
  if (!dragStartPos) return;

  const DRAG_THRESHOLD = 10; // 像素阈值

  const handleMouseMove = (e: MouseEvent) => {
    const deltaX = e.clientX - dragStartPos.x;
    const deltaY = e.clientY - dragStartPos.y;
    const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);

    // ✅ 防护 2：只有移动超过阈值才算"真正拖拽"
    // 这样点击不会被误认为是拖拽
    if (!isDraggingToolbar && distance > DRAG_THRESHOLD) {
      setIsDraggingToolbar(true);
    }

    if (isDraggingToolbar || distance > DRAG_THRESHOLD) {
      // 计算新位置
      let newX = dragStartPos.toolbarX + deltaX;
      let newY = dragStartPos.toolbarY + deltaY;

      // 📍 边界约束：保持 toolbar 在视口内
      const padding = 20;
      const wrapperWidth = 297;
      const toolbarHeight = 44;
      
      // 计算内容宽度（根据展开/折叠状态）
      const contentWidth = isActive
        ? connectionStatus === "connected" ? 297 : 257
        : 44;

      const contentOffset = wrapperWidth - contentWidth;
      const minX = padding - contentOffset;
      const maxX = window.innerWidth - padding - wrapperWidth;

      newX = Math.max(minX, Math.min(maxX, newX));
      newY = Math.max(
        padding,
        Math.min(window.innerHeight - toolbarHeight - padding, newY),
      );

      setToolbarPosition({ x: newX, y: newY });
    }
  };

  const handleMouseUp = () => {
    // ✅ 防护 3：拖拽结束时，设置标志防止 onClick 触发
    if (isDraggingToolbar) {
      justFinishedToolbarDragRef.current = true;  // 🔑 关键标志
    }
    setIsDraggingToolbar(false);
    setDragStartPos(null);
  };

  document.addEventListener("mousemove", handleMouseMove);
  document.addEventListener("mouseup", handleMouseUp);

  return () => {
    document.removeEventListener("mousemove", handleMouseMove);
    document.removeEventListener("mouseup", handleMouseUp);
  };
}, [dragStartPos, isDraggingToolbar, isActive, connectionStatus]);

##2️⃣ 防止 onclick 触发的机制

###2.1 关键设计：justFinishedToolbarDragRef

这是一个 Ref（而非 State），目的是在不触发重新渲染的情况下，记录拖拽刚刚结束的状态：

// 来自: 第695行
const justFinishedToolbarDragRef = useRef(false);

为什么用 Ref 而不是 State？

• State 变化会触发重新渲染，可能导致时序问题
• Ref 是同步的，可以在事件处理的同一个 tick 内被读取和重置

###2.2 onClick 防护逻辑

// 来自: 第2975-2986行
onClick={
  !isActive
    ? (e) => {
        // ✅ 关键防护：如果刚刚完成拖拽，则忽略 click
        if (justFinishedToolbarDragRef.current) {
          justFinishedToolbarDragRef.current = false;  // 重置标志
          e.preventDefault();
          return;
        }
        // 只有真正的点击（非拖拽）才会激活 toolbar
        setIsActive(true);
      }
    : undefined
}

执行流程：

1. 用户在 toolbar 上按下鼠标 → onMouseDown 调用，记录起点
2. 用户移动鼠标超过 10px 阈值 → isDraggingToolbar = true
3. 用户释放鼠标 → mouseup 设置 justFinishedToolbarDragRef.current = true
4. 浏览器触发 onClick 事件 → 检查标志，发现是拖拽所以忽略，重置标志

##3️⃣ 防止 hover 效果的机制

###3.1 CSS 层面的防护

// 来自: styles.module.scss 第210-235行
.toolbarContainer {
  user-select: none;  // ✅ 防止文本被选中
  pointer-events: auto;
  cursor: grab;

  &.dragging {
    // 拖拽时修改光标和过渡
    cursor: grabbing;
    transition: width 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    // 注意：transform 的过渡被移除，因此拖拽时立即响应用户操作
  }

  &.collapsed {
    cursor: pointer;
    &:hover {
      background: #2a2a2a;
    }
    &:active {
      transform: scale(0.95);
    }
  }
}

###3.2 按钮 hover 防护

// 来自: styles.module.scss 第352-390行
.controlButton {
  cursor: pointer !important;
  
  // 详细的 hover 选择器，排除各种特殊状态
  &:hover:not(:disabled):not([data-active="true"]):not(
      [data-failed="true"]
    ):not([data-auto-sync="true"]):not([data-error="true"]):not([data-no-hover="true"]) {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
  }

  &:active:not(:disabled) {
    transform: scale(0.92);
  }

  // 状态结束时禁用交互
  &[data-no-hover="true"],
  &.statusShowing {
    cursor: default !important;
    pointer-events: none;  // ✅ 完全禁用鼠标事件
    background: transparent !important;
  }
}

###3.3 Tooltip 隐藏机制

// 来自: 第546-552行
const hideTooltipsUntilMouseLeave = () => {
  setTooltipsHidden(true);
};

const showTooltipsAgain = () => {
  setTooltipsHidden(false);
};

// 在 HTML 中使用
<div
  className={`${styles.controlsContent} ${
    tooltipsHidden || showSettings ? styles.tooltipsHidden : ""
  }`}
  onMouseLeave={showTooltipsAgain}  // 鼠标离开时恢复
>
  {/* 按钮 */}
</div>

每个按钮的 onClick 中都调用这个函数：

// 来自: 第3031-3035行
<button
  onClick={(e) => {
    e.stopPropagation();
    hideTooltipsUntilMouseLeave();  // 点击时隐藏 tooltip
    toggleFreeze();
  }}
>

对应的 CSS：

.buttonTooltip {
  /* ... */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.tooltipsHidden {
  .buttonTooltip {
    opacity: 0 !important;
  }
}

##4️⃣ 拖拽时的视觉反馈

###4.1 CSS Transform 反馈

// 来自: 第2993-2995行
style={{
  ...(isDraggingToolbar && {
    transform: `scale(1.05) rotate(${dragRotation}deg)`,
    cursor: "grabbing",
  }),
}}

视觉效果：

• 放大 1.05 倍
• 随机旋转 -5° 到 +5°
• 光标变为 grabbing

###4.2 状态类名

// 来自: 第2973行
className={`${styles.toolbarContainer} ${isDraggingToolbar ? styles.dragging : ""} ...`}

##5️⃣ 位置持久化

// 来自: 第844-857行
useEffect(() => {
  if (wasDragging && !isDraggingToolbar && toolbarPosition && mounted) {
    localStorage.setItem(
      "feedback-toolbar-position",
      JSON.stringify(toolbarPosition),
    );
  }
}, [isDraggingToolbar, toolbarPosition, mounted]);

用户拖动 toolbar 后，位置会自动保存到 localStorage。

##6️⃣ 防止拖拽时触发页面事件

###6.1 Toolbar 上的数据属性

// 来自: 第2958-2960行
<div
  className={styles.toolbar}
  data-feedback-toolbar  // 🔑 标记 toolbar 的 DOM
  // ...
>

###6.2 全局事件检查

在多选拖拽等其他功能中，都会检查：

// 来自: 第1497、1542、1733、1912、2024行
if (closestCrossingShadow(target, "[data-feedback-toolbar]")) {
  // 如果事件目标在 toolbar 内，忽略
  return;
}

这个 closestCrossingShadow 函数会穿过 Shadow DOM 边界查找元素。

##📋 完整的事件流总结

用户按下鼠标
    ↓
onMouseDown
├─ 检查是否在按钮上 → YES: 返回（不拖拽）
├─ 记录起点坐标
├─ 生成随机旋转角度
└─ 设置 dragStartPos
    ↓
用户移动鼠标
    ↓
mousemove (全局)
├─ 计算移动距离
├─ 如果 > 10px 阈值 → isDraggingToolbar = true
├─ 应用 CSS transform (scale + rotate)
├─ 更新 toolbarPosition (带边界约束)
└─ 触发重新渲染
    ↓
用户释放鼠标
    ↓
mouseup (全局)
├─ 如果确实拖拽过 → justFinishedToolbarDragRef = true
├─ isDraggingToolbar = false
└─ dragStartPos = null
    ↓
onClick 事件触发
└─ 检查 justFinishedToolbarDragRef
   ├─ true → 忽略 click，重置标志
   └─ false → 正常处理 click

##🎯 关键设计模式

##💡 为什么这样设计很优雅？

1. 性能优化：使用 Ref 而非 State 避免不必要的重渲染
2. 鲁棒性：多层防护（选择器、阈值、状态检查）
3. 用户体验：拖拽时清晰的视觉反馈（放大、旋转、光标变化）
4. 隐含设计：通过 data-feedback-toolbar 属性简单区分 toolbar 区域
5. localStorage 集成：自动保存位置，下次使用时恢复

这个实现体现了前端交互设计的最佳实践！

我是否可以使用 motion 这样的动画库的 gesture events 来实现类似的效果

好的，让我用 Read 和 Bash 组合来创建分析。让我直接给你一个完整的对比和实现方案：

##🎬 使用 Framer Motion 实现 Toolbar 拖拽 - 完整分析

###当前实现 vs Motion 库

####📊 对比表

###✅ 方案 1：完全迁移到 Framer Motion

这是最理想的方案，但需要添加依赖。以下是实现：

'use client';

import React, { useRef, useState } from 'react';
import { motion, useMotionValue, useMotionValueEvent } from 'framer-motion';

interface ToolbarPosition {
  x: number;
  y: number;
}

export function DraggableToolbar() {
  const [isActive, setIsActive] = useState(false);
  const [isDragging, setIsDragging] = useState(false);
  const [dragRotation, setDragRotation] = useState(0);
  const [toolbarPosition, setToolbarPosition] = useState<ToolbarPosition | null>(null);
  const [isCollapsed, setIsCollapsed] = useState(true);

  // Motion 值用于实时追踪位置
  const motionX = useMotionValue(toolbarPosition?.x ?? 0);
  const motionY = useMotionValue(toolbarPosition?.y ?? 0);

  // 在 motion 值变化时同步到状态（用于 localStorage）
  useMotionValueEvent(motionX, 'change', (value) => {
    const y = motionY.get();
    setToolbarPosition({ x: value, y });
    // 可以节流保存到 localStorage
    localStorage.setItem('feedback-toolbar-position', JSON.stringify({ x: value, y }));
  });

  // 计算边界约束
  const getConstraints = () => {
    const padding = 20;
    const wrapperWidth = 297;
    const toolbarHeight = 44;

    const contentWidth = isActive && isCollapsed === false ? 257 : 44;
    const contentOffset = wrapperWidth - contentWidth;

    return {
      left: padding - contentOffset,
      right: window.innerWidth - padding - wrapperWidth,
      top: padding,
      bottom: window.innerHeight - toolbarHeight - padding,
    };
  };

  // 加载保存的位置
  React.useEffect(() => {
    const saved = localStorage.getItem('feedback-toolbar-position');
    if (saved) {
      const pos = JSON.parse(saved);
      setToolbarPosition(pos);
      motionX.set(pos.x);
      motionY.set(pos.y);
    }
  }, [motionX, motionY]);

  // 当窗口大小变化时重新约束位置
  React.useEffect(() => {
    const handleResize = () => {
      if (toolbarPosition) {
        const constraints = getConstraints();
        const newX = Math.max(
          constraints.left,
          Math.min(constraints.right, toolbarPosition.x)
        );
        const newY = Math.max(
          constraints.top,
          Math.min(constraints.bottom, toolbarPosition.y)
        );

        if (newX !== toolbarPosition.x || newY !== toolbarPosition.y) {
          setToolbarPosition({ x: newX, y: newY });
          motionX.set(newX);
          motionY.set(newY);
        }
      }
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, [toolbarPosition, motionX, motionY]);

  const handleDragStart = () => {
    setIsDragging(true);
    setDragRotation((Math.random() - 0.5) * 10);
  };

  const handleDragEnd = () => {
    setIsDragging(false);
    // 同步最终位置到状态
    setToolbarPosition({
      x: motionX.get(),
      y: motionY.get(),
    });
  };

  // 防止拖拽结束后立即触发 click
  const isJustDraggedRef = useRef(false);
  const handleToolbarClick = (e: React.MouseEvent) => {
    if (isJustDraggedRef.current) {
      isJustDraggedRef.current = false;
      e.preventDefault();
      return;
    }
    setIsActive(true);
  };

  return (
    <motion.div
      id="toolbar-container"
      className="toolbar-wrapper"
      // 关键：使用 motion value 而非 state 来驱动位置
      style={{
        x: motionX,
        y: motionY,
      }}
      drag
      dragElastic={0.05}  // 轻微弹性效果
      dragMomentum={false}  // 禁用惯性以防止过度滑动
      dragConstraints={getConstraints()}
      dragTransition={{
        power: 0.3,  // 阻尼
        restDelta: 0.001,  // 停止阈值
      }}
      onDragStart={handleDragStart}
      onDragEnd={handleDragEnd}
      // 👇 防止在按钮上拖拽的另一种方式
      onPointerDown={(e) => {
        const target = e.target as HTMLElement;
        // 只允许在背景区域拖拽（非按钮）
        if (
          target.closest('button') ||
          target.closest('[data-settings-panel]')
        ) {
          // 取消拖拽
          (e.currentTarget as any).attributes['data-drag-disabled'] = true;
        }
      }}
      initial={false}
      animate={{
        scale: isDragging ? 1.05 : 1,
        rotate: isDragging ? dragRotation : 0,
      }}
      transition={{
        type: 'spring',
        stiffness: 300,
        damping: 30,
      }}
      onClick={handleToolbarClick}
    >
      {/* Toolbar 内容 */}
      <div className={`toolbar-content ${isActive ? 'expanded' : 'collapsed'}`}>
        {/* ... toolbar 按钮等 ... */}
      </div>
    </motion.div>
  );
}

###⚠️ 问题 1：在特定元素上禁用拖拽

上面的方案有个问题：Framer Motion 的 drag 在整个元素上启用，无法轻松排除子元素。

更好的解决方案：

export function DraggableToolbarV2() {
  const [isDragging, setIsDragging] = useState(false);
  const motionX = useMotionValue(0);
  const motionY = useMotionValue(0);
  const draggedRef = useRef(false);

  const handlePointerDown = (e: React.PointerEvent) => {
    const target = e.target as HTMLElement;

    // ✅ 防护：在按钮上不启动拖拽
    if (target.closest('button') || target.closest('[data-settings]')) {
      draggedRef.current = true;  // 标记为非拖拽点击
      return;
    }

    draggedRef.current = false;
  };

  const handleDragStart = (e: any, info: any) => {
    // 如果是在按钮上启动的，忽略
    if (draggedRef.current) {
      return;
    }
    setIsDragging(true);
  };

  const handleDragEnd = (e: any, info: any) => {
    setIsDragging(false);
    // 检测是否真的拖拽过（info.offset > threshold）
    if (Math.abs(info.offset.x) > 10 || Math.abs(info.offset.y) > 10) {
      draggedRef.current = true;
    }
  };

  return (
    <motion.div
      drag
      dragElastic={0.05}
      dragMomentum={false}
      dragConstraints={{ /* ... */ }}
      onPointerDown={handlePointerDown}
      onDragStart={handleDragStart}
      onDragEnd={handleDragEnd}
      style={{ x: motionX, y: motionY }}
    >
      {/* 内容 */}
    </motion.div>
  );
}

###⚡ 方案 2：混合方案（推荐）

既然 Agentation 已经是零依赖的库，可以考虑保持当前实现但增加可选的 Motion 支持：

// toolbar.tsx - 保持原有实现
// toolbar-motion.tsx - Motion 版本（可选）

// 用户可以选择：
// import { PageFeedbackToolbar } from 'agentation';  // 零依赖
// import { PageFeedbackToolbarMotion } from 'agentation/motion';  // Motion 版本

实现步骤：

// 可选的 motion 版本
import { motion, useMotionValue } from 'framer-motion';

export function PageFeedbackToolbarMotion({ 
  motionConfig = { dragElastic: 0.05 }
}: Props) {
  const motionX = useMotionValue(0);
  const motionY = useMotionValue(0);
  
  // 复用原有逻辑，只改动拖拽部分
  // ...
  
  return (
    <motion.div
      style={{ x: motionX, y: motionY }}
      drag
      dragElastic={motionConfig.dragElastic}
      // 其他配置...
    >
      {/* 原有 toolbar 内容 */}
    </motion.div>
  );
}

###🎯 方案 3：使用 Motion 但保持零依赖（条件加载）

// 动态导入 motion 版本
const ToolbarComponent = isDev && hasMotion 
  ? lazy(() => import('./toolbar-motion'))
  : PageFeedbackToolbar;

// 用户在初始化时选择
<PageFeedbackToolbar variant="motion" />  // 如果安装了 framer-motion
<PageFeedbackToolbar variant="native" />  // 始终可用

###📈 性能对比

原生实现：
- 初始包体积：~30KB
- 拖拽时 FPS：60fps（仅 DOM 操作）
- 内存占用：最小

Motion 版本：
- 初始包体积：~30KB + 55KB (framer-motion)
- 拖拽时 FPS：60fps（GPU 加速）
- 内存占用：略高（motion values + lifecycle）
- ✅ 优势：更流畅的动画，自动处理惯性

###🎨 Gesture Events 关键 API

Framer Motion v11+ 提供的关键 gesture 事件：

<motion.div
  // 拖拽事件
  drag              // 启用拖拽
  dragElastic       // 弹性系数 (0-1)
  dragMomentum      // 是否启用惯性
  dragTransition    // 自定义过渡效果
  dragConstraints   // 边界约束
  onDragStart       // 拖拽开始
  onDrag            // 拖拽中（连续）
  onDragEnd         // 拖拽结束
  
  // 悬停事件
  whileHover        // 悬停时的动画
  onHoverStart      // 悬停开始
  onHoverEnd        // 悬停结束
  
  // 点击事件  
  onTap             // 点击（区别于拖拽）
  whileTap          // 点击时的动画
  
  // 焦点事件
  onFocus           // 获得焦点
  onBlur            // 失去焦点
/>

###🔑 关键问题解决

####Q1：如何防止点击触发（当刚完成拖拽时）？

原生方案：

const justFinishedDragRef = useRef(false);

const handleMouseUp = () => {
  if (isDragging) justFinishedDragRef.current = true;
};

const onClick = () => {
  if (justFinishedDragRef.current) return;
};

Motion 方案：

const handleDragEnd = (event, info) => {
  // info.offset 包含实际拖拽距离
  if (Math.abs(info.offset.x) < 10 && Math.abs(info.offset.y) < 10) {
    // 不是真正的拖拽，是点击
    handleClick();
  }
};

####Q2：如何在拖拽时防止 hover 效果？

原生方案：

&.dragging {
  .controlButton:hover {
    background: transparent !important;
  }
}

Motion 方案：

<motion.div
  className={isDragging ? 'dragging' : ''}
  animate={{
    pointerEvents: isDragging ? 'none' : 'auto',
  }}
>
  <button whileHover={isDragging ? {} : { scale: 1.1 }} />
</motion.div>

####Q3：如何处理边界约束？

原生方案：

const minX = padding - contentOffset;
const maxX = window.innerWidth - padding - wrapperWidth;
newX = Math.max(minX, Math.min(maxX, newX));

Motion 方案：

dragConstraints={{
  left: padding - contentOffset,
  right: window.innerWidth - padding - wrapperWidth,
  top: padding,
  bottom: window.innerHeight - toolbarHeight - padding,
}}

###💡 推荐方案

基于 Agentation 的设计哲学（零依赖、轻量级），我建议：

1. 保持当前原生实现 ✅

   • 优点：零依赖，完全控制，文件小
   • 缺点：无惯性、动画与交互分离

2. 作为可选功能提供 Motion 版本 📦

   agentation/
   ├── core       // 零依赖核心
   └── motion     // 可选 Motion 版本
   

3. 如果要完全迁移，做这些改进：

   • ✅ 使用 drag 替代 onMouseDown/mousemove
   • ✅ 用 dragConstraints 替代手动边界计算
   • ✅ 用 dragTransition 添加阻尼和惯性
   • ✅ 用 whileHover/whileTap 替代 CSS hover
   • ⚠️ 需要处理"在特定元素上禁用拖拽"的问题

###完整示例：Motion 版本 + 完整防护

'use client';

import React, { useState, useRef, useEffect } from 'react';
import { motion, useMotionValue, useTransform } from 'framer-motion';

export function DraggableToolbarComplete() {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const [isDragging, setIsDragging] = useState(false);
  const [dragRotation, setDragRotation] = useState(0);
  const [isActive, setIsActive] = useState(false);
  const [tooltipsHidden, setTooltipsHidden] = useState(false);
  
  const x = useMotionValue(position.x);
  const y = useMotionValue(position.y);
  const dragStartedRef = useRef(false);
  const shouldIgnoreClickRef = useRef(false);

  // 防止在按钮上拖拽
  const handlePointerDown = (e: React.PointerEvent) => {
    const target = e.target as HTMLElement;
    if (target.closest('button') || target.closest('[data-settings]')) {
      shouldIgnoreClickRef.current = true;
    } else {
      shouldIgnoreClickRef.current = false;
    }
  };

  const handleDragStart = () => {
    if (shouldIgnoreClickRef.current) return;
    
    setIsDragging(true);
    setDragRotation((Math.random() - 0.5) * 10);
    dragStartedRef.current = true;
    setTooltipsHidden(true);
  };

  const handleDragEnd = (event, info) => {
    setIsDragging(false);
    const distance = Math.sqrt(
      info.offset.x ** 2 + info.offset.y ** 2
    );
    
    // 如果拖拽距离足够（>10px），防止 onClick
    if (distance > 10) {
      shouldIgnoreClickRef.current = true;
    }
  };

  const handleToolbarClick = () => {
    if (shouldIgnoreClickRef.current) {
      shouldIgnoreClickRef.current = false;
      return;
    }
    setIsActive(!isActive);
  };

  const constraints = {
    left: 20,
    right: window.innerWidth - 317,
    top: 20,
    bottom: window.innerHeight - 64,
  };

  return (
    <motion.div
      className="toolbar-wrapper"
      drag
      dragElastic={0.05}
      dragMomentum={false}
      dragConstraints={constraints}
      dragTransition={{
        power: 0.3,
        restDelta: 0.001,
      }}
      style={{ x, y }}
      onPointerDown={handlePointerDown}
      onDragStart={handleDragStart}
      onDragEnd={handleDragEnd}
      onClick={handleToolbarClick}
      animate={{
        scale: isDragging ? 1.05 : 1,
        rotate: isDragging ? dragRotation : 0,
      }}
      transition={{
        type: 'spring',
        stiffness: 300,
        damping: 30,
      }}
      className={`toolbar-container ${
        isDragging ? 'dragging' : ''
      } ${isActive ? 'expanded' : 'collapsed'}`}
    >
      {/* Content */}
    </motion.div>
  );
}

##总结

个人建议： 保持当前原生实现，但如果用户反馈需要更流畅的交互（特别是大屏或长距离拖拽），可以考虑在文档中提供 Motion 版本的参考实现。