图生图 风格转换
Go to file
杨明明 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
.husky feat: 初始化 Taro 3.8 图生图风格转换小程序项目 2025-09-01 11:22:03 +08:00
config feat: 配置 TailwindCSS 并迁移到 Redux 2025-09-03 16:33:06 +08:00
src feat: 实现可拖拽分割线功能,支持动态调整对比比例 2025-09-03 17:41:35 +08:00
tests feat: 完善 TDD 开发环境配置 2025-09-01 13:19:17 +08:00
types feat: 初始化 Taro 3.8 图生图风格转换小程序项目 2025-09-01 11:22:03 +08:00
.editorconfig feat: 初始化 Taro 3.8 图生图风格转换小程序项目 2025-09-01 11:22:03 +08:00
.env.development feat: 平台适配优化和代码重构 2025-09-02 17:40:45 +08:00
.env.production feat: 平台适配优化和代码重构 2025-09-02 17:40:45 +08:00
.env.test feat: 平台适配优化和代码重构 2025-09-02 17:40:45 +08:00
.eslintrc feat: 初始化 Taro 3.8 图生图风格转换小程序项目 2025-09-01 11:22:03 +08:00
.gitignore feat: 初始化 Taro 3.8 图生图风格转换小程序项目 2025-09-01 11:22:03 +08:00
CLAUDE.md feat: 完善 TDD 开发环境配置 2025-09-01 13:19:17 +08:00
DESIGN_PREVIEW.md feat: 实现可拖拽分割线功能,支持动态调整对比比例 2025-09-03 17:41:35 +08:00
TODO.md feat: 配置 TailwindCSS 并迁移到 Redux 2025-09-03 16:33:06 +08:00
babel.config.js feat: 初始化 Taro 3.8 图生图风格转换小程序项目 2025-09-01 11:22:03 +08:00
commitlint.config.mjs feat: 初始化 Taro 3.8 图生图风格转换小程序项目 2025-09-01 11:22:03 +08:00
jest.config.js feat: 完善 TDD 开发环境配置 2025-09-01 13:19:17 +08:00
mini-app.md feat: 添加图标 2025-09-03 15:57:27 +08:00
package.json feat: 配置 TailwindCSS 并迁移到 Redux 2025-09-03 16:33:06 +08:00
pnpm-lock.yaml feat: 配置 TailwindCSS 并迁移到 Redux 2025-09-03 16:33:06 +08:00
postcss.config.js feat: 配置 TailwindCSS 并迁移到 Redux 2025-09-03 16:33:06 +08:00
project.config.json feat: 平台适配优化和代码重构 2025-09-02 17:40:45 +08:00
project.private.config.json feat: 平台适配优化和代码重构 2025-09-02 17:40:45 +08:00
project.tt.json fix: 需要个 配置文件 2025-09-02 17:21:08 +08:00
stylelint.config.mjs feat: 初始化 Taro 3.8 图生图风格转换小程序项目 2025-09-01 11:22:03 +08:00
tailwind.config.js feat: 配置 TailwindCSS 并迁移到 Redux 2025-09-03 16:33:06 +08:00
tsconfig.json feat: 完善 TDD 开发环境配置 2025-09-01 13:19:17 +08:00