3 Commits

Author	SHA1	Message	Date
imeepos	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
imeepos	e37e7334cd	feat: 实现左右对比效果，原图和效果图各占一半 ... - 重新设计图片对比区域，实现左右分屏布局 - 原图展示在左半边，效果图展示在右半边，各占50%宽度 - 添加中央分割线和圆形交互手柄，带有左右箭头图标 - 标签位置调整到图片底部中央，使用毛玻璃效果 - 统一图片高度180px，确保视觉平衡和完美对比 - 保持圆角设计和阴影效果，提升视觉体验 - 更新设计预览文档，记录左右对比的实现细节	2025-09-03 17:30:32 +08:00
imeepos	68dc675e84	feat: 美化home页面，实现瀑布流布局展示模板对比效果 ... - 重新设计TemplateCard组件，突出展示input原图和output效果图的对比 - 实现瀑布流布局，每行2列，充分利用屏幕空间 - 添加渐变色标题和现代化的卡片设计 - 使用CSS Grid实现响应式布局，兼容小程序环境 - 原图和效果图都有清晰的标签标识（蓝色原图，绿色效果） - 添加箭头指示转换过程，使用渐变背景和阴影效果 - 扩展模板数据，添加6个不同的AI处理功能 - 包含标签系统和积分成本信息展示 - 添加设计预览文档	2025-09-03 17:20:55 +08:00