 杨明明
|
f4588a563e
|
fix: 修复拖拽时图片缩放变形问题，保证图片尺寸不变形
� 问题修复：
- 解决拖拽分割线时图片会缩放变形的问题
- 确保图片始终保持原始比例，不会因容器宽度变化而变形
- 只改变图片的显示区域，而非图片本身的尺寸
� 技术实现：
- 使用CSS背景图片替代Image组件
- 通过backgroundSize动态计算保持图片原始比例
- 左侧：backgroundPosition: 'left center' 显示图片左侧部分
- 右侧：backgroundPosition: 'right center' 显示图片右侧部分
- 动态调整backgroundSize确保图片不变形
� 实现原理：
- 左半部分：backgroundSize = (100 / splitPosition) * 100%
- 右半部分：backgroundSize = (100 / (100 - splitPosition)) * 100%
- 通过数学计算确保图片在任何分割比例下都保持原始尺寸
✅ 效果验证：
- 拖拽时图片不再缩放变形
- 保持图片原始宽高比
- 只显示对应区域的图片内容
- 提供更真实的before/after对比效果
|
2025-09-03 17:49:32 +08:00 |
|
杨明明
|
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 |
|
imeepos
|
2cff8db4bf
|
feat: 平台适配优化和代码重构
- 更新小程序配置支持微信平台(appid: wxb51f0b0c3aad7cdf)
- 新增微信小程序平台适配模块(weapp.ts)
- 优化广告组件跨平台兼容性处理
- 移除不必要的React.memo优化
- 简化广告加载逻辑，提高稳定性
- 修复代码规范问题(import顺序、unused变量)
|
2025-09-02 17:40:45 +08:00 |
|
imeepos
|
a38eab405c
|
feat: 添加用户登录检测和再生成功能
- 在首页添加用户会话检测机制
- 新增再来一张按钮功能，允许用户快速重新生成图片
- 完善平台抽象层，支持字节跳动小程序用户信息接口
- 优化下载区域组件，支持更多交互功能
- 修复错误提示组件文本显示问题
|
2025-09-02 12:29:15 +08:00 |
|
imeepos
|
cef1c697a5
|
refactor: 将结果预览重构为独立页面
- 创建新的pages/result页面用于图片预览
- 修改index页面改用页面跳转替换组件调用
- 通过URL参数传递图片数据
- 在app.config.ts中注册新页面路由
- 删除ImageResultViewer组件，功能迁移至result页面
- 优化页面状态管理，简化index页面逻辑
|
2025-09-01 18:57:52 +08:00 |
|
imeepos
|
52b4786459
|
fix: 修复界面组件布局和显示问题
- 修复LoadingOverlay组件文本布局，确保两行显示
- 为ImageResultViewer头部添加精致分割线
- 修复DownloadSection按钮显示问题，调整布局层级
- 优化组件间距和视觉效果
|
2025-09-01 18:23:12 +08:00 |
|
imeepos
|
c318db5baa
|
feat: 完成组件化重构并添加关闭按钮
- 将页面功能拆分为独立组件：UploadButton、LoadingOverlay、ErrorOverlay、ImageResultViewer、DownloadSection
- 修复字体大小问题，统一使用rpx单位适配小程序
- 添加图片预览顶部关闭按钮，改善用户体验
- 优化广告激励下载功能，使用useMemo稳定引用避免重复初始化
- 实现磨砂玻璃背景效果，提升视觉体验
- 移除Swiper组件，简化图片预览逻辑
|
2025-09-01 18:03:34 +08:00 |