bowong
/
bw-mini-app
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
135 Commits 5 Branches 2 Tags 3.1 MiB
Commit Graph

135 Commits

Author SHA1 Message Date
杨明明 0ce0f32aea feat: 更新SDK Server匹配后端NestJS控制器的ApiResponse格式 
� 后端API适配：
- 更新ApiResponse接口匹配后端标准响应格式
- 重构ExecuteTemplateResult为简化的结果格式
- 优化HTTP请求处理，自动检查status字段

� 核心更新：
- getAllTemplates(): 返回Template[]数组
- getTemplate(): 处理Template|null响应
- executeTemplate(): 包装字符串结果为结构化对象
- 增强错误处理，基于后端msg字段提供错误信息

� 接口变更：
- ExecuteTemplateResult: {result: string|null, success: boolean, message: string}
- 请求失败时自动抛出包含后端msg的错误
- 成功时返回data字段的实际内容

� 文档和示例更新：
- 更新README.md中的接口说明和使用示例
- 修复sdk-server-example.ts中的示例代码
- 添加ApiResponse格式说明

✅ 完美匹配后端NestJS控制器的响应格式，可无缝对接！
 2025-09-03 18:32:26 +08:00
杨明明 f37a1e7b81 fix: 修复多个TemplateCard拖拽逻辑冲突问题 
问题分析：
- 每个TemplateCard都使用相同的CSS选择器
- Taro选择器总是选择页面中第一个匹配元素
- 导致第二个及后续卡片获取到错误的容器信息
- 造成拖拽计算错误，出现不连续的滑动效果

解决方案：
- 为每个TemplateCard容器添加唯一ID
- 使用ID选择器替代class选择器
- 确保每个卡片获取到正确的容器边界信息
- 保证拖拽计算基于正确的容器尺寸和位置

修复效果：
- 所有卡片的拖拽逻辑互不干扰
- 分割线移动精确响应触摸位置
- 解决多实例组件选择器冲突问题
 2025-09-03 18:10:20 +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
杨明明 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 4709666814 feat: 修改Template结构与后端保持一致 2025-09-03 16:59:58 +08:00
杨明明 14205a9021 feat: 配置 TailwindCSS 并迁移到 Redux 
- 配置 TailwindCSS 支持小程序开发
  - 安装 tailwindcss, postcss, autoprefixer
  - 安装 weapp-tailwindcss 插件支持小程序
  - 配置 tailwind.config.js 和 postcss.config.js
  - 更新 Taro 配置支持 TailwindCSS

- 从 Zustand 迁移到 Redux Toolkit
  - 移除 zustand 依赖
  - 安装 redux, react-redux, redux-thunk, @reduxjs/toolkit
  - 重构状态管理架构：
    - src/constants/ - Action 类型常量
    - src/actions/ - Action creators 和异步 actions
    - src/reducers/ - Reducers
    - src/selectors/ - 状态选择器
    - src/hooks/redux.ts - 类型化 hooks
  - 更新组件使用新的 Redux API
  - 保持数据持久化功能

- 更新应用配置
  - 将 app.ts 重命名为 app.tsx 支持 JSX
  - 添加 Redux Provider 到应用根组件
  - 更新 TODO.md 标记完成状态

- 构建验证通过，所有功能正常
 2025-09-03 16:33:06 +08:00
imeepos c8480308e0 feat: 添加图标 2025-09-03 15:57:27 +08:00
imeepos 353e0ee6dc feat: 添加跨平台媒体下载功能 
- 新增Media抽象类定义文件下载接口
- 在工厂类中添加createMedia方法
- 实现MediaTT类支持字节跳动小程序文件下载
- 实现MediaWeApp类支持微信小程序文件下载
- 统一代码格式，修复空格和缩进问题
 2025-09-02 18:26:48 +08:00
imeepos 2994b68063 feat: 添加图像转视频功能 
- 新增ImageToVideoParams接口定义
- 实现imageToVideo方法支持图像转视频API调用
- 使用application/x-www-form-urlencoded格式发送POST请求
- 支持img_url和duration参数配置
- 添加完整的错误处理和日志记录
 2025-09-02 18:25:01 +08:00
imeepos a27577dd3c fix: 解决合并冲突并同步配置文件 
- 解决环境配置文件冲突(.env.development, .env.production, .env.test)
- 更新项目配置文件(project.config.json)
- 添加新的配置文件(project.tt.json)
- 同步config/index.ts配置更改
 2025-09-02 17:44:17 +08:00
imeepos 2cff8db4bf feat: 平台适配优化和代码重构 
- 更新小程序配置支持微信平台(appid: wxb51f0b0c3aad7cdf)
- 新增微信小程序平台适配模块(weapp.ts)
- 优化广告组件跨平台兼容性处理
- 移除不必要的React.memo优化
- 简化广告加载逻辑，提高稳定性
- 修复代码规范问题(import顺序、unused变量)
 2025-09-02 17:40:45 +08:00
杨明明 21dcab71d5 Merge pull request 'feat: 支持多端同时开发调试' (#1) from zdh into master 
Reviewed-on: #1
 2025-09-02 17:24:42 +08:00
iHeyTang 2704645b0e fix: 需要个 配置文件 2025-09-02 17:21:08 +08:00
iHeyTang 9b4adf6c63 feat: 更新环境配置和平台支持，支持多端同时调试开发 2025-09-02 17:17:09 +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
imeepos a0330ec878 feat: 优化图片全屏展示方案 
- 使用aspectFill模式最大化图片利用屏幕空间
- 添加精美相框和渐变背景突出图片效果
- 优化图片容器尺寸计算保持完美比例
- 增强视觉层次感和用户体验
 2025-09-01 17:08:42 +08:00
imeepos 3c87b60c18 fix: 优化预览页面UI显示效果 
- 标题改为半透明悬浮显示，添加毛玻璃效果
- 图片模式改为aspectFill消除黑边
- 为图片预览提供更大显示空间
 2025-09-01 16:38:46 +08:00
imeepos e7c1743bd5 feat: 添加广告激励下载功能 
- 优化useAd Hook支持奖励和关闭回调
- 在预览页面添加看广告下载按钮
- 实现下载图片到本地相册功能
- 添加完整的中文注释和业务逻辑处理
 2025-09-01 16:15:56 +08:00
imeepos 82e01276be fix: 移除错误详情显示优化用户体验 2025-09-01 16:06:00 +08:00
imeepos d33f200217 feat: 完成UI全面优化升级 
主要改进：
- 添加首页背景图片 Figure.jpg
- 实现结果页面全屏滑动预览功能
- 统一Loading和Error页面设计风格
- 添加半透明遮罩层提升视觉效果
- 优化按钮样式和交互动画
- 完善错误处理和用户体验

技术细节：
- 使用Swiper组件实现左右滑动图片浏览
- 添加毛玻璃效果和渐变色设计
- 实现响应式布局和动画效果
- 统一配色方案和视觉层级
 2025-09-01 16:04:38 +08:00
imeepos 0a0eb378fa fix: 代码清理和模型名称修正 
- 移除未使用的showToast导入
- 恢复正确的模型名称为gemini-2.5-flash-image-preview
 2025-09-01 15:26:54 +08:00
imeepos faefda3ea2 feat: 简化页面布局为4个清晰步骤流程 
- 重构index页面为步骤式交互：上传→加载→结果→错误
- 优化用户体验：单一焦点，清晰的状态转换
- 美化UI设计：统一卡片容器，渐变背景，现代化按钮
- 完善提示词：更新为中文手办生成专用描述
- 修复SDK模型名称：gemini-2.5-flash-image
- 添加类型安全：getTaskStatus返回string[]类型
 2025-09-01 15:16:52 +08:00
imeepos 77ccaf8acd feat: 升级图像生成SDK支持multipart/form-data格式 
- 升级generateImage方法支持multipart/form-data提交格式
- 添加aspect_ratio参数，默认9:16比例
- 更新默认模型为gemini-2.5-flash-image-preview
- 为getTaskStatus方法添加失败重试机制，最多重试3次，每次间隔5秒
- 新增useSdk hook封装SDK使用
- 更新示例页面集成图像生成功能
 2025-09-01 14:47:07 +08:00
imeepos 9b3bc7bf2d feat: 完善 TDD 开发环境配置 
- 配置 Jest 测试框架，支持 TypeScript 和 React 组件测试
- 添加 Testing Library 相关依赖用于 React 组件测试
- 配置 Babel 预设支持 Jest 和 React 测试环境
- 添加 TDD 开发工作流脚本 (test, test:watch, test:coverage)
- 创建完整的 TDD 编码规范文档 (CLAUDE.md)
- 添加自定义 hooks 和多平台支持目录结构
- 配置 TypeScript 严格模式和 ESLint 规范
- 添加全局类型定义文件支持
 2025-09-01 13:19:17 +08:00
imeepos 23a0b502d3 feat: 初始化 Taro 3.8 图生图风格转换小程序项目 
- 添加基础项目配置和依赖
- 配置多平台编译支持 (微信小程序、H5、APP)
- 集成 TypeScript、ESLint、Stylelint 代码规范
- 配置 Husky 和 Commitlint 代码提交检查
- 设置开发、测试、生产环境配置
 2025-09-01 11:22:03 +08:00