feat: ✨ Signature 添加历史记录和历史记录步长(包含文档添加、i18n、代码示例)

docs/component/signature.md

@@ -27,6 +27,14 @@ function confirm(result: SignatureResult) {
 }
 ```
 
+
+## 开启历史记录
+```html
+
+<wd-signature :history="true" background-color="lightgray" />
+
+```
+
 ## 自定义画笔颜色
 
 `pen-color`设置签名笔的颜色，默认为`黑色`。
@@ -64,11 +72,15 @@ function confirm(result: SignatureResult) {
 通过`footer`插槽可以自定义按钮。
 
 ```html
-<wd-signature :disabled="disabled">
-  <template #footer="{ clear, confirm }">
+<wd-signature :disabled="disabled" :step="3">
+  <template  #footer="{ clear, confirm, currentStep, next, previous }">
     <wd-button block @click="changeDisabled" v-if="disabled">开始签名</wd-button>
-    <wd-button v-if="!disabled" size="small" plain @click="clear">清除</wd-button>
-    <wd-button v-if="!disabled" size="small" custom-style="margin-left: 4px" @click="confirm">确认</wd-button>
+      <block v-if="!disabled">
+            <wd-button size="small" plain @click="previous()" v-if="currentStep >= 3">撤回三步</wd-button>
+            <wd-button size="small" plain @click="next()" 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>
   </template>
 </wd-signature>
 ```
@@ -97,12 +109,14 @@ function changeDisabled() {
 | disabled        | 是否禁用签名板                                                       | Boolean | --     | false    | --       |
 | backgroundColor | 画板的背景色                                                         | String  | --     | --       | --       |
 | disableScroll   | 是否禁用画布滚动                                                     | Boolean | --     | true     | --       |
+| history   | 是否开启历史记录                                                     | Boolean | --     | false     | --       |
+| step   | 开启历史记录之后的步长(撤回step步)                                                     | NUmber | --     | 1     | --       |
 
 ## Slot
 
 | name   | 说明           | 参数                  | 最低版本 |
 |--------|----------------|-----------------------|----------|
-| footer | 自定义footer   | `{ clear, confirm }`  | -        |
+| footer | 自定义footer   | `{ clear, confirm,next(设置步长以后自动回退相应步数),previous(同next) }`  | -        |
 
 ## Events
 
@@ -122,3 +136,5 @@ function changeDisabled() {
 |-----------|--------------------|-------------------------------------------|----------|
 | confirm   | 点击确认按钮时触发 | `{tempFilePath, width, height, success}` 分别为生成文件的临时路径 (本地路径)、生成图片宽、生成图片高、是否成功 | -        |
 | clear     | 点击清空按钮时触发 | -                                         | -        |
+| next     | 暴露恢复方法 | -                                         | -        |
+| previous     | 暴露撤回方法 | -                                         | -        |

src/pages/signature/Index.vue

@@ -1,9 +1,20 @@
+<!--
+ * @Author: 810505339
+ * @Date: 2025-02-11 21:17:21
+ * @LastEditors: 810505339
+ * @LastEditTime: 2025-02-12 01:18:15
+ * @FilePath: \wot-design-uni\src\pages\signature\Index.vue
+ * 记得注释
+-->
 <template>
   <page-wraper>
     <demo-block title="基础用法">
       <wd-signature @confirm="confirm" @clear="clear" :export-scale="2" />
       <wd-img v-if="img.tempFilePath" mode="widthFix" width="100%" :src="img.tempFilePath" />
     </demo-block>
+    <demo-block title="开启历史记录">
+      <wd-signature :history="true" background-color="lightgray" />
+    </demo-block>
     <demo-block title="自定义画笔颜色">
       <wd-signature pen-color="red" />
     </demo-block>
@@ -14,11 +25,15 @@
       <wd-signature background-color="lightgray" />
     </demo-block>
     <demo-block title="自定义插槽">
-      <wd-signature :disabled="disabled">
-        <template #footer="{ clear, confirm }">
+      <wd-signature :disabled="disabled" :history="true" :step="3">
+        <template #footer="{ clear, confirm, currentStep, next, previous }">
           <wd-button block @click="changeDisabled" v-if="disabled">开始签名</wd-button>
-          <wd-button v-if="!disabled" size="small" plain @click="clear">清除</wd-button>
-          <wd-button v-if="!disabled" size="small" style="margin-left: 4px" @click="confirm">确认</wd-button>
+          <block v-if="!disabled">
+            <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>
         </template>
       </wd-signature>
     </demo-block>

src/uni_modules/wot-design-uni/components/wd-signature/index.scss

@@ -16,6 +16,7 @@
     width: 100%;
   }
 
+
   @include e(footer) {
     margin-top: $-signature-footer-margin-top;
     justify-content: flex-end;
@@ -27,4 +28,4 @@
       }
     }
   }
-}
+}

src/uni_modules/wot-design-uni/components/wd-signature/types.ts

@@ -1,9 +1,9 @@
 /*
  * @Author: 810505339
  * @Date: 2025-01-10 20:03:57
- * @LastEditors: weisheng
- * @LastEditTime: 2025-01-17 16:43:19
- * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-signature/types.ts
+ * @LastEditors: 810505339
+ * @LastEditTime: 2025-02-12 01:23:47
+ * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-signature\types.ts
  * 记得注释
  */
 import { baseProps, numericProp } from '../common/props'
@@ -33,6 +33,16 @@ export const signatureProps = {
    * 类型：string
    */
   clearText: String,
+  /**
+   * 上一步按钮的文本
+   * 类型：string
+   */
+  nextText: String,
+  /**
+   * 下一步按钮的文本
+   * 类型：string
+   */
+  previousText: String,
   /**
    * 确认按钮的文本
    * 类型：string
@@ -97,19 +107,30 @@ export const signatureProps = {
   disableScroll: {
     type: Boolean,
     default: true
+  },
+  /* 是否开始历史记录 */
+  history: {
+    type: Boolean,
+    default: false
+  },
+  step: {
+    type: Number,
+    default: 1
   }
 }
-
 export type SignatureResult = {
   tempFilePath: string
   success: boolean
   width: number
   height: number
 }
-
 export type SignatureExpose = {
   /** 点击清除按钮清除签名 */
   clear: () => void
   /** 点击确定按钮 */
   confirm: (result: SignatureResult) => void
+  /* 点击回退 */
+  next: () => void
+  /* 点击撤回 */
+  previous: () => void
 }