 杨明明
|
c5fcab683f
|
feat: 修复字体大小问题并添加历史记录功能
- 将所有页面和组件的px单位改为rpx，确保跨设备适配
- 修复首页右侧padding超出屏幕的问题
- 在模板执行流程中添加历史记录功能：
- 开始处理时创建generating状态记录
- 处理成功时更新为completed状态并保存结果
- 处理失败时更新为failed状态并记录错误信息
- 优化布局间距和字体大小，提升用户体验
|
2025-09-03 20:53:29 +08:00 |
|
杨明明
|
4c0d69e1b2
|
feat: 修复首页滚动卡顿并添加下拉刷新功能
滚动性能优化：
- 使用ScrollView组件替代普通View，提供原生滚动性能
- 启用硬件加速：transform: translateZ(0)和will-change属性
- 优化CSS动画：减少clip-path动画频率，简化transition效果
- 图片渲染优化：image-rendering: optimizeSpeed和backface-visibility
下拉刷新功能：
- 集成ScrollView原生下拉刷新能力
- 添加refresherEnabled、refresherTriggered等配置
- 实现handleRefresh异步刷新逻辑
- 完善错误处理和用户反馈
性能提升措施：
- 移除不必要的transition动画减少重绘
- 使用requestAnimationFrame节流触摸事件
- 启用contain: layout style paint优化渲染
- 简化active状态效果，使用opacity替代transform
用户体验改进：
- 流畅的原生滚动体验，消除卡顿现象
- 直观的下拉刷新操作，符合用户习惯
- 完整的加载状态和错误提示
- 自动数据同步和状态管理
技术实现：
- ScrollView enhanced模式启用增强特性
- enablePassive被动事件监听提升性能
- refresherBackground和refresherDefaultStyle视觉定制
- 异步错误处理和Toast提示集成
解决问题：首页滚动时的卡顿现象，提升用户交互体验
|
2025-09-03 20:39:18 +08:00 |
|
杨明明
|
38fbd12921
|
fix: 优化TemplateCard布局结构，修复图片高度并调整元素层次
布局结构优化：
- 标题移至卡片顶部，不占用图片空间
- 积分徽章和标签移入图片容器内，作为悬浮元素
- 简介保持在卡片底部，图片下方
- 消除元素间的空间占用冲突
图片区域修复：
- 增加图片容器最小高度：min-height: 240px
- 确保所有图片层填满容器：width/height: 100%
- 图片对比区域使用flex: 1占据剩余空间
- 移除图片区域内边距，图片完全填充
悬浮元素定位：
- 积分徽章：绝对定位在图片右上角 (top: 12px, right: 12px)
- 标签区域：绝对定位在图片底部 (bottom: 12px)
- 使用z-index: 4确保悬浮元素在最顶层
- 保持毛玻璃效果和半透明背景
层次结构清晰：
template-card
template-header (标题)
image-comparison (图片区域)
merged-image-container
图片层 (原图+效果图)
分割线
积分徽章 (悬浮)
标签区域 (悬浮)
template-footer (简介)
修复效果：
- 图片区域现在占据更多空间，视觉效果更好
- 悬浮元素不影响图片显示区域
- 布局层次清晰，信息展示合理
- 保持拖拽分割线功能完整性
|
2025-09-03 19:22:27 +08:00 |
|
杨明明
|
691b174287
|
fix: 修复积分徽章上方空白问题
� 问题修复：
- 减少积分徽章上边距：top: 20px → 12px
- 优化内边距：padding: 4px 8px → 3px 6px
- 调整圆角大小：border-radius: 12px → 10px
� 布局优化：
- 添加flexbox布局：display: flex, align-items: center, justify-content: center
- 设置最小高度：min-height: 18px，确保徽章有合适高度
- 重置行高：line-height: 1，消除默认行高空白
� 文字样式：
- 重置文字外边距和内边距：margin: 0, padding: 0
- 设置行高为1，消除文字上下空白
- 使用block显示确保文字正确渲染
✅ 修复效果：
- 积分徽章紧贴图片右上角，无多余空白
- 文字在徽章中完美居中显示
- 整体视觉更加紧凑和专业
|
2025-09-03 19:15:50 +08:00 |
|
杨明明
|
810abaa0b1
|
feat: 美化home页面布局，突出图片展示并优化文字布局
� 布局重构：
- 标题移至图片上方，突出模板名称
- 积分徽章悬浮在图片右上角，不占用布局空间
- 标签悬浮在图片底部，使用半透明黑色背景
- 简介移至图片下方，保持简洁描述
� 视觉优化：
- 增加图片区域占比，提升视觉冲击力
- 移除图片区域内边距，图片完全填充
- 优化卡片圆角和阴影效果
- 标签和积分使用毛玻璃效果增强层次感
� 样式改进：
- 积分徽章：橙色背景，右上角悬浮，带阴影
- 标签徽章：半透明黑色，底部悬浮，支持多标签
- 标题区域：白色背景，字体加粗突出
- 简介区域：限制2行显示，超出省略
✨ 用户体验提升：
- 图片成为视觉焦点，占据主要空间
- 悬浮元素不影响布局流，信息层次清晰
- 保持拖拽分割线功能完整性
- 响应式设计适配不同屏幕尺寸
|
2025-09-03 18:57:42 +08:00 |
|
杨明明
|
ccdacf2fb4
|
feat: 重新实现图片对比效果，使用clip-path实现真正的before/after对比
� 核心改进：
- 使用图片层叠 + CSS clip-path 实现真正的图片对比效果
- 底层显示完整原图，顶层显示完整效果图并通过clip-path裁剪
- 拖拽时只改变裁剪边界，图片尺寸始终保持不变
- 左半部分显示原图，右半部分显示效果图，完美拼接
� 技术实现：
- 使用两个image-layer层叠显示两张完整图片
- 通过clip-path: polygon()动态控制效果图的显示区域
- splitPosition控制分割线位置和裁剪边界
- 图片使用aspectFill模式确保完整填充
� 实现原理：
- 原图层：完整显示在底层
- 效果图层：完整显示但通过clip-path裁剪右半部分
- 拖拽时：只更新clip-path的polygon坐标
- 结果：左边看到原图，右边看到效果图，无缝拼接
✅ 用户体验：
- 图片尺寸固定，永不缩放变形
- 真正的before/after对比效果
- 流畅的拖拽交互体验
- 专业级图像编辑软件的对比效果
这个实现完全符合需求：无论如何拖拽，图片大小不变，左右两半完美拼接成一张完整的对比图！
|
2025-09-03 18:06:37 +08:00 |
|
杨明明
|
a946420240
|
fix: 移除动态标签并修复图片显示问题
� UI优化：
- 移除动态标签组件，简化界面设计
- 删除image-labels相关的JSX结构和CSS样式
- 移除label-left、label-right等标签样式定义
- 提供更简洁的图片对比体验
�️ 图片显示修复：
- 修复容器高度设置，使用固定height: 180px替代min/max-height
- 恢复object-fit: cover确保图片正确填充容器
- 修复图片无法显示的问题
- 确保aspectFit模式下图片正常渲染
� 样式优化：
- 简化image-wrapper布局，保持flexbox居中
- 移除不必要的标签相关CSS代码
- 优化容器尺寸控制，确保图片稳定显示
- 保持拖拽功能的完整性
✅ 预期效果：
- 图片正常显示，无变形
- 界面更简洁，无多余标签
- 拖拽分割线功能正常
- 左右对比效果清晰直观
|
2025-09-03 17:57:16 +08:00 |
|
杨明明
|
be582a668a
|
fix: 修复图片变形问题并优化瀑布流布局
� 图片显示修复：
- 改用mode='aspectFit'替代aspectFill，保持图片完整比例
- 设置height: auto让图片高度自适应，避免变形
- 限制宽度但不限制高度，确保图片不被拉伸
- 使用flexbox居中对齐图片显示
� 瀑布流布局优化：
- 简化CSS布局，使用标准grid布局替代复杂的flex+grid混合方案
- 移除不必要的max-height和flex-wrap属性
- 删除TemplateCard的margin-bottom，使用grid gap统一间距
- 确保小程序环境下的兼容性和稳定性
� 样式细节调整：
- 容器使用min-height和max-height控制高度范围
- 添加line-clamp标准属性提升CSS兼容性
- 优化响应式断点，确保不同屏幕尺寸下的良好显示
- 保持卡片圆角和阴影效果
✅ 预期效果：
- 图片不再变形，保持原始宽高比
- 瀑布流布局正确显示为2列网格
- 拖拽功能正常，图片尺寸稳定
- 在微信小程序中完美兼容
|
2025-09-03 17:53:47 +08:00 |
|
杨明明
|
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 |
|
杨明明
|
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 |