feat: ✨ ImgCropper 图片剪裁支持设置裁剪框宽高比#973
Conversation
✅ Closes: #920
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough此次更新为 Changes
Sequence Diagram(s)sequenceDiagram
participant U as 用户
participant C as ImgCropper组件
participant H as 裁剪处理函数
participant Upl as useUpload
participant S as 服务器
U->>C: 选择自定义裁剪比例
C->>U: 显示裁剪区域
U->>C: 执行裁剪并确认
C->>H: 触发 handleConfirmUpload/handleCustomConfirm
H->>Upl: 调用 useUpload 上传图片
Upl->>S: 发送图片数据
S-->>Upl: 返回上传结果
Upl-->>H: 返回处理反馈
H->>C: 更新界面状态
Assessment against linked issues
Possibly related PRs
Poem
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for wot-design-uni ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
docs/component/img-cropper.md (1)
98-111: 重复的"基本用法"标题文档中出现了两个相同的"基本用法"标题（第5行和第99行），这可能会导致目录混乱。建议将第二个标题修改为更具体的描述，例如"设置自定义裁剪比例"。
-## 基本用法 +## 设置自定义裁剪比例🧰 Tools
🪛 markdownlint-cli2 (0.17.2)
99-99: Multiple headings with the same content
null(MD024, no-duplicate-heading)
src/pages/imgCropper/Index.vue (1)
147-180: 硬编码的 API URL 应考虑配置化上传函数中硬编码了 API URL (
https://mockapi.eolink.com/zhTuw2P8c29bc981a741931bdd86eb04dc1e8fd64865cb5/upload)。建议将此 URL 提取为配置变量或环境变量，以便更容易地在不同环境中切换。- action: 'https://mockapi.eolink.com/zhTuw2P8c29bc981a741931bdd86eb04dc1e8fd64865cb5/upload', // 替换为实际的上传地址 + action: import.meta.env.VITE_UPLOAD_API_URL || 'https://mockapi.eolink.com/zhTuw2P8c29bc981a741931bdd86eb04dc1e8fd64865cb5/upload', // 替换为实际的上传地址在项目根目录的环境配置文件中添加:
VITE_UPLOAD_API_URL=https://your-production-upload-url
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
docs/component/img-cropper.md(2 hunks)src/pages/imgCropper/Index.vue(4 hunks)src/uni_modules/wot-design-uni/components/wd-img-cropper/types.ts(2 hunks)src/uni_modules/wot-design-uni/components/wd-img-cropper/wd-img-cropper.vue(4 hunks)
🧰 Additional context used
🪛 markdownlint-cli2 (0.17.2)
docs/component/img-cropper.md
99-99: Multiple headings with the same content
null
(MD024, no-duplicate-heading)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Cloudflare Pages
🔇 Additional comments (10)
src/uni_modules/wot-design-uni/components/wd-img-cropper/types.ts (1)
60-64: 属性定义清晰，文档完整新增的
aspectRatio属性定义良好，包含了清晰的类型说明和默认值。注释也很完整，明确指出了裁剪框宽高比的格式要求为 width:height。docs/component/img-cropper.md (2)
73-73: 属性表格添加完整
aspect-ratio属性已正确添加到属性表格中，清晰地说明了其类型、默认值及格式要求。不过请注意
$LOWEST_VERSION$应该替换为实际的最低支持版本号。
113-180: 上传示例代码实现完整裁剪后上传的示例代码实现完整，包括了错误处理和进度跟踪，对用户理解如何集成上传功能很有帮助。代码结构清晰，注释充分。
src/uni_modules/wot-design-uni/components/wd-img-cropper/wd-img-cropper.vue (3)
166-174: 裁剪框尺寸计算逻辑优化裁剪框尺寸计算逻辑已优化，使用宽高比正确计算裁剪区域的宽高。代码清晰地从
aspectRatio属性中解析比例并应用到尺寸计算中。
278-295: 旋转后的缩放比例计算逻辑优化旋转后的缩放比例计算逻辑已优化，考虑了不同宽高比下的旋转情况。通过交换宽高并重新计算缩放比例，确保图片在任何角度下都能正确填充裁剪框。
332-369: 图片尺寸计算逻辑优化图片尺寸计算逻辑已优化，考虑了图片与裁剪框的比例关系，确保至少有一边等于裁剪框尺寸。代码中添加了详细的注释说明不同情况下的处理逻辑。
src/pages/imgCropper/Index.vue (4)
33-58: 自定义裁剪比例示例实现完整自定义裁剪比例的示例实现完整，展示了不同比例（1:1, 3:2, 16:9）的裁剪效果。UI 结构良好，使用了栅格布局展示不同比例的裁剪效果。
60-78: 裁剪后上传示例实现良好裁剪后上传的示例实现良好，UI 结构清晰，与文档中的示例代码一致。
198-202: 高度计算函数实现合理
getHeight函数实现合理，根据不同的宽高比计算出适当的高度值，保持 UI 显示的一致性。
242-274: 样式结构清晰，适应不同比例新增的样式结构清晰，针对不同的裁剪比例提供了适当的样式调整。使用 flex 布局和 gap 属性使界面排版整洁。
|
请问什么时候发布到npm上 |
2 participants
✅ Closes: #920
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
#920
💡 需求背景和解决方案
添加
aspect-ratio属性支持设置裁剪框宽高比☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
文档