!10587 10496和10335挑单到3.2beta3

Merge pull request !10587 from 田雨/OpenHarmony-3.2-Beta3

!10587 10496和10335挑单到3.2beta3
Merge pull request !10587 from 田雨/OpenHarmony-3.2-Beta3
c6970c1d · openharmony_ci · Gitee · c7541729 · fed3898b · c7541729
29 changed file
--- a/zh-cn/application-dev/reference/arkui-ts/figures/focus.png
+++ b/zh-cn/application-dev/reference/arkui-ts/figures/focus.png
--- a/zh-cn/application-dev/reference/arkui-ts/figures/keyEvent.png
+++ b/zh-cn/application-dev/reference/arkui-ts/figures/keyEvent.png
--- a/zh-cn/application-dev/reference/arkui-ts/figures/mouse.png
+++ b/zh-cn/application-dev/reference/arkui-ts/figures/mouse.png
--- a/zh-cn/application-dev/reference/arkui-ts/figures/mouse1.png
+++ b/zh-cn/application-dev/reference/arkui-ts/figures/mouse1.png
--- a/zh-cn/application-dev/reference/arkui-ts/figures/patternlock.gif
+++ b/zh-cn/application-dev/reference/arkui-ts/figures/patternlock.gif
--- a/zh-cn/application-dev/reference/arkui-ts/figures/search.gif
+++ b/zh-cn/application-dev/reference/arkui-ts/figures/search.gif
--- a/zh-cn/application-dev/reference/arkui-ts/figures/search.png
+++ b/zh-cn/application-dev/reference/arkui-ts/figures/search.png
--- a/zh-cn/application-dev/reference/arkui-ts/figures/textInput.gif
+++ b/zh-cn/application-dev/reference/arkui-ts/figures/textInput.gif
--- a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264364.gif
+++ b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264364.gif
--- a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001179613854.gif
+++ b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001179613854.gif
--- a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001208256092.png
+++ b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001208256092.png
--- a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001209874754.gif
+++ b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001209874754.gif
--- a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001210353788.gif
+++ b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001210353788.gif
--- a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219864151.gif
+++ b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219864151.gif
--- a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001250678457.gif
+++ b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001250678457.gif
--- a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001252667389.gif
+++ b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001252667389.gif
--- a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001252769643.gif
+++ b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001252769643.gif
--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-patternlock.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-patternlock.md
 # PatternLock
-图案密码锁组件，以宫格图案的方式输入密码，用于密码验证。手指触碰图案密码锁时开始进入输入状态，手指离开屏幕时结束输入状态并向应用返回输入的密码。
+图案密码锁组件，以九宫格图案的方式输入密码，用于密码验证场景。手指在PatternLock组件区域按下时开始进入输入状态，手指离开屏幕时结束输入状态完成密码输入。
 >  **说明：** 
 >
@@ -16,36 +16,36 @@ PatternLock(controller?: PatternLockController)
 **参数:**
-| 参数名     | 参数类型                                        | 必填 | 描述                                                         |
+| 参数名     | 参数类型                                        | 必填 | 描述                                                |
-| ---------- | ----------------------------------------------- | ---- | ------------------------------------------------------------ |
+| ---------- | ----------------------------------------------- | ---- | --------------------------------------------------- |
-| controller | [PatternLockController](#patternlockcontroller) | 否   | 给组件绑定一个控制器，用来控制组件状态重置。<br/>默认值：null |
+| controller | [PatternLockController](#patternlockcontroller) | 否   | 设置PatternLock组件控制器，可用于控制组件状态重置。 |
 ## 属性
-不支持`backgroundColor`以外的通用属性设置。
+不支持除backgroundColor以外的通用属性设置。
 | 名称            | 参数类型                              | 描述                                                         |
 | --------------- | ------------------------------------- | ------------------------------------------------------------ |
-| sideLength      | [Length](ts-types.md#length)        | 设置组件的宽度和高度（相同值）。最小可以设置为0。<br/>默认值：300vp |
+| sideLength      | [Length](ts-types.md#length)        | 设置组件的宽度和高度（宽高相同）。设置为0或负数等非法值时组件不显示。<br/>默认值：300vp |
-| circleRadius    | [Length](ts-types.md#length)        | 设置宫格圆点的半径。<br/>默认值：14vp                        |
+| circleRadius    | [Length](ts-types.md#length)        | 设置宫格中圆点的半径。<br/>默认值：14vp |
 | regularColor    | [ResourceColor](ts-types.md#resourcecolor) | 设置宫格圆点在“未选中”状态的填充颜色。<br/>默认值：Color.Black |
 | selectedColor   | [ResourceColor](ts-types.md#resourcecolor) | 设置宫格圆点在“选中”状态的填充颜色。<br/>默认值：Color.Black |
-| activeColor     | [ResourceColor](ts-types.md#resourcecolor) | 设置宫格圆点在“激活”状态的填充颜色。<br/>默认值：Color.Black |
+| activeColor     | [ResourceColor](ts-types.md#resourcecolor) | 设置宫格圆点在“激活”状态的填充颜色（“激活”状态为手指经过圆点但还未选中的状态）。<br/>默认值：Color.Black |
 | pathColor       | [ResourceColor](ts-types.md#resourcecolor) | 设置连线的颜色。<br/>默认值：Color.Blue                      |
-| pathStrokeWidth | number&nbsp;\|&nbsp;string            | 设置连线的宽度。最小可以设置为0。<br/>默认值：34vp           |
+| pathStrokeWidth | number&nbsp;\|&nbsp;string            | 设置连线的宽度。设置为0或负数等非法值时连线不显示。<br/>默认值：34vp |
-| autoReset       | boolean                               | 设置是否支持用户在完成输入后再次触屏重置组件状态。如果设置为true，用户可以通过触摸图案密码锁重置组件状态（清除之前的输入效果）；如果设置为false，用户手指离开屏幕完成输入后，再次触摸图案密码锁（包括圆点）不能改变之前的输入状态。<br/>默认值：true |
+| autoReset       | boolean                               | 设置在完成密码输入后再次在组件区域按下时是否重置组件状态。设置为true，完成密码输入后再次在组件区域按下时会重置组件状态（即清除之前输入的密码）；反之若设置为false，则不会重置组件状态。<br/>默认值：true |
 ## 事件
 除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件：
-| 名称                                       | 描述                                       |
+| 名称                                                         | 描述                                                         |
-| ---------------------------------------- | ---------------------------------------- |
+| ------------------------------------------------------------ | ------------------------------------------------------------ |
-| onPatternComplete(callback: (input: Array\<number\>) => void) | 密码输入结束时被调用的回调函数。<br />input: 与选中宫格圆点顺序一致的数字数组，数字为选中宫格的索引（0到8）。 |
+| onPatternComplete(callback: (input: Array\<number\>) => void) | 密码输入结束时触发该回调。<br />input: 与选中宫格圆点顺序一致的数字数组，数字为选中宫格圆点的索引值（第一行圆点从左往右依次为0,1,2，第二行圆点依次为3,4,5，第三行圆点依次为6,7,8）。 |
 ## PatternLockController
-PatternLock组件的控制器，可以将此对象绑定至PatternLock组件，然后通过它进行状态重置。
+PatternLock组件的控制器，可以通过它进行组件状态重置。
 ### 导入对象
@@ -66,44 +66,48 @@ reset(): void
 @Entry
 @Component
 struct PatternLockExample {
-  @State passwords: Number[] = []
+  @State passwords: Number[] = [];
-  @State message: string = 'please input password'
+  @State message: string = 'please input password!';
-  private patternLockController: PatternLockController = new PatternLockController()
+  private patternLockController: PatternLockController = new PatternLockController();
  build() {
-    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+    Column() {
-      Text(this.message).textAlign(TextAlign.Center)
+      Text(this.message).textAlign(TextAlign.Center).margin(20).fontSize(20)
      PatternLock(this.patternLockController)
-        .sideLength(150)
+        .sideLength(200)
-        .circleRadius(7)
+        .circleRadius(9)
-        .pathStrokeWidth(17)
+        .pathStrokeWidth(18)
-        .backgroundColor(Color.White)
+        .activeColor('#B0C4DE')
+        .selectedColor('#228B22')
+        .pathColor('#90EE90')
+        .backgroundColor('#F5F5F5')
        .autoReset(true)
        .onPatternComplete((input: Array<number>) => {
-          // 判断输出的密码格式
+          // 输入的密码长度小于5时，提示重新输入
          if (input === null || input === undefined || input.length < 5) {
-            this.message = 'The password length needs to be greater than 5.'
+            this.message = 'The password length needs to be greater than 5, please enter again.';
-            // 重新触发该回调
+            return;
-            return
          }
          // 判断密码长度是否大于0
          if (this.passwords.length > 0) {
-              // 判断俩次输入的密码是否相等
+            // 判断两次输入的密码是否相同，相同则提示密码设置成功，否则提示重新输入
            if (this.passwords.toString() === input.toString()) {
-              this.passwords = input
+              this.passwords = input;
-              this.message = 'Set password successfully: ' + this.passwords.toString()
+              this.message = 'Set password successfully: ' + this.passwords.toString();
            } else {
-              this.message = 'Inconsistent passwords, please enter again.'
+              this.message = 'Inconsistent passwords, please enter again.';
            }
          } else {
-            this.passwords = input
+            // 提示第二次输入密码
-            this.message = "Please enter again."
+            this.passwords = input;
+            this.message = "Please enter again.";
          }
        })
-      Button('reset button').margin(30).onClick(() => {
+      Button('Reset PatternLock').margin(30).onClick(() => {
-        this.patternLockController.reset()
+        // 重置密码锁
-        this.passwords = []
+        this.patternLockController.reset();
-        this.message = 'Please input password'
+        this.passwords = [];
+        this.message = 'Please input password';
      })
    }.width('100%').height('100%')
  }

--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-search.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-search.md
 #  Search
-提供搜索框组件，用于提供用户搜索内容的输入区域。
+搜索框组件，适用于浏览器的搜索内容输入框等应用场景。
 > **说明：**
 >
@@ -18,37 +18,37 @@ Search(options?: { value?: string; placeholder?: string; icon?: string; controll
 | 参数名      | 参数类型         | 必填 | 参数描述                                                     |
 | ----------- | ---------------- | ---- | ------------------------------------------------------------ |
-| value       | string           | 否   | 搜索文本值。                                                 |
+| value       | string           | 否   | 设置当前显示的搜索文本内容。                                 |
-| placeholder | string           | 否   | 无输入时的提示文本。                                         |
+| placeholder | string           | 否   | 设置无输入时的提示文本。                                     |
-| icon        | string           | 否   | 搜索图标路径，默认使用系统搜索图标，支持的图标格式: svg、jpg和png。 |
+| icon        | string           | 否   | 设置搜索图标路径，默认使用系统搜索图标，图标支持的图源格式: svg、jpg和png。 |
-| controller  | SearchController | 否   | 控制器。                                                     |
+| controller  | SearchController | 否   | 设置Search组件控制器。                                       |
 ## 属性
 除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
-| 名称                    | 参数类型                                         | 描述                                           |
+| 名称                    | 参数类型                                         | 描述                                                       |
-| ----------------------- | ------------------------------------------------ | ---------------------------------------------- |
+| ----------------------- | ------------------------------------------------ | ---------------------------------------------------------- |
-| searchButton            | string                                           | 搜索框末尾搜索按钮文本值，默认无搜索按钮。         |
+| searchButton            | string                                           | 搜索框末尾搜索按钮文本内容，默认无搜索按钮。               |
-| placeholderColor        | [ResourceColor](ts-types.md#resourcecolor)      | 设置placeholder颜色。                           |
+| placeholderColor        | [ResourceColor](ts-types.md#resourcecolor)       | 设置placeholder文本颜色。                                  |
-| placeholderFont         | [Font](ts-types.md#font)                     | 设置placeholder文本样式。                           |
+| placeholderFont         | [Font](ts-types.md#font)                         | 设置placeholder文本样式。                                  |
-| textFont                | [Font](ts-types.md#font)                     | 设置搜索框内文本样式。                               |
+| textFont                | [Font](ts-types.md#font)                         | 设置搜索框内输入文本样式。                                 |
-| copyOption<sup>9+</sup> | [CopyOptions](ts-appendix-enums.md#copyoptions9) | 设置文本是否可复制。                             |
+| copyOption<sup>9+</sup> | [CopyOptions](ts-appendix-enums.md#copyoptions9) | 设置输入的文本是否可复制。                                 |
-| textAlign               | [TextAlign](ts-appendix-enums.md#textalign)      | 设置文本对齐方式。<br/>默认值：TextAlign.Start    |
+| textAlign               | [TextAlign](ts-appendix-enums.md#textalign)      | 设置文本在搜索框中的对齐方式。<br/>默认值：TextAlign.Start |
 ## 事件
-| 名称                                       | 功能描述                                     |
+| 名称                                        | 功能描述                                                     |
-| ---------------------------------------- | ---------------------------------------- |
+| ------------------------------------------- | ------------------------------------------------------------ |
-| onSubmit(callback: (value: string) => void) | 点击搜索图标、搜索按钮或者按下软键盘搜索按钮时触发。<br> -value: 当前输入文本框的内容。 |
+| onSubmit(callback: (value: string) => void) | 点击搜索图标、搜索按钮或者按下软键盘搜索按钮时触发该回调。<br/> -value: 当前搜索框中输入的文本内容。 |
-| onChange(callback: (value: string) => void) | 输入内容发生变化时，触发回调。<br> -value: 当前输入文本框的内容。  |
+| onChange(callback: (value: string) => void) | 输入内容发生变化时，触发该回调。<br/> -value: 当前搜索框中输入的文本内容。 |
-| onCopy(callback: (value: string) => void) | 组件触发系统剪切板复制操作。<br> -value: 复制的文本内容。      |
+| onCopy(callback: (value: string) => void)   | 长按搜索框弹出剪切板之后，点击剪切板的复制按钮触发该回调。<br> -value: 复制的文本内容。 |
-| onCut(callback: (value: string) => void) | 组件触发系统剪切板剪切操作。<br> -value: 剪切的文本内容。      |
+| onCut(callback: (value: string) => void)    | 长按搜索框弹出剪切板之后，点击剪切板的剪切按钮触发该回调。<br> -value: 剪切的文本内容。 |
-| onPaste(callback: (value: string) => void) | 组件触发系统剪切板粘贴操作。<br> -value: 粘贴的文本内容。      |
+| onPaste(callback: (value: string) => void)  | 长按搜索框弹出剪切板之后，点击剪切板的粘贴按钮触发该回调。<br> -value: 粘贴的文本内容。 |
 ## SearchController
-Search组件的控制器，通过它操作Search组件。
+Search组件的控制器，目前通过它可控制Search组件的光标位置。
 ### 导入对象
 ```
@@ -73,30 +73,36 @@ caretPosition(value: number): void
 @Entry
 @Component
 struct SearchExample {
-  @State changeValue: string = ''
+  @State changeValue: string = '';
-  @State submitValue: string = ''
+  @State submitValue: string = '';
-  controller: SearchController = new SearchController()
+  controller: SearchController = new SearchController();
  build() {
-    Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
+    Column() {
-      Text(this.submitValue)
+      Text('onSubmit:' + this.submitValue).fontSize(18).margin(15)
-      Text(this.changeValue)
+      Text('onChange:' + this.changeValue).fontSize(18).margin(15)
-      Search({value: this.changeValue, placeholder: 'Type to search', controller: this.controller})
+      Search({ value: this.changeValue, placeholder: 'Type to search...', controller: this.controller })
-        .searchButton('Search')
+        .searchButton('SEARCH')
        .width(400)
-        .height(35)
+        .height(40)
        .backgroundColor(Color.White)
        .placeholderColor(Color.Grey)
-        .placeholderFont({ size: 26, weight: 10, family: 'serif', style: FontStyle.Normal })
+        .placeholderFont({ size: 14, weight: 400 })
+        .textFont({ size: 14, weight: 400 })
        .onSubmit((value: string) => {
-          this.submitValue = value
+          this.submitValue = value;
        })
        .onChange((value: string) => {
-          this.changeValue = value
+          this.changeValue = value;
        })
-        .margin({ top: 30, left:10, right:10 })
+        .margin(20)
-    }
+      Button('Set caretPosition 1')
+        .onClick(() => {
+          // 设置光标位置到输入的第一个字符后
+          this.controller.caretPosition(1);
+        })
+    }.width('100%')
  }
 }
 ```
-![search](figures/search.png)
+![search](figures/search.gif)
\ No newline at end of file
--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md
 # Slider
-滑动条组件，用来快速调节设置值，如音量、亮度等。
+滑动条组件，通常用于快速调节设置值，如音量调节、亮度调节等应用场景。
 >  **说明：**
 >
@@ -23,10 +23,10 @@ Slider(options?: {value?: number, min?: number, max?: number, step?: number, sty
 | value | number | 否 | 当前进度值。<br/>默认值：0 |
 | min | number | 否 | 设置最小值。<br/>默认值：0 |
 | max | number | 否 | 设置最大值。<br/>默认值：100 |
-| step | number | 否 | 设置Slider滑动跳动值，当设置相应的step时，Slider为间歇滑动。<br/>默认值：1 |
+| step | number | 否 | 设置Slider滑动步长。<br/>默认值：1 |
-| style | SliderStyle | 否 | 设置Slider的滑块样式。<br/>默认值：SliderStyle.OutSet |
+| style | SliderStyle | 否 | 设置Slider的滑块与滑轨显示样式。<br/>默认值：SliderStyle.OutSet |
 | direction<sup>8+</sup> | [Axis](ts-appendix-enums.md#axis) | 否 | 设置滑动条滑动方向为水平或竖直方向。<br/>默认值：Axis.Horizontal |
-| reverse<sup>8+</sup> | boolean | 否 | 设置滑动条取值范围是否反向。<br/>默认值：false |
+| reverse<sup>8+</sup> | boolean | 否 | 设置滑动条取值范围是否反向，横向Slider默认为从左往右滑动，竖向Slider默认为从上往下滑动。<br/>默认值：false |
 ## SliderStyle枚举说明
@@ -38,34 +38,34 @@ Slider(options?: {value?: number, min?: number, max?: number, step?: number, sty
 ## 属性
-不支持触摸热区设置。
+支持除触摸热区以外的通用属性设置。
 | 名称 | 参数类型 | 描述 |
 | -------- | -------- | -------- |
 | blockColor | [ResourceColor](ts-types.md#resourcecolor) | 设置滑块的颜色。 |
 | trackColor | [ResourceColor](ts-types.md#resourcecolor) | 设置滑轨的背景颜色。 |
-| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | 设置滑轨的已滑动颜色。 |
+| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | 设置滑轨的已滑动部分颜色。 |
 | showSteps | boolean | 设置当前是否显示步长刻度值。<br/>默认值：false |
-| showTips | boolean | 设置滑动时是否显示气泡提示百分比。<br/>默认值：false |
+| showTips | boolean | 设置滑动时是否显示百分比气泡提示。<br/>默认值：false |
 | trackThickness      | [Length](ts-types.md#length) | 设置滑轨的粗细。 |
 ## 事件
-通用事件仅支持：OnAppear，OnDisAppear。
+通用事件仅支持挂载卸载事件：OnAppear，OnDisAppear。
 | 名称 | 功能描述 |
 | -------- | -------- |
-| onChange(callback:&nbsp;(value:&nbsp;number,&nbsp;mode:&nbsp;SliderChangeMode)&nbsp;=&gt;&nbsp;void) | Slider滑动时触发事件回调。<br/>value：当前进度值。若返回值有小数，可使用Math.toFixed()将数据处理为想要的精度。<br/>mode：拖动状态。 |
+| onChange(callback:&nbsp;(value:&nbsp;number,&nbsp;mode:&nbsp;SliderChangeMode)&nbsp;=&gt;&nbsp;void) | Slider滑动时触发事件回调。<br/>value：滑动进度值。若返回值有小数，可使用Math.toFixed()方法将数据处理为预期的精度。<br/>mode：拖动状态。 |
 ## SliderChangeMode枚举说明
 | 名称 | 值 | 描述 |
 | -------- | -------- | -------- |
-| Begin | 0 | 用户开始拖动滑块。 |
+| Begin | 0 | 开始拖动滑块。 |
-| Moving | 1 | 用户拖动滑块中。 |
+| Moving | 1 | 正在拖动滑块过程中。 |
-| End | 2 | 用户结束拖动滑块。 |
+| End | 2 | 结束拖动滑块。 |
-| Click    | 3    | 用户点击滑动条使滑块位置移动。 |
+| Click    | 3    | 点击滑动条使滑块位置移动。 |
 ## 示例
@@ -75,105 +75,150 @@ Slider(options?: {value?: number, min?: number, max?: number, step?: number, sty
 @Entry
 @Component
 struct SliderExample {
-  @State outSetValue: number = 40
+  @State outSetValueOne: number = 40;
-  @State inSetValue: number = 40
+  @State inSetValueOne: number = 40;
-  @State outVerticalSetValue: number = 40
+  @State outSetValueTwo: number = 40;
-  @State inVerticalSetValue: number = 40
+  @State inSetValueTwo: number = 40;
+  @State vOutSetValueOne: number = 40;
+  @State vInSetValueOne: number = 40;
+  @State vOutSetValueTwo: number = 40;
+  @State vInSetValueTwo: number = 40;
  build() {
-    Column({ space: 5 }) {
+    Column({ space: 8 }) {
-      Text('slider out set').fontSize(9).fontColor(0xCCCCCC).width('90%')
+      Text('outset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15)
      Row() {
        Slider({
-          value: this.outSetValue,
+          value: this.outSetValueOne,
          min: 0,
          max: 100,
-          step: 1,
          style: SliderStyle.OutSet
        })
-        .blockColor(Color.Blue)
+          .showTips(true)
-        .trackColor(Color.Gray)
+          .onChange((value: number, mode: SliderChangeMode) => {
-        .selectedColor(Color.Blue)
+            this.outSetValueOne = value;
-        .showSteps(true)
+            console.info('value:' + value + 'mode:' + mode.toString());
-        .showTips(true)
+          })
-        .onChange((value: number, mode: SliderChangeMode) => {
+        // toFixed(0)将滑动条返回值处理为整数精度
-          this.outSetValue = value
+        Text(this.outSetValueOne.toFixed(0)).fontSize(12)
-          console.info('value:' + value + 'mode:' + mode.toString())
+      }
+      .width('80%')
+      Row() {
+        Slider({
+          value: this.outSetValueTwo,
+          step: 10,
+          style: SliderStyle.OutSet
        })
-        Text(this.outSetValue.toFixed(0)).fontSize(16)
+          .showSteps(true)
+          .onChange((value: number, mode: SliderChangeMode) => {
+            this.outSetValueTwo = value;
+            console.info('value:' + value + 'mode:' + mode.toString());
+          })
+        Text(this.outSetValueTwo.toFixed(0)).fontSize(12)
      }
-      .padding({ top: 50 })
      .width('80%')
-      Text('slider in set').fontSize(9).fontColor(0xCCCCCC).width('90%')
+      Text('inset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15)
      Row() {
        Slider({
-          value: this.inSetValue,
+          value: this.inSetValueOne,
          min: 0,
          max: 100,
-          step: 1,
          style: SliderStyle.InSet
        })
-        .blockColor(0xCCCCCC)
+          .blockColor('#191970')
-        .trackColor(Color.Black)
+          .trackColor('#ADD8E6')
-        .selectedColor(0xCCCCCC)
+          .selectedColor('#4169E1')
-        .showSteps(false)
+          .showTips(true)
-        .showTips(false)
+          .onChange((value: number, mode: SliderChangeMode) => {
-        .onChange((value: number, mode: SliderChangeMode) => {
+            this.inSetValueOne = value;
-          this.inSetValue = value
+            console.info('value:' + value + 'mode:' + mode.toString());
-          console.info('value:' + value + 'mode:' + mode.toString())
+          })
-        })
+        Text(this.inSetValueOne.toFixed(0)).fontSize(12)
-        Text(this.inSetValue.toFixed(0)).fontSize(16)
      }
      .width('80%')
      Row() {
-        Column() {
+        Slider({
-          Text('slider out direction set').fontSize(9).fontColor(0xCCCCCC).width('50%')
+          value: this.inSetValueTwo,
-          Slider({
+          step: 10,
-            value: this.outVerticalSetValue,
+          style: SliderStyle.InSet
-            min: 0,
+        })
-            max: 100,
+          .blockColor('#191970')
-            step: 1,
+          .trackColor('#ADD8E6')
-            style: SliderStyle.OutSet,
+          .selectedColor('#4169E1')
-            direction: Axis.Vertical
-          })
-          .blockColor(Color.Blue)
-          .trackColor(Color.Gray)
-          .selectedColor(Color.Blue)
          .showSteps(true)
-          .showTips(true)
          .onChange((value: number, mode: SliderChangeMode) => {
-            this.outVerticalSetValue = value
+            this.inSetValueTwo = value;
-            console.info('value:' + value + 'mode:' + mode.toString())
+            console.info('value:' + value + 'mode:' + mode.toString());
          })
-          Text(this.outVerticalSetValue.toFixed(0)).fontSize(16)
+        Text(this.inSetValueTwo.toFixed(0)).fontSize(12)
+      }
+      .width('80%')
+      Row() {
+        Column() {
+          Text('vertical outset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15)
+          Row() {
+            Slider({
+              value: this.vOutSetValueOne,
+              style: SliderStyle.OutSet,
+              direction: Axis.Vertical
+            })
+              .blockColor('#191970')
+              .trackColor('#ADD8E6')
+              .selectedColor('#4169E1')
+              .showTips(true)
+              .onChange((value: number, mode: SliderChangeMode) => {
+                this.vOutSetValueOne = value;
+                console.info('value:' + value + 'mode:' + mode.toString());
+              })
+            Slider({
+              value: this.vOutSetValueTwo,
+              step: 10,
+              style: SliderStyle.OutSet,
+              direction: Axis.Vertical
+            })
+              .blockColor('#191970')
+              .trackColor('#ADD8E6')
+              .selectedColor('#4169E1')
+              .showSteps(true)
+              .onChange((value: number, mode: SliderChangeMode) => {
+                this.vOutSetValueTwo = value;
+                console.info('value:' + value + 'mode:' + mode.toString());
+              })
+          }
        }.width('50%').height(300)
        Column() {
-          Text('slider in direction set').fontSize(9).fontColor(0xCCCCCC).width('50%')
+          Text('vertical inset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15)
-          Slider({
+          Row() {
-            value: this.inVerticalSetValue,
+            Slider({
-            min: 0,
+              value: this.vInSetValueOne,
-            max: 100,
+              style: SliderStyle.InSet,
-            step: 1,
+              direction: Axis.Vertical,
-            style: SliderStyle.InSet,
+              reverse: true // 竖向的Slider默认是上端是min值，下端是max值，因此想要从下往上滑动，需要设置reverse为true
-            direction: Axis.Vertical
+            })
-          })
+              .showTips(true)
-          .blockColor(0xCCCCCC)
+              .onChange((value: number, mode: SliderChangeMode) => {
-          .trackColor(Color.Black)
+                this.vInSetValueOne = value;
-          .selectedColor(0xCCCCCC)
+                console.info('value:' + value + 'mode:' + mode.toString());
-          .showSteps(false)
+              })
-          .showTips(false)
+            Slider({
-          .onChange((value: number, mode: SliderChangeMode) => {
+              value: this.vInSetValueTwo,
-            this.inVerticalSetValue = value
+              step: 10,
-            console.info('value:' + value + 'mode:' + mode.toString())
+              style: SliderStyle.InSet,
-          })
+              direction: Axis.Vertical,
-          Text(this.inVerticalSetValue.toFixed(0)).fontSize(16)
+              reverse: true
+            })
+              .showSteps(true)
+              .onChange((value: number, mode: SliderChangeMode) => {
+                this.vInSetValueTwo = value;
+                console.info('value:' + value + 'mode:' + mode.toString());
+              })
+          }
        }.width('50%').height(300)
      }
+    }.width('100%')
-    }.width('100%').margin({ top: 5 })
  }
 }
 ```

--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepper.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepper.md
 # Stepper
-应用步骤方式切换页面的组件。
+步骤导航器组件，适用于引导用户按照步骤完成任务的导航场景。
 >  **说明：**
@@ -24,7 +24,7 @@ Stepper(value?: { index?: number })
 | 参数名 | 参数类型 | 必填  | 参数描述 |
 | ------| -------- | --------------- | -------- |
-| index | number   | 否 | 设置步骤导航器显示第几个StepperItem。<br/>默认值：0 |
+| index | number   | 否 | 设置步骤导航器当前显示StepperItem的索引值。<br/>默认值：0 |
 ## 属性
@@ -38,9 +38,9 @@ Stepper(value?: { index?: number })
 | -------- | -------- |
 | onFinish(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 步骤导航器最后一个StepperItem的nextLabel被点击时触发该回调&nbsp;。 |
 | onSkip(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 当前显示的StepperItem状态为ItemState.Skip时，nextLabel被点击时触发该回调。 |
-| onChange(callback:&nbsp;(prevIndex?:&nbsp;number,&nbsp;index?:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 点击左边或者右边文本按钮进行步骤切换时触发该事件。<br/>-&nbsp;prevIndex：切换前的步骤页索引值。<br/>-&nbsp;index：切换后的步骤页（前一页或者下一页）索引值。 |
+| onChange(callback:&nbsp;(prevIndex?:&nbsp;number,&nbsp;index?:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 点击当前StepperItem的prevLabel或nextLabel进行步骤切换时触发该回调。<br/>-&nbsp;prevIndex：切换前的步骤页索引值。<br/>-&nbsp;index：切换后的步骤页（前一页或者下一页）索引值。 |
-| onNext(callback:&nbsp;(index?:&nbsp;number,&nbsp;pendingIndex?:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 点击切换下一步骤时触发该事件。<br/>-&nbsp;index：当前步骤页索引值。<br/>-&nbsp;pendingIndex：下一步骤页索引值。 |
+| onNext(callback:&nbsp;(index?:&nbsp;number,&nbsp;pendingIndex?:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 点击StepperItem的nextLabel切换下一步骤时触发该回调。<br/>-&nbsp;index：当前步骤页索引值。<br/>-&nbsp;pendingIndex：下一步骤页索引值。 |
-| onPrevious(callback:&nbsp;(index?:&nbsp;number,&nbsp;pendingIndex?:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 点击切换上一步骤时触发该事件。<br/>-&nbsp;index：当前步骤页索引值。<br/>-&nbsp;pendingIndex：上一步骤页索引值。 |
+| onPrevious(callback:&nbsp;(index?:&nbsp;number,&nbsp;pendingIndex?:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 点击StepperItem的prevLabel切换上一步骤时触发该回调。<br/>-&nbsp;index：当前步骤页索引值。<br/>-&nbsp;pendingIndex：上一步骤页索引值。 |
 ## 示例
@@ -50,76 +50,86 @@ Stepper(value?: { index?: number })
 @Entry
 @Component
 struct StepperExample {
-  @State currentIndex: number = 0
+  @State currentIndex: number = 0;
-  @State firstState: ItemState = ItemState.Normal
+  @State firstState: ItemState = ItemState.Normal;
-  @State secondState: ItemState = ItemState.Normal
+  @State secondState: ItemState = ItemState.Normal;
+  @State thirdState: ItemState = ItemState.Normal;
  build() {
    Stepper({
      index: this.currentIndex
    }) {
+      // 第一个步骤页
      StepperItem() {
-        Text('Page One')
+        Column() {
-          .fontSize(35)
+          Text('Page One')
-          .fontColor(Color.Blue)
+            .fontSize(35)
-          .width(200)
+            .fontColor(Color.Blue)
-          .lineHeight(50)
+            .lineHeight(50)
-          .margin({ top: 250 })
+            .margin({ top: 250, bottom: 50 })
+          Button('change status:' + this.firstState)
+            .onClick(() => {
+              this.firstState = this.firstState === ItemState.Skip ? ItemState.Normal : ItemState.Skip;
+            })
+        }.width('100%')
      }
-      .nextLabel('')
+      .nextLabel('Next')
-      .position({ x: '35%', y: 0 })
+      .status(this.firstState)
+      // 第二个步骤页
      StepperItem() {
-        Text('Page Two')
+        Column() {
-          .fontSize(35)
+          Text('Page Two')
-          .fontColor(Color.Blue)
+            .fontSize(35)
-          .width(200)
+            .fontColor(Color.Blue)
-          .lineHeight(50)
+            .lineHeight(50)
-          .margin({ top: 250 })
+            .margin({ top: 250, bottom: 50 })
-          .onClick(() => {
+          Button('change status:' + this.secondState)
-            this.firstState = this.firstState === ItemState.Skip ? ItemState.Normal : ItemState.Skip
+            .onClick(() => {
-          })
+              this.secondState = this.secondState === ItemState.Disabled ? ItemState.Normal : ItemState.Disabled;
+            })
+        }.width('100%')
      }
      .nextLabel('Next')
      .prevLabel('Previous')
-      .status(this.firstState)
+      .status(this.secondState)
-      .position({ x: '35%', y: 0 })
+      // 第三个步骤页
      StepperItem() {
-        Text('Page Three')
+        Column() {
-          .fontSize(35)
+          Text('Page Three')
-          .fontColor(Color.Blue)
+            .fontSize(35)
-          .width(200)
+            .fontColor(Color.Blue)
-          .lineHeight(50)
+            .lineHeight(50)
-          .margin({ top: 250 })
+            .margin({ top: 250, bottom: 50 })
-          .onClick(() => {
+          Button('change status:' + this.thirdState)
-            this.secondState = this.secondState === ItemState.Waiting ? ItemState.Normal : ItemState.Waiting
+            .onClick(() => {
-          })
+              this.thirdState = this.thirdState === ItemState.Waiting ? ItemState.Normal : ItemState.Waiting;
+            })
+        }.width('100%')
      }
-      .position({ x: '35%', y: 0 })
+      .status(this.thirdState)
-      .status(this.secondState)
+      // 第四个步骤页
      StepperItem() {
        Text('Page four')
          .fontSize(35)
          .fontColor(Color.Blue)
-          .width(200)
+          .width('100%')
+          .textAlign(TextAlign.Center)
          .lineHeight(50)
          .margin({ top: 250 })
      }
-      .position({ x: '35%', y: 0 })
      .nextLabel('Finish')
    }
    .onFinish(() => {
-      console.log('onFinish')
+      // 此处可处理点击最后一页的Finish时的逻辑，例如路由跳转等
+      console.info('onFinish');
    })
    .onSkip(() => {
-      console.log('onSkip')
+      // 此处可处理点击跳过时的逻辑，例如动态修改Stepper的index值使其跳转到某一步骤页等
+      console.info('onSkip');
    })
    .onChange((prevIndex: number, index: number) => {
-      this.currentIndex = index
+      this.currentIndex = index;
    })
-    .align(Alignment.Center)
  }
 }
 ```

--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepperitem.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepperitem.md
@@ -22,18 +22,18 @@ StepperItem()
 | 参数名 | 参数类型 | 参数描述 |
 | -------- | -------- | -------- |
-| prevLabel | string | 当步骤导航器大于一页，除第一页默认值都为“返回”。 |
+| prevLabel | string | 设置左侧文本按钮内容，第一页没有左侧文本按钮，当步骤导航器大于一页时，除第一页外默认值都为“返回”。 |
-| nextLabel | string | 步骤导航器大于一页时，最后一页默认值为“开始”，其余页默认值为“下一步”。 |
+| nextLabel | string | 设置右侧文本按钮内容，最后一页默认值为“开始”，其余页默认值为“下一步”。 |
-| status | ItemState | 步骤导航器元素的状态。<br/>默认值：ItemState.Normal |
+| status | ItemState | 步骤导航器nextLabel的显示状态。<br/>默认值：ItemState.Normal |
 ## ItemState枚举说明
-| 名称 | 描述 |
+| 名称 | 值 | 描述 |
-| -------- | -------- |
+| -------- | -------- | -------- |
-| Normal | 正常状态，右侧文本按钮正常显示，可点击进入下一个StepperItem。 |
+| Normal | 0 | 正常状态，右侧文本按钮正常显示，可点击进入下一个StepperItem。 |
-| Disabled | 不可用状态，右侧文本按钮灰度显示，不可点击进入下一个StepperItem。 |
+| Disabled | 1 | 不可用状态，右侧文本按钮灰度显示，不可点击进入下一个StepperItem。 |
-| Waiting | 等待状态，右侧文本按钮不显示，使用等待进度条，不可点击进入下一个StepperItem。 |
+| Waiting | 2 | 等待状态，右侧文本按钮不显示，显示等待进度条，不可点击进入下一个StepperItem。 |
-| Skip | 跳过状态，表示跳过当前步骤,&nbsp;进入下一个StepperItem。 |
+| Skip | 3 | 跳过状态，右侧文本按钮显示“跳过”，此时可在Stepper的onSkip回调中自定义相关逻辑。 |
 ## 示例

--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md
 # TextInput
-可以输入单行文本并支持响应输入事件的组件。
+单行文本输入框组件。
 >  **说明：**
 >
@@ -20,38 +20,38 @@ TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: Te
 | 参数名                     | 参数类型                                     | 必填   | 参数描述            |
 | ----------------------- | ---------------------------------------- | ---- | --------------- |
-| placeholder   | [ResourceStr](ts-types.md#resourcestr)       | 否    | 无输入时的提示文本。      |
+| placeholder   | [ResourceStr](ts-types.md#resourcestr)       | 否    | 设置无输入时的提示文本。    |
 | text          | [ResourceStr](ts-types.md#resourcestr)       | 否    | 设置输入框当前的文本内容。     |
 | controller<sup>8+</sup> | [TextInputController](#textinputcontroller8) | 否    | 设置TextInput控制器。 |
 ## 属性
-除支持通用属性以及[文本样式设置](ts-universal-attributes-text-style.md)的属性外，还支持以下属性：
+除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
 | 名称                       | 参数类型                                     | 描述                                       |
 | ------------------------ | ---------------------------------------- | ---------------------------------------- |
 | type                     | InputType                                | 设置输入框类型。<br/>默认值：InputType.Normal        |
-| placeholderColor         | [ResourceColor](ts-types.md#resourcecolor)     | 设置placeholder颜色。|
+| placeholderColor         | [ResourceColor](ts-types.md#resourcecolor)     | 设置placeholder文本颜色。 |
 | placeholderFont          | [Font](ts-types.md#font) | 设置placeholder文本样式。 |
 | enterKeyType             | EnterKeyType                             | 设置输入法回车键类型。<br/>默认值：EnterKeyType.Done    |
 | caretColor               | [ResourceColor](ts-types.md#resourcecolor)    | 设置输入框光标颜色。                               |
 | maxLength                | number                                   | 设置文本的最大输入字符数。                            |
-| inputFilter<sup>8+</sup> | {<br/>value:&nbsp;[ResourceStr](ts-types.md#resourcestr),<br/>error?:&nbsp;(value:&nbsp;string)&nbsp;=&gt;&nbsp;void<br/>} | 正则表达式，满足表达式的输入允许显示，不满足正则表达式的输入被忽略。仅支持单个字符匹配，不支持字符串匹配。例如：^(?=.\*\d)(?=.\*[a-z])(?=.\*[A-Z]).{8,10}$，8到10位的强密码不支持过滤。<br/>-&nbsp;value：设置正则表达式。<br/>-&nbsp;error：正则匹配失败时，返回被忽略的内容。 |
+| inputFilter<sup>8+</sup> | {<br/>value:&nbsp;[ResourceStr](ts-types.md#resourcestr),<br/>error?:&nbsp;(value:&nbsp;string)&nbsp;=&gt;&nbsp;void<br/>} | 正则表达式，匹配表达式的输入允许显示，不匹配的输入将被过滤。目前仅支持单个字符匹配，不支持字符串匹配。<br/>-&nbsp;value：设置正则表达式。<br/>-&nbsp;error：正则匹配失败时，返回被过滤的内容。 |
-| copyOption<sup>9+</sup>  | [CopyOptions](ts-appendix-enums.md#copyoptions9) | 设置文本是否可复制。 |
+| copyOption<sup>9+</sup>  | [CopyOptions](ts-appendix-enums.md#copyoptions9) | 设置输入的文本是否可复制。 |
-| showPasswordIcon<sup>9+</sup> | boolean | 密码输入模式时，密码框末尾的图标是否显示。<br/>默认值：true |
+| showPasswordIcon<sup>9+</sup> | boolean | 密码输入模式时，输入框末尾的图标是否显示。<br/>默认值：true |
-| style<sup>9+</sup> | TextInputStyle | TextInput风格。<br/>默认值：TextInputStyle.Default |
+| style<sup>9+</sup> | TextInputStyle | 设置输入框为默认风格或内联输入风格。<br/>默认值：TextInputStyle.Default |
-| textAlign<sup>9+</sup>   | [TextAlign](ts-appendix-enums.md#textalign) | 设置文本水平对齐式。<br/>默认值：TextAlign.Start  |
+| textAlign<sup>9+</sup>   | [TextAlign](ts-appendix-enums.md#textalign) | 设置输入文本在输入框中的对齐方式。<br/>默认值：TextAlign.Start |
 ## EnterKeyType枚举说明
 | 名称                  | 描述        |
 | ------------------- | --------- |
-| Go     | 显示Go文本。   |
+| Go     | 显示为前往样式。 |
 | Search | 显示为搜索样式。  |
 | Send   | 显示为发送样式。  |
 | Next   | 显示为下一个样式。 |
-| Done   | 标准样式。     |
+| Done   | 显示为确认样式。 |
 ## InputType枚举说明
@@ -59,28 +59,30 @@ TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: Te
 | ------------------ | ------------- |
 | Normal   | 基本输入模式。<br/>支持输入数字、字母、下划线、空格、特殊字符。 |
 | Password | 密码输入模式。       |
-| Email    | e-mail地址输入模式。 |
+| Email    | 邮箱地址输入模式。 |
 | Number   | 纯数字输入模式。      |
-| PhoneNumber<sup>9+</sup> | 电话号码输入模式。<br/>支持输入数字、+ 、-、*、#，长度不限。 |
+| PhoneNumber<sup>9+</sup> | 电话号码输入模式。<br/>支持输入数字、+ 、-、#，长度不限。 |
 ## TextInputStyle<sup>9+</sup>枚举说明
 | 名称                 | 描述            |
 | ------------------ | ------------- |
-| Default   | 默认风格，光标宽1.5vp，光标高度和字体大小高度相关，字体越大光标越高。       |
+| Default   | 默认风格，光标宽1.5vp，光标高度与文本选中底板高度和字体大小相关。 |
-| Inline | 内联输入风格。文字选中时底板与输入框同高。      |
+| Inline | 内联输入风格。文本选中底板高度与输入框高度相同。 |
 ## 事件
-| 名称                                       | 功能描述                                     |
+除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件：
-| ---------------------------------------- | ---------------------------------------- |
-| onChange(callback:&nbsp;(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 输入发生变化时，触发回调。              |
+| 名称                                                         | 功能描述                                                     |
-| onSubmit(callback:&nbsp;(enterKey:&nbsp;EnterKeyType)&nbsp;=&gt;&nbsp;void) | 回车键或者软键盘回车键触发该回调，参数为当前软键盘回车键类型。          |
+| ------------------------------------------------------------ | ------------------------------------------------------------ |
-| onEditChanged(callback:&nbsp;(isEditing:&nbsp;boolean)&nbsp;=&gt;&nbsp;void)<sup>(deprecated) </sup> | 输入状态变化时，触发回调。                            |
+| onChange(callback:&nbsp;(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 输入内容发生变化时，触发该回调。                             |
-| onEditChange(callback:&nbsp;(isEditing:&nbsp;boolean)&nbsp;=&gt;&nbsp;void) <sup>8+</sup> | 输入状态变化时，触发回调。                            |
+| onSubmit(callback:&nbsp;(enterKey:&nbsp;EnterKeyType)&nbsp;=&gt;&nbsp;void) | 按下输入法回车键触发该回调，返回值为当前输入法回车键的类型。 |
-| onCopy<sup>8+</sup>(callback:(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 长按输入框内部区域弹出剪贴板后，点击剪切板复制按钮，触发回调。<br/>value：复制的文本内容。 |
+| onEditChanged(callback:&nbsp;(isEditing:&nbsp;boolean)&nbsp;=&gt;&nbsp;void)<sup>(deprecated) </sup> | 输入状态变化时，触发该回调。从API 8开始，建议使用onEditChange。 |
-| onCut<sup>8+</sup>(callback:(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 长按输入框内部区域弹出剪贴板后，点击剪切板剪切按钮，触发回调。<br/>value：剪切的文本内容。 |
+| onEditChange(callback:&nbsp;(isEditing:&nbsp;boolean)&nbsp;=&gt;&nbsp;void) <sup>8+</sup> | 输入状态变化时，触发该回调。isEditing为true表示正在输入。    |
-| onPaste<sup>8+</sup>(callback:(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 长按输入框内部区域弹出剪贴板后，点击剪切板粘贴按钮，触发回调。<br/>value：粘贴的文本内容。 |
+| onCopy(callback:(value:&nbsp;string)&nbsp;=&gt;&nbsp;void)<sup>8+</sup> | 长按输入框内部区域弹出剪贴板后，点击剪切板复制按钮，触发该回调。<br/>value：复制的文本内容。 |
+| onCut(callback:(value:&nbsp;string)&nbsp;=&gt;&nbsp;void)<sup>8+</sup> | 长按输入框内部区域弹出剪贴板后，点击剪切板剪切按钮，触发该回调。<br/>value：剪切的文本内容。 |
+| onPaste(callback:(value:&nbsp;string)&nbsp;=&gt;&nbsp;void)<sup>8+</sup> | 长按输入框内部区域弹出剪贴板后，点击剪切板粘贴按钮，触发该回调。<br/>value：粘贴的文本内容。 |
 ## TextInputController<sup>8+</sup>
@@ -105,60 +107,54 @@ caretPosition(value:&nbsp;number): void
 ## 示例
-### 单行文本输入
 ```ts
 // xxx.ets
 @Entry
 @Component
-struct TextInputExample1 {
+struct TextInputExample {
-  @State text: string = ''
+  @State text: string = '';
+  controller: TextInputController = new TextInputController();
  build() {
    Column() {
-      TextInput({ placeholder: 'input your word' })
+      TextInput({ placeholder: 'input your word...', controller: this.controller })
-        .placeholderColor("rgb(0,0,225)")
+        .placeholderColor(Color.Grey)
-        .placeholderFont({ size: 30, weight: 100, family: 'cursive', style: FontStyle.Italic })
+        .placeholderFont({ size: 14, weight: 400 })
        .caretColor(Color.Blue)
-        .height(50)
+        .width(400)
-        .fontSize(30)
+        .height(40)
-        .fontWeight(FontWeight.Bold)
+        .margin(20)
-        .fontFamily("sans-serif")
+        .fontSize(14)
-        .fontStyle(FontStyle.Normal)
+        .fontColor(Color.Black)
-        .fontColor(Color.Red)
        .onChange((value: string) => {
-          this.text = value
+          this.text = value;
        })
-      Text(this.text).width('90%')
+      Text(this.text)
-    }
+      Button('Set caretPosition 1')
+        .margin(15)
+        .onClick(() => {
+          // 将光标移动至第一个字符后
+          this.controller.caretPosition(1);
+        })
+      // 密码输入框
+      TextInput({ placeholder: 'input your password...' })
+        .width(400)
+        .height(40)
+        .margin(20)
+        .type(InputType.Password)
+        .maxLength(9)
+        .showPasswordIcon(true)
+      // 内联风格输入框
+      TextInput({ placeholder: 'inline style' })
+        .width(400)
+        .height(50)
+        .margin(20)
+        .borderRadius(0)
+        .style(TextInputStyle.Inline)
+    }.width('100%')
  }
 }
 ```
-![zh-cn_image_0000001252769643](figures/zh-cn_image_0000001252769643.gif)
+![textInput](figures/textInput.gif)
-### 设置光标
-```ts
-// xxx.ets
-@Entry
-@Component
-struct TextInputExample2 {
-    @State text: string = ''
-    controller: TextInputController = new TextInputController()
-    build() {
-        Column() {
-            TextInput({ placeholder: 'Please input your words.', controller:this.controller})
-            Button('caretPosition')
-                .onClick(() => {
-                this.controller.caretPosition(4)
-            })
-        }
-    }
-}
-```
-![zh-cn_image_0000001208256092](figures/zh-cn_image_0000001208256092.png)
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md
 # 拖拽事件
-拖拽事件指被长按后拖拽时触发的事件。
+拖拽事件指组件被长按后拖拽时触发的事件。
 >  **说明：**
 >
@@ -8,38 +8,38 @@
 ## 事件
-| 名称                                       | 支持冒泡 | 功能描述                                     |
+| 名称                                                         | 支持冒泡 | 功能描述                                                     |
-| ---------------------------------------- | ---- | ---------------------------------------- |
+| ------------------------------------------------------------ | -------- | ------------------------------------------------------------ |
-| onDragStart(event:&nbsp;(event?:&nbsp;DragEvent,&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;&nbsp;[CustomBuilder](ts-types.md#custombuilder8) \| DragItemInfo) | 否    | 第一次拖拽此事件绑定的组件时，触发回调。<br/>- event：拖拽事件信息，包括拖拽点坐标。<br/>- extraParams：拖拽事件额外信息，详见extraParam类型描述。<br/>返回值：当前跟手效果所拖拽的对象，用于显示拖拽时的提示组件。<br/>长按150毫秒(ms)可触发拖拽事件。优先级：长按手势配置时间小于等于150毫秒(ms)时，长按手势优先触发，否则拖拽事件优先触发。 |
+| onDragStart(event:&nbsp;(event?:&nbsp;[DragEvent](#dragevent说明),&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;&nbsp;[CustomBuilder](ts-types.md#custombuilder8) \|[DragItemInfo](#dragiteminfo说明) | [Dr否    | 第一次拖拽此事件绑定的组件时，触发回调。<br/>- event：拖拽事件信息，包括拖拽点坐标。<br/>- extraParams：拖拽事件额外信息，详见[extraParams](#extraparams说明)说明。<br/>返回值：当前跟手效果所拖拽的对象，用于显示拖拽时的提示组件。<br/>长按150ms可触发拖拽事件。优先级：长按手势配置时间小于等于150ms时，长按手势优先触发，否则拖拽事件优先触发。 |
-| onDragEnter(event:&nbsp;(event?:&nbsp;DragEvent,&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 否    | 拖拽进入组件范围内时，触发回调。<br/>- event：拖拽事件信息，包括拖拽点坐标。<br/>- extraParams：拖拽事件额外信息，详见extraParam类型描述。<br/>当监听了onDrop事件时，此事件才有效。 |
+| onDragEnter(event:&nbsp;(event?:&nbsp;[DragEvent](#dragevent说明),&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 否       | 拖拽进入组件范围内时，触发回调。<br/>- event：拖拽事件信息，包括拖拽点坐标。<br/>- extraParams：拖拽事件额外信息，详见[extraParams](#extraparams说明)说明。<br/>当监听了onDrop事件时，此事件才有效。 |
-| onDragMove(event:&nbsp;(event?:&nbsp;DragEvent,&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 否    | 拖拽在组件范围内移动时，触发回调。<br/>- event：拖拽事件信息，包括拖拽点坐标。<br/>- extraParams：拖拽事件额外信息，详见extraParam类型描述。<br/>当监听了onDrop事件时，此事件才有效。 |
+| onDragMove(event:&nbsp;(event?:&nbsp;[DragEvent](#dragevent说明),&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 否       | 拖拽在组件范围内移动时，触发回调。<br/>- event：拖拽事件信息，包括拖拽点坐标。<br/>- extraParams：拖拽事件额外信息，详见[extraParams](#extraparams说明)说明。<br/>当监听了onDrop事件时，此事件才有效。 |
-| onDragLeave(event:&nbsp;(event?:&nbsp;DragEvent,&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 否    | 拖拽离开组件范围内时，触发回调。<br/>- event：拖拽事件信息，包括拖拽点坐标。<br/>- extraParams：拖拽事件额外信息，详见extraParam类型描述。<br/>当监听了onDrop事件时，此事件才有效。 |
+| onDragLeave(event:&nbsp;(event?:&nbsp;[DragEvent](#dragevent说明),&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 否       | 拖拽离开组件范围内时，触发回调。<br/>- event：拖拽事件信息，包括拖拽点坐标。<br/>- extraParams：拖拽事件额外信息，详见[extraParams](#extraparams说明)说明。<br/>当监听了onDrop事件时，此事件才有效。 |
-| onDrop(event:&nbsp;(event?:&nbsp;DragEvent,&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 否    | 绑定此事件的组件可作为拖拽释放目标，当在本组件范围内停止拖拽行为时，触发回调。<br/>- event：拖拽事件信息，包括拖拽点坐标。<br/>- extraParams：拖拽事件额外信息，详见extraParam类型描述。 |
+| onDrop(event:&nbsp;(event?:&nbsp;[DragEvent](#dragevent说明),&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 否       | 绑定此事件的组件可作为拖拽释放目标，当在本组件范围内停止拖拽行为时，触发回调。<br/>- event：拖拽事件信息，包括拖拽点坐标。<br/>- extraParams：拖拽事件额外信息，详见[extraParams](#extraparams说明)说明。 |
 ## DragItemInfo说明
-| 属性名称      | 属性类型                                     | 必填   | 描述                                |
+| 名称      | 类型                                           | 必填 | 描述                                                       |
-| --------- | ---------------------------------------- | ---- | --------------------------------- |
+| --------- | ---------------------------------------------- | ---- | ---------------------------------------------------------- |
-| pixelMap  | [PixelMap](../apis/js-apis-image.md#pixelmap7) | 否    | 设置拖拽过程中显示的图片。                     |
+| pixelMap  | [PixelMap](../apis/js-apis-image.md#pixelmap7) | 否   | 设置拖拽过程中显示的图片。                                 |
-| builder   | [CustomBuilder](ts-types.md#custombuilder8) | 否    | 使用自定义生成器进行绘图，如果设置了pixelMap，则忽略此值。 |
+| builder   | [CustomBuilder](ts-types.md#custombuilder8)    | 否   | 拖拽过程中显示自定义组件，如果设置了pixelMap，则忽略此值。 |
-| extraInfo | string                                   | 否    | 拖拽项的描述。                           |
+| extraInfo | string                                         | 否   | 拖拽项的描述。                                             |
-## extraParam说明
+## extraParams说明
  用于返回组件在拖拽中需要用到的额外信息。
-  extraParam是Json对象转换的string字符串，可以通过Json.parse转换的Json对象获取如下属性。
+  extraParams是Json对象转换的string字符串，可以通过Json.parse转换的Json对象获取如下属性。
-| 属性名称          | 属性类型   | 描述                                       |
+| 名称          | 类型   | 描述                                                         |
-| ------------- | ------ | ---------------------------------------- |
+| ------------- | ------ | ------------------------------------------------------------ |
-| selectedIndex | number | 当拖拽事件设在父容器的子元素时，selectedIndex表示当前被拖拽子元素是父容器第selectedIndex个子元素，selectedIndex从0开始。<br/>仅在ListItem组件中生效。 |
+| selectedIndex | number | 当拖拽事件设在父容器的子元素时，selectedIndex表示当前被拖拽子元素是父容器第selectedIndex个子元素，selectedIndex从0开始。<br/>仅在ListItem组件的拖拽事件中生效。 |
 | insertIndex   | number | 当前拖拽元素在List组件中放下时，insertIndex表示被拖拽元素插入该组件的第insertIndex个位置，insertIndex从0开始。<br/>仅在List组件的拖拽事件中生效。 |
-## DragEvent对象说明
+## DragEvent说明
-| 名称     | 返回值类型  | 功能描述             |
+| 名称   | 类型   | 描述                          |
-| ------ | ------ | ---------------- |
+| ------ | ------ | ----------------------------- |
 | getX() | number | 当前拖拽点x轴坐标，单位为vp。 |
 | getY() | number | 当前拖拽点y轴坐标，单位为vp。 |
@@ -50,101 +50,117 @@
 @Entry
 @Component
 struct DragExample {
-  @State numbers: string[] = ['one', 'two', 'three', 'four', 'five', 'six']
+  @State numbers: string[] = ['one', 'two', 'three', 'four', 'five', 'six'];
-  @State text: string = ''
+  @State text: string = '';
-  @State bool: boolean = false
+  @State bool: boolean = false;
-  @State bool1: boolean = false
+  @State appleVisible: Visibility = Visibility.Visible;
-  @State appleVisible: Visibility = Visibility.Visible
+  @State orangeVisible: Visibility = Visibility.Visible;
-  @State orangeVisible: Visibility = Visibility.Visible
+  @State bananaVisible: Visibility = Visibility.Visible;
-  @State bananaVisible: Visibility = Visibility.Visible
-  @State select: number = 0
+  // 自定义拖拽过程中显示的内容
  @Builder pixelMapBuilder() {
    Column() {
      Text(this.text)
-        .width('50%').height(60).fontSize(16).borderRadius(10)
+        .width('50%')
-        .textAlign(TextAlign.Center).backgroundColor(Color.Yellow)
+        .height(60)
+        .fontSize(16)
+        .borderRadius(10)
+        .textAlign(TextAlign.Center)
+        .backgroundColor(Color.Yellow)
    }
  }
  build() {
    Column() {
      Text('There are three Text elements here')
-        .fontSize(12).fontColor(0xCCCCCC).width('90%')
+        .fontSize(12)
-        .textAlign(TextAlign.Start).margin(5)
+        .fontColor(0xCCCCCC)
-      Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceAround }) {
+        .width('90%')
-        Text('apple').width('25%').height(35).fontSize(16)
+        .textAlign(TextAlign.Start)
-          .textAlign(TextAlign.Center).backgroundColor(0xAFEEEE)
+        .margin(5)
+      Row({ space: 15 }) {
+        Text('apple')
+          .width('25%')
+          .height(35)
+          .fontSize(16)
+          .textAlign(TextAlign.Center)
+          .backgroundColor(0xAFEEEE)
          .visibility(this.appleVisible)
          .onDragStart(() => {
-            this.bool = true
+            this.bool = true;
-            this.text = 'apple'
+            this.text = 'apple';
-            this.appleVisible = Visibility.Hidden
+            this.appleVisible = Visibility.None;
-            return this.pixelMapBuilder
+            return this.pixelMapBuilder;
          })
-        Text('orange').width('25%').height(35).fontSize(16)
+        Text('orange')
-          .textAlign(TextAlign.Center).backgroundColor(0xAFEEEE)
+          .width('25%')
+          .height(35)
+          .fontSize(16)
+          .textAlign(TextAlign.Center)
+          .backgroundColor(0xAFEEEE)
          .visibility(this.orangeVisible)
          .onDragStart(() => {
-            this.bool = true
+            this.bool = true;
-            this.text = 'orange'
+            this.text = 'orange';
-            this.orangeVisible = Visibility.Hidden
+            this.orangeVisible = Visibility.None;
-            return this.pixelMapBuilder
+            return this.pixelMapBuilder;
          })
-        Text('banana').width('25%').height(35).fontSize(16)
+        Text('banana')
-          .textAlign(TextAlign.Center).backgroundColor(0xAFEEEE)
+          .width('25%')
+          .height(35)
+          .fontSize(16)
+          .textAlign(TextAlign.Center)
+          .backgroundColor(0xAFEEEE)
          .visibility(this.bananaVisible)
          .onDragStart((event: DragEvent, extraParams: string) => {
-            console.log('Text onDragStarts, ' + extraParams)
+            console.log('Text onDragStart, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY());
-            this.bool = true
+            this.bool = true;
-            this.text = 'banana'
+            this.text = 'banana';
-            this.bananaVisible = Visibility.Hidden
+            this.bananaVisible = Visibility.None;
-            return this.pixelMapBuilder
+            return this.pixelMapBuilder;
          })
-      }.border({ width: 1 }).width('90%').padding({ top: 10, bottom: 10 }).margin(10)
+      }.padding({ top: 10, bottom: 10 }).margin(10)
-      Text('This is a List element').fontSize(12)
+      Text('This is a List element')
-        .fontColor(0xCCCCCC).width('90%')
+        .fontSize(12)
-        .textAlign(TextAlign.Start).margin(15)
+        .fontColor(0xCCCCCC)
-      List({ space: 20, initialIndex: 0 }) {
+        .width('90%')
+        .textAlign(TextAlign.Start)
+        .margin(15)
+      List({ space: 20 }) {
        ForEach(this.numbers, (item) => {
          ListItem() {
-            Text('' + item)
+            Text(item)
-              .width('100%').height(80).fontSize(16).borderRadius(10)
+              .width('100%')
-              .textAlign(TextAlign.Center).backgroundColor(0xAFEEEE)
+              .height(80)
+              .fontSize(16)
+              .borderRadius(10)
+              .textAlign(TextAlign.Center)
+              .backgroundColor(0xAFEEEE)
          }
-          .onDragStart((event: DragEvent, extraParams: string) => {
-            console.log('ListItem onDragStarts, ' + extraParams)
-            var jsonString = JSON.parse(extraParams)
-            this.bool1 = true
-            this.text = this.numbers[jsonString.selectedIndex]
-            this.select = jsonString.selectedIndex
-            return this.pixelMapBuilder
-          })
        }, item => item)
      }
      .editMode(true)
-      .height('50%').width('90%').border({ width: 1 })
+      .height('50%')
+      .width('90%')
+      .border({ width: 1 })
+      .padding(15)
      .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 })
      .onDragEnter((event: DragEvent, extraParams: string) => {
-        console.log('List onDragEnter, ' + extraParams)
+        console.log('List onDragEnter, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY());
      })
      .onDragMove((event: DragEvent, extraParams: string) => {
-        console.log('List onDragMove, ' + extraParams)
+        console.log('List onDragMove, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY());
      })
      .onDragLeave((event: DragEvent, extraParams: string) => {
-        console.log('List onDragLeave, ' + extraParams)
+        console.log('List onDragLeave, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY());
      })
      .onDrop((event: DragEvent, extraParams: string) => {
-        var jsonString = JSON.parse(extraParams)
+        var jsonString = JSON.parse(extraParams);
        if (this.bool) {
-          this.numbers.splice(jsonString.insertIndex, 0, this.text)
+          // 通过splice方法插入元素
-          this.bool = false
+          this.numbers.splice(jsonString.insertIndex, 0, this.text);
-        } else if (this.bool1) {
+          this.bool = false;
-          this.numbers.splice(jsonString.selectedIndex, 1)
-          this.numbers.splice(jsonString.insertIndex, 0, this.text)
-          this.bool = false
-          this.bool1 = false
        }
      })
    }.width('100%').height('100%').padding({ top: 20 }).margin({ top: 20 })

--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-key.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-key.md
 # 按键事件
-按键事件指组件与键盘、遥控器等按键设备交互时触发的事件，适用于所有可交互组件（默认可获焦），例如Button。对于Text，Image等不可获焦组件，可以设置focusable属性为true后使用按键事件。
+按键事件指组件与键盘、遥控器等按键设备交互时触发的事件，适用于所有可获焦组件，例如Button。对于Text，Image等默认不可获焦的组件，可以设置focusable属性为true后使用按键事件。
 >  **说明：**
 >
@@ -10,23 +10,23 @@
 ## 事件
-| 名称                                       | 支持冒泡 | 功能描述                                     |
+| 名称                                                         | 支持冒泡 | 功能描述                                                     |
-| ---------------------------------------- | ---- | ---------------------------------------- |
+| ------------------------------------------------------------ | -------- | ------------------------------------------------------------ |
-| onKeyEvent(event:&nbsp;(event?:&nbsp;KeyEvent)&nbsp;=&gt;&nbsp;void) | 是    | 绑定该方法的组件获焦后，按键动作触发该方法调用，event参数见[KeyEvent](#keyevent对象说明)介绍。 |
+| onKeyEvent(event:&nbsp;(event?:&nbsp;KeyEvent)&nbsp;=&gt;&nbsp;void) | 是       | 绑定该方法的组件获焦后，按键动作触发该回调，event返回值见[KeyEvent](#keyevent对象说明)介绍。 |
 ## KeyEvent对象说明
-| 名称                                    | 类型                                       | 描述                         |
+| 名称                                  | 类型                                        | 描述                                                         |
-| ------------------------------------- | ---------------------------------------- | -------------------------- |
+| ------------------------------------- | ------------------------------------------- | ------------------------------------------------------------ |
-| type                                  | [KeyType](ts-appendix-enums.md#keytype)  | 按键的类型。                     |
+| type                                  | [KeyType](ts-appendix-enums.md#keytype)     | 按键的类型。                                                 |
-| [keyCode](../apis/js-apis-keycode.md) | number                                   | 按键的键码。                     |
+| [keyCode](../apis/js-apis-keycode.md) | number                                      | 按键的键码。                                                 |
-| keyText                               | string                                   | 按键的键值。                     |
+| keyText                               | string                                      | 按键的键值。                                                 |
-| keySource                             | [KeySource](ts-appendix-enums.md#keysource) | 触发当前按键的输入设备类型。             |
+| keySource                             | [KeySource](ts-appendix-enums.md#keysource) | 触发当前按键的输入设备类型。                                 |
-| deviceId                              | number                                   | 触发当前按键的输入设备ID。             |
+| deviceId                              | number                                      | 触发当前按键的输入设备ID。                                   |
-| metaKey                               | number                                   | 按键发生时元键的状态，1表示按压态，0表示未按压态。 |
+| metaKey                               | number                                      | 按键发生时元键（即Windows键盘的WIN键、Mac键盘的Command键）的状态，1表示按压态，0表示未按压态。 |
-| timestamp                             | number                                   | 按键发生时的时间戳。                 |
+| timestamp                             | number                                      | 按键发生时的时间戳。                                         |
-| stopPropagation                       | () => void                               | 阻塞事件冒泡传递。                  |
+| stopPropagation                       | () => void                                  | 阻塞事件冒泡传递。                                           |
 ## 示例
@@ -36,20 +36,20 @@
 @Entry
 @Component
 struct KeyEventExample {
-  @State text: string = ''
+  @State text: string = '';
-  @State eventType: string = ''
+  @State eventType: string = '';
  build() {
    Column() {
-      Button('KeyEvent').backgroundColor(0x2788D9)
+      Button('KeyEvent')
        .onKeyEvent((event: KeyEvent) => {
          if (event.type === KeyType.Down) {
-            this.eventType = 'Down'
+            this.eventType = 'Down';
          }
          if (event.type === KeyType.Up) {
-            this.eventType = 'Up'
+            this.eventType = 'Up';
          }
-          console.info(this.text = 'KeyType:' + this.eventType + '\nkeyCode:' + event.keyCode + '\nkeyText:' + event.keyText)
+          this.text = 'KeyType:' + this.eventType + '\nkeyCode:' + event.keyCode + '\nkeyText:' + event.keyText;
        })
      Text(this.text).padding(15)
    }.height(300).width('100%').padding(35)
@@ -57,4 +57,4 @@ struct KeyEventExample {
 }
 ```
-![zh-cn_image_0000001174264364](figures/zh-cn_image_0000001174264364.gif)
+![keyEvent](figures/keyEvent.png)
\ No newline at end of file
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md
@@ -19,30 +19,36 @@
 ```ts
 // xxx.ets
-import prompt from '@system.prompt'
+import prompt from '@ohos.prompt';
 @Entry
 @Component
 struct AppearExample {
-  @State isShow: boolean = true
+  @State isShow: boolean = true;
-  private myText: string = 'Text for onAppear'
+  @State changeAppear: string = 'Hide Text';
-  private changeAppear: string = 'Hide Text'
+  private myText: string = 'Text for onAppear';
  build() {
    Column() {
      Button(this.changeAppear)
        .onClick(() => {
-          this.isShow = !this.isShow
+          this.isShow = !this.isShow;
-        }).margin(3).backgroundColor(0x2788D9)
+        }).margin(15)
      if (this.isShow) {
-        Text(this.myText)
+        Text(this.myText).fontSize(26).fontWeight(FontWeight.Bold)
          .onAppear(() => {
-            this.changeAppear = 'Show Text'
+            this.changeAppear = 'Hide Text';
-            prompt.showToast({ message: 'The text is shown', duration: 2000 })
+            prompt.showToast({
+              message: 'The text is shown',
+              duration: 2000
+            })
          })
          .onDisAppear(() => {
-            this.changeAppear = 'Hide Text'
+            this.changeAppear = 'Show Text';
-            prompt.showToast({ message: 'The text is hidden', duration: 2000 })
+            prompt.showToast({
+              message: 'The text is hidden',
+              duration: 2000
+            })
          })
      }
    }.padding(30).width('100%')

--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-touch.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-touch.md
 # 触摸事件
-当手指放在组件上、滑动或从组件上移开时触发。
+当手指在组件上按下、滑动、抬起时触发。
 > **说明：**
 >
@@ -11,7 +11,7 @@
 | 名称                                                         | 是否冒泡 | 功能描述                                                     |
 | ------------------------------------------------------------ | -------- | ------------------------------------------------------------ |
-| onTouch(event:&nbsp;(event?:&nbsp;TouchEvent)&nbsp;=&gt;&nbsp;void) | 是       | 触摸动作触发该方法调用，event参数见[TouchEvent](#touchevent对象说明)介绍。 |
+| onTouch(event:&nbsp;(event?:&nbsp;TouchEvent)&nbsp;=&gt;&nbsp;void) | 是       | 手指触摸动作触发该回调，event返回值见[TouchEvent](#touchevent对象说明)介绍。 |
 ## TouchEvent对象说明
@@ -23,8 +23,8 @@
 | changedTouches      | Array&lt;[TouchObject](#touchobject对象说明)&gt; | 当前发生变化的手指信息。 |
 | stopPropagation      | () => void | 阻塞事件冒泡。 |
 | timestamp<sup>8+</sup> | number | 事件时间戳。触发事件时距离系统启动的时间间隔，单位纳秒。 |
-| target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md) | 触发手势事件的元素对象显示区域。 |
+| target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md\#eventtarget8对象说明) | 触发触发手势事件的元素对象显示区域。 |
-| source<sup>8+</sup> | [SourceType](ts-gesture-settings.md) | 事件输入设备。 |
+| source<sup>8+</sup> | [SourceType](ts-gesture-settings.md\#sourcetype枚举说明) | 事件输入设备。 |
 ## TouchObject对象说明
@@ -45,29 +45,45 @@
 @Entry
 @Component
 struct TouchExample {
-  @State text: string = ''
+  @State text: string = '';
-  @State eventType: string = ''
+  @State eventType: string = '';
  build() {
-    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
+    Column() {
-      Button('Touch').backgroundColor(0x2788D9).height(40).width(80)
+      Button('Touch').height(40).width(100)
        .onTouch((event: TouchEvent) => {
          if (event.type === TouchType.Down) {
-            this.eventType = 'Down'
+            this.eventType = 'Down';
          }
          if (event.type === TouchType.Up) {
-            this.eventType = 'Up'
+            this.eventType = 'Up';
          }
          if (event.type === TouchType.Move) {
-            this.eventType = 'Move'
+            this.eventType = 'Move';
          }
-          console.info(this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: '
+          this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: '
-          + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\ncomponent globalPos:('
+          + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nComponent globalPos:('
          + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:'
-          + event.target.area.width + '\nheight:' + event.target.area.height)
+          + event.target.area.width + '\nheight:' + event.target.area.height;
+        })
+      Button('Touch').height(50).width(200).margin(20)
+        .onTouch((event: TouchEvent) => {
+          if (event.type === TouchType.Down) {
+            this.eventType = 'Down';
+          }
+          if (event.type === TouchType.Up) {
+            this.eventType = 'Up';
+          }
+          if (event.type === TouchType.Move) {
+            this.eventType = 'Move';
+          }
+          this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: '
+          + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nComponent globalPos:('
+          + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:'
+          + event.target.area.width + '\nheight:' + event.target.area.height;
        })
      Text(this.text)
-    }.height(200).width(350).padding({ left: 35, right: 35, top: 35 })
+    }.width('100%').padding(30)
  }
 }
 ```

--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-focus-event.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-focus-event.md
 # 焦点事件
-焦点事件指页面焦点在组件间移动时触发的事件，组件可使用焦点事件来更改内容。
+焦点事件指页面焦点在可获焦组件间移动时触发的事件，组件可使用焦点事件来处理相关逻辑。
 >  **说明：**
 >
@@ -27,44 +27,52 @@
 @Entry
 @Component
 struct FocusEventExample {
-  @State textOne: string = ''
+  @State oneButtonColor: string = '#FFC0CB';
-  @State textTwo: string = ''
+  @State twoButtonColor: string = '#87CEFA';
-  @State textThree: string = ''
+  @State threeButtonColor: string = '#90EE90';
-  @State oneButtonColor: string = '#FF0000'
-  @State twoButtonColor: string = '#87CEFA'
-  @State threeButtonColor: string = '#90EE90'
  build() {
-    Column({ space:20 }){
+    Column({ space: 20 }) {
-      Button(this.textOne)
+      // 通过外接键盘的上下键可以让焦点在三个按钮间移动，按钮获焦时颜色变化，失焦时变回原背景色
+      Button('First Button')
        .backgroundColor(this.oneButtonColor)
-        .width(260).height(70).fontColor(Color.Black)
+        .width(260)
+        .height(70)
+        .fontColor(Color.Black)
        .focusable(true)
        .onFocus(() => {
-          this.textOne = 'First Button onFocus'
+          this.oneButtonColor = '#FF0000';
-          this.oneButtonColor = '#AFEEEE'
        })
        .onBlur(() => {
-          this.textOne = 'First Button onBlur'
+          this.oneButtonColor = '#FFC0CB';
-          this.oneButtonColor = '#FFC0CB'
        })
-      Button(this.textTwo)
+      Button('Second Button')
        .backgroundColor(this.twoButtonColor)
-        .width(260).height(70).fontColor(Color.Black)
+        .width(260)
+        .height(70)
+        .fontColor(Color.Black)
        .focusable(true)
-      Button(this.textThree)
+        .onFocus(() => {
+          this.twoButtonColor = '#FF0000';
+        })
+        .onBlur(() => {
+          this.twoButtonColor = '#87CEFA';
+        })
+      Button('Third Button')
        .backgroundColor(this.threeButtonColor)
-        .width(260).height(70).fontColor(Color.Black)
+        .width(260)
+        .height(70)
+        .fontColor(Color.Black)
        .focusable(true)
        .onFocus(() => {
-          this.textThree = 'Third Button onFocus'
+          this.threeButtonColor = '#FF0000';
-          this.threeButtonColor = '#AFEEEE'
        })
        .onBlur(() => {
-          this.textThree = 'Third Button onBlur'
+          this.threeButtonColor = '#90EE90';
-          this.threeButtonColor = '#FFC0CB'
        })
-    }.width('100%').margin({ top:20 })
+    }.width('100%').margin({ top: 20 })
  }
 }
 ```
+![focus](figures/focus.png)
\ No newline at end of file
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-mouse-key.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-mouse-key.md
 # 鼠标事件
-在单个动作触发多个事件时，事件的顺序是固定的，鼠标事件默认透传。
+在鼠标的单个动作触发多个事件时，事件的顺序是固定的，鼠标事件默认透传。
 >  **说明：**
 >
@@ -12,23 +12,23 @@
 | 名称                                                         | 支持冒泡 | 描述                                                         |
 | ------------------------------------------------------------ | -------- | ------------------------------------------------------------ |
 | onHover(event:&nbsp;(isHover?:&nbsp;boolean)&nbsp;=&gt;&nbsp;void) | 否       | 鼠标进入或退出组件时触发该回调。<br/>isHover：表示鼠标是否悬浮在组件上，鼠标进入时为true,&nbsp;退出时为false。 |
-| onMouse(event:&nbsp;(event?:&nbsp;MouseEvent)&nbsp;=&gt;&nbsp;void) | 是       | 当前组件被鼠标按键点击时或者鼠标在组件上移动时，触发该回调，event参数包含触发事件时的时间戳、鼠标按键、动作、点击触点在整个屏幕上的坐标和点击触点相对于当前组件的坐标。 |
+| onMouse(event:&nbsp;(event?:&nbsp;MouseEvent)&nbsp;=&gt;&nbsp;void) | 是       | 当前组件被鼠标按键点击时或者鼠标在组件上悬浮移动时，触发该回调，event返回值包含触发事件时的时间戳、鼠标按键、动作、鼠标位置在整个屏幕上的坐标和相对于当前组件的坐标。 |
 ## MouseEvent对象说明
 | 名称      | 属性类型                            | 描述                   |
 | --------- | ------------------------------- | -------------------- |
-| screenX   | number                          | 点击触点相对于应用窗口左上角的x轴坐标。 |
+| screenX   | number                          | 鼠标位置相对于应用窗口左上角的x轴坐标。 |
-| screenY   | number                          | 点击触点相对于应用窗口左上角的y轴坐标。 |
+| screenY   | number                          | 鼠标位置相对于应用窗口左上角的y轴坐标。 |
-| x         | number                          | 点击触点相对于当前组件左上角的x轴坐标。 |
+| x         | number                          | 鼠标位置相对于当前组件左上角的x轴坐标。 |
-| y         | number                          | 点击触点相对于当前组件左上角的y轴坐标。 |
+| y         | number                          | 鼠标位置相对于当前组件左上角的y轴坐标。 |
 | button    | [MouseButton](ts-appendix-enums.md#mousebutton) | 鼠标按键。                |
-| action    | [MouseAction](ts-appendix-enums.md#mouseaction) | 事件动作。                |
+| action    | [MouseAction](ts-appendix-enums.md#mouseaction) | 鼠标动作。              |
 | stopPropagation      | () => void | 阻塞事件冒泡。                         |
 | timestamp<sup>8+</sup> | number | 事件时间戳。触发事件时距离系统启动的时间间隔，单位纳秒。          |
-| target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md) | 触发手势事件的元素对象显示区域。 |
+| target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md\#eventtarget8对象说明) | 触发手势事件的元素对象显示区域。 |
-| source<sup>8+</sup> | [SourceType](ts-gesture-settings.md) | 事件输入设备。           |
+| source<sup>8+</sup> | [SourceType](ts-gesture-settings.md\#sourcetype枚举说明) | 事件输入设备。           |
 ## 示例
@@ -37,31 +37,80 @@
 @Entry
 @Component
 struct MouseEventExample {
-  @State hoverText: string = 'no hover'
+  @State hoverText: string = 'no hover';
-  @State mouseText: string = 'MouseText'
+  @State mouseText: string = '';
-  @State color: Color = Color.Blue
+  @State action: string = '';
+  @State mouseBtn: string = '';
+  @State color: Color = Color.Blue;
  build() {
-    Column({ space:20 }) {
+    Column({ space: 20 }) {
      Button(this.hoverText)
+        .width(180).height(80)
+        .backgroundColor(this.color)
        .onHover((isHover: boolean) => {
+          // 通过onHover事件动态修改按钮在是否有鼠标悬浮时的文本内容与背景颜色
          if (isHover) {
-            this.hoverText = 'on hover'
+            this.hoverText = 'hover';
-            this.color = Color.Pink
+            this.color = Color.Pink;
          } else {
-            this.hoverText = 'no hover'
+            this.hoverText = 'no hover';
-            this.color = Color.Blue
+            this.color = Color.Blue;
          }
        })
-        .backgroundColor(this.color)
      Button('onMouse')
+        .width(180).height(80)
        .onMouse((event: MouseEvent) => {
-          console.log(this.mouseText = 'onMouse:\nButton = ' + event.button + 
+          switch (event.button) {
-          '\nAction = ' + event.action + '\nlocalXY=(' + event.x + ',' + event.y + ')' + 
+            case MouseButton.None:
-          '\nscreenXY=(' + event.screenX + ',' + event.screenY + ')')
+              this.mouseBtn = 'None';
+              break;
+            case MouseButton.Left:
+              this.mouseBtn = 'Left';
+              break;
+            case MouseButton.Right:
+              this.mouseBtn = 'Right';
+              break;
+            case MouseButton.Back:
+              this.mouseBtn = 'Back';
+              break;
+            case MouseButton.Forward:
+              this.mouseBtn = 'Forward';
+              break;
+            case MouseButton.Middle:
+              this.mouseBtn = 'Middle';
+              break;
+          }
+          switch (event.action) {
+            case MouseAction.Hover:
+              this.action = 'Hover';
+              break;
+            case MouseAction.Press:
+              this.action = 'Press';
+              break;
+            case MouseAction.Move:
+              this.action = 'Move';
+              break;
+            case MouseAction.Release:
+              this.action = 'Release';
+              break;
+          }
+          this.mouseText = 'onMouse:\nButton = ' + this.mouseBtn +
+          '\nAction = ' + this.action + '\nXY=(' + event.x + ',' + event.y + ')' +
+          '\nscreenXY=(' + event.screenX + ',' + event.screenY + ')';
        })
      Text(this.mouseText)
-    }.padding({ top: 20 }).width('100%')
+    }.padding({ top: 30 }).width('100%')
  }
 }
 ```
+示意图：
+鼠标悬浮时改变文本内容与背景颜色：
+![mouse](/figures/mouse.png)
+鼠标点击时：
+![mouse1](/figures/mouse1.png)
\ No newline at end of file