modify pattern-lock api docs

Signed-off-by: NYao yuchi <yaoyuchi@huawei.com>

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-patternlock.md

-# PatternLock<font color=ff0000><sup>8+</sup></font>
+# PatternLock
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 图案密码锁组件，以宫格图案的方式输入密码，用于密码验证。
 
@@ -24,37 +26,37 @@ PatternLock(controller?: PatternLockController)
   | ------------- | -------------- |
   | reset():void; | 重置组件状态。 |
 
-## 属性方法
+## 属性
 
 不支持*`backgroundColor`*以外的通用属性设置。
 
-| 名称            | 参数类型         | 默认值      | 描述                                                         |
-| --------------- | ---------------- | ----------- | ------------------------------------------------------------ |
-| sideLength      | Length           | 300dp       | 设置组件的宽度和高度（相同值）。最小可以设置为0。            |
-| circleRadius    | Length           | 14dp        | 设置宫格圆点的半径。                                         |
-| backgroundColor | ResourceColor    | 无          | 设置组件的背景色。                                           |
-| regularColor    | ResourceColor    | Color.Black | 设置宫格圆点在“未选中”状态的填充颜色。                       |
-| selectedColor   | ResourceColor    | Color.Black | 设置宫格圆点在“选中”状态的填充颜色。                         |
-| activeColor     | ResourceColor    | Color.Black | 设置宫格圆点在“激活”状态的填充颜色。                         |
-| pathColor       | ResourceColor    | Color.Blue  | 设置线段的颜色。                                             |
-| pathStrokeWidth | number or string | 34dp        | 设置连线的宽度。最小可以设置为0。                            |
-| autoReset       | boolean          | true        | 设置是否支持用户在完成输入后再次触屏重置组件状态。如果设置为true，用户可以通过触摸图案密码锁重置组件状态（清除之前的输入效果）；如果设置为false，用户手指离开屏幕完成输入后，再次触摸图案密码锁（包括圆点）不能改变之前的输入状态。 |
+| 名称            | 参数类型      | 默认值      | 描述                                                         |
+| --------------- | ------------- | ----------- | ------------------------------------------------------------ |
+| sideLength      | Length        | 300vp       | 设置组件的宽度和高度（相同值）。最小可以设置为0。            |
+| circleRadius    | Length        | 14vp        | 设置宫格圆点的半径。                                         |
+| regularColor    | ResourceColor | Color.Black | 设置宫格圆点在“未选中”状态的填充颜色。                       |
+| selectedColor   | ResourceColor | Color.Black | 设置宫格圆点在“选中”状态的填充颜色。                         |
+| activeColor     | ResourceColor | Color.Black | 设置宫格圆点在“激活”状态的填充颜色。                         |
+| pathColor       | ResourceColor | Color.Blue  | 设置连线的颜色。                                             |
+| pathStrokeWidth | Length        | 34vp        | 设置连线的宽度。最小可以设置为0。                            |
+| autoReset       | boolean       | true        | 设置是否支持用户在完成输入后再次触屏重置组件状态。如果设置为true，用户可以通过触摸图案密码锁重置组件状态（清除之前的输入效果）；如果设置为false，用户手指离开屏幕完成输入后，再次触摸图案密码锁（包括圆点）不能改变之前的输入状态。 |
 
-## 事件方法
+## 事件
 
-| 事件名            | 参数类型      | 默认值 | 描述                                                         |
-| -------------------------------------------------------- | ------------- | ------ | ------------------------------------------------------------ |
-| onPatternComplete | Array<number> | 无     | 指定输入状态结束时被调用的回调函数，参数是和输入顺序一致的数字数组。 |
+| 名称          | 功能描述                                                     |
+| -------------------------------------------------------- | ------------------------------------------------------------ |
+| onPatternComplete(callback: (input: Array<number>) => void) | 指定输入状态结束时被调用的回调函数，参数是和输入顺序一致的数字数组。 |
 
 ##  示例
 
 ```typescript
 @Entry
 @Component
-struct SwiperExample {
+struct PatternLockExample {
   @State passwords: Number[] = []
   @State message: string = 'please input password'
   private patternLockController: PatternLockController = new PatternLockController()
+  
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
       Text(this.message).textAlign(TextAlign.Center)
@@ -62,10 +64,6 @@ struct SwiperExample {
         .sideLength(150)
         .circleRadius(7)
         .pathStrokeWidth(17)
-        .regularColor(Color.Black)
-        .selectedColor(Color.Black)
-        .activeColor(Color.Black)
-        .pathColor(Color.Blue)
         .backgroundColor(Color.White)
         .autoReset(true)
         .onPatternComplete((input: Array<number>) => {
@@ -95,5 +93,5 @@ struct SwiperExample {
 }
 ```
 
-![](.\figures\patternlock.gif)
+![patternlock](figures\patternlock.gif)