style(select-picker): 调整SelectPicker组件样式中label文字过长导致位置错位问题 (#1340)#1389
style(select-picker): 调整SelectPicker组件样式中label文字过长导致位置错位问题 (#1340)#1389xiaoxiaohuayu wants to merge 7 commits intoMoonofweisheng:masterfrom
Conversation
This reverts commit 5987a24.
|
Someone is attempting to deploy a commit to the weisheng's projects Team on Vercel. A member of the Team first needs to authorize it. |
❌ Deploy Preview for wot-design-uni failed. Why did it fail? →Built without sensitive environment variables
|
工作概览本次 PR 为签名（Signature）组件添加了旋转导出功能，并优化了复选框（Checkbox）组件的样式布局。签名组件新增 angle 属性，支持在 MP-WEIXIN 平台下进行离屏画布旋转；复选框组件调整了容器布局方式和文本省略号行为。 变更内容
代码审查工作量评估🎯 3 (中等复杂度) | ⏱️ ~20-30 分钟
可能相关的 PR
建议审核人
诗歌
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/uni_modules/wot-design-uni/components/wd-signature/wd-signature.vue (1)
569-648: Version compatibility check required for wx.createOffscreenCanvas usage.The code uses
wx.createOffscreenCanvas({ type: '2d', ... })which requires WeChat miniprogram base library >= 2.16.1. Verify that:
- The component's minimum base library version supports 2.16.1+ (currently no version guard exists before the API call)
- Consider adding a version/feature detection check before creating the offscreen canvas, or document the minimum base library requirement
- If supporting older versions is needed, fall back to alternative rotation approaches for base library < 2.16.1
The error catch block will silently fail on incompatible versions—users will see the signature without rotation applied, which may confuse them without explicit feedback.
🧹 Nitpick comments (3)
docs/component/signature.md (1)
460-460: 建议在文档中说明angle属性的平台限制。根据实现代码，
angle旋转功能仅在微信小程序（MP-WEIXIN）平台生效。建议在文档中明确说明这一限制，避免用户在其他平台使用时产生困惑。-| angle | 导出图片旋转角度 | number | 0 | - | +| angle | 导出图片旋转角度（仅微信小程序支持） | number | 0 | - |src/uni_modules/wot-design-uni/components/wd-signature/types.ts (1)
79-86: 建议完善angle属性的注释说明。当前注释较为简略，建议补充有效值范围（如 0、90、180、270）以及平台支持情况，与其他属性的注释风格保持一致。
/** * 在横屏的模式下保存图片的方向 - * ps:签名横向的时候 + * 类型：number + * 默认值：0 + * 有效值：0、90、180、270（仅微信小程序支持） */ angle: { type: Number, default: 0 },src/uni_modules/wot-design-uni/components/wd-signature/wd-signature.vue (1)
84-84: 考虑使用更具体的类型替代any。使用
any类型会降低类型安全性。建议根据实际使用情况定义更明确的类型。-let canvas: any = null //canvas对象 微信小程序生成图片必须传入 +let canvas: WechatMiniprogram.Canvas | WechatMiniprogram.OffscreenCanvas | null = null //canvas对象 微信小程序生成图片必须传入
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
docs/component/signature.md(1 hunks)src/uni_modules/wot-design-uni/components/wd-checkbox/index.scss(3 hunks)src/uni_modules/wot-design-uni/components/wd-signature/types.ts(1 hunks)src/uni_modules/wot-design-uni/components/wd-signature/wd-signature.vue(3 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2024-11-24T06:12:44.418Z
Learnt from: Moonofweisheng
Repo: Moonofweisheng/wot-design-uni PR: 733
File: src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue:327-327
Timestamp: 2024-11-24T06:12:44.418Z
Learning: 在 `src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue` 中，由于 `title` 可能会发生变化，涉及到 `title` 的优化不太容易实现，需谨慎处理。
Applied to files:
src/uni_modules/wot-design-uni/components/wd-signature/wd-signature.vue
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Generate Test Summary
🔇 Additional comments (3)
src/uni_modules/wot-design-uni/components/wd-checkbox/index.scss (3)
74-74:display: flex与is-button/is-inline状态的inline-block可能存在覆盖关系，请确认样式优先级。根组件设置了
display: flex，但在is-button和is-inline状态下会覆盖为display: inline-block。这是预期行为，但建议确认在这些状态下布局是否仍然正确，特别是长标签文字的场景。Also applies to: 159-164
89-91: 良好的防御性样式设计。通过
min-width、min-height和flex-shrink: 0确保复选框形状在 flex 布局中不会被压缩，这是解决长标签导致布局错位的正确方案。
120-125: VerifymultiEllipsis(2)mixin is defined or imported in this project.The change from
lineEllipsistomultiEllipsis(2)cannot be verified through available sources. Standard multi-line ellipsis implementations require additional parameters (font-size, line-height, lines-to-show), but this code calls the mixin with only one parameter. Confirm thatmultiEllipsisis defined in the project's mixins or properly imported before merging.
| let exportWidth = canvasWidth | ||
| let exportHeight = canvasHeight | ||
| // #ifdef MP-WEIXIN | ||
| console.log(angle, 'angle') |
There was a problem hiding this comment.
移除调试用的 console.log 语句。
生产代码中不应保留调试日志，建议删除此行。
- console.log(angle, 'angle')📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| console.log(angle, 'angle') |
🤖 Prompt for AI Agents
In src/uni_modules/wot-design-uni/components/wd-signature/wd-signature.vue at
line 577, remove the debugging console.log(angle, 'angle') statement; simply
delete that line (or replace it with a proper logger call if persistent
instrumentation is required) so no console debugging remains in production code.
| if (angle && angle % 360 !== 0 && canvas) { | ||
| try { | ||
| let rad = (angle * Math.PI) / 180 | ||
| let newWidth = canvasWidth | ||
| let newHeight = canvasHeight | ||
| if (angle % 180 !== 0) { | ||
| newWidth = canvasHeight | ||
| newHeight = canvasWidth | ||
| } | ||
| // 创建离屏canvas | ||
| const offScreenCanvas = wx.createOffscreenCanvas({ | ||
| type: '2d', | ||
| width: newWidth, | ||
| height: newHeight | ||
| }) | ||
| const offContext = offScreenCanvas.getContext('2d') | ||
| offContext.save() | ||
| // 旋转中心平移 | ||
| if (angle === 90 || angle === -270) { | ||
| offContext.translate(newWidth, 0) | ||
| } else if (angle === 180 || angle === -180) { | ||
| offContext.translate(newWidth, newHeight) | ||
| } else if (angle === 270 || angle === -90) { | ||
| offContext.translate(0, newHeight) | ||
| } | ||
| offContext.rotate(rad) | ||
| // 绘制原始内容 | ||
| offContext.drawImage(canvas, 0, 0) | ||
| offContext.restore() | ||
| exportCanvas = offScreenCanvas | ||
| exportWidth = newWidth | ||
| exportHeight = newHeight | ||
| } catch (error) { | ||
| console.error('旋转画布时出错：', error) | ||
| } |
There was a problem hiding this comment.
旋转逻辑仅支持 90 度倍数的角度，但条件检查允许任意角度。
当前实现中，translate() 的调用仅处理了 90°、180°、270° 及其负值。如果传入其他角度值（如 45°、135°），虽然条件 angle % 360 !== 0 会通过，但平移逻辑缺失，导致图像位置错误。
建议方案之一：添加角度有效性校验，仅接受 90 度倍数的旋转角度。
- if (angle && angle % 360 !== 0 && canvas) {
+ if (angle && angle % 90 === 0 && angle % 360 !== 0 && canvas) {或者添加对非标准角度的警告提示：
if (angle && angle % 360 !== 0 && canvas) {
+ if (angle % 90 !== 0) {
+ console.warn('wd-signature: angle 仅支持 90 的倍数')
+ }
try {📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| if (angle && angle % 360 !== 0 && canvas) { | |
| try { | |
| let rad = (angle * Math.PI) / 180 | |
| let newWidth = canvasWidth | |
| let newHeight = canvasHeight | |
| if (angle % 180 !== 0) { | |
| newWidth = canvasHeight | |
| newHeight = canvasWidth | |
| } | |
| // 创建离屏canvas | |
| const offScreenCanvas = wx.createOffscreenCanvas({ | |
| type: '2d', | |
| width: newWidth, | |
| height: newHeight | |
| }) | |
| const offContext = offScreenCanvas.getContext('2d') | |
| offContext.save() | |
| // 旋转中心平移 | |
| if (angle === 90 || angle === -270) { | |
| offContext.translate(newWidth, 0) | |
| } else if (angle === 180 || angle === -180) { | |
| offContext.translate(newWidth, newHeight) | |
| } else if (angle === 270 || angle === -90) { | |
| offContext.translate(0, newHeight) | |
| } | |
| offContext.rotate(rad) | |
| // 绘制原始内容 | |
| offContext.drawImage(canvas, 0, 0) | |
| offContext.restore() | |
| exportCanvas = offScreenCanvas | |
| exportWidth = newWidth | |
| exportHeight = newHeight | |
| } catch (error) { | |
| console.error('旋转画布时出错：', error) | |
| } | |
| if (angle && angle % 90 === 0 && angle % 360 !== 0 && canvas) { | |
| try { | |
| let rad = (angle * Math.PI) / 180 | |
| let newWidth = canvasWidth | |
| let newHeight = canvasHeight | |
| if (angle % 180 !== 0) { | |
| newWidth = canvasHeight | |
| newHeight = canvasWidth | |
| } | |
| // 创建离屏canvas | |
| const offScreenCanvas = wx.createOffscreenCanvas({ | |
| type: '2d', | |
| width: newWidth, | |
| height: newHeight | |
| }) | |
| const offContext = offScreenCanvas.getContext('2d') | |
| offContext.save() | |
| // 旋转中心平移 | |
| if (angle === 90 || angle === -270) { | |
| offContext.translate(newWidth, 0) | |
| } else if (angle === 180 || angle === -180) { | |
| offContext.translate(newWidth, newHeight) | |
| } else if (angle === 270 || angle === -90) { | |
| offContext.translate(0, newHeight) | |
| } | |
| offContext.rotate(rad) | |
| // 绘制原始内容 | |
| offContext.drawImage(canvas, 0, 0) | |
| offContext.restore() | |
| exportCanvas = offScreenCanvas | |
| exportWidth = newWidth | |
| exportHeight = newHeight | |
| } catch (error) { | |
| console.error('旋转画布时出错：', error) | |
| } |
| if (angle && angle % 360 !== 0 && canvas) { | |
| try { | |
| let rad = (angle * Math.PI) / 180 | |
| let newWidth = canvasWidth | |
| let newHeight = canvasHeight | |
| if (angle % 180 !== 0) { | |
| newWidth = canvasHeight | |
| newHeight = canvasWidth | |
| } | |
| // 创建离屏canvas | |
| const offScreenCanvas = wx.createOffscreenCanvas({ | |
| type: '2d', | |
| width: newWidth, | |
| height: newHeight | |
| }) | |
| const offContext = offScreenCanvas.getContext('2d') | |
| offContext.save() | |
| // 旋转中心平移 | |
| if (angle === 90 || angle === -270) { | |
| offContext.translate(newWidth, 0) | |
| } else if (angle === 180 || angle === -180) { | |
| offContext.translate(newWidth, newHeight) | |
| } else if (angle === 270 || angle === -90) { | |
| offContext.translate(0, newHeight) | |
| } | |
| offContext.rotate(rad) | |
| // 绘制原始内容 | |
| offContext.drawImage(canvas, 0, 0) | |
| offContext.restore() | |
| exportCanvas = offScreenCanvas | |
| exportWidth = newWidth | |
| exportHeight = newHeight | |
| } catch (error) { | |
| console.error('旋转画布时出错：', error) | |
| } | |
| if (angle && angle % 360 !== 0 && canvas) { | |
| if (angle % 90 !== 0) { | |
| console.warn('wd-signature: angle 仅支持 90 的倍数') | |
| } | |
| try { | |
| let rad = (angle * Math.PI) / 180 | |
| let newWidth = canvasWidth | |
| let newHeight = canvasHeight | |
| if (angle % 180 !== 0) { | |
| newWidth = canvasHeight | |
| newHeight = canvasWidth | |
| } | |
| // 创建离屏canvas | |
| const offScreenCanvas = wx.createOffscreenCanvas({ | |
| type: '2d', | |
| width: newWidth, | |
| height: newHeight | |
| }) | |
| const offContext = offScreenCanvas.getContext('2d') | |
| offContext.save() | |
| // 旋转中心平移 | |
| if (angle === 90 || angle === -270) { | |
| offContext.translate(newWidth, 0) | |
| } else if (angle === 180 || angle === -180) { | |
| offContext.translate(newWidth, newHeight) | |
| } else if (angle === 270 || angle === -90) { | |
| offContext.translate(0, newHeight) | |
| } | |
| offContext.rotate(rad) | |
| // 绘制原始内容 | |
| offContext.drawImage(canvas, 0, 0) | |
| offContext.restore() | |
| exportCanvas = offScreenCanvas | |
| exportWidth = newWidth | |
| exportHeight = newHeight | |
| } catch (error) { | |
| console.error('旋转画布时出错：', error) | |
| } |
🤖 Prompt for AI Agents
In src/uni_modules/wot-design-uni/components/wd-signature/wd-signature.vue
around lines 578-612, the rotation branch allows arbitrary angles but only
handles 90° multiples in translate(), causing mis-positioned output for angles
like 45°; either (A) validate the incoming angle and only allow multiples of 90°
(angle % 90 === 0) and log/warn/skip rotation for other values, or (B) implement
a correct general-angle rotation: compute radians, calculate the rotated canvas
bounding box (newWidth/newHeight = absolute combinations of width/height with
cos/sin), translate the offscreen context to the rotation center
(translate(newWidth/2, newHeight/2)), rotate by rad, draw the source image
centered with drawImage(canvas, -canvasWidth/2, -canvasHeight/2), then restore;
choose A for simplicity or B to support arbitrary angles and ensure
newWidth/newHeight and translations are computed accordingly.
1 participant
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
#1340
💡 需求背景和解决方案
默认传入过长的文字，位置错乱。更改布局样式，label超过两行进行省略
☑️ 请求合并前的自查清单
Summary by CodeRabbit
发布说明
新功能
改进
✏️ Tip: You can customize this high-level summary in your review settings.