feat: ✨ 重构 Signature 签字板历史记录模式并添加压感模式和横屏示例 - #967
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough此次变更主要完善了签名组件的功能和文档说明。文档中更新了事件名称与属性，新增了历史记录、压力敏感等功能介绍，并调整了变量类型和方法实现。页面结构也作出相应调整，新增了横屏签名页，同时完善了组件示例及用户操作提示。组件内部重构了绘图逻辑，优化撤销/重做流程，并扩展了类型定义以支持新功能。 Changes
Sequence Diagram(s)sequenceDiagram
participant U as 用户
participant S as 签名组件
participant P as 页面逻辑
U->>S: 进行签名绘制 (支持压力敏感)
S->>S: 实时记录线条及压力数据
U->>P: 触发确认操作（弹窗或直接确认）
P->>S: 调用 confirm / handleConfirm 方法
S-->>P: 返回签名结果（包含成功检查）
P->>U: 预览签名图片（若签名成功）
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 (3)
src/pages/signature/Index.vue (2)
80-87: 签名确认函数增加成功检查在
confirm函数中增加了成功状态检查：
- 添加
if (result.success)条件判断，避免处理失败结果- 调试语句
debugger应在发布前移除- debugger
109-115: 横屏签名导航函数有不必要的日志
toSignatureLandscape函数中包含不必要的控制台日志，应在发布前移除。function toSignatureLandscape() { - console.log(232) uni.navigateTo({ url: '/pages/signature/Landscape' }) }src/uni_modules/wot-design-uni/components/wd-signature/wd-signature.vue (1)
72-73: 导入与笔锋模式基本计算
查看到在types中增加了Point、Line、SignatureResult等类型，以及引入calculateLineWidth与getDefaultLineWidth来动态计算线条宽度，可扩展性好，适合多种书写速度场景。可以考虑在笔锋模式下进一步抽象速度-宽度映射逻辑，使其更加可配置，例如通过回调或策略模式来定义不同的笔锋曲线。
Also applies to: 129-147
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
docs/component/signature.md(2 hunks)src/pages.json(1 hunks)src/pages/signature/Index.vue(2 hunks)src/pages/signature/Landscape.vue(1 hunks)src/uni_modules/wot-design-uni/components/wd-signature/types.ts(2 hunks)src/uni_modules/wot-design-uni/components/wd-signature/wd-signature.vue(10 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: Redirect rules - wot-design-uni
- GitHub Check: Header rules - wot-design-uni
- GitHub Check: Pages changed - wot-design-uni
- GitHub Check: Cloudflare Pages
🔇 Additional comments (45)
src/pages.json (1)
814-824: 新增横屏签名页面配置，让用户体验更完整这个新增页面配置很好地实现了横屏签名功能，特别是通过设置
pageOrientation: "landscape"来确保正确的显示方向。标题 "横屏签名" 简洁明了，帮助用户理解页面用途。src/pages/signature/Landscape.vue (4)
1-28: 横屏签名模板设计清晰，功能配置完善横屏签名组件的模板设计合理，特别是以下几点：
- 基于
inited状态条件渲染，防止过早初始化- 启用了历史记录功能和压感功能，提升用户体验
- 为非微信小程序平台定制了不同的底部操作按钮布局
30-58: 生命周期与平台适配处理得当脚本部分实现了：
- 根据不同平台(微信小程序与其他平台)适配不同的尺寸计算方式
- 使用
pause(100)延迟初始化，避免可能的渲染问题- 引用类型定义提高了代码可维护性
59-65: 签名结果处理逻辑安全可靠
handleConfirm函数的实现：
- 加入了成功判断条件
if (result.success)，避免处理失败结果- 使用
uni.previewImage提供了即时的用户反馈
68-108: 样式适配多平台，布局考虑周全样式部分做了细致的平台适配：
- 为 H5 环境特别调整了高度计算
height: calc(100vh - 44px)- 微信小程序下采用垂直布局
flex-direction: column- 非微信环境下巧妙利用
transform实现侧边按钮组，节省空间并保持横屏视图的完整性src/uni_modules/wot-design-uni/components/wd-signature/types.ts (4)
112-120: 属性命名更符合规范和直观理解将
history更名为enableHistory是一个很好的改进，因为：
- 使用
enable前缀更符合功能开关的命名惯例- 更清晰地表达了这是一个启用/禁用历史记录功能的布尔值属性
- 文档注释详细描述了属性的用途、类型和默认值
143-177: 新增压感模式相关属性，提升签名真实感添加的这组属性很好地支持了压感模式：
pressure开关控制是否启用压感模式minWidth/maxWidth定义了笔画宽度范围minSpeed设置速度阈值影响宽度变化- 所有属性都有清晰的默认值和详细注释
202-236: 新增 Line 和 Point 接口定义，提高类型安全这两个接口定义增强了代码的类型安全性和可维护性：
Line接口定义线条的各项属性，包括点集合、颜色、宽度等Point接口详细定义了点的各个属性，支持压感模式的额外数据- 注释详尽，每个属性用途明确
254-254: confirm 方法签名变更符合实际使用方式将
confirm方法的签名从接受参数变更为无参数是合理的：
- 移除参数简化了方法调用
- 符合组件内部实现逻辑，结果通过事件回调而非方法返回
src/pages/signature/Index.vue (8)
12-12: 基础用法添加背景色，提升视觉体验为基础用法示例添加白色背景
background-color="#ffffff"和导出缩放，使签名区域更加清晰可见。
15-17: 历史记录功能示例使用新属性名更新使用
enable-history代替原来的:history，保持与组件内部变更一致，同时设置了浅灰背景色增强界面视觉区分度。
19-31: 新增笔锋模式展示，丰富组件功能新增三个笔锋模式示例：
- 基础笔锋模式展示核心功能
- 自定义参数示例展示可配置性
- 结合历史记录的复合功能展示
添加的提示文本对用户非常友好，解释了笔锋效果与书写速度的关系。
33-49: 自定义按钮示例更新，使用新属性名并优化UI更新了自定义按钮示例：
- 使用
enable-history新属性名- 优化按钮样式和禁用逻辑
- 新增自定义画笔示例，展示笔色和宽度定制
51-64: 新增弹窗签名功能，增强组件应用场景弹窗签名示例设计合理：
- 使用底部弹出位置更适合签名操作
- 在弹窗打开后调用
init()初始化签名组件- 同时启用历史记录和压感功能，展示组件全部特性
- 弹窗关闭逻辑与签名确认结合，用户体验流畅
66-68: 横屏签名入口简洁明了添加横屏签名入口按钮，通过
toSignatureLandscape方法导航至专门的横屏签名页面，为用户提供更多签名选择。
97-107: 弹窗签名确认处理完善弹窗签名确认函数
handlePopupConfirm实现完善：
- 先关闭弹窗
showPopup.value = false- 再进行成功检查和图片预览
- 逻辑顺序合理，用户体验流畅
118-145: 样式设计精细，增强用户体验新增的样式设计考虑周全：
- 提示文本样式
.tip-text颜色和大小适中，居中对齐- 按钮组样式
.button-group和.button-row提供了灵活的布局选项- 弹窗底部样式
.popup-footer右对齐设计符合常见交互模式docs/component/signature.md (15)
3-29: 文档开头与基础用法部分完善
这里新增了对导出图片不清晰时的处理说明，并提供了基础签名功能的示例。示例代码演示了如何使用@confirm、@clear事件，以及如何利用exportScale和background-color，对开发者来说十分直观实用。
33-39: 新增历史记录功能文档
添加了“## 历史记录”说明，明确了通过enable-history开启历史记录并支持撤销与恢复操作。整体说明简洁明了，有助于使用者理解。
41-57: 引入笔锋模式的说明
新增了“## 笔锋模式”及其基础用法，并给出了相应的使用建议和可调节参数范围（min-width、max-width、min-speed 等），对用户非常有帮助，文档清晰度高。
61-78: 自定义笔锋参数示例
文档进一步演示了如何在笔锋模式下精确控制笔画的宽度和压感灵敏度，示例完整且易于参考。
80-94: 笔锋模式 + 历史记录连用
说明了如何在笔锋模式下也能进行撤销与恢复，示例贴合功能需求，让用户轻松上手。
96-111: 自定义按钮示例
通过footer插槽为底部按钮提供自定义，示例展示了如何结合撤回、恢复、清除、确定等功能，兼顾灵活性和可维护性。
124-130: 自定义画笔说明
新增关于pen-color和line-width的文档示例，演示了如何在签名板上自定义画笔样式。这是非常常见的需求，文档示例直观易学。
132-186: 弹窗中使用签名板
该部分演示了如何在弹窗里集成wd-signature并通过@after-enter="signatureRef?.init()"确保签名板正确初始化。文档细致并提供了完整代码示例，从打开弹窗到预览图片，流程清晰。
188-194: 弹窗使用的小贴士
总结了弹窗中使用签名板时需要注意的细节，诸如安全区域、关闭按钮等，能有效避免常见的使用问题。
196-263: 横屏签名页面
通过配置pageOrientation、计算画布尺寸、并给出完整示例，引导用户如何创建横屏签名场景。备注了需要注意的屏幕宽高对调、画布高度计算等，实用性很强。
264-356: 横屏签名：通用方案
这里演示了针对各平台通用的横屏实现方式，运用 fixed 布局配合 transform 旋转来设置按钮栏，示例非常详细，涵盖了画布初始化延迟等实际开发场景可能遇到的问题。
359-443: 横屏签名：原生横屏方案（仅微信小程序）
文档清楚地说明了仅在微信小程序端生效的原生横屏配置，以及与通用方案的差异。对希望利用微信小程序原生功能的开发者有很高的可参考价值。
447-467: Attributes 表格更新
新增和修改了与笔锋、历史记录等相关的属性说明，信息全面且排版整齐，使开发者可以更快速地了解可用选项。
470-476: Events 表格更新
文档内添了confirm、clear等事件名称与描述，能帮助使用者准确理解事件触发的场景和参数。
480-487: Methods 与 Slots 更新
对各个方法的用途和参数做了细化说明，额外列出了confirm、clear、revoke、restore，以及自定义插槽footer的传参，对于二次开发尤为友好。src/uni_modules/wot-design-uni/components/wd-signature/wd-signature.vue (13)
3-59: 模板部分改动：拆分小程序与非小程序的 canvas
通过条件编译将微信小程序的<canvas>与其他平台的<canvas>区分处理，并统一绑定了多项事件（@touchstart、@touchend、@touchmove）。还能看到在底部使用了slot footer来支持自定义按钮区。整体结构简洁，易于阅读。
150-175: startDrawing 函数改动：创建新线条并清空重做记录
这里在触摸开始时创建新的线条对象，并且及时地清空redoLines，使历史记录管理更直观。实现思路合理，同步发出start事件也保持了良好扩展性。
181-203: stopDrawing：将当前线条存入 lines，记录步骤
在触摸结束时，将完整的线条信息（包含所有点及其速度、距离、线宽参数）推入lines，并通过currentStep做简要记录。逻辑清晰，有效避免绘制丢失。
206-214: initCanvas：增加 forceUpdate 参数
对画布的初始化做了条件控制，避免重复初始化。通过可选的forceUpdate提供更加柔性的调用方式，能够减少不必要的性能开销。
226-232: clear：实现清空 lines 与 redoLines
函数统一清空了两种线条队列并重置操作步骤后，立即清除画布，保持数据与视图一致。适用于多次签名场景。
239-297: draw：压感条件下的速度、距离计算
通过point.distance、point.speed计算速度，并决定线段绘制或贝塞尔曲线绘制。预先判断重复坐标与时间戳，避免无效绘制，逻辑严谨。
299-383: redrawCanvas：完整重绘并支持笔锋重现
对已有的lines逐条恢复，兼顾非笔锋模式和笔锋模式两种情况，重绘过程对速度、控制点的额外处理也使最终笔画更平滑。流程完整，代码组织合理。
385-393: revoke：实现撤销时将线条转移到 redoLines
撤销逻辑简单明了，根据props.step批量移动指定数量线条到redoLines，随后调用redrawCanvas恢复一致性。非常直观易读。
395-403: restore：实现恢复功能
与撤销对应的恢复逻辑相同，将线条从redoLines重新放回lines，并刷新currentStep。这种双向栈思路常见且可靠。
405-458: drawSmoothLine：使用贝塞尔曲线绘制压感平滑线条
实现了根据速度计算控制点并拼接前后曲线段，达到更平滑的线条过渡。对于笔锋效果丰富，代码逻辑相对复杂，但易读性较好。
493-505: 微信小程序下获取 canvas 实例并适配
针对微信小程序，通过canvas2dAdapter包装原生 CanvasRenderingContext2D 并对宽高做等比缩放，适应各种机型。适配思路正确。
521-521: setLine：默认绘制参数使用 getDefaultLineWidth
在初始化线条参数时，优先使用压感模式下的默认值或普通模式下的宽度，确保签名效果统一且符合预期。
581-587: defineExpose：对外暴露 init、clear、confirm...
组件通过defineExpose对历史与基本签名方法进行暴露，API 管理清晰，方便外部调用。
1 participant
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
💡 需求背景和解决方案
本次提交重构了 Signature 签字板历史记录模式并添加压感模式和横屏示例，具体改动如下：
canvasGetImageData存在兼容性问题且性能不佳，所以调整历史记录的实现方案：
中
添加了模拟真实笔锋的压感模式，并添加了横屏签字的使用示例
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
文档更新