feat: ✨ Signature 添加历史记录和历史记录步长(包含文档添加、i18n、代码示例) #889
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 H as 历史管理模块
U->>S: 绘制签名
S->>H: 调用 pushHistoryList() 保存当前状态
U->>S: 点击撤销按钮
S->>H: 执行 revoke() 获取上一步状态
H-->>S: 返回历史状态
S->>S: 恢复画布显示
U->>S: 点击恢复按钮
S->>H: 执行 restore() 获取下一状态
H-->>S: 返回历史状态
S->>S: 恢复画布显示
Possibly related PRs
Suggested reviewers
Poem
✨ Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 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!Built without sensitive environment variables
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: 5
🧹 Nitpick comments (8)
src/pages/signature/Index.vue (1)
28-37: 自定义插槽中的历史记录控制实现完善！
- 使用
currentStep控制按钮显示- 提供了批量撤销和恢复的能力
- UI 交互逻辑清晰
建议考虑添加一个提示，说明当前剩余可撤销/恢复的步数。
<block v-if="!disabled"> + <text class="step-hint">剩余可撤销步数: {{ currentStep }}</text> <wd-button size="small" plain @click="previous(3)" v-if="currentStep >= 3">撤回三步</wd-button> <wd-button size="small" plain @click="next(3)" v-if="currentStep >= 3">恢复三步</wd-button> <wd-button size="small" plain @click="clear">清除</wd-button> <wd-button size="small" style="margin-left: 4px" @click="confirm">确认</wd-button> </block>src/uni_modules/wot-design-uni/components/wd-signature/types.ts (1)
111-119: 历史记录相关属性的类型定义完善！建议为
step属性添加更详细的注释说明。/* 是否开始历史记录 */ history: { type: Boolean, default: false }, +/** + * 每次撤销/恢复的步数 + * 类型：number + * 默认值：1 + */ step: { type: Number, default: 1 }src/uni_modules/wot-design-uni/locale/lang/es-ES.ts (1)
129-131: 建议添加西班牙语(拉丁美洲)的支持考虑到西班牙语在拉丁美洲的广泛使用，建议添加
es-419.ts文件来支持拉丁美洲的西班牙语变体。虽然基本词汇相同，但某些用语可能略有差异。src/uni_modules/wot-design-uni/locale/lang/fr-FR.ts (1)
129-131: 建议添加加拿大法语的支持考虑到法语在加拿大的使用情况，建议添加
fr-CA.ts文件来支持加拿大法语。虽然基本词汇相同，但某些用语和表达方式可能有所不同。src/uni_modules/wot-design-uni/locale/lang/de-DE.ts (1)
129-131: 建议添加奥地利和瑞士德语的支持考虑到德语在奥地利和瑞士的使用情况，建议添加
de-AT.ts和de-CH.ts文件来支持这些地区的德语变体。虽然基本词汇相同，但某些用语和表达方式可能有所不同。src/uni_modules/wot-design-uni/components/wd-signature/wd-signature.vue (1)
371-372: 移除多余的调试日志生产环境代码中不应该包含 console.log 语句。
- console.log(res, 'res') resolve(res)docs/component/signature.md (2)
112-113: 文档格式需要统一
NUmber类型描述大小写不一致，应该是Number- 建议补充
step属性的取值范围说明-| history | 是否开启历史记录 | Boolean | -- | false | -- | -| step | 开启历史记录之后的步长(撤回step步) | NUmber | -- | 1 | -- | +| history | 是否开启历史记录 | Boolean | -- | false | -- | +| step | 开启历史记录之后的步长(撤回step步)，必须为正整数 | Number | >0 | 1 | -- |
139-140: 补充方法说明文档
next和previous方法的说明过于简单，建议补充更详细的说明。-| next | 暴露恢复方法 | - | - | -| previous | 暴露撤回方法 | - | - | +| next | 恢复指定步数的签名状态，步数由 step 属性决定 | - | - | +| previous | 撤销指定步数的签名状态，步数由 step 属性决定 | - | - |
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (20)
docs/component/signature.md(4 hunks)src/pages/signature/Index.vue(2 hunks)src/uni_modules/wot-design-uni/components/wd-signature/index.scss(2 hunks)src/uni_modules/wot-design-uni/components/wd-signature/types.ts(3 hunks)src/uni_modules/wot-design-uni/components/wd-signature/wd-signature.vue(7 hunks)src/uni_modules/wot-design-uni/locale/lang/ar-SA.ts(1 hunks)src/uni_modules/wot-design-uni/locale/lang/de-DE.ts(1 hunks)src/uni_modules/wot-design-uni/locale/lang/en-US.ts(1 hunks)src/uni_modules/wot-design-uni/locale/lang/es-ES.ts(1 hunks)src/uni_modules/wot-design-uni/locale/lang/fr-FR.ts(1 hunks)src/uni_modules/wot-design-uni/locale/lang/ja-JP.ts(1 hunks)src/uni_modules/wot-design-uni/locale/lang/ko-KR.ts(1 hunks)src/uni_modules/wot-design-uni/locale/lang/pt-PT.ts(1 hunks)src/uni_modules/wot-design-uni/locale/lang/ru-RU.ts(1 hunks)src/uni_modules/wot-design-uni/locale/lang/th-TH.ts(1 hunks)src/uni_modules/wot-design-uni/locale/lang/tr-TR.ts(1 hunks)src/uni_modules/wot-design-uni/locale/lang/vi-VN.ts(1 hunks)src/uni_modules/wot-design-uni/locale/lang/zh-CN.ts(1 hunks)src/uni_modules/wot-design-uni/locale/lang/zh-HK.ts(1 hunks)src/uni_modules/wot-design-uni/locale/lang/zh-TW.ts(2 hunks)
🔇 Additional comments (14)
src/pages/signature/Index.vue (1)
15-17: 新增的历史记录演示示例实现得当！示例清晰地展示了历史记录功能的基本用法。
src/uni_modules/wot-design-uni/locale/lang/zh-HK.ts (1)
61-66: 香港繁体中文翻译实现完善！新增的历史记录功能相关文本翻译准确且符合香港用语习惯。
src/uni_modules/wot-design-uni/locale/lang/zh-TW.ts (1)
69-74: 台湾繁体中文翻译实现完善！新增的历史记录功能相关文本翻译准确且符合台湾用语习惯。
src/uni_modules/wot-design-uni/locale/lang/zh-CN.ts (1)
129-131: 新增的撤销和恢复文本翻译符合中文使用习惯翻译准确地表达了操作的含义，并且与常见的中文软件界面用语保持一致。
src/uni_modules/wot-design-uni/locale/lang/ko-KR.ts (1)
129-131: 韩文翻译准确表达了撤销和恢复的含义'실행 취소'和'복원'是韩语中常用的撤销和恢复操作术语。
src/uni_modules/wot-design-uni/locale/lang/ja-JP.ts (1)
129-131: 日文翻译符合日本软件界面的常用表述'元に戻す'和'復元'准确表达了撤销和恢复的含义，符合日本用户的使用习惯。
src/uni_modules/wot-design-uni/locale/lang/vi-VN.ts (1)
70-72: 越南语翻译准确传达了操作含义'Hoàn tác'和'Khôi phục'是越南语中表达撤销和恢复的标准用语。
src/uni_modules/wot-design-uni/locale/lang/en-US.ts (1)
129-131: 国际化文本添加正确！新增的
previousText和nextText属性翻译准确，符合英语语言习惯。'Undo' 和 'Restore' 是常见的撤销和恢复操作的标准用语。src/uni_modules/wot-design-uni/locale/lang/th-TH.ts (1)
129-131: 泰语翻译实现完整！新增的
previousText: 'ย้อนกลับ'和nextText: 'เรียกคืน'属性使用了正确的泰语表达，保持了与其他语言版本的功能一致性。src/uni_modules/wot-design-uni/locale/lang/ar-SA.ts (1)
129-131: 阿拉伯语翻译实现准确！新增的
previousText: 'تراجع'和nextText: 'استعادة'属性使用了恰当的阿拉伯语表达，符合阿拉伯语的语言习惯和使用场景。src/uni_modules/wot-design-uni/locale/lang/tr-TR.ts (1)
129-131: 土耳其语翻译完成度高！新增的
previousText: 'Geri Al'和nextText: 'Geri Yükle'属性采用了准确的土耳其语表达，保持了与其他语言版本的功能对等性。src/uni_modules/wot-design-uni/locale/lang/ru-RU.ts (1)
129-131: 国际化文本添加正确！为签名组件的历史记录功能添加的国际化文本翻译准确，语义表达清晰:
- 撤销操作: 俄语 "Отменить"、西班牙语 "Deshacer"、法语 "Annuler"、德语 "Rückgängig machen"
- 恢复操作: 俄语 "Восстановить"、西班牙语 "Restaurar"、法语 "Restaurer"、德语 "Wiederherstellen"
这些翻译准确地表达了撤销和恢复这两个操作的含义，并且与各个语言的使用习惯相符。
src/uni_modules/wot-design-uni/locale/lang/pt-PT.ts (1)
129-131: 国际化文本更新正确！新增的
previousText和nextText翻译准确地表达了撤销和恢复的含义。src/uni_modules/wot-design-uni/components/wd-signature/index.scss (1)
20-30: 样式实现合理！footer 样式实现正确，使用 deep 选择器处理子组件样式，布局结构清晰。
| /* 点击回退 */ | ||
| next: () => void | ||
| /* 点击撤回 */ | ||
| previous: () => void |
There was a problem hiding this comment.
方法注释需要更新！
next 和 previous 方法的注释与实际功能不符。
-/* 点击回退 */
+/* 恢复指定步数的签名状态 */
next: () => void
-/* 点击撤回 */
+/* 撤销指定步数的签名状态 */
previous: () => void📝 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.
| /* 点击回退 */ | |
| next: () => void | |
| /* 点击撤回 */ | |
| previous: () => void | |
| /* 恢复指定步数的签名状态 */ | |
| next: () => void | |
| /* 撤销指定步数的签名状态 */ | |
| previous: () => void |
| /** | ||
| * 上一步按钮的文本 | ||
| * 类型：string | ||
| */ | ||
| nextText: String, | ||
| /** | ||
| * 下一步按钮的文本 | ||
| * 类型：string | ||
| */ | ||
| previousText: String, |
There was a problem hiding this comment.
按钮文本属性的注释需要更新！
nextText 和 previousText 的注释描述有误：
nextText描述为"上一步按钮的文本"previousText描述为"下一步按钮的文本"
这与实际功能相反。
/**
- * 上一步按钮的文本
+ * 下一步按钮的文本
* 类型：string
*/
nextText: String,
/**
- * 下一步按钮的文本
+ * 上一步按钮的文本
* 类型：string
*/
previousText: String,📝 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.
| /** | |
| * 上一步按钮的文本 | |
| * 类型：string | |
| */ | |
| nextText: String, | |
| /** | |
| * 下一步按钮的文本 | |
| * 类型：string | |
| */ | |
| previousText: String, | |
| /** | |
| * 下一步按钮的文本 | |
| * 类型：string | |
| */ | |
| nextText: String, | |
| /** | |
| * 上一步按钮的文本 | |
| * 类型：string | |
| */ | |
| previousText: String, |
| function pushHistoryList() { | ||
| return new Promise((resolve, reject) => { | ||
| console.log(history.value) | ||
| if (history.value) { | ||
| getCanvasImageData() | ||
| .then((imageData) => { | ||
| historyList.value.push(imageData) | ||
| currentStep.value++ | ||
| resolve(true) | ||
| }) | ||
| .catch((err) => { | ||
| reject(err) | ||
| }) | ||
| } | ||
| }) | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
优化历史记录存储逻辑并移除调试日志
- 存在不必要的 console.log
- 需要在达到最大历史记录数时清理旧记录
function pushHistoryList() {
return new Promise((resolve, reject) => {
- console.log(history.value)
if (history.value) {
getCanvasImageData()
.then((imageData) => {
+ if (historyList.value.length >= MAX_HISTORY_LENGTH) {
+ historyList.value.shift() // 移除最旧的记录
+ }
historyList.value.push(imageData)
currentStep.value++
resolve(true)
})
.catch((err) => {
+ console.error('Failed to push history:', err)
reject(err)
})
}
})
}📝 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.
| function pushHistoryList() { | |
| return new Promise((resolve, reject) => { | |
| console.log(history.value) | |
| if (history.value) { | |
| getCanvasImageData() | |
| .then((imageData) => { | |
| historyList.value.push(imageData) | |
| currentStep.value++ | |
| resolve(true) | |
| }) | |
| .catch((err) => { | |
| reject(err) | |
| }) | |
| } | |
| }) | |
| } | |
| function pushHistoryList() { | |
| return new Promise((resolve, reject) => { | |
| if (history.value) { | |
| getCanvasImageData() | |
| .then((imageData) => { | |
| if (historyList.value.length >= MAX_HISTORY_LENGTH) { | |
| historyList.value.shift() // 移除最旧的记录 | |
| } | |
| historyList.value.push(imageData) | |
| currentStep.value++ | |
| resolve(true) | |
| }) | |
| .catch((err) => { | |
| console.error('Failed to push history:', err) | |
| reject(err) | |
| }) | |
| } | |
| }) | |
| } |
| const historyList = ref<Array<ImageData>>([]) //历史记录 | ||
| const currentStep = ref(0) // 当前步骤 |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议优化历史记录的内存管理
当前实现将所有历史记录都存储在内存中，这可能导致内存占用过高。建议：
- 限制历史记录的最大数量
- 在达到限制时移除最旧的记录
const historyList = ref<Array<ImageData>>([])
const currentStep = ref(0)
+const MAX_HISTORY_LENGTH = 20 // 限制最大历史记录数量📝 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.
| const historyList = ref<Array<ImageData>>([]) //历史记录 | |
| const currentStep = ref(0) // 当前步骤 | |
| const historyList = ref<Array<ImageData>>([]) //历史记录 | |
| const currentStep = ref(0) // 当前步骤 | |
| const MAX_HISTORY_LENGTH = 20 // 限制最大历史记录数量 |
| const previous = () => { | ||
| if (history.value) { | ||
| if (isDef(props.step)) { | ||
| currentStep.value = currentStep.value - props.step | ||
| if (currentStep.value > props.step - 1) { | ||
| clearCanvas() | ||
| putCanvasImageData() | ||
| } else { | ||
| clearHistoryList() | ||
| clearCanvas() | ||
| } | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议改进错误处理和边界条件检查
当前的 previous 方法缺少必要的错误处理和边界条件检查。
const previous = () => {
if (history.value) {
if (isDef(props.step)) {
+ if (props.step <= 0) {
+ console.error('Step value must be positive')
+ return
+ }
currentStep.value = currentStep.value - props.step
if (currentStep.value > props.step - 1) {
clearCanvas()
- putCanvasImageData()
+ putCanvasImageData().catch(err => {
+ console.error('Failed to restore canvas state:', err)
+ // 可以在这里添加用户提示
+ })
} else {
clearHistoryList()
clearCanvas()
}
}
}
}📝 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.
| const previous = () => { | |
| if (history.value) { | |
| if (isDef(props.step)) { | |
| currentStep.value = currentStep.value - props.step | |
| if (currentStep.value > props.step - 1) { | |
| clearCanvas() | |
| putCanvasImageData() | |
| } else { | |
| clearHistoryList() | |
| clearCanvas() | |
| } | |
| } | |
| } | |
| } | |
| const previous = () => { | |
| if (history.value) { | |
| if (isDef(props.step)) { | |
| if (props.step <= 0) { | |
| console.error('Step value must be positive') | |
| return | |
| } | |
| currentStep.value = currentStep.value - props.step | |
| if (currentStep.value > props.step - 1) { | |
| clearCanvas() | |
| putCanvasImageData().catch(err => { | |
| console.error('Failed to restore canvas state:', err) | |
| // 可以在这里添加用户提示 | |
| }) | |
| } else { | |
| clearHistoryList() | |
| clearCanvas() | |
| } | |
| } | |
| } | |
| } |
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (2)
src/uni_modules/wot-design-uni/components/wd-signature/wd-signature.vue (2)
73-75: 🛠️ Refactor suggestion建议优化历史记录的内存管理
当前实现可能在长时间使用时占用过多内存。
建议：
- 将
maxHistoryLength设置为更小的值（如 20）以限制内存使用- 考虑添加配置项允许用户自定义最大历史记录数
-const maxHistoryLength = ref<number>(100) // 历史记录的最大长度 +const maxHistoryLength = ref<number>(20) // 历史记录的最大长度
402-422:⚠️ Potential issue需要移除调试日志并优化错误处理
生产环境代码中包含调试日志，且错误处理不够完善。
建议应用以下修改：
function pushHistoryList() { return new Promise((resolve, reject) => { - console.log(history.value) if (history.value) { getCanvasImageData() .then((imageData) => { historyList.value.push(imageData) currentStep.value++ if (historyList.value.length > maxHistoryLength.value) { historyList.value.shift() currentStep.value-- } resolve(true) }) .catch((err) => { + console.error('保存历史记录失败:', err) + uni.showToast({ + title: '保存历史记录失败', + icon: 'none' + }) reject(err) }) } }) }
🧹 Nitpick comments (4)
src/pages/signature/Index.vue (1)
28-37: 自定义插槽实现完善，建议优化按钮布局历史记录控制按钮的状态管理正确，但建议改进按钮的布局样式。
建议添加按钮间距，使界面更加美观：
-<wd-button size="small" plain @click="revoke()" :disabled="currentStep <= 0">撤回三步</wd-button> -<wd-button size="small" plain @click="restore()" :disabled="!(currentStep < historyList.length)">恢复三步</wd-button> +<wd-button size="small" plain style="margin-right: 8px" @click="revoke()" :disabled="currentStep <= 0">撤回三步</wd-button> +<wd-button size="small" plain style="margin-right: 8px" @click="restore()" :disabled="!(currentStep < historyList.length)">恢复三步</wd-button>src/uni_modules/wot-design-uni/components/wd-signature/types.ts (2)
111-119: 建议完善历史记录相关属性的文档历史记录和步长属性缺少详细说明。
建议添加以下注释：
- /* 是否开始历史记录 */ + /** + * 是否启用历史记录功能 + * 类型：boolean + * 默认值：false + */ history: { type: Boolean, default: false }, + /** + * 撤销/恢复的步数 + * 类型：number + * 默认值：1 + */ step: { type: Number, default: 1 }
132-135: 建议完善历史记录方法的文档恢复和撤回方法的注释过于简单。
建议添加更详细的方法说明：
- /* 点击恢复 */ + /** 恢复指定步数的签名状态 */ restore: () => void - /* 点击撤回 */ + /** 撤销指定步数的签名状态 */ revoke: () => voiddocs/component/signature.md (1)
30-34: 新增历史记录示例说明
本段新增的“开启历史记录”示例清晰地展示了如何通过设置:history="true"启用历史记录功能，并结合background-color属性演示了背景色的配置。
建议（选做）：如果需要单独展示步长（:step）的用法，可考虑增加一个单独示例。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (19)
docs/component/signature.md(4 hunks)src/pages/signature/Index.vue(2 hunks)src/uni_modules/wot-design-uni/components/wd-signature/types.ts(3 hunks)src/uni_modules/wot-design-uni/components/wd-signature/wd-signature.vue(8 hunks)src/uni_modules/wot-design-uni/locale/lang/ar-SA.ts(1 hunks)src/uni_modules/wot-design-uni/locale/lang/de-DE.ts(1 hunks)src/uni_modules/wot-design-uni/locale/lang/en-US.ts(1 hunks)src/uni_modules/wot-design-uni/locale/lang/es-ES.ts(1 hunks)src/uni_modules/wot-design-uni/locale/lang/fr-FR.ts(1 hunks)src/uni_modules/wot-design-uni/locale/lang/ja-JP.ts(1 hunks)src/uni_modules/wot-design-uni/locale/lang/ko-KR.ts(1 hunks)src/uni_modules/wot-design-uni/locale/lang/pt-PT.ts(1 hunks)src/uni_modules/wot-design-uni/locale/lang/ru-RU.ts(1 hunks)src/uni_modules/wot-design-uni/locale/lang/th-TH.ts(1 hunks)src/uni_modules/wot-design-uni/locale/lang/tr-TR.ts(2 hunks)src/uni_modules/wot-design-uni/locale/lang/vi-VN.ts(2 hunks)src/uni_modules/wot-design-uni/locale/lang/zh-CN.ts(2 hunks)src/uni_modules/wot-design-uni/locale/lang/zh-HK.ts(2 hunks)src/uni_modules/wot-design-uni/locale/lang/zh-TW.ts(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (14)
- src/uni_modules/wot-design-uni/locale/lang/tr-TR.ts
- src/uni_modules/wot-design-uni/locale/lang/en-US.ts
- src/uni_modules/wot-design-uni/locale/lang/pt-PT.ts
- src/uni_modules/wot-design-uni/locale/lang/vi-VN.ts
- src/uni_modules/wot-design-uni/locale/lang/zh-TW.ts
- src/uni_modules/wot-design-uni/locale/lang/zh-CN.ts
- src/uni_modules/wot-design-uni/locale/lang/ja-JP.ts
- src/uni_modules/wot-design-uni/locale/lang/de-DE.ts
- src/uni_modules/wot-design-uni/locale/lang/ko-KR.ts
- src/uni_modules/wot-design-uni/locale/lang/fr-FR.ts
- src/uni_modules/wot-design-uni/locale/lang/es-ES.ts
- src/uni_modules/wot-design-uni/locale/lang/ar-SA.ts
- src/uni_modules/wot-design-uni/locale/lang/ru-RU.ts
- src/uni_modules/wot-design-uni/locale/lang/zh-HK.ts
🔇 Additional comments (6)
src/pages/signature/Index.vue (1)
15-17: 历史记录功能演示清晰简洁！基础示例展示了如何启用历史记录功能，设置简单明了。
src/uni_modules/wot-design-uni/components/wd-signature/types.ts (1)
36-45: 按钮文本属性文档完善撤回和恢复按钮的文本属性定义清晰。
src/uni_modules/wot-design-uni/locale/lang/th-TH.ts (1)
128-132: 国际化文本完善签名组件的历史记录相关文本翻译完整。
docs/component/signature.md (3)
109-110: 新增属性 “history” 与 “step” 说明
“history” 与 “step” 属性的新增能帮助用户理解如何启用历史记录功能及配置回退步长。请确认这两个属性在组件内部实现和命名上与此处文档描述一致。
136-137: 新增方法说明正确
新增的restore和revoke方法说明已经添加到 Methods 部分，描述简洁明了。请确保在组件实现中也准确提供了这两个方法的功能。
72-80:⚠️ Potential issue检查插槽参数中的标点和一致性
在<template #footer="{ clear, confirm, currentStep, restore, revoke，historyList }">中，第一个问题是参数列表中“revoke”和“historyList”之间使用了全角逗号，，应改为半角逗号,以免解析错误。
另外，示例中返回的 slot 参数包含currentStep和historyList，但在后续的“Slot”参数说明表中只列出了{ clear, confirm, restore, revoke }，建议统一这两处的返回参数列表，确保文档描述与组件实际返回数据一致。建议如下 diff 改动：
- <template #footer="{ clear, confirm, currentStep, restore, revoke，historyList }"> + <template #footer="{ clear, confirm, currentStep, restore, revoke, historyList }">Likely an incorrect or invalid review comment.
| /* 点击上一步 */ | ||
| const revoke = () => { | ||
| if (history.value) { | ||
| if (isDef(props.step)) { | ||
| currentStep.value = Math.max(currentStep.value - props.step, 0) | ||
| if (currentStep.value > 0) { | ||
| clearCanvas() | ||
| putCanvasImageData(props.step) | ||
| } else { | ||
| clearCanvas() | ||
| currentStep.value = 0 | ||
| } | ||
| } | ||
| } | ||
| } | ||
| /* 点击下一步 */ | ||
| const restore = () => { | ||
| if (history.value) { | ||
| if (isDef(props.step)) { | ||
| /* 是否可以点击下一步 */ | ||
|
|
||
| if (currentStep.value <= historyList.value.length - props.step) { | ||
| currentStep.value = currentStep.value + props.step | ||
| clearCanvas() | ||
| putCanvasImageData(props.step) | ||
| } | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议改进历史操作的边界条件处理
撤销和恢复操作的边界条件处理可以更加健壮。
建议添加以下改进：
const revoke = () => {
if (history.value) {
if (isDef(props.step)) {
+ if (props.step <= 0) {
+ console.error('步长必须为正数')
+ return
+ }
currentStep.value = Math.max(currentStep.value - props.step, 0)
if (currentStep.value > 0) {
clearCanvas()
- putCanvasImageData(props.step)
+ putCanvasImageData(props.step).catch(err => {
+ console.error('恢复画布状态失败:', err)
+ uni.showToast({
+ title: '操作失败',
+ icon: 'none'
+ })
+ })
} else {
clearCanvas()
currentStep.value = 0
}
}
}
}📝 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.
| /* 点击上一步 */ | |
| const revoke = () => { | |
| if (history.value) { | |
| if (isDef(props.step)) { | |
| currentStep.value = Math.max(currentStep.value - props.step, 0) | |
| if (currentStep.value > 0) { | |
| clearCanvas() | |
| putCanvasImageData(props.step) | |
| } else { | |
| clearCanvas() | |
| currentStep.value = 0 | |
| } | |
| } | |
| } | |
| } | |
| /* 点击下一步 */ | |
| const restore = () => { | |
| if (history.value) { | |
| if (isDef(props.step)) { | |
| /* 是否可以点击下一步 */ | |
| if (currentStep.value <= historyList.value.length - props.step) { | |
| currentStep.value = currentStep.value + props.step | |
| clearCanvas() | |
| putCanvasImageData(props.step) | |
| } | |
| } | |
| } | |
| } | |
| /* 点击上一步 */ | |
| const revoke = () => { | |
| if (history.value) { | |
| if (isDef(props.step)) { | |
| if (props.step <= 0) { | |
| console.error('步长必须为正数') | |
| return | |
| } | |
| currentStep.value = Math.max(currentStep.value - props.step, 0) | |
| if (currentStep.value > 0) { | |
| clearCanvas() | |
| putCanvasImageData(props.step).catch(err => { | |
| console.error('恢复画布状态失败:', err) | |
| uni.showToast({ | |
| title: '操作失败', | |
| icon: 'none' | |
| }) | |
| }) | |
| } else { | |
| clearCanvas() | |
| currentStep.value = 0 | |
| } | |
| } | |
| } | |
| } | |
| /* 点击下一步 */ | |
| const restore = () => { | |
| if (history.value) { | |
| if (isDef(props.step)) { | |
| /* 是否可以点击下一步 */ | |
| if (currentStep.value <= historyList.value.length - props.step) { | |
| currentStep.value = currentStep.value + props.step | |
| clearCanvas() | |
| putCanvasImageData(props.step) | |
| } | |
| } | |
| } | |
| } |
docs/component/signature.md
Outdated
| | footer | 自定义footer | `{ clear, confirm, restore, revoke }` | - | | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
统一 Footer 插槽返回参数说明
当前“Slot”说明表中写的是 { clear, confirm, restore, revoke }，但示例中的 footer 插槽返回参数却多出 currentStep 和 historyList。两者不一致可能会给用户带来困惑，请统一更新文档说明以反映实际返回的参数。
There was a problem hiding this comment.
Actionable comments posted: 1
🔭 Outside diff range comments (1)
src/uni_modules/wot-design-uni/components/wd-signature/wd-signature.vue (1)
122-136: 🛠️ Refactor suggestion优化历史记录的更新逻辑
当前的历史记录更新逻辑在
startDrawing中可能存在性能问题。建议：
- 添加防抖处理，避免频繁更新
- 优化历史记录切片操作
const startDrawing = (e: TouchEvent) => { e.preventDefault() drawing.value = true setLine() emit('start', e) draw(e) // 如果当前步骤不是最后一步，则替换历史记录 if (history.value) { + // 使用 splice 替代 slice 以优化性能 if (currentStep.value < historyList.value.length) { - historyList.value = historyList.value.slice(0, currentStep.value) + historyList.value.splice(currentStep.value) } } // 更新当前步骤 currentStep.value = historyList.value.length }
🧹 Nitpick comments (2)
src/uni_modules/wot-design-uni/components/wd-signature/wd-signature.vue (2)
81-83: 建议优化历史记录的内存管理当前实现中的历史记录可能会占用大量内存。建议：
- 考虑使用
computed属性动态计算maxHistoryLength，基于设备性能和内存限制- 添加内存使用监控和清理机制
-const maxHistoryLength = ref<number>(100) // 历史记录的最大长度 +const maxHistoryLength = computed(() => { + // 基于设备性能动态调整 + const { platform } = uni.getSystemInfoSync() + return platform.toLowerCase().includes('ios') ? 100 : 50 +})
361-396: 优化 Canvas 数据恢复的性能建议添加缓存机制，避免重复计算：
- 缓存最近使用的图像数据
- 优化跨平台性能差异
+const imageDataCache = new Map<number, ImageData>() + function putCanvasImageData(step: number = 1) { const { canvasWidth, canvasHeight, ctx } = canvasState - const imagedata = historyList.value[currentStep.value - step] + const stepIndex = currentStep.value - step + const cachedData = imageDataCache.get(stepIndex) + const imagedata = cachedData || historyList.value[stepIndex] + + if (!cachedData && imagedata) { + imageDataCache.set(stepIndex, imagedata) + // 限制缓存大小 + if (imageDataCache.size > 5) { + const firstKey = imageDataCache.keys().next().value + imageDataCache.delete(firstKey) + } + }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
docs/component/signature.md(4 hunks)src/uni_modules/wot-design-uni/components/wd-signature/wd-signature.vue(8 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- docs/component/signature.md
🔇 Additional comments (2)
src/uni_modules/wot-design-uni/components/wd-signature/wd-signature.vue (2)
410-430: 优化历史记录存储逻辑并移除调试日志
185-213: 改进历史操作的边界条件处理
| /* canvas获取每一步的图片 */ | ||
| function getCanvasImageData(): Promise<ImageData> { | ||
| const { canvasWidth, canvasHeight, ctx } = canvasState | ||
| return new Promise((resolve, reject) => { | ||
| // #ifdef MP-WEIXIN | ||
| try { | ||
| // 获取图像数据 | ||
| if (ctx) { | ||
| const imageData = (ctx as unknown as CanvasRenderingContext2D).getImageData(0, 0, canvasWidth, canvasHeight) | ||
|
|
||
| resolve(imageData) | ||
| } | ||
| } catch (error) { | ||
| console.error('获取 canvas 像素数据失败:', error) | ||
| reject(error) | ||
| } | ||
|
|
||
| // #endif | ||
|
|
||
| // #ifndef MP-WEIXIN | ||
| uni.canvasGetImageData({ | ||
| canvasId: canvasId.value, | ||
| x: 0, | ||
| y: 0, | ||
| width: canvasWidth, | ||
| height: canvasHeight, | ||
| success: (res: any) => { | ||
| resolve(res) | ||
| }, | ||
| fail: (err) => { | ||
| console.error('获取 canvas 像素数据失败:') | ||
| reject(err) | ||
| } | ||
| }) | ||
| // #endif | ||
| }) | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
优化 Canvas 数据获取的错误处理
建议改进错误处理机制：
- 添加更详细的错误信息
- 实现重试机制
- 优化跨平台兼容性处理
function getCanvasImageData(): Promise<ImageData> {
const { canvasWidth, canvasHeight, ctx } = canvasState
return new Promise((resolve, reject) => {
+ const maxRetries = 3
+ let retryCount = 0
+
+ const tryGetImageData = () => {
// #ifdef MP-WEIXIN
try {
if (ctx) {
const imageData = (ctx as unknown as CanvasRenderingContext2D).getImageData(0, 0, canvasWidth, canvasHeight)
resolve(imageData)
}
} catch (error) {
- console.error('获取 canvas 像素数据失败:', error)
- reject(error)
+ handleError(error)
}
// #endif
// #ifndef MP-WEIXIN
uni.canvasGetImageData({
canvasId: canvasId.value,
x: 0,
y: 0,
width: canvasWidth,
height: canvasHeight,
success: (res: any) => resolve(res),
- fail: (err) => {
- console.error('获取 canvas 像素数据失败:')
- reject(err)
- }
+ fail: handleError
})
// #endif
+ }
+
+ const handleError = (error: any) => {
+ if (retryCount < maxRetries) {
+ retryCount++
+ console.warn(`获取 canvas 像素数据失败，正在重试 (${retryCount}/${maxRetries})`)
+ setTimeout(tryGetImageData, 100 * retryCount)
+ } else {
+ console.error('获取 canvas 像素数据失败:', error)
+ reject(new Error(`获取 canvas 像素数据失败: ${error.message || '未知错误'}`))
+ }
+ }
+
+ tryGetImageData()
})
}📝 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.
| /* canvas获取每一步的图片 */ | |
| function getCanvasImageData(): Promise<ImageData> { | |
| const { canvasWidth, canvasHeight, ctx } = canvasState | |
| return new Promise((resolve, reject) => { | |
| // #ifdef MP-WEIXIN | |
| try { | |
| // 获取图像数据 | |
| if (ctx) { | |
| const imageData = (ctx as unknown as CanvasRenderingContext2D).getImageData(0, 0, canvasWidth, canvasHeight) | |
| resolve(imageData) | |
| } | |
| } catch (error) { | |
| console.error('获取 canvas 像素数据失败:', error) | |
| reject(error) | |
| } | |
| // #endif | |
| // #ifndef MP-WEIXIN | |
| uni.canvasGetImageData({ | |
| canvasId: canvasId.value, | |
| x: 0, | |
| y: 0, | |
| width: canvasWidth, | |
| height: canvasHeight, | |
| success: (res: any) => { | |
| resolve(res) | |
| }, | |
| fail: (err) => { | |
| console.error('获取 canvas 像素数据失败:') | |
| reject(err) | |
| } | |
| }) | |
| // #endif | |
| }) | |
| } | |
| /* canvas获取每一步的图片 */ | |
| function getCanvasImageData(): Promise<ImageData> { | |
| const { canvasWidth, canvasHeight, ctx } = canvasState | |
| return new Promise((resolve, reject) => { | |
| const maxRetries = 3 | |
| let retryCount = 0 | |
| const tryGetImageData = () => { | |
| // #ifdef MP-WEIXIN | |
| try { | |
| // 获取图像数据 | |
| if (ctx) { | |
| const imageData = (ctx as unknown as CanvasRenderingContext2D).getImageData(0, 0, canvasWidth, canvasHeight) | |
| resolve(imageData) | |
| } | |
| } catch (error) { | |
| handleError(error) | |
| } | |
| // #endif | |
| // #ifndef MP-WEIXIN | |
| uni.canvasGetImageData({ | |
| canvasId: canvasId.value, | |
| x: 0, | |
| y: 0, | |
| width: canvasWidth, | |
| height: canvasHeight, | |
| success: (res: any) => resolve(res), | |
| fail: handleError | |
| }) | |
| // #endif | |
| } | |
| const handleError = (error: any) => { | |
| if (retryCount < maxRetries) { | |
| retryCount++ | |
| console.warn(`获取 canvas 像素数据失败，正在重试 (${retryCount}/${maxRetries})`) | |
| setTimeout(tryGetImageData, 100 * retryCount) | |
| } else { | |
| console.error('获取 canvas 像素数据失败:', error) | |
| reject(new Error(`获取 canvas 像素数据失败: ${error.message || '未知错误'}`)) | |
| } | |
| } | |
| tryGetImageData() | |
| }) | |
| } |
…ign-uni into 签名组件添加历史记录以及横屏
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/uni_modules/wot-design-uni/components/wd-signature/types.ts (1)
111-119: 建议完善历史记录相关属性的注释说明当前的注释过于简单，建议按照组件其他属性的注释格式，补充以下信息：
- 属性的具体用途
- 类型说明
- 默认值说明
建议修改为：
- /* 是否开始历史记录 */ + /** + * 是否启用签名历史记录功能 + * 类型：boolean + * 默认值：false + */ history: { type: Boolean, default: false }, + /** + * 历史记录步长 + * 类型：number + * 默认值：1 + */ step: { type: Number, default: 1 },
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
docs/component/signature.md(4 hunks)src/pages/signature/Index.vue(2 hunks)src/uni_modules/wot-design-uni/components/composables/useTranslate.ts(1 hunks)src/uni_modules/wot-design-uni/components/wd-signature/types.ts(3 hunks)src/uni_modules/wot-design-uni/locale/lang/zh-TW.ts(2 hunks)
✅ Files skipped from review due to trivial changes (1)
- src/uni_modules/wot-design-uni/components/composables/useTranslate.ts
🚧 Files skipped from review as they are similar to previous changes (3)
- src/pages/signature/Index.vue
- src/uni_modules/wot-design-uni/locale/lang/zh-TW.ts
- docs/component/signature.md
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: Redirect rules - wot-design-uni
- GitHub Check: Header rules - wot-design-uni
- GitHub Check: Pages changed - wot-design-uni
🔇 Additional comments (2)
src/uni_modules/wot-design-uni/components/wd-signature/types.ts (2)
36-45: 撤回和恢复按钮的文本属性定义正确！属性定义清晰，注释说明完整。
134-137: 方法注释需要更新！
restore和revoke方法的注释需要更详细的说明。建议修改为：
- /* 点击恢复 */ + /** 恢复指定步数的签名状态 */ restore: () => void - /* 点击撤回 */ + /** 撤销指定步数的签名状态 */ revoke: () => void
| undoText: String, | ||
| redoText: String |
There was a problem hiding this comment.
🛠️ Refactor suggestion
需要为撤销和重做按钮的文本属性添加注释说明
按照组件其他属性的注释格式，需要补充说明。
建议添加：
+ /**
+ * 撤销按钮的文本
+ * 类型：string
+ */
undoText: String,
+ /**
+ * 重做按钮的文本
+ * 类型：string
+ */
redoText: String📝 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.
| undoText: String, | |
| redoText: String | |
| /** | |
| * 撤销按钮的文本 | |
| * 类型：string | |
| */ | |
| undoText: String, | |
| /** | |
| * 重做按钮的文本 | |
| * 类型：string | |
| */ | |
| redoText: String |
Moonofweisheng
force-pushed
the
master
branch
from
9880aeb to
b1e1db3
Compare
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新增功能
样式