 杨明明
|
3647b40631
|
fix: 修复Taro环境下拖拽功能的getBoundingClientRect错误
� 问题修复：
- 替换getBoundingClientRect()为Taro.createSelectorQuery()
- 使用Taro官方推荐的boundingClientRect()方法获取元素位置
- 解决小程序环境下DOM API不可用的问题
� 技术改进：
- 异步获取容器位置信息并缓存
- 在触摸开始时预先获取容器数据
- 保持拖拽过程中的流畅性和响应性
- 完全兼容微信小程序环境
✅ 功能验证：
- 项目成功构建，无编译错误
- 保持所有原有拖拽功能特性
- 维持10%-90%拖拽范围限制
- 确保触摸事件正常响应
现在可以在微信开发者工具中正常使用拖拽分割线功能
|
2025-09-03 17:47:15 +08:00 |
|
杨明明
|
a0efbc2cbd
|
feat: 实现可拖拽分割线功能，支持动态调整对比比例
� 核心功能：
- 添加可拖拽分割线，用户可左右拖动调整原图和效果图显示比例
- 初始50/50比例，支持10%-90%范围内自由调整
- 实时响应拖拽操作，提供流畅交互体验
� 交互优化：
- 增大拖拽区域（4px宽度）便于操作
- 拖拽时手柄放大并增强阴影效果
- 使用touch-action: none防止页面滚动干扰
- 延迟重置拖拽状态避免误触发卡片点击
� 动态效果：
- 左右区域宽度随拖拽实时调整
- 标签宽度动态跟随区域变化
- 平滑过渡动画（0.1s ease-out）
- 分割线位置流畅跟随手指移动
� 技术实现：
- React useState管理分割线位置状态
- getBoundingClientRect()获取精确容器位置
- 动态计算触摸点位置并转换为百分比
- CSS动态样式与React状态完美结合
- 触摸事件阻止冒泡避免干扰其他交互
� 更新设计文档，添加交互使用说明
|
2025-09-03 17:41:35 +08:00 |
|
杨明明
|
e683bcdcb9
|
feat: 实现图片合成对比效果，左半部分显示原图左半，右半部分显示效果图右半
- 重新设计图片对比逻辑，实现真正的图片合成对比效果
- 左半部分显示原图的左半部分，右半部分显示效果图的右半部分
- 使用CSS transform实现图片的精确裁剪和定位
- 左图不偏移显示左半部分，右图向左偏移50%显示右半部分
- 优化标签布局，左右标签分别覆盖对应区域底部
- 保持中央分割线和交互手柄的视觉引导效果
- 实现真正的before/after对比效果，用户可直观看到处理差异
|
2025-09-03 17:34:54 +08:00 |
|
杨明明
|
e37e7334cd
|
feat: 实现左右对比效果，原图和效果图各占一半
- 重新设计图片对比区域，实现左右分屏布局
- 原图展示在左半边，效果图展示在右半边，各占50%宽度
- 添加中央分割线和圆形交互手柄，带有左右箭头图标
- 标签位置调整到图片底部中央，使用毛玻璃效果
- 统一图片高度180px，确保视觉平衡和完美对比
- 保持圆角设计和阴影效果，提升视觉体验
- 更新设计预览文档，记录左右对比的实现细节
|
2025-09-03 17:30:32 +08:00 |
|
杨明明
|
68dc675e84
|
feat: 美化home页面，实现瀑布流布局展示模板对比效果
- 重新设计TemplateCard组件，突出展示input原图和output效果图的对比
- 实现瀑布流布局，每行2列，充分利用屏幕空间
- 添加渐变色标题和现代化的卡片设计
- 使用CSS Grid实现响应式布局，兼容小程序环境
- 原图和效果图都有清晰的标签标识（蓝色原图，绿色效果）
- 添加箭头指示转换过程，使用渐变背景和阴影效果
- 扩展模板数据，添加6个不同的AI处理功能
- 包含标签系统和积分成本信息展示
- 添加设计预览文档
|
2025-09-03 17:20:55 +08:00 |
imeepos
|
c8480308e0
|
feat: 添加图标
|
2025-09-03 15:57:27 +08:00 |