imeepos
a0efbc2cbd
� 核心功能： - 添加可拖拽分割线，用户可左右拖动调整原图和效果图显示比例 - 初始50/50比例，支持10%-90%范围内自由调整 - 实时响应拖拽操作，提供流畅交互体验 � 交互优化： - 增大拖拽区域（4px宽度）便于操作 - 拖拽时手柄放大并增强阴影效果 - 使用touch-action: none防止页面滚动干扰 - 延迟重置拖拽状态避免误触发卡片点击 � 动态效果： - 左右区域宽度随拖拽实时调整 - 标签宽度动态跟随区域变化 - 平滑过渡动画（0.1s ease-out） - 分割线位置流畅跟随手指移动 � 技术实现： - React useState管理分割线位置状态 - getBoundingClientRect()获取精确容器位置 - 动态计算触摸点位置并转换为百分比 - CSS动态样式与React状态完美结合 - 触摸事件阻止冒泡避免干扰其他交互 � 更新设计文档，添加交互使用说明