diff --git a/en/application-dev/reference/apis/js-apis-commonEvent.md b/en/application-dev/reference/apis/js-apis-commonEvent.md
index 8f93a1e5d0e78f0cc31ccd1758114950a6852662..a2449ab02789b088cd1551abdc47f4afc0222120 100644
--- a/en/application-dev/reference/apis/js-apis-commonEvent.md
+++ b/en/application-dev/reference/apis/js-apis-commonEvent.md
@@ -1,11 +1,14 @@
 # CommonEvent
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
+The **CommonEvent** module provides common event capabilities, including the capabilities to publish, subscribe to, and unsubscribe from common events, as well obtaining and setting the common event result code and result data.
+
+> **NOTE**
+>
 > The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions
+## Common Event List
 
-| Common Event Macro     | Common Event Name         | Subscriber Permissions    |
+| Common Event Macro | Common Event Name | Subscriber Permission |
 | ------------ | ------------------ | ---------------------- |
 | COMMON_EVENT_BOOT_COMPLETED                                  | usual.event.BOOT_COMPLETED                                  | ohos.permission.RECEIVER_STARTUP_COMPLETED                   |
 | COMMON_EVENT_LOCKED_BOOT_COMPLETED                           | usual.event.LOCKED_BOOT_COMPLETED                           | ohos.permission.RECEIVER_STARTUP_COMPLETED                   |
@@ -140,23 +143,29 @@
 | COMMON_EVENT_USB_DEVICE_DETACHED                             | usual.event.hardware.usb.action.USB_DEVICE_DETACHED         | -                                                          |
 | COMMON_EVENT_USB_ACCESSORY_ATTACHED                          | usual.event.hardware.usb.action.USB_ACCESSORY_ATTACHED      | -                                                          |
 | COMMON_EVENT_USB_ACCESSORY_DETACHED                          | usual.event.hardware.usb.action.USB_ACCESSORY_DETACHED      | -                                                          |
-| COMMON_EVENT_DISK_REMOVED                                    | usual.event.data.DISK_REMOVED                               | ohos.permission.WRITE_USER_STORAGE or ohos.permission.READ_USER_STORAGE|
-| COMMON_EVENT_DISK_UNMOUNTED                                  | usual.event.data.DISK_UNMOUNTED                             | ohos.permission.WRITE_USER_STORAGE or ohos.permission.READ_USER_STORAGE|
-| COMMON_EVENT_DISK_MOUNTED                                    | usual.event.data.DISK_MOUNTED                               | ohos.permission.WRITE_USER_STORAGE or ohos.permission.READ_USER_STORAGE|
-| COMMON_EVENT_DISK_BAD_REMOVAL                                | usual.event.data.DISK_BAD_REMOVAL                           | ohos.permission.WRITE_USER_STORAGE or ohos.permission.READ_USER_STORAGE|
-| COMMON_EVENT_DISK_UNMOUNTABLE                                | usual.event.data.DISK_UNMOUNTABLE                           | ohos.permission.WRITE_USER_STORAGE or ohos.permission.READ_USER_STORAGE|
-| COMMON_EVENT_DISK_EJECT                                      | usual.event.data.DISK_EJECT                                 | ohos.permission.WRITE_USER_STORAGE or ohos.permission.READ_USER_STORAGE|
-| COMMON_EVENT_VOLUME_REMOVED                                  | usual.event.data.VOLUME_REMOVED                             | ohos.permission.WRITE_USER_STORAGE or ohos.permission.READ_USER_STORAGE|
-| COMMON_EVENT_VOLUME_UNMOUNTED                                | usual.event.data.VOLUME_UNMOUNTED                           | ohos.permission.WRITE_USER_STORAGE or ohos.permission.READ_USER_STORAGE|
-| COMMON_EVENT_VOLUME_MOUNTED                                  | usual.event.data.VOLUME_MOUNTED                             | ohos.permission.WRITE_USER_STORAGE or ohos.permission.READ_USER_STORAGE|
-| COMMON_EVENT_VOLUME_BAD_REMOVAL                              | usual.event.data.VOLUME_BAD_REMOVAL                         | ohos.permission.WRITE_USER_STORAGE or ohos.permission.READ_USER_STORAGE|
-| COMMON_EVENT_VOLUME_EJECT                                    | usual.event.data.VOLUME_EJECT                               | ohos.permission.WRITE_USER_STORAGE or ohos.permission.READ_USER_STORAGE|
+| COMMON_EVENT_DISK_REMOVED                                    | usual.event.data.DISK_REMOVED                               | ohos.permission.WRITE_USER_STORAGE or ohos.permission.READ_USER_STORAGE |
+| COMMON_EVENT_DISK_UNMOUNTED                                  | usual.event.data.DISK_UNMOUNTED                             | ohos.permission.WRITE_USER_STORAGE or ohos.permission.READ_USER_STORAGE |
+| COMMON_EVENT_DISK_MOUNTED                                    | usual.event.data.DISK_MOUNTED                               | ohos.permission.WRITE_USER_STORAGE or ohos.permission.READ_USER_STORAGE |
+| COMMON_EVENT_DISK_BAD_REMOVAL                                | usual.event.data.DISK_BAD_REMOVAL                           | ohos.permission.WRITE_USER_STORAGE or ohos.permission.READ_USER_STORAGE |
+| COMMON_EVENT_DISK_UNMOUNTABLE                                | usual.event.data.DISK_UNMOUNTABLE                           | ohos.permission.WRITE_USER_STORAGE or ohos.permission.READ_USER_STORAGE |
+| COMMON_EVENT_DISK_EJECT                                      | usual.event.data.DISK_EJECT                                 | ohos.permission.WRITE_USER_STORAGE or ohos.permission.READ_USER_STORAGE |
+| COMMON_EVENT_VOLUME_REMOVED                                  | usual.event.data.VOLUME_REMOVED                             | ohos.permission.WRITE_USER_STORAGE or ohos.permission.READ_USER_STORAGE |
+| COMMON_EVENT_VOLUME_REMOVED<sup>9+<sup>                      | usual.event.data.VOLUME_REMOVED                             | ohos.permission.WRITE_USER_STORAGE or ohos.permission.READ_USER_STORAGE |
+| COMMON_EVENT_VOLUME_UNMOUNTED<sup>9+<sup>                    | usual.event.data.VOLUME_UNMOUNTED                           | ohos.permission.WRITE_USER_STORAGE or ohos.permission.READ_USER_STORAGE |
+| COMMON_EVENT_VOLUME_MOUNTED<sup>9+<sup>                      | usual.event.data.VOLUME_MOUNTED                             | ohos.permission.WRITE_USER_STORAGE or ohos.permission.READ_USER_STORAGE |
+| COMMON_EVENT_VOLUME_BAD_REMOVAL<sup>9+<sup>                  | usual.event.data.VOLUME_BAD_REMOVAL                         | ohos.permission.WRITE_USER_STORAGE or ohos.permission.READ_USER_STORAGE |
+| COMMON_EVENT_VOLUME_EJECT<sup>9+<sup>                        | usual.event.data.VOLUME_EJECT                               | ohos.permission.WRITE_USER_STORAGE or ohos.permission.READ_USER_STORAGE |
+| COMMON_EVENT_VOLUME_UNMOUNTED                                | usual.event.data.VOLUME_UNMOUNTED                           | ohos.permission.WRITE_USER_STORAGE or ohos.permission.READ_USER_STORAGE |
+| COMMON_EVENT_VOLUME_MOUNTED                                  | usual.event.data.VOLUME_MOUNTED                             | ohos.permission.WRITE_USER_STORAGE or ohos.permission.READ_USER_STORAGE |
+| COMMON_EVENT_VOLUME_BAD_REMOVAL                              | usual.event.data.VOLUME_BAD_REMOVAL                         | ohos.permission.WRITE_USER_STORAGE or ohos.permission.READ_USER_STORAGE |
+| COMMON_EVENT_VOLUME_EJECT                                    | usual.event.data.VOLUME_EJECT                               | ohos.permission.WRITE_USER_STORAGE or ohos.permission.READ_USER_STORAGE |
 | COMMON_EVENT_VISIBLE_ACCOUNTS_UPDATED                        | usual.event.data.VISIBLE_ACCOUNTS_UPDATED                   | ohos.permission.GET_APP_ACCOUNTS                             |
 | COMMON_EVENT_ACCOUNT_DELETED                                 | usual.event.data.ACCOUNT_DELETED                            | ohos.permission.INTERACT_ACROSS_LOCAL_ACCOUNTS               |
 | COMMON_EVENT_FOUNDATION_READY                                | usual.event.data.FOUNDATION_READY                           | ohos.permission.RECEIVER_STARTUP_COMPLETED                   |
 | COMMON_EVENT_AIRPLANE_MODE_CHANGED                           | usual.event.AIRPLANE_MODE                                   | -                                                          |
 | COMMON_EVENT_SPLIT_SCREEN                                    | usual.event.SPLIT_SCREEN                                    | ohos.permission.RECEIVER_SPLIT_SCREEN                        |
 
+
 ## Modules to Import
 
 ```js
@@ -167,16 +176,16 @@ import CommonEvent from '@ohos.commonEvent';
 
 publish(event: string, callback: AsyncCallback\<void>): void
 
-Publishes a common event. This API uses a callback to return the result.
+Publishes a common event. This API uses an asynchronous callback to return the result.
 
 **System capability**: SystemCapability.Notification.CommonEvent
 
 **Parameters**
 
-| Name    | Readable/Writable| Type                | Mandatory| Description                  |
-| -------- | -------- | -------------------- | ---- | ---------------------- |
-| event    | Read only    | string               | Yes  | Name of the common event to publish.|
-| callback | Read only    | AsyncCallback\<void> | Yes  | Callback used to return the result.|
+| Name    | Type                | Mandatory| Description                  |
+| -------- | -------------------- | ---- | ---------------------- |
+| event    | string               | Yes  | Name of the common event to publish.|
+| callback | AsyncCallback\<void> | Yes  | Callback used to return the result.|
 
 **Example**
 
@@ -200,17 +209,17 @@ CommonEvent.publish("event", PublishCallBack);
 
 publish(event: string, options: CommonEventPublishData, callback: AsyncCallback\<void>): void
 
-Publishes a common event with given attributes. This API uses a callback to return the result.
+Publishes a common event with given attributes. This API uses an asynchronous callback to return the result.
 
 **System capability**: SystemCapability.Notification.CommonEvent
 
 **Parameters**
 
-| Name    | Readable/Writable| Type                  | Mandatory| Description                  |
-| -------- | -------- | ---------------------- | ---- | ---------------------- |
-| event    | Read only    | string                 | Yes  | Name of the common event to publish. |
-| options  | Read only    | [CommonEventPublishData](#commoneventpublishdata) | Yes  | Attributes of the common event to publish.|
-| callback | Read only    | AsyncCallback\<void>   | Yes  | Callback used to return the result. |
+| Name    | Type                  | Mandatory| Description                  |
+| -------- | ---------------------- | ---- | ---------------------- |
+| event    | string                 | Yes  | Name of the common event to publish. |
+| options  | [CommonEventPublishData](#commoneventpublishdata) | Yes  | Attributes of the common event to publish.|
+| callback | AsyncCallback\<void>  | Yes  | Callback used to return the result. |
 
 **Example**
 
@@ -218,8 +227,8 @@ Publishes a common event with given attributes. This API uses a callback to retu
 ```js
 // Attributes of a common event.
 var options = {
-	code: 0,			 // Result code of the common event
-	data: "initial data";// Result data of the common event
+	code: 0,			 // Result code of the common event.
+	data: "initial data";// Result data of the common event.
 	isOrdered: true	 // The common event is an ordered one.
 }
 
@@ -242,17 +251,19 @@ CommonEvent.publish("event", options, PublishCallBack);
 
 publishAsUser(event: string, userId: number, callback: AsyncCallback\<void>): void
 
-Publishes a common event to a specific user. This API uses a callback to return the result.
+Publishes a common event to a specific user. This API uses an asynchronous callback to return the result.
 
 **System capability**: SystemCapability.Notification.CommonEvent
 
+**System API**: This is a system API and cannot be called by third-party applications.
+
 **Parameters**
 
-| Name    | Readable/Writable| Type                | Mandatory| Description                              |
-| -------- | -------- | -------------------- | ---- | ---------------------------------- |
-| event    | Read only    | string               | Yes  | Name of the common event to publish.            |
-| userId   | Read only    | number               | Yes  | User ID.|
-| callback | Read only    | AsyncCallback\<void> | Yes  | Callback used to return the result.            |
+| Name    | Type                | Mandatory| Description                              |
+| -------- | -------------------- | ---- | ---------------------------------- |
+| event    | string               | Yes  | Name of the common event to publish.            |
+| userId   | number               | Yes  | User ID.|
+| callback | AsyncCallback\<void> | Yes  | Callback used to return the result.            |
 
 **Example**
 
@@ -279,18 +290,20 @@ CommonEvent.publishAsUser("event", userId, PublishAsUserCallBack);
 
 publishAsUser(event: string, userId: number, options: CommonEventPublishData, callback: AsyncCallback\<void>): void
 
-Publishes a common event with given attributes to a specific user. This API uses a callback to return the result.
+Publishes a common event with given attributes to a specific user. This API uses an asynchronous callback to return the result.
 
 **System capability**: SystemCapability.Notification.CommonEvent
 
+**System API**: This is a system API and cannot be called by third-party applications.
+
 **Parameters**
 
-| Name    | Readable/Writable| Type                  | Mandatory| Description                  |
-| -------- | -------- | ---------------------- | ---- | ---------------------- |
-| event    | Read only    | string                 | Yes  | Name of the common event to publish. |
-| userId | Read only| number | Yes| User ID.|
-| options  | Read only    | [CommonEventPublishData](#commoneventpublishdata) | Yes  | Attributes of the common event to publish.|
-| callback | Read only    | AsyncCallback\<void>   | Yes  | Callback used to return the result. |
+| Name    | Type                  | Mandatory| Description                  |
+| -------- | ---------------------- | ---- | ---------------------- |
+| event    | string                 | Yes  | Name of the common event to publish. |
+| userId   | number | Yes| User ID.|
+| options  | [CommonEventPublishData](#commoneventpublishdata) | Yes  | Attributes of the common event to publish.|
+| callback | AsyncCallback\<void>   | Yes  | Callback used to return the result. |
 
 **Example**
 
@@ -298,8 +311,8 @@ Publishes a common event with given attributes to a specific user. This API uses
 ```js
 // Attributes of a common event.
 var options = {
-	code: 0,			 // Result code of the common event
-	data: "initial data";// Result data of the common event
+	code: 0,			 // Result code of the common event.
+	data: "initial data",// Result data of the common event
 }
 
 // Callback for common event publication
@@ -324,16 +337,16 @@ CommonEvent.publishAsUser("event", userId, options, PublishAsUserCallBack);
 
 createSubscriber(subscribeInfo: CommonEventSubscribeInfo, callback: AsyncCallback\<CommonEventSubscriber>): void
 
-Creates a subscriber. This API uses a callback to return the result.
+Creates a subscriber. This API uses an asynchronous callback to return the result.
 
 **System capability**: SystemCapability.Notification.CommonEvent
 
 **Parameters**
 
-| Name         | Readable/Writable| Type                                                        | Mandatory| Description                      |
-| ------------- | -------- | ------------------------------------------------------------ | ---- | -------------------------- |
-| subscribeInfo | Read only    | [CommonEventSubscribeInfo](#commoneventsubscribeinfo)        | Yes  | Subscriber information.            |
-| callback      | Read only    | AsyncCallback\<[CommonEventSubscriber](#commoneventsubscriber)> | Yes  | Callback used to return the result.|
+| Name         | Type                                                        | Mandatory| Description                      |
+| ------------- | ------------------------------------------------------------ | ---- | -------------------------- |
+| subscribeInfo | [CommonEventSubscribeInfo](#commoneventsubscribeinfo)        | Yes  | Subscriber information.            |
+| callback      | AsyncCallback\<[CommonEventSubscriber](#commoneventsubscriber)> | Yes  | Callback used to return the result.|
 
 **Example**
 
@@ -372,9 +385,9 @@ Creates a subscriber. This API uses a promise to return the result.
 
 **Parameters**
 
-| Name         | Readable/Writable| Type                                                 | Mandatory| Description          |
-| ------------- | -------- | ----------------------------------------------------- | ---- | -------------- |
-| subscribeInfo | Read only    | [CommonEventSubscribeInfo](#commoneventsubscribeinfo) | Yes  | Subscriber information.|
+| Name         | Type                                                 | Mandatory| Description          |
+| ------------- | ----------------------------------------------------- | ---- | -------------- |
+| subscribeInfo | [CommonEventSubscribeInfo](#commoneventsubscribeinfo) | Yes  | Subscriber information.|
 
 **Return value**
 | Type                                                     | Description            |
@@ -406,16 +419,16 @@ CommonEvent.createSubscriber(subscribeInfo).then((commonEventSubscriber) => {
 
 subscribe(subscriber: CommonEventSubscriber, callback: AsyncCallback\<CommonEventData>): void
 
-Subscribes to common events. This API uses a callback to return the result.
+Subscribes to common events. This API uses an asynchronous callback to return the result.
 
 **System capability**: SystemCapability.Notification.CommonEvent
 
 **Parameters**
 
-| Name      | Readable/Writable| Type                                               | Mandatory| Description                            |
-| ---------- | -------- | --------------------------------------------------- | ---- | -------------------------------- |
-| subscriber | Read only    | [CommonEventSubscriber](#commoneventsubscriber)     | Yes  | Subscriber object.                |
-| callback   | Read only    | AsyncCallback\<[CommonEventData](#commoneventdata)> | Yes  | Callback used to return the result.|
+| Name      | Type                                               | Mandatory| Description                            |
+| ---------- | ---------------------------------------------------- | ---- | -------------------------------- |
+| subscriber | [CommonEventSubscriber](#commoneventsubscriber)     | Yes  | Subscriber object.                |
+| callback   | AsyncCallback\<[CommonEventData](#commoneventdata)> | Yes  | Callback used to return the result.|
 
 **Example**
 
@@ -458,16 +471,16 @@ CommonEvent.createSubscriber(subscribeInfo, CreateSubscriberCallBack);
 
 unsubscribe(subscriber: CommonEventSubscriber, callback?: AsyncCallback\<void>): void
 
-Unsubscribes from common events. This API uses a callback to return the result.
+Unsubscribes from common events. This API uses an asynchronous callback to return the result.
 
 **System capability**: SystemCapability.Notification.CommonEvent
 
 **Parameters**
 
-| Name      | Readable/Writable| Type                                            | Mandatory| Description                    |
-| ---------- | -------- | ----------------------------------------------- | ---- | ------------------------ |
-| subscriber | Read only    | [CommonEventSubscriber](#commoneventsubscriber) | Yes  | Subscriber object.        |
-| callback   | Read only    | AsyncCallback\<void>                            | No  | Callback used to return the result.|
+| Name      | Type                                            | Mandatory| Description                    |
+| ---------- | ----------------------------------------------- | ---- | ------------------------ |
+| subscriber | [CommonEventSubscriber](#commoneventsubscriber) | Yes  | Subscriber object.        |
+| callback   | AsyncCallback\<void>                            | No  | Callback used to return the result.|
 
 **Example**
 
@@ -522,7 +535,7 @@ CommonEvent.unsubscribe(subscriber, UnsubscribeCallBack);
 
 getCode(callback: AsyncCallback\<number>): void
 
-Obtains the result code of this common event. This API uses a callback to return the result.
+Obtains the result code of this common event. This API uses an asynchronous callback to return the result.
 
 **System capability**: SystemCapability.Notification.CommonEvent
 
@@ -560,7 +573,7 @@ Obtains the result code of this common event. This API uses a promise to return
 
 | Type            | Description                |
 | ---------------- | -------------------- |
-| Promise\<number> | Promise used to return the result code.|
+| Promise\<number> | Promise used to return the result.|
 
 **Example**
 
@@ -578,7 +591,7 @@ subscriber.getCode().then((Code) => {
 
 setCode(code: number, callback: AsyncCallback\<void>): void
 
-Sets the result code for this common event. This API uses a callback to return the result.
+Sets the result code for this common event. This API uses an asynchronous callback to return the result.
 
 **System capability**: SystemCapability.Notification.CommonEvent
 
@@ -623,7 +636,7 @@ Sets the result code for this common event. This API uses a promise to return th
 
 | Type            | Description                |
 | ---------------- | -------------------- |
-| Promise\<void>   | Promise used to return the result code.|
+| Promise\<void>   | Promise used to return the result.|
 
 **Example**
 
@@ -641,7 +654,7 @@ subscriber.setCode(1).then(() => {
 
 getData(callback: AsyncCallback\<string>): void
 
-Obtains the result data of this common event. This API uses a callback to return the result.
+Obtains the result data of this common event. This API uses an asynchronous callback to return the result.
 
 **System capability**: SystemCapability.Notification.CommonEvent
 
@@ -697,7 +710,7 @@ subscriber.getData().then((Data) => {
 
 setData(data: string, callback: AsyncCallback\<void>): void
 
-Sets the result data for this common event. This API uses a callback to return the result.
+Sets the result data for this common event. This API uses an asynchronous callback to return the result.
 
 **System capability**: SystemCapability.Notification.CommonEvent
 
@@ -742,7 +755,7 @@ Sets the result data for this common event. This API uses a promise to return th
 
 | Type            | Description                |
 | ---------------- | -------------------- |
-| Promise\<void>   | Promise used to return the result data.|
+| Promise\<void>   | Promise used to return the result.|
 
 **Example**
 
@@ -760,7 +773,7 @@ subscriber.setData("publish_data_changed").then(() => {
 
 setCodeAndData(code: number, data: string, callback:AsyncCallback\<void>): void
 
-Sets the result code and result data for this common event. This API uses a callback to return the result.
+Sets the result code and result data for this common event. This API uses an asynchronous callback to return the result.
 
 **System capability**: SystemCapability.Notification.CommonEvent
 
@@ -825,7 +838,7 @@ subscriber.setCodeAndData(1, "publish_data_changed").then(() => {
 
 isOrderedCommonEvent(callback: AsyncCallback\<boolean>): void
 
-Checks whether this common event is an ordered one. This API uses a callback to return the result.
+Checks whether this common event is an ordered one. This API uses an asynchronous callback to return the result.
 
 **System capability**: SystemCapability.Notification.CommonEvent
 
@@ -881,7 +894,7 @@ subscriber.isOrderedCommonEvent().then((isOrdered) => {
 
 isStickyCommonEvent(callback: AsyncCallback\<boolean>): void
 
-Checks whether this common event is a sticky one. This API uses a callback to return the result.
+Checks whether this common event is a sticky one. This API uses an asynchronous callback to return the result.
 
 **System capability**: SystemCapability.Notification.CommonEvent
 
@@ -937,7 +950,7 @@ subscriber.isStickyCommonEvent().then((isSticky) => {
 
 abortCommonEvent(callback: AsyncCallback\<void>): void
 
-Aborts this common event. After the abort, the common event is not sent to the next subscriber. This API takes effect only for ordered common events. It uses a callback to return the result.
+Aborts this common event. After the abort, the common event is not sent to the next subscriber. This API takes effect only for ordered common events. It uses an asynchronous callback to return the result.
 
 **System capability**: SystemCapability.Notification.CommonEvent
 
@@ -993,7 +1006,7 @@ subscriber.abortCommonEvent().then(() => {
 
 clearAbortCommonEvent(callback: AsyncCallback\<void>): void
 
-Clears the aborted state of this common event. This API takes effect only for ordered common events. It uses a callback to return the result.
+Clears the aborted state of this common event. This API takes effect only for ordered common events. It uses an asynchronous callback to return the result.
 
 **System capability**: SystemCapability.Notification.CommonEvent
 
@@ -1049,7 +1062,7 @@ subscriber.clearAbortCommonEvent().then(() => {
 
 getAbortCommonEvent(callback: AsyncCallback\<boolean>): void
 
-Checks whether this common event is in the aborted state. This API takes effect only for ordered common events. It uses a callback to return the result.
+Checks whether this common event is in the aborted state. This API takes effect only for ordered common events. It uses an asynchronous callback to return the result.
 
 **System capability**: SystemCapability.Notification.CommonEvent
 
@@ -1105,7 +1118,7 @@ subscriber.getAbortCommonEvent().then((AbortCommonEvent) => {
 
 getSubscribeInfo(callback: AsyncCallback\<CommonEventSubscribeInfo>): void
 
-Obtains the subscriber information. This API uses a callback to return the result.
+Obtains the subscriber information. This API uses an asynchronous callback to return the result.
 
 **System capability**: SystemCapability.Notification.CommonEvent
 
@@ -1157,6 +1170,58 @@ subscriber.getSubscribeInfo().then((SubscribeInfo) => {
 });
 ```
 
+### finishCommonEvent<sup>9+</sup>
+
+finishCommonEvent(callback: AsyncCallback\<void\>): void
+
+Finishes this ordered common event. This API uses an asynchronous callback to return the result.
+
+**System capability**: SystemCapability.Notification.CommonEvent
+
+**Parameters**
+
+| Name  | Type                 | Mandatory| Description                             |
+| -------- | -------------------- | ---- | -------------------------------- |
+| callback | AsyncCallback\<void> | Yes  | Callback returned after the ordered common event is finished.|
+
+**Example**
+
+```js
+var subscriber; // Subscriber object successfully created.
+
+function finishCommonEventCallback() {
+    console.log('finishCommonEvent');
+}
+
+subscriber.finishCommonEvent(finishCommonEventCallback);
+```
+
+### finishCommonEvent<sup>9+</sup>
+
+finishCommonEvent(): Promise\<void\>
+
+Finishes this ordered common event. This API uses a promise to return the result.
+
+**System capability**: SystemCapability.Notification.CommonEvent
+
+**Return value**
+
+| Type            | Description                |
+| ---------------- | -------------------- |
+| Promise\<void>   | Promise used to return the result.|
+
+**Example**
+
+```js
+var subscriber;	// Subscriber object successfully created.
+
+subscriber.finishCommonEvent().then(() => {
+    console.log('finishCommonEvent');
+}).catch(() => {
+    console.log('finishCommonEvent failed');
+})
+```
+
 ## CommonEventData
 
 **System capability**: SystemCapability.Notification.CommonEvent
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174104404.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174104404.png
new file mode 100644
index 0000000000000000000000000000000000000000..e370a44cf043fc34bd8891f57faad2cd2ca05707
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174104404.png differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174264376.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174264376.png
new file mode 100644
index 0000000000000000000000000000000000000000..dfcb0c5e259b3f8d7375c21712249c1e847edd67
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174264376.png differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174422914.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174422914.png
new file mode 100644
index 0000000000000000000000000000000000000000..bc28f5056c679e189543c8ad6fba67fb56db7655
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174422914.png differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174582864.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174582864.png
new file mode 100644
index 0000000000000000000000000000000000000000..b54dbc2391d1a8f16312dd02dc3d65a35ea2626f
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174582864.png differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174582866.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174582866.png
new file mode 100644
index 0000000000000000000000000000000000000000..56d32d4cd371c5374b133cb81c9c077aaf7b110d
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174582866.png differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219662661.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219662661.png
new file mode 100644
index 0000000000000000000000000000000000000000..9c43caf5fdfd466eafc37b793f509a6bde2b885d
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219662661.png differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219662663.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219662663.png
new file mode 100644
index 0000000000000000000000000000000000000000..5c5e360f249a2002ba68ad9b94bd7f66f5d6aab1
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219662663.png differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219662665.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219662665.png
new file mode 100644
index 0000000000000000000000000000000000000000..309d1c46f8bc396df5eaed381a5ffa2f0389d602
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219662665.png differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219744201.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219744201.png
new file mode 100644
index 0000000000000000000000000000000000000000..0d22570503febc7a7dcba0d1e870f49f32fe489a
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219744201.png differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219864153.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219864153.png
new file mode 100644
index 0000000000000000000000000000000000000000..58293d5e874f2aa36ecaf7282ca9e4736318092f
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219864153.png differ
diff --git a/en/application-dev/reference/arkui-ts/ts-animatorproperty.md b/en/application-dev/reference/arkui-ts/ts-animatorproperty.md
index c170c6221eb9cd17f43117b1f4a0ca82224a8f23..a5e319adf7338b080bffc01d944805768a5b4f5a 100644
--- a/en/application-dev/reference/arkui-ts/ts-animatorproperty.md
+++ b/en/application-dev/reference/arkui-ts/ts-animatorproperty.md
@@ -1,44 +1,26 @@
-# AnimatorProperty
+# Property Animator
 
+You can create a property animator to animate the universal attributes of a component.
 
-> **NOTE**<br>
-> This animation is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+> **NOTE**
+>
+> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-When the universal attributes of a component change, you can create an **AnimatorProperty** for gradient to improve user experience.
 
-
-| Name | Type | Default Value | Description |
-| -------- | -------- | -------- | -------- |
-| duration | number | 1000 | Animation duration, in ms. The default duration is 1000 ms. |
-| curve | Curve | Curve.Linear | Animation curve. The default curve is linear. |
-| delay | number | 0 | Delay of animation playback, in ms. By default, the playback is not delayed. |
-| iterations | number | 1 | Number of times that the animation is played. By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times. |
-| playMode | [PlayMode](ts-appendix-enums.md#playmode-enums) | PlayMode.Normal | Playback mode. By default, the animation is played from the beginning after the playback is complete. |
-
-
-- Curve enums
-    | Name | Description |
-  | -------- | -------- |
-  | Linear | The animation speed keeps unchanged. |
-  | Ease | The animation starts at a low speed and then accelerates. It slows down before the animation ends. The cubic-bezier curve (0.25, 0.1, 0.25, 1.0) is used. |
-  | EaseIn | The animation starts at a low speed. The cubic-bezier curve (0.42, 0.0, 1.0, 1.0) is used. |
-  | EaseOut | The animation ends at a low speed. The cubic-bezier curve (0.0, 0.0, 0.58, 1.0) is used. |
-  | EaseInOut | The animation starts and ends at a low speed. The cubic-bezier curve (0.42, 0.0, 0.58, 1.0) is used. |
-  | FastOutSlowIn | The animation uses the standard cubic-bezier curve (0.4, 0.0, 0.2, 1.0). |
-  | LinearOutSlowIn | The animation uses the deceleration cubic-bezier curve (0.0, 0.0, 0.2, 1.0). |
-  | FastOutLinearIn | The animation uses the acceleration cubic-bezier curve (0.4, 0.0, 1.0, 1.0). |
-  | ExtremeDeceleration | The animation uses the extreme deceleration cubic-bezier curve (0.0, 0.0, 0.0, 1.0). |
-  | Sharp | The animation uses the sharp cubic-bezier curve (0.33, 0.0, 0.67, 1.0). |
-  | Rhythm | The animation uses the rhythm cubic-bezier curve (0.7, 0.0, 0.2, 1.0). |
-  | Smooth | The animation uses the smooth cubic-bezier curve (0.4, 0.0, 0.4, 1.0). |
-  | Friction | Damping curve. The cubic-bezier curve (0.2, 0.0, 0.2, 1.0) is used. |
+| Name        | Type                                    | Default Value            | Description                     |
+| ---------- | ---------------------------------------- | --------------- | ----------------------- |
+| duration   | number                                   | 1000            | Animation duration, in ms. The default duration is 1000 ms.   |
+| curve      | [Curve](ts-appendix-enums.md#curve)        | Curve.Linear    | Animation curve. The default curve is linear.               |
+| delay      | number                                   | 0               | Delay of animation playback, in ms. By default, the playback is not delayed.         |
+| iterations | number                                   | 1               | Number of times that the animation is played. By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times.  |
+| playMode   | [PlayMode](ts-appendix-enums.md#playmode) | PlayMode.Normal | Animation playback mode. By default, the animation is played from the beginning after the playback is complete.|
 
 
 ## Example
 
-
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct AttrAnimationExample {
@@ -65,8 +47,8 @@ struct AttrAnimationExample {
           curve: Curve.EaseOut, // Animation curve
           delay: 500, // Animation delay
           iterations: 1, // Number of playback times
-          playMode: PlayMode.Normal // Animation mode
-        }) // Animation configuration for the width and height attributes of the Button component
+          playMode: PlayMode.Normal // Animation playback mode
+        }) // Animation configuration for the width and height attributes of the <Button> component
     }.width('100%').margin({ top: 5 })
   }
 }
diff --git a/en/application-dev/reference/arkui-ts/ts-appendix-enums.md b/en/application-dev/reference/arkui-ts/ts-appendix-enums.md
index 8bb7437c05ac703286d85f0a87c8d9b5d85fa890..178b4f1763fa27e1bbf0f75d46c3c5029cbfcbe6 100644
--- a/en/application-dev/reference/arkui-ts/ts-appendix-enums.md
+++ b/en/application-dev/reference/arkui-ts/ts-appendix-enums.md
@@ -1,103 +1,405 @@
 # Built-in Enums
 
+## Color
 
-## Alignment Enums
+| Color                | Value  | Illustration                                                    |
+| ------------------------ | -------- | ------------------------------------------------------------ |
+| Black                    | 0x000000 | ![en-us_image_0000001219864153](figures/en-us_image_0000001219864153.png) |
+| Blue                     | 0x0000ff | ![en-us_image_0000001174104404](figures/en-us_image_0000001174104404.png) |
+| Brown                    | 0xa52a2a | ![en-us_image_0000001219744201](figures/en-us_image_0000001219744201.png) |
+| Gray                     | 0x808080 | ![en-us_image_0000001174264376](figures/en-us_image_0000001174264376.png) |
+| Green                    | 0x008000 | ![en-us_image_0000001174422914](figures/en-us_image_0000001174422914.png) |
+| Orange                   | 0xffa500 | ![en-us_image_0000001219662661](figures/en-us_image_0000001219662661.png) |
+| Pink                     | 0xffc0cb | ![en-us_image_0000001219662663](figures/en-us_image_0000001219662663.png) |
+| Red                      | 0xff0000 | ![en-us_image_0000001219662665](figures/en-us_image_0000001219662665.png) |
+| White                    | 0xffffff | ![en-us_image_0000001174582866](figures/en-us_image_0000001174582866.png) |
+| Yellow                   | 0xffff00 | ![en-us_image_0000001174582864](figures/en-us_image_0000001174582864.png) |
+| Grey     | 0x808080 | ![en-us_image_0000001174264376](figures/en-us_image_0000001174264376.png) |
 
-  | Name | Description | 
-| -------- | -------- |
-| TopStart | Top start. | 
-| Top | Horizontally centered on the top. | 
-| TopEnd | Top end. | 
-| Start | Vertically centered start. | 
-| Center | Horizontally and vertically centered. | 
-| End | Vertically centered end. | 
-| BottomStart | Bottom start. | 
-| Bottom | Horizontally centered on the bottom. | 
-| BottomEnd | Bottom end. | 
+## ImageFit
 
+| Name     | Description                                                        |
+| --------- | ------------------------------------------------------------ |
+| Contain   | The image is scaled with its aspect ratio retained for the content to be completely displayed within the display boundaries.  |
+| Cover     | The image is scaled with its aspect ratio retained for both sides to be greater than or equal to the display boundaries.|
+| Auto      | The image is scaled automatically to fit the display area.                                               |
+| Fill      | The image is scaled to fill the display area, and its aspect ratio is not retained.            |
+| ScaleDown | The image is displayed with its aspect ratio retained, in a size smaller than or equal to the original size.                      |
+| None      | The original size is retained.                                          |
 
-## Axis Enums
+## BorderStyle
 
-  | Name | Description | 
-| -------- | -------- |
-| Vertical | Vertical direction. | 
-| Horizontal | Horizontal direction. | 
+| Name  | Description                                           |
+| ------ | ----------------------------------------------- |
+| Dotted | Dotted border. The radius of a dot is half of **borderWidth**.|
+| Dashed | Dashed border.                     |
+| Solid  | Solid border.                               |
 
+## LineJoinStyle
 
-## ItemAlign Enums
+| Name | Description                |
+| ----- | -------------------- |
+| Bevel | Bevel is used to connect paths.|
+| Miter | Miter is used to connect paths.|
+| Round | Round is used to connect paths.|
 
-  | Name | Description | 
-| -------- | -------- |
-| Auto | The default configuration in the Flex container is used. | 
-| Start | The elements are in the Flex container, top-aligned in the cross-axis direction | 
-| Center | The elements are in the Flex container, centered in the cross-axis direction. | 
-| End | The elements are in the Flex container, bottom-aligned in the cross-axis direction. | 
-| Stretch | The elements are in the Flex container, stretched and padded in the cross-axis direction. If the size is not set, the elements are stretched to the container size. | 
-| Baseline | The elements are in the Flex container, text baseline aligned in the cross-axis direction. | 
+## TouchType
 
+| Name  | Description                          |
+| ------ | ------------------------------ |
+| Down   | A finger is pressed.              |
+| Up     | A finger is lifted.              |
+| Move   | A finger moves on the screen in pressed state.|
+| Cancel | A touch event is canceled.          |
 
-## LineCapStyle Enums
+## MouseButton
 
-  | Name | Description | 
-| -------- | -------- |
-| Butt | The ends of dividing lines are square. | 
-| Round | The ends of dividing lines are rounded. | 
-| Square | The ends of dividing lines are square. | 
+| Name   | Description            |
+| ------- | ---------------- |
+| Left    | Left button on the mouse.      |
+| Right   | Right button on the mouse.      |
+| Middle  | Middle button on the mouse.      |
+| Back    | Back button on the left of the mouse.|
+| Forward | Forward button on the left of the mouse.|
+| None    | No button.        |
 
+## MouseAction
 
-## PlayMode Enums
+| Name   | Description          |
+| ------- | -------------- |
+| Press   | The mouse button is pressed.|
+| Release | The mouse button is released.|
+| Move    | The mouse cursor moves.    |
+| Hover   | The mouse pointer is hovered on an element. |
 
-  | Name | Description | 
-| -------- | -------- |
-| Normal | The animation is played normally. | 
-| Reverse | The animation is played reversely. | 
-| Alternate | The animation is played normally for an odd number of times (1, 3, 5...) and reversely for an even number of times (2, 4, 6...). | 
-| AlternateReverse | The animation is played reversely for an odd number of times (1, 3, 5...) and normally for an even number of times (2, 4, 6...). | 
+## Curve
 
+| Name               | Description                                                        |
+| ------------------- | ------------------------------------------------------------ |
+| Linear              | The animation speed keeps unchanged.                          |
+| Ease                | The animation starts slowly, accelerates, and then slows down towards the end. The cubic-bezier curve (0.25, 0.1, 0.25, 1.0) is used.|
+| EaseIn              | The animation starts at a low speed and then picks up speed until the end. The cubic-bezier curve (0.42, 0.0, 1.0, 1.0) is used.      |
+| EaseOut             | The animation ends at a low speed. The cubic-bezier curve (0.0, 0.0, 0.58, 1.0) is used.      |
+| EaseInOut           | The animation starts and ends at a low speed. The cubic-bezier curve (0.42, 0.0, 0.58, 1.0) is used.|
+| FastOutSlowIn       | The animation uses the standard cubic-bezier curve (0.4, 0.0, 0.2, 1.0).                |
+| LinearOutSlowIn     | The animation uses the deceleration cubic-bezier curve (0.0, 0.0, 0.2, 1.0).                |
+| FastOutLinearIn     | The animation uses the acceleration cubic-bezier curve (0.4, 0.0, 1.0, 1.0).                |
+| ExtremeDeceleration | The animation uses the extreme deceleration cubic-bezier curve (0.0, 0.0, 0.0, 1.0).                |
+| Sharp               | The animation uses the sharp cubic-bezier curve (0.33, 0.0, 0.67, 1.0).              |
+| Rhythm              | The animation uses the rhythm cubic-bezier curve (0.7, 0.0, 0.2, 1.0).                |
+| Smooth              | The animation uses the smooth cubic-bezier curve (0.4, 0.0, 0.4, 1.0).                |
+| Friction            | The animation uses the friction cubic-bezier curve (0.2, 0.0, 0.2, 1.0).                 |
 
-## ImageRepeat Enums
+## AnimationStatus
 
-  | Name | Description | 
-| -------- | -------- |
-| X | Images are repeatedly drawn only on the horizontal axis. | 
-| Y | Images are repeatedly drawn only on the vertical axis. | 
-| XY | Images are repeatedly drawn on both axes. | 
-| NoRepeat | Images are not repeatedly drawn. | 
+| Name   | Description              |
+| ------- | ------------------ |
+| Initial | The animation is in the initial state.    |
+| Running | The animation is being played.|
+| Paused  | The animation is paused.|
+| Stopped | The animation is stopped.|
 
+## FillMode
 
-## TextDecorationType Enums
+| Name    | Description                            |
+| -------- | -------------------------------- |
+| None     | After the playback is complete, the animation restores to the initial state.        |
+| Forwards | After the playback is complete, the animation remains in the end state.|
+| Backwards | The start attribute value is applied during the specified period and before the animation is played. |
+| Both      | Both the **Forwards** and **Backwards** modes are applied. |
 
-  | Name | Description | 
-| -------- | -------- |
-| Underline | Line under the text. | 
-| LineThrough | Line through the text. | 
-| Overline | Line over the text. | 
-| None | No decorative lines. | 
+## PlayMode
 
+| Name            | Description                                                        |
+| ---------------- | ------------------------------------------------------------ |
+| Normal           | The animation is played forwards.                                            |
+| Reverse          | The animation is played backwards.                                              |
+| Alternate        | The animation is played forwards for an odd number of times (1, 3, 5...) and backwards for an even number of times (2, 4, 6...).|
+| AlternateReverse | The animation is played backwards for an odd number of times (1, 3, 5...) and forwards for an even number of times (2, 4, 6...).|
 
-## TextCase Enums
+## KeyType
 
-  | Name | Description | 
-| -------- | -------- |
-| Normal | Normal case. | 
-| LowerCase | All lowercase. | 
-| UpperCase | All uppercase. | 
+| Name| Description      |
+| ---- | ---------- |
+| Down | The key is pressed.|
+| Up   | The key is released.|
 
+## KeySource
 
-## BarState Enums
+| Name    | Description                |
+| -------- | -------------------- |
+| Unknown  | Unknown input device.  |
+| Keyboard | The input device is a keyboard.|
 
-  | Name | Description | 
-| -------- | -------- |
-| Off | Hide. | 
-| On | Display. | 
-| Auto | Display on demand (displays when the screen is touched and disappears after 2s). | 
+## Edge
 
-## LayoutDirection Enums
+| Name    | Description                  |
+| -------- | ---------------------- |
+| Top      | Top edge in the vertical direction.        |
+| Center   | Center position in the vertical direction.      |
+| Bottom   | Bottom edge in the vertical direction.        |
+| Baseline | Text baseline position in the cross axis direction.|
+| Start    | Start position in the horizontal direction.      |
+| Middle   | Center position in the horizontal direction.      |
+| End      | End position in the horizontal direction.      |
 
-| Name          | Description                                                  |
-| ------------- | ------------------------------------------------------------ |
-| Row           | The child components are arranged in the same direction as the main axis runs along the rows. |
-| Column        | The child components are arranged in the same direction as the main axis runs down the columns. |
-| RowReverse    | The child components are arranged opposite to the **Row** direction. |
-| ColumnReverse | The child components are arranged opposite to the **Column** direction. |
+## Week
+
+| Name    | Description                  |
+| -------- | ---------------------- |
+| Mon      | Monday.               |
+| Tue      | Tuesday.               |
+| Wed      | Wednesday.               |
+| Thur     | Thursday.               |
+| Fri      | Friday.               |
+| Sat      | Saturday.               |
+| Sun      | Sunday.               |
+
+## Direction
+
+| Name| Description                  |
+| ---- | ---------------------- |
+| Ltr  | Components are arranged from left to right.    |
+| Rtl  | Components are arranged from right to left.    |
+| Auto | The default layout direction is used.|
+
+## BarState
+
+| Name| Description                            |
+| ---- | -------------------------------- |
+| Off  | Not displayed.                        |
+| On   | Always displayed.                      |
+| Auto | Displayed when the screen is touched and hidden after 2s.|
+
+## EdgeEffect
+
+| Name  | Description                                                        |
+| ------ | ------------------------------------------------------------ |
+| Spring | Spring effect. When at one of the edges, the component can move beyond the bounds through touches, and produces a bounce effect when the user releases their finger.|
+| Fade   | Fade effect. When at one of the edges, the component produces a fade effect.                    |
+| None   | No effect when the component is at one of the edges.                                        |
+
+## Alignment
+
+| Name       | Description            |
+| ----------- | ---------------- |
+| TopStart    | Top start.    |
+| Top         | Horizontally centered on the top.  |
+| TopEnd      | Top end.      |
+| Start       | Vertically centered start.|
+| Center      | Horizontally and vertically centered.|
+| End         | Vertically centered end.  |
+| BottomStart | Bottom start.    |
+| Bottom      | Horizontally centered on the bottom.  |
+| BottomEnd   | Bottom end.      |
+
+## TransitionType
+
+| Name  | Description                                              |
+| ------ | -------------------------------------------------- |
+| All    | The transition takes effect in all scenarios.|
+| Insert | The transition takes effect when a component is inserted.    |
+| Delete | The transition takes effect when a component is deleted.    |
+
+## RelateType
+
+| Name  | Description                             |
+| ------ | ------------------------------- |
+| FILL    | The current child component is scaled to fill the parent component.     |
+| FIT     | The current child component is scaled to adapt to the parent component.   |
+
+## Visibility
+
+| Name   | Description                            |
+| ------- | -------------------------------- |
+| Hidden  | The component is hidden, and a placeholder is used for it in the layout.      |
+| Visible | The component is visible.                          |
+| None    | The component is hidden. It is not involved in the layout, and no placeholder is used for it.|
+
+## LineCapStyle
+
+| Name  | Description                |
+| ------ | -------------------- |
+| Butt   | The ends of dividing lines are butt.|
+| Round  | The ends of dividing lines are rounded.  |
+| Square | The ends of dividing lines are butt.|
+
+## Axis
+
+| Name      | Description        |
+| ---------- | ------------ |
+| Vertical   | Vertical direction.|
+| Horizontal | Horizontal direction.|
+
+## HorizontalAlign
+
+| Name  | Description                    |
+| ------ | ------------------------ |
+| Start  | Aligned with the start edge in the same direction as the language in use.|
+| Center | Aligned with the center. This is the default alignment mode.|
+| End    | Aligned with the end edge in the same direction as the language in use.  |
+
+## FlexAlign
+
+| Name        | Description                                                        |
+| ------------ | ------------------------------------------------------------ |
+| Start        | The child components are aligned with the start edge of the main axis. The first component is aligned with the main-start, and subsequent components are aligned with the previous one.|
+| Center       | The child components are aligned in the center of the main axis. The space between the first component and the main-start is the same as that between the last component and the main-end.|
+| End          | The child components are aligned with the end edge of the main axis. The last component is aligned with the main-end, and other components are aligned with the next one.|
+| SpaceBetween | The child components are evenly distributed along the main axis. The space between any two adjacent components is the same. The first component is aligned with the main-start, the last component is aligned with the main-end, and the remaining components are distributed so that the space between any two adjacent components is the same.|
+| SpaceAround  | The child components are evenly distributed along the main axis. The space between any two adjacent components is the same. The space between the first component and main-start, and that between the last component and cross-main are both half the size of the space between two adjacent components.|
+| SpaceEvenly  | The child components are equally distributed along the main axis. The space between the first component and main-start, the space between the last component and main-end, and the space between two adjacent components are the same.|
+
+## ItemAlign
+
+| Name    | Description                                                        |
+| -------- | ------------------------------------------------------------ |
+| Auto     | The default configuration in the flex container is used.                                    |
+| Start    | The elements are in the flex container, top-aligned in the cross-axis direction.                      |
+| Center   | The elements are in the flex container, centered in the cross-axis direction.                      |
+| End      | The elements are in the flex container, bottom-aligned in the cross-axis direction.                      |
+| Stretch  | The elements are in the flex container, stretched and padded in the cross-axis direction. If the size is not set, the elements are stretched to the container size.|
+| Baseline | The elements are in the flex container, text baseline aligned in the cross-axis direction.                  |
+
+## FlexDirection
+
+| Name         | Description                          |
+| ------------- | ------------------------------ |
+| Row           | The child components are arranged in the same direction as the main axis runs along the rows.|
+| RowReverse    | The child components are arranged opposite to the **Row** direction.   |
+| Column        | The child components are arranged in the same direction as the main axis runs down the columns.|
+| ColumnReverse | The child components are arranged opposite to the **Column** direction.    |
+
+## FlexWrap
 
+| Name       | Description                                             |
+| ----------- | ------------------------------------------------- |
+| NoWrap      | The child components in the flex container are arranged in a single line, and they cannot overflow. |
+| Wrap        | The child components in the flex container are arranged in multiple lines, and they may overflow. |
+| WrapReverse | The child components in the flex container are reversely arranged in multiple lines, and they may overflow. |
+
+## VerticalAlign
+
+| Name  | Description                    |
+| ------ | ------------------------ |
+| Top    | Top aligned.              |
+| Center | Center aligned. This is the default alignment mode.|
+| Bottom | Bottom aligned.              |
+
+## ImageRepeat
+
+| Name    | Description                      |
+| -------- | -------------------------- |
+| X        | The image is repeatedly drawn only along the horizontal axis.|
+| Y        | The image is repeatedly drawn only along the vertical axis.|
+| XY       | The image is repeatedly drawn along both axes.  |
+| NoRepeat | The image is not repeatedly drawn.          |
+
+## ImageSize
+
+| Type   | Description                                                        |
+| ------- | ------------------------------------------------------------ |
+| Cover   | Default value. The image is scaled with its aspect ratio retained for both sides to be greater than or equal to the display boundaries.|
+| Contain | The image is scaled with its aspect ratio retained for the content to be completely displayed within the display boundaries.  |
+| Auto    | The original image aspect ratio is retained.                                        |
+
+## GradientDirection
+
+| Name       | Description      |
+| ----------- | ---------- |
+| Left        | The gradient direction is from right to left.|
+| Top         | The gradient direction is from bottom to top.|
+| Right       | The gradient direction is from left to right.|
+| Bottom      | The gradient direction is from top to bottom.|
+| LeftTop     | The gradient direction is upper left.    |
+| LeftBottom  | The gradient direction is lower left.    |
+| RightTop    | The gradient direction is upper right.    |
+| RightBottom | The gradient direction is lower right.    |
+| None        | No gradient.      |
+
+## SharedTransitionEffectType
+
+| Name       | Description      |
+| ----------- | ---------- |
+| Static        | The element position remains unchanged on the target page, and transition opacity can be configured. Currently, this effect is only valid in redirecting to the target page.|
+| Exchange      | The element is relocated and scaled properly on the target page.|
+
+## FontStyle
+
+| Name  | Description            |
+| ------ | ---------------- |
+| Normal | Standard font style.|
+| Italic | Italic font style.|
+
+## FontWeight
+
+| Name   | Description          |
+| ------- | -------------- |
+| Lighter | The font weight is lighter.    |
+| Normal  | The font weight is normal.|
+| Regular | The font weight is regular.|
+| Medium  | The font weight is medium.|
+| Bold    | The font weight is bold.    |
+| Bolder  | The font weight is bolder.  |
+
+## TextAlign
+
+| Name  | Description          |
+| ------ | -------------- |
+| Start  | Aligned with the start.|
+| Center | Horizontally centered.|
+| End    | Aligned with the end.|
+
+## TextOverflow
+
+| Name    | Description                                  |
+| -------- | -------------------------------------- |
+| Clip     | Extra-long text is truncated.              |
+| Ellipsis | An ellipsis (...) is used to represent clipped text.|
+| None     | No truncation or ellipsis is used for extra-long text.                |
+
+## TextDecorationType
+
+| Name       | Description              |
+| ----------- | ------------------ |
+| Underline   | Line under the text.  |
+| LineThrough | Line through the text.|
+| Overline    | Line over the text.  |
+| None        | No decorative lines.|
+
+## TextCase
+
+| Name     | Description                |
+| --------- | -------------------- |
+| Normal    | The original case of the text is retained.|
+| LowerCase | All letters in the text are in lowercase.    |
+| UpperCase | All letters in the text are in uppercase.    |
+
+## ResponseType<sup>8+</sup>
+
+| Name      | Description                      |
+| ---------- | -------------------------- |
+| LongPress  | The menu is displayed when the component is long-pressed.    |
+| RightClick | The menu is displayed when the component is right-clicked.|
+
+## HoverEffect<sup>8+</sup>
+
+| Name     | Description                        |
+| --------- | ---------------------------- |
+| Auto      | Default hover effect.|
+| Scale     | Scale effect.              |
+| Highlight | Background fade-in and fade-out effect.    |
+| None      | No effect.                |
+
+## Placement<sup>8+</sup>
+
+| Name         | Description                                                        |
+| ------------- | ------------------------------------------------------------ |
+| Left          | The popup is on the left of the component, vertically aligned with the component on the left.                  |
+| Right         | The popup is on the right of the component, vertically aligned with the component on the right.                  |
+| Top           | The popup is at the top of the component, horizontally aligned with the component at the top.                  |
+| Bottom        | The popup is at the bottom of the component, horizontally aligned with the component at the bottom.                  |
+| TopLeft       | The popup is at the top of the component. |
+| TopRight      | The popup is at the top of the component. |
+| BottomLeft    | The popup is at the bottom of the component. |
+| BottomRight   | The popup is at the bottom of the component. |
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-image.md b/en/application-dev/reference/arkui-ts/ts-basic-components-image.md
index cf29ae5aa813734fdcbf648860938784f40646c6..ad9af15417c6964f9de052985b1f54e88b6f8400 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-image.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-image.md
@@ -37,15 +37,14 @@ Obtains an image from the specified source for subsequent rendering and display.
 
 | Name | Type                                    | Mandatory  | Default Value | Description                                    |
 | ---- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
-| src  | string \| [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](/ts-types.md#resource-type) | Yes   | -    | Image source. Both local and online images are supported.<br>When using resources referenced using a relative path, for example, `Image("common/test.jpg")`, the **\<Image>** component cannot be called across bundles or modules. Therefore, you are advised to use `$r` to reference image resources that need to be used globally.<br>- The following image formats are supported: PNG, JPG, BMP, SVG, GIF.<br>\- Base64 strings are supported. \ The value format is `data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, where `[base64 data]` is a Base64 string.<br/>\- The value can also be a path starting with `dataability://`, which is used to access the image path provided by a Data ability.|
+| src  | string \| [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](ts-types.md#resource) | Yes   | -    | Image source. Both local and online images are supported.<br>When using resources referenced using a relative path, for example, `Image("common/test.jpg")`, the **\<Image>** component cannot be called across bundles or modules. Therefore, you are advised to use `$r` to reference image resources that need to be used globally.<br>- The following image formats are supported: PNG, JPG, BMP, SVG, GIF.<br>\- Base64 strings are supported. \ The value format is `data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, where `[base64 data]` is a Base64 string.<br/>\- The value can also be a path starting with `dataability://`, which is used to access the image path provided by a Data ability.|
 
 ## Attributes
 
-In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
 
 | Name                 | Type                                               | Default Value                  | Description                                                        |
 | --------------------- | ------------------------------------------------------- | ------------------------ | ------------------------------------------------------------ |
-| alt                   | string \| [Resource](ts-types.md#resource-type) | -                        | Placeholder image displayed during loading. Both local and Internet URIs are supported.                |
+| alt                   | string \| [Resource](ts-types.md#resource) | -                        | Placeholder image displayed during loading. Both local and Internet URIs are supported.                |
 | objectFit             | [ImageFit](ts-appendix-enums.md#imagefit)                           | Cover           | Image scale type.                                        |
 | objectRepeat          | [ImageRepeat](ts-appendix-enums.md#imagerepeat)         | NoRepeat                 | Whether the image is repeated.<br>**NOTE**<br>This attribute is not applicable to SVG images. |
 | interpolation         | ImageInterpolation               | None  | Interpolation effect of the image. This attribute is intended to alleviate aliasing that occurs when a low-definition image is zoomed in.<br>**NOTE**<br>> This attribute is not applicable to SVG images.<br>> This attribute is not applicable to **PixelMap** objects. |
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md b/en/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md
index e0bb4ae599ec8adc5f5a60cc0d6d194c17ebeb26..6c80d5cd13ecebefa967428034e6e68bbe00fe2d 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md
@@ -1,13 +1,13 @@
 # ImageAnimator
 
 
+The **\<ImageAnimator>** component enables images to be played frame by frame. The list of images to be played can be configured, and the duration of each image can be configured.
+
 > **NOTE**
+>
 > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-The **\<ImageAnimator>** component enables images to be played frame by frame. The list of images to be played can be configured, and the duration of each image can be configured.
-
-
 ## Required Permissions
 
 None
@@ -25,47 +25,33 @@ ImageAnimator()
 
 ## Attributes
 
-| Name | Type | Default Value | Mandatory | Description |
+| Name| Type| Default Value| Mandatory| Description|
 | -------- | -------- | -------- | -------- | -------- |
-| images | Array&lt;{<br/>src:string,<br/>width?:Length,<br/>height?:Length,<br/>top?:Length,<br/>left?:Length,<br/>duration?:number<br/>}&gt; | [] | Yes | Image frame information. The information of each frame includes the image path, image size, image position, and image playback duration. The detailed description is as follows:<br/>**src**: image path. The image format can be SVG, PNG, or JPG.<br/>**width**: image width.<br/>**height**: image height.<br/>**top**: vertical coordinate of the image relative to the upper left corner of the component.<br/>**left**: horizontal coordinate of the image relative to the upper left corner of the component.<br/>**duration**: playback duration of the image, in ms. |
-| state | AnimationStatus | AnimationStatus.Initial | No | Playback status of the animation. The default status is **Initial**. |
-| duration | number | 1000 | No | Playback duration, in ms. The default duration is 1000 ms. When the duration is **0**, no image is played. The value change takes effect only at the beginning of the next cycle. When a separate duration is set in images, the setting of this attribute is invalid. |
-| reverse | boolean | false | No | Playback sequence. The value **false** indicates that images are played from the first one to the last one, and **true** indicates that images are played from the last one to the first one. |
-| fixedSize | boolean | true | No | Whether the image size is the same as the component size. **true**: The image size is the same as the component size. In this case, the width, height, top, and left attributes of the image are invalid. **false**: The width, height, top, and left attributes of each image must be set separately. |
-| preDecode | number | 0 | No | Whether to enable pre-decoding. The default value **0** indicates that pre-decoding is disabled. If this attribute is set to **2**, two images following the currently playing frame will be cached in advance to improve performance. |
-| fillMode | FillMode | FillMode.Forwards | No | Status before and after the animation starts. For details about the options, see **FillMode**. |
-| iterations | number | 1 | No | By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times. |
-
-- AnimationStatus enums
-  | Name | Description | 
-  | -------- | -------- |
-  | Initial | The animation is in the initial state. | 
-  | Running | The animation is being played. | 
-  | Paused | The animation is paused. | 
-  | Stopped | The animation is stopped. | 
-
-- FillMode enums
-  | Name | Description | 
-  | -------- | -------- |
-  | None | After the playback is complete, the animation restores to the initial state. | 
-  | Forwards | After the playback is complete, the animation remains in the end state. | 
+| images | Array&lt;{<br/>src: string,<br/>width?: number \| string,<br/>height?: number \| string,<br/>top?: number \| string,<br/>left?: number \| string,<br/>duration?: number<br/>}&gt; | [] | Yes| Image frame information. The information of each frame includes the image path, image size, image position, and image playback duration. The detailed description is as follows:<br/>**src**: image path. The image format can be SVG, PNG, or JPG.<br/>**width**: image width.<br/>**height**: image height.<br/>**top**: vertical coordinate of the image relative to the upper left corner of the component.<br/>**left**: horizontal coordinate of the image relative to the upper left corner of the component.<br/>**duration**: playback duration of the image, in ms. |
+| state | [AnimationStatus](ts-appendix-enums.md#animationstatus) | Initial | No| Playback status of the animation. The default status is **Initial**.|
+| duration | number | 1000 | No| Playback duration, in ms. The default duration is 1000 ms. When the duration is **0**, no image is played. The value change takes effect only at the beginning of the next cycle. When a separate duration is set in **images**, the setting of this attribute is invalid.|
+| reverse | boolean | false | No| Playback sequence. The value **false** indicates that images are played from the first one to the last one, and **true** indicates that images are played from the last one to the first one.|
+| fixedSize | boolean | true | No| Whether the image size is the same as the component size.<br> **true**: The image size is the same as the component size. In this case, the width, height, top, and left attributes of the image are invalid.<br> **false**: The width, height, top, and left attributes of each image must be set separately.|
+| preDecode | number | 0 | No| Whether to enable pre-decoding. The default value **0** indicates that pre-decoding is disabled. The value **2** indicates that two images following the currently playing frame will be cached in advance to improve performance.|
+| fillMode | [FillMode](ts-appendix-enums.md#fillmode) | Forwards | No| Status before and after the animation starts. For details about the options, see **FillMode**.|
+| iterations | number | 1 | No| Number of times that the animation is played. By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times.|
 
 
 ## Events
 
-  | Name | Description | 
+| Name| Description|
 | -------- | -------- |
-| onStart() =&gt; void | Triggered when the animation starts to play. | 
-| onPause() =&gt; void | Triggered when the animation playback is paused. | 
-| onRepeat() =&gt; void | Triggered when the animation playback is repeated. | 
-| onCancel() =&gt; void | Triggered when the animation playback is canceled. | 
-| onFinish() =&gt; void | Triggered when the animation playback is complete. | 
+| onStart(event: () =&gt; void)  | Triggered when the animation starts to play.|
+| onPause(event: () =&gt; void)  | Triggered when the animation playback is paused.|
+| onRepeat(event: () =&gt; void) | Triggered when the animation playback is repeated.|
+| onCancel(event: () =&gt; void) | Triggered when the animation playback is canceled.|
+| onFinish(event: () =&gt; void) | Triggered when the animation playback is complete.|
 
 
 ## Example
 
-
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ImageAnimatorExample {
@@ -77,7 +63,7 @@ struct ImageAnimatorExample {
     Column({ space:5 }) {
       ImageAnimator()
         .images([
-          {
+          { 
             // The comment folder is at the same level as the pages folder.
             src: '/comment/bg1.jpg',
             duration: 500,
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md b/en/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md
index f07fde18fa2eab1eaec4c4354dfda5eb316ca7be..d10e25435cdea46e882f125c7da59d2497dda4e4 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md
@@ -1,12 +1,10 @@
 # ScrollBar
 
+The **\<ScrollBar>** is used together with scrollable components, such as **\<List>**, **\<Grid>**, and **\<Scroll>**.
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
-> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
-
-
-The **&lt;ScrollBar&gt;** is used together with scrollable components, such as **&lt;List&gt;**, **&lt;Grid&gt;**, and **&lt;Scroll&gt;**.
-
+>  **NOTE**
+>
+>  This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
 ## Required Permissions
 
@@ -20,38 +18,34 @@ This component can contain a single child component.
 
 ## APIs
 
-ScrollBar(value: ScrollBarOptions)
+ScrollBar(value: { scroller: Scroller, direction?: ScrollBarDirection, state?: BarState })
 
-- ScrollBarOptions parameters
-    | Name | Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | scroller | [Scroller](ts-container-scroll.md#scroller) | Yes | - | Scroller, which can be bound to and control scrollable components. |
-  | direction | ScrollBarDirection | No | ScrollBarDirection.Vertical | Scrollbar direction in which scrollable components scroll. |
-  | state | BarState | No | BarState.Auto | Scrollbar state. |
+**Parameters**
 
-  > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
-  > The **&lt;ScrollBar&gt;** component defines the behavior style of the scrollable area, and its subnodes define the behavior style of the scrollbar.
-  > 
-  > This component is bound to a scrollable component through **scroller**, and can be used to scroll the scrollable component only when their directions are the same. The **&lt;ScrollBar&gt;** component can be bound to only one scrollable component, and vice versa.
+| Name| Type| Mandatory| Default Value| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| scroller | [Scroller](ts-container-scroll.md#scroller) | Yes| - | Scroller, which can be bound to scrollable components.|
+| direction | ScrollBarDirection | No| ScrollBarDirection.Vertical | Scrollbar direction in which scrollable components scroll.|
+| state | [BarState](ts-appendix-enums.md#barstate) | No| BarState.Auto | Scrollbar state.|
 
-- ScrollBarDirection enums
-    | Name | Description | 
-  | -------- | -------- |
-  | Vertical | Vertical scrollbar. | 
-  | Horizontal | Horizontal scrollbar. | 
+>  **NOTE**
+>
+>  The **<\ScrollBar>** component defines the behavior style of the scrollable area, and its subnodes define the behavior style of the scrollbar.
+>
 
-- BarState enums
-    | Name | Description | 
-  | -------- | -------- |
-  | On | Always display. | 
-  | Off | Hide. | 
-  | Auto | Display on demand (displays when the screen is touched and disappears after 2s of inactivity). | 
+>  This component is bound to a scrollable component through **scroller**, and can be used to scroll the scrollable component only when their directions are the same. The **\<ScrollBar>** component can be bound to only one scrollable component, and vice versa.
 
+## ScrollBarDirection
+| Name| Description|
+| -------- | -------- |
+| Vertical | Vertical scrollbar.|
+| Horizontal | Horizontal scrollbar.|
 
-## Example
 
+## Example
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ScrollBarExample {
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-text.md b/en/application-dev/reference/arkui-ts/ts-basic-components-text.md
index 69cf31541c6131454c0c81f6794f0b62b9ae8dd9..3d1fe4f26d33d749f2004b23e7df010ea475556d 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-text.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-text.md
@@ -19,60 +19,33 @@ This component can contain the [\<Span>](ts-basic-components-span.md) child comp
 
 ## APIs
 
-Text(content?: ResourceStr)
+Text(content?: string | Resource)
 
-- Parameters
-  | Name| Type| Mandatory| Default Value| Description|
-  | -------- | -------- | -------- | -------- | -------- |
-  | content | [ResourceStr](../../ui/ts-types.md) | No| '' | Text content. This parameter does not take effect when the child component **\<Span>** is contained.|
+**Parameters**
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| content | string \| [Resource](ts-types.md#resource) | No| Text content. The content and style set for the **\<Text>** component do not take effect when it contains the **\<Span>** child component.<br>Default value: ' ' |
 
 
 ## Attributes
 
-| Name| Type| Default Value| Description|
-| -------- | -------- | -------- | -------- |
-| textAlign | TextAlign | TextAlign.Start | Text alignment mode of multiple lines of text.|
-| textOverflow | {overflow: TextOverflow} | {overflow: TextOverflow.Clip} | Display mode when the text is too long.<br>**NOTE**<br/>Text is truncated at the transition between words. To truncate text in the middle of a word, add **\u200B** between characters.<br>This attribute must be used with `maxLines` to take effect. |
-| maxLines | number | Infinity | Maximum number of lines in the text.<br>**NOTE**<br/><br>By default, text is automatically folded. If this parameter is specified, the text does not exceed the specified number of lines. If there is extra text, you can use `textOverflow` to specify the truncation mode.|
-| lineHeight | string \| number \| [Resource](../../ui/ts-types.md) | - | Text line height. If the value is less than or equal to **0**, the line height is not limited and the font size is adaptive. If the value of the number type, the unit fp is used.|
-| decoration | {<br/>type: TextDecorationType,<br/>color? [ResourceColor](../../ui/ts-types.md)<br/>} | {<br/>type: TextDecorationType.None,<br/>color£ºColor.Black<br/>} | Style and color of the text decorative line.|
-| baselineOffset | [Length](../../ui/ts-types.md) | - | Offset of the text baseline.|
-| textCase | TextCase | TextCase.Normal | Text case.|
-
-TextAlign enums
-| Name| Description|
-| -------- | -------- |
-| Center | The text is center-aligned.|
-| Start | The text is aligned with the direction in which the text is written.|
-| End | The text is aligned with the opposite direction in which the text is written.|
-
-## TextOverflow enums
-| Name| Description|
-| -------- | -------- |
-| Clip | Extra text is truncated.|
-| Ellipsis | An ellipsis (...) is used to represent clipped text.|
-| None | No truncation or ellipsis is used for extra-long text.|
-
-## TextDecorationType enums
-| Name| Description|
-| -------- | -------- |
-| Underline | Line under the text.|
-| LineThrough | Line through the text.|
-| Overline | Line over the text.|
-| None | No decorative lines.|
-
-## TextCase enums
-
-| Name     | Description                |
-| --------- | -------------------- |
-| Normal    | The original case of the text is retained.|
-| LowerCase | All letters in the text are in lowercase.    |
-| UpperCase | All letters in the text are in uppercase.    |
-
-
-> **NOTE**
+
+| Name| Type| Description|
+| -------- | -------- | -------- |
+| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | Text alignment mode of multiple lines of text.<br/>Default value: **TextAlign.Start** |
+| textOverflow | {overflow: [TextOverflow](ts-appendix-enums.md#textoverflow)} | Display mode when the text is too long.<br/>Default value: **{overflow:&nbsp;TextOverflow.Clip}**<br>**NOTE**<br/>Text is truncated at the transition between words. To truncate text in the middle of a word, add **\u200B** between characters. |
+| maxLines | number | Maximum number of lines in the text.<br>Default value: **Infinity** |
+| lineHeight     | string \| number \| [Resource](ts-types.md#resource) | Text line height. If the value is less than or equal to **0**, the line height is not limited and the font size is adaptive. If the value of the number type, the unit fp is used. |
+| decoration     | {<br>type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype),<br>color?: [ResourceColor](ts-types.md#resourcecolor8)<br>} | Style and color of the text decorative line.<br/>Default value: **{<br/>type: TextDecorationType.None,<br/>color: Color.Black<br/>}** |
+| baselineOffset | number \| string         | Offset of the text baseline.                             |
+| letterSpacing       | number \| string                 | Letter spacing.                                |
+| minFontSize       | number \| string \| [Resource](ts-types.md#resource) | Minimum font size.                                |
+| maxFontSize       | number \| string \| [Resource](ts-types.md#resource) | Maximum font size.                                |
+| textCase | [TextCase](ts-appendix-enums.md#textcase) | Text case.<br/>Default value: **TextCase.Normal** |
+
+>  **NOTE**
 >
-> If the **\<Text>** component contains both the text and the **\<Span>** child component, only the content in **\<Span>** is displayed.
+>  The **\<Text>** component cannot contain both the text and the child component **\<Span>**. If both of them exist, only the content in **\<Span>** is displayed.
 
 
 ## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md b/en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md
index 86f53ad1d32b00d0f573796e9f5a51ed07ee564f..d8d736c178dac82c82ce3021f1131fd827478884 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md
@@ -1,14 +1,12 @@
 # TextArea
 
+The **\<TextArea>** component provides multi-line text input and responds to certain input events.
 
-> **NOTE**
+>  **NOTE**
 >
 > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-The **\<TextArea>** component provides multi-line text input.
-
-
 ## Required Permissions
 
 None
@@ -21,48 +19,42 @@ Not supported
 
 ## APIs
 
-TextArea(value?:{placeholder?: string, controller?: TextAreaController})
+TextArea(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextAreaController})
+
+**Parameters**
 
-- Parameters
-    | Name                    | Type                                     | Mandatory | Default Value | Description                            |
-    | ----------------------- | ---------------------------------------- | --------- | ------------- | -------------------------------------- |
-    | placeholder             | string                                   | No        | -             | Text displayed when there is no input. |
-    | controller<sup>8+</sup> | [TextAreaController](#textareacontroller8) | No      | -             | Text area controller.                  |
+| Name                    | Type                                    | Mandatory  | Default Value | Description          |
+| ----------------------- | ---------------------------------------- | ---- | ---- | -------------- |
+| placeholder      | [ResourceStr](ts-types.md#resourcestr8) | No   | -    | Text displayed when there is no input.    |
+| text             | [ResourceStr](ts-types.md#resourcestr8) | No   | -    | Current text input.    |
+| controller<sup>8+</sup> | [TextAreaController](#textareacontroller8) | No   | -    | Text area controller.|
 
 
 ## Attributes
 
 In addition to universal attributes, the following attributes are supported.
 
-| Name                     | Type                                     | Default Value | Description                              |
-| ------------------------ | ---------------------------------------- | ------------- | ---------------------------------------- |
-| placeholderColor         | Color                                    | -             | Placeholder text color.                  |
-| placeholderFont          | {<br/>size?: number,<br/>weight?:number \| [FontWeight](ts-universal-attributes-text-style.md),<br/>family?: string,<br/>style?: [FontStyle](ts-universal-attributes-text-style.md)<br/>} | -             | Placeholder text style.<br/>- **size**: font size. If the value is of the number type, the unit fp is used.<br/>- **weight**: font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is **400**. A larger value indicates a larger font weight.<br/>- **family**: font family. Use commas (,) to separate multiple fonts, for example, **'Arial, sans-serif'**. The priority of the fonts is the sequence in which they are placed.<br/>- **style**: font style. |
-| textAlign                | TextAlign                                | Start         | Text horizontal alignment mode. |
-| caretColor               | Color                                    | -             | Color of the caret in the text box. |
-| inputFilter<sup>8+</sup> | {<br/>value: [ResourceStr](../../ui/ts-types.md)<sup>8+</sup>,<br/>error?: (value:&nbsp;string)<br/>} | -             | Regular expression for input filtering. Only inputs that comply with the regular expression can be displayed. Other inputs are ignored. The specified regular expression can match single characters, but not strings. Example: ^(? =.\*\d)(? =.\*[a-z])(? =.\*[A-Z]).{8,10}$. Strong passwords containing 8 to 10 characters cannot be filtered.<br/>- **value**: indicates the regular expression to set.<br/>- **error**: returns the ignored content when regular expression matching fails. |
-| copyOption<sup>9+</sup> | boolean\|[CopyOption](ts-basic-components-text.md) | true | Whether copy and paste is allowed. |
-
-- TextAlign enums
-    | Name   | Description                     |
-    | ------ | ------------------------------- |
-    | Start  | Aligns the header horizontally. |
-    | Center | Horizontal center alignment.    |
-    | End    | Align the tail horizontally.    |
+| Name                      | Type                                    | Default Value  | Description                                      |
+| ------------------------ | ---------------------------------------- | ----- | ---------------------------------------- |
+| placeholderColor         | [ResourceColor](ts-types.md#resourcecolor8)                                     | -     | Placeholder text color.                      |
+| placeholderFont          | [Font](ts-types.md#font) | -     | Placeholder text style.<br>- **size**: font size. If the value is of the number type, the unit is fp.<br>- **weight**: font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is **400**. A larger value indicates a larger font weight.<br>- **family**: font family. Use commas (,) to separate multiple fonts, for example, **'Arial, sans-serif'**. The priority of the fonts is the sequence in which they are placed.<br>- **style**: font style.|
+| textAlign                | [TextAlign](ts-appendix-enums.md#textalign) | Start | Horizontal alignment of the text.<br/>Default value: **TextAlign.Start** |
+| caretColor               | [ResourceColor](ts-types.md#resourcecolor8)                                    | -     | Color of the caret in the text box.                              |
+| inputFilter<sup>8+</sup> | {<br/>value:&nbsp;[ResourceStr](ts-types.md#resourcestr8)<sup>8+</sup>,<br/>error?:&nbsp;(value:&nbsp;string)&nbsp;=&gt;&nbsp;void<br/>} | -     | Regular expression for input filtering. Only inputs that comply with the regular expression can be displayed. Other inputs are ignored. The specified regular expression can match single characters, but not strings. Example: ^(?=.\*\d)(?=.\*[a-z])(?=.\*[A-Z]).{8,10}$. Strong passwords containing 8 to 10 characters cannot be filtered.<br>- **value**: regular expression to set.<br>- **error**: ignored content to return when regular expression matching fails.|
 
 
 ## Events
 
-| Name                                     | Description                              |
+| Name                                      | Description                                    |
 | ---------------------------------------- | ---------------------------------------- |
-| onChange(callback: (value: string) =&gt; void) | Triggered when the input changes.        |
-| onCopy<sup>8+</sup>(callback:(value: string) =&gt; void) | Triggered when the copy button on the pasteboard, which displays when the text box is long pressed, is clicked.<br/>**value**: text to be copied. |
-| onCut<sup>8+</sup>(callback:(value: string) =&gt; void) | Triggered when the cut button on the pasteboard, which displays when the text box is long pressed, is clicked.<br/>**value**: text to be cut. |
-| onPaste<sup>8+</sup>(callback:(value: string) =&gt; void) | Triggered when the paste button on the pasteboard, which displays when the text box is long pressed, is clicked.<br/>**value**: text to be pasted. |
+| onChange(callback: (value: string) =&gt; void) | Triggered when the input changes.                           |
+| onCopy<sup>8+</sup>(callback:(value: string) =&gt; void) | Triggered when the copy button on the pasteboard, which displays when the text box is long pressed, is clicked.<br>**value**: text to be copied.|
+| onCut<sup>8+</sup>(callback:(value: string) =&gt; void) | Triggered when the cut button on the pasteboard, which displays when the text box is long pressed, is clicked.<br>**value**: text to be cut.|
+| onPaste<sup>8+</sup>(callback:(value: string) =&gt; void) | Triggered when the paste button on the pasteboard, which displays when the text box is long pressed, is clicked.<br>**value**: text to be pasted.|
 
 ## TextAreaController<sup>8+</sup>
 
-Defines the controller for controlling the **&lt;TextArea&gt;** component.
+Defines the controller for controlling the **\<TextArea>** component.
 
 ### Objects to Import
 
@@ -77,10 +69,11 @@ caretPosition(value: number): void
 
 Sets the position of the caret.
 
-- Parameters
-  | Name  | Type   | Mandatory | Default Value | Description                                                  |
-  | ----- | ------ | --------- | ------------- | ------------------------------------------------------------ |
-  | value | number | Yes       | -             | Length from the start of the text string to the position where the caret is located. |
+**Parameters**
+
+| Name  | Type  | Mandatory  | Default Value | Description               |
+| ----- | ------ | ---- | ---- | ------------------- |
+| value | number | Yes   | -    | Length from the start of the string to the position where the caret is located.|
 
 
 ## Example
@@ -88,7 +81,6 @@ Sets the position of the caret.
 
 ### Multi-line Text Input
 
-
 ```ts
 // xxx.ets
 @Entry
diff --git a/en/application-dev/reference/arkui-ts/ts-container-column.md b/en/application-dev/reference/arkui-ts/ts-container-column.md
index c2e9e856a502b08f76fe470949209402e3f20ef5..40643318db567031b2995415345218341def9482 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-column.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-column.md
@@ -1,11 +1,11 @@
 # Column
 
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
-> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-
+The **\<Column>** component lays out child components vertically.
 
-The **&lt;Column&gt;** component lays out child components vertically.
+> **NOTE**
+>
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 ## Required Permissions
@@ -20,34 +20,27 @@ This component can contain child components.
 
 ## APIs
 
-Column(value:{space?: Length})
-
+Column(value?:{space?: string | number})
 
-- Parameters
-    | Name  | Type   | Mandatory | Default Value | Description                              |
-    | ----- | ------ | --------- | ------------- | ---------------------------------------- |
-    | space | Length | No        | 0             | Space between any two adjacent child components in the vertical layout. |
+**Parameters**
+| Name| Type| Mandatory| Default Value| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| space | string\|numbe | No| 0 | Space between two adjacent child components in the vertical layout.|
 
 
 ## Attributes
 
-| Name                        | Type                              | Default Value          | Description                              |
-| --------------------------- | --------------------------------- | ---------------------- | ---------------------------------------- |
-| alignItems                  | HorizontalAlign                   | HorizontalAlign.Center | Alignment mode of child components in the horizontal direction. |
-| justifyContent<sup>8+</sup> | [FlexAlign](ts-container-flex.md) | FlexAlign.Start        | Alignment mode of child components in the vertical direction. |
+| Name| Type| Default Value| Description|
+| -------- | -------- | -------- | -------- |
+| alignItems | [HorizontalAlign](ts-appendix-enums.md#horizontalalign) | HorizontalAlign.Center | Alignment mode of the child components in the horizontal direction.|
+| justifyContent<sup>8+</sup> | [FlexAlign](ts-container-flex.md) | FlexAlign.Start | Alignment mode of the child components in the vertical direction.|
 
-- HorizontalAlign enums
-    | Name   | Description                              |
-    | ------ | ---------------------------------------- |
-    | Start  | Aligned with the start edge in the same direction as the language in use. |
-    | Center | Center alignment. This is the default alignment mode. |
-    | End    | Aligned with the end edge in the same direction as the language in use. |
 
 
 ## Example
 
-
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ColumnExample {
@@ -76,6 +69,7 @@ struct ColumnExample {
           Column().width('30%').height(30).backgroundColor(0xAFEEEE)
           Column().width('30%').height(30).backgroundColor(0x00FFFF)
         }.height('15%').border({ width: 1 }).justifyContent(FlexAlign.Center)
+
         Text('justifyContent(End)').fontSize(9).fontColor(0xCCCCCC).width('90%')
         Column() {
           Column().width('30%').height(30).backgroundColor(0xAFEEEE)
@@ -86,4 +80,4 @@ struct ColumnExample {
 }
 ```
 
-![](figures/Column.png)
+![Column](figures/Column.png)
diff --git a/en/application-dev/reference/arkui-ts/ts-container-flex.md b/en/application-dev/reference/arkui-ts/ts-container-flex.md
index 8339c8e8c2b90688a371c00b02459a4a0f4f8b53..f3c9720cc06f94c3a1d5bb152c7917d8e6960f7e 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-flex.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-flex.md
@@ -3,8 +3,8 @@
 The **\<Flex>** component allows for elastic layout of child components.
 
 > **NOTE**
-> - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-> - The **\<Flex>** component adapts the layout of flex items to comply with the **flexShrink** and **flexGrow** settings. This may affect the performance. Therefore, you are advised to use **[Column](ts-container-column.md)** or **[Row](ts-container-row.md)** instead under scenarios where consistently high performance is required.
+> 
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 ## Required Permissions
@@ -19,50 +19,24 @@ This component can contain child components.
 
 ## APIs
 
-Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap,  justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign })
+Flex(value?: { direction?: FlexDirection, wrap?: FlexWrap,  justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign })
 
 Creates a standard **\<Flex>** component.
 
-**Parameters**
-
-| Name           | Type                                    | Mandatory  | Default Value              | Description                                    |
-| -------------- | ---------------------------------------- | ---- | ----------------- | ---------------------------------------- |
-| direction      | FlexDirection                            | No   | FlexDirection.Row | Direction in which child components are arranged in the **\<Flex>** component, that is, the direction of the main axis.                |
-| wrap           | FlexWrap                                 | No   | FlexWrap.NoWrap   | Whether the **\<Flex>** component has a single line or multiple lines.                    |
-| justifyContent | FlexAlign                                | No   | FlexAlign.Start   | Alignment mode of the child components in the **\<Flex>** component along the main axis.                     |
-| alignItems     | [ItemAlign](ts-appendix-enums.md#itemalign-enums)| No   | ItemAlign.Stretch | Alignment mode of the child components in the **\<Flex>** component along the cross axis.                    |
-| alignContent   | FlexAlign                                | No   | FlexAlign.Start   | Alignment mode of the child components in a multi-line **<Flex>** component along the cross axis. This parameter is valid only when **wrap** is set to **Wrap** or **WrapReverse**.|
-
-## FlexDirection
-| Name           | Description              |
-| ------------- | ---------------- |
-| Row           | The child components are arranged in the same direction as the main axis runs along the rows. |
-| RowReverse    | The child components are arranged opposite to the **Row** direction. |
-| Column        | The child components are arranged in the same direction as the main axis runs down the columns. |
-| ColumnReverse | The child components are arranged opposite to the **Column** direction.|
-
-## FlexWrap enums
-| Name       | Description                                             |
-| ----------- | ------------------------------------------------- |
-| NoWrap      | The child components in the **\<Flex>** component are arranged in a single line, and they cannot overflow.  |
-| Wrap        | The child components in the **\<Flex>** component are arranged in multiple lines, and they may overflow.    |
-| WrapReverse | The child components in the **\<Flex>** component are reversely arranged in multiple lines, and they may overflow.|
-
-## FlexAlign enums
-| Name        | Description                                                        |
-| ------------ | ------------------------------------------------------------ |
-| Start        | The child components are aligned with the start edge of the main axis. The first component is aligned with the main-start, and subsequent components are aligned with the previous one.|
-| Center       | The child components are aligned in the center of the main axis. The space between the first component and the main-start is the same as that between the last component and the main-end.|
-| End          | The child components are aligned with the end edge of the main axis. The last component is aligned with the main-end, and other components are aligned with the next one.|
-| SpaceBetween | The child components are evenly distributed along the main axis. The space between any two adjacent components is the same. The first component is aligned with the main-start, the last component is aligned with the main-end, and the remaining components are distributed so that the space between any two adjacent components is the same. |
-| SpaceAround  | The child components are evenly distributed along the main axis. The space between any two adjacent components is the same. The space between the first component and main-start, and that between the last component and cross-main are both half the size of the space between two adjacent components. |
-| SpaceEvenly  | The child components are equally distributed along the main axis. The space between the first component and main-start, the space between the last component and main-end, and the space between two adjacent components are the same.|
+- Parameters
+  | Name           | Type                                    | Mandatory  | Default Value              | Description                                    |
+  | -------------- | ---------------------------------------- | ---- | ----------------- | ---------------------------------------- |
+  | direction      | [FlexDirection](ts-appendix-enums.md#flexdirection) | No   | FlexDirection.Row | Direction in which child components are arranged in the **\<Flex>** component, that is, the direction of the main axis.                |
+  | wrap           | [FlexWrap](ts-appendix-enums.md#flexwrap)  | No   | FlexWrap.NoWrap   | Whether the **\<Flex>** component has a single line or multiple lines.                    |
+  | justifyContent | [FlexAlign](ts-appendix-enums.md#flexalign) | No   | FlexAlign.Start   | Alignment mode of the child components in the **\<Flex>** component along the main axis.                     |
+  | alignItems     | [ItemAlign](ts-appendix-enums.md#itemalign) | No   | ItemAlign.Stretch | Alignment mode of the child components in the **\<Flex>** component along the cross axis.                    |
+  | alignContent   | [FlexAlign](ts-appendix-enums.md#flexalign) | No   | FlexAlign.Start   | Alignment mode of the child components in a multi-line **<Flex>** component along the cross axis. This parameter is valid only when **wrap** is set to **Wrap** or **WrapReverse**.|
 
 
 ## Example
 
-```
-// Example 01
+```ts
+// xxx.ets
 @Entry
 @Component
 struct FlexExample1 {
@@ -124,8 +98,8 @@ struct FlexExample1 {
 
 ![en-us_image_0000001256978365](figures/en-us_image_0000001256978365.gif)
 
-```
-// Example 02
+```ts
+// xxx.ets
 @Entry
 @Component
 struct FlexExample2 {
@@ -170,8 +144,8 @@ struct FlexExample2 {
 
 ![en-us_image_0000001211898500](figures/en-us_image_0000001211898500.png)
 
-```
-// Example 03
+```ts
+// xxx.ets
 @Component
 struct JustifyContentFlex {
   @Prop justifyContent : number
@@ -219,8 +193,8 @@ struct FlexExample3 {
 
 ![en-us_image_0000001212218462](figures/en-us_image_0000001212218462.gif)
 
-```
-// Example 04
+```ts
+// xxx.ets
 @Component
 struct AlignItemsFlex {
   @Prop alignItems : number
@@ -270,8 +244,8 @@ struct FlexExample4 {
 
 ![en-us_image_0000001212378426](figures/en-us_image_0000001212378426.gif)
 
-```
-// Example 05
+```ts
+// xxx.ets
 @Component
 struct AlignContentFlex {
   @Prop alignContent: number
diff --git a/en/application-dev/reference/arkui-ts/ts-container-row.md b/en/application-dev/reference/arkui-ts/ts-container-row.md
index 628b9672084d28207535f29c32745d3f4eb23a06..92cc72bcf480702c702ee77e6f26667846ba1020 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-row.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-row.md
@@ -1,11 +1,12 @@
 # Row
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
-> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-
 
 The **<Row\>** component lays out child components horizontally.
 
+> **NOTE**
+>
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+
 
 ## Required Permissions
 
@@ -19,32 +20,26 @@ Supported
 
 ## APIs
 
-Row(value:{space?: Length})
+Row(value?:{space?: string&nbsp;|&nbsp;number})
 
-- Parameters
-  | Name| Type| Mandatory| Default Value| Description| 
-  | -------- | -------- | -------- | -------- | -------- |
-  | space | Length | No| 0 | Space between two adjacent child components in the horizontal layout.| 
+**Parameters**
+| Name| Type| Mandatory| Default Value| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| space | string&nbsp;\|&nbsp;number | No| 0 | Space between two adjacent child components in the horizontal layout.|
 
 
 ## Attributes
 
 | Name| Type| Default Value| Description|
 | -------- | -------- | -------- | -------- |
-| alignItems | VerticalAlign | VerticalAlign.Center | Alignment mode of the child components in the vertical direction.|
-| justifyContent8+ | [FlexAlign](ts-container-flex.md) | FlexAlign.Start | Alignment mode of the child components in the horizontal direction.|
-
-- VerticalAlign enums
-  | Name| Description| 
-  | -------- | -------- |
-  | Top | Top aligned.| 
-  | Center | Center aligned. This is the default alignment mode.| 
-  | Bottom | Bottom aligned.|
+| alignItems | [VerticalAlign](ts-appendix-enums.md#verticalalign) | VerticalAlign.Center | Alignment mode of the child components in the vertical direction.|
+| justifyContent<sup>8+</sup> | [FlexAlign](ts-appendix-enums.md#flexalign) | FlexAlign.Start | Alignment mode of the child components in the horizontal direction.|
 
 
 ## Example
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct RowExample {
@@ -84,4 +79,4 @@ struct RowExample {
 }
 ```
 
-![en_image_0000001174422908](figures/row.png)
+![en-us_image_0000001174422908](figures/row.png)
diff --git a/en/application-dev/reference/arkui-ts/ts-container-scroll.md b/en/application-dev/reference/arkui-ts/ts-container-scroll.md
index 81edff951af0f08598b7a85ca212555e989c709e..4f8b82a428d7879f5b0ecdc409b37ac6dbb109c3 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-scroll.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-scroll.md
@@ -1,11 +1,12 @@
 # Scroll
 
 
-> **NOTE**
-> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+The **\<Scroll>** component scrolls the content when the layout size of a component exceeds the viewport of its parent component.
 
 
-The **\<Scroll>** component scrolls the content when the layout size of a component exceeds the viewport of its parent component.
+> **NOTE**
+>  - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+>  - This component can produce a bounce effect only when there is more than one screen of content.
 
 
 ## Required Permissions
@@ -28,24 +29,26 @@ Scroll(scroller?: Scroller)
 | Name       | Type      | Default Value      | Description |
 | -------- | -------- | -------- | -------- |
 | scrollable     | ScrollDirection   | ScrollDirection.Vertical | Scroll method. |
-| scrollBar      | [BarState](ts-appendix-enums.md#barstate-enums) | ScrollDirection.Auto | Scrollbar status. |
-| scrollBarColor | Color | - | Color of the scrollbar. |
-| scrollBarWidth | Length | - | Width of the scrollbar. |
+| scrollBar      | [BarState](ts-appendix-enums.md#barstate) | BarState.Off | Scrollbar status. |
+| scrollBarColor | string&nbsp;\|&nbsp;number&nbsp;\|&nbsp;Color | - | Color of the scrollbar. |
+| scrollBarWidth | string&nbsp;\|&nbsp;number | - | Width of the scrollbar. |
+| edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | EdgeEffect.Spring | Scroll effect. For details, see **EdgeEffect**. |
 
-- ScrollDirection
-  | Name       | Description |
-  | -------- | -------- |
-  | Horizontal | Only horizontal scrolling is supported. |
-  | Vertical | Only vertical scrolling is supported. |
-  | None     | Scrolling is disabled. |
+## ScrollDirection
+| Name       | Description |
+| -------- | -------- |
+| Horizontal | Only horizontal scrolling is supported. |
+| Vertical | Only vertical scrolling is supported. |
+| None     | Scrolling is disabled. |
+| Free       | Both horizontal scrolling and vertical scrolling are supported. |
 
 ## Events
 
 | Name | Description |
 | -------- | -------- |
-| onScroll(xOffset: number, yOffset: number) =&gt; void | Invoked when scrolling starts. It returns the horizontal and vertical offsets. |
-| onScrollEdge(side: Edge) =&gt; void | Invoked when scrolling reaches the edge. |
-| onScrollEnd() =&gt; void | Invoked when scrolling stops. |
+| onScroll(event: (xOffset: number, yOffset: number) => void) | Invoked when scrolling starts. It returns the horizontal and vertical offsets. |
+| onScrollEdge(event: (side: Edge) => void) | Invoked when scrolling reaches the edge. |
+| onScrollEnd(event: () => void) | Invoked when scrolling stops. |
 
 
 ## Scroller
@@ -68,58 +71,46 @@ scrollTo(value: { xOffset: number | string, yOffset: number | string, animation?
 
 Scrolls to the specified position.
 
+**Parameters**
 
-- Parameters
-    | Name | Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | xOffset | Length | Yes | - | Horizontal scrolling offset. |
-  | yOffset | Length | Yes | - | Vertical scrolling offset. |
-  | animation | {<br/>duration: number,<br/>curve: Curve \|<br/>CubicBezier \|<br/>SpringCurve<br/>} | No |  | Animation configuration, which includes the following:<br/>- **duration**: scrolling duration.<br/>- **curve**: scrolling curve. |
+| Name | Type | Mandatory | Default Value | Description |
+| -------- | -------- | -------- | -------- | -------- |
+| xOffset | number&nbsp;\|&nbsp;string | Yes | - | Horizontal scrolling offset. |
+| yOffset | number&nbsp;\|&nbsp;string | Yes | - | Vertical scrolling offset. |
+| animation | {<br/>duration:&nbsp;number,<br/>curve:&nbsp;[Curve](ts-animatorproperty.md)&nbsp;<br/>} | No |  | Animation configuration, which includes the following:<br/>- **duration**: scrolling duration.<br/>- **curve**: scrolling curve. |
 
 
 ### scrollEdge
 
-scrollEdge(value: Edge): void
+scrollEdge(value: [Edge](ts-appendix-enums.md#edge)): void
 
 
 Scrolls to the edge of the container.
 
-
-- Parameters
-    | Name | Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | value | Edge | Yes | - | Edge position to scroll to. |
-
-
 ### scrollPage
 
 scrollPage(value: { next: boolean, direction?: Axis }): void
 
 Scrolls to the next or previous page.
 
-- Parameters
-    | Name | Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | next | boolean | Yes | - | Whether to turn to the next page. The value **true** means to scroll to the next page, and the value **false** means to scroll to the previous page. |
+**Parameters**
+
+| Name | Type | Mandatory | Default Value | Description |
+| -------- | -------- | -------- | -------- | -------- |
+| next | boolean | Yes | - | Whether to turn to the next page. The value **true** means to scroll to the next page, and the value **false** means to scroll to the previous page. |
+| direction | [Axis](ts-appendix-enums.md#axis) | No | - | Scrolling direction: horizontal or vertical. |
 
 
 ### currentOffset
 
-scroller.currentOffset(): Object
+currentOffset()
 
 
 Obtains the scrolling offset.
 
+### scrollToIndex
 
-- Return value
-    | Type | Description |
-  | -------- | -------- |
-  | {<br/>xOffset: number,<br/>yOffset: number<br/>} | **xOffset**: horizontal scrolling offset.<br/>**yOffset**: vertical scrolling offset. |
-
-
-### scroller.scrollToIndex
-
-scroller.scrollToIndex(value: number): void
+scrollToIndex(value: number): void
 
 
 Scrolls to the specified index.
@@ -140,7 +131,8 @@ Scrolls to the specified index.
 ## Example
 
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ScrollExample {
diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components-shape.md b/en/application-dev/reference/arkui-ts/ts-drawing-components-shape.md
index 5c17b095ddbf3fe50dabe66f1db4cf15331d1f02..02ba94262e0068bac7f2648c04e1bb40793e9a7c 100644
--- a/en/application-dev/reference/arkui-ts/ts-drawing-components-shape.md
+++ b/en/application-dev/reference/arkui-ts/ts-drawing-components-shape.md
@@ -1,17 +1,17 @@
 # Shape
 
-
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
-> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+The **\<Shape>** component is the parent component of the drawing components. The attributes described in this topic are universal attributes supported by all the drawing components.
 
 
-The **&lt;Shape&gt;** component is the parent component of the drawing components. The attributes described in this topic are universal attributes supported by all the drawing components.
+1. Drawing components use **\<Shape>** as their parent to implement the effect similar to SVG.
 
 
-1. The drawing components use **&lt;Shape&gt;** as the parent component to implement the effect similar to SVG.
+2. The **\<Shape>** component is used independently to draw a specific shape.
 
 
-2. The **&lt;Shape&gt;** component is used independently to draw a specific shape.
+>  **NOTE**
+> 
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 ## Required Permissions
@@ -21,47 +21,43 @@ None
 
 ## Child Components
 
-The **&lt;Shape&gt;** component can contain child components.
+This component can contain child components.
 
 
 ## APIs
 
-Shape(value:{target?: PixelMap})
+Shape(value?: PixelMap)
 
 - Parameters
-    | Name | Type | Mandatory | Default Value | Description | 
+  | Name| Type| Mandatory| Default Value| Description|
   | -------- | -------- | -------- | -------- | -------- |
-  | target | PixelMap | No | null | Shape to draw. You can draw a shape in the specified **PixelMap** object. If no object is specified, the shape is drawn in the current drawing target. | 
+  | value | PixelMap | No| - | Shape to draw. You can draw a shape in the specified **PixelMap** object. If no object is specified, the shape is drawn in the current drawing target.|
 
 
 ## Attributes
 
-  | Name | Type | Default Value | Mandatory | Description | 
-| -------- | -------- | -------- | -------- | -------- |
-| viewPort | {<br/>x: Length,<br/>y: Length,<br/>width: Length,<br/>height: Length<br/>} | - | Yes | View port of the shape. | 
-| fill | Color | Black | No | Fill color. | 
-| stroke | Color | - | No | Stroke color. | 
-| strokeDashArray | Array&lt;Length&gt; | [] | No | Stroke dash. | 
-| strokeDashOffset | Length | 0 | No | Offset of the start point for drawing the stroke. | 
-| strokeLineCap | LineCapStyle | LineCapStyle.Butt | No | Cap style of the stroke. | 
-| strokeLineJoin | LineJoinStyle | LineJoinStyle.Miter | No | Join style of the stroke. | 
-| strokeMiterLimit | number | 4 | No | Limit value when the sharp angle is drawn as a miter. | 
-| strokeOpacity | number | 1 | No | Stroke opacity. | 
-| strokeWidth | Length | 1 | No | Stroke width. | 
-| antiAlias | boolean | true | No | Whether anti-aliasing is enabled. | 
-
-- LineJoinStyle enums
-    | Name | Description | 
-  | -------- | -------- |
-  | Bevel | Bevel is used to connect paths. | 
-  | Miter | Miter is used to connect paths. | 
-  | Round | Round is used to connect paths. | 
+In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
 
+| Name| Type| Default Value| Mandatory| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| viewPort | {<br>x?: number \| string,<br>y?: number \| string,<br>width?: number \| string,<br>height?: number \| string<br>} | { x:0, y:0, width:0, height:0 } | No| View port of the shape.|
+| fill | [ResourceColor](../../ui/ts-types.md) | Color.Black | No| Color of the fill area.|
+| fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource-type)| 1 | No| Opacity of the fill area.|
+| stroke | [ResourceColor](../../ui/ts-types.md) | Color.Black | No| Stroke color.|
+| strokeDashArray | Array&lt;Length&gt; | [] | No| Stroke dash.|
+| strokeDashOffset | number \| string | 0 | No| Offset of the start point for drawing the stroke.|
+| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | No| Cap style of the stroke.|
+| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | No| Join style of the stroke.|
+| strokeMiterLimit | number \| string | 4 | No| Limit value when the sharp angle is drawn as a miter.|
+| strokeOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource-type)| 1 | No| Stroke opacity.|
+| strokeWidth | number \| string | 1 | No| Stroke width.|
+| antiAlias | boolean | true | No| Whether anti-aliasing is enabled.|
+| mesh<sup>8+</sup> | Array&lt;number&gt;,number,number | [],0,0 | No| Mesh effect. The first parameter is an array of lengths (column + 1) * (row + 1) * 2, which records the position of each vertex of the distorted bitmap. The second parameter is the number of columns in the mesh matrix. The third parameter is the number of rows in the mesh matrix.|
 
 ## Example
 
-  
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ShapeExample {
@@ -70,7 +66,7 @@ struct ShapeExample {
       Text('basic').fontSize(30).fontColor(0xCCCCCC).width(320)
       // Draw a 300 x 50 rectangle with strokes at (-2, -2). The fill color is 0x317Af7, the stroke color is black, the stroke width is 4, the stroke dash is 20, the offset is 10 to the left, the cap style is rounded, the join style is rounded, and anti-aliasing is enabled (default).
       // Draw a 300 x 50 ellipse with strokes at (-2, 58). The fill color is 0x317Af7, the stroke color is black, the stroke width is 4, the stroke dash is 20, the offset is 10 to the left, the cap style is rounded, the join style is rounded, and anti-aliasing is enabled (default).
-      // Draw a 300 x 10 path at (-2, 118). The fill color is 0x317Af7, the stroke color is black, the stroke width is 4, the stroke dash is 20, the offset is 10 to the left, the cap style is rounded, and the join style is rounded, and anti-aliasing is enabled (default).
+      // Draw a 300 x 10 path at (-2, 118). The fill color is 0x317Af7, the stroke color is black, the stroke width is 4, the stroke dash is 20, the offset is 10 to the left, the cap style is rounded, the join style is rounded, and anti-aliasing is enabled (default).
       Shape() {
         Rect().width(300).height(50)
         Ellipse().width(300).height(50).offset({ x: 0, y: 60 })
@@ -90,7 +86,7 @@ struct ShapeExample {
       Shape() {
         Path().width(300).height(10).commands('M0 0 L900 0')
       }.viewPort({ x: 0, y: -5, width: 300, height: 20 }).stroke(0xEE8443).strokeWidth(10).strokeDashArray([20])
-      // Draw a 300 x 10 path at (0, -5). The fill color is 0xEE8443, the stroke width is 10, the stroke gap is 20, and the offset is 10 to the left.
+      // Draw a 300 x 10 path at (0, -5). The fill color is 0xEE8443, the stroke width is 10, the stroke dash is 20, and the offset is 10 to the left.
       Shape() {
         Path().width(300).height(10).commands('M0 0 L900 0')
       }
diff --git a/en/application-dev/reference/arkui-ts/ts-explicit-animation.md b/en/application-dev/reference/arkui-ts/ts-explicit-animation.md
index d3a75465226905a1a9b144f09dffd50d5a7ee0a7..b38389f2ee64721e72242882f9746cb7b0545eba 100644
--- a/en/application-dev/reference/arkui-ts/ts-explicit-animation.md
+++ b/en/application-dev/reference/arkui-ts/ts-explicit-animation.md
@@ -1,37 +1,40 @@
 # Explicit Animation
 
+You can create explicit animation with your custom settings.
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
-> This animation is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+>  **NOTE**
+>
+>  The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-| Name | Description |
-| -------- | -------- |
-| animateTo(value: [AnimationOptions](#animationoptions), event: ()=&gt; void) : void | Provides a transition animation when the status changes due to the closure code.<br/>**event** specifies the closure function that displays the dynamic effect. The system automatically inserts the transition animation if the status changes in the closure function. |
+
+| API                                                    | Description                                                    |
+| ------------------------------------------------------------ | ------------------------------------------------------------ |
+| animateTo(value: [AnimationOptions](#animationoptions), event: ()=&gt; void) : void | Provides a transition animation when the status changes due to the closure code.<br>**event** specifies the closure function that displays the dynamic effect. The system automatically inserts the transition animation if the status changes in the closure function.|
 
 
 ## AnimationOptions
 
 - Attributes
-    | Name | Type | Default Value | Description |
+  | Name| Type| Default Value| Description|
   | -------- | -------- | -------- | -------- |
-  | duration | number | 1000 | Animation duration, in ms. |
-  | tempo | number | 1.0 | Animation playback speed. A larger value indicates faster animation playback, and a smaller value indicates slower animation playback. The value **0** means that there is no animation. |
-  | curve | Curve \| Curves | Linear | Animation curve. |
-  | delay | number | 0 | Delay of animation playback, in ms. By default, the playback is not delayed. |
-  | iterations | number | 1 | Number of times that the animation is played. By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times. |
-  | playMode | PlayMode | Normal | Animation playback mode. By default, the animation is played from the beginning after the playback is complete. |
+  | duration | number | 1000 | Animation duration, in ms.|
+  | tempo | number | 1.0 | Animation playback speed. A larger value indicates faster animation playback, and a smaller value indicates slower animation playback. The value **0** means that there is no animation.|
+  | curve | Curve \| Curves | Linear | Animation curve.|
+  | delay | number | 0 | Delay of animation playback, in ms. By default, the playback is not delayed.|
+  | iterations | number | 1 | Number of times that the animation is played. By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times.|
+  | playMode | [PlayMode](ts-appendix-enums.md#playmode) | Normal | Animation playback mode. By default, the animation is played from the beginning after the playback is complete.|
 
 
 - APIs
-    | Name | Description |
+  | Name| Description|
   | -------- | -------- |
-  | onFinish() =&gt; void | Callback invoked when the animation playback is complete. |
+  | onFinish() =&gt; void | Callback invoked when the animation playback is complete.|
 
 
 ## Example
 
-
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct AnimateToExample {
@@ -46,15 +49,15 @@ struct AnimateToExample {
         .height(this.heightSize)
         .backgroundColor(0x317aff)
         .onClick((event: ClickEvent) => {
-          // Animation configuration for the width and height attributes of the Button component
+          // Animation configuration for the width and height attributes of the <Button> component
           if (this.flag) {
             animateTo({
-            duration: 1000, // Animation duration
-            tempo: 0.5, // Playback speed
-            curve: Curve.EaseInOut, // Animation curve
-            delay: 200, // Animation delay
-          iterations: 1, // Number of playback times
-            playMode: PlayMode.Normal, // Animation mode
+              duration: 1000, // Animation duration
+              tempo: 0.5, // Playback speed
+              curve: Curve.EaseInOut, // Animation curve
+              delay: 200, // Animation delay
+              iterations: 1, // Number of playback times
+              playMode: PlayMode.Normal // Animation playback mode
               onFinish: () => {
                 console.info('play end')
               }
@@ -64,11 +67,11 @@ struct AnimateToExample {
             })
           } else {
             animateTo({
-            duration: 200, // Animation duration
-            curve: Curve.Ease, // Animation curve
-            delay: 200, // Animation delay
-          iterations: 1, // Number of playback times
-            playMode: PlayMode.Normal, // Animation mode
+              duration: 200, // Animation duration
+              curve: Curve.Ease, // Animation curve
+              delay: 200, // Animation delay
+              iterations: 1, // Number of playback times
+              playMode: PlayMode.Normal // Animation playback mode
               onFinish: () => {
                 console.info('play end')
               }
diff --git a/en/application-dev/reference/arkui-ts/ts-media-components-video.md b/en/application-dev/reference/arkui-ts/ts-media-components-video.md
index 22796e41395c09a88169de59c15ada25a52d62ba..feb0be7fbc61f43b4c1c1b347c6cf75c330bfa91 100644
--- a/en/application-dev/reference/arkui-ts/ts-media-components-video.md
+++ b/en/application-dev/reference/arkui-ts/ts-media-components-video.md
@@ -1,10 +1,11 @@
 # Video
 
+The **\<Video>** component provides a video player.
+
 > **NOTE**
 >
 > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-The **\<Video>** component provides a video player.
 
 ## Required Permissions
 
@@ -26,31 +27,30 @@ Not supported
 
 ## APIs
 
-Video(value: VideoOptions)
-
-- VideoOptions attributes
-  | Name| Type| Mandatory| Default Value| Description|
-  | -------- | -------- | -------- | -------- | -------- |
-  | src | string \| [Resource](../../ui/ts-types.md) | No| - | Path of the video source, which can be a local path or a URL.<br>The video resources can be stored in the **video** or **rawfile** folder under **resources**.<br>The path can include a **dataability://** prefix, which is used to access the video path provided by a Data ability. For details about the path, see [Data Ability Development](../../ability/fa-dataability.md).|
-  | currentProgressRate | number \| PlaybackSpeed<sup>8+</sup> | No| 1.0 \| PlaybackSpeed.<br>Speed_Forward_1_00_X | Video playback speed.<br>**NOTE**<br>The value of the number type can only be **0.75**, **1.0**, **1.25**, **1.75**, or **2.0**. |
-  | previewUri | string \| PixelMap<sup>8+</sup> \| [Resource](../../ui/ts-types.md) | No| - | Path of the preview image.|
-  | controller | [VideoController](#videocontroller) | No| - | Controller.|
-
-
-- PlaybackSpeed<sup>8+</sup>
-  | Name                 | Description           |
-  | -------------------- | --------------------- |
-  | Speed_Forward_0_75_X | 0.75x playback speed. |
-  | Speed_Forward_1_00_X | 1x playback speed.    |
-  | Speed_Forward_1_25_X | 1.25x playback speed. |
-  | Speed_Forward_1_75_X | 1.75x playback speed. |
-  | Speed_Forward_2_00_X | 2x playback speed.    |
+Video(value: {src?: string | Resource, currentProgressRate?: number | string | PlaybackSpeed, previewUri?: string | PixelMap | Resource, controller?: VideoController}) 
+
+**Parameters**
+| Name| Type| Mandatory| Default Value| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| src | string \| [Resource](ts-types.md#resource) | No| - | Path of the video source, which can be a local path or a URL.<br>The video resources can be stored in the **video** or **rawfile** folder under **resources**.<br>The path can include a **dataability://** prefix, which is used to access the video path provided by a Data ability. For details about the path, see [Data Ability Development](../../ability/fa-dataability.md).|
+| currentProgressRate | number \| PlaybackSpeed<sup>8+</sup>  | No| 1.0 \| PlaybackSpeed.<br>Speed_Forward_1_00_X | Video playback speed.<br>**NOTE**<br>The value of the number type can only be **0.75**, **1.0**, **1.25**, **1.75**, or **2.0**. |
+| previewUri | string \| PixelMap<sup>8+</sup> \| [Resource](ts-types.md#resource) | No| - | Path of the preview image.|
+| controller | [VideoController](#videocontroller) | No| - | Controller.|
+
+## PlaybackSpeed<sup>8+</sup>
+| Name                 | Description           |
+| -------------------- | --------------------- |
+| Speed_Forward_0_75_X | 0.75x playback speed. |
+| Speed_Forward_1_00_X | 1x playback speed.    |
+| Speed_Forward_1_25_X | 1.25x playback speed. |
+| Speed_Forward_1_75_X | 1.75x playback speed. |
+| Speed_Forward_2_00_X | 2x playback speed.    |
 
 ## Attributes
 
 | Name      | Type                                     | Default Value | Description                                        |
 | --------- | ---------------------------------------- | ------------- | -------------------------------------------------- |
-| muted     | boolean                                  | false         | Whether the video is muted.                        |
+| muted     | boolean                                  | false         | Whether to mute the video.                         |
 | autoPlay  | boolean                                  | false         | Whether to enable auto play.                       |
 | controls  | boolean                                  | true          | Whether to display the video playback control bar. |
 | objectFit | [ImageFit](ts-basic-components-image.md) | Cover         | Video scale type.                                  |
@@ -61,14 +61,14 @@ Video(value: VideoOptions)
 
 | Name| Description|
 | -------- | -------- |
-| onStart() =&gt; void | Triggered when the video is played.|
-| onPause() =&gt; void | Triggered when the video playback is paused.|
-| onFinish() =&gt; void | Triggered when the video playback is finished.|
-| onError() =&gt; void | Triggered when the video playback fails.|
-| onPrepared(event?: { duration: number }) =&gt; void | Triggered when video preparation is complete. The video duration (in seconds) is obtained from **duration**.|
-| onSeeking(event?: { time: number }) =&gt; void | Triggered to report the time (in seconds) when the progress bar is being dragged.|
-| onSeeked(event?: { time: number }) =&gt; void | Triggered to report the playback time (in seconds) when the user finishes dragging the progress bar.|
-| onUpdate(event?: { time: number }) =&gt; void | Triggered once per 250 ms when the playback progress changes. The unit of the current playback time is second.|
+| onStart(event:() =&gt; void) | Triggered when the video is played.|
+| onPause(event:() =&gt; void) | Triggered when the video playback is paused.|
+| onFinish(event:() =&gt; void) | Triggered when the video playback is finished.|
+| onError(event:() =&gt; void) | Triggered when the video playback fails.|
+| onPrepared(callback:(event?: { duration: number }) =&gt; void) | Triggered when video preparation is complete. The video duration (in seconds) is obtained from **duration**.|
+| onSeeking(callback:(event?: { time: number }) =&gt; void) | Triggered to report the time (in seconds) when the progress bar is being dragged.|
+| onSeeked(callback:(event?: { time: number }) =&gt; void) | Triggered to report the playback time (in seconds) when the user finishes dragging the progress bar.|
+| onUpdate(callback:(event?: { time: number }) =&gt; void) | Triggered once per 250 ms when the playback progress changes. The unit of the current playback time is second.|
 
 
 ## VideoController
@@ -107,11 +107,11 @@ setCurrentTime(value: number)
 
 Sets the video playback position.
 
-- Parameters
+**Parameters**
 
-  | Name  | Type   | Mandatory | Default Value | Description                |
-  | ----- | ------ | --------- | ------------- | ------------------------ |
-  | value | number | Yes       | -             | Video playback position. |
+| Name  | Type   | Mandatory | Default Value | Description                |
+| ----- | ------ | --------- | ------------- | ------------------------ |
+| value | number | Yes       | -             | Video playback position. |
 
 ### requestFullscreen
 
@@ -119,7 +119,7 @@ requestFullscreen(value: boolean)
 
 Requests full-screen mode.
 
-- Parameters
+**Parameters**
 
 | Name  | Type   | Mandatory | Default Value | Description                                  |
 | ----- | ------ | --------- | ------------- | -------------------------------------------- |
@@ -137,21 +137,22 @@ setCurrentTime(value: number, seekMode: SeekMode)
 
 Sets the video playback position with the specified seek mode.
 
-- Parameters
+**Parameters**
+
+| Name     | Type     | Mandatory | Default Value | Description              |
+| -------- | -------- | --------- | ------------- | -----------------------  |
+| value    | number   | Yes       | -             | Video playback position. |
+| seekMode | SeekMode | Yes       | -             | Seek mode.               |
 
-  | Name     | Type     | Mandatory | Default Value | Description              |
-  | -------- | -------- | --------- | ------------- | -----------------------  |
-  | value    | number   | Yes       | -             | Video playback position. |
-  | seekMode | SeekMode | Yes       | -             | Seek mode.               |
+## SeekMode<sup>8+</sup>
 
-- SeekMode<sup>8+</sup>
+| Name             | Description                                                               |
+| ---------------- | ------------------------------------------------------------------------- |
+| PreviousKeyframe | Seeks to the nearest previous keyframe.                                   |
+| NextKeyframe     | Seeks to the nearest next keyframe.                                       |
+| ClosestKeyframe  | Seeks to the nearest keyframe.                                            |
+| Accurate         | Seeks to a specific frame, regardless of whether the frame is a keyframe. |
 
-  | Name             | Description                                                               |
-  | ---------------- | ------------------------------------------------------------------------- |
-  | PreviousKeyframe | Seeks to the nearest previous keyframe.                                   |
-  | NextKeyframe     | Seeks to the nearest next keyframe.                                       |
-  | ClosestKeyframe  | Seeks to the nearest keyframe.                                            |
-  | Accurate         | Seeks to a specific frame, regardless of whether the frame is a keyframe. |
 
 ## Example
 
diff --git a/en/application-dev/reference/arkui-ts/ts-methods-menu.md b/en/application-dev/reference/arkui-ts/ts-methods-menu.md
index f105d2ad5f1403529fd0aff5f8e2ba37491ce72a..2ec2ca6de9ac76320cc1d34aaf415dca81edcc48 100644
--- a/en/application-dev/reference/arkui-ts/ts-methods-menu.md
+++ b/en/application-dev/reference/arkui-ts/ts-methods-menu.md
@@ -1,39 +1,42 @@
 # Menu
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
-> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
+> **NOTE**
+>
+> This method is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
 ## ContextMenu.close
 
 close(): void
 
-Closes the menu bound to this component through [bindContextMenu](./ts-universal-attributes-menu.md#Atrributes) on a page.
+Closes the menu bound to this component through [bindContextMenu](./ts-universal-attributes-menu.md#atrributes) on a page.
 
-- Example
-  ```
-  @Entry
-  @Component
-  struct Index {
-    @Builder MenuBuilder(){
-      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-        Text('close')
-          .fontSize(30)
-          .fontWeight(FontWeight.Bold)
-          .onClick(() => {
-            ContextMenu.close();
-          })
-      }.height(400)
-      .backgroundColor(Color.Pink)
-  
-    }
-    build() {
-      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.Start }) {
-        Column(){
-          Text("Text")
-        }.bindContextMenu(this.MenuBuilder, ResponseType.LongPress)
-      }
-      .width('100%')
-      .height('100%')
+## Example
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct Index {
+  @Builder MenuBuilder(){
+    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+      Text('close')
+        .fontSize(30)
+        .fontWeight(FontWeight.Bold)
+        .onClick(() => {
+          ContextMenu.close();
+        })
+    }.height(400)
+    .backgroundColor(Color.Pink)
+  }
+
+  build() {
+    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.Start }) {
+      Column(){
+        Text("Text")
+      }.bindContextMenu(this.MenuBuilder, ResponseType.LongPress)
     }
+    .width('100%')
+    .height('100%')
   }
-  ```
+}
+```
diff --git a/en/application-dev/reference/arkui-ts/ts-transition-animation-component.md b/en/application-dev/reference/arkui-ts/ts-transition-animation-component.md
index ddc5ffc7a177b41595c6207c5f37b7dbd2ccde0a..8477a8a905c5f5a28c3bc4c31c5ac0e11ba6c910 100644
--- a/en/application-dev/reference/arkui-ts/ts-transition-animation-component.md
+++ b/en/application-dev/reference/arkui-ts/ts-transition-animation-component.md
@@ -1,42 +1,35 @@
 # Component Transition
 
+Configure the component transition animations for when a component is inserted or deleted. This feature takes effect only when **animateTo** is used. The animation duration, curve, and delay are the same as those configured in **animateTo**.
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
-> This animation is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-
-
-Configure the component transition animations for when a component is inserted or deleted, which improves user experience. This feature takes effect only when **animateTo** is used. The animation duration, curve, and delay are the same as those configured in **animateTo**.
+>  **NOTE**
+>
+>  The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 ## Attributes
 
-  | Name | Type | Default Value | Description | 
+
+| Name| Type| Default Value| Description|
 | -------- | -------- | -------- | -------- |
-| transition | Object | - | All parameters are optional. For details, see **transition** parameters. | 
+| transition | Object | - | All parameters are optional. For details, see **transition**.|
 
-- transition parameters
-    | Name | Type | Default Value | Mandatory | Description | 
+- transition
+  | Name| Type| Default Value| Mandatory| Description|
   | -------- | -------- | -------- | -------- | -------- |
-  | type | TransitionType | TransitionType.All | No | Transition type, which includes component addition and deletion by default.<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>> If **type** is not specified, insertion and deletion use the same transition type. | 
-  | opacity | number | 1 | No | Opacity effect during component transition, which is the value of the start point of insertion and the end point of deletion. | 
-  | translate | {<br/>x? : number,<br/>y? : number,<br/>z? : number<br/>} | - | No | Translation effect during component transition, which is the value of the start point of insertion and the end point of deletion. | 
-  | scale | {<br/>x? : number,<br/>y? : number,<br/>z? : number,<br/>centerX? : number,<br/>centerY? : number<br/>} | - | No | Scaling effect during component transition, which is the value of the start point of insertion and the end point of deletion. | 
-  | rotate | {<br/>x?: number,<br/>y?: number,<br/>z?: number,<br/>angle?: Angle,<br/>centerX?: Length,<br/>centerY?: Length<br/>} | - | No | Rotation effect during component transition, which is the value of the start point of insertion and the end point of deletion. | 
-
-- TransitionType enums
-    | Name | Description | 
-  | -------- | -------- |
-  | All | The transition takes effect in all scenarios. | 
-  | Insert | The transition takes effect when a component is inserted. | 
-  | Delete | The transition takes effect when a component is deleted. | 
+  | type | [TransitionType](ts-appendix-enums.md#transitiontype)  | TransitionType.All | No| Transition type, which includes component addition and deletion by default.<br>**NOTE**<br>If **type** is not specified, insertion and deletion use the same transition type.|
+  | opacity | number | 1 | No| Opacity of the component during transition, which is the value of the start point of insertion and the end point of deletion.|
+  | translate | {<br>x? : number,<br>y? : number,<br>z? : number<br>} | - | No| Translation of the component during transition, which is the value of the start point of insertion and the end point of deletion.<br>-**x**: distance to translate along the x-axis.<br>-**y**: distance to translate along the y-axis.<br>-**z**: distance to translate along the z-axis.|
+  | scale | {<br>x? : number,<br>y? : number,<br>z? : number,<br>centerX? : number,<br>centerY? : number<br>} | - | No| Scaling of the component during transition, which is the value of the start point of insertion and the end point of deletion.<br>- **x**: scale factor along the x-axis.<br>- **y**: scale factor along the y-axis.<br>- **z**: scale factor along the z-axis.<br>- **centerX** and **centerY**: x coordinate and y coordinate of the scale center, respectively.<br>- If the center point is 0, it indicates the upper left corner of the component. |
+  | rotate | {<br>x?: number,<br>y?: number,<br>z?: number,<br>angle?: Angle,<br>centerX?: Length,<br>centerY?: Length<br>} | - | No| Rotation of the component during transition, which is the value of the start point of insertion and the end point of deletion.<br>- **x**: rotation vector along the x-axis.<br>- **y**: rotation vector along the y-axis.<br>- **z**: rotation vector along the z-axis.<br>- **centerX** and **centerY**: x coordinate and y coordinate of the rotation center, respectively.<br>- If the center point is (0, 0), it indicates the upper left corner of the component.|
 
 
 ## Example
 
 The following example shows how to use a button to control the appearance and disappearance of another button, and how to configure the required transition animations.
 
-  
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TransitionExample {
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-background.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-background.md
index 160187ab4a3dfce60d7284b42692f6946e488de6..6b52e6d0856e7b9e048136a8ccef9bfe55571a7f 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-background.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-background.md
@@ -1,13 +1,12 @@
 # Background
 
+You can set the background of a component.
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
+> **NOTE**
+>
 > This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-The attributes in this topic are used to set the background color of a component.
-
-
 ## Required Permissions
 
 None
@@ -16,29 +15,22 @@ None
 ## Attributes
 
 
-| Name | Type | Default Value | Description |
-| -------- | -------- | -------- | -------- |
-| backgroundColor | Color | - | Background color of a component. |
-| backgroundImage | src: string,<br/>repeat?: [ImageRepeat](ts-appendix-enums.md#imagerepeat-enums) | - | **src**: image address, which can be the address of an Internet or a local image. (SVG images are not supported.)<br/>**repeat**: whether the background image is repeatedly used. By default, the background image is not repeatedly used. |
-| backgroundImageSize | {<br/>width?: Length,<br/>height?: Length<br/>} \| ImageSize | Auto | Width and height of the background image. When the input is a **{width: Length, height: Length}** object, if only one attribute is set, the other attribute is the set value multiplied by the original aspect ratio of the image. By default, the original image aspect ratio remains unchanged. |
-| backgroundImagePosition | {<br/>x?: Length,<br/>y?: Length<br/>} \| [Alignment](ts-appendix-enums.md#alignment-enums) | {<br/>x: 0,<br/>y: 0<br/>} | Position of the background image in the component. |
-
-
-- ImageSize enums
-    | Name | Description | 
-  | -------- | -------- |
-  | Cover | Default value. The image is scaled with its aspect ratio retained for both sides to be greater than or equal to the display boundaries. | 
-  | Contain | The image is scaled with its aspect ratio retained for the content to be completely displayed within the display boundaries. | 
-  | Auto | The original image aspect ratio is retained. | 
+| Name | Type | Description |
+| -------- | -------- | -------- |
+| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of a component. |
+| backgroundImage | src:&nbsp;[ResourceStr](ts-types.md#resourcestr),<br/>repeat?:&nbsp;[ImageRepeat](ts-appendix-enums.md#imagerepeat) | **src**: image address, which can be the address of an Internet or a local image. (SVG images are not supported.)<br/>**repeat**: whether the background image is repeatedly used. By default, the background image is not repeatedly used. |
+| backgroundImageSize | {<br/>width?:&nbsp;[Length](ts-types.md#length),<br/>height?:&nbsp;[Length](ts-types.md#length)<br/>}&nbsp;\|&nbsp;[ImageSize](ts-appendix-enums.md#imagesize) | Width and height of the background image. When the input is a **{width: Length, height: Length}** object, if only one attribute is set, the other attribute is the set value multiplied by the original aspect ratio of the image. By default, the original image aspect ratio remains unchanged.<br>Default value: **ImageSize.Auto** |
+| backgroundImagePosition | {<br/>x?:&nbsp;[Length](ts-types.md#length),<br/>y?:&nbsp;[Length](ts-types.md#length)<br/>}&nbsp;\|&nbsp;[Alignment](ts-appendix-enums.md#alignment) | Position of the background image in the component. |
 
 
 ## Example
 
-
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct BackgroundExample {
+
   build() {
     Column({ space: 5 }) {
       Text('background color').fontSize(9).width('90%').fontColor(0xCCCCCC)
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-border.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-border.md
index bd6bf94083d3c8fdf3158db736c2493f394faaa5..18dc661b910eeb6f334d67973c4b4eadfe55558c 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-border.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-border.md
@@ -1,52 +1,39 @@
 # Border
 
+The border attribute is used to set border styles for components.
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
-> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-
-
-The attributes described in this topic are used to set border styles.
-
-
-## Required Permissions
-
-None
+>  **NOTE**
+>
+>  The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 ## Attributes
 
 
-  | Name | Type | Default Value | Description | 
-| -------- | -------- | -------- | -------- |
-| border | {<br/>width?: Length,<br/>color?: Color,<br/>radius?: Length,<br/>style?: BorderStyle<br/>} | - | Sets a unified border style. | 
-| borderStyle | BorderStyle | BorderStyle.Solid | Sets the border style of an element. | 
-| borderWidth | Length | 0 | Sets the border width of an element. | 
-| borderColor | Color | - | Sets the border color of an element. | 
-| borderRadius | Length | 0 | Sets the border radius of an element. | 
-
+| Name        | Type     | Description                    |
+| ------------ | ------------- | ------------------------ |
+| border       | {<br/>width?:&nbsp;[Length](ts-types.md#length),<br/>color?:&nbsp;[ResourceColor](ts-types.md#resourcecolor),<br/>radius?:&nbsp;[Length](ts-types.md#length),<br/>style?:&nbsp;[BorderStyle](ts-appendix-enums.md#borderstyle)<br/>}s | Unified border style.  |
+| borderStyle  | [BorderStyle](ts-appendix-enums.md#borderstyle)   | Border style of an element.<br>Default value: **BorderStyle.Solid** |
+| borderWidth  | [Length](ts-types.md#length)        | Border width of an element.    |
+| borderColor  | [ResourceColor](ts-types.md#resourcecolor)         | Border color of an element.    |
+| borderRadius | [Length](ts-types.md#length)        | Border radius of an element.|
 
-- BorderStyle enums
-    | Name | Description | 
-  | -------- | -------- |
-  | Dotted | Dotted border. The radius of a dot is half of **borderWidth**. | 
-  | Dashed | Dashed border. | 
-  | Solid | Solid border. | 
 
 
 ## Example
 
-  
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct BorderExample {
   build() {
     Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) {
-      // Line segment
+      // Dashed border
       Text('dashed')
         .borderStyle(BorderStyle.Dashed).borderWidth(5).borderColor(0xAFEEEE).borderRadius(10)
         .width(120).height(120).textAlign(TextAlign.Center).fontSize(16)
-      // Dotted line
+      // Dotted border
       Text('dotted')
         .border({ width: 5, color: 0x317AF7, radius: 10, style: BorderStyle.Dotted })
         .width(120).height(120).textAlign(TextAlign.Center).fontSize(16)
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md
index 934cb61fd75f6508e22d0f10c88507c1ce9c01bc..63af1a9d44cef98dd8d3d15a93d596e78f91b885 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md
@@ -2,7 +2,7 @@
 
 Create a more gorgeous look for a component by applying a gradient color effect to it.
 
-> **NOTE**
+>  **NOTE**
 >
 > This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
@@ -15,37 +15,21 @@ None
 ## Attributes
 
 
-| Name | Type | Default Value | Description |
+| Name| Type| Default Value| Description|
 | -------- | -------- | -------- | -------- |
-| linearGradient | {<br/>angle?: [Angle](../../ui/ts-types.md),<br/>direction?:GradientDirection,<br/>colors: Array<[ColorStop](../../ui/ts-types.md)><br/>repeating?: boolean<br/>} | - | Linear gradient.<br/>**angle**: angle of the linear gradient.<br/>**direction**: direction of the linear gradient. It does not take effect when **angle** is set.<br/>**colors**: description of the gradient colors.<br/>**repeating**: whether the colors are repeated. |
-| sweepGradient | {<br/>center: Point,<br/>start?: angle,<br/>end?: angle,<br/>colors: Array<[ColorStop](../../ui/ts-types.md)><br/>repeating?: boolean<br/>} | - | Angle gradient.<br/>**center**: center point of the angle gradient.<br/>**start**: start point of the angle gradient.<br/>**end**: end point of the angle gradient.<br/>**colors**: description of the gradient colors.<br/>**repeating**: whether the colors are repeated. |
-| radialGradient | {<br/>center: Point,<br/>radius: Length,<br/>colors: Array<[ColorStop](../../ui/ts-types.md)><br/>repeating: boolean<br/>} | - | Radial gradient.<br/>**center**: center point of the radial gradient.<br/>**radius**: radius of the radial gradient.<br/>**colors**: description of the gradient colors.<br/>**repeating**: whether the colors are repeated. |
-
-- GradientDirection
-
-  Enumerates the gradient directions.
-
-  | Name | Description |
-  | -------- | -------- |
-  | Left | The gradient direction is from right to left. |
-  | Top | The gradient direction is from bottom to top. |
-  | Right | The gradient direction is from left to right. |
-  | Bottom | The gradient direction is from top to bottom. |
-  | LeftTop | The gradient direction is upper left. |
-  | LeftBottom | The gradient direction is lower left. |
-  | RightTop | The gradient direction is upper right. |
-  | RightBottom | The gradient direction is lower right. |
-  | None | No gradient. |
+| linearGradient | {<br/>angle?: number\|string,<br/>direction?: [GradientDirection](ts-appendix-enums.md#gradientdirection),<br/>colors: Array&lt;any&gt;<br/>repeating?: boolean<br/>} | - | Linear gradient.<br>**angle**: angle of the linear gradient.<br>**direction**: direction of the linear gradient. It does not take effect when **angle** is set.<br>**colors**: description of the gradient colors.<br>**repeating**: whether the colors are repeated.|
+| sweepGradient | {<br/>center: Point,<br/>start?: angle,<br/>end?: angle,<br/>colors: Array&lt;any&gt;<br/>repeating?: boolean<br/>} | - | Angle gradient.<br>**center**: center point of the angle gradient.<br>**start**: start point of the angle gradient.<br>**end**: end point of the angle gradient.<br>**colors**: description of the gradient colors.<br>**repeating**: whether the colors are repeated.|
+| radialGradient | {<br/>center: Point,<br/>radius: Length,<br/>colors: Array&lt;any&gt;<br/>repeating: boolean<br/>} | - | Radial gradient.<br>**center**: center point of the radial gradient.<br>**radius**: radius of the radial gradient.<br>**colors**: description of the gradient colors.<br>**repeating**: whether the colors are repeated.|
 
 
 ## Example
 
-
 ```ts
 // xxx.ets
 @Entry
 @Component
 struct ColorGradientExample {
+  
   build() {
     Column({ space: 5 }) {
       Text('linearGradient').fontSize(12).width('90%').fontColor(0xCCCCCC)
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-hover-effect.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-hover-effect.md
index 56ea57821dfedf2870eeba23e2031b95921b885b..33313c0f3d892565ef4a6d8fdaf20ae9310ae3d8 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-hover-effect.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-hover-effect.md
@@ -1,8 +1,10 @@
 # Hover Effect
 
+The hover effect is applied to a component in hover state.
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
-> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
+> **NOTE**
+> 
+> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 ## Required Permissions
@@ -12,23 +14,15 @@ None
 
 ## Attributes
 
-| Name | Type | Default Value | Description |
+| Name| Type| Default Value| Description|
 | -------- | -------- | -------- | -------- |
-| hoverEffect | HoverEffect | HoverEffect.Auto | Hover effect of the component in hover state. |
-
-- HoverEffect enums
-    | Name | Description |
-  | -------- | -------- |
-  | Auto | Default hover effect. |
-  | Scale | Scale effect. |
-  | Highlight | Fade-in and fade-out effect. |
-  | None | No effect. |
+| hoverEffect | [HoverEffect](ts-appendix-enums.md#hovereffect8) | HoverEffect.Auto | Hover effect of the component in hover state.|
 
 
 ## Example
 
-
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct HoverExample {
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-location.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-location.md
index 7ddedfd2182bcddfeb9ae7a31a8753bff2f4b7e5..b6eed7793c52504839b453c99fc9b9db11570acc 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-location.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-location.md
@@ -1,8 +1,10 @@
 # Location
 
+The location attribute sets the alignment mode, layout direction, and position of a component.
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
-> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+>  **NOTE**
+>
+>  The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 ## Required Permissions
@@ -13,30 +15,23 @@ None
 ## Attributes
 
 
-| Name | Type | Default Value | Description |
+| Name| Type| Default Value| Description|
 | -------- | -------- | -------- | -------- |
-| align | [Alignment](ts-appendix-enums.md#alignment-enums) | Center | Alignment of the component content. This attribute is valid only when the values of **width** and **height** are greater than the size of the component content. |
-| direction | Direction | Auto | Horizontal layout of the component. For details about the options, see **Direction** enums. |
-| position | {<br/>x: Length,<br/>y: Length<br/>} | - | Offset of the component anchor point relative to the top start edge of the parent component. The offset is expressed using absolute values. When laying out components, this attribute does not affect the layout of the parent component. It only adjusts the component position during drawing. |
-| markAnchor | {<br/>x: Length,<br/>y: Length<br/>} | {<br/>x: 0,<br/>y: 0<br/>} | Anchor point of the component for positioning. The top start edge of the component is used as the reference point for offset. |
-| offset | {<br/>x: Length,<br/>y: Length<br/>} | {<br/>x: 0,<br/>y: 0<br/>} | Coordinate offset of the relative layout. This attribute does not affect the layout of the parent component. It only adjusts the component position during drawing. |
-
-
-- Direction enums
-    | Name | Description | 
-  | -------- | -------- |
-  | Ltr | Components are arranged from left to right. | 
-  | Rtl | Components are arranged from right to left. | 
-  | Auto | The default layout direction is used. | 
+| align | [Alignment](ts-appendix-enums.md#alignment) | Center | Alignment of the component content. This attribute is valid only when the values of **width** and **height** are greater than the size of the component content.|
+| direction | [Direction](ts-appendix-enums.md#direction) | Auto | Horizontal layout of the component. For details about the options, see **Direction** enums.|
+| position | {<br>x: Length,<br>y: Length<br>} | - | Offset of the component anchor point relative to the top start edge of the parent component. The offset is expressed using absolute values. When laying out components, this attribute does not affect the layout of the parent component. It only adjusts the component position during drawing.|
+| markAnchor | {<br>x: Length,<br>y: Length<br>} | {<br>x: 0,<br>y: 0<br>} | Anchor point of the component for positioning. The top start edge of the component is used as the reference point for offset.|
+| offset | {<br>x: Length,<br>y: Length<br>} | {<br>x: 0,<br>y: 0<br>} | Coordinate offset of the relative layout. This attribute does not affect the layout of the parent component. It only adjusts the component position during drawing.|
 
 
 ## Example
 
-
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct PositionExample {
+
   build() {
     Column() {
       Column({space: 10}) {
@@ -66,11 +61,12 @@ struct PositionExample {
 
 ![en-us_image_0000001212218456](figures/en-us_image_0000001212218456.gif)
 
-
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct PositionExample2 {
+  
   build() {
     Column({ space: 20 }) {
       Text('position').fontSize(12).fontColor(0xCCCCCC).width('90%')
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md
index aac3bbfa1f1253a491d134b607c13094ca664582..ae3cfb079d43d5c3979b9ef01885db9a91b13910 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md
@@ -1,6 +1,9 @@
 # Menu Control
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
+A menu – a vertical list of items – can be bound to a component and displayed by long-pressing, clicking, or right-clicking the component.
+
+> **NOTE**
+> 
 > The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
@@ -12,29 +15,24 @@ None
 ## Attributes
 
 
-| Name| Type| Default Value | Description|
-| -------- | -------- | -------- | -------- |
-| bindMenu | Array<MenuItem&gt; \| [CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | - | Menu bound to the component, which is displayed when you click the component. Textual and custom menu items are supported.|
-| bindContextMenu<sup>8+</sup> | content: [CustomBuilder](../../ui/ts-types.md)<br>responseType: ResponseType | - | Context menu bound to the component, which is displayed when you long-press or right-click the component. Only custom menu items are supported.|
-
+| Name                          | Type                                    | Description                                |
+| ---------------------------- | ---------------------------------------- | ---------------------------------- |
+| bindMenu                     | Array<MenuItem&gt; \| [CustomBuilder](ts-types.md#custombuilder8) | Menu bound to the component, which is displayed when you click the component. Textual and custom menu items are supported.|
+| bindContextMenu<sup>8+</sup> | content: [CustomBuilder](ts-types.md#custombuilder8)<br>responseType: [ResponseType](ts-appendix-enums.md#responsetype8) | Context menu bound to the component, which is displayed when you long-press or right-click the component. Only custom menu items are supported. |
 
-- MenuItem
-  | Name| Type| Description|
-  | -------- | -------- | -------- |
-  | value | string | Menu item text.|
-  | action | () =&gt; void | Action triggered when a menu item is clicked.|
+## MenuItem
+| Name    | Type                     | Description         |
+| ------ | ----------------------- | ----------- |
+| value  | string                  | Menu item text.     |
+| action | () =&gt; void | Action triggered when a menu item is clicked.|
 
-- ResponseType<sup>8+</sup>
-  | Value| Description|
-  | -------- | -------- |
-  | LongPress | The menu is displayed when the component is long-pressed.   |
-  | RightClick | The menu is displayed when the component is right-clicked.|
 
 ## Example
 
 #### Menu with Textual Menu Items
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct MenuExample {
@@ -66,7 +64,8 @@ struct MenuExample {
 
 #### Menu with Custom Menu Items
 
-```
+```ts
+// xxx.ets
 import router from '@system.router';
 
 @Entry
@@ -116,7 +115,8 @@ struct MenuExample {
 
 #### Context Menu (Displayed Upon Right-Clicking)
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ContextMenuExample {
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md
index a9d6cad9cc929354c1218cfe2ea37e375c810901..b7e01b8bb441f5bff5c20a7f78ce21a576eb7c04 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md
@@ -11,12 +11,12 @@
 None
 
 
-## Attributes
+## APIs
 
 
 | Name | Type | Default Value | Description |
 | -------- | -------- | -------- | -------- |
-| bindPopup | show: boolean,<br/>popup: PopupOptions \| CustomPopupOptions | - | Settings of the popup bound to a component.<br/>**show**: whether to display the popup on the creation page by default. The default value is **false**.<br/>**popup**: parameters of the current popup. |
+| bindPopup | show:&nbsp;boolean,<br/>popup:&nbsp;PopupOptions\|&nbsp;CustomPopupOptions<sup>8+</sup> | - | Binds the popup to the component.<br/>**show**: whether to display the popup on the creation page by default. The default value is **false**.<br/>**popup**: parameters of the current popup. |
 
 ## PopupOptions
 
@@ -26,18 +26,18 @@ None
 | placementOnTop | boolean | No | false | Whether to display the popup above the component. The default value is **false**. |
 | primaryButton | {<br/>value: string,<br/>action: () =&gt; void<br/>} | No | - | First button.<br/>**value**: text of the primary button in the popup.<br/>**action**: callback function for clicking the primary button. |
 | secondaryButton | {<br/>value: string,<br/>action: () =&gt; void<br/>} | No | - | Second button.<br/>**value**: text of the secondary button in the popup.<br/>**action**: callback function for clicking the secondary button. |
-| onStateChange | (isVisible: boolean) =&gt; void | No | - | Callback for the popup status change event.<br>**isVisible**: visibility of the popup. |
+| onStateChange | (event:{isVisible:&nbsp;boolean })&nbsp;=&gt;&nbsp;void | No | - | Callback for the popup status change event.<br>**isVisible**: visibility of the popup. |
 
 ## CustomPopupOptions<sup>8+</sup>
 | Name          | Type                                           | Mandatory | Default Value | Description |
 | ------------- | ---------------------------------------------- | ---- | ---------------- | ------------------------------------------------------------ |
-| builder       | () =&gt; any                                   | Yes  | -                | Builder of the tooltip content. |
-| placement     | [Placement](ts-appendix-enums.md)   | No   | Placement.Bottom | Preferred position of the tooltip component. If the set position is insufficient for holding the component, it will be automatically adjusted. |
-| maskColor     | [Color](ts-appendix-enums.md#color)            | No   | -                | Color of the tooltip mask. |
-| popupColor    | [Color](ts-appendix-enums.md#color)            | No   | -                | Color of the tooltip. |
+| builder       | [CustomBuilder](ts-types.md#custombuilder8)                                   | Yes  | -                | Builder of the tooltip content. |
+| placement     | [Placement](ts-appendix-enums.md#placement8)   | No   | Placement.Bottom | Preferred position of the tooltip component. If the set position is insufficient for holding the component, it will be automatically adjusted. |
+| maskColor     | [ResourceColor](ts-types.md#resourcecolor)           | No   | -                | Color of the tooltip mask. |
+| popupColor    | [ResourceColor](ts-types.md#resourcecolor)            | No   | -                | Color of the tooltip. |
 | enableArrow   | boolean                                        | No   | true             | Whether to display arrows. Arrows are displayed only for tooltips in the up and down directions. |
 | autoCancel    | boolean                                        | No   | true             | Whether to automatically close the tooltip when an operation is performed on the page. |
-| onStateChange | (isVisible: boolean) =&gt; void                | No   | -                | Callback for the popup status change event. The parameter **isVisible** indicates the visibility of the popup. |
+| onStateChange |(event:{isVisible:&nbsp;boolean })&nbsp;=&gt;&nbsp;void                | No   | -                | Callback for the popup status change event. The parameter **isVisible** indicates the visibility of the popup. |
 
 
 
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md
index 8fe71bfe50f7c85128ee538c02ff8e63d2a6fda9..ffece6185b2c6915987adfe16040c2d6923d4b4e 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md
@@ -3,7 +3,7 @@
 
 > **NOTE**
 >
-> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 ## Required Permissions
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md
index a4d33eff40559e589befb6a6054dd19b922744a4..278eb166a9737e4154b1d04303096b6fd05b620e 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md
@@ -1,13 +1,12 @@
 # Text Style
 
+The text style attribute is used to set the style for text in a component.
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
+> **NOTE**
+>
 > This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-The attributes described in this topic are used to set the text style for a component that contains text.
-
-
 ## Required Permissions
 
 None
@@ -16,37 +15,19 @@ None
 ## Attributes
 
 
-  | Name | Type | Default Value | Description | 
+| Name | Type | Default Value | Description |
 | -------- | -------- | -------- | -------- |
-| fontColor | Color | - | Text color. | 
-| fontSize | Length | - | Text size. If the value is of the number type, the unit fp is used. | 
-| fontStyle | FontStyle | FontStyle.Normal | Font style of the text. | 
-| fontWeight | number \| FontWeight | FontWeight.Normal | Font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is **400**. A larger value indicates a larger font weight.<br/>For common values of the **FontWeight** type, see **FontWeight** enums. | 
-| fontFamily | string | - | Font family of the text. Use commas (,) to separate multiple fonts. The priority the fonts is the sequence in which they are placed. An example value is **Arial, sans-serif**. | 
-
-
-- FontStyle enums
-    | Name | Description | 
-  | -------- | -------- |
-  | Normal | Standard font style. | 
-  | Italic | Italic font style. | 
-
-
-- FontWeight enums
-    | Name | Description | 
-  | -------- | -------- |
-  | Lighter | The font weight is lighter. | 
-  | Normal | The font weight is normal. | 
-  | Regular | The font weight is regular. | 
-  | Medium | The font weight is medium. | 
-  | Bold | The font weight is bold. | 
-  | Bolder | The font weight is bolder. | 
+| fontColor | Color | - | Text color. |
+| fontSize | Length | - | Text size. If the value is of the number type, the unit fp is used. |
+| fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | FontStyle.Normal | Font style of the text. |
+| fontWeight | number&nbsp;\|[FontWeight](ts-appendix-enums.md#fontweight) | FontWeight.FontWeightNormal | Font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is **400**. A larger value indicates a larger font weight.<br/>For common values of the **FontWeight** type, see **FontWeight** enums. |
+| fontFamily | string | - | Font family of the text. Use commas (,) to separate multiple fonts. The priority the fonts is the sequence in which they are placed. An example value is **Arial, sans-serif**. |
 
 
 ## Example
 
-  
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TextStyleExample {
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md
index e3016cfb9cabac73f6379f8af86687e5c00d5791..1d7a380543d48903e927c143af9600be1f6a679c 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md
@@ -1,8 +1,9 @@
 # Transformation
 
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
-> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+> **NOTE**
+>
+> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 ## Required Permissions
@@ -13,18 +14,19 @@ None
 ## Attributes
 
 
-  | Name | Type | Default Value | Description | 
-| -------- | -------- | -------- | -------- |
-| rotate | {<br/>x?: number,<br/>y?: number,<br/>z?: number,<br/>angle?: Angle,<br/>centerX?: Length,<br/>centerY?: Length<br/>} | {<br/>x: 0,<br/>y: 0,<br/>z: 0,<br/>angle: 0,<br/>centerX: '50%',<br/>centerY: '50%'<br/>} | The vector (x, y, z) specifies a rotation axis. A positive angle indicates a clockwise rotation, and a negative angle indicates a counterclockwise rotation. The default value is **0**. **centerX** and **centerY** are used to set the rotation center point. | 
-| translate | {<br/>x?: Length,<br/>y?: Length,<br/>z? : Length<br/>} | {<br/>x: 0,<br/>y: 0,<br/>z: 0<br/>} | Translation distance along the x-, y-, and z-axis. The translation direction is determined by the positive and negative values. The default value is **0**. | 
-| scale | {<br/>x?: number,<br/>y?: number,<br/>z?: number,<br/>centerX?: Length,<br/>centerY?: Length<br/>} | {<br/>x: 1,<br/>y: 1,<br/>z: 1,<br/>centerX:'50%',<br/>centerY:'50%'<br/>} | Scale ratio of the x-, y-, and z-axis. The default value is **1**. **centerX** and **centerY** are used to set the scale center point. | 
-| transform | matrix: Matrix4 | - | Transformation matrix of the component. | 
 
+| Name | Type | Default Value | Description |
+| -------- | -------- | -------- | -------- |
+| rotate | {<br/>x?: number,<br/>y?: number,<br/>z?: number,<br/>angle?: Angle,<br/>centerX?: Length,<br/>centerY?: Length<br/>} | {<br/>x: 0,<br/>y: 0,<br/>z: 0,<br/>angle: 0,<br/>centerX: '50%',<br/>centerY: '50%'<br/>} | The vector (x, y, z) specifies a rotation axis. A positive angle indicates a clockwise rotation, and a negative angle indicates a counterclockwise rotation. The default value is **0**. **centerX** and **centerY** are used to set the rotation center point. |
+| translate | {<br/>x?: Length,<br/>y?: Length,<br/>z? : Length<br/>} | {<br/>x: 0,<br/>y: 0,<br/>z: 0<br/>} | Translation distance along the x-, y-, and z-axis. The translation direction is determined by the positive and negative values. The default value is **0**. |
+| scale | {<br/>x?: number,<br/>y?: number,<br/>z?: number,<br/>centerX?: Length,<br/>centerY?: Length<br/>} | {<br/>x: 1,<br/>y: 1,<br/>z: 1,<br/>centerX:'50%',<br/>centerY:'50%'<br/>} | Scale ratio of the x-, y-, and z-axis. The default value is **1**. **centerX** and **centerY** are used to set the scale center point. |
+| transform | matrix: Matrix4 | - | Transformation matrix of the component. |
 
 ## Example
 
-  
-```
+
+```ts
+// xxx.ets
 import Matrix4 from '@ohos.matrix4'
 
 @Entry
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md
index 05c601ac22daf362e1e0cb5f05019a090fa2351c..9d501727ad47678778172d3b8aa9c1919a6d8dfc 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md
@@ -1,7 +1,9 @@
 # Visibility
 
+The visibility attribute controls whether a component is visible.
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
+> **NOTE**
+>
 > This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
@@ -13,23 +15,15 @@ None
 ## Attributes
 
 
-  | Name | Type | Default Value | Description | 
+| Name| Type| Default Value| Description|
 | -------- | -------- | -------- | -------- |
-| visibility | Visibility | Visibility.Visible | Whether the component is shown or hidden. | 
-
-
-- Visibility enums
-    | Name | Description | 
-  | -------- | -------- |
-  | Hidden | The component is hidden, and a placeholder is used for it in the layout. | 
-  | Visible | The component is shown. | 
-  | None | The component is hidden. It is not involved in the layout, and no placeholder is used for it. | 
+| visibility | [Visibility](ts-appendix-enums.md#visibility) | Visibility.Visible | Whether the component is visible. |
 
 
 ## Example
 
-  
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct VisibilityExample {
@@ -40,11 +34,11 @@ struct VisibilityExample {
         Row().visibility(Visibility.Visible).width('90%').height(80).backgroundColor(0xAFEEEE)
 
         Text('None').fontSize(9).width('90%').fontColor(0xCCCCCC)
-        // The component is hidden and no placeholder is used.
+        // The component is hidden, and no placeholder is used.
         Row().visibility(Visibility.None).width('90%').height(80).backgroundColor(0xAFEEEE)
 
         Text('Hidden').fontSize(9).width('90%').fontColor(0xCCCCCC)
-        // The component is hidden and a placeholder is used.
+        // The component is hidden, and a placeholder is used for it in the layout.
         Row().visibility(Visibility.Hidden).width('90%').height(80).backgroundColor(0xAFEEEE)
       }.width('90%').border({ width: 1 })
     }.width('100%').margin({ top: 5 })
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-events-key.md b/en/application-dev/reference/arkui-ts/ts-universal-events-key.md
index 3169c685e1f5945fcc41dc7d1dfa152d56f8f2d5..b64f0eee26bf48d6d08b71dd3590d69d9c1677a4 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-events-key.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-events-key.md
@@ -16,47 +16,32 @@ None
 
 | Name | Bubbling Supported | Description |
 | -------- | -------- | -------- |
-| onKeyEvent(event: (event?: KeyEvent) =&gt; void) | Yes | Called when the a key event occurs on the bound component in focus. For details about **event**, see [KeyEvent](#keyevent). |
+| onKeyEvent(event: (event?: KeyEvent) =&gt; void) | Yes | Called when a key event occurs. For details about **event**, see [KeyEvent](#keyevent). |
 
 
 ## KeyEvent
 
 - Attributes
-  | Name | Type | Description |
-  | -------- | -------- | -------- |
-  | type | [KeyType](#keytype-enums) | Type of a key. |
-  | keyCode | number | Key code. |
-  | keyText | string | Key value. |
-  | keySource | [KeySource](#keysource-enums) | Type of the input device that triggers the key event. |
-  | deviceId | number | ID of the input device that triggers the key event. |
-  | metaKey | number | State of the metakey when the key is pressed. The value **1** means the pressed state, and **0** means the unpressed state. |
-  | timestamp | number | Timestamp when the key is pressed. |
+  | Name                                         | Type                   | Description                  |
+  | ------------------------------------- | --------------------------- | -------------------------- |
+  | type                                  | [KeyType](ts-appendix-enums.md#keytype)   | Type of a key.                 |
+  | [keyCode](../apis/js-apis-keycode.md) | number                      | Key code.                      |
+  | keyText                               | string                      | Key value.                     |
+  | keySource                             | [KeySource](ts-appendix-enums.md#keysource) | Type of the input device that triggers the key event. |
+  | deviceId                              | number                        | ID of the input device that triggers the key event. |
+  | metaKey                               | number                        | State of the metakey when the key is pressed. The value **1** means the pressed state, and **0** means the unpressed state. |
+  | timestamp                             | number                        | Timestamp when the key is pressed. |
+
 
 - APIs
   | Name | Description |
   | -------- | -------- |
   | stopPropagation(): void | Stops the event from bubbling upwards or downwards. |
 
-## KeyType Enums
-
-| Name | Description |
-| -------- | -------- |
-| Down | The key is pressed. |
-| Up | The key is released. |
-
-
-## KeySource Enums
-| Name | Description |
-| -------- | -------- |
-| Unknown  | Unknown input device. |
-| Keyboard | The input device is a keyboard. |
-
-
 
 
 ## Example
 
-
 ```ts
 // xxx.ets
 @Entry
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md b/en/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md
index 17b1df873571c1dde4d573ceab61b097a9f8fe3f..44d7aa79f1c8cd8266a85f55a0e855401462a012 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md
@@ -1,8 +1,9 @@
 # Show/Hide Event
 
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
-> This method is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+> **NOTE**
+>
+> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 ## Required Permissions
@@ -12,16 +13,17 @@ None
 
 ## Events
 
-  | Name | Bubble Supported | Description | 
+| Name | Bubble Supported | Description |
 | -------- | -------- | -------- |
-| onAppear(callback: () =&gt; void) | No | Called when the component is displayed. | 
-| onDisappear(callback: () =&gt; void) | No | Called when the component disappears. | 
+| onAppear(callback: () =&gt; void) | No | Called when the component is displayed. |
+| onDisappear(callback: () =&gt; void) | No | Called when the component disappears. |
 
 
 ## Example
 
 
-```
+```ts
+// xxx.ets
 import prompt from '@system.prompt'
 
 @Entry
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-events-touch.md b/en/application-dev/reference/arkui-ts/ts-universal-events-touch.md
index 58833a25b0ee0a8aa36c37c81c9a31d0954d0bf3..52020790ce1fa2662e2ff4a1e1d7e2d6db1f8638 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-events-touch.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-events-touch.md
@@ -7,55 +7,36 @@ A touch event is triggered when a finger is pressed, slides, or is lifted from a
 > This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-## Required Permissions
-
-None
-
-
 ## Events
 
 | Name                                      | Bubbling Supported| Description                                    |
 | ---------------------------------------- | ---- | ---------------------------------------- |
-| onTouch(callback:&nbsp;(event?:&nbsp;TouchEvent)&nbsp;=&gt;&nbsp;void) | Yes   | Invoked when a touch action is triggered. For details about **event**, see [TouchEvent](#touchevent).|
+| onTouch(event:&nbsp;(event?:&nbsp;TouchEvent)&nbsp;=&gt;&nbsp;void) | Yes   | Invoked when a touch action is triggered. For details about **event**, see [TouchEvent](#touchevent).|
 
 
 ## TouchEvent
 
-- Attributes
-  | Name               | Type                                      | Description          |
-  | ------------------- | ---------------------------------------- | ------------ |
-  | type                | TouchType                                | Type of the touch event.    |
-  | touches             | Array&lt;[TouchObject](#touchobject)&gt; | All finger information.     |
-  | changedTouches      | Array&lt;[TouchObject](#touchobject)&gt; | Finger information changed.|
-  | timestamp           | number                                   | Timestamp of the event.      |
-  | target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md#eventtarget8) | Target of the event.    |
-
-
-- APIs
-  | Name                  | Description   |
-  | ---------------------- | ------- |
-  | stopPropagation(): void| Stops the event from bubbling upwards or downwards.|
+| Name               | Type                                      | Description          |
+| ------------------- | ---------------------------------------- | ------------ |
+| type                | [TouchType](ts-appendix-enums.md#touchtype)      | Type of the touch event.    |
+| touches             | Array&lt;[TouchObject](#touchobject)&gt; | All finger information.     |
+| changedTouches      | Array&lt;[TouchObject](#touchobject)&gt; | Finger information changed.|
+| stopPropagation      | () => void | Stops the event from bubbling upwards or downwards.|
+| timestamp<sup>8+</sup> | number | Timestamp of the event.|
+| target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md) | Display area of the element that triggers the gesture event.|
+| source<sup>8+</sup> | [SourceType](ts-gesture-settings.md) | Event input device.|
 
 
 ## TouchObject
+
 | Name   | Type                         | Description                 |
 | ------- | --------------------------- | ------------------- |
-| type    | [TouchType](#touchtype-enums) | Type of the touch event.           |
+| type    | [TouchType](ts-appendix-enums.md#touchtype) | Type of the touch event.           |
 | id      | number                      | Unique identifier of a finger.           |
 | screenX | number                      | X-coordinate of the touch point relative to the left edge of the screen. |
 | screenY | number                      | Y-coordinate of the touch point relative to the upper edge of the device screen. |
-| x       | number                      | X-coordinate of the touch point relative to the left edge of the element being touched. |
-| y       | number                      | Y-coordinate of the touch point relative to the upper edge of the element being touched. |
-
-
-## TouchType Enums
-| Name    | Description             |
-| ------ | --------------- |
-| Down   | A finger is pressed.       |
-| Up     | A finger is lifted.       |
-| Move   | A finger moves on the screen in pressed state.|
-| Cancel | A touch event is canceled.     |
-
+| x       | number                      | X-coordinate of the touch point relative to the left edge of the element being touched.|
+| y       | number                      | Y-coordinate of the touch point relative to the upper edge of the element being touched.|
 
 ## Example
 
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-mouse-key.md b/en/application-dev/reference/arkui-ts/ts-universal-mouse-key.md
index bdb0b11b93d3a3609b3d00158de4ab8f1fc80584..35002cd229267653b670ea3d4216b78c21824196 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-mouse-key.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-mouse-key.md
@@ -1,5 +1,6 @@
 # Mouse Event
 
+If an action triggers multiple events, the order of these events is fixed. By default, mouse events are transmitted transparently.
 
 > **NOTE**
 >
@@ -15,44 +16,27 @@ None
 
 | Name | Bubbling Supported | Description |
 | -------- | -------- | -------- |
-| onHover(callback: (isHover: boolean) =&gt; void) | No | Triggered when the mouse cursor enters or leaves the component.<br/>**isHover**: whether the mouse cursor hovers over the component. The value **true** means that the mouse cursor enters the component, and the value **false** means that the mouse cursor leaves the component. |
-| onMouse(callback: (event?: MouseEvent) =&gt; void) | Yes | Triggered when the component is clicked by a mouse button or the mouse cursor moves on the component. The **event** parameter indicates the timestamp, mouse button, action, coordinates of the clicked point on the entire screen, and coordinates of the clicked point relative to the component when the event is triggered. |
+| onHover(event: (isHover: boolean) =&gt; void) | No | Triggered when the mouse cursor enters or leaves the component.<br/>**isHover**: whether the mouse cursor hovers over the component. The value **true** means that the mouse cursor enters the component, and the value **false** means that the mouse cursor leaves the component. |
+| onMouse(event: (event?: MouseEvent) =&gt; void) | Yes | Triggered when the component is clicked by a mouse button or the mouse cursor moves on the component. The **event** parameter indicates the timestamp, mouse button, action, coordinates of the clicked point on the entire screen, and coordinates of the clicked point relative to the component when the event is triggered. |
 
 
 ## MouseEvent
 
-- Attributes
-    | Name | Type | Description |
-  | -------- | -------- | -------- |
-  | timestamp | number | Timestamp when the event is triggered. |
-  | screenX | number | X-coordinate of the clicked point relative to the upper left corner of the screen. |
-  | screenY | number | Y-coordinate of the clicked point relative to the upper left corner of the screen. |
-  | x | number | X-coordinate of the clicked point relative to the upper left corner of the component. |
-  | y | number | Y-coordinate of the clicked point relative to the upper left corner of the component. |
-  | button | [MouseButton](#mousebutton) | Mouse button. |
-  | action | [MouseAction](#mouseaction) | Event action. |
-
-## MouseButton
-| Name | Type | Description |
-| -------- | -------- | -------- |
-| Left | number | Left mouse button. |
-| Right | number | Right mouse button. |
-| Middle | number | Middle mouse button. |
-| Back | number | Back button on the left of the mouse. |
-| Forward | number | Forward button on the left of the mouse. |
-| None | number | No button. |
-
-## MouseAction
 | Name | Type | Description |
 | -------- | -------- | -------- |
-| Press | number | The mouse button is pressed. |
-| Release | number | The mouse button is released. |
-| Move | number | The mouse cursor moves. |
-
-
+| timestamp | number | Timestamp when the event is triggered. |
+| screenX | number | X-coordinate of the clicked point relative to the upper left corner of the screen. |
+| screenY | number | Y-coordinate of the clicked point relative to the upper left corner of the screen. |
+| x | number | X-coordinate of the clicked point relative to the upper left corner of the component. |
+| y | number | Y-coordinate of the clicked point relative to the upper left corner of the component. |
+| button | [MouseButton](ts-appendix-enums.md#mousebutton) | Mouse button. |
+| action | [MouseAction](ts-appendix-enums.md#mouseaction) | Event action. |
+| stopPropagation      | () => void | Stops the event from bubbling upwards or downwards. |
+| timestamp<sup>8+</sup> | number | Timestamp of the event.|
+| target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md) | Display area of the element that triggers the gesture event.|
+| source<sup>8+</sup> | [SourceType](ts-gesture-settings.md) | Event input device.|
 ## Example
 
-
 ```ts
 // xxx.ets
 @Entry