!121843 merge cherry-pick-mr-121196-1765873353233-auto into weekly_20250915

增加系统接口key的资料

Created-by: AXYChen
Commit-by: AXYChen
Merged-by: openharmony_ci
Description: # Docs仓MD文档PR信息
https://gitcode.com/openharmony/docs/issues/96184
> **注意：**
> 请务必按如下模板反馈PR所携带的修改信息。
> 请分析是否需要同步合入活跃的发布分支。当前活跃的分支除master外还包括：
> (API 22) weekly_20251117
> (API 21) weekly_20250915
> (API 20) OpenHarmony-6.0-Release

## 文档变更类型

请描述本次文档更新类型（原因），**请在对应类型的括号内填写Y**：
- 新增需求（ ）
- 变更需求（ ）
- VOD修复（ ）
- 主动优化（Y）

## API参考更新的关联PR
NA
如涉及API参考的更新，应当同步提供interface仓d.ts文件的变更PR。

不涉及请反馈NA。
  
## 文档更新内容自检

为确保文档合入质量，请遵循如下要求完成基础质量自检Checklist，**并在自检项后的括号内填写Y**：

- 文档中示例代码片段已经在IDE中自验证，确保编译通过，并在下方给出截图证明。（NA）
- API的定义与使用方式与配套版本的SDK严格一致，无文档与SDK不一致问题。（Y）
- 文档需完成[AI辅助工具DocLinter扫描](https://gitcode.com/openharmony/docs/wiki/HarmonyPilot-DocLinter_AI辅助写作插件.md)并完成问题修改，并在此附加在线扫描报告的链接。

## 示例代码编译通过截图证明（如涉及示例代码需提供）：

> **说明：**
> 1. 示例代码验证时，应尽可能**在有效设备上实际运行**。仅编译或IDE预览器运行均无法发现所有潜在问题。
> 2. 示例代码截图应提供**编译日志**和**运行日志**以证明示例代码无问题。**存在错误码但不阻塞编译的日志均视为示例代码有误**。

See merge request: openharmony/docs!121843

en/application-dev/quick-start/app-configuration-file.md

@@ -80,7 +80,7 @@ As shown above, the **app.json5** file contains several tags.
 | label | Application name. The value is the index to a string resource with a maximum of 63 bytes, supporting multiple languages. For details, see [Configuring Layered Icons](layered-image.md).| String| No|
 | description | Description of an application. The value is a string of a maximum of 255 bytes, indicating the description string or the string resource index of the description. This tag can be used to display application information on, for example, the **About** page.| String| Yes (initial value: left empty)|
 | vendor | Vendor of the application. The value is a string with a maximum of 255 bytes. This tag can be used to display the vendor information on, for example, the **About** page.| String| Yes (initial value: left empty)|
-| versionCode | Version number of an application. The value ranges from 0 to 2147483647. It is used only to determine whether a version is later than another version. A larger value indicates a later version.<br>You can set the value to any positive integer, but you must ensure that the new version of the application uses a value greater than any of its predecessors.| Number| No|
+| versionCode | Version number of an application. The value ranges from 0 to 2147483647. It is used only to determine whether a version is later than another version. A larger value indicates a later version.<br>Ensure that a new version of the application uses a value greater than any of its predecessors.| Number| No|
 | versionName | Version number of the application displayed to users.<br>The value contains a maximum of 127 bytes and consists of only digits and dots. The four-part format *A.B.C.D* is recommended, wherein:<br>Part 1 (*A*): major version number. A major version consists of major new features or large changes.<br>Part 2 (*B*): minor version number. A minor version consists of some new features and large bug fixes.<br>Part 3 (*C*): feature version number. A feature version consists of scheduled new features.<br>Part 4 (*D*): patch version number. A patch version consists of some bug fixes.| String| No|
 | minCompatibleVersionCode | Minimum historical version compatible with the application. It is used for collaboration across devices, data migration, and cross-device compatibility determination. This tag is reserved and the value ranges from 0 to 2147483647.| Number| Yes (initial value: value of **versionCode**)|
 | minAPIVersion | Minimum SDK API version required for running an application. The value ranges from 0 to 2147483647.| Number| Yes (This tag is automatically generated during application build and cannot be manually configured. It corresponds to the **compatibleSdkVersion** tag in the [project-level build-profile.json5 file](https://developer.huawei.com/consumer/en/doc/harmonyos-guides/ide-hvigor-build-profile-app#section45865492619)). <!--RP1--><!--RP1End--> |
@@ -98,7 +98,7 @@ As shown above, the **app.json5** file contains several tags.
 |targetPriority|Priority of the application. The value ranges from 1 to 100. This tag can be configured only after the **targetBundleName** tag is configured.|Number|Yes (initial value: **1**)|
 |generateBuildHash |Whether to generate hash values for all HAP and HSP files of the application by using the packaging tool.<br>If this tag is set to **true**, the packaging tool generates hash values for all HAP and HSP files of the application. The hash values (if any) are used to determine whether the application needs to be updated when the system is updated in OTA mode but the **versionCode** value of the application remains unchanged.<br>- **true**: The packaging tool generates hash values for all HAPs and HSPs of the current application.<br>- **false**: The packaging tool does not generate hash values for all HAPs and HSPs of the current application.<br>**NOTE**<br>This tag takes effect only for pre-installed applications.|Boolean|Yes (initial value: **false**)|
 | GWPAsanEnabled | Whether to enable GWP-ASan for detecting memory safety violations, including use-after-free and out-of-bounds memory read/write operations.<br>- **true**: The GWP-asan detection is enabled for the application.<br>- **false**: The GWP-asan detection is disabled for the application.| Boolean| Yes (initial value: **false**)|
-| [appEnvironments](#appenvironments)| Application environment variables configured for the current application.| Object array| Yes (initial value: left empty)|
+| [appEnvironments](#appenvironments) | Application environment variables configured for the current application.| Object array| Yes (initial value: left empty)|
 | maxChildProcess | Maximum number of child processes that can be created by the current application. The value ranges from 0 to 512. The value **0** indicates that the number is not limited. If the application has multiple modules, use the configuration of the **entry** module.| Number| Yes (initial value: <!--RP2-->**1**<!--RP2End-->)|
 | [multiAppMode](#multiappmode)| Multi-app mode of the application. This tag takes effect only for the entry or feature module of the application whose **bundleType** is **app**. If there are multiple modules, use the configuration of the **entry** module.| Object| Yes (initial value: left empty)|
 | hwasanEnabled | Whether [Hardware-assisted Address Sanitizer (HWASan)](https://developer.huawei.com/consumer/en/doc/harmonyos-guides/ide-hwasan) is enabled for an application. HWAsan is an enhanced Asan improved by the Top-Byte-Ignore feature. Compared with Asan, HWAsan has a lower memory overhead and a larger range of detection for memory errors.<br>- **true**: HWAsan is enabled.<br>- **false**: HWAsan is disabled.<br>**NOTE**<br>This tag is supported since API version 14.| Boolean| Yes (initial value: **false**)|

en/application-dev/quick-start/in-app-hsp.md

@@ -39,13 +39,13 @@ A Harmony Shared Package (HSP) is a dynamic shared package that can contain code
 
 ## Creating an HSP
 Create an HSP module for calling C++ code on DevEco Studio and turn on **Enable native** on the **Configure New Module** page. For details, see [Creating an HSP Module](https://developer.huawei.com/consumer/en/doc/harmonyos-guides/ide-hsp#section7717162312546). The following uses the **library** module as an example. The basic project directory structure is as follows:
-```
+```txt
 MyApplication
 ├── library
 │   ├── src
 │   │   └── main
 |   |       ├── cpp
-|   |       |   ├── CMakeLists.txt    // Configuration file for compiling native C++ code
+|   |       |   ├── CMakeLists.txt    // Configuration file for compiling C++ code
 |   |       |   └── napi_init.cpp     // C++ file for initializing the NAPI module
 │   │       ├── ets
 │   │       │   └── pages
@@ -408,7 +408,7 @@ export struct Library_Menu {
 ```
 
 Add the **route_map.json** file (**library/src/main/resources/base/profile/route_map.json**) to the **library** module.
-```
+```json
 {
   "routerMap": [
     {

en/application-dev/quick-start/introduction-to-arkts.md

@@ -156,11 +156,15 @@ let instance: Class<void>;
 
 **Object type**
 
-An Object type is a base type for all reference types. Any value, including values of primitive types (they will be automatically boxed), can be directly assigned to variables of the type Object. The Object type is used to represent types other than the primitive types.
+An Object type is a base type for all reference types. Any value, including values of primitive types (they will be automatically boxed), can be directly assigned to variables of the type Object.
+
+The Object type is used to represent types other than the primitive types.
+
 ```typescript
 let o1: Object = 'Alice';
 let o2: Object = ['a', 'b'];
 let o3: Object = 1;
+let o4: object = [1, 2, 3];
 ```
 
 **Array type**
@@ -270,7 +274,7 @@ let emptyData: NullableObject = null;
 
 ### Operators
 
-Assignment operators
+**Assignment operators**
 
 Simple assignment operator **=** is used as in **x = y**.
 
@@ -368,7 +372,7 @@ if (bird instanceof Animal) {
 
 ### Statements
 
-**If statement**
+**if statement**
 
 An **if** statement is used to execute a sequence of statements when a logical condition is true, or another set of statements (if provided) otherwise.
 The **else** part can also contain more **if** statements.
@@ -399,7 +403,7 @@ if (s2.length != 0) {
 }
 ```
 
-**Switch statement**
+**switch statement**
 
 A **switch** statement is used to execute a sequence of statements that match the value of a **switch** expression.
 
@@ -462,7 +466,7 @@ Example:
     console.info(undefined ? 'true' : 'false'); // false
 ```
 
-**For statement**
+**for statement**
 
 The **for** statement is executed repeatedly until the specified loop exit condition result is **false**.
 
@@ -491,7 +495,7 @@ for (let i = 0; i < 10; i += 2) {
 }
 ```
 
-**For-of statement**
+**for-of statement**
 
 You can use the **for-of** statement to iterate over iterable types such as array, Set, Map, and string. A **for-of** statement looks as follows:
 
@@ -509,7 +513,7 @@ for (let ch of 'a string object') {
 }
 ```
 
-**While statement**
+**while statement**
 
 The **while** statement executes **statements** as long as the value of **condition** is **true**. A **while** statement looks as follows:
 
@@ -530,7 +534,7 @@ while (n < 3) {
 }
 ```
 
-**Do-while statement**
+**do-while statement**
 
 If the value of **condition** is truthy (a value that is considered **true**), the **statements** is executed repeatedly. A **do-while** statement looks as follows:
 
@@ -549,7 +553,7 @@ do {
 } while (i < 10)
 ```
 
-**Break statement**
+**break statement**
 
 A **break** statement is used to terminate any loop statement or the **switch** statement.
 
@@ -580,7 +584,7 @@ label: while (true) {
 }
 ```
 
-**Continue statement**
+**continue statement**
 
 A **continue** statement stops the execution of the current loop iteration and passes control to the next iteration.
 
@@ -596,7 +600,7 @@ for (let x = 0; x < 100; x++) {
 }
 ```
 
-**Throw and Try statements**
+**throw and try statements**
 
 A **throw** statement is used to throw an exception or an error:
 
@@ -708,7 +712,7 @@ multiply(2, 3); // Return 2*3.
 
 ### Rest Parameter
 
-The last parameter of a function can be a rest parameter in the format of **...restArgs**. It allows functions to take unlimited number of arguments of any specified type.
+The last parameter of a function can be a rest parameter in the format of **...restName: Type[]**. It allows a function to receive a variable-length array for processing variable-quantity parameter inputs.
 
 ```typescript
 function sum(...numbers: number[]): number {
@@ -1136,7 +1140,7 @@ class MyDate implements DateInterface {
 
 **Access to super**
 
-The keyword **super** can be used to access instance fields, instance methods and constructors from the super class. It is often used to extend basic functionality of child class with the required behavior taken from the super class:
+The **super** keyword can be used to access the methods and constructors of the super class. It is often used to extend basic functionality of child class with the required behavior taken from the super class:
 
 ```typescript
 class RectangleSize {
@@ -1161,7 +1165,6 @@ class FilledRectangle extends RectangleSize {
 
   draw() {
     super.draw(); // Call of the super method.
-    // super.height can be used here.
     /* Fill the rectangle. */
   }
 }

en/application-dev/quick-start/layered-image.md

@@ -49,14 +49,12 @@ The display effects are as follows.
 
   This configuration takes effect only when the **module.json5** configuration file does not contain any UIAbility or **icon** and **label** under the **abilities** tag of the UIAbility are not set. (You can manually delete the icon and label configurations).
 
-  <!-- @[layered_image_001](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/bmsSample/LayeredImage1/AppScope/app.json5) -->
-  
-  ``` JSON5
+  ```json
   {
     "app": {
-      // ...
       "icon": "$media:app_icon",
       "label": "$string:app_name" // Configure the resource whose name is app_name in AppScope/resources/base/element/string.json. If the resource already exists, skip this step.
+      // ...
     }
   }
   ```
@@ -65,18 +63,14 @@ The display effects are as follows.
 
   In addition to configuring the **icon** and **label** fields, you need to add **entity.system.home** under **entities** and **ohos.want.action.home** under **actions**.
 
-  <!-- @[layered_image_002](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/bmsSample/LayeredImage1/entry/src/main/module.json5) -->
-  
-  ``` JSON5
+  ```json
   {
     "module": {
       // ...
       "abilities": [
         {
-          // ...
           "icon": "$media:icon",
-          // Configure the resource whose name is EntryAbility_label in entry/src/main/resources/base/element/string.json. If the resource already exists, skip this step.
-          "label": "$string:EntryAbility_label",
+          "label": "$string:EntryAbility_label", // Configure the resource whose name is EntryAbility_label in entry/src/main/resources/base/element/string.json. If the resource already exists, skip this step.
           "skills": [
             {
               "entities": [
@@ -86,10 +80,9 @@ The display effects are as follows.
                 "ohos.want.action.home"
               ]
             }
-          ]
+          ],
         }
-      ],
-      // ...
+      ]
     }
   }
   ```
@@ -116,17 +109,14 @@ The display effects are as follows.
       }
       ```
   3. Reference the layered icon resource file in the [app.json5](app-configuration-file.md) file. Example:
-
-      <!-- @[layered_image_003](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/bmsSample/LayeredImage2/AppScope/app.json5) -->
-      
-      ``` JSON5
-      {
-        "app": {
-          // ...
-          "icon": "$media:layered_image",
-          "label": "$string:app_name" // Configure the resource whose name is app_name in AppScope/resources/base/element/string.json. If the resource already exists, skip this step.
-        }
-      }
+      ```json
+          {
+            "app": {
+              "icon": "$media:app_layered_image",
+              "label": "$string:app_name" // Configure the resource whose name is app_name in AppScope/resources/base/element/string.json. If the resource already exists, skip this step.
+              // ...
+            }
+          }
       ```
 
 - **Method 2: Configuring module.json5**
@@ -149,19 +139,15 @@ The display effects are as follows.
 
   3. To display a UIAbility icon on the home screen, you must configure the **icon** and **label** fields, and under the **skills** tag, add **entity.system.home** to **entities** and **ohos.want.action.home** to **actions**.
 
-      <!-- @[layered_image_004](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/bmsSample/LayeredImage2/entry/src/main/module.json5)  -->
-      
-      ``` JSON5
+      ```json
       {
         "module": {
-          // ...
           "abilities": [
             {
+              "name": "EntryAbility",
               // ...
-              // Set icon to the index of the layered icon resource file.
-              "icon": "$media:layered_image",
-              // Configure the resource whose name is EntryAbility_label in entry/src/main/resources/base/element/string.json. If the resource already exists, skip this step.
-              "label": "$string:EntryAbility_label",
+              "icon": "$media:layered_image", // Set icon to the index of the layered icon resource file.
+              "label": "$string:EntryAbility_label", // Configure the resource whose name is EntryAbility_label in entry/src/main/resources/base/element/string.json. If the resource already exists, skip this step.
               "skills": [
                 {
                   "entities": [
@@ -171,9 +157,10 @@ The display effects are as follows.
                     "ohos.want.action.home"
                   ]
                 }
-              ]
+              ],
+              // ...
             }
-          ],
+          ]
           // ...
         }
       }

en/application-dev/quick-start/module-structure.md

@@ -241,7 +241,7 @@ Application icons cannot be hidden from the home screen:
 The system strictly controls applications without icons to prevent malicious applications from deliberately configuring no icon to block uninstall attempts.
 
 Setting the application icon to be displayed on the home screen:<br>Set **icon**, **label**, and **skills** under **abilities** in the **config.json** file. Make sure the **skills** configuration contains **action.system.home** and **entity.system.home**.
-```
+```json
 {
   "module":{
 

en/application-dev/quick-start/resource-categories-and-access.md

@@ -17,7 +17,7 @@ Resources are classified into the following types based on their sources:
 
 Resource files used during application development must be stored in specified directories for management. There are two types of resource directories, namely, resource directories and resource group directories. The resource directories are the **base**, qualifiers, **rawfile**, and **resfile** directories. The resource group directories are the **element**, **media**, and **profile** directories.
 
-```
+```text
 resources
 |---base  // Default directory.
 |   |---element
@@ -249,7 +249,7 @@ If the **attr** attribute is not configured, a string is translated by default.
 
 ### Constraints
 The **attr** attribute applies to the string, strarray, and plural resources in the **base** directory.
-```
+```text
 resources
 |---base
 |   |---element
@@ -645,6 +645,6 @@ The **module.json5** file in the cross-application overlay resource package supp
 
 If the **module.json5** file of a module contains the **targetModuleName** and **targetPriority fields** during project creation on DevEco Studio, the module is identified as a module with the overlay feature in the installation phase. Modules with the overlay feature generally provide an overlay resource file for other modules on the device, so that the module specified by **targetModuleName** can display different colors, labels, themes, and the like by using the overlay resource file in a running phase.
 
-<!--Del--> 
+<!--Del-->
 <!--DelEnd-->
 <!--no_check-->

en/application-dev/quick-start/start-overview.md

@@ -25,7 +25,7 @@ For more details, see [Introduction to ArkUI](../ui/arkui-overview.md).
 
 ### Application Model
 
-The application model is the abstraction of capabilities required by an application. It provides components and mechanisms required for running the application. By adhering to a unified model, you can streamline application development, making it more efficient and straightforward. For details, see [Elements of the Application Model](../application-models/application-models.md#elements-of-the-application-model).
+The application model abstracts the capabilities required by an application and provides components and mechanisms required for running the application. By adhering to a unified model, you can streamline application development, making it more efficient and straightforward. For details, see [Elements of the Application Model](../application-models/application-models.md#elements-of-the-application-model).
 
 Along its evolution, OpenHarmony has provided two application models:
 

en/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-text.md

@@ -169,7 +169,7 @@ bindSelectionMenu(spanType: TextSpanType, content: CustomBuilder, responseType:
 
 Sets the custom context menu on text selection.
 
-The duration required for a long-press gesture is 600 ms for **bindSelectionMenu** and 800 ms for **bindContextMenu**. When both **bindSelectionMenu** and **bindContextMenu** are set and both are configured to be triggered by a long-press gesture, **bindSelectionMenu** is triggered first.
+The duration required for a long press gesture is 600 ms for **bindSelectionMenu** and 800 ms for **bindContextMenu**. When both **bindSelectionMenu** and **bindContextMenu** are set and both are configured to be triggered by a long press gesture, **bindSelectionMenu** is triggered first.
 
 If the custom menu is too long, embed a [Scroll](./ts-container-scroll.md) component to prevent the keyboard from being blocked.
 

en/application-dev/reference/apis-arkui/capi-native-interface-accessibility-h.md

@@ -79,7 +79,7 @@ Declares the APIs for accessing Native Accessibility features.
 | [int32_t OH_ArkUI_AccessibilityElementInfoSetAccessibilityFocused(ArkUI_AccessibilityElementInfo* elementInfo, bool accessibilityFocused)](#oh_arkui_accessibilityelementinfosetaccessibilityfocused) | Sets the accessibility focus state of an **ArkUI_AccessibilityElementInfo** object.|
 | [int32_t OH_ArkUI_AccessibilityElementInfoSetSelected(ArkUI_AccessibilityElementInfo* elementInfo, bool selected)](#oh_arkui_accessibilityelementinfosetselected) | Sets whether the **ArkUI_AccessibilityElementInfo** object is selected.|
 | [int32_t OH_ArkUI_AccessibilityElementInfoSetClickable(ArkUI_AccessibilityElementInfo* elementInfo, bool clickable)](#oh_arkui_accessibilityelementinfosetclickable) | Sets whether the **ArkUI_AccessibilityElementInfo** object is clickable.|
-| [int32_t OH_ArkUI_AccessibilityElementInfoSetLongClickable(ArkUI_AccessibilityElementInfo* elementInfo, bool longClickable)](#oh_arkui_accessibilityelementinfosetlongclickable) | Sets whether the **ArkUI_AccessibilityElementInfo** object supports long-press gestures.|
+| [int32_t OH_ArkUI_AccessibilityElementInfoSetLongClickable(ArkUI_AccessibilityElementInfo* elementInfo, bool longClickable)](#oh_arkui_accessibilityelementinfosetlongclickable) | Sets whether the **ArkUI_AccessibilityElementInfo** object supports long press gestures.|
 | [int32_t OH_ArkUI_AccessibilityElementInfoSetEnabled(ArkUI_AccessibilityElementInfo* elementInfo, bool isEnabled)](#oh_arkui_accessibilityelementinfosetenabled) | Sets whether the **ArkUI_AccessibilityElementInfo** object is enabled.|
 | [int32_t OH_ArkUI_AccessibilityElementInfoSetIsPassword(ArkUI_AccessibilityElementInfo* elementInfo, bool isPassword)](#oh_arkui_accessibilityelementinfosetispassword) | Sets whether the **ArkUI_AccessibilityElementInfo** object is a password.|
 | [int32_t OH_ArkUI_AccessibilityElementInfoSetScrollable(ArkUI_AccessibilityElementInfo* elementInfo, bool scrollable)](#oh_arkui_accessibilityelementinfosetscrollable) | Sets whether the **ArkUI_AccessibilityElementInfo** object is scrollable.|
@@ -860,7 +860,7 @@ int32_t OH_ArkUI_AccessibilityElementInfoSetLongClickable(ArkUI_AccessibilityEle
 **Description**
 
 
-Sets whether the **ArkUI_AccessibilityElementInfo** object supports long-press gestures.
+Sets whether the **ArkUI_AccessibilityElementInfo** object supports long press gestures.
 
 **Since**: 13
 
@@ -870,7 +870,7 @@ Sets whether the **ArkUI_AccessibilityElementInfo** object supports long-press g
 | Name| Description|
 | -- | -- |
 | [ArkUI_AccessibilityElementInfo](capi-arkui-accessibility-arkui-accessibilityelementinfo.md)* elementInfo | Pointer to the target **ArkUI_AccessibilityElementInfo** object.|
-| bool longClickable | Whether long-press gestures are supported. **true**: supported; **false**: not supported. The default value is **false**.|
+| bool longClickable | Whether long press gestures are supported. **true**: supported; **false**: not supported. The default value is **false**.|
 
 **Returns**
 

en/application-dev/reference/apis-arkui/js-apis-arkui-theme.md

@@ -26,7 +26,7 @@ Defines the **Theme** object in use, which can be obtained through [onWillApplyT
 
 **System capability**: SystemCapability.ArkUI.ArkUI.Full
 
-| Name| Type               | Read Only| Optional| Description      |
+| Name| Type               | Read-Only| Optional| Description      |
 | ------ |-------------------|-----|-----|----------|
 | colors | [Colors](#colors) | No  | No  |  Color resources of the theme.|
 
@@ -40,59 +40,59 @@ Defines the color resources of a theme.
 
 <!--RP1--><!--RP1End-->
 
-| Name                          | Type                                                | Read Only| Optional| Description              |
+| Name                          | Type                                                | Read-Only| Optional| Description              |
 |-------------------------------|-----------------------------------------------------|-----|-----|------------------|
-| brand                         | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Brand color.<br>Affected components: [TextInput](./arkui-ts/ts-basic-components-textinput.md), [Search](./arkui-ts/ts-basic-components-search.md)       |
+| brand                         | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Brand color.<br>**Affected components**: [TextInput](./arkui-ts/ts-basic-components-textinput.md), [Search](./arkui-ts/ts-basic-components-search.md)       |
 | warning                       | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Warning color.<br>Affected components: [TipsDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#tipsdialog), [AlertDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#alertdialog), [CustomContentDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#customcontentdialog12),<br>[Badge](./arkui-ts/ts-container-badge.md), [Button](./arkui-ts/ts-basic-components-button.md)         |
-| alert                         | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Alert color.<br>Affected components: None          |
-| confirm                       | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Confirmation color.<br>Affected components: None            |
-| fontPrimary                   | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Primary font color.<br>Affected components: [EditableTitleBar](./arkui-ts/ohos-arkui-advanced-EditableTitleBar.md), [LoadingDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#loadingdialog) and [TipsDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#tipsdialog)<br>[ConfirmDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#confirmdialog), [AlertDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#alertdialog), [SelectDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#selectdialog),<br>[CustomContentDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#customcontentdialog12), [Swiper](./arkui-ts/ts-container-swiper.md), [Text](./arkui-ts/ts-basic-components-text.md),<br>[SubHeader](./arkui-ts/ohos-arkui-advanced-SubHeader.md), [ProgressButton](./arkui-ts/ohos-arkui-advanced-ProgressButton.md), [AlphabetIndexer](./arkui-ts/ts-container-alphabet-indexer.md),<br>[Popup](./arkui-ts/ohos-arkui-advanced-Popup.md), [Select](./arkui-ts/ts-basic-components-select.md), [Chip](./arkui-ts/ohos-arkui-advanced-Chip.md),<br>[ToolBar](./arkui-ts/ohos-arkui-advanced-ToolBar.md), [Menu](./arkui-ts/ts-basic-components-menu.md), [TextInput](./arkui-ts/ts-basic-components-textinput.md),<br>[Search](./arkui-ts/ts-basic-components-search.md), [Counter](./arkui-ts/ts-container-counter.md), [TimePicker](./arkui-ts/ts-basic-components-timepicker.md), [DatePicker](./arkui-ts/ts-basic-components-datepicker.md),<br>[TextPicker](./arkui-ts/ts-basic-components-textpicker.md), [ComposeListItem](./arkui-ts/ohos-arkui-advanced-ComposeListItem.md), [TreeView](./arkui-ts/ohos-arkui-advanced-TreeView.md)       |
-| fontSecondary                 | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Secondary font color.<br>Affected components: [EditableTitleBar](./arkui-ts/ohos-arkui-advanced-EditableTitleBar.md), [AlertDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#alertdialog), [CustomContentDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#customcontentdialog12),<br>[SubHeader](./arkui-ts/ohos-arkui-advanced-SubHeader.md), [AlphabetIndexer](./arkui-ts/ts-container-alphabet-indexer.md), [Popup](./arkui-ts/ohos-arkui-advanced-Popup.md),<br>[TextInput](./arkui-ts/ts-basic-components-textinput.md), [Search](./arkui-ts/ts-basic-components-search.md), [ComposeListItem](./arkui-ts/ohos-arkui-advanced-ComposeListItem.md),<br>[TreeView](./arkui-ts/ohos-arkui-advanced-TreeView.md)        |
-| fontTertiary                  | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Tertiary font color.<br>Affected components: [ComposeListItem](./arkui-ts/ohos-arkui-advanced-ComposeListItem.md)       |
-| fontFourth                    | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Fourth-level font color.<br>Affected components: None       |
-| fontEmphasize                 | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Emphasis font color.<br>Affected components: [TipsDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#tipsdialog), [ConfirmDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#confirmdialog) and [AlertDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#alertdialog)<br>[SelectDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#selectdialog), [CustomContentDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#customcontentdialog12), [SubHeader](./arkui-ts/ohos-arkui-advanced-SubHeader.md),<br>[AlphabetIndexer](./arkui-ts/ts-container-alphabet-indexer.md), [Popup](./arkui-ts/ohos-arkui-advanced-Popup.md), [Button](./arkui-ts/ts-basic-components-button.md),<br>[Select](./arkui-ts/ts-basic-components-select.md), [ToolBar](./arkui-ts/ohos-arkui-advanced-ToolBar.md), [Search](./arkui-ts/ts-basic-components-search.md),<br>[TimePicker](./arkui-ts/ts-basic-components-timepicker.md), [DatePicker](./arkui-ts/ts-basic-components-datepicker.md), [TextPicker](./arkui-ts/ts-basic-components-textpicker.md)         |
-| fontOnPrimary                 | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Primary inverted font color used on color background.<br>Affected components: [Badge](./arkui-ts/ts-container-badge.md), [Button](./arkui-ts/ts-basic-components-button.md) and [Chip](./arkui-ts/ohos-arkui-advanced-Chip.md)|
-| fontOnSecondary               | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Secondary inverted font color used on color background.<br>Affected components: None|
-| fontOnTertiary                | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Tertiary inverted font color used on color background.<br>Affected components: None|
-| fontOnFourth                  | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Fourth-level inverted font color used on color background.<br>Affected components: None|
-| iconPrimary                   | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Primary icon color.<br>Affected components: [EditableTitleBar](./arkui-ts/ohos-arkui-advanced-EditableTitleBar.md), [Swiper](./arkui-ts/ts-container-swiper.md) and [ToolBar](./arkui-ts/ohos-arkui-advanced-ToolBar.md)<br>[TreeView](./arkui-ts/ohos-arkui-advanced-TreeView.md)          |
-| iconSecondary                 | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Secondary icon color.<br>Affected components: [LoadingDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#loadingdialog), [SubHeader](./arkui-ts/ohos-arkui-advanced-SubHeader.md) and [LoadingProgress](./arkui-ts/ts-basic-components-loadingprogress.md)<br>[Popup](./arkui-ts/ohos-arkui-advanced-Popup.md), [Chip](./arkui-ts/ohos-arkui-advanced-Chip.md), [Search](./arkui-ts/ts-basic-components-search.md),<br>[TreeView](./arkui-ts/ohos-arkui-advanced-TreeView.md)          |
-| iconTertiary                  | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Tertiary icon color.<br>Affected components: [SubHeader](./arkui-ts/ohos-arkui-advanced-SubHeader.md)         |
-| iconFourth                    | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Fourth-level icon color.<br>Affected components: [Checkbox](./arkui-ts/ts-basic-components-checkbox.md), [CheckboxGroup](arkui-ts/ts-basic-components-checkboxgroup.md) and [Radio](./arkui-ts/ts-basic-components-radio.md)         |
-| iconEmphasize                 | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Emphasis icon color.<br>Affected components: [ToolBar](./arkui-ts/ohos-arkui-advanced-ToolBar.md)         |
-| iconSubEmphasize              | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Color of the emphasis auxiliary icon.<br>Affected components: None       |
-| iconOnPrimary                 | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Primary inverted icon color used on color background.<br>Affected components: [Checkbox](./arkui-ts/ts-basic-components-checkbox.md), [CheckboxGroup](arkui-ts/ts-basic-components-checkboxgroup.md), [Radio](./arkui-ts/ts-basic-components-radio.md)|
-| iconOnSecondary               | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Secondary inverted icon color used on color background.<br>Affected components: [Chip](./arkui-ts/ohos-arkui-advanced-Chip.md)|
-| iconOnTertiary                | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Tertiary inverted icon color used on color background.<br>Affected components: None|
-| iconOnFourth                  | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Fourth-level inverted icon color used on color background.<br>Affected components: [ProgressButton](./arkui-ts/ohos-arkui-advanced-ProgressButton.md)|
-| backgroundPrimary             | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Primary background color (solid, opaque).<br>Affected components: [TextInput](./arkui-ts/ts-basic-components-textinput.md), [QRCode](./arkui-ts/ts-basic-components-qrcode.md) |
-| backgroundSecondary           | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Secondary background color (solid, opaque).<br>Affected components: None |
-| backgroundTertiary            | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Tertiary background color (solid, opaque).<br>Affected components: None |
-| backgroundFourth              | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Fourth-level background color (solid, opaque).<br>Affected components: None |
-| backgroundEmphasize           | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Emphasis background color (solid, opaque).<br>Affected components: [Progress](./arkui-ts/ts-basic-components-progress.md), [Button](./arkui-ts/ts-basic-components-button.md) and [Slider](./arkui-ts/ts-basic-components-slider.md) |
-| compForegroundPrimary         | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Foreground.<br>Affected components: [QRCode](./arkui-ts/ts-basic-components-qrcode.md)           |
-| compBackgroundPrimary         | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | White background.<br>Affected components: none           |
-| compBackgroundPrimaryTran     | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | White transparent background.<br>Affected components: none        |
-| compBackgroundPrimaryContrary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Always-on background.<br>Affected components: [Toggle](./arkui-ts/ts-basic-components-toggle.md) and [Slider](./arkui-ts/ts-basic-components-slider.md)          |
-| compBackgroundGray            | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Gray background.<br>Affected components: none           |
-| compBackgroundSecondary       | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Secondary background.<br>Affected components: [Swiper](./arkui-ts/ts-container-swiper.md) and [Slider](./arkui-ts/ts-basic-components-slider.md)           |
-| compBackgroundTertiary        | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Tertiary background.<br>Affected components: [EditableTitleBar](./arkui-ts/ohos-arkui-advanced-EditableTitleBar.md), [Progress](./arkui-ts/ts-basic-components-progress.md) and [AlphabetIndexer](./arkui-ts/ts-container-alphabet-indexer.md)<br>[Button](./arkui-ts/ts-basic-components-button.md), [Select](./arkui-ts/ts-basic-components-select.md), [Toggle](./arkui-ts/ts-basic-components-toggle.md),<br>[Chip](./arkui-ts/ohos-arkui-advanced-Chip.md), [TextInput](./arkui-ts/ts-basic-components-textinput.md), [Search](./arkui-ts/ts-basic-components-search.md)           |
-| compBackgroundEmphasize       | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Emphasis background.<br>Affected components: [Swiper](./arkui-ts/ts-container-swiper.md), [Toggle](./arkui-ts/ts-basic-components-toggle.md) and [Chip](./arkui-ts/ohos-arkui-advanced-Chip.md)<br>[Checkbox](./arkui-ts/ts-basic-components-checkbox.md), [CheckboxGroup](arkui-ts/ts-basic-components-checkboxgroup.md), [Radio](./arkui-ts/ts-basic-components-radio.md)           |
-| compBackgroundNeutral         | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Black, neutral, emphasis background.<br>Affected components: [PatternLock](./arkui-ts/ts-basic-components-patternlock.md)     |
-| compEmphasizeSecondary        | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | 20% emphasis background color.<br>Affected components: [Progress](./arkui-ts/ts-basic-components-progress.md), [ProgressButton](./arkui-ts/ohos-arkui-advanced-ProgressButton.md) and [AlphabetIndexer](./arkui-ts/ts-container-alphabet-indexer.md)<br>[Select](./arkui-ts/ts-basic-components-select.md), [Toggle](./arkui-ts/ts-basic-components-toggle.md)      |
-| compEmphasizeTertiary         | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | 10% emphasis background color.<br>Affected components: None      |
-| compDivider                   | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Common divider color.<br>Affected components: [SelectDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#selectdialog), [PatternLock](./arkui-ts/ts-basic-components-patternlock.md) and [Divider](./arkui-ts/ts-basic-components-divider.md)        |
-| compCommonContrary            | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Common inverted color.<br>Affected components: None         |
-| compBackgroundFocus           | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Background color in the focused state.<br>Affected components: None        |
-| compFocusedPrimary            | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Primary inverted color in the focused state.<br>Affected components: None      |
-| compFocusedSecondary          | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Secondary inverted color in the focused state.<br>Affected components: None      |
-| compFocusedTertiary           | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Tertiary inverted color in the focused state.<br>Affected components: [Scroll](arkui-ts/ts-container-scroll.md)      |
-| interactiveHover              | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Common interactive color for the hover state.<br>Affected components: [EditableTitleBar](./arkui-ts/ohos-arkui-advanced-EditableTitleBar.md), [Chip](./arkui-ts/ohos-arkui-advanced-Chip.md) and [TreeView](./arkui-ts/ohos-arkui-advanced-TreeView.md)     |
-| interactivePressed            | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Common interactive color for the pressed state.<br>Affected components: [EditableTitleBar](./arkui-ts/ohos-arkui-advanced-EditableTitleBar.md), [Chip](./arkui-ts/ohos-arkui-advanced-Chip.md) and [TreeView](./arkui-ts/ohos-arkui-advanced-TreeView.md)      |
-| interactiveFocus              | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Common interactive color for the focused state.<br>Affected components: [EditableTitleBar](./arkui-ts/ohos-arkui-advanced-EditableTitleBar.md), [Chip](./arkui-ts/ohos-arkui-advanced-Chip.md) and [TreeView](./arkui-ts/ohos-arkui-advanced-TreeView.md)      |
-| interactiveActive             | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Common interactive color for the active state.<br>Affected components: [TreeView](./arkui-ts/ohos-arkui-advanced-TreeView.md)      |
-| interactiveSelect             | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Common interactive color for the selected state.<br>Affected components: [TreeView](./arkui-ts/ohos-arkui-advanced-TreeView.md)      |
-| interactiveClick              | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Common interactive color for the clicked state.<br>Affected components: None      |
+| alert                         | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Alert color.<br>**Affected components**: N/A          |
+| confirm                       | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Confirmation color.<br>**Affected components**: N/A            |
+| fontPrimary                   | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Primary font color.<br>**Affected components**: [EditableTitleBar](./arkui-ts/ohos-arkui-advanced-EditableTitleBar.md), [LoadingDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#loadingdialog), [TipsDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#tipsdialog)<br>[ConfirmDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#confirmdialog), [AlertDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#alertdialog), [SelectDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#selectdialog),<br>[CustomContentDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#customcontentdialog12), [Swiper](./arkui-ts/ts-container-swiper.md), [Text](./arkui-ts/ts-basic-components-text.md),<br>[SubHeader](./arkui-ts/ohos-arkui-advanced-SubHeader.md), [ProgressButton](./arkui-ts/ohos-arkui-advanced-ProgressButton.md), [AlphabetIndexer](./arkui-ts/ts-container-alphabet-indexer.md),<br>[Popup](./arkui-ts/ohos-arkui-advanced-Popup.md), [Select](./arkui-ts/ts-basic-components-select.md), [Chip](./arkui-ts/ohos-arkui-advanced-Chip.md),<br>[ToolBar](./arkui-ts/ohos-arkui-advanced-ToolBar.md), [Menu](./arkui-ts/ts-basic-components-menu.md), [TextInput](./arkui-ts/ts-basic-components-textinput.md),<br>[Search](./arkui-ts/ts-basic-components-search.md), [Counter](./arkui-ts/ts-container-counter.md), [TimePicker](./arkui-ts/ts-basic-components-timepicker.md), [DatePicker](./arkui-ts/ts-basic-components-datepicker.md),<br>[TextPicker](./arkui-ts/ts-basic-components-textpicker.md), [ComposeListItem](./arkui-ts/ohos-arkui-advanced-ComposeListItem.md), [TreeView](./arkui-ts/ohos-arkui-advanced-TreeView.md)       |
+| fontSecondary                 | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Secondary font color.<br>**Affected components**: [EditableTitleBar](./arkui-ts/ohos-arkui-advanced-EditableTitleBar.md), [AlertDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#alertdialog), [CustomContentDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#customcontentdialog12),<br>[SubHeader](./arkui-ts/ohos-arkui-advanced-SubHeader.md), [AlphabetIndexer](./arkui-ts/ts-container-alphabet-indexer.md), [Popup](./arkui-ts/ohos-arkui-advanced-Popup.md),<br>[TextInput](./arkui-ts/ts-basic-components-textinput.md), [Search](./arkui-ts/ts-basic-components-search.md), [ComposeListItem](./arkui-ts/ohos-arkui-advanced-ComposeListItem.md),<br>[TreeView](./arkui-ts/ohos-arkui-advanced-TreeView.md)        |
+| fontTertiary                  | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Tertiary font color.<br>**Affected components**: [ComposeListItem](./arkui-ts/ohos-arkui-advanced-ComposeListItem.md)       |
+| fontFourth                    | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Fourth-level font color.<br>**Affected components**: N/A       |
+| fontEmphasize                 | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Emphasis font color.<br>**Affected components**: [TipsDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#tipsdialog), [ConfirmDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#confirmdialog), [AlertDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#alertdialog)<br>[SelectDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#selectdialog), [CustomContentDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#customcontentdialog12), [SubHeader](./arkui-ts/ohos-arkui-advanced-SubHeader.md),<br>[AlphabetIndexer](./arkui-ts/ts-container-alphabet-indexer.md), [Popup](./arkui-ts/ohos-arkui-advanced-Popup.md), [Button](./arkui-ts/ts-basic-components-button.md),<br>[Select](./arkui-ts/ts-basic-components-select.md), [ToolBar](./arkui-ts/ohos-arkui-advanced-ToolBar.md), [Search](./arkui-ts/ts-basic-components-search.md),<br>[TimePicker](./arkui-ts/ts-basic-components-timepicker.md), [DatePicker](./arkui-ts/ts-basic-components-datepicker.md), [TextPicker](./arkui-ts/ts-basic-components-textpicker.md)         |
+| fontOnPrimary                 | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Primary inverted font color used on color background.<br>**Affected components**: [Badge](./arkui-ts/ts-container-badge.md), [Button](./arkui-ts/ts-basic-components-button.md), [Chip](./arkui-ts/ohos-arkui-advanced-Chip.md)|
+| fontOnSecondary               | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Secondary inverted font color used on color background.<br>**Affected components**: N/A|
+| fontOnTertiary                | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Tertiary inverted font color used on color background.<br>**Affected components**: N/A|
+| fontOnFourth                  | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Fourth-level inverted font color used on color background.<br>**Affected components**: N/A|
+| iconPrimary                   | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Primary icon color.<br>**Affected components**: [EditableTitleBar](./arkui-ts/ohos-arkui-advanced-EditableTitleBar.md), [Swiper](./arkui-ts/ts-container-swiper.md), [ToolBar](./arkui-ts/ohos-arkui-advanced-ToolBar.md)<br>[TreeView](./arkui-ts/ohos-arkui-advanced-TreeView.md)          |
+| iconSecondary                 | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Secondary icon color.<br>**Affected components**: [LoadingDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#loadingdialog), [SubHeader](./arkui-ts/ohos-arkui-advanced-SubHeader.md), [LoadingProgress](./arkui-ts/ts-basic-components-loadingprogress.md)<br>[Popup](./arkui-ts/ohos-arkui-advanced-Popup.md), [Chip](./arkui-ts/ohos-arkui-advanced-Chip.md), [Search](./arkui-ts/ts-basic-components-search.md),<br>[TreeView](./arkui-ts/ohos-arkui-advanced-TreeView.md)          |
+| iconTertiary                  | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Tertiary icon color.<br>**Affected components**: [SubHeader](./arkui-ts/ohos-arkui-advanced-SubHeader.md)         |
+| iconFourth                    | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Fourth-level icon color.<br>**Affected components**: [Checkbox](./arkui-ts/ts-basic-components-checkbox.md), [CheckboxGroup](arkui-ts/ts-basic-components-checkboxgroup.md), [Radio](./arkui-ts/ts-basic-components-radio.md)         |
+| iconEmphasize                 | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Emphasis icon color.<br>**Affected components**: [ToolBar](./arkui-ts/ohos-arkui-advanced-ToolBar.md)         |
+| iconSubEmphasize              | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Color of the emphasis auxiliary icon.<br>**Affected components**: N/A       |
+| iconOnPrimary                 | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Primary inverted icon color used on color background.<br>**Affected components**: [Checkbox](./arkui-ts/ts-basic-components-checkbox.md), [CheckboxGroup](arkui-ts/ts-basic-components-checkboxgroup.md), [Radio](./arkui-ts/ts-basic-components-radio.md)|
+| iconOnSecondary               | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Secondary inverted icon color used on color background.<br>**Affected components**: [Chip](./arkui-ts/ohos-arkui-advanced-Chip.md)|
+| iconOnTertiary                | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Tertiary inverted icon color used on color background.<br>**Affected components**: N/A|
+| iconOnFourth                  | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Fourth-level inverted icon color used on color background.<br>**Affected components**: [ProgressButton](./arkui-ts/ohos-arkui-advanced-ProgressButton.md)|
+| backgroundPrimary             | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Primary background color (solid, opaque).<br>**Affected components**: [TextInput](./arkui-ts/ts-basic-components-textinput.md), [QRCode](./arkui-ts/ts-basic-components-qrcode.md) |
+| backgroundSecondary           | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Secondary background color (solid, opaque).<br>**Affected components**: N/A |
+| backgroundTertiary            | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Tertiary background color (solid, opaque).<br>**Affected components**: N/A |
+| backgroundFourth              | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Fourth-level background color (solid, opaque).<br>**Affected components**: N/A |
+| backgroundEmphasize           | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Emphasis background color (solid, opaque).<br>**Affected components**: [Progress](./arkui-ts/ts-basic-components-progress.md), [Button](./arkui-ts/ts-basic-components-button.md), [Slider](./arkui-ts/ts-basic-components-slider.md) |
+| compForegroundPrimary         | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Foreground.<br>**Affected components**: [QRCode](./arkui-ts/ts-basic-components-qrcode.md)           |
+| compBackgroundPrimary         | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | White background.<br>**Affected components**: N/A           |
+| compBackgroundPrimaryTran     | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | White transparent background.<br>**Affected components**: N/A        |
+| compBackgroundPrimaryContrary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Always-on background.<br>**Affected components**: [Toggle](./arkui-ts/ts-basic-components-toggle.md), [Slider](./arkui-ts/ts-basic-components-slider.md)          |
+| compBackgroundGray            | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Gray background.<br>**Affected components**: N/A           |
+| compBackgroundSecondary       | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Secondary background.<br>**Affected components**: [Swiper](./arkui-ts/ts-container-swiper.md), [Slider](./arkui-ts/ts-basic-components-slider.md)           |
+| compBackgroundTertiary        | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Tertiary background.<br>**Affected components**: [EditableTitleBar](./arkui-ts/ohos-arkui-advanced-EditableTitleBar.md), [Progress](./arkui-ts/ts-basic-components-progress.md), [AlphabetIndexer](./arkui-ts/ts-container-alphabet-indexer.md)<br>[Button](./arkui-ts/ts-basic-components-button.md), [Select](./arkui-ts/ts-basic-components-select.md), [Toggle](./arkui-ts/ts-basic-components-toggle.md),<br>[Chip](./arkui-ts/ohos-arkui-advanced-Chip.md), [TextInput](./arkui-ts/ts-basic-components-textinput.md), [Search](./arkui-ts/ts-basic-components-search.md)           |
+| compBackgroundEmphasize       | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Emphasis background.<br>**Affected components**: [Swiper](./arkui-ts/ts-container-swiper.md), [Toggle](./arkui-ts/ts-basic-components-toggle.md), [Chip](./arkui-ts/ohos-arkui-advanced-Chip.md)<br>[Checkbox](./arkui-ts/ts-basic-components-checkbox.md), [CheckboxGroup](arkui-ts/ts-basic-components-checkboxgroup.md), [Radio](./arkui-ts/ts-basic-components-radio.md)           |
+| compBackgroundNeutral         | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Black, neutral, emphasis background.<br>**Affected components**: [PatternLock](./arkui-ts/ts-basic-components-patternlock.md)     |
+| compEmphasizeSecondary        | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | 20% emphasis background color.<br>**Affected components**: [Progress](./arkui-ts/ts-basic-components-progress.md), [ProgressButton](./arkui-ts/ohos-arkui-advanced-ProgressButton.md), [AlphabetIndexer](./arkui-ts/ts-container-alphabet-indexer.md)<br>[Select](./arkui-ts/ts-basic-components-select.md), [Toggle](./arkui-ts/ts-basic-components-toggle.md)      |
+| compEmphasizeTertiary         | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | 10% emphasis background color.<br>**Affected components**: N/A      |
+| compDivider                   | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Common divider color.<br>**Affected components**: [SelectDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#selectdialog), [PatternLock](./arkui-ts/ts-basic-components-patternlock.md), [Divider](./arkui-ts/ts-basic-components-divider.md)        |
+| compCommonContrary            | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Common inverted color.<br>**Affected components**: N/A         |
+| compBackgroundFocus           | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Background color in the focused state.<br>**Affected components**: N/A        |
+| compFocusedPrimary            | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Primary inverted color in the focused state.<br>**Affected components**: N/A      |
+| compFocusedSecondary          | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Secondary inverted color in the focused state.<br>**Affected components**: N/A      |
+| compFocusedTertiary           | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Tertiary inverted color in the focused state.<br>**Affected components**: [Scroll](arkui-ts/ts-container-scroll.md)      |
+| interactiveHover              | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Common interactive color for the hover state.<br>**Affected components**: [EditableTitleBar](./arkui-ts/ohos-arkui-advanced-EditableTitleBar.md), [Chip](./arkui-ts/ohos-arkui-advanced-Chip.md), [TreeView](./arkui-ts/ohos-arkui-advanced-TreeView.md)     |
+| interactivePressed            | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Common interactive color for the pressed state.<br>**Affected components**: [EditableTitleBar](./arkui-ts/ohos-arkui-advanced-EditableTitleBar.md), [Chip](./arkui-ts/ohos-arkui-advanced-Chip.md), [TreeView](./arkui-ts/ohos-arkui-advanced-TreeView.md)      |
+| interactiveFocus              | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Common interactive color for the focused state.<br>**Affected components**: [EditableTitleBar](./arkui-ts/ohos-arkui-advanced-EditableTitleBar.md), [Chip](./arkui-ts/ohos-arkui-advanced-Chip.md), [TreeView](./arkui-ts/ohos-arkui-advanced-TreeView.md)      |
+| interactiveActive             | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Common interactive color for the active state.<br>**Affected components**: [TreeView](./arkui-ts/ohos-arkui-advanced-TreeView.md)      |
+| interactiveSelect             | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Common interactive color for the selected state.<br>**Affected components**: [TreeView](./arkui-ts/ohos-arkui-advanced-TreeView.md)      |
+| interactiveClick              | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | No  | No  | Common interactive color for the clicked state.<br>**Affected components**: N/A      |
 
 ## CustomTheme
 
@@ -100,7 +100,7 @@ Defines a custom theme object.
 
 **System capability**: SystemCapability.ArkUI.ArkUI.Full
 
-| Name                          | Type                                                | Read Only | Optional | Description        |
+| Name                          | Type                                                | Read-Only | Optional | Description        |
 |-------------------------------|-----------------------------------------------------|-----|-----|------------|
 | colors | [CustomColors](#customcolors) | No  | Yes  | Color resources of the custom theme.<br>**Atomic service API**: This API can be used in atomic services since API version 12.|
 | darkColors<sup>20+</sup> | [CustomDarkColors](#customdarkcolors20) | No  | Yes  | Custom dark theme color resources.<br>Note: If **darkColors** is not configured, the color values will default to those specified in the **colors** configuration for light mode and will not adapt to dark mode changes, unless the colors are defined using resources from the **dark** directory.<br>**Atomic service API**: This API can be used in atomic services since API version 20.|
@@ -131,7 +131,7 @@ Defines the type for dark theme color resources.
 
 | Type | Description          |
 |-----|--------------|
-| Partial<[Colors](#colors)>   | Customizes dark theme color resources.|
+| Partial<[Colors](#colors)>   | Type representing customizable dark theme color resources.|
 
 ## ThemeControl
 
@@ -145,7 +145,7 @@ Implements a **ThemeControl** object to apply the custom theme to the components
 
 setDefaultTheme(theme: [CustomTheme](#customtheme)): void
 
-Applies a custom theme to an app to implement theme-based style switching. If this API is used to set the application-level default theme on a page, ensure that this API is executed before the page is built. If this API is used to set the application-level default theme in UIAbility, ensure that this API is executed in the callback function after the windowStage.[loadContent](./arkts-apis-window-Window.md#loadcontent9) API is called in the onWindowStageCreate phase. For details, see [Setting Custom Theme Colors for Application Components](../../ui/theme_skinning.md#setting-custom-theme-colors-for-application-components).
+Sets a custom theme as the default, application-level theme, applying it to all components within the application. When using this API within a page, ensure that the API is called before the page's **build** API executes. When using this API within a UIAbility, ensure that the API is called in the callback after windowStage.[loadContent](./arkts-apis-window-WindowStage.md#loadcontent9) during the **onWindowStageCreate** lifecycle phase. For a complete implementation example, see [Setting Custom Theme Colors for Application Components](../../ui/theme_skinning.md#setting-custom-theme-colors-for-application-components).
 
 **Atomic service API**: This API can be used in atomic services since API version 12.
 
@@ -163,8 +163,8 @@ Applies a custom theme to an app to implement theme-based style switching. If th
 import { CustomTheme, CustomColors, ThemeControl } from '@kit.ArkUI';
 // Custom theme color
 class BlueColors implements CustomColors {
-  fontPrimary = Color.Red;
-  backgroundPrimary = Color.Blue;
+  fontPrimary = "#FF707070";
+  backgroundPrimary = "#FF2787D9";
   brand = "#FFEEAAFF"; // Brand color.
 }
 
@@ -196,8 +196,8 @@ struct Index {
         QRCode('Hello')
           .width(100)
           .height(100)
-        // Apply brand to the cursor color of the text box.
-        TextInput({placeholder: 'input your word...'})
+        // Apply brand to the input box cursor color.
+        TextInput({placeholder: 'Enter your text here'})
           .width('80%')
           .height(40)
           .margin(20)
@@ -208,3 +208,7 @@ struct Index {
   }
 }
 ```
+
+![en-us_image_setDefaultTheme_light](figures/en-us_image_setDefaultTheme_lights.png)
+
+![en-us_image_setDefaultTheme_night](figures/en-us_image_setDefaultTheme_nights.png)

en/application-dev/reference/apis-basic-services-kit/js-apis-appAccount.md

@@ -4800,7 +4800,7 @@ Obtains all tokens visible to the invoker for an application account. This API u
 
 getOAuthList(name: string, authType: string, callback: AsyncCallback<Array<string>>): void
 
-Obtains the authorization list of the specified authentication type for an application account. The authorization list contains all authorized bundles. The token authorization list is set by setOAuthTokenVisibility(#setoauthtokenvisibilitydeprecated). This API uses an asynchronous callback to return the result.
+Obtains the authorization list of the specified authentication type for an application account. The authorization list contains all authorized bundles. The token authorization list is set by [setOAuthTokenVisibility](#setoauthtokenvisibilitydeprecated). This API uses an asynchronous callback to return the result.
 
 > **NOTE**
 >
@@ -4834,7 +4834,7 @@ Obtains the authorization list of the specified authentication type for an appli
 
 getOAuthList(name: string, authType: string): Promise<Array<string>>
 
-Obtains the authorization list of the specified authentication type for an application account. The authorization list contains all authorized bundles. The token authorization list is set by setOAuthTokenVisibility(#setoauthtokenvisibilitydeprecated). This API uses a promise to return the result.
+Obtains the authorization list of the specified authentication type for an application account. The authorization list contains all authorized bundles. The token authorization list is set by [setOAuthTokenVisibility](#setoauthtokenvisibilitydeprecated). This API uses a promise to return the result.
 
 > **NOTE**
 >

en/application-dev/ui/Readme-EN.md

@@ -155,7 +155,7 @@
        - [Global Popup Independent of UI Components (openPopup)](arkts-popup-and-menu-components-uicontext-popup.md)
      - Binding Modal Pages<!--arkts-bind-modal-->
         - [Modal Page Overview](arkts-modal-overview.md)
-        - [Binding a Semi-Modal Page (bindSheet)](arkts-sheet-page.md)
+        - [Binding a Modal Sheet (bindSheet)](arkts-sheet-page.md)
         - [Binding a Full-Modal Page (bindContentCover)](arkts-contentcover-page.md)
      - [Using Toasts (Toast)](arkts-create-toast.md)
      - [Managing Overlays (OverlayManager)](arkts-create-overlaymanager.md)

en/application-dev/ui/arkts-advanced-components-arcbutton.md

@@ -1,7 +1,13 @@
 # Arc Button (ArcButton)
+<!--Kit: ArkUI-->
+<!--Subsystem: ArkUI-->
+<!--Owner: @liyi0309-->
+<!--Designer: @liyi0309-->
+<!--Tester: @lxl007-->
+<!--Adviser: @Brilliantry_Rui-->
 
 
-The **ArcButton** component represents an arc button specifically designed for circular screens. It offers various button styles, such as emphasized, normal, and warning, tailored for watch UIs. For details, see [ArcButton](../reference/apis-arkui/arkui-ts/ohos-arkui-advanced-ArcButton.md).
+The **ArcButton** component is supported since API version 18. The **ArcButton** component represents an arc button specifically designed for circular screens. It offers various button styles, such as emphasized, normal, and warning, tailored for watch UIs. For details, see [ArcButton](../reference/apis-arkui/arkui-ts/ohos-arkui-advanced-ArcButton.md).
 
 
 ## Creating a Button
@@ -145,7 +151,23 @@ The **ArcButton** component offers two types: top arc button and bottom arc butt
 
 This example demonstrates a brightness settings screen where a slider displays the current brightness level at 30%. When the reset button is clicked, the brightness value is reset to the default value of 50%.
 
-  ```ts
+To run this sample code, wearable device support is required. In the project configuration file [module.json5](../quick-start/module-configuration-file.md) located in the **src/main** directory, configure **wearable** under [devicetypes](../quick-start/module-configuration-file.md#devicetypes).
+
+```json
+// module.json5
+{
+  "module": {
+    // ...
+    "deviceTypes": [
+      "wearable",
+      "phone"
+    ]
+    // ...
+  }
+}
+```
+
+```ts
 import { LengthMetrics, LengthUnit, ArcButton, ArcButtonOptions, ArcButtonStyleMode } from '@kit.ArkUI';
 
 @Entry

en/application-dev/ui/arkts-animator.md

@@ -99,11 +99,11 @@ To create a simple animator and print the current interpolation value in each fr
      }
      // Invoked when the animation is canceled.
      this.animatorOptions.onCancel = () => {
-       this.animatorStatus = 'Canceled'
+       this.animatorStatus = 'Canceled';
      }
      // Invoked when the animation finishes playing.
      this.animatorOptions.onFinish = () => {
-       this.animatorStatus = 'Finished'
+       this.animatorStatus = 'Finished';
      }
      // Invoked when the animation repeats.
      this.animatorOptions.onRepeat = () => {
@@ -143,8 +143,8 @@ import { AnimatorOptions, AnimatorResult } from '@kit.ArkUI';
 @Entry
 @Component
 struct Index {
-  @State animatorOptions: AnimatorResult | undefined = undefined;
-  @State animatorStatus: string =' Created'
+  @State animatorResult: AnimatorResult | undefined = undefined;
+  @State animatorStatus: string =' Created';
   begin: number = 0;
   end: number = 300;
   topWidth: number = 150;
@@ -164,33 +164,33 @@ struct Index {
   @State translateY: number = 0;
 
   onPageShow(): void {
-    this.animatorOptions = this.getUIContext().createAnimator(this.animatorOption)
-    this.animatorOptions.onFrame = (progress: number) => {
+    this.animatorResult = this.getUIContext().createAnimator(this.animatorOption)
+    this.animatorResult.onFrame = (progress: number) => {
       this.translateX = progress;
       if (progress > this.topWidth && this.translateY < this.bottomHeight) {
         this.translateY = Math.pow(progress - this.topWidth, 2) * this.g;
       }
     }
-    this.animatorOptions.onCancel = () => {
-      this.animatorStatus = 'Canceled'
+    this.animatorResult.onCancel = () => {
+      this.animatorStatus = 'Canceled';
     }
-    this.animatorOptions.onFinish = () => {
-      this.animatorStatus = 'Finished'
+    this.animatorResult.onFinish = () => {
+      this.animatorStatus = 'Finished';
     }
-    this.animatorOptions.onRepeat = () => {
+    this.animatorResult.onRepeat = () => {
       console.info("Animation repeating");
     }
   }
 
   onPageHide(): void {
-    this.animatorOptions = undefined;
+    this.animatorResult = undefined;
   }
 
   build() {
     Column() {
       Column({ space: 30 }) {
         Button('Play').onClick(() => {
-          this.animatorOptions?.play();
+          this.animatorResult?.play();
           this.animatorStatus = 'Playing';
         }).width(80).height(35)
         Button("Reset").onClick(() => {
@@ -198,7 +198,7 @@ struct Index {
           this.translateY = 0;
         }).width(80).height(35)
         Button("Pause").onClick(() => {
-          this.animatorOptions?.pause();
+          this.animatorResult?.pause();
           this.animatorStatus = 'Paused';
         }).width(80).height(35)
       }.width("100%").height('25%')

en/application-dev/ui/arkts-attribute-animation-apis.md

@@ -6,7 +6,6 @@
 <!--Tester: @lxl007-->
 <!--Adviser: @Brilliantry_Rui-->
 
-
 Continuous visual effects on the UI resulting from changes to animatable properties are called property animations. As the most fundamental and intuitive type of animation, property animations form the core of UI animation systems. ArkUI provides three animation APIs to create these effects: [animateTo](../reference/apis-arkui/arkts-apis-uicontext-uicontext.md#animateto), [animation](../reference/apis-arkui/arkui-ts/ts-animatorproperty.md), and [keyframeAnimateTo](../reference/apis-arkui/arkui-ts/ts-keyframeAnimateTo.md).
 
 > **NOTE**
@@ -15,21 +14,21 @@ Continuous visual effects on the UI resulting from changes to animatable propert
 
 | Animation API| Scope| Principle| Use Scenario|
 | -------- | -------- | -------- | -------- |
-| animateTo | UI changes caused by property changes in closures.<br>Transition for appearance and disappearance.| This API is a common function. It animates the differences between the UIs before and after state variables in the closure change.<br>This API supports multiple calls and nesting.| A single set of animation parameters is used to animate multiple properties.<br>Animations need to be nested.|
+| animateTo | UI changes caused by property changes in closures.<br>Transition for appearance and disappearance.| This API is a common function. It animates the differences between the UIs before and after state variables in the closure change.<br>This API supports multiple calls and nesting.| A single set of animation parameters is used to animate multiple properties.<br>Animations need to be nested.<br>Note: To achieve multiple animation cycles, it is recommended that you set the **playMode** and **iterations** properties of [AnimateParam](../reference/apis-arkui/arkui-ts/ts-explicit-animation.md#animateparam) or use **keyframeAnimateTo**.|
 | animation | UI changes caused by property changes bound to components through property APIs.| This API automatically detects changes to animatable properties and applies animations.<br>As the API call sequence of the component is from bottom to top, this API applies only to the properties declared above it in the component chain.<br>In a component, you can set **animation** for individual properties based on the API call sequence.| Different animation parameters are used for different properties.|
 | keyframeAnimateTo | Segmented property animation caused by property changes in multiple closures.| This API is a common function. It animates the difference between state variables in each closure and the previous state.<br>This API supports multiple calls, but nesting is not recommended.| Multiple animations are applied to the same property sequentially.|
 
 ## animateTo
 
 
-```
+```ts
 animateTo(value: AnimateParam, event: () => void): void
 ```
 
 The [animateTo](../reference/apis-arkui/arkts-apis-uicontext-uicontext.md#animateto) API takes an [AnimateParam](../reference/apis-arkui/arkui-ts/ts-explicit-animation.md#animateparam) object (specifying the duration and [Curve](../reference/apis-arkui/js-apis-curve.md#curve)) and an **event** closure function. Property animations generated by variable changes within the closure follow the same animation parameters.
 
 > **NOTE**
-> 
+>
 > Directly using **animateTo** can lead to the issue of [ambiguous UI context](./arkts-global-interface.md). To avoid this, obtain the [UIContext](../reference/apis-arkui/arkts-apis-uicontext-uicontext.md) object using the [getUIContext()](../reference/apis-arkui/arkui-ts/ts-custom-component-api.md#getuicontext) API and then call the [animateTo](../reference/apis-arkui/arkts-apis-uicontext-uicontext.md#animateto) API through this object.
 
 ```ts
@@ -159,7 +158,7 @@ struct AnimationDemo {
 
 ## keyframeAnimateTo
 
-```
+```ts
 keyframeAnimateTo(param: KeyframeAnimateParam, keyframes: Array<KeyframeState>): void
 ```
 
@@ -235,7 +234,9 @@ struct KeyframeAnimateToDemo {
 
 > **NOTE**
 > - When an animation is applied to the position or size change of a component, as layout measurement is involved, performance overheads are high. To reduce performance overheads, use the [scale](../reference/apis-arkui/arkui-ts/ts-universal-attributes-transformation.md#scale) attribute instead, whose value change does not involve layout re-measurement. This practice is applicable where the component position and size change continuously, for example, where the component size changes as a response to gestures.
-> 
+>
 > - Apply property animations only to consistently visible components. For those components whose visibility may change, use the [transition animation](arkts-transition-overview.md).
-> 
+>
 > - Avoid using end callbacks with property animations. Property animations are applied to states that have occurred. As such, you do not need to process the end logic. If end callbacks are needed, be sure to correctly handle the data management for continuous operations.
+>
+> - If transition animations are disabled in Developer options, or if the UIAbility switches from the foreground to the background, the end callback will be triggered immediately. You are advised to verify your scenario and avoid placing time‑dependent logic in this callback.

en/application-dev/ui/arkts-blur-effect.md

@@ -660,43 +660,38 @@ import { curves } from '@kit.ArkUI';
 @Entry
 @Component
 struct motionBlurTest {
-  @State widthSize: number = 400;
-  @State heightSize: number = 320;
+  @State widthSize: number = 300;
+  @State heightSize: number = 240;
   @State flag: boolean = true;
   @State radius: number = 0;
-  @State x: number = 0;
-  @State y: number = 0;
+  @State x: number = 0.5;
+  @State y: number = 0.5;
 
   build() {
     Column() {
       Column() {
-        // Replace $r('app.media.testImg') with the image resource file you use.
+        // Replace $r('app.media.testImg') with the resource file you use.
         Image($r('app.media.testImg'))
           .width(this.widthSize)
           .height(this.heightSize)
+          .scale({ x: this.flag ? 1 : 0.8,y: this.flag ? 1 : 0.8 ,centerX: '50%', centerY: '50%' })
           .onClick(() => {
-            this.radius = 5;
+            this.radius = 50;
             this.x = 0.5;
             this.y = 0.5;
-            if (this.flag) {
-              this.widthSize = 100;
-              this.heightSize = 80;
-            } else {
-              this.widthSize = 400;
-              this.heightSize = 320;
-            }
             this.flag = !this.flag;
           })
           .animation({
             duration: 2000,
-            curve: curves.springCurve(10, 1, 228, 30),
+            iterations:1,
+            playMode:PlayMode.Alternate,
             onFinish: () => {
               this.radius = 0;
             }
           })
           .motionBlur({ radius: this.radius, anchor: { x: this.x, y: this.y } })
       }
-    }.width('100%').margin({ top: 5 })
+    }.width('100%').margin({ top: 50 })
   }
 }
 ```

en/application-dev/ui/arkts-common-components-custom-dialog.md

@@ -1,4 +1,4 @@
-# Basic Custom Dialog Box (CustomDialog) (Not Recommended)
+# Basic Custom Dialog Box (CustomDialog)
 <!--Kit: ArkUI-->
 <!--Subsystem: ArkUI-->
 <!--Owner: @houguobiao-->
@@ -33,7 +33,7 @@ Since API version 19, the custom dialog box provides lifecycle callbacks to noti
    ```ts
    @CustomDialog
    struct CustomDialogExample {
-     controller: CustomDialogController
+     controller?: CustomDialogController
    
      build() {
        Column() {
@@ -43,7 +43,7 @@ Since API version 19, the custom dialog box provides lifecycle callbacks to noti
      }
    }
    ```
-2. Create a builder that is bound to the decorator.
+2. Create a constructor and associate it with the decorator.
    
    ```ts
     @Entry
@@ -90,7 +90,7 @@ Custom dialog boxes support data interactions to complete various operations.
      }
      confirm: () => void = () => {
      }
-     controller: CustomDialogController;
+     controller?: CustomDialogController;
    
      build() {
        Column() {
@@ -98,14 +98,14 @@ Custom dialog boxes support data interactions to complete various operations.
          Flex({ justifyContent: FlexAlign.SpaceAround }) {
            Button('Cancel')
              .onClick(() => {
-               this.controller.close();
+               this.controller?.close();
                if (this.cancel) {
                  this.cancel();
                }
              }).backgroundColor(0xffffff).fontColor(Color.Black)
            Button('Obtain')
              .onClick(() => {
-               this.controller.close();
+               this.controller?.close();
                if (this.confirm) {
                  this.confirm();
                }
@@ -369,9 +369,14 @@ struct CustomDialogUser {
     width: '80%',
     height: '100px',
     borderWidth: 1,
-    borderStyle: BorderStyle.Dashed,// borderStyle must be used with borderWidth in pairs.
-    borderColor: Color.Blue,// borderColor must be used with borderWidth in pairs.
-    shadow: ({ radius: 20, color: Color.Grey, offsetX: 50, offsetY: 0}),
+    borderStyle: BorderStyle.Dashed, // borderStyle must be used with borderWidth in pairs.
+    borderColor: Color.Blue, // borderColor must be used with borderWidth in pairs.
+    shadow: ({
+      radius: 20,
+      color: Color.Grey,
+      offsetX: 50,
+      offsetY: 0
+    }),
   });
 
   // Set dialogController to null when the custom component is about to be destroyed.
@@ -615,6 +620,7 @@ import { LengthMetrics } from '@kit.ArkUI'
 @CustomDialog
 struct CustomDialogExample {
   controller?: CustomDialogController;
+
   build() {
     Column() {
       Column() {
@@ -631,15 +637,14 @@ struct CustomDialogExample {
 @Component
 struct Index {
   dialogController: CustomDialogController | null = new CustomDialogController({
-    builder: CustomDialogExample({
-    }),
+    builder: CustomDialogExample({}),
     autoCancel: true,
     gridCount: 4,
     showInSubWindow: true,
     isModal: true,
     customStyle: false,
     cornerRadius: 30,
-    alignment:DialogAlignment.Bottom,
+    alignment: DialogAlignment.Bottom,
     keyboardAvoidMode: KeyboardAvoidMode.DEFAULT, // The dialog box automatically avoids the soft keyboard.
     keyboardAvoidDistance: LengthMetrics.vp(0) // The distance between the soft keyboard and the dialog box is 0 vp.
   })

en/application-dev/ui/arkts-common-components-richeditor.md

@@ -6,34 +6,36 @@
 <!--Tester: @mateng_Holtens-->
 <!--Adviser: @Brilliantry_Rui-->
 
-**RichEditor** is a component that supports interactive text editing and mixing of text and images. It's commonly used in scenarios requiring mixed-content user input, such as comment sections that accept both images and text. For details, see [RichEditor](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md).
+**RichEditor** is a component that supports interactive text editing and mixture of text and images. It is typically used in scenarios where mixed-content user input is expected, such as comment sections that accept both image and text submissions. For details, see [RichEditor](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md).
 
-For displaying only images and text, use the [Text](../reference/apis-arkui/arkui-ts/ts-basic-components-text.md) component.
+If you only need to display images and text, the [Text](../reference/apis-arkui/arkui-ts/ts-basic-components-text.md) component is recommended.
 
-For displaying large amounts of HTML content, use the [RichText](../reference/apis-arkui/arkui-ts/ts-basic-components-richtext.md) component.
+If you need to display a large amount of HTML content, the [RichText](../reference/apis-arkui/arkui-ts/ts-basic-components-richtext.md) component is recommended.
 
-## Component Structure
+## Component Composition
 
-The following diagram shows the component's element structure.
+The following figure illustrates the component's elements.
 
 ![alt text](figures/RichEditor_guide_composition.jpg)
 
-| Element      | Description                                                  |
-| ------------ | ------------------------------------------------------------ |
-| Content area | Area where content is displayed.                             |
-| Cursor       | Current input position.                        |
-| Handle       | Left and right handles that can be dragged separately to adjust the text selection range. |
-| Menu         | Displayed after content selection, containing operation buttons like copy and paste. |
+The component's elements are described as follows.
+
+| Element | Description                             |
+| --- | ------------------------------- |
+| Content area| Area where content is displayed.                      |
+| Cursor | Indicates the current insertion position.                    |
+| Handles | Left and right handles that can be dragged separately to adjust the text selection range.|
+| Menu | Appears after content is selected, containing operation buttons such as copy and paste.      |
 
 ## Creating a RichEditor Component
 
-Create a RichEditor component using styled strings or spans. See [Creating a RichEditor Component with Styled Strings](#creating-a-richeditor-component-with-styled-strings) or [Creating a RichEditor Component with Spans](#creating-a-richeditor-component-with-spans).
+You can create a **RichEditor** component either from a styled string or from spans. For details, see [Creating a RichEditor Component from a Styled String](#creating-a-richeditor-component-from-a-styled-string) or [Creating a RichEditor Component from Spans](#creating-a-richeditor-component-from-spans).
 
-### Creating a RichEditor Component with Styled Strings
+### Creating a RichEditor Component from a Styled String
 
-Use the RichEditor(options: [RichEditorStyledStringOptions](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#richeditorstyledstringoptions12)) API to create a RichEditor component that manages content using styled strings ([StyledString/MutableStyledString](arkts-styled-string.md)). This approach allows you to manage data by maintaining styled string objects on the application side, modifying their content and style, then passing the updated objects to the component to refresh the rich text content.
+Use the RichEditor(options: [RichEditorStyledStringOptions](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#richeditorstyledstringoptions12)) API to create a **RichEditor** component that manages content through styled strings ([StyledString/MutableStyledString](arkts-styled-string.md)). This approach allows you to manage data by holding styled string objects on the application side, modify the content and style of those objects, and then pass the updated objects to the component to refresh the rich text content.
 
-Compared to using controller APIs for content style updates, this method offers greater flexibility and convenience. Additionally, styled string objects can be applied to various text components that support styled strings for quick content migration.
+Compared with using controller APIs for content style updates, this approach offers greater flexibility and convenience. In addition, styled string objects can be assigned to various text components that support styled strings, enabling quick content migration.
 
 ```ts
 fontStyle: TextStyle = new TextStyle({
@@ -61,9 +63,9 @@ RichEditor(this.options)
 
 ![alt text](figures/richeditor_image_stylestringoptions.gif)
 
-### Creating a RichEditor Component with Spans
+### Creating a RichEditor Component from Spans
 
-Use the RichEditor(value: [RichEditorOptions](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#richeditoroptions)) API to create a RichEditor component that manages content using spans. This component is typically used in complex content scenarios. Developers can use the APIs provided by RichEditorController to manage content and styles.
+Use the RichEditor(value: [RichEditorOptions](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#richeditoroptions)) API to create a **RichEditor** component that manages content via spans. This component is typically used in complex content scenarios. You can use the APIs provided by **RichEditorController** to manage content and styles.
 
 ```ts
 @Entry
@@ -94,15 +96,15 @@ struct create_rich_editor {
 
 ## Adding Content
 
-The rich text component can add various types of content through different APIs.
+The **RichEditor** component supports adding content in different forms through various APIs.
 
-### Adding Text Spans
+### Adding a Text Span
 
-In addition to direct input, you can add text spans using the [addTextSpan](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#addtextspan) API.
+In addition to directly entering content into the component, you can add a text span using the [addTextSpan](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#addtextspan) API.
 
-This API enables diverse text styling, such as creating mixed-format text.
+This API enables diverse text styling, such as creating mixed-style text.
 
-If the component is focused and the cursor is blinking, the cursor position updates after adding text via addTextSpan, and the cursor blinks to the right of the newly added text.
+If the component is focused and the cursor is blinking, adding text via **addTextSpan** updates the cursor position, and the cursor blinks to the right of the newly added text.
 
 ```ts
 @Entry
@@ -143,13 +145,13 @@ struct add_text_span {
 
 ![alt text](figures/richeditor_image_add_text.gif)
 
-### Adding Image Spans
+### Adding an Image Span
 
-Use the [addImageSpan](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#addimagespan) API to add image spans.
+Use the [addImageSpan](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#addimagespan) API to add an image span.
 
-This API enriches and visualizes content. For example, you can add images to news articles or data visualization graphics in documents.
+This API is useful in enriching and visualizing content. For example, you can use it to add images to news or data visualization graphics to documents.
 
-If the component is focused and the cursor is blinking, the cursor position updates after adding an image via addImageSpan, and the cursor blinks to the right of the newly added image.
+If the component is focused and the cursor is blinking, adding image content via **addImageSpan** updates the cursor position, and the cursor blinks to the right of the newly added image.
 
 ```ts
 controller: RichEditorController = new RichEditorController();
@@ -182,13 +184,13 @@ Button('addImageSpan', {
 
 ![alt text](figures/richeditor_image_add_image.gif)
 
-### Adding @Builder Content
+### Adding @Builder Decorated Content
 
-Use [addBuilderSpan](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#addbuilderspan11) to add content decorated with @Builder.
+Use [addBuilderSpan](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#addbuilderspan11) to add the content decorated by the @Builder decorator.
 
-This approach is suitable for integrating custom complex components, such as custom charts.
+This approach applies when you need to integrate custom complex components, such as custom charts.
 
-Use [RichEditorBuilderSpanOptions](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#richeditorbuilderspanoptions11) to specify the insertion position. If no position is specified or an invalid value is provided, the builder content is appended to the end.
+With this API, you can specify the addition position using [RichEditorBuilderSpanOptions](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#richeditorbuilderspanoptions11). If no position is specified or an invalid value is provided, the builder content is appended to the end.
 
 ```ts
 private my_builder: CustomBuilder = undefined
@@ -224,13 +226,13 @@ Button('addBuilderSpan', {
 
 ![alt text](figures/richeditor_image_add_builder_span2.0.gif)
 
-### Adding Symbol Spans
+### Adding a Symbol Span
 
-Use the [addSymbolSpan](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#addsymbolspan11) API to add symbol content. This API can add special symbols, such as mathematical symbols when editing academic papers.
+Use the [addSymbolSpan](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#addsymbolspan11) API to add symbol content. This API enables addition of special characters, such as mathematical symbols in academic papers.
 
-When adding a symbol while the component is focused and the cursor is blinking, the cursor moves to the right of the newly inserted symbol.
+When a symbol is added while the component is focused and the cursor is blinking, the cursor moves to the right of the newly inserted symbol.
 
-Currently, gestures, copying, and dragging are not supported for symbol content.
+Currently, gestures, copying, and dragging are not supported for the symbol content.
 
 ```ts
 controller: RichEditorController = new RichEditorController();
@@ -263,15 +265,15 @@ Button('addSymbolSpan', {
 
 ![alt text](figures/richeditor_image_add_SymbolSpan.gif)
 
-## Content Management
+## Managing Content
 
-The rich text component provides APIs for content management, such as retrieving image and text information (see [Retrieving Image and Text Information](#retrieving-image-and-text-information)), setting placeholder text (see [Setting Placeholder Text](#setting-placeholder-text)), or limiting content length (see [Setting Maximum Length](#setting-maximum-length)).
+The **RichEditor** component provides APIs for content management, for example, [obtaining image and text information within the component](#obtaining-the-image-and-text-information), [setting placeholder text when no input is present](#setting-placeholder-text), or [limiting the maximum character](#setting-the-maximum-length).
 
-### Retrieving Image and Text Information
+### Obtaining the Image and Text Information
 
-Use the [getSpans](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#getspans) API to retrieve information about all images and text in the component, including content, ID, style, and position. After obtaining position information, you can update the style of content within a specified range.
+Use the [getSpans](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#getspans) API to obtain information about all images and text in the component, including content, ID, style, and position. After obtaining the position information, you can update the style of the content in the specified range.
 
-This API is useful for inspecting existing content styles, such as in template use cases, and for content parsing and processing, such as in text analysis applications.
+This API is useful for obtaining and checking existing content styles, such as in template use cases, and for content parsing and processing, such as in text analysis applications.
 
 ```ts
 controller: RichEditorController = new RichEditorController();
@@ -314,9 +316,9 @@ Button('getSpans', {
 
 ### Setting Placeholder Text
 
-Use the [placeholder](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#placeholder12) API to set hint text displayed when there is no input.
+You can set the placeholder text, which is displayed when there is no input, using the [placeholder](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#placeholder12) API.
 
-Placeholder text provides useful guidance, helping users navigate the application UI, especially in scenarios requiring specific input, such as login screens. For example, in a text editor, placeholder text can specify input requirements like "Enter up to 100 characters" to guide user actions.
+Placeholder text provides useful guidance, helping users navigate the application UI, especially in scenarios requiring specific input, such as login screens. For example, in a text editing box, placeholder text can specify input requirements, such as "Enter up to 100 characters."
 
 ```ts
 controller: RichEditorController = new RichEditorController();
@@ -338,9 +340,9 @@ RichEditor(this.options)
 
 ![alt text](figures/richeditor_image_placeholder.gif)
 
-### Setting Maximum Length
+### Setting the Maximum Length
 
-Use [maxLength](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#maxlength18) to set the maximum number of characters allowed in the rich text component.
+You can set the maximum number of characters allowed in the **RichEditor** component using [maxLength](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#maxlength18).
 
 ```ts
 controller: RichEditorController = new RichEditorController();
@@ -354,17 +356,17 @@ RichEditor(this.options)
 
 
 
-## Event Callbacks
+## Adding Event Callbacks
 
-Register event callbacks to monitor component events.
+You can register callbacks to listen for component events.
 
-### Callbacks for Before and After Content Changes
+### Adding Callbacks for Before and After Text and Image Changes
 
-Use the [onWillChange](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#onwillchange12) API to add a callback invoked before text or image changes. This callback is suitable for real-time data validation and notifications. For example, it can enable features like sensitive word detection with immediate alert dialogs, or real-time character counting and limiting.
+Use the [onWillChange](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#onwillchange12) API to add a callback invoked before text or image changes. This callback is applicable to real-time data verification and notification. For example, it can be used to enable features such as detecting sensitive words and displaying an alert dialog box immediately, as well as real-time character count statistics and limitation.
 
-Use the [onDidChange](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#ondidchange12) API to add a callback invoked after text or image changes. This callback is suitable for content saving and synchronization. For example, it can automatically save the latest content locally or sync it to a server, and update content status and rendering.
+Use the [onDidChange](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#ondidchange12) API to add a callback invoked after text or image changes. This callback applies to content saving and synchronization. For example, it can be used to automatically save the latest content to the local host or synchronizing it to the server. The callback can also be used to update and re‑render content status. For example, in a to‑do list application, after a user edits a task description in rich‑text format, the callback can update the display style of that task in the list.
 
-Note: The **RichEditor** component constructed with [RichEditorStyledStringOptions](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#richeditorstyledstringoptions12) does not support these callbacks.
+Note: The **RichEditor** component constructed with [RichEditorStyledStringOptions](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#richeditorstyledstringoptions12) does not support these two types of callbacks.
 
 ```ts
 controller: RichEditorController = new RichEditorController();
@@ -383,7 +385,7 @@ RichEditor(this.options)
     })
   })
   .onWillChange((value: RichEditorChangeValue) => {
-    this.infoShowController.addTextSpan('Triggered before content change: \n' + JSON.stringify(value), {
+    this.infoShowController.addTextSpan('Callback invoked before text or image changes: \n' + JSON.stringify(value), {
       style: {
         fontColor: Color.Gray,
         fontSize: 10
@@ -392,7 +394,7 @@ RichEditor(this.options)
     return true;
   })
   .onDidChange((rangeBefore: TextRange, rangeAfter: TextRange) => {
-    this.infoShowController.addTextSpan('\nTriggered after content change: \nrangeBefore:' + JSON.stringify(rangeBefore) +
+    this.infoShowController.addTextSpan('\nCallback invoked after text or image changes: \nrangeBefore:' + JSON.stringify(rangeBefore) +
       '\nrangeAfter: ' + JSON.stringify(rangeAfter), {
       style: {
         fontColor: Color.Gray,
@@ -410,15 +412,15 @@ RichEditor(this.infoShowOptions)
 
 ![alt text](figures/richeditor_image_ondid.gif)
 
-### Callbacks for Input Method Input
+### Adding Callbacks Triggered Before and After Content Input in the Input Method
 
 Callbacks can be triggered before and after input method content is added.
 
-For intelligent input assistance, use [aboutToIMEInput](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#abouttoimeinput) to trigger a callback before adding input content, and [onDidIMEInput](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#ondidimeinput12) to trigger a callback after input method content is added.
+To facilitate intelligent input assistance, use [aboutToIMEInput](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#abouttoimeinput) to trigger a callback before adding input content, and [onDidIMEInput](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#ondidimeinput12) to trigger a callback after the input is complete.
 
-These callbacks are suitable for business logic processing during text display. For example, before user-entered text appears on screen, the callback can provide word suggestions. After input completion, automatic error correction or format conversion can be performed. The callback sequence is aboutToIMEInput followed by onDidIMEInput.
+These two callbacks are useful for handling service logic during text display, for example, providing word suggestions or predictive text before display and performing auto‑correction or format conversion after input completes. The callbacks are triggered in this order: **aboutToIMEInput** -> **onDidIMEInput**.
 
-Components constructed using [RichEditorStyledStringOptions](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#richeditorstyledstringoptions12) do not support these callbacks.
+Components constructed with [RichEditorStyledStringOptions](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#richeditorstyledstringoptions12) do not support these two callbacks.
 
 ```ts
 controller: RichEditorController = new RichEditorController();
@@ -429,7 +431,7 @@ infoShowOptions: RichEditorOptions = { controller: this.infoShowController };
 
 RichEditor(this.options)
   .onReady(() => {
-    this.controller.addTextSpan('Callback invoked before input method content is added.\nCallback invoked after input method content is added.', {
+    this.controller.addTextSpan('Triggered before content input in the input method.\nTriggered when text input in the input method is complete.', {
       style: {
         fontColor: Color.Black,
         fontSize: 15
@@ -437,7 +439,7 @@ RichEditor(this.options)
     })
   })
   .aboutToIMEInput((value: RichEditorInsertValue) => {
-    this.infoShowController.addTextSpan(' Callback triggered before input method starts: \n' + JSON.stringify(value), {
+    this.infoShowController.addTextSpan('aboutToIMEInput triggered before content input in the input method: \n' + JSON.stringify(value), {
       style: {
         fontColor: Color.Gray,
         fontSize: 10
@@ -446,7 +448,7 @@ RichEditor(this.options)
     return true;
   })
   .onDidIMEInput((value: TextRange) => {
-    this.infoShowController.addTextSpan(' Callback triggered after input method finishes: \n' + JSON.stringify(value), {
+    this.infoShowController.addTextSpan('onDidIMEInput triggered after text input in the input method is complete: \n' + JSON.stringify(value), {
       style: {
         fontColor: Color.Gray,
         fontSize: 10
@@ -463,13 +465,13 @@ RichEditor(this.infoShowOptions)
 
 
 
-### Callback Before Paste Completion
+### Adding a Callback Triggered Before Paste Completion
 
-The [onPaste](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#onpaste11) callback is used to add processing logic before pasting.
+The [onPaste](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#onpaste11) callback is used to add custom processing before pasting completes.
 
-This is useful for content format processing, such as converting HTML-tagged text to a format supported by the **RichEditor** component, removing unnecessary tags, or retaining only plain text.
+This is useful for content format handling, such as converting HTML-tagged text to a format supported by the **RichEditor** component and removing unnecessary tags or retaining only plain text content.
 
-You can use this API to override the default paste behavior (limited to plain text) to support pasting both images and text.
+You can use this API to override the default paste behavior, which is limited to plain text, so that both images and text can be pasted.
 
 ```ts
 import { BusinessError, pasteboard } from '@kit.BasicServicesKit';
@@ -521,11 +523,11 @@ struct on_cut_copy_paste {
       Column({ space: 3 }) {
         RichEditor(this.options)
           .onReady(() => {
-            this.controller.addTextSpan('Copy and paste text to trigger corresponding callbacks.',
+            this.controller.addTextSpan('Copy and paste operations on this text trigger the corresponding callbacks.',
               { style: { fontColor: Color.Black, fontSize: 15 } })
           })
           .onPaste((event) => {
-            this.infoShowController.addTextSpan('Triggered onPaste callback\n', { style: { fontColor: Color.Gray, fontSize: 10 } })
+            this.infoShowController.addTextSpan('The onPaste callback is invoked.\n', { style: { fontColor: Color.Gray, fontSize: 10 } })
             if (event != undefined && event.preventDefault) {
               event.preventDefault();
             }
@@ -546,13 +548,13 @@ struct on_cut_copy_paste {
 }
 ```
 
-### Callback Before Cut Completion
+### Adding a Callback Triggered Before Cut Completion
 
-Add a callback to process data before the [onCut](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#oncut12) operation completes.
+The [onCut](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#oncut12) callback is used to add custom processing before a cut operation completes.
 
-This callback is suitable for data processing and storage. For example, when a user cuts content from the rich text component, the callback can temporarily store the cut content to ensure accurate restoration during subsequent pasting.
+This callback is useful for data processing and storage. For example, when a user cuts content from the **RichEditor** component, the callback can temporarily store the cut content to ensure it can be accurately restored during a subsequent paste.
 
-You can use this API to override the default cut behavior (limited to plain text) to support cutting both images and text.
+You can use this API to override the default cut behavior, which is limited to plain text, so that both images and text can be cut.
 
 ```ts
 controller: RichEditorController = new RichEditorController();
@@ -563,7 +565,7 @@ infoShowOptions: RichEditorOptions = { controller: this.infoShowController };
 
 RichEditor(this.options)
   .onReady(() => {
-    this.controller.addTextSpan('Cut and paste operations on this text trigger corresponding callbacks.', {
+    this.controller.addTextSpan('Copy and paste operations on this text trigger the corresponding callbacks.', {
       style: {
         fontColor: Color.Black,
         fontSize: 15
@@ -571,7 +573,7 @@ RichEditor(this.options)
     })
   })
   .onCut(() => {
-    this.infoShowController.addTextSpan('Triggered onCut callback.\n', {
+    this.infoShowController.addTextSpan('Triggered the onCut callback.\n', {
       style: {
         fontColor: Color.Gray,
         fontSize: 10
@@ -585,13 +587,13 @@ RichEditor(this.infoShowOptions)
   .height(70) 
 ```
 
-### Callback Before Copy Completion
+### Adding a Callback Triggered Before Copy Completion
 
-Use the [onCopy](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#oncopy12) callback to add processing logic before copying.
+Use the [onCopy](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#oncopy12) callback to add processing logic before copying. 
 
-This callback is suitable for content backup and sharing. For example, the callback can save the copied content and its format information to a local backup folder, or automatically generate copy including the copied content and a product purchase link for users to paste and share.
+This callback applies to content backup and sharing. For example, the following operations can be performed in the callback: saving the copied content and its format information to a local backup folder, or automatically generating copywriting that includes the copied content and a product purchase link for users to paste and share.
 
-The component's default copy behavior is limited to plain text and cannot process images. Use this method to implement copying both images and text, replacing the component's default behavior.
+The component's default copy behavior is limited to plain text and cannot handle images. You can use this callback to implement a custom copy feature that supports both images and text, replacing the component's default behavior.
 
 ```ts
 controller: RichEditorController = new RichEditorController();
@@ -602,7 +604,7 @@ infoShowOptions: RichEditorOptions = { controller: this.infoShowController };
 
 RichEditor(this.options)
   .onReady(() => {
-    this.controller.addTextSpan('Copy and paste operations on this text trigger corresponding callbacks.', {
+    this.controller.addTextSpan('Copy and paste operations on this text trigger the corresponding callbacks.', {
       style: {
         fontColor: Color.Black,
         fontSize: 15
@@ -610,7 +612,7 @@ RichEditor(this.options)
     })
   })
   .onCopy(() => {
-    this.infoShowController.addTextSpan('Triggered onCopy callback.\n', {
+    this.infoShowController.addTextSpan('Triggered the onCopy callback.\n', {
       style: {
         fontColor: Color.Gray,
         fontSize: 10
@@ -626,17 +628,17 @@ RichEditor(this.infoShowOptions)
 
 ![alt text](figures/richeditor_image_oncut_paste_copy.gif)
 
-For all available events, see [RichEditor Events](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#events).
+For details about all available events, see [RichEditor Events](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#events).
 
-## Component Interaction
+## Implementing Component Interaction
 
-Configure interactive element attributes through APIs to detect changes.
+You can configure interaction element properties through APIs to respond to changes in those elements.
 
-### Setting Cursor and Handle Color
+### Setting the Caret and Selection Handle Colors
 
-Use [caretColor](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#caretcolor12) to set the cursor and handle color.
+You can set the caret and selection handle colors in the text box using the [caretColor](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#caretcolor12) API.
 
-Setting distinct cursor and handle colors enhances visual recognition, especially in interfaces with multiple input areas. Unique cursor colors help quickly locate the active input area. This feature also improves user experience by coordinating the cursor color with the application's overall style.
+This feature allows for a more distinct visual representation of the caret and text selection, which can significantly aid users in navigating through complex UI that incorporate various input fields. It also improves the user experience by allowing the caret color to match the overall style of the application page.
 
 ```ts
 controller: RichEditorController = new RichEditorController();
@@ -644,7 +646,7 @@ options: RichEditorOptions = { controller: this.controller };
 
 RichEditor(this.options)
   .onReady(() => {
-    this.controller.addTextSpan('The component has custom caret and selection handle colors.', {
+    this.controller.addTextSpan('The component has the color set for the caret and selection handle.', {
       style: {
         fontColor: Color.Black,
         fontSize: 15
@@ -658,11 +660,11 @@ RichEditor(this.options)
 
 ![alt text](figures/richeditor_image_caretcolor.gif)
 
-### Callback for Cursor Position Changes
+### Adding a Callback for Caret Position and Selection Changes
 
-[onSelectionChange](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#onselectionchange12) adds a callback triggered when the cursor position changes in the content selection area or during editing.
+The [onSelectionChange](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#onselectionchange12) callback is triggered whenever the caret position or text selection range changes in the component's content area during editing.
 
-This callback monitors selection area changes in real time. For example, you can use it to update toolbar status (displaying font and paragraph formats), count selected content length, or generate summaries. Real-time response to selection status and dynamic association of interactive elements improve the rich text editing experience and functionality.
+This callback enables real‑time listening of selection changes. Typical use cases include: updating toolbar state dynamically (for example, reflecting the font and paragraph formatting of the currently selected text), measuring length of the selected content, and generating a summary of the selected content. By responding immediately to selection changes and dynamically linking interactive elements, this callback enhances the feedback experience and functional flexibility of rich text editing.
 
 ```ts
 controller: RichEditorController = new RichEditorController();
@@ -673,7 +675,7 @@ infoShowOptions: RichEditorOptions = { controller: this.infoShowController };
 
 RichEditor(this.options)
   .onReady(() => {
-    this.controller.addTextSpan('Change the cursor position in the selection area or during editing to trigger the onSelectionChange callback.', {
+    this.controller.addTextSpan('Change the caret position or text selection range to trigger the onSelectionChange callback.', {
       style: {
         fontColor: Color.Black,
         fontSize: 15
@@ -681,7 +683,7 @@ RichEditor(this.options)
     })
   })
   .onSelectionChange((value: RichEditorRange) => {
-    this.infoShowController.addTextSpan("\n" + "Triggered onSelectionChange callback, range: (" + value.start + "," +
+    this.infoShowController.addTextSpan("\n" + "Triggered the onSelectionChange callback, range: (" + value.start + "," +
     value.end + ")", {
       style: {
         fontColor: Color.Gray,
@@ -699,11 +701,11 @@ RichEditor(this.infoShowOptions)
 
 
 
-### Setting Selection Range
+### Setting the Text Selection Range
 
-Use the [setSelection](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#setselection11) API to highlight the selected portion of the content.
+Use the [setSelection](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#setselection11) API to configure the component to highlight the background of the selected portion.
 
-This API implements text focus effects. For example, when a user taps a text paragraph title or summary, this API can automatically select and highlight the corresponding text content.
+This API is useful for implementing text focus effects. For example, when a user taps a paragraph title or summary, you can call this API to automatically select and highlight the corresponding text segment.
 
 If this API is called when the text box is not focused, the selection effect is not displayed.
 
@@ -734,13 +736,13 @@ Button('setSelection(0,2)', {
 
 ![alt text](figures/richeditor_image_set_selection.gif)
 
-## Menu Configuration
+## Configuring the Menu
 
-Configure the text selection menu through APIs.
+You can configure the text selection menu through APIs.
 
 ### Managing Selected Menu Items
 
-The [onPrepareMenu](../reference/apis-arkui/arkui-ts/ts-text-common.md#properties-1) callback is triggered before the menu is displayed after the rich text selection area changes. You can set menu data in this callback.
+The [onPrepareMenu](../reference/apis-arkui/arkui-ts/ts-text-common.md#properties-1) callback is triggered before the menu is displayed when the rich text selection range changes. You can configure menu data within this callback.
 
 ```ts
 // xxx.ets
@@ -832,9 +834,9 @@ struct RichEditorExample {
 
 ### Disabling System Service Menu Items
 
-Use [disableSystemServiceMenuItems](../reference/apis-arkui/arkts-apis-uicontext-textmenucontroller.md#disablesystemservicemenuitems20) to disable all system service menu items in the rich text selection menu.
+Use [disableSystemServiceMenuItems](../reference/apis-arkui/arkts-apis-uicontext-textmenucontroller.md#disablesystemservicemenuitems20) to hide all system-provided service menu items from the text selection menu.
 
-This API protects content security and is suitable for scenarios with restricted text operations, such as displaying confidential content or copyrighted text that cannot be copied. Disabling system service menu items prevents users from copying and sharing text through these menus, reducing content leakage risks.
+This API protects content security and is suitable for scenarios with restricted text operations, for example, when displaying confidential content or copyrighted text that should not be copied. By disabling system menu items, you prevent users from copying or sharing text through the system menu, reducing the risk of content leakage.
 
 
   ```ts
@@ -848,12 +850,12 @@ This API protects content security and is suitable for scenarios with restricted
     options: RichEditorOptions = { controller: this.controller };
 
     aboutToAppear(): void {
-    // Disable all system service menus.
+      // Disable all system service menus.
       TextMenuController.disableSystemServiceMenuItems(true);
     }
 
     aboutToDisappear(): void {
-    // Restore system service menu items when the page disappears.
+      // Restore system service menu items when the page disappears.
       TextMenuController.disableSystemServiceMenuItems(false);
     }
 
@@ -888,9 +890,9 @@ This API protects content security and is suitable for scenarios with restricted
 
 
 
-Use [disableMenuItems](../reference/apis-arkui/arkts-apis-uicontext-textmenucontroller.md#disablemenuitems20) to disable specific system service menu items in the rich text selection menu.
+Use [disableMenuItems](../reference/apis-arkui/arkts-apis-uicontext-textmenucontroller.md#disablemenuitems20) to hide specified system-provided service menu items from the text selection menu.
 
-This interface precisely disables specified system service menu items while retaining required system menu functions, making the menus more suitable for actual interaction design.
+This API allows you to precisely disable only the system menu items you specify, while preserving other system menu functions needed by your application. This makes the menu better suited to your actual interaction design.
 
   ```ts
   import { TextMenuController } from '@kit.ArkUI';
@@ -903,12 +905,12 @@ This interface precisely disables specified system service menu items while reta
     options: RichEditorOptions = { controller: this.controller };
 
     aboutToAppear(): void {
-    // Disable search and translation menus.
+      // Disable search and translate menu items.
       TextMenuController.disableMenuItems([TextMenuItemId.SEARCH, TextMenuItemId.TRANSLATE])
     }
 
     aboutToDisappear(): void {
-    // Restore system service menu items.
+      // Restore system service menu items.
       TextMenuController.disableMenuItems([])
     }
 
@@ -927,7 +929,7 @@ This interface precisely disables specified system service menu items while reta
             .height(60)
             .editMenuOptions({
               onCreateMenu: (menuItems: Array<TextMenuItem>) => {
-                // menuItems no longer contains search and translation.
+                // menuItems no longer contains search and translate items.
                 return menuItems;
               },
               onMenuItemClick: (menuItem: TextMenuItem, textRange: TextRange) => {
@@ -943,11 +945,11 @@ This interface precisely disables specified system service menu items while reta
 
 
 
-### Setting Custom Context Menu on Text Selection
+### Setting the Custom Context Menu on Text Selection
 
-Use the [bindSelectionMenu](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#bindselectionmenu) API to set a custom context menu on text selection.
+You can set custom context menu on text selection using the [bindSelectionMenu](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#bindselectionmenu) API.
 
-By default, the context menu includes copy, cut, and select all options. You can add more options for enhanced interactions, such as translate for multilingual support or bold for emphasizing selected text.
+By default, the context menu on text selection includes copy, cut, and select-all options. You can add custom items to provide enhanced interactions, for example, a Translate option for multilingual support, or a Bold option to emphasize the selected text.
 
 If the custom menu is too long, consider embedding a **Scroll** component to prevent the keyboard from being blocked.
 
@@ -1008,15 +1010,15 @@ SystemMenu() {
 
 ![alt text](figures/richeditor_image_bindselectionmenu.gif)
 
-## Layout Configuration
+## Configuring Layout
 
-Configure component layout rules through APIs. Customize layout rules based on business scenarios.
+You can configure layout rules for the component through APIs, customizing its behavior based on your application's requirements.
 
-### Setting Maximum Line Count
+### Setting the Maximum Number of Lines
 
-Use [maxLines](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#maxlines18) to set the maximum number of lines displayed in the rich text component.
+Use [maxLines](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#maxlines18) to set the maximum number of lines that can be displayed in the **RichEditor** component.
 
-This API controls the text display range to prevent excessively long text from affecting page layout. It ensures consistent text display across different devices and scenarios, improving interface compatibility and aesthetics.
+This API controls the text display area to prevent overly long content from disrupting the page layout. It ensures a consistent text presentation across different devices and scenarios, improving UI compatibility and visual appeal.
 
 ```ts
 controller: RichEditorController = new RichEditorController();
@@ -1024,7 +1026,7 @@ options: RichEditorOptions = { controller: this.controller };
 
 RichEditor(this.options)
   .onReady(() => {
-    this.controller.addTextSpan('Maximum line count is set.\nContent exceeding the limit will scroll.\nExceeds 1 line.\nExceeds 2 lines.\nExceeds 3 lines.\nExceeds 4 lines.', {
+    this.controller.addTextSpan('The maximum number of lines is set.\nExcess content will be displayed in scrolling mode.\nExceeds 1 line\nExceeds 2 lines\nExceeds 3 lines\nExceeds 4 lines', {
       style: {
         fontColor: Color.Black,
         fontSize: 15
@@ -1036,15 +1038,15 @@ RichEditor(this.options)
 
 
 
-## Style Settings
+## Setting the Style
 
-Set complex styles for content.
+You can apply complex styles to content in the component.
 
-### Setting Preset Text Style
+### Setting the Active Typing Style
 
-Use [setTypingStyle](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#settypingstyle11) to set the preset text style.
+Use the [setTypingStyle](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#settypingstyle11) API to define the style that will be automatically applied to newly typed text.
 
-This enables personalized writing experiences. For example, you can use this API to automatically apply corresponding formats to different heading levels (like level-1 and level-2 headings) as users type.
+This allows you to deliver a personalized writing experience. For example, you might want to use this API to automatically apply corresponding formats to different levels of headings (such as level-1 and level-2 headings) as users type.
 
 ```ts
 controller: RichEditorController = new RichEditorController();
@@ -1052,7 +1054,7 @@ options: RichEditorOptions = { controller: this.controller };
 
 RichEditor(this.options)
   .onReady(() => {
-    this.controller.addTextSpan('Click the button to change the preset text style.', {
+    this.controller.addTextSpan('Click the button to change the active typing style.', {
       style: {
         fontColor: Color.Black,
         fontSize: 15
@@ -1084,21 +1086,21 @@ Button('setTypingStyle', {
 
 ### Setting Text Decoration
 
-[decoration](../reference/apis-arkui/arkui-ts/ts-basic-components-span.md#decoration) sets the style, color, and thickness of text decoration lines.
+Use [decoration](../reference/apis-arkui/arkui-ts/ts-basic-components-span.md#decoration) to set the style, color, and thickness of text decoration lines.
 
-Text decoration highlights key information, distinguishes text status, and enhances visual hierarchy. For example, add decoration to important titles or keywords to help users quickly identify information.
+Applying text decoration can highlight key information, indicate text status, and improve visual hierarchy. For example, you can add a decoration line to important titles or keywords to help users quickly locate essential content.
 
   ```ts
   private controller: RichEditorController = new RichEditorController();
   RichEditor({ controller: this.controller })
     .onReady(() => {
-      this.controller.addTextSpan('Preset text', {
+      this.controller.addTextSpan('Example text', {
         style: {
           fontSize: 25,
           decoration: {
             type: TextDecorationType.LineThrough,
             color: Color.Blue,
-            // Set decoration line thickness ratio to 6.
+            // Set the thickness of the decoration line to 6 times the default.
             thicknessScale: 6
           }
         }
@@ -1108,16 +1110,16 @@ Text decoration highlights key information, distinguishes text status, and enhan
 
 
 
-Use enableMultiType in [DecorationOptions](../reference/apis-arkui/arkui-ts/ts-universal-styled-string.md#decorationoptions20) to set multiple decoration lines, such as underlines and strikethroughs.
+Use the **enableMultiType** property in [DecorationOptions](../reference/apis-arkui/arkui-ts/ts-universal-styled-string.md#decorationoptions20) to apply multiple decoration lines simultaneously, such as an underline and a strikethrough.
 
-This API suits complex business scenarios and meets diverse text decoration needs. During document collaboration, different decoration combinations can distinguish text status, improving collaboration efficiency.
+This API is useful in complex scenarios that require diverse text decoration. For example, in collaborative document editing, different combinations of decoration lines can be used to distinguish text states contributed by various users, improving collaboration efficiency.
 
   ```ts
   RichEditor({ controller: this.styledStringController })
-  Button('Multi-decoration text')
+  Button('Apply Multiple Decorations')
     .fontSize(20)
     .onClick(() => {
-      let mutString: MutableStyledString = new MutableStyledString('Set rich text multi-decoration', [
+      let mutString: MutableStyledString = new MutableStyledString('Rich text with multiple decorations', [
         {
           start: 0,
           length: 9,
@@ -1161,9 +1163,9 @@ This API suits complex business scenarios and meets diverse text decoration need
 
 ### Setting Vertical Alignment
 
-Use [textVerticalAlign](../reference/apis-arkui/arkui-ts/ts-basic-components-text.md#textverticalalign20) to set the vertical alignment of text paragraphs.
+Use [textVerticalAlign](../reference/apis-arkui/arkui-ts/ts-basic-components-text.md#textverticalalign20) to set the vertical alignment of text within a paragraph.
 
-This API optimizes multi-element layout, making the overall layout more coordinated when component content is vertically aligned with images and icons.
+This API optimizes layouts containing multiple elements. When component content needs to be aligned vertically with images or icons, it ensures a more harmonious overall layout.
 
   ```ts
   controller: RichEditorController = new RichEditorController();
@@ -1177,7 +1179,7 @@ This API optimizes multi-element layout, making the overall layout more coordina
             size: [100, 100]
           }
         })
-        this.controller.addTextSpan("This rich text demonstrates vertical text alignment.", {
+        this.controller.addTextSpan("This text demonstrates vertical centering.", {
           style: {
             fontColor: Color.Pink,
             fontSize: "32"
@@ -1194,11 +1196,11 @@ This API optimizes multi-element layout, making the overall layout more coordina
 
 
 
-### Setting Automatic Spacing Between Chinese and Western Characters
+### Enabling Automatic Spacing Between Chinese and Western Characters
 
-Use [enableAutoSpacing](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#enableautospacing20) to enable automatic spacing between Chinese and Western characters.
+Use [enableAutoSpacing](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md#enableautospacing20) to control whether automatic spacing is inserted between Chinese and Western characters.
 
-This interface optimizes text layout and improves readability. When enabled, appropriate gaps are inserted between Chinese and Western characters, facilitating language differentiation and reducing visual interference.
+This API optimizes text layout and improves readability within the component. When automatic spacing is enabled, an appropriate gap is automatically added between Chinese and Western characters, making it easier to distinguish between languages and reducing visual interference.
 
 ```ts
 Column() {

en/application-dev/ui/arkts-common-events-focus-event.md

@@ -12,34 +12,31 @@
 
 **Focus, Focus Chain, and Focus Traversal**
 
-- **Focus**: refers to the single interactive element on the current application screen. When users interact indirectly with the application using non-pointing input devices such as keyboards, TV remote controls, or in-car joysticks/knobs, navigation and interaction based on focus are crucial input methods.
+- **Focus**: refers to the single interactive element on the current application screen. When users interact indirectly with the application using non-pointing input devices such as keyboards, TV remote controls, or in-car joysticks/knobs, navigation and interaction based on focus are crucial means of input.
 - **Focus chain**: refers to the sequence of nodes from the root to a focused component in the application's component tree, where all nodes are focused.
 - **Focus traversal**: refers to the behavior of focus shifting between components in an application. This process is transparent to the user but can be monitored through **onFocus** and **onBlur** events. For details on how focus traversal is managed, see [Focus Traversal Guidelines](#focus-traversal-guidelines).
 
 
 **Focus Activation State**
 
-The focus activation state is used to display the visual style of the focus box of the component that obtains focus.
-
-- **Presentation rules**:
-
-  - **Default state**: The focus activation state is hidden by default.
-  - **Activation condition**: The focus activation state is displayed only when the application enters the activated state.
-  - **Key relationships**:
-    - The component that obtains focus may not display the activation state (depending on whether the application is in the activated state).
-    - The component that displays the activation state must be the component that obtains focus.
-  - **Style customization**: Components usually have built-in activation state styles. Developers can customize the styles through style APIs. Customized styles override default styles.
-  - **Display priority**: When multiple components have focus simultaneously, the system preferentially displays the activation state of the child component, and displays only one activation state at a time.
-
-- **How to enter the activated state**:
-
-  - Press the Tab key on an external keyboard. (Note: The Tab key is used only for activation when the application is activated for the first time and does not trigger focus movement.)
-  - Call the activate(true) method of [FocusController](../reference/apis-arkui/arkts-apis-uicontext-focuscontroller.md).
-
-- **How to exit the activated state**:
-
-  - Call the activate(false) method of FocusController.
-  - A click event occurs (including a touchscreen click or left mouse button click).
+The focus activation state determines the visual style (focus indicator) of the component that currently holds focus.
+
+- **Presentation rules**
+- Default state: The focus activation state is hidden by default.
+  - Activation condition: The activation style is displayed only when the application is in the activated state.
+  - Key relationships:
+    - A component that obtains focus may not show its activation style (if the application is not in the activated state).
+    - A component that displays the activation style must be the component that currently holds focus.
+  - Style customization: Components usually have built-in activation styles. You can override these default styles using style-related APIs.
+  - Display priority: When multiple components are focused simultaneously, the system preferentially shows the activation style of the deepest child component, and only one activation style is visible at a time.
+  
+- **Methods to enter the activated state**
+  - Press the **Tab** key on an external keyboard. (Note: The **Tab** key is used only for the initial activation of the application and does not move focus at that moment.)
+  - Call the **activate(true)** method of [FocusController](../reference/apis-arkui/arkts-apis-uicontext-focuscontroller.md).
+
+- **Methods to exit the activated state**
+  - Call the **activate(false)** method of **FocusController**.
+  - A click event occurs (including a touchscreen tap or a left-mouse-button click).
 
 ```ts
 @Entry
@@ -59,48 +56,48 @@ struct FocusActiveExample {
 ```
 
 
-Focus is activated when you press Tab. Clicking the mouse button exits the focus activation state.
+Focus activation is triggered when the **Tab** key is pressed. Clicking the mouse button exits the focus activation state.
 
 ![Active_Focus_1](figures/Active_Focus_1.gif)
 
 
-You can call the [activate](../reference/apis-arkui/arkts-apis-uicontext-focuscontroller.md#activate14) API to enter and exit the focus activation state.
+You can call the [activate](../reference/apis-arkui/arkts-apis-uicontext-focuscontroller.md#activate14) API to programmatically enter and exit the focus activation state.
 
 ![Active_Focus_2](figures/Active_Focus_2.gif)
 
-Example steps:
-1. Click **Set Active** to call the [activate](../reference/apis-arkui/arkts-apis-uicontext-focuscontroller.md#activate14) API to enter the focus activation state.
-2. Press Tab to move focus to the **Set Not Active** button, press Enter to trigger a key event, and call the [activate](../reference/apis-arkui/arkts-apis-uicontext-focuscontroller.md#activate14) API to exit the focus activation state.
+Example flow:
+1. Click the **Set Active** button, which calls [activate](../reference/apis-arkui/arkts-apis-uicontext-focuscontroller.md#activate14) to enter the focus activation state.
+2. Press **Tab** to move focus to the **Set Not Active** button, and then press **Enter** to trigger its click event. This calls [activate](../reference/apis-arkui/arkts-apis-uicontext-focuscontroller.md#activate14) to exit the focus activation state.
 
 **Hierarchical Pages**
 
 Hierarchical pages are specialized container components, such as **Page**, **Dialog**, **SheetPage**, **ModalPage**, **Menu**, **Popup**, **NavBar**, and **NavDestination**, within a focus framework. These components typically have the following key features:
 
-- **Visual layering**: They appear on top of other content, creating a distinct visual hierarchy.
-- **Focus capture**: They automatically take focus when first displayed.
-- **Focus limitation**: When focus is within these components, users cannot use keyboard keys to move focus outside to other elements. In other words, focus movement is confined within the component.
+- Visual layering: They appear on top of other content, creating a distinct visual hierarchy.
+- Focus capture: They automatically take focus when first displayed.
+- Focus limitation: When focus is within these components, users cannot use keyboard keys to move focus outside to other elements. In other words, focus movement is confined within the component.
 
-An application always has at least one hierarchical page in focus. When this hierarchical page is closed or no longer visible, focus shifts to another, ensuring smooth user interaction.
+An application always has at least one hierarchical page in focus. When this hierarchical page is closed or no longer visible, the focus shifts to another, ensuring smooth user interaction.
 
 > **NOTE**
 >
 > The **Popup** component does not capture focus if it has **focusable** set to **false**.
 >
-> The **NavBar** and **NavDestination** components do not restrict focus movement and share the focus scope of their immediate parent hierarchical page.
+> The **NavBar** and **NavDestination** components share the focus scope of their immediate parent hierarchical page and do not restrict focus movement.
 
 **Root Container**
 
-The root container is a concept in [hierarchical pages](#basic-concepts). When a [hierarchical page](#basic-concepts) is created and displayed for the first time, focus is immediately captured by the page based on the [hierarchical page](#basic-concepts) characteristics. In this case, the end node of the focus chain where the [hierarchical page](#basic-concepts) is located becomes the default focus, and the default focus is usually located on the root container of the [hierarchical page](#basic-concepts).
+The root container is a concept in [hierarchical pages](#basic-concepts). When a [hierarchical page](#basic-concepts) is created and displayed for the first time, it immediately captures focus due to the inherent characteristics of hierarchical pages. In this case, the end node of the focus chain where the hierarchical page resides becomes the default focus, which is typically the page's root container.
 
 You can change the default focus using the **defaultFocus** attribute.
 
-When focus is on the root container, pressing the Tab key for the first time not only activates focus but also transfers focus according to the [focus transfer rules](#focus-transfer-rules).
+When focus resides on the root container, pressing the **Tab** key for the first time not only activates the focus but also transfers focus according to the [focus transfer rules](#focus-transfer-rules).
 
 ### Focus Transfer Rules
 
-Focus transfer refers to the process of transferring focus from the root node to a specific component level by level when a user activates the application focus system for the first time.
+Focus transfer refers to the process where focus is transferred level by level from the root node to a specific component when a user activates the application's focus system for the first time.
 
-Components on the focus chain are in the focus state. When a component is focused, the focus state is recursively passed downwards to the first child component until the leaf node.
+Components in the focus chain are in a focusable state. When a component gains focus, the focus state is recursively propagated down to its first child component until a leaf node is reached.
 
 ```ts
 @Entry
@@ -163,7 +160,7 @@ struct Index {
 }
 ```
 
-After the app runs, click **Button1** to request focus for the Row component. The first focusable child node **Button2** of the Row component is focused.
+After the application runs, click **Button 1** to request focus for the **Row** component. The Row component's first focusable child node, **Button 2**, will gain focus.
 
 ![Liner_Focus_1](figures/Focus_transfer.gif)
 
@@ -177,25 +174,25 @@ Focus traversal can be divided into active and passive based on how it is trigge
 Active focus traversal refers to focus movement initiated by deliberate actions, such as keyboard shortcuts (**Tab**, **Shift+Tab**, arrow keys) and programmatic focus control through **requestFocus**, **clearFocus**, and **focusOnTouch**.
 
 
-- **Keyboard traversal**:
-  1. **Prerequisite**: The application is in the focus activation state.
-  2. **Scope**: Limited to the currently focused hierarchical page, as detailed in the "Focus limitation" section under "Hierarchical Pages."
-  3. **Key types**:
-     - **Tab** key: Follows a Z-shaped logic to traverse all leaf nodes within the scope, looping back to the first after the last.
-     - **Shift+Tab**: Reverses the direction of the **Tab** key.
-     - **Arrow keys** (up, down, left, and right): Moves focus in a cross-shaped pattern, with container-specific algorithms determining the next focus in a single-layer container. If the algorithm determines the next focus should be on a container component, the system uses a center-point distance priority algorithm to further identify the target child node within the container.
-  4. **Traversal algorithm**: Each focusable container has a unique algorithm defining how focus moves.
-  5. **Priority**: Child components take precedence in handling keyboard events over parents.
+- **Keyboard traversal**
+1. Prerequisite: The application is in the focus activation state.
+2. Scope: limited to the currently focused hierarchical page, as detailed in the "Focus limitation" section under "Hierarchical Pages."
+3. Key types:
+- **Tab** key: follows a Z-shaped logic to traverse all leaf nodes within the scope, looping back to the first after the last.
+- **Shift+Tab**: reverses the direction of the **Tab** key.
+- Arrow keys (up, down, left, and right): moves focus in a cross-shaped pattern, with container-specific algorithms determining the next focus in a single-layer container. If the algorithm determines the next focus should be on a container component, the system uses a center-point distance priority algorithm to further identify the target child node within the container.
+4. Traversal algorithm: Each focusable container has a unique algorithm defining how focus moves.
+5. Priority: Child components take precedence in handling keyboard events over parents.
 
-- **requestFocus**:
-  Moves focus to a specific component, which is allowed across hierarchical pages but not across windows or different ArkUI instances.
-  For details, see [Active Focus Acquisition/Loss](#active-focus-acquisitionloss).
+- **requestFocus**
+Moves focus to a specific component, which is allowed across hierarchical pages but not across windows or different ArkUI instances.
+For details, see [Active Focus Acquisition/Loss](#active-focus-acquisitionloss).
 
-- **clearFocus**:
-  Clears focus within the current hierarchical page, with focus reverting to the root container. For details, see [clearFocus](../reference/apis-arkui/arkts-apis-uicontext-focuscontroller.md#clearfocus12).
+- **clearFocus**
+Clears the focus within the current hierarchical page, with focus reverting to the root container. For details, see [clearFocus](../reference/apis-arkui/arkts-apis-uicontext-focuscontroller.md#clearfocus12).
 
-- **focusOnTouch**:
-  Enables a component to gain focus on touch. It is ineffective on non-focusable components. For container components, focus goes to the last focused child or the first focusable child upon touch. For details, see [focusOnTouch](../reference/apis-arkui/arkui-ts/ts-universal-attributes-focus.md#focusontouch9).
+- **focusOnTouch**
+Enables a component to gain focus on touch. For details, see [focusOnTouch](../reference/apis-arkui/arkui-ts/ts-universal-attributes-focus.md#focusontouch9). This API is ineffective on non-focusable components. For container components, focus goes to the last focused child or the first focusable child upon touch.
 
 
 **Passive Focus Traversal**
@@ -205,10 +202,10 @@ Passive focus traversal occurs when focus automatically shifts due to system act
 
 Mechanisms that trigger passive focus traversal include:
 
-- **Component removal**: If a focused component is removed, the system tries to shift focus to the next available sibling, following a back-to-front order. If no siblings are focusable, focus is released to the parent component.
-- **Attribute change**: Changing a component's **focusable** or **enabled** to **false**, or **visibility** to invisible causes the system to automatically move focus to another focusable component, using the same method as for component removal.
-- [**Hierarchical page**](#basic-concepts) **switching**: During [hierarchical page](#basic-concepts) switching, for example, from one [hierarchical page](#basic-concepts) to another, focus of the current [hierarchical page](#basic-concepts) is automatically released, and the new [hierarchical page](#basic-concepts) may automatically gain focus based on preset logic.
-- **Web component initialization**: The **Web** component may immediately gain focus upon creation if designed to do so (for example, certain dialog boxes or text boxes), which is part of the component's behavior and not governed by the focus framework specifications.
+- Component removal: If a focused component is removed, the system tries to shift focus to the next available sibling, following a back-to-front order. If no siblings are focusable, focus is released to the parent component.
+- Attribute change: Changing a component's **focusable** or **enabled** to **false**, or **visibility** to invisible causes the system to automatically move focus to another focusable component, using the same method as for component removal.
+- [Hierarchical page](#basic-concepts) switching: During switching between hierarchical pages (for example, from one hierarchical page to another), the focus of the current hierarchical page is automatically released, and the new hierarchical page may automatically gain focus based on preset logic.
+- **Web** component initialization: The **Web** component may immediately gain focus upon creation if designed to do so (for example, certain dialog boxes or text boxes), which is part of the component's behavior and not governed by the focus framework specifications.
 
 ### Focus Traversal Algorithms
 
@@ -222,10 +219,10 @@ The algorithm used by a container is based on its UX design and is implemented b
 The linear focus traversal algorithm is the default algorithm, focusing on the order of child nodes in the node tree, commonly used in single-direction layouts such as **Row**, **Column**, and **Flex** containers. Its operation rules are as follows:
 
 
-- **Order dependency**: Focus order is based solely on the mounting sequence of child nodes in the node tree, independent of their visual layout.
-- **Tab key focus traversal**: The **Tab** key moves focus through focusable elements in the order they are mounted in the component tree.
-- **Arrow key focus traversal**: Arrow keys perpendicular to the container's layout direction are ignored. For example, a horizontal **Row** container does not accept focus requests from up and down keys.
-- **Boundary handling**: The container rejects focus requests in the opposite direction from the current focus edge. For example, if focus is on the first child of a horizontal **Row** container, it won't process leftward focus requests.
+- Order dependency: The focus order is based solely on the mounting sequence of child nodes in the node tree, independent of their visual layout.
+- **Tab** key focus traversal: The **Tab** key moves focus through focusable elements in the order they are mounted in the component tree.
+- Arrow key focus traversal: Arrow keys perpendicular to the container's layout direction are ignored. For example, a horizontal **Row** container does not accept focus requests from up and down keys.
+- Boundary handling: The container rejects focus requests in the opposite direction from the current focus edge. For example, if focus is on the first child of a horizontal **Row** container, it won't process leftward focus requests.
 
 ```ts
 @Entry
@@ -279,12 +276,12 @@ In a horizontal **Row** container, use the left and right arrow keys to navigate
 
 **Projection-based Focus Traversal Algorithm**
 
-The projection-based focus traversal algorithm determines the next focus based on the overlap area and center-point distance of the projection of the current focused component in the direction of focus movement. This algorithm applies to containers with child components of different sizes. Currently, only the Flex component with the wrap attribute configured is supported. Its operation rules are as follows:
+The projection-based focus traversal algorithm determines the next focus based on the overlap area and center-point distance of the projection of the current focused component in the direction of focus movement. This algorithm is designed for containers whose children vary in size. Currently, it is supported only by the **Flex** component when its **wrap** attribute is set. Its operation rules are as follows:
 
 
-- When arrow keys are used to move focus, the overlapping area between the projection and the child component area is determined. Among all child components whose area is not 0, the straight-line distance between the child components and the center point of the current focused component is calculated, and the child component with the shortest distance is selected. If there are multiple candidate child components, the child component that is closer to the node tree is selected. If no child component overlaps with the projection, the container cannot process the focus movement request of the arrow key.
-- When the Tab key is used to move focus, specification 1 is used first. If the focus movement request is found, the process exits. If the focus movement request is not found, the position of the currently focused child component is simulated to move downwards by the height of the focused child component, and then the projection is determined according to the left arrow key. The child component with the overlapping projection and the shortest straight-line distance between the center points wins. If no child component overlaps with the projection, the container cannot process the focus movement request of the Tab key.
-- **Shift+Tab** key: It mimics a leftward shift to find the next focus; If the focus movement request is not found, the position of the currently focused child component is simulated to move upwards by the height of the focused child component, and then the projection is determined according to the right arrow key. The child component with the overlapping projection and the shortest straight-line distance between the center points wins. If no child component overlaps with the projection, the container cannot process the focus movement request of the Shift+Tab key.
+- **Arrow key navigation**: When an arrow key is pressed, the algorithm first checks for any overlap between the projection and the areas of child components. Among all child components whose overlapping area is greater than zero, the straight‑line distance from each child's center to the center of the currently focused component is calculated. The child with the shortest distance is selected. If multiple candidates have the same minimal distance, the child that appears earlier in the node tree is chosen. If no child overlaps with the projection, the container cannot process the arrow key focus movement request.
+- **Tab key navigation**: For **Tab** key presses, the algorithm first applies the preceding arrow key navigation rule. If a valid focus target is found, the process ends. If not, the algorithm simulates shifting the position of the currently focused child component downward by its own height, then calculates the projection as if the left arrow key were pressed. The child component that overlaps with this projection and has the shortest center-to-center distance is selected. If no child overlaps, the container cannot process the **Tab** key focus movement request.
+- **Shift+Tab key navigation**: For **Shift+Tab** key presses, the algorithm mimics a leftward shift to locate the next focus. If no target is found, it simulates moving the currently focused child component upward by its own height, then calculates the projection as if the right arrow key were pressed. The child component that overlaps with this projection and has the shortest center-to-center distance is selected. If no child overlaps, the container cannot process the **Shift+Tab **key focus movement request.
 
 ```ts
 @Entry
@@ -343,7 +340,7 @@ struct ProjectAreaFocusExample2 {
 }
 ```
 
-When components in a **Flex** multi-line layout have varying sizes and overlap vertically, the **Tab** key focus traversal fails to reach the buttons labeled **3**, **4**, and **5** in the lower row.
+When components in a **Flex** multi-line layout have varying sizes and overlap vertically, the **Tab** key focus traversal fails to reach the buttons labeled **4** and **5** in the lower row.
 
 ![Project_Area_Focus_2](figures/Project_Area_Focus_2.gif)
 
@@ -509,12 +506,20 @@ Sets whether the component is focusable.
 
 Components can be classified into the following types based on their focus capability:
 
-- **Default focusable components**: These components are usually interactive components, such as **Button**, **Checkbox**, and **TextInput**.
+- **Inherently focusable components**: These components are usually interactive components, such as **Button**, **Checkbox**, and **TextInput**. They can receive focus without any explicit configuration.
+
+- **Conditionally focusable components**: Typical examples are **Text** and **Image**, which are not focusable by default. To make them focusable, you must explicitly set **focusable(true)**. Container components that contain no focusable children are also non-focusable by default. However, if you bind an **onClick** event or a single-tap gesture to such a container, it implicitly gains focusability. Note that if the container's **focusable** attribute is explicitly set to **false**, it remains non-focusable even if an event or gesture is attached.
+
+- **Non-focusable components**: Components that do not allow for interactions, such as **Blank** and **Circle**, cannot be made focusable, regardless of whether the **focusable** attribute is applied.
+
+Setting a container component as focusable:
 
-- **Components with focus capability but not focusable by default**: Typical examples are **Text** and **Image**. To enable them to be focusable, set **focusable(true)**. Components that can be focused but cannot be focused by default if the focusable attribute is not configured, such as container components without focusable child components. If you configure the onClick or single-finger tap gesture for these components, the components become focusable components implicitly. However, when these components have the **focusable** attribute set to **false**, they are still not focusable even if you bind the aforementioned event or gesture to them.
+The primary purpose of gaining focus is to enable interaction. If a component inherently lacks interactive capabilities, it cannot be made focusable. Container components (such as **Stack** and **Column**) are typically not interactive by themselves. Therefore, even if a container component is a leaf node in the view tree, it cannot be made focusable simply by calling **.focusable(true)**. Note that this same rule applies to [FrameNode](../reference/apis-arkui/js-apis-arkui-frameNode.md) objects created dynamically.
+To make a leaf node container focusable, you can use one of these approaches:
 
-- **Non-focusable components**: Components that do not allow for interactions, such as **Blank** and **Circle**, cannot be made focusable, even with the **focusable** attribute applied.
+- Place a component that natively supports focus, such as a **Button** component, inside the container.
 
+- Bind a gesture (such as **onClick** or a tap gesture) to the container.
 
 ```ts
 enabled(value: boolean)
@@ -526,7 +531,7 @@ Sets the component's interactivity. If [enabled](../reference/apis-arkui/arkui-t
 visibility(value: Visibility)
 ```
 
-Sets the component's visibility. If [visibility](../reference/apis-arkui/arkui-ts/ts-universal-attributes-visibility.md#visibility) is set to **Visibility.None** or **Visibility.Hidden**, the component becomes invisible and cannot gain focus.
+Sets the component's visibility. If [visibility](../reference/apis-arkui/arkui-ts/ts-universal-attributes-visibility.md#visibility) set to **Visibility.None** or **Visibility.Hidden**, the component becomes invisible and cannot gain focus.
 
 ```ts
 focusOnTouch(value: boolean)
@@ -536,7 +541,7 @@ Sets whether the component is focusable on touch.
 
 > **NOTE**
 >
-> When a component that is currently focused has its **focusable** or **enabled** attribute set to **false**, it automatically loses focus. Focus then shifts to another component according to the [Focus Traversal Guidelines](#focus-traversal-guidelines).
+>When a component that is currently focused has its **focusable** or **enabled** attribute set to **false**, it automatically loses focus. The focus then shifts to another component according to the [Focus Traversal Guidelines](#focus-traversal-guidelines).
 
 ```ts
 // xxx.ets
@@ -631,8 +636,8 @@ Operation result:
 The preceding example includes three steps:
 
 - As the first **Text** component does not have **focusable(true)** set, it is not focusable.
-- The second **Text** component is set with **focusOnTouch(true)**, allowing it to gain focus on touch. Pressing the **Tab** key triggers focus traversal, but focus remains on the second component. When the **F** key is pressed, the **onKeyEvent** callback toggles **focusable** to **false**, making the second **Text** component not focusable, and focus shifts to the next available focusable component, which is the third **Text** component.
-- Pressing the **G** key triggers the **onKeyEvent** callback, which sets **enabled** to **false**, making the third **Text** component not focusable. Focus then automatically moves to the **Row** container, where the default configuration causes focus to shift to **Button1**.
+- The second **Text** component is set with **focusOnTouch(true)**, allowing it to gain focus on touch. Pressing the **Tab** key triggers focus traversal, but the focus remains on the second component. When the **F** key is pressed, the **onKeyEvent** callback toggles **focusable** to **false**, making the second **Text** component not focusable, and the focus shifts to the next available focusable component, which is the third **Text** component.
+- Pressing the **G** key triggers the **onKeyEvent** callback, which sets **enabled** to **false**, making the third **Text** component not focusable. The focus then automatically moves to the **Row** container, where the default configuration causes the focus to shift to **Button1**.
 
 ## Setting the Focus Box for a Container
 
@@ -743,7 +748,7 @@ Set whether the current component is the default focus on the current [hierarchi
 // xxx.ets
 @Entry
 @Component
-struct morenjiaodian {
+struct DefaultFocus {
   @State oneButtonColor: Color = Color.Gray;
   @State twoButtonColor: Color = Color.Gray;
   @State threeButtonColor: Color = Color.Gray;
@@ -803,8 +808,8 @@ struct morenjiaodian {
 
 The preceding example includes two steps:
 
-- defaultFocus(true) is set on the third button. After the [Hierarchical Page](#basic-concepts) is displayed, the third button is focused by default and displayed in green.
-- Pressing the **Tab** key triggers focus traversal, and since the third **Button** component is in focus, a focus frame appears around it.
+- **defaultFocus(true)** is set on the third button. When the hierarchical page is displayed, the third button automatically receives focus and turns green.
+- Pressing the **Tab** key triggers focus traversal, and since the third **Button** component is in focus, a focus indicator appears around it.
 
 ### Default Focus for Containers
 
@@ -835,32 +840,32 @@ struct Index {
 
 **Overall Focus and Non-Overall Focus**
 
-- **Overall focus**: The entire [hierarchical page](#basic-concepts) or container gains focus first, and then focus shifts to its child components. Examples include [hierarchical page](#basic-concepts) transitions, route switches within **Navigation** components, focus group traversal, and when a container component proactively calls **requestFocusById**.
+- Overall focus: The entire [hierarchical page](#basic-concepts) or container gains focus first, and then focus shifts to its child components. Examples include [hierarchical page](#basic-concepts) transitions, route switches within **Navigation** components, focus group traversal, and when a container component proactively calls **requestFocusById**.
 
-- **Non-overall focus**: A specific component gains focus, pulling its parent components into focus. Examples include a **TextInput** component proactively obtaining focus or using the **Tab** key for traversal in non-focus group.
+- Non-overall focus: A specific component gains focus, pulling its parent components into focus. Examples include a **TextInput** component proactively obtaining focus or using the **Tab** key for traversal in non-focus group.
 
 **Formation of the Focus Chain in Overall Focus**
 
-1. When the [hierarchical page](#basic-concepts) is focused for the first time:
+1. When a hierarchical page first receives focus:
 
-   - The leaf node of the focus chain is the node with **defaultFocus** set.
+- The leaf node of the focus chain is the node with **defaultFocus** set.
 
-   - If defaultFocus is not configured, focus stays on the root container of the [hierarchical page](#basic-concepts).
+- If **defaultFocus** is not configured on any node, focus remains on the root container of the hierarchical page.
 
-2. When the [hierarchical page](#basic-concepts) is not focused for the first time, the node that was focused last time is focused.
+2. When a hierarchical page is not focused for the first time, the node that was focused the last time the page was active regains focus.
 
 3. Focus chain with priority configuration:
 
-   - If a container has a component with a focus priority higher than **PREVIOUS**, the component with the highest priority gains focus.
+- If a container has a component with a focus priority higher than **PREVIOUS**, the component with the highest priority gains focus.
 
-   - If no component with a priority higher than **PREVIOUS** exists, the last focused node regains focus, such as when a window refocuses after being out of focus.
+- If no component with a priority higher than **PREVIOUS** exists, the last focused node regains focus, such as when a window refocuses after being out of focus.
 
 
 ## Focus Style
 
 > **NOTE**
 >
-> When a component is in the focus activated state, its [zIndex](../reference/apis-arkui/arkui-ts/ts-universal-attributes-z-order.md#zindex) value is automatically elevated to **INT_MAX** to ensure that it is rendered above other components. If the component already has a specified **zIndex** value, this value will not be adjusted. When the component exits the focus activated state (for example, loses focus or leaves the focus chain), its **zIndex** value will revert to its original settings.
+> When a component is in the focus activation state, its [zIndex](../reference/apis-arkui/arkui-ts/ts-universal-attributes-z-order.md#zindex) value is automatically elevated to **INT_MAX** to ensure that it is rendered above other components. If the component already has a specified **zIndex** value, this value will not be adjusted. When the component exits the focus activation state (for example, loses focus or leaves the focus chain), its **zIndex** value will revert to its original settings.
 >
 
 ```ts
@@ -900,12 +905,12 @@ struct RequestFocusExample {
 
 The preceding example includes two steps:
 
-- After the [hierarchical page](#basic-concepts) opens, pressing the Tab key initiates focus traversal. The first **Button** gains focus, displaying a small, black focus box that is closely fitted to the edge.
+- After the [hierarchical page](#basic-concepts) opens, pressing the **Tab** key initiates focus traversal. The first **Button** gains focus, displaying a small, black focus box that is closely fitted to the edge.
 - Pressing the Tab key again shifts focus to the second **Button**, which features a large, red focus box with a thicker stroke and a more significant margin from the edge.
 
 ## Active Focus Acquisition/Loss
 
-- **Using FocusController APIs**
+- Using **FocusController** APIs
 
   You are advised to use **requestFocus** from **FocusController** for actively acquiring focus. It provides the following benefits:
   - Takes effect in the current frame, preventing interference from subsequent component tree changes.
@@ -924,7 +929,7 @@ The preceding example includes two steps:
   ```
   Clears focus and forcibly moves focus to the root container node of the current [hierarchical page](#basic-concepts). Other nodes on the focus chain all lose focus.
 
-- **Using focusControl APIs**
+- Using **focusControl** APIs
   ```ts
   requestFocus(value: string): boolean
   ```
@@ -1021,7 +1026,7 @@ The preceding example includes three steps:
 nextFocus(nextStep: Optional<FocusMovement>): T
 ```
 
-If a component is configured with nextFocus, focus is moved only according to the nextFocus sequence. If no component or container is configured with nextFocus, the default focus sequence is used.
+When a component is configured with **nextFocus**, focus movement strictly follows the sequence defined by **nextFocus**. If no component or container has **nextFocus** configured, the default focus sequence applies.
 
 >  **NOTE**
 >
@@ -1060,11 +1065,11 @@ struct NextFocusExample {
   }
 }
 ```
-Focus sequence using the Tab key: If nextFocus is not configured, the focus sequence using the Tab key is A->B -> C->D -> E->F. After nextFocus is configured, the focus sequence of the Tab key is A->F -> B->C -> D->E -> A.
+Focus navigation order for the **Tab** key: Without **nextFocus** configured: The focus navigation order is A -> B -> C -> D -> E -> F. With **nextFocus** configured: The focus navigation order is A ->F -> B ->C -> D ->E -> A.
 
 ![NextFocus_Focus_1.gif](figures/NextFocus_Focus_1.gif)
 
-Focus by pressing the down arrow key (for example): If nextFocus is not configured, after the Tab key is pressed to activate the focus state, the focus sequence of the down arrow key is A->D -> E->F. After nextFocus is configured, after the Tab key is pressed to activate the focus state, the focus sequence of the down arrow key is A->B -> C->D -> E->F -> A.
+Focus navigation order for the down arrow key (example): Without **nextFocus** configured: After the focus activation state is triggered with the **Tab** key, the focus navigation order is A ->D -> E -> F. With **nextFocus** configured: After the focus activation state is triggered with the **Tab** key, the focus navigation order is is A -> B -> C->D -> E->F -> A.
 
 ![NextFocus_Focus_2.gif](figures/NextFocus_Focus_2.gif)
 
@@ -1074,7 +1079,7 @@ Focus by pressing the down arrow key (for example): If nextFocus is not configur
 tabIndex(index: number)
 ```
 
-tabIndex customizes the focus sequence of the Tab key.
+The **tabIndex** attribute customizes the focus navigation order for the **Tab** key.
 
 When components with positive **tabIndex** values are present, only these components are reachable through sequential focus navigation, and they are navigated cyclically in ascending order based on the **tabIndex** value. When components with positive **tabIndex** values are not present, those components with a **tabIndex** value of **0** are navigated based on the preset focus navigation rule.
 
@@ -1082,9 +1087,9 @@ When components with positive **tabIndex** values are present, only these compon
 >
 > **tabIndex** and **focusScopeId** cannot be both set on the same component.
 > 
-> You are advised not to set the tabIndex attribute of a component to a negative number on the [hierarchical page](#basic-concepts) to control the focus capability. You can use the focusable attribute instead.
+> Avoid setting a component's **tabIndex** to a negative number on a hierarchical page to control its focusability. Use the **focusable** attribute for that purpose instead.
 > 
-> tabIndex can only customize the focus of the Tab key. If you want to customize the focus capability of the arrow key, you are advised to use [nextfocus](#setting-the-focus-navigation-order-with-nextfocus).
+> **tabIndex** only customizes **Tab** key navigation. For arrow key navigation customization, use [nextfocus](#setting-the-focus-navigation-order-with-nextfocus).
 
 ```ts
 @Entry
@@ -1299,8 +1304,8 @@ struct FocusableExample {
 
 The preceding example includes two steps:
 
-- The **TextInput** component is part of a focus group. When the **Tab** key is pressed, focus quickly moves out of the **TextInput** component to the next focusable element outside the group. Arrow keys can be used to move focus within the **TextInput** component.
-- The **Column** component in the upper left corner does not have a focus group set. Therefore, focus can only be traversed one by one with the **Tab** key.
+- The **TextInput** component is part of a focus group. When the **Tab** key is pressed, the focus quickly moves out of the **TextInput** component to the next focusable element outside the group. Arrow keys can be used to move focus within the **TextInput** component.
+- The two **Column** components on the left do not have a focus group set. Therefore, focus can only be traversed one by one with the **Tab** key.
 
 
 In API version 14, you can use the **arrowStepOut** parameter on a focus group to specify whether focus can move out of the group using arrow keys.

en/application-dev/ui/arkts-create-toast.md

@@ -31,7 +31,7 @@ You can use the [getPromptAction](../reference/apis-arkui/arkts-apis-uicontext-u
 
  - Follow the default toast positioning guidelines.
 
-   By default, toasts appear from the bottom of the screen with appropriate safe area margins. Ensure they do not overlap with other popup components. In specific scenarios, consider adjusting content layout to prevent such conflicts.
+   By default, toasts appear from the bottom of the screen with a safe margin from the bottom edge. As an in-application notification mechanism, retain this default system behavior to avoid overlapping with other popup components. In specific scenarios, consider adjusting content layout to prevent such conflicts.
 
  - Adhere to the maximum font scale for toasts.
 
@@ -52,6 +52,7 @@ Before displaying a TOP_MOST toast, a full-screen subwindow is created (the size
 
 ```ts
 import { promptAction } from '@kit.ArkUI';
+import { BusinessError } from '@kit.BasicServicesKit';
 
 @Entry
 @Component
@@ -60,19 +61,25 @@ struct Index {
     Column({ space: 10 }) {
       TextInput()
       Button() {
-        Text("Toast of the DEFAULT type")
+        Text('Toast of the DEFAULT type')
           .fontSize(20)
           .fontWeight(FontWeight.Bold)
 
       }
       .width('100%')
       .onClick(() => {
-        this.getUIContext().getPromptAction().showToast({
-          message: "OK, I am DEFAULT toast.",
-          duration: 2000,
-          showMode: promptAction.ToastShowMode.DEFAULT,
-          bottom: 80
-        });
+        try {
+          this.getUIContext().getPromptAction().showToast({
+            message: 'OK, I am DEFAULT toast.',
+            duration: 2000,
+            showMode: promptAction.ToastShowMode.DEFAULT,
+            bottom: 80
+          });
+        } catch (error) {
+          let message = (error as BusinessError).message;
+          let code = (error as BusinessError).code;
+          console.error(`showToast args error code is ${code}, message is ${message}`);
+        }
       })
 
       Button() {
@@ -83,12 +90,18 @@ struct Index {
       }
       .width('100%')
       .onClick(() => {
-        this.getUIContext().getPromptAction().showToast({
-          message: "OK, I am TOP_MOST toast.",
-          duration: 2000,
-          showMode: promptAction.ToastShowMode.TOP_MOST,
-          bottom: 85
-        });
+        try {
+          this.getUIContext().getPromptAction().showToast({
+            message: "OK, I am TOP_MOST toast.",
+            duration: 2000,
+            showMode: promptAction.ToastShowMode.TOP_MOST,
+            bottom: 85
+          });
+        } catch (error) {
+          let message = (error as BusinessError).message;
+          let code = (error as BusinessError).code;
+          console.error(`showToast args error code is ${code}, message is ${message}`);
+        }
       })
     }
   }
@@ -131,7 +144,7 @@ struct toastExample {
 
 ![image](figures/UIToast1.gif)
 
-## Creating a Toast with a Close Button
+## Displaying and Closing a Toast
 
 This mode is suitable for scenarios where the dialog box has a longer retention period and the user can close it manually.
 

en/application-dev/ui/arkts-drawing-customization-on-canvas.md

@@ -59,7 +59,7 @@ You can draw custom graphics on the canvas in any of the following ways:
     // Configure the parameters of the CanvasRenderingContext2D and OffscreenCanvasRenderingContext2D objects, including whether to enable anti-aliasing. The value true indicates that anti-aliasing is enabled.
     private settings: RenderingContextSettings = new RenderingContextSettings(true);
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
-    // Create an OffscreenCanvas object. width indicates the width of the offscreen canvas, and height indicates the height of the offscreen canvas.
+    // Create an OffscreenCanvas object. width indicates the width of the offscreen canvas, and height indicates the height of the offscreen canvas. OffscreenCanvasRenderingContext2D handles offscreen graphics rendering.
     private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600);
    
     build() {
@@ -120,7 +120,7 @@ Canvas(this.context)
 
 After **onReady()** is invoked, you can use the **Canvas** component for drawing. Alternatively, you can separately define the **Path2d** object to build an ideal path without the **Canvas** component and **onReady()** lifecycle callback, and then use the **Canvas** component for drawing after **onReady()** is invoked.
 
-- After the **onReady()** callback of the **Canvas** component is invoked, use the **CanvasRenderingContext2D** and **OffscreenCanvasRenderingContext2D** objects to call related APIs for drawing.
+- Use the **CanvasRenderingContext2D** object to call related APIs for drawing.
 
   ```ts
   Canvas(this.context)
@@ -398,7 +398,7 @@ To improve performance and avoid unnecessary rendering, you can listen for **Can
 
 - Using the [setOnVisibleAreaApproximateChange](../reference/apis-arkui/arkui-ts/ts-uicommonevent.md#setonvisibleareaapproximatechange) API, available since API version 13
 
-   ```ts
+  ```ts
   import { ColorMetrics } from '@kit.ArkUI';
 
   @Entry
@@ -443,7 +443,7 @@ To improve performance and avoid unnecessary rendering, you can listen for **Can
                 if (this.timerId == -2) {
                   this.timerId = setInterval(() => {
                     this.drawRandomCircle()
-                  }, 50)
+                  }, 500)
                 }
               }
             })
@@ -453,7 +453,7 @@ To improve performance and avoid unnecessary rendering, you can listen for **Can
             if (this.timerId < 0) {
               this.timerId = setInterval(() => {
                 this.drawRandomCircle()
-              }, 50)
+              }, 500)
             }
           })
       }
@@ -462,11 +462,11 @@ To improve performance and avoid unnecessary rendering, you can listen for **Can
     }
   }
   ```
-![canvas_RenderingContext](figures/Canvas_RenderingContext.gif)
+  ![canvas_RenderingContext](figures/Canvas_RenderingContext.gif)
 
 - Using the [onVisibleAreaApproximateChange](../reference/apis-arkui/arkui-ts/ts-universal-component-visible-area-change-event.md#onvisibleareaapproximatechange17) API, available since API version 17
 
-   ```ts
+  ```ts
   import { ColorMetrics } from '@kit.ArkUI';
 
   @Entry
@@ -509,7 +509,7 @@ To improve performance and avoid unnecessary rendering, you can listen for **Can
                   if (this.timerId == -2) {
                     this.timerId = setInterval(() => {
                       this.drawRandomCircle()
-                    }, 50)
+                    }, 500)
                   }
                 }
               })
@@ -518,7 +518,7 @@ To improve performance and avoid unnecessary rendering, you can listen for **Can
             if (this.timerId < 0) {
               this.timerId = setInterval(() => {
                 this.drawRandomCircle()
-              }, 50)
+              }, 500)
             }
           })
       }
@@ -527,7 +527,7 @@ To improve performance and avoid unnecessary rendering, you can listen for **Can
     }
   }
   ```
-![canvas_onVisibleAreaApproximateChange](figures/Canvas_onVisibleAreaApproximateChange.gif)
+  ![canvas_onVisibleAreaApproximateChange](figures/Canvas_onVisibleAreaApproximateChange.gif)
 
 ## Example Scenario
 

en/application-dev/ui/arkts-gesture-events-combined-gestures.md

@@ -1,7 +1,13 @@
 # Combined Gestures
+<!--Kit: ArkUI-->
+<!--Subsystem: ArkUI-->
+<!--Owner: @yihao-lin-->
+<!--Designer: @piggyguy-->
+<!--Tester: @songyanhong-->
+<!--Adviser: @Brilliantry_Rui-->
 
 
-A combined gesture is a combination of multiple single gestures. Its recognition mode is subject to **GestureMode** passed in **GestureGroup**. Three recognition modes are supported: [sequential recognition](#sequential-recognition), [parallel recognition](#parallel-recognition), and [exclusive recognition](#exclusive-recognition).
+A combined gesture is a combination of multiple single gestures. Its recognition mode is subject to [GestureMode](../reference/apis-arkui/arkui-ts/ts-combined-gestures.md#gesturemode) passed in **GestureGroup**. Three recognition modes are supported: [sequential recognition](#sequential-recognition), [parallel recognition](#parallel-recognition), and [exclusive recognition](#exclusive-recognition).
 
 ```ts
 GestureGroup(mode:GestureMode, gesture:GestureType[])
@@ -10,7 +16,7 @@ GestureGroup(mode:GestureMode, gesture:GestureType[])
 
 - **mode**: recognition mode of combined gestures. The value belongs to the **GestureMode** enumeration class.
 
-- **gesture**: array of multiple gestures.
+- **gesture**: array of multiple gestures.  .
 
 
 ## Sequential Recognition
@@ -19,7 +25,7 @@ For sequential recognition, the value of **GestureMode** is **Sequence**. In thi
 
 In the following example, the combined gestures for continuous recognition are the long press gesture and pan gesture.
 
-The **translate** attribute is bound to a **Column** component. You can set the attribute to translate the component. Then, bind **LongPressGesture** and **PanGesture** to the component in the **Sequence** gesture mode. When a long press gesture is recognized, the displayed number is updated. When the user drags the component after the long press gesture, the component is dragged based on the callback function of the pan gesture.
+The [translate](../reference/apis-arkui/arkui-ts/ts-universal-attributes-transformation.md#translate) attribute is bound to a **Column** component. You can set the attribute to translate the component. Then, bind [LongPressGesture](../reference/apis-arkui/arkui-ts/ts-basic-gestures-longpressgesture.md) and [PanGesture](../reference/apis-arkui/arkui-ts/ts-basic-gestures-pangesture.md) to the component in the **Sequence** recognition mode. When a long press gesture is recognized, the displayed number is updated. When the user drags the component after the long press gesture, the component is dragged based on the callback function of the pan gesture.
 
 ```ts
 // xxx.ets
@@ -31,7 +37,7 @@ struct Index {
   @State count: number = 0;
   @State positionX: number = 0;
   @State positionY: number = 0;
-  @State borderStyles: BorderStyle = BorderStyle.Solid
+  @State borderStyles: BorderStyle = BorderStyle.Solid;
 
   build() {
     Column() {
@@ -82,7 +88,7 @@ struct Index {
           })
       )
       .onCancel(() => {
-        console.log("sequence gesture canceled")
+        console.info("sequence gesture canceled")
       })
     )
   }
@@ -155,7 +161,7 @@ struct Index {
 
 For exclusive recognition, the value of **GestureMode** is **Exclusive**. In this gesture recognition mode, all registered gestures are recognized at once. Once any of the gestures is recognized successfully, the gesture recognition ends, and all other gestures fail to be recognized.
 
-For example, when the tap gesture and the double-tap gesture are bound to the **Column** component in exclusive recognition mode, if you bind the tap gesture first, followed by the double-tap, the double-tap gesture won't be recognized because the tap consumes all touch events. However, if you bind the double-tap gesture first, it will be recognized without triggering the tap.
+For example, when both the tap gesture and double-tap gesture are bound to a **Column** component in exclusive recognition mode, the order in which these gestures are bound matters. If you bind the tap gesture before the double-tap, the double-tap gesture won't be recognized because the tap consumes all touch events. Conversely, if you bind the double-tap gesture first, it will be recognized without being intercepted by the tap gesture.
 
 ```ts
 // xxx.ets
@@ -200,3 +206,70 @@ struct Index {
 >When there is only a single tap, the tap gesture is recognized, but the double-tap gesture fails to be recognized.
 >
 >When there are two taps, the gesture response depends on the order of gesture binding. If you bind the tap gesture first, followed by the double-tap gesture, the tap gesture will be recognized on the first tap, causing the double-tap gesture to fail. Even if the second tap is performed within the specified time, the double-tap gesture event is not responded to. Instead, another tap gesture event is triggered. Conversely, if you bind the double-tap gesture first, it will be recognized without triggering the tap gesture.
+
+## Example Scenario
+
+The following example implements a child component bound to long press and pan gestures. Although the long press and pan gestures can trigger simultaneously, the parent **Swiper** component's built‑in swipe gesture should take effect when the long press gesture is not successfully recognized. Since the child component's pan gesture competes with the parent component's built‑in swipe gesture, and the child's gesture has higher priority, dynamic control is needed to determine whether the child's pan gesture should trigger.
+
+```ts
+// xxx.ets
+import { PromptAction } from '@kit.ArkUI';
+
+@Entry
+@Component
+struct CombinedGestureDemo {
+  @State isLongPress: boolean = false;
+  promptAction: PromptAction = this.getUIContext().getPromptAction();
+
+  build() {
+    Swiper() {
+      // Page 1
+      Row()
+        .width('100%')
+        .height('100%')
+        .backgroundColor(Color.Grey)
+        .borderRadius(12)
+        // Use a custom gesture judgment callback to reject the child's pan gesture when the long press gesture fails, allowing the parent Swiper component's swipe gesture to succeed.
+        .onGestureRecognizerJudgeBegin((event: BaseGestureEvent, current: GestureRecognizer, others: Array<GestureRecognizer>)=>{
+          if (current.getType() !== GestureControl.GestureType.PAN_GESTURE) {
+            return GestureJudgeResult.CONTINUE;
+          }
+          if (this.isLongPress) {
+            return GestureJudgeResult.CONTINUE;
+          }
+          return GestureJudgeResult.REJECT;
+        })
+        .gesture(
+          // Bind a parallel gesture group to allow long press and pan gestures to trigger simultaneously.
+          GestureGroup(GestureMode.Parallel,
+            LongPressGesture()
+              .onAction(() => {
+                this.isLongPress = true;
+                this.promptAction.showToast({ message: "LongPress trigger" })
+              })
+              .onActionEnd(() => {
+                this.isLongPress = false;
+              })
+            ,
+            PanGesture()
+              .onActionStart(() => {
+                this.promptAction.showToast({ message: "child pan start" })
+              })
+          )
+        )
+      // Page 2
+      Row()
+        .width('100%')
+        .height('100%')
+        .backgroundColor(Color.Pink)
+        .borderRadius(12)
+    }
+    .borderWidth(2)
+    .width('100%')
+    .height(300)
+    .padding(20)
+  }
+}
+```
+
+![combined-gesture](figures/combined-gesture.gif)

en/application-dev/ui/arkts-gesture-events-gesture-judge.md

@@ -7,7 +7,7 @@
 <!--Adviser: @Brilliantry_Rui-->
 
 Gesture conflicts occur when multiple gesture recognizers compete for recognition on the same component or overlapping areas, resulting in unexpected behavior. Common conflict scenarios include:
-- Multiple gestures on the same component (for example, both tap and long-press gestures on a button)
+- Multiple gestures on the same component (for example, both tap and long press gestures on a button)
 - Gesture recognizers of the same type on parent and child components
 - Conflicts between system default gestures and custom gestures (for example, conflict between the scroll gesture and the click gesture of a child component)
 
@@ -28,7 +28,7 @@ Custom gesture judgment involves the following APIs.
 |[onGestureJudgeBegin](../reference/apis-arkui/arkui-ts/ts-gesture-customize-judge.md#ongesturejudgebegin)|Used for gesture interception as a universal event. Called when the gesture meets system trigger thresholds, allowing the application to determine whether to intercept the gesture.|
 |[onGestureRecognizerJudgeBegin](../reference/apis-arkui/arkui-ts/ts-gesture-blocking-enhancement.md#ongesturerecognizerjudgebegin)|Called to implement gesture judgment, obtain gesture recognizers, and set their enabled state. It is an extension of **onGestureJudgeBegin** and can serve as its substitute.<br>When obtaining gesture recognizers, this API obtains all gesture recognizers in the response chain of the current interaction, as well as the recognizer about to be triggered successfully, allowing the enabled state of the gesture to be set.|
 
-In the following example, the **Image** and **Stack** components are located in the same area. Long-pressing the upper half of the **Stack** component triggers the long-press gesture bound to the **Stack** component, while long-pressing the lower half of the **Stack** component triggers the drag operation of the **Image** component.
+In the following example, the **Image** and **Stack** components are located in the same area. Long-pressing the upper half of the **Stack** component triggers the long press gesture bound to the **Stack** component, while long-pressing the lower half of the **Stack** component triggers the drag operation of the **Image** component.
 
 **Figure 2** Example
 
@@ -80,61 +80,68 @@ In the following example, the **Image** and **Stack** components are located in
 4. Below is the complete code example.
 
    ```ts
-   import { PromptAction } from '@kit.ArkUI';
-   
-   @Entry
-   @Component
-   struct Index {
-     scroller: Scroller = new Scroller();
-     promptAction: PromptAction = this.getUIContext().getPromptAction();
-   
-     build() {
-       Scroll(this.scroller) {
-         Column({ space: 8 }) {
-           Text("There are two layers of components, the upper layer component bound to a long press gesture, and the lower layer component bound to a drag. The lower half of the upper layer component is bound to gesture judgment, making this area respond to the drag gesture of the lower layer.").width('100%').fontSize(20).fontColor('0xffdd00')
-           Stack({ alignContent: Alignment.Center }) {
-             Column() {
-               // Simulate the upper and lower half areas.
-               Stack().width('200vp').height('100vp').backgroundColor(Color.Red)
-               Stack().width('200vp').height('100vp').backgroundColor(Color.Blue)
-             }.width('200vp').height('200vp')
-             // The lower half area of the stack is an image area bound to the pan gesture.
-             Image($r('sys.media.ohos_app_icon'))
-               .draggable(true)
-               .onDragStart(()=>{
-                 this.promptAction.showToast({ message: "Drag the lower blue area. The Image component responds." });
-               })
-               .width('200vp').height('200vp')
-             // The upper half of the Stack component is the floating area bound to the long press gesture.
-             Stack() {
-             }
-             .width('200vp')
-             .height('200vp')
-             .hitTestBehavior(HitTestMode.Transparent)
-             .gesture(GestureGroup(GestureMode.Parallel,
-               LongPressGesture()
-                 .onAction((event: GestureEvent) => {
-                   this.promptAction.showToast({ message: "Long-press the upper red area. The red area responds." });
-                 })
-                 .tag("longpress")
-             ))
-             .onGestureJudgeBegin((gestureInfo: GestureInfo, event: BaseGestureEvent) => {
-               // If it is a long press gesture, determine whether the touch position is in the upper half area.
-               if (gestureInfo.type == GestureControl.GestureType.LONG_PRESS_GESTURE) {
-                 if (event.fingerList.length > 0 && event.fingerList[0].localY < 100) {
-                   return GestureJudgeResult.CONTINUE;
-                 } else {
-                   return GestureJudgeResult.REJECT;
-                 }
-               }
-               return GestureJudgeResult.CONTINUE;
-             })
-           }.width('100%')
-         }.width('100%')
-       }
-     }
-   }
+    import { PromptAction } from '@kit.ArkUI';
+
+    @Entry
+    @Component
+    struct Index {
+      scroller: Scroller = new Scroller();
+      promptAction: PromptAction = this.getUIContext().getPromptAction();
+
+      build() {
+        Scroll(this.scroller) {
+          Column({ space: 8 }) {
+            // Replace $r('app.string.Drag_instructions') with the resource file you use.
+            Text($r('app.string.Drag_instructions')).width('100%').fontSize(20).fontColor('0xffdd00')
+            Stack({ alignContent: Alignment.Center }) {
+              Column() {
+                // Simulate the upper and lower half areas.
+                Stack().width('200vp').height('100vp').backgroundColor(Color.Gray)
+                Stack().width('200vp').height('100vp').backgroundColor(Color.Blue)
+              }.width('200vp').height('200vp')
+
+              // The lower half area of the stack is an image area bound to the pan gesture.
+              // Replace $r('sys.media.ohos_app_icon') with the resource file you use.
+              Image($r('sys.media.ohos_app_icon'))
+                .draggable(true)
+                .onDragStart(() => {
+                  // Replace $r('app.string.Allow_dragging_prompt') with the resource file you use.
+                  this.promptAction.showToast({ message: $r('app.string.Allow_dragging_prompt') });
+                })
+                .width('200vp').height('200vp')
+              // The upper half of the Stack component is the floating area bound to the long press gesture.
+              Stack() {
+              }
+              .width('200vp')
+              .height('200vp')
+              .hitTestBehavior(HitTestMode.Transparent)
+              .gesture(GestureGroup(GestureMode.Parallel,
+                LongPressGesture()
+                  .onAction((event: GestureEvent) => {
+                    // Replace $r('app.string.Stop_dragging_prompt') with the resource file you use.
+                    this.promptAction.showToast({ message: $r('app.string.Stop_dragging_prompt') });
+                  })
+                  .tag('longpress')
+              ))
+              .onGestureJudgeBegin((gestureInfo: GestureInfo, event: BaseGestureEvent) => {
+                // If it is a long press gesture, determine whether the touch position is in the upper half area.
+                if (gestureInfo.type == GestureControl.GestureType.LONG_PRESS_GESTURE) {
+                  if (event.fingerList.length > 0 && event.fingerList[0].localY < 100) {
+                    return GestureJudgeResult.CONTINUE;
+                  } else {
+                    return GestureJudgeResult.REJECT;
+                  }
+                };
+                return GestureJudgeResult.CONTINUE;
+              })
+            }.width('100%')
+          }.width('100%')
+        }
+      }
+    }
    ```
+   
+   ![StackGesure20251119001](figures/StackGesure20251119001.jpg)
 
 ## Parallel Gesture Dynamic Control
 
@@ -456,7 +463,7 @@ The parent container (**video_layer**) has multiple bound gestures:
 - Vertical swipe: adjusts brightness.
 - Horizontal swipe: seeks playback.
 
-The inner **Slider** component (**progress_layer**) does not have a long-press gesture bound to it. This causes the parent container's fast-forward gesture to be triggered when the user long-presses the **Slider** component, which is unexpected behavior.
+The inner **Slider** component (**progress_layer**) does not have a long press gesture bound to it. This causes the parent container's fast-forward gesture to be triggered when the user long-presses the **Slider** component, which is unexpected behavior.
 
 Solution: Register an **onTouchTestDone** callback on the **Slider** component. Use this callback to disable gesture recognizers not belonging to the **Slider** component, thereby resolving the conflict.
 
@@ -466,134 +473,157 @@ The following shows the complete sample code:
 @Entry
 @ComponentV2
 struct Index {
-  @Local progress: number = 496000 // Initial progress, in seconds.
-  @Local total: number = 27490000   // Total duration, in seconds.
-  @Local currentWidth: string = '100%'
-  @Local currentHeight: string = '100%'
-  private currentPosX: number = 0
-  private currentPosY: number = 0
-  private currentFullScreenState: boolean = true
+  @Local progress: number = 496000; // Initial progress, in seconds.
+  @Local total: number = 27490000; // Total duration, in seconds.
+  @Local currentWidth: string = '100%';
+  @Local currentHeight: string = '100%';
+  private currentPosX: number = 0;
+  private currentPosY: number = 0;
+  private currentFullScreenState: boolean = true;
   private normalPlayTimer: number = -1;
   private isPlaying: boolean = true;
   private fastForwardTimer: number = -1;
+  private context = this.getUIContext().getHostContext()
 
   aboutToAppear(): void {
     // Start a periodic timer to refresh the progress every second.
-    this.startNormalPlayTimer()
-  }
+    this.startNormalPlayTimer();
+  };
 
   startNormalPlayTimer(): void {
     if (this.normalPlayTimer != -1) {
       this.stopNormalPlayTimer()
-    }
+    };
     this.normalPlayTimer = setInterval(() => {
       this.progress = this.progress + 1000
-    }, 1000)
-  }
+    }, 1000);
+  };
 
   stopNormalPlayTimer(): void {
     if (this.normalPlayTimer == -1) {
-      return
-    }
-    clearInterval(this.normalPlayTimer)
-    this.normalPlayTimer = -1
-  }
+      return;
+    };
+    clearInterval(this.normalPlayTimer);
+    this.normalPlayTimer = -1;
+  };
 
   startFastForwardTimer(): void {
     if (this.fastForwardTimer != -1) {
-      this.stopFastForwardTimer()
-    }
+      this.stopFastForwardTimer();
+    };
     this.fastForwardTimer = setInterval(() => {
-      this.progress = this.progress + 100000
-    }, 100)
-  }
+      this.progress = this.progress + 100000;
+    }, 100);
+  };
 
   stopFastForwardTimer(): void {
     if (this.fastForwardTimer == -1) {
-      return
-    }
-    clearInterval(this.fastForwardTimer)
-    this.fastForwardTimer = -1
-  }
+      return;
+    };
+    clearInterval(this.fastForwardTimer);
+    this.fastForwardTimer = -1;
+  };
 
   showMessage(message: string): void {
-    this.getUIContext().getPromptAction().showToast({ message: message, alignment: Alignment.Center })
-  }
+    this.getUIContext().getPromptAction().showToast({ message: message, alignment: Alignment.Center });
+  };
 
   resetPosInfo(): void {
-    this.currentPosX = 0
-    this.currentPosY = 0
-  }
+    this.currentPosX = 0;
+    this.currentPosY = 0;
+  };
 
   toggleFullScreenState(): void {
-    this.currentFullScreenState = !this.currentFullScreenState
+    this.currentFullScreenState = !this.currentFullScreenState;
     if (this.currentFullScreenState) {
-      this.currentWidth = '100%'
-      this.currentHeight = '100%'
+      this.currentWidth = '100%';
+      this.currentHeight = '100%';
     } else {
-      this.currentWidth = '100%'
-      this.currentHeight = '50%'
-    }
-    this.showMessage(this.currentFullScreenState ? 'Full-screen playback' : 'Exit full-screen')
-  }
+      this.currentWidth = '100%';
+      this.currentHeight = '50%';
+    };
+    // Replace $r('app.string.Play_full_screen') with the resource file you use.
+    // Replace $r('app.string.Exit_play_full_screen') with the resource file you use.
+    this.showMessage(this.currentFullScreenState
+      ? this.context!.resourceManager.getStringSync($r('app.string.Play_full_screen').id)
+      : this.context!.resourceManager.getStringSync($r('app.string.Exit_play_full_screen').id));
+  };
 
   togglePlayAndPause(): void {
-    this.isPlaying = !this.isPlaying
+    this.isPlaying = !this.isPlaying;
     if (!this.isPlaying) {
-      this.stopNormalPlayTimer()
+      this.stopNormalPlayTimer();
     } else {
       // Restart the timer.
-      this.startNormalPlayTimer()
-    }
-    this.showMessage(this.isPlaying ? 'Pause playback' : 'Resume playback')
-  }
+      this.startNormalPlayTimer();
+    };
+    // Replace $r('app.string.stop_playing') with the resource file you use.
+    // Replace $r('app.string.Continue_playing') with the resource file you use.
+    this.showMessage(this.isPlaying
+      ? this.context!.resourceManager.getStringSync($r('app.string.stop_playing').id)
+      : this.context!.resourceManager.getStringSync($r('app.string.Continue_playing').id));
+  };
 
   doFastForward(start: boolean): void {
     if (!start) { // Stop fast-forwarding and resume normal playback.
-      this.stopFastForwardTimer()
-      this.startNormalPlayTimer()
-      this.showMessage('Cancel fast-forwarding')
-      return
-    }
-
-    this.stopNormalPlayTimer()
-    this.startFastForwardTimer()
-    this.showMessage('Start fast-forwarding')
-  }
+      this.stopFastForwardTimer();
+      this.startNormalPlayTimer();
+      // Replace $r('app.string.Cancel_FastForwarding') with the resource file you use.
+      this.showMessage(
+        this.context!.resourceManager.getStringSync($r('app.string.Cancel_FastForwarding').id));
+      return;
+    };
+
+    this.stopNormalPlayTimer();
+    this.startFastForwardTimer();
+    // Replace $r('app.string.Start_FastForwarding') with the resource file you use.
+    this.showMessage(
+      this.context!.resourceManager.getStringSync($r('app.string.Start_FastForwarding').id));
+  };
 
   updateBrightness(start: boolean, event: BaseGestureEvent): void {
-    let newY = event.fingerList[0].localY
+    let newY = event.fingerList[0].localY;
     if (start) {
-      this.currentPosY = newY
-      this.showMessage('Start adjusting brightness')
-      return
-    }
+      this.currentPosY = newY;
+      // Replace $r('app.string.Start_adjusting_brightness') with the resource file you use.
+      this.showMessage(this.context!.resourceManager
+        .getStringSync($r('app.string.Start_adjusting_brightness').id));
+      return;
+    };
     let offsetY = newY - this.currentPosY;
     if (Math.abs(offsetY) > 10) {
-      this.showMessage((offsetY > 0) ? 'Decrease brightness' : 'Increase brightness')
-      this.currentPosY = newY
-    }
-  }
+      // Replace $r('app.string.Reduce_brightness') with the resource file you use.
+      // Replace $r('app.string.Increase_brightness') with the resource file you use.
+      this.showMessage((offsetY > 0)
+        ? this.context!.resourceManager.getStringSync($r('app.string.Reduce_brightness').id)
+        : this.context!.resourceManager.getStringSync($r('app.string.Increase_brightness').id))
+      this.currentPosY = newY;
+    };
+  };
 
   updateProgress(start: boolean, event: BaseGestureEvent): void {
-    let newX = event.fingerList[0].localX
+    let newX = event.fingerList[0].localX;
     if (start) {
-      this.currentPosX = newX
-      this.showMessage('Start adjusting progress')
-      return
-    }
+      this.currentPosX = newX;
+      // Replace $r('app.string.Adjust_schedule') with the resource file you use.
+      this.showMessage(this.context!.resourceManager
+        .getStringSync($r('app.string.Adjust_schedule').id));
+      return;
+    };
     let offsetX = newX - this.currentPosX;
-    this.progress = Math.floor(this.progress + offsetX * 10000)
-    this.currentPosX = newX
-  }
+    this.progress = Math.floor(this.progress + offsetX * 10000);
+    this.currentPosX = newX;
+  };
 
   build() {
     Stack({ alignContent: Alignment.Center }) {
       Column() {
         Column() {
-          Text("Playback progress: " + this.progress)
+          // Replace $r('app.string.Playback_progress') with the resource file you use.
+          Text(this.context!.resourceManager.getStringSync($r('app.string.Playback_progress').id) + this.progress)
         }
-          .width("100%").height("90%")
+        .width('100%').height('90%')
+
         Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
           Slider({
             value: this.progress,
@@ -602,23 +632,23 @@ struct Index {
             style: SliderStyle.OutSet
           })
             .onChange((value: number, mode: SliderChangeMode) => {
-              this.progress = value
+              this.progress = value;
             })
-            .id("progress_layer")
+            .id('progress_layer')
             .onTouchTestDone((event, allRecognizers: Array<GestureRecognizer>) => {
               for (let i = 0; i < allRecognizers.length; i++) {
                 let recognizer = allRecognizers[i];
                 let inspectorInfo = recognizer.getEventTargetInfo().getId();
-                if (inspectorInfo !== "progress_layer") {
+                if (inspectorInfo !== 'progress_layer') {
                   // When the user interacts with the progress bar area, disable all gestures not belonging to progress_layer.
                   recognizer.preventBegin();
-                }
-              }
+                };
+              };
             })
             .margin({ left: 5 })
-            .trackColor(Color.Red)
-            .blockColor(Color.Yellow)
-            .selectedColor(Color.Orange)
+            .trackColor(Color.Blue)
+            .blockColor(Color.Gray)
+            .selectedColor(Color.White)
             .trackThickness(2)
             .flexShrink(1)
             .flexGrow(1)
@@ -635,42 +665,42 @@ struct Index {
         PanGesture({ direction: PanDirection.Vertical, distance: 10 })
           .tag('pan_for_brightness_control')
           .onActionStart((event) => {
-            this.updateBrightness(true, event)
+            this.updateBrightness(true, event);
           })
           .onActionUpdate((event) => {
-            this.updateBrightness(false, event)
+            this.updateBrightness(false, event);
           }),
         PanGesture({ direction: PanDirection.Horizontal, distance: 10 })
           .tag('pan_for_play_progress_control')
           .onActionStart((event) => {
-            this.updateProgress(true, event)
+            this.updateProgress(true, event);
           })
           .onActionUpdate((event) => {
-            this.updateProgress(false, event)
+            this.updateProgress(false, event);
           }),
 
         LongPressGesture()
           .tag('long_press_for_fast_forward_control')
           .onAction(() => {
-            this.doFastForward(true) // Start fast-forwarding.
+            this.doFastForward(true); // Start fast-forwarding.
           })
           .onActionEnd(() => {
-            this.doFastForward(false) // Stop fast-forwarding.
+            this.doFastForward(false); // Stop fast-forwarding.
           })
           .onActionCancel(() => {
-            this.doFastForward(false)
+            this.doFastForward(false);
           }),
 
         TapGesture({ count: 2 })
           .tag('double_tap_on_video')
           .onAction(() => {
-            this.toggleFullScreenState()
+            this.toggleFullScreenState();
           }),
 
         TapGesture()
           .tag('single_tap_on_video')
           .onAction(() => {
-            this.togglePlayAndPause()
+            this.togglePlayAndPause();
           })
       )
     )
@@ -678,4 +708,7 @@ struct Index {
     .height(this.currentHeight)
   }
 }
+
 ```
+
+

en/application-dev/ui/arkts-gesture-events-multi-level-gesture.md

@@ -4,7 +4,7 @@
 <!--Owner: @jiangtao92-->
 <!--Designer: @piggyguy-->
 <!--Tester: @songyanhong-->
-<!--Adviser: @HelloCrease-->
+<!--Adviser: @Brilliantry_Rui-->
 
 Multi-level gesture events occur when both parent and child components receive a gesture or event bound to them. Handling such events can be tricky: The gesture and event detection is affected by a plurality of factors, with much transmission and competition involved, and an unexpected response easily occurs.
 
@@ -31,10 +31,11 @@ ComponentA() {
 }.onTouch(() => {})
 ```
 If components B and C are children of component A, then touching component B or component C also touches component A. The **onTouch** callback can be invoked by multiple components at the same time.
-Therefore, when component B is touched, the **onTouch** callback is invoked by both component A and component B, but not by component C; when component C is touched, the **onTouch** callback is invoked by both component A and component C, but not by component B.
+Therefore, when component B is touched, the **onTouch** callback is invoked by both component A and component B, but not by component C;
+when component C is touched, the **onTouch** callback is invoked by both component A and component C, but not by component B.
 
 For special container components, such as **Stack**, **onTouch** events can be received by parent and child components at the same time, but how they are received by child components depends on the stacking relationship.
-
+ 
 
 ```ts
 Stack A() {
@@ -87,7 +88,7 @@ Specifically, use the **responseRegion** and **hitTestBehavior** attributes to c
 
 ### Using responseRegion
 
-The **responseRegion** attribute sets the touch target of a component, which can be larger or smaller than the layout scope of the component.
+The [responseRegion](../reference/apis-arkui/arkui-ts/ts-universal-attributes-touch-target.md#responseregion) attribute sets the touch target of a component, which can be larger or smaller than the layout scope of the component.
 
 ```ts
 ComponentA() {
@@ -110,7 +111,7 @@ The **responseRegion** attribute accepts an array consisting of multiple **Rect*
 
 ### Using hitTestBehavior
 
-The **hitTestBehavior** attribute sets which components can respond to specific gestures and events. It is especially useful under complex multi-level event scenarios.
+The [hitTestBehavior](../reference/apis-arkui/arkui-ts/ts-universal-attributes-hit-test-behavior.md#hittestbehavior) attribute sets which components can respond to specific gestures and events. It is especially useful under complex multi-layer event scenarios.
 
 ```ts
 ComponentA() {
@@ -154,7 +155,7 @@ With **HitTestMode.Transparent**, both the node and its child node respond to th
 
 If **hitTestBehavior** is not set for component C, when the overlapping area of component B and component C is touched, the **onTouch** events of Stack A and component C are triggered, the touch event of component C is triggered, and neither the **onTouch** event nor tap gesture of component B is triggered.
 
-If **hitTestBehavior** is set to **HitTestMode.Transparent** for component C, when the overlapping area of components B and C is touched, the **onTouch** events of Stack A and component C are still triggered, and the touch event of component C is also triggered; yet, because component B can receive the touch event in this case, its **onTouch** event and tap gesture are triggered.
+If **hitTestBehavior** is set to **HitTestMode.Transparent** for component C, when the overlapping area of components B and C is touched, the **onTouch** events of Stack A and component C are still triggered, and the touch event of component C is also triggered; yet, because component B can receive the touch event in this case, its **onTouch** event is triggered.
 
 ```ts
 ComponentA() {
@@ -172,6 +173,52 @@ If **hitTestBehavior** is not set for component A, a touch in the target touch o
 
 When **hitTestBehavior** is set to **HitTestMode.None** for component A, a touch in the target touch of component B triggers the **onTouch** event and tap gesture of component B, but not the **onTouch** event of component A.
 
+```ts
+Stack A() {
+    ComponentB()
+    .onTouch(() => {})
+    .gesture(TapGesture({count: 1}))
+    ComponentC() {
+        ComponentD()
+        .onTouch(() => {})
+        .gesture(TapGesture({count: 1}))
+    }
+    .onTouch(() => {})
+    .gesture(TapGesture({count: 1}))
+    .hitTestBehavior(HitTestMode.BLOCK_HIERARCHY)
+}
+.onTouch(() => {})
+.gesture(TapGesture({count: 1}))
+```
+Starting from API version 20, **HitTestMode.BLOCK_HIERARCHY** enables the node itself and its child nodes to respond to hit testing, while blocking all lower‑priority sibling nodes and parent nodes from participating in hit testing.
+
+When component C does not have **hitTestBehavior** set, clicking the overlapping area of components B and D triggers the **onTouch** events of components A, C, and D, and also triggers the click gesture of component D.
+
+When component C has **hitTestBehavior** set to **HitTestMode.BLOCK_HIERARCHY**, clicking the overlapping area of components B and D triggers the **onTouch** events of components C and D, while the **onTouch** events of components A and B are not triggered; the click gesture of component D is still triggered.
+
+```ts
+Stack A() {
+    ComponentB()
+    .onTouch(() => {})
+    .gesture(TapGesture({count: 1}))
+    ComponentC() {
+        ComponentD()
+        .onTouch(() => {})
+        .gesture(TapGesture({count: 1}))
+    }
+    .onTouch(() => {})
+    .gesture(TapGesture({count: 1}))
+    .hitTestBehavior(HitTestMode.BLOCK_DESCENDANTS)
+}
+.onTouch(() => {})
+.gesture(TapGesture({count: 1}))
+```
+Starting from API version 20, [HitTestMode](../reference/apis-arkui/arkui-ts/ts-appendix-enums.md#hittestmode9).BLOCK_DESCENDANTS prevents the node itself and all its descendants (children, grandchildren, and more) from responding to hit testing, without affecting the hit‑testing behavior of ancestor nodes.
+
+If component C does not have [hitTestBehavior](../reference/apis-arkui/arkui-ts/ts-universal-attributes-hit-test-behavior.md#hittestbehavior) set, clicking the overlapping area of components B and D triggers the **onTouch** events of components A, C, and D, and also triggers the click gesture of component D.
+
+When component C has [hitTestBehavior](../reference/apis-arkui/arkui-ts/ts-universal-attributes-hit-test-behavior.md#hittestbehavior) set to **HitTestMode.BLOCK_DESCENDANTS**, clicking the overlapping area of components B and D triggers the [onTouch](../reference/apis-arkui/arkui-ts/ts-universal-events-touch.md#ontouch) events of components A and B, while the **onTouch** events of components C and D are not triggered; the click gesture of component B is triggered instead.
+
 Under simple scenarios, you are advised to set **hitTestBehavior** for each single component.
 Under complex scenarios, you are advised to set different **hitTestBehavior** values to multiple components to control the dispatching of touch events.
 
@@ -199,7 +246,7 @@ ComponentA() {
 }
 .priorityGesture(TapGesture({count: 1}))
 ```
-In the preceding example, the **.priorityGesture** method is used to bind the parent component to the tap gesture, and the parent component responds prior to the child component.
+When a parent component binds a gesture .[priorityGesture](../reference/apis-arkui/arkui-ts/ts-gesture-settings.md#prioritygesture), the gesture on the parent component takes precedence over gestures on its child components.
 In this case, when component B is touched, the tap gesture of component A is triggered, but that of component B is not.
 
 To enable both the parent and child components to respond to a same gesture, use the **.parallelGesture** method in the parent component.
@@ -211,11 +258,11 @@ ComponentA() {
 }
 .parallelGesture(TapGesture({count: 1}))
 ```
-In the preceding example, the **.parallelGesture** method is used to bind the parent component to the tap gesture, and both the parent and child components can respond to the bound gesture.
+When a parent component binds a gesture using .[parallelGesture](../reference/apis-arkui/arkui-ts/ts-gesture-settings.md#parallelgesture), both the parent's and the child's gestures can be triggered.
 In this case, when component B is touched, both the tap gestures of components A and B are triggered.
 
 ### Implementing Event Passthrough in OverlayManager
-In the event mechanism of **OverlayManager**, events are first received by components within **WrappedBuilder** by default and are not propagated downward.
+In the event mechanism of [OverlayManager](../reference/apis-arkui/arkts-apis-uicontext-overlaymanager.md), events are first delivered to components inside the [WrappedBuilder](../reference/apis-arkui/arkui-ts/ts-universal-wrapBuilder.md#wrappedbuilder) and are not propagated downward by default.
 
 To enable the underlying page below the **OverlayManager** to detect events, you can use **hitTestBehavior(HitTestMode.Transparent)** to pass through events. Refer to the following pseudocode:
 

en/application-dev/ui/arkts-interaction-development-guide-support-gesture.md

@@ -1,19 +1,19 @@
 # Implementing Gesture Responses
 <!--Kit: ArkUI-->
 <!--Subsystem: ArkUI-->
-<!--Owner: @jiangtao92-->
+<!--Owner: @yihao-lin-->
 <!--Designer: @piggyguy-->
 <!--Tester: @songyanhong-->
-<!--Adviser: @HelloCrease-->
+<!--Adviser: @Brilliantry_Rui-->
 
-When a user's action matches the predefined characteristics of a gesture, the system interprets it as a recognized gesture. This process is known as gesture recognition. To respond to gestures, you must bind the appropriate gesture object to a component. This enables the system to detect, interpret, and dispatch gesture events accordingly.
+When a user action matches the predefined characteristics of a gesture, the system recognizes it as that gesture. This process is called gesture recognition. To respond to a gesture, you need to attach a gesture object to a component so the system can collect and process the gesture input.
 
-## Overview of Basic Gestures
+## Basic Gestures and Features
 
-| Gesture                                                                                                                                                    | Operation Characteristics                                                                                     | Triggering Example                                                                                                                    |
+| Gesture                                                                                                                                                    | Operation Feature                                                                                     | Triggering Example                                                                                                                    |
 | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
-| [TapGesture](../reference/apis-arkui/arkui-ts/ts-basic-gestures-tapgesture.md)             | A quick press and release (≤ 300 ms by default).                                                          | Tap with a finger or stylus on a touchscreen; left-click with a mouse; single tap on a touchpad.                                                                          |
-| [LongPressGesture](../reference/apis-arkui/arkui-ts/ts-basic-gestures-longpressgesture.md) | Long press for a sustained duration.                                                                       | Long press with a finger or stylus; hold down the left mouse button; long press on a touchpad.                                                                                |
+| [TapGesture](../reference/apis-arkui/arkui-ts/ts-basic-gestures-tapgesture.md)             | Quick press and release (≤ 300 ms by default).                                                          | Tap with a finger or stylus on a touchscreen; left-click with a mouse; single tap on a touchpad.                                                                          |
+| [LongPressGesture](../reference/apis-arkui/arkui-ts/ts-basic-gestures-longpressgesture.md) | Press and hold for a sustained duration.                                                                       | Long press with a finger or stylus; hold down the left mouse button; long press on a touchpad.                                                                                |
 | [PanGesture](../reference/apis-arkui/arkui-ts/ts-basic-gestures-pangesture.md)             | Press and drag (displacement-based movement).                                                                           | Drag with a finger or stylus; move the mouse while holding the left button; swipe with two fingers on a touchpad; scroll the mouse wheel over a scrollable component.|
 | [PinchGesture](../reference/apis-arkui/arkui-ts/ts-basic-gestures-pinchgesture.md)         | Pinch inward or outward using two fingers.                                                             | Pinch gesture on touchscreen or touchpad; scroll the mouse wheel while holding **Ctrl** over a pinch-enabled component.                  |
 | [RotationGesture](../reference/apis-arkui/arkui-ts/ts-basic-gestures-rotationgesture.md)   | Rotate two fingers around a central point.                                                                       | Rotate gesture using two fingers on a touchscreen.                                                                                                                  |
@@ -61,9 +61,9 @@ Gesture recognition is still initiated based on [hit testing](./arkts-interactio
 | Method              | Purpose                                                            | API                                                                                                                                       | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
 | ------------------ | ---------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | Custom gesture judgment    | Allows applications to conditionally approve or reject a gesture before the system finalizes recognition.  | [onGestureJudgeBegin](../reference/apis-arkui/arkui-ts/ts-gesture-customize-judge.md#ongesturejudgebegin)                                      | Invoked when a gesture is about to be recognized as successful. The application can override the system's decision by returning a rejection, allowing other gestures to compete for recognition.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
-| Enhanced gesture judgment| Provides higher-priority control over gesture recognition.| [onGestureRecognizerJudgeBegin](../reference/apis-arkui/arkui-ts/ts-gesture-blocking-enhancement.md#ongesturerecognizerjudgebegin13)           | 1. Works similarly to **onGestureJudgeBegin**, but with higher priority.<br>2. If this API is bound, **onGestureJudgeBegin** becomes ineffective.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
-| Parallel gesture control  | Enables concurrent gesture recognition between parent and child components, which is useful for nested scrolling. | [shouldBuiltInRecognizerParallelWith](../reference/apis-arkui/arkui-ts/ts-gesture-blocking-enhancement.md#shouldbuiltinrecognizerparallelwith) | 1. Triggered when the user presses a component and the system begins collecting gesture objects.<br>2. Returns built-in gestures (currently only **PanGesture**) on the current component and previously collected gestures of the same type from child components. By default, child gestures have higher priority and override parent gestures.<br>3. This API allows you to force parallel recognition, enabling both parent and child gestures to respond.<br>4. The returned gesture object includes APIs for controlling response behavior, allowing you to implement nested scrolling (for example, the child scrolls first, and then the parent scrolls when the child reaches the boundary).<br>**NOTE**<br>This API only applies to components with built-in gestures (for example, **List** and **Swiper**). It has no effect otherwise.|
-| Gesture recognition prevention  | Prevents specific gestures from participating in recognition before they are processed. | [preventBegin](../reference/apis-arkui/arkui-ts/ts-gesture-common.md#preventbegin20) | 1. Triggered during the [onTouchTestDone](../reference/apis-arkui/arkui-ts/ts-gesture-blocking-enhancement.md#ontouchtestdone20) callback when the user presses the screen.<br>2. Returns all gesture recognizers eligible for processing at the current position.<br>3. You can selectively call **preventBegin** on recognizers to exclude them from recognition, helping avoid gesture conflicts.|
+| Enhanced gesture judgment| Allows applications to conditionally approve or reject a gesture before the system finalizes recognition.| [onGestureRecognizerJudgeBegin](../reference/apis-arkui/arkui-ts/ts-gesture-blocking-enhancement.md#ongesturerecognizerjudgebegin13)           | 1. Works similarly to **onGestureJudgeBegin**, but with higher priority.<br>2. If this API is bound, **onGestureJudgeBegin** becomes ineffective.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| Parallel gesture control  | Enables concurrent gesture recognition between parent and child components, which is useful for nested scrolling. | [shouldBuiltInRecognizerParallelWith](../reference/apis-arkui/arkui-ts/ts-gesture-blocking-enhancement.md#shouldbuiltinrecognizerparallelwith) | 1. Triggered when the user presses a component and the system begins collecting gesture objects.<br>2. Returns built-in gestures (currently only **PanGesture**) on the current component and previously collected gestures of the same type from child components. By default, child gestures have higher priority and override parent gestures.<br>3. Allows the application to forcibly specify that the low-priority gesture (for example, pan) on the current component runs in parallel with the high-priority gesture of the same type on the child component. That is, when the high-priority gesture on the child component is successfully recognized, the gesture of the same type on the current component can also be triggered and responded to successfully.<br>4. The returned gesture object provides an API to control the enabling of gesture responses. Therefore, after gestures are set to run in parallel, the application can control the response behavior of the two parallel gestures to achieve nested scrolling (e.g., one scrolls first, and the other triggers when the edge is reached).<br>**NOTE**<br>This method only takes effect when the bound component has built-in system gestures (e.g., **List** or **Swiper**). Otherwise, it has no effect.|
+| Gesture recognition prevention  | Prevents specific gestures from participating in recognition before they are processed. | [preventBegin](../reference/apis-arkui/arkui-ts/ts-gesture-common.md#preventbegin20) | 1. Triggered during the [onTouchTestDone](../reference/apis-arkui/arkui-ts/ts-gesture-blocking-enhancement.md#ontouchtestdone20) callback when the user presses the screen.<br>2. Returns all gesture recognizers eligible for processing at the current position.<br>3. You can selectively call **preventBegin** on recognizers to exclude them from recognition, helping avoid gesture conflicts.<br>This capability is supported since API version 20.|
 
 
 For details, see [Gesture Conflict Handling](arkts-gesture-events-gesture-judge.md).

en/application-dev/ui/arkts-layout-development-create-grid.md

@@ -5,7 +5,7 @@
 <!--Owner: @zcdqs; @fangyuhao-->
 <!--Designer: @zcdqs-->
 <!--Tester: @liuzhenshuo-->
-<!--Adviser: @HelloCrease-->
+<!--Adviser: @Brilliantry_Rui-->
 
 ## Overview
 
@@ -15,7 +15,7 @@ ArkUI provides the [Grid](../reference/apis-arkui/arkui-ts/ts-container-grid.md)
 
 > **NOTE**
 >
-> This document only shows key code snippets. For the complete code that can run, see <!--RP2-->[Creating a Grid](https://gitcode.com/openharmony/applications_app_samples/tree/master/code/DocsSample/ArkUISample/ScrollableComponent)<!--RP2End-->.
+> This document provides key code excerpts for reference.<!--RP2--><!--RP2End-->
 
 ## Layout and Constraints
 
@@ -49,7 +49,7 @@ Depending on the settings of the quantity and proportion of rows and columns, th
 
 ### Setting the Number and Proportion of Rows and Columns
 
-You can set the number and proportion of rows and columns to determine the overall arrangement mode of the grid layout. To do so, use the **rowsTemplate** and **columnsTemplate** attributes of the **Grid** component.
+You can set the number and proportion of rows and columns to determine the overall arrangement mode of the grid layout. To do so, use the [rowsTemplate](../reference/apis-arkui/arkui-ts/ts-container-grid.md#rowstemplate) and [columnsTemplate](../reference/apis-arkui/arkui-ts/ts-container-grid.md#columnstemplate) attributes of the **Grid** component.
 
 The values of **rowsTemplate** and **columnsTemplate** are a string consisting of 'number+fr' segments, separated by spaces. Wherein **fr** indicates the number of rows or columns in the grid layout, and the number in front of **fr** is used to calculate the proportion of the row or column in the grid width, thereby determining the width of the row or column.
 
@@ -88,7 +88,7 @@ A common application with an uneven grid layout is the calculator. As shown in t
 
 ![en-us_image_0000001511421292](figures/en-us_image_0000001511421292.png)
 
-In the grid, use the **onGetRectByIndex** callback to return the array [rowStart, columnStart, rowSpan, columnSpan] to achieve a layout that spans rows and columns, wherein **rowStart** and **rowEnd** indicate the start and end row numbers of the current element, and **columnStart** and **columnEnd** indicate the start and end column numbers of the current element.
+In the grid, use the **onGetRectByIndex** callback to return the array [rowStart, columnStart, rowSpan, columnSpan] to achieve a layout that spans rows and columns, wherein **rowStart** and **columnStart** indicate the start row number and start column number of the current element, and **rowSpan** and **columnSpan** indicate the number of rows and columns occupied by the current element.
 
 To make the **0** key span across the first and second columns, and the **=** key span across the fifth and sixth rows, set **onGetRectByIndex** for **0** and **=** as follows: for **0**, set **rowStart** and **columnStart** at **6** and **0**, and **rowSpan** and **columnSpan** at **1** and **2**; for **=**, set **rowStart** and **columnStart** at **5** and **3**, and **rowSpan** and **columnSpan** at **2** and **1**.
 
@@ -117,7 +117,7 @@ Grid(undefined, this.layoutOptions) {
 
 ### Setting the Main Axis Direction
 
-When neither the number nor proportion is set for rows and columns in a grid layout, you can use the **layoutDirection** attribute to set the main axis direction and thereby specify the arrangement mode of child components. In addition, you can use the **minCount** and **maxCount** attributes to restrict the number of grid cells along the main axis.
+When neither the number nor proportion is set for rows and columns in a grid layout, you can use the [layoutDirection](../reference/apis-arkui/arkui-ts/ts-container-grid.md#layoutdirection8) attribute to set the main axis direction and thereby specify the arrangement mode of child components. In addition, you can use the [minCount](../reference/apis-arkui/arkui-ts/ts-container-grid.md#mincount8) and [maxCount](../reference/apis-arkui/arkui-ts/ts-container-grid.md#maxcount8) attributes to restrict the number of grid cells along the main axis.
 
   **Figure 6** Main axis direction 
 
@@ -206,13 +206,13 @@ struct OfficeService {
 
 ## Setting the Gap Between Rows and Columns
 
-The horizontal spacing between two grid cells is called row spacing, and the vertical spacing is called column spacing, as shown in the following figure.
+The horizontal spacing between grid cells is called row spacing, and the vertical spacing is called column spacing, as illustrated below.
 
 **Figure 8** Row spacing and column spacing 
 
 ![en-us_image_0000001511580908](figures/en-us_image_0000001511580908.png)
 
-You can use **rowsGap** and **columnsGap** to set the row spacing and column spacing of the grid layout. In the calculator shown in Figure 5, the row spacing is 15 vp, and the column spacing is 10vp.
+To configure the row and column spacing of a grid layout, use the [rowsGap](../reference/apis-arkui/arkui-ts/ts-container-grid.md#rowsgap) and [columnsGap](../reference/apis-arkui/arkui-ts/ts-container-grid.md#columnsgap) attributes of the **Grid** component. In the calculator shown in Figure 5, the row spacing is 15 vp, and the column spacing is 10vp.
 
 
 ```ts
@@ -341,9 +341,9 @@ To add an external scrollbar to a [Grid](../reference/apis-arkui/arkui-ts/ts-con
 
 Just as [LazyForEach](../ui/rendering-control/arkts-rendering-control-foreach.md) is recommended for [handling a long list](arkts-layout-development-create-list.md#handling-a-long-list), [LazyForEach](../ui/rendering-control/arkts-rendering-control-lazyforeach.md) is recommended for a scrolling grid layout when a large number of grid items is involved.
 
-For details about the implementation of on-demand loading optimization, see the example in [LazyForEach: Lazy Data Loading](../ui/rendering-control/arkts-rendering-control-lazyforeach.md).
+For details about the implementation of on-demand loading optimization, see the example in [LazyForEach](../ui/rendering-control/arkts-rendering-control-lazyforeach.md).
 
-When the grid is rendered in lazy loading mode, to improve the grid scrolling experience and minimize white blocks during grid scrolling, you can use the **cachedCount** parameter of the **Grid** component. This parameter sets the number of grid items preloaded outside of the screen and is valid only in **LazyForEach**.
+When the grid is rendered in lazy loading mode, to improve the grid scrolling experience and minimize white blocks during grid scrolling, you can use the [cachedCount](../reference/apis-arkui/arkui-ts/ts-container-grid.md#cachedcount) attribute of the **Grid** component. This attribute sets the number of grid items preloaded outside of the screen and is valid only in [LazyForEach](../ui/rendering-control/arkts-rendering-control-lazyforeach.md).
 
   Specifically, the number of the grid items to cache before and after the currently displayed one equals the value of **cachedCount** multiplied by the number of columns. Grid items that exceed the display and cache range are released.
 

en/application-dev/ui/arkts-layout-development-create-list.md

@@ -11,7 +11,7 @@
 
 A list is a container that displays a collection of items. If the list items go beyond the screen, the list can scroll to reveal the content off the screen. The list is applicable for presenting similar data types or data type sets, such as images and text. Some common lists seen in applications are the contacts list, playlist, and shopping list.
 
-You can use lists to easily and efficiently display structured, scrollable information. Specifically, you can provide a single view of rows or columns by arranging the [ListItemGroup](../reference/apis-arkui/arkui-ts/ts-container-listitemgroup.md) or [ListItem](../reference/apis-arkui/arkui-ts/ts-container-listitem.md) child components linearly in a vertical or horizontal direction in the [List](../reference/apis-arkui/arkui-ts/ts-container-list.md) component, or use [ForEach](../ui/rendering-control/arkts-rendering-control-foreach.md) to iterate over a group of rows or columns, or mix any number of single views and **ForEach** structures to build a list. The **List** component supports the generation of child components in various [rendering](../ui/rendering-control/arkts-rendering-control-overview.md) modes, including conditional rendering, iterative rendering, and lazy data loading.
+You can use lists to easily and efficiently display structured, scrollable information. Specifically, you can provide a single view of rows or columns by arranging the [ListItemGroup](../reference/apis-arkui/arkui-ts/ts-container-listitemgroup.md) or [ListItem](../reference/apis-arkui/arkui-ts/ts-container-listitem.md) child components linearly in a vertical or horizontal direction in the [List](../reference/apis-arkui/arkui-ts/ts-container-list.md) component, or use [ForEach](../ui/rendering-control/arkts-rendering-control-foreach.md) to iterate over a group of rows or columns, or mix any number of single views and **ForEach** structures to build a list. The **List** component supports the generation of child components in various [rendering](../ui/rendering-control/arkts-rendering-control-overview.md) modes, including [conditional rendering](../ui/rendering-control/arkts-rendering-control-ifelse.md), rendering of repeated content, and [lazy data loading](../ui/rendering-control/arkts-rendering-control-lazyforeach.md).
 
 On devices with circular screens, the [ArcList](../reference/apis-arkui/arkui-ts/ts-container-arclist.md) component is recommended. For details, see [Creating an Arc List (ArcList)](./arkts-layout-development-create-arclist.md).
 
@@ -102,7 +102,7 @@ List() {
 
 ### Setting the Cross Axis Layout
 
-The cross axis layout of the **List** component can be set using the **lanes** and **alignListItem** attributes. The **lanes** attribute controls the number of list items along the cross axis, and the **alignListItem** attribute controls the alignment mode of child components along the cross axis.
+The cross axis layout of the **List** component can be set using the [lanes](../reference/apis-arkui/arkui-ts/ts-container-list.md#lanes9) and [alignListItem](../reference/apis-arkui/arkui-ts/ts-container-list.md#alignlistitem9) attributes. The **lanes** attribute controls the number of list items along the cross axis, and the **alignListItem** attribute controls the alignment mode of child components along the cross axis.
 
 The **lanes** attribute of the **List** component is usually used to adaptively construct lists with different numbers of rows or columns for devices of different sizes, enabling one-time development for multi-device deployment. Its value type is number or [LengthConstrain](../reference/apis-arkui/arkui-ts/ts-types.md#lengthconstrain). If you are building a two-column vertical list shown on the right in Figure 2, set the **lanes** attribute to **2**. The default value of **lanes** is **1**.
 
@@ -330,7 +330,7 @@ In the **List** component, **ForEach** can be used to render **ListItemGroup** i
 
 ### Setting the Spacing
 
-When initializing a list, you can use the **space** parameter to add spacing between list items. In the following example, a 10 vp spacing is added between list items along the main axis:
+When initializing the **List** component, use the **space** parameter of [ListOptions](../reference/apis-arkui/arkui-ts/ts-container-list.md#listoptions18) to configure spacing between list items. In the following example, a 10 vp spacing is added between list items along the main axis:
 
 
 ```ts
@@ -348,7 +348,7 @@ A divider separates UI items to make them easier to identify. In the following f
 
 ![en-us_image_0000001511580960](figures/en-us_image_0000001511580960.png)
 
-To add dividers between list items, you can use the **divider** attribute together with the following style attributes:
+To add dividers between list items,  use the [divider](../reference/apis-arkui/arkui-ts/ts-container-list.md#divider) attribute together with the following style attributes:
 
 - **strokeWidth** and **color**: stroke width and color of the diver, respectively.
 
@@ -647,7 +647,7 @@ Another common example is a scrolling list working with a multi-level index bar,
 
 ![en-us_image_0000001563060769](figures/en-us_image_0000001563060769.gif)
 
-As shown above, when the contacts list scrolls from group A to B, the alphabetical index bar on the right also changes from A to B. This scenario can be implemented by listening for the **onScrollIndex** event of the **List** component. The alphabet index bar is implemented using the [AlphabetIndexer](../reference/apis-arkui/arkui-ts/ts-container-alphabet-indexer.md) component.
+As shown above, when the contacts list scrolls from group A to B, the alphabetical index bar on the right updates from A to B. This behavior can be implemented by listening for the [onScrollIndex](../reference/apis-arkui/arkui-ts/ts-container-list.md#onscrollindex) event of the **List** component. The alphabetical index bar is implemented using the [AlphabetIndexer](../reference/apis-arkui/arkui-ts/ts-container-alphabet-indexer.md) component.
 
 When the list scrolls, the **selectedIndex** value of the letter to highlight in the alphabet index bar is recalculated based on the **firstIndex** value of the item to which the list has scrolled. In the **AlphabetIndexer** component, the index of the highlighted item is set through the **selected** attribute. When the value of **selectedIndex** changes, the **AlphabetIndexer** component is re-rendered to highlight the corresponding letter.
 
@@ -1193,7 +1193,7 @@ The process of implementing the collapsing and expanding effect of list items is
     }
     ```
 
-3. Control whether each list item is expanded by changing the state of **ListItem**, and achieve the animation effects during the expanding and collapsing process through **animation** and **animateTo**.
+3. Control list item expansion by changing the state of **ListItem** components, and implement expand/collapse animations through [animation](../reference/apis-arkui/arkui-ts/ts-animatorproperty.md#animation) and [animateTo](../reference/apis-arkui/arkts-apis-uicontext-uicontext.md#animateto).
 
     ```ts
     @Builder
@@ -1239,7 +1239,7 @@ In certain scenarios, you may want a list to automatically scroll upward when ne
     }
     ```
 
-2. Construct a list structure and set **stackFromEnd** to **true**. In this way, the list content automatically scrolls upward to reveal newly inserted data items.
+2. Construct a list structure and set [stackFromEnd](../reference/apis-arkui/arkui-ts/ts-container-list.md#stackfromend19) to **true**. This configuration causes the list to automatically scroll upward when new items are inserted at the bottom.
 
     ```ts
     @State messages: Message[] = [
@@ -1317,7 +1317,7 @@ Since API version 20, scrollable components ([Grid](../reference/apis-arkui/arku
      })
      ```
 
-   - The current item's position information is obtained through the **getItemRect** API.
+   - The current item's position information is obtained through the [getItemRect](../reference/apis-arkui/arkui-ts/ts-container-scroll.md#getitemrect11) API.
 
      ```ts
      // Implementation reference

en/application-dev/ui/arkts-layout-development-create-looping.md

@@ -25,44 +25,44 @@ When **loop** is set to **true**, the user can switch to the previous or next pa
 
 - Example of setting **loop** to **true**:
 
-```ts
-Swiper() {
-  Text('0')
-    .width('90%')
-    .height('100%')
-    .backgroundColor(Color.Gray)
-    .textAlign(TextAlign.Center)
-    .fontSize(30)
-
-  Text('1')
-    .width('90%')
-    .height('100%')
-    .backgroundColor(Color.Green)
-    .textAlign(TextAlign.Center)
-    .fontSize(30)
-
-  Text('2')
-    .width('90%')
-    .height('100%')
-    .backgroundColor(Color.Pink)
-    .textAlign(TextAlign.Center)
-    .fontSize(30)
-}
-.loop(true)
-```
+  ```ts
+  Swiper() {
+    Text('0')
+      .width('90%')
+      .height('100%')
+      .backgroundColor(Color.Gray)
+      .textAlign(TextAlign.Center)
+      .fontSize(30)
+
+    Text('1')
+      .width('90%')
+      .height('100%')
+      .backgroundColor(Color.Green)
+      .textAlign(TextAlign.Center)
+      .fontSize(30)
+
+    Text('2')
+      .width('90%')
+      .height('100%')
+      .backgroundColor(Color.Pink)
+      .textAlign(TextAlign.Center)
+      .fontSize(30)
+  }
+  .loop(true)
+  ```
 
-![loop_true](figures/loop_true.gif)
+  ![loop_true](figures/loop_true.gif)
 
 - Example of setting **loop** to **false**:
 
-```ts
-Swiper() {
-  // ...
-}
-.loop(false)
-```
+  ```ts
+  Swiper() {
+    // ...
+  }
+  .loop(false)
+  ```
 
-![loop_false](figures/loop_false.gif)
+  ![loop_false](figures/loop_false.gif)
 
 
 ## Automatic Playback
@@ -91,87 +91,87 @@ With the **indicator** attribute, you can set the position of the indicator rela
 
 - Example of using the navigation indicator in its default style:
 
-```ts
-Swiper() {
-  Text('0')
-    .width('90%')
-    .height('100%')
-    .backgroundColor(Color.Gray)
-    .textAlign(TextAlign.Center)
-    .fontSize(30)
-
-  Text('1')
-    .width('90%')
-    .height('100%')
-    .backgroundColor(Color.Green)
-    .textAlign(TextAlign.Center)
-    .fontSize(30)
-
-  Text('2')
-    .width('90%')
-    .height('100%')
-    .backgroundColor(Color.Pink)
-    .textAlign(TextAlign.Center)
-    .fontSize(30)
-}
-```
+  ```ts
+  Swiper() {
+    Text('0')
+      .width('90%')
+      .height('100%')
+      .backgroundColor(Color.Gray)
+      .textAlign(TextAlign.Center)
+      .fontSize(30)
+
+    Text('1')
+      .width('90%')
+      .height('100%')
+      .backgroundColor(Color.Green)
+      .textAlign(TextAlign.Center)
+      .fontSize(30)
+
+    Text('2')
+      .width('90%')
+      .height('100%')
+      .backgroundColor(Color.Pink)
+      .textAlign(TextAlign.Center)
+      .fontSize(30)
+  }
+  ```
 
-![indicator](figures/indicator.PNG)
+  ![indicator](figures/indicator.PNG)
 
 - Example of customizing the style of the navigation indicator
 
-The selected navigation indicator has a diameter of 30 vp with blue color, while unselected indicators have a diameter of 15 vp with red color.
-
-```ts
-Swiper() {
-  // ...
-}
-.indicator(
-  Indicator.dot()
-    .left(0)
-    .itemWidth(15)
-    .itemHeight(15)
-    .selectedItemWidth(30)
-    .selectedItemHeight(15)
-    .color(Color.Red)
-    .selectedColor(Color.Blue)
-)
-```
+  The selected navigation indicator has a width of 30 vp, a height of 15 vp, and a blue color. The unselected indicators are 15 vp in both width and height, with a red color.
 
-![ind](figures/ind.PNG)
+  ```ts
+  Swiper() {
+    // ...
+  }
+  .indicator(
+    Indicator.dot()
+      .left(0)
+      .itemWidth(15)
+      .itemHeight(15)
+      .selectedItemWidth(30)
+      .selectedItemHeight(15)
+      .color(Color.Red)
+      .selectedColor(Color.Blue)
+  )
+  ```
+
+  ![ind](figures/ind.PNG)
 
 You can set the [displayArrow](../reference/apis-arkui/arkui-ts/ts-container-swiper.md#displayarrow10) attribute of **Swiper** to control the size, position, color, and background of navigation point arrows, and whether to display arrows on mouse hover.
 
 - Example of using the navigation point arrows in the default style:
 
-```ts
-Swiper() {
-  // ...
-}
-.displayArrow(true, false)
-```
+  ```ts
+  Swiper() {
+    // ...
+  }
+  .displayArrow(true, false)
+  ```
 
-![arrow1](figures/arrow1.gif)
+  ![arrow1](figures/arrow1.gif)
 
 - Example of customizing the style of navigation point arrows:
 
-In this example, the arrows are displayed on both sides of the component, with a size of 18 vp and a color of blue.
+  In this example, the arrows are displayed on both sides of the component, with a size of 18 vp and a color of blue.
 
-```ts
-Swiper() {
-  // ...
-}
-.displayArrow({ 
-  showBackground: true,
-  isSidebarMiddle: true,
-  backgroundSize: 24,
-  backgroundColor: Color.White,
-  arrowSize: 18,
-  arrowColor: Color.Blue
-  }, false)
-```
-
-![arrow2](figures/arrow2.gif)
+  ```ts
+  Swiper() {
+    // ...
+  }
+  .displayArrow({ 
+    showBackground: true,
+    isSidebarMiddle: true,
+    backgroundSize: 24,
+    backgroundColor: Color.White,
+    arrowSize: 18,
+    arrowColor: Color.Blue
+    }, false)
+  ```
+
+  ![arrow2](figures/arrow2.gif)
 
 ## Page Switching Mode
 
@@ -261,42 +261,42 @@ struct SwiperDemo {
 }
 ```
 
-![controll](figures/controll.gif)
+![control](figures/control.gif)
 
 
 ## Playback Direction
 
-You can set the playback direction for the Swiper component through its **vertical** attribute.
+You can set the playback direction for the **Swiper** component through its **vertical** attribute.
 
-When **vertical** is set to **true**, vertical swiping is used. The default value of **vertical** is **false**.
+When **vertical** is set to **true**, vertical swiping is used. When **vertical** is set to **false**, horizontal swiping is used. The default value of **vertical** is **false**.
 
 
 - Example of using horizontal swiping:
 
-```ts
-Swiper() {
-  // ...
-}
-.indicator(true)
-.vertical(false)
-```
+  ```ts
+  Swiper() {
+    // ...
+  }
+  .indicator(true)
+  .vertical(false)
+  ```
 
 
-![horizontal-swiping](figures/horizontal-swiping.PNG)
+  ![horizontal-swiping](figures/horizontal-swiping.PNG)
 
 
 - Example of using vertical swiping:
 
-```ts
-Swiper() {
-  // ...
-}
-.indicator(true)
-.vertical(true)
-```
+  ```ts
+  Swiper() {
+    // ...
+  }
+  .indicator(true)
+  .vertical(true)
+  ```
 
 
-![vertical-swiping](figures/vertical-swiping.PNG)
+  ![vertical-swiping](figures/vertical-swiping.PNG)
 
 
 ## Child Components Per Page
@@ -529,31 +529,31 @@ Swiper() {
 
 ## Ignoring the Navigation Indicator Component Size
 
-After the bottom of the navigation indicator is set to 0, there is still spacing between the indicator bottom and the **Swiper** bottom. To eliminate this spacing, invoke the **bottom(bottom, ignoreSize)** attribute. Set **ignoreSize** to **true** to ignore the navigation indicator component size.
+After the bottom of the navigation indicator is set to 0, a gap may still exist between the indicator and the bottom of the **Swiper** component. To remove this gap, apply the **bottom(bottom, ignoreSize)** attribute. Set **ignoreSize** to **true** to ignore the navigation indicator component size.
 
 - Ignoring the dot navigation indicator component size:
 
-```ts
-Swiper() {
-  // ...
-}
-.indicator(
-  new DotIndicator()
-    .bottom(LengthMetrics.vp(0), true)
-)
-```
+  ```ts
+  Swiper() {
+    // ...
+  }
+  .indicator(
+    new DotIndicator()
+      .bottom(LengthMetrics.vp(0), true)
+  )
+  ```
 
 - Ignoring the digit navigation indicator component size:
 
-```ts
-Swiper() {
-  // ...
-}
-.indicator(
-  new DigitIndicator()
-    .bottom(LengthMetrics.vp(0), true)
-)
-```
+  ```ts
+  Swiper() {
+    // ...
+  }
+  .indicator(
+    new DigitIndicator()
+      .bottom(LengthMetrics.vp(0), true)
+  )
+  ```
 
 Complete sample code for setting the dot spacing and ignoring the component size for a dot navigation indicator:
 
@@ -655,11 +655,11 @@ struct SwiperExample {
 }
 ```
 
-![controll](figures/indicator_space.gif)
+![control](figures/indicator_space.gif)
 
 ## Maintaining the Visible Content Position
 
-When using **LazyForEach** to load data (for example, adding data through **onDataAdd**), set the [maintainVisibleContentPosition](../reference/apis-arkui/arkui-ts/ts-container-swiper.md#maintainvisiblecontentposition20) attribute to keep the visible content position stable, preventing view jumps caused by data addition or deletion. Its default value is **false**.
+When using **LazyForEach** to load data (for example, adding data through **onDataAdd**), set the [maintainVisibleContentPosition](../reference/apis-arkui/arkui-ts/ts-container-swiper.md#maintainvisiblecontentposition20) attribute to keep the visible content position stable, preventing view jumps caused by data addition or deletion. The attribute's default value is **false**.
 
 When **maintainVisibleContentPosition** is set to **true**, the visible content position remains unchanged when data is inserted or deleted above or before the display area.
 
@@ -735,11 +735,11 @@ struct SwiperExample {
       Column({ space: 12 }) {
         Text("index:" + this.index).fontSize(20)
         Row() {
-          // Add data to the position whose LazyForEach index is 0.
+          // Insert data at index 0 of the LazyForEach data source.
           Button('header data add').height(30).onClick(() => {
             this.data.addData(0, 'header Data');
           })
-          // Delete data from the position whose LazyForEach index is 0.
+          // Delete data at index 0 of the LazyForEach data source.
           Button('header data delete').height(30).onClick(() => {
             this.data.deleteData(0);
           })
@@ -751,5 +751,5 @@ struct SwiperExample {
 }
 ```
 
-![controll](figures/maintainVisibleContentPosition_true.gif)
+![control](figures/maintainVisibleContentPosition_true.gif)
 

en/application-dev/ui/arkts-layout-development-grid-layout.md

@@ -73,35 +73,46 @@ You can customize breakpoints using the [BreakPoints](../reference/apis-arkui/ar
   For example, you can define breakpoints to divide the application width into six ranges, and configure **columns** to specify the number of columns in the container for each breakpoint range.
 
 
-  ```ts
+  ``` TypeScript
   // xxx.ets
   @Entry
   @Component
   struct Index {
+    @State currentBp: string = "unknown"
     @State bgColors: ResourceColor[] =
       ['rgb(213,213,213)', 'rgb(150,150,150)', 'rgb(0,74,175)', 'rgb(39,135,217)', 'rgb(61,157,180)', 'rgb(23,169,141)',
         'rgb(255,192,0)', 'rgb(170,10,33)'];
+
     build() {
-      GridRow({
-        columns: {
-          xs: 2, // 2 columns for xs devices
-          sm: 4, // 4 columns for sm devices
-          md: 8, // 8 columns for md devices
-          lg: 12, // 12 columns for lg devices
-          xl: 12, // 12 columns for xl devices
-          xxl: 12 // 12 columns for xxl devices
-        },
-        breakpoints: {
-          value: ['320vp', '600vp', '840vp', '1440vp', '1600vp'], // Add custom breakpoints '1440vp' and '1600vp' while retaining default breakpoints ['320vp', '600vp', '840vp']. In practice, set breakpoint values based on actual usage scenarios to achieve one-time development for multi-device deployment.
-          reference: BreakpointsReference.WindowSize
+      Column({ space: 6 }) {
+        Text(this.currentBp)
+
+        GridRow({
+          columns: {
+            xs: 2, // 2 columns for xs devices
+            sm: 4, // 4 columns for sm devices
+            md: 8, // 8 columns for md devices
+            lg: 12, // 12 columns for lg devices
+            xl: 12, // 12 columns for xl devices
+            xxl: 12 // 12 columns for xxl devices
+          },
+          breakpoints: {
+            value: ['320vp', '600vp', '840vp', '1440vp', '1600vp'], // Add custom breakpoints '1440vp' and '1600vp' while retaining default breakpoints ['320vp', '600vp', '840vp']. In practice, set breakpoint values based on actual usage scenarios to achieve one-time development for multi-device deployment.
+            reference: BreakpointsReference.WindowSize
+          }
+        }) {
+          ForEach(this.bgColors, (color: ResourceColor, index?: number | undefined) => {
+            GridCol({ span: 1 }) { // All child components span 1 column.
+              Row() {
+                Text(`${index}`)
+              }.width('100%').height('50vp')
+            }.backgroundColor(color)
+          })
         }
-      }) {
-        ForEach(this.bgColors, (color:ResourceColor, index?:number|undefined) => {
-          GridCol({ span: 1 }) { // All child components occupy one column.
-            Row() {
-              Text(`${index}`)
-            }.width("100%").height('50vp')
-          }.backgroundColor(color)
+        .height(200)
+        .border({ color: 'rgb(39,135,217)', width: 2 })
+        .onBreakpointChange((breakPoint) => {
+          this.currentBp = breakPoint
         })
       }
     }
@@ -153,60 +164,68 @@ The **columns** attribute defines the total number of columns in the **GridRow**
 The **columns** attribute supports two data types: number and [GridRowColumnOption](../reference/apis-arkui/arkui-ts/ts-container-gridrow.md#gridrowcolumnoption). You can configure the total number of responsive grid columns using either approach:
 - When **columns** is set to a number, the grid maintains the same number of columns across all device sizes. The following figures demonstrate the layout effects when the grid is configured with 4 and 8 columns respectively, with each child component spanning one column.
 
-  ```ts
+  ``` TypeScript
   // xxx.ets
   @Entry
   @Component
-  struct Index {
+  struct FixedFourColumnGrid {
     @State bgColors: ResourceColor[] =
       ['rgb(213,213,213)', 'rgb(150,150,150)', 'rgb(0,74,175)', 'rgb(39,135,217)', 'rgb(61,157,180)', 'rgb(23,169,141)',
         'rgb(255,192,0)', 'rgb(170,10,33)'];
-    @State currentBp: string = 'unknown';
+
     build() {
-      Row() {
-        GridRow({ columns: 4 }) {
-          ForEach(this.bgColors, (item: ResourceColor, index?: number | undefined) => {
-            GridCol({ span: 1 }) {
-              Row() {
-                Text(`${index}`)
-              }.width('100%').height('50')
-            }.backgroundColor(item)
-          })
+      Column({ space: 6 }) {
+        Text('columns: 4').alignSelf(ItemAlign.Start)
+
+        Row() {
+          GridRow({ columns: 4 }) {
+            ForEach(this.bgColors, (item: ResourceColor, index?: number | undefined) => {
+              GridCol({ span: 1 }) {
+                Row() {
+                  Text(`${index}`)
+                }.width('100%').height('50')
+              }.backgroundColor(item)
+            })
+          }
+          .width('100%').height('100%')
         }
-        .width('100%').height('100%')
+        .height(160)
+        .border({ color: 'rgb(39,135,217)', width: 2 })
+        .width('90%')
       }
-      .height(160)
-      .border({ color: 'rgb(39,135,217)', width: 2 })
-      .width('90%')
     }
   }
   ```
 
-  ```ts
+  ``` TypeScript
   // xxx.ets
   @Entry
   @Component
-  struct Index {
+  struct FixedEightColumnGrid {
     @State bgColors: ResourceColor[] =
       ['rgb(213,213,213)', 'rgb(150,150,150)', 'rgb(0,74,175)', 'rgb(39,135,217)', 'rgb(61,157,180)', 'rgb(23,169,141)',
         'rgb(255,192,0)', 'rgb(170,10,33)'];
-    @State currentBp: string = 'unknown';
+
     build() {
-      Row() {
-        GridRow({ columns: 8 }) {
-          ForEach(this.bgColors, (item: ResourceColor, index?: number | undefined) => {
-            GridCol({ span: 1 }) {
-              Row() {
-                Text(`${index}`)
-              }.width('100%').height('50')
-            }.backgroundColor(item)
-          })
+      Column({ space: 6 }) {
+        Text('columns: 8').alignSelf(ItemAlign.Start)
+
+        Row() {
+          GridRow({ columns: 8 }) {
+            ForEach(this.bgColors, (item: ResourceColor, index?: number | undefined) => {
+              GridCol({ span: 1 }) {
+                Row() {
+                  Text(`${index}`)
+                }.width('100%').height('50')
+              }.backgroundColor(item)
+            })
+          }
+          .width('100%').height('100%')
         }
-        .width('100%').height('100%')
+        .height(160)
+        .border({ color: 'rgb(39,135,217)', width: 2 })
+        .width('90%')
       }
-      .height(160)
-      .border({ color: 'rgb(39,135,217)', width: 2 })
-      .width('90%')
     }
   }
   ```
@@ -256,7 +275,7 @@ The **columns** attribute supports two data types: number and [GridRowColumnOpti
 
 ### Alignment
 
-In the responsive grid layout, you can set the **direction** attribute of **GridRow** to define the direction in which child components are arranged. The options are **GridRowDirection.Row** (from left to right) or **GridRowDirection.RowReverse** (from right to left). An appropriate **direction** value can make the page layout more flexible and meet the design requirements.
+In the responsive grid layout, you can set the **direction** attribute of **GridRow** to define the direction in which child components are arranged. The options are [GridRowDirection](../reference/apis-arkui/arkui-ts/ts-container-gridrow.md#gridrowdirection).Row (from left to right) or [GridRowDirection](../reference/apis-arkui/arkui-ts/ts-container-gridrow.md#gridrowdirection).RowReverse (from right to left). An appropriate **direction** value can make the page layout more flexible and meet the design requirements.
 
 - When child components are arranged from left to right (default):
 
@@ -281,7 +300,7 @@ In the responsive grid layout, you can set the **direction** attribute of **Grid
 
 In the **GridRow** component, **gutter** is used to set the spacing between adjacent child components in the horizontal and vertical directions.
 
-- When **gutter** is set to a number, the number applies to both the horizontal and vertical directions. In the following example, the horizontal and vertical spacing between adjacent child components is set to **10**.
+- When **gutter** is set to a number, both the horizontal and vertical spacing between grid child components are set to the same value. In the following example, the horizontal and vertical spacing between adjacent child components is set to **10**.
 
 
     ```ts
@@ -290,7 +309,7 @@ In the **GridRow** component, **gutter** is used to set the spacing between adja
 
     ![en-us_image_0000001511740476](figures/en-us_image_0000001511740476.png)
 
-- When **gutter** is set to a value of the **GutterOption** type, the **x** attribute of the value indicates the horizontal gutter, and the **y** attribute indicates the vertical gutter.
+- When **gutter** is of type [GutterOption](../reference/apis-arkui/arkui-ts/ts-container-gridrow.md#gutteroption), horizontal and vertical spacing can be set independently: the **x** property defines horizontal spacing, and the **y** property defines vertical spacing.
 
 
     ```ts
@@ -345,16 +364,18 @@ The **span** attribute supports two data types: number and [GridColColumnOption]
 - When **span** is set to a number, the child component occupies the same number of columns across all screen sizes.
 
 
-    ```ts
+    ``` TypeScript
+    // xxx.ets
     @Entry
     @Component
-    struct Index {
+    struct SpanNumberExample {
       @State bgColors: ResourceColor[] =
         ['rgb(213,213,213)', 'rgb(150,150,150)', 'rgb(0,74,175)', 'rgb(39,135,217)', 'rgb(61,157,180)', 'rgb(23,169,141)',
           'rgb(255,192,0)', 'rgb(170,10,33)'];
+
       build() {
         GridRow({ columns: 8 }) {
-          ForEach(this.bgColors, (color:ResourceColor, index?:number|undefined) => {
+          ForEach(this.bgColors, (color: ResourceColor, index?: number | undefined) => {
             GridCol({ span: 2 }) {
               Row() {
                 Text(`${index}`)
@@ -363,8 +384,10 @@ The **span** attribute supports two data types: number and [GridColColumnOption]
             .backgroundColor(color)
           })
         }
+        .border({ color: 'rgb(39,135,217)', width: 2 })
+        .height('150vp')
       }
-    }               
+    }
     ```
 
     ![en-us_image_0000001511421264](figures/en-us_image_0000001511421264.png)
@@ -375,20 +398,38 @@ The **span** attribute supports two data types: number and [GridColColumnOption]
     ```ts
     @Entry
     @Component
-    struct Index {
+    struct SpanColumnOptionExample {
+      @State currentBp: string = "unknown"
       @State bgColors: ResourceColor[] =
         ['rgb(213,213,213)', 'rgb(150,150,150)', 'rgb(0,74,175)', 'rgb(39,135,217)', 'rgb(61,157,180)', 'rgb(23,169,141)',
           'rgb(255,192,0)', 'rgb(170,10,33)'];
+
       build() {
-        GridRow({ columns: 8 }) {
-          ForEach(this.bgColors, (color:ResourceColor, index?:number|undefined) => {
-            GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) {
-              Row() {
-                Text(`${index}`)
-              }.width('100%').height('50vp')
-            }
-            .backgroundColor(color)
+        Column({ space: 6 }) {
+          GridRow({ columns: 8 }) {
+            ForEach(this.bgColors, (color: ResourceColor, index?: number | undefined) => {
+              GridCol({
+                span: {
+                  xs: 1,
+                  sm: 2,
+                  md: 3,
+                  lg: 4
+                }
+              }) {
+                Row() {
+                  Text(`${index}`)
+                }.width('100%').height('50vp')
+              }
+              .backgroundColor(color)
+            })
+          }
+          .border({ color: 'rgb(39,135,217)', width: 2 })
+          .height('150vp')
+          .onBreakpointChange((breakPoint) => {
+            this.currentBp = breakPoint
           })
+
+          Text(this.currentBp)
         }
       }
     }
@@ -428,33 +469,50 @@ Sets the column offset of a child component relative to the previous child compo
 
     ![en-us_image_0000001563060705](figures/en-us_image_0000001563060705.png)
 
-  In this example, the grid is divided into 12 columns. Each child component occupies one column with a two-column offset, resulting in each component and its spacing occupying three columns in total. Four child components fit within a single row.
+  On devices with lg and larger breakpoints, the grid is divided into 12 columns. Each child component occupies one column with a two-column offset, resulting in each component and its spacing occupying three columns in total. Four child components fit within a single row.
 
 - When **offset** is set to the **GridColColumnOption** type, you can configure different offset values for specific screen sizes (xs, sm, md, lg, xl, xxl).
 
 
-    ```ts
+     ``` TypeScript
     @Entry
     @Component
-    struct Index {
+    struct OffsetColumnOptionExample {
+      @State currentBp: string = "unknown"
       @State bgColors: ResourceColor[] =
         ['rgb(213,213,213)', 'rgb(150,150,150)', 'rgb(0,74,175)', 'rgb(39,135,217)', 'rgb(61,157,180)', 'rgb(23,169,141)',
           'rgb(255,192,0)', 'rgb(170,10,33)'];
+
       build() {
-        GridRow({ columns: 12 }) {
-          ForEach(this.bgColors, (color: ResourceColor, index?: number | undefined) => {
-            GridCol({ offset: { xs: 1, sm: 2, md: 3, lg: 4 }, span: 1 }) {
-              Row() {
-                Text('' + index)
-              }.width('100%').height('50vp')
-            }
-            .backgroundColor(color)
+        Column({ space: 6 }) {
+          GridRow({ columns: 12 }) {
+            ForEach(this.bgColors, (color: ResourceColor, index?: number | undefined) => {
+              GridCol({
+                offset: {
+                  xs: 1,
+                  sm: 2,
+                  md: 3,
+                  lg: 4
+                },
+                span: 1
+              }) {
+                Row() {
+                  Text('' + index)
+                }.width('100%').height('50vp')
+              }
+              .backgroundColor(color)
+            })
+          }
+          .height(200)
+          .border({ color: 'rgb(39,135,217)', width: 2 })
+          .onBreakpointChange((breakPoint) => {
+            this.currentBp = breakPoint
           })
+
+          Text(this.currentBp)
         }
-        .height(200)
-        .border({ color: 'rgb(39,135,217)', width: 2 })
       }
-    }         
+    }
     ```
 
     ![en-us_image_0000001562700433](figures/en-us_image_0000001562700433.gif)
@@ -469,29 +527,32 @@ If **order** is set for only some child components, those with explicit **order*
 - When **order** is set to a number, components maintain the same display sequence across all screen sizes.
 
 
-    ```ts
+    ``` TypeScript
     GridRow({ columns: 12 }) {
-      GridCol({ order: 4, span: 1 }) {
-        Row() {
-          Text('1')
-        }.width('100%').height('50vp')
-      }.backgroundColor('rgb(213,213,213)')
-      GridCol({ order: 3, span: 1 }) {
-        Row() {
-          Text('2')
-        }.width('100%').height('50vp')
-      }.backgroundColor('rgb(150,150,150)')
-      GridCol({ order: 2, span: 1 }) {
-        Row() {
-          Text('3')
-        }.width('100%').height('50vp')
-      }.backgroundColor('rgb(0,74,175)')
-      GridCol({ order: 1, span: 1 }) {
-        Row() {
-          Text('4')
-        }.width('100%').height('50vp')
-      }.backgroundColor('rgb(39,135,217)')
-    }
+        GridCol({ order: 4, span: 1 }) {
+          Row() {
+            Text('1')
+          }.width('100%').height('50vp')
+        }.backgroundColor('rgb(213,213,213)')
+
+        GridCol({ order: 3, span: 1 }) {
+          Row() {
+            Text('2')
+          }.width('100%').height('50vp')
+        }.backgroundColor('rgb(150,150,150)')
+
+        GridCol({ order: 2, span: 1 }) {
+          Row() {
+            Text('3')
+          }.width('100%').height('50vp')
+        }.backgroundColor('rgb(0,74,175)')
+
+        GridCol({ order: 1, span: 1 }) {
+          Row() {
+            Text('4')
+          }.width('100%').height('50vp')
+        }.backgroundColor('rgb(39,135,217)')
+      }
     ```
 
     ![en-us_image_0000001511580892](figures/en-us_image_0000001511580892.png)

en/application-dev/ui/arkts-layout-development-relative-layout.md

@@ -26,7 +26,7 @@ A child element does not necessarily adopt the dependency shown above to determi
 
 - Reference boundary: boundary of the current component used for alignment with the anchor.
 
-- Anchor: element relative to which an element's position is specified.
+- Anchor: element used as a reference point for specifying another element's position.
 
 - Alignment mode: how the current element is aligned with the anchor, which can be top-, center-, or bottom-aligned in the vertical direction or left-, center-, and right-aligned in the horizontal direction.
 
@@ -161,45 +161,60 @@ To properly define an anchor, each child element in **RelativeContainer** must h
     build() {
       Row() {
         RelativeContainer() {
-          Row(){Text('row1')}.justifyContent(FlexAlign.Center).width(100).height(100)
+          Row() {
+            Text('row1')
+          }
+          .justifyContent(FlexAlign.Center)
+          .width(100)
+          .height(100)
           .backgroundColor('#a3cf62')
           .alignRules({
-            top: {anchor: "__container__", align: VerticalAlign.Top},
-            left: {anchor: "__container__", align: HorizontalAlign.Start}
+            top: { anchor: "__container__", align: VerticalAlign.Top },
+            left: { anchor: "__container__", align: HorizontalAlign.Start }
           })
           .id("row1")
 
-          Row(){Text('row2')}.justifyContent(FlexAlign.Center).width(100)
+          Row() {
+            Text('row2')
+          }
+          .justifyContent(FlexAlign.Center)
+          .width(100)
           .backgroundColor('#00ae9d')
           .alignRules({
-            top: {anchor: "__container__", align: VerticalAlign.Top},
-            right: {anchor: "__container__", align: HorizontalAlign.End},
-            bottom: {anchor: "row1", align: VerticalAlign.Center},
+            top: { anchor: "__container__", align: VerticalAlign.Top },
+            right: { anchor: "__container__", align: HorizontalAlign.End },
+            bottom: { anchor: "row1", align: VerticalAlign.Center },
           })
           .id("row2")
 
-          Row(){Text('row3')}.justifyContent(FlexAlign.Center).height(100)
+          Row() {
+            Text('row3')
+          }
+          .justifyContent(FlexAlign.Center)
+          .height(100)
           .backgroundColor('#0a59f7')
           .alignRules({
-            top: {anchor: "row1", align: VerticalAlign.Bottom},
-            left: {anchor: "row1", align: HorizontalAlign.Start},
-            right: {anchor: "row2", align: HorizontalAlign.Start}
+            top: { anchor: "row1", align: VerticalAlign.Bottom },
+            left: { anchor: "row1", align: HorizontalAlign.Start },
+            right: { anchor: "row2", align: HorizontalAlign.Start }
           })
           .id("row3")
 
-          Row(){Text('row4')}.justifyContent(FlexAlign.Center)
+          Row() {
+            Text('row4')
+          }.justifyContent(FlexAlign.Center)
           .backgroundColor('#2ca9e0')
           .alignRules({
-            top: {anchor: "row3", align: VerticalAlign.Bottom},
-            left: {anchor: "row1", align: HorizontalAlign.Center},
-            right: {anchor: "row2", align: HorizontalAlign.End},
-            bottom: {anchor: "__container__", align: VerticalAlign.Bottom}
+            top: { anchor: "row3", align: VerticalAlign.Bottom },
+            left: { anchor: "row1", align: HorizontalAlign.Center },
+            right: { anchor: "row2", align: HorizontalAlign.End },
+            bottom: { anchor: "__container__", align: VerticalAlign.Bottom }
           })
           .id("row4")
         }
         .width(300).height(300)
-        .margin({left: 50})
-        .border({width:2, color: "#6699FF"})
+        .margin({ left: 50 })
+        .border({ width: 2, color: "#6699FF" })
       }
       .height('100%')
     }
@@ -342,14 +357,12 @@ struct Index {
 
 ## Aligning Components in Multiple Layouts
 
-You can set components in multiple layout components, such as **Row**, **Column**, **Flex**, and **Stack**, to be aligned based on the **RelativeContainer** rules.
+You can set components in multiple layout components, such as **Row**, **Column**, **Flex**, and **Stack**, to be aligned based on the relative layout rules.
 
   ```ts
 @Entry
 @Component
 struct Index {
-  @State value: number = 0
-
   build() {
     Row() {
 
@@ -391,7 +404,11 @@ struct Index {
         .id("row3")
 
         Stack({ alignContent: Alignment.Bottom }) {
-          Text('First child, show in bottom').width('90%').height('100%').backgroundColor('#a3cf62').align(Alignment.Top)
+          Text('First child, show in bottom')
+            .width('90%')
+            .height('100%')
+            .backgroundColor('#a3cf62')
+            .align(Alignment.Top)
           Text('Second child, show in top').width('70%').height('60%').backgroundColor('#00ae9d').align(Alignment.Top)
         }
         .margin({ top: 5 })
@@ -524,6 +541,7 @@ Chain formation relies on associations between components. Consider a basic hori
 * The chain direction and format are declared in the [chainMode](../reference/apis-arkui/arkui-ts/ts-universal-attributes-location.md#chainmode12) API of the chain header component. The **bias** attribute for all elements within the chain is ignored, with only the chain header element's **bias** attribute taking effect as the bias for the entire chain. The chain header is the first component that satisfies chain formation rules. It starts from the left in horizontal layouts (or from the right in mirrored language layouts), and from the top in vertical layouts.
 * When the combined size of all chain elements exceeds the chain's anchor constraints, the excess space is evenly distributed to both ends of the chain. In [PACKED](../reference/apis-arkui/arkui-ts/ts-universal-attributes-location.md#chainstyle12) chains, you can use [Bias](../reference/apis-arkui/arkui-ts/ts-types.md#bias) to control how the excess space is distributed.
 
+In the following example, nine **Row** components within the container are grouped into three horizontal chains using **alignRules** and **chainMode**. Components **row1**, **row2**, and **row3** are top-aligned and form a SPREAD chain horizontally; components within the chain are evenly distributed between anchors. Components **row4**, **row5**, and **row6** are centered vertically based on the container and form a SPREAD_INSIDE chain horizontally; the first and last components are aligned with anchors, and others are evenly distributed within the chain. Components **row7**, **row8**, and **row9** are bottom-aligned and form a PACKED chain horizontally; components within the chain have no gaps between them.
 
 ```ts
 @Entry

en/application-dev/ui/arkts-navigation-navigation.md

@@ -4,7 +4,7 @@
 <!--Owner: @mayaolll-->
 <!--Designer: @jiangdayuan-->
 <!--Tester: @lxl007-->
-<!--Adviser: @HelloCrease-->
+<!--Adviser: @Brilliantry_Rui-->
 
 Component navigation, implemented using the [Navigation](../reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md) component, is instrumental for managing transitions between navigation pages (**NavDestination** components). It allows for the passing of parameters across various navigation pages and offers flexible navigation stack operations to simplify access to and reuse of pages. This documentation delves into the display modes, routing operations, subpage management, cross-package navigation, and navigation transition effects.
 
@@ -33,13 +33,13 @@ The **Navigation** component uses the **mode** attribute to set the page display
 
 - Single-column mode
 
-  Single-column mode is designed for narrow-screen devices. When route navigation occurs, the entire page is replaced.
+  The single-column mode is designed for narrow-screen devices. When route navigation occurs, the entire page content is replaced.
 
-    **Figure 1** Single-page mode 
+    **Figure 1** Single-column mode 
 
   ![en-us_image_0000001511740532](figures/en-us_image_0000001511740532.png)
 
-  To configure the **Navigation** component for single-column display mode, set **mode** to **NavigationMode.Stack**.
+  To configure the **Navigation** component to single-column mode, set **mode** to **NavigationMode.Stack**.
 
 
   ```ts
@@ -59,23 +59,25 @@ The **Navigation** component uses the **mode** attribute to set the page display
 
   ![en-us_image_0000001562820845](figures/en-us_image_0000001562820845.png)
 
-  To configure the **Navigation** component for split-column display mode, set **mode** to **NavigationMode.Split**.
+  To configure the **Navigation** component to split-column mode, set **mode** to **NavigationMode.Split**.
 
 
-  ```ts
+  ``` TypeScript
+  import { hilog } from '@kit.PerformanceAnalysisKit';
+  const DOMAIN = 0x0000;
   @Entry
   @Component
   struct NavigationExample {
-    @State TooTmp: ToolbarItem = {
+    @State toolTmp: ToolbarItem = {
       'value': "func",
       'icon': "./image/ic_public_highlights.svg",  // Icon resource in the image folder in the current directory.
       'action': () => {}
-    }
-    @Provide('pageInfos') pageInfos: NavPathStack = new NavPathStack()
+    };
+    @Provide('navPathStack') navPathStack: NavPathStack = new NavPathStack();
     private arr: number[] = [1, 2, 3];
 
     @Builder
-    PageMap(name: string) {
+    pageMap(name: string) {
       if (name === "NavDestinationTitle1") {
         pageOneTmp();
       } else if (name === "NavDestinationTitle2") {
@@ -87,7 +89,7 @@ The **Navigation** component uses the **mode** attribute to set the page display
 
     build() {
       Column() {
-        Navigation(this.pageInfos) {
+        Navigation(this.navPathStack) {
           TextInput({ placeholder: 'Search...' })
             .width("90%")
             .height(40)
@@ -105,7 +107,7 @@ The **Navigation** component uses the **mode** attribute to set the page display
                   .fontWeight(500)
                   .textAlign(TextAlign.Center)
                   .onClick(() => {
-                    this.pageInfos.pushPath({ name: "NavDestinationTitle" + item });
+                    this.navPathStack.pushPath({ name: 'NavDestinationTitle' + item });
                   })
               }
             }, (item: number) => item.toString())
@@ -115,7 +117,7 @@ The **Navigation** component uses the **mode** attribute to set the page display
         }
         .title("Main Title")
         .mode(NavigationMode.Split)
-        .navDestination(this.PageMap)
+        .navDestination(this.pageMap)
         .menus([
           {
             value: "", icon: "./image/ic_public_search.svg", action: () => {
@@ -138,7 +140,7 @@ The **Navigation** component uses the **mode** attribute to set the page display
             }
           }
         ])
-        .toolbarConfiguration([this.TooTmp, this.TooTmp, this.TooTmp])
+        .toolbarConfiguration([this.toolTmp, this.toolTmp, this.toolTmp])
       }
       .height('100%')
       .width('100%')
@@ -149,8 +151,8 @@ The **Navigation** component uses the **mode** attribute to set the page display
   // PageOne.ets
   @Component
   export struct pageOneTmp {
-    @Consume('pageInfos') pageInfos: NavPathStack;
-
+    @Consume('navPathStack') navPathStack: NavPathStack;
+    context = this.getUIContext().getHostContext();
     build() {
       NavDestination() {
         Column() {
@@ -158,8 +160,10 @@ The **Navigation** component uses the **mode** attribute to set the page display
         }.width('100%').height('100%')
       }.title("NavDestinationTitle1")
       .onBackPressed(() => {
-        const popDestinationInfo = this.pageInfos.pop(); // Pop the top element out of the navigation stack.
-        console.log('pop' + 'return value' + JSON.stringify(popDestinationInfo));
+        const popDestinationInfo = this.navPathStack.pop(); // Pop the top element out of the navigation stack.
+        // Replace $r('app.string.returnValue') with the string resource file you use.
+        hilog.info(DOMAIN, 'testTag', 'pop', this.context!.resourceManager.getStringSync($r('app.string.returnValue').id),
+          JSON.stringify(popDestinationInfo));
         return true;
       })
     }
@@ -168,8 +172,8 @@ The **Navigation** component uses the **mode** attribute to set the page display
   // PageTwo.ets
   @Component
   export struct pageTwoTmp {
-    @Consume('pageInfos') pageInfos: NavPathStack;
-
+    @Consume('navPathStack') navPathStack: NavPathStack;
+    context = this.getUIContext().getHostContext();
     build() {
       NavDestination() {
         Column() {
@@ -177,8 +181,10 @@ The **Navigation** component uses the **mode** attribute to set the page display
         }.width('100%').height('100%')
       }.title("NavDestinationTitle2")
       .onBackPressed(() => {
-        const popDestinationInfo = this.pageInfos.pop(); // Pop the top element out of the navigation stack.
-        console.log('pop' + 'return value' + JSON.stringify(popDestinationInfo));
+        const popDestinationInfo = this.navPathStack.pop(); // Pop the top element out of the navigation stack.
+        // Replace $r('app.string.returnValue') with the string resource file you use.
+        hilog.info(DOMAIN, 'testTag', 'pop', this.context!.resourceManager.getStringSync($r('app.string.returnValue').id),
+          JSON.stringify(popDestinationInfo));
         return true;
       })
     }
@@ -187,8 +193,8 @@ The **Navigation** component uses the **mode** attribute to set the page display
   // PageThree.ets
   @Component
   export struct pageThreeTmp {
-    @Consume('pageInfos') pageInfos: NavPathStack;
-
+    @Consume('navPathStack') navPathStack: NavPathStack;
+    context = this.getUIContext().getHostContext();
     build() {
       NavDestination() {
         Column() {
@@ -196,8 +202,10 @@ The **Navigation** component uses the **mode** attribute to set the page display
         }.width('100%').height('100%')
       }.title("NavDestinationTitle3")
       .onBackPressed(() => {
-        const popDestinationInfo = this.pageInfos.pop(); // Pop the top element out of the navigation stack.
-        console.log('pop' + 'return value' + JSON.stringify(popDestinationInfo));
+        const popDestinationInfo = this.navPathStack.pop(); // Pop the top element out of the navigation stack.
+        // Replace $r('app.string.returnValue') with the string resource file you use.
+        hilog.info(DOMAIN, 'testTag', 'pop', this.context!.resourceManager.getStringSync($r('app.string.returnValue').id),
+          JSON.stringify(popDestinationInfo));
         return true;
       })
     }
@@ -256,44 +264,52 @@ The menu bar is in the upper right corner of the **Navigation** component. You c
 
 ![menu-bar-2](figures/menu-bar-2.jpg)
 
-```ts
-let TooTmp: NavigationMenuItem = {'value': "", 'icon': "./image/ic_public_highlights.svg", 'action': ()=> {}}
-Navigation() {
-  // ...
-}
-.menus([TooTmp,
-  TooTmp,
-  TooTmp])
-```
+   ``` TypeScript
+   let toolTmp: NavigationMenuItem  = {
+     'value': 'func',
+     'icon': 'ets/pages/navigation/template1/image/ic_public_add.svg',
+     'action': () => {}
+   };
+   // ...
+         Navigation(this.navPathStack) {
+           // ...
+         }
+         .menus([toolTmp, toolTmp, toolTmp])
+   ```
 
 You can also reference images in the **resources** folder.
 
-```ts
-let TooTmp: NavigationMenuItem = {'value': "", 'icon': "resources/base/media/ic_public_highlights.svg", 'action': ()=> {}}
-Navigation() {
-  // ...
-}
-.menus([TooTmp,
-  TooTmp,
-  TooTmp])
-```
+   ``` TypeScript
+   let toolTmp: NavigationMenuItem  = {
+     'value': 'func',
+     'icon': 'resources/base/media/ic_public_add.svg',
+     'action': () => {}
+   };
+   // ...
+         Navigation(this.navPathStack) {
+           // ...
+         }
+         .menus([toolTmp, toolTmp, toolTmp])
+   ```
 
 **Figure 6** Menu bar with four icons 
 
 ![menu-bar](figures/menu-bar.jpg)
 
-```ts
-let TooTmp: NavigationMenuItem = {'value': "", 'icon': "./image/ic_public_highlights.svg", 'action': ()=> {}}
-Navigation() {
-  // ...
-}
-// In portrait mode, the toolbar shows a maximum of five icons, with any additional icons placed under an automatically generated More icon.
-.menus([TooTmp,
-  TooTmp,
-  TooTmp,
-  TooTmp])
-```
-
+   
+   ``` TypeScript
+   let toolTmp: NavigationMenuItem  = {
+     'value': 'func',
+     'icon': 'ets/pages/navigation/template1/image/ic_public_add.svg',
+     'action': () => {}
+   };
+   // ...
+         Navigation(this.navPathStack) {
+           // ...
+         }
+         // In portrait mode, the toolbar shows a maximum of three icons, with any additional icons placed under an automatically generated More icon.
+         .menus([toolTmp, toolTmp, toolTmp, toolTmp])
+   ```
 
 ## Setting the Toolbar
 
@@ -304,14 +320,19 @@ Use the [toolbarConfiguration](../reference/apis-arkui/arkui-ts/ts-basic-compone
 
 ![free3](figures/free3.jpg)
 
-```ts
-let TooTmp: ToolbarItem = {'value': "func", 'icon': "./image/ic_public_highlights.svg", 'action': ()=> {}};
-let TooBar: ToolbarItem[] = [TooTmp,TooTmp,TooTmp];
-Navigation() {
-  // ...
-}
-.toolbarConfiguration(TooBar)
-```
+   ``` TypeScript
+   let toolTmp: ToolbarItem = {
+     'value': 'func',
+     'icon': 'ets/pages/navigation/template1/image/ic_public_highlights.svg',
+     'action': () => {}
+   };
+   let tooBar: ToolbarItem[] = [toolTmp,toolTmp,toolTmp];
+   // ...
+         Navigation(this.navPathStack) {
+           // ...
+         }
+         .toolbarConfiguration(tooBar)
+   ```
 
 ## Routing Operations
 
@@ -329,7 +350,7 @@ Since API version 12, the navigation controller can be inherited. You can custom
 @Entry
 @Component
 struct Index {
-  // Create a navigation controller object and pass it to the Navigation component.
+  //Create a navigation controller object and pass it to the Navigation component.
   pageStack: NavPathStack = new NavPathStack();
 
   build() {
@@ -342,7 +363,7 @@ struct Index {
 
 ### Page Navigation
 
-**NavPathStack** implements the following types of page navigation through **Push** related APIs:
+**NavPathStack** uses push-related APIs (such as [pushPath](../reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md#pushpath10), [pushPathByName](../reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md#pushpathbyname10), [pushDestination](../reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md#pushdestination11), and [pushDestinationByName](../reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md#pushdestinationbyname11)) to implement page redirection. Page redirection can be classified into the following types:
 
 1. Normal navigation: Navigation is conducted by page name and allows for passing of **param**.
 
@@ -355,7 +376,7 @@ struct Index {
 
     ```ts
     this.pageStack.pushPathByName('PageOne', "PageOne Param", (popInfo) => {
-      console.log('Pop page name is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result));
+      console.info('Pop page name is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result));
     });
     ```
 
@@ -378,7 +399,7 @@ struct Index {
 
 ### Page Return
 
-**NavPathStack** implements the page return feature through **Pop** related APIs.
+**NavPathStack** implements the page return feature through pop-related APIs, including [pop](../reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md#pop10), [popToName](../reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md#poptoname10), [popToIndex](../reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md#poptoindex10), and [clear](../reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md#clear10).
 
 ```ts
 // Return to the previous page.
@@ -393,7 +414,7 @@ this.pageStack.clear();
 
 ### Page Replacement
 
-**NavPathStack** implements the page replacement feature through **Replace** related APIs.
+**NavPathStack** provides replace-related APIs (such as [replacePath](../reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md#replacepath11), [replacePathByName](../reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md#replacepathbyname11), and [replaceDestination](../reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md#replacedestination18)) to implement the page replacement functionality.
 
 ```ts
 // Replace the top page of the stack with PageOne.
@@ -410,7 +431,7 @@ this.pageStack.replaceDestination({name: "PageOne", param: "PageOne Param"})
 
 ### Page Deletion
 
-**NavPathStack** implements the page deletion feature through **Remove** related APIs.
+**NavPathStack** provides remove-related APIs (such as [removeByName](../reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md#removebyname11), [removeByIndexes](../reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md#removebyindexes11), and [removeByNavDestinationId](../reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md#removebynavdestinationid12)) to remove pages from the navigation stack.
 
 ```ts
 // Remove all pages whose name is PageOne from the stack.
@@ -423,7 +444,7 @@ this.pageStack.removeByNavDestinationId("1");
 
 ### Page Moving
 
-**NavPathStack** implements the page moving feature through **Move** related APIs.
+**NavPathStack** provides move-related APIs (such as [moveToTop](../reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md#movetotop10) and [moveIndexToTop](../reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md#moveindextotop10)) to move a specific page to the top of the navigation stack.
 
 ```ts
 // Move the page named PageOne to the top of the stack.
@@ -470,16 +491,16 @@ struct DemoNavDestination {
     }
     .onResult((param: Object) => {
       if (param instanceof NavParam) {
-        console.log('TestTag', 'get NavParam, its desc: ' + (param as NavParam).desc);
+        console.info('TestTag', 'get NavParam, its desc: ' + (param as NavParam).desc);
         return;
       }
-      console.log('TestTag', 'param not instance of NavParam');
+      console.info('TestTag', 'param not instance of NavParam');
     })
   }
 }
 ```
 
-For other use cases, you can retrieve parameters from specific pages by actively calling the get-related APIs of **NavPathStack**.
+For other service scenarios, you can proactively call the getter APIs of **NavPathStack** (such as [getAllPathName](../reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md#getallpathname10), [getParamByIndex](../reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md#getparambyindex10), [getParamByName](../reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md#getparambyname10), and [getIndexByName](../reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md#getindexbyname10)) to obtain parameters from specific pages.
 
 ```ts
 // Obtain all page names in the stack.
@@ -504,16 +525,16 @@ this.pageStack.getIndexByName("PageOne");
 
 > **NOTE**
 >
-> Regardless of which callback is invoked, the routing stack has already changed when the callback is executed.
+> Regardless of which callback is invoked, the route stack has already changed when the callback is executed.
 
-You can implement route interception and redirection capabilities by modifying the routing stack in the **willShow** callback.
+You can implement route interception and redirection capabilities by modifying the route stack within the **willShow** callback.
 
 ```ts
 this.pageStack.setInterception({
   willShow: (from: NavDestinationContext | "navBar", to: NavDestinationContext | "navBar",
     operation: NavigationOperation, animated: boolean) => {
     if (typeof to === "string") {
-      console.log("target page is navigation home page.");
+      console.info("target page is navigation home page.");
       return;
     }
     // Redirect navigation intended for PageTwo to PageOne.
@@ -676,18 +697,18 @@ To facilitate the decoupling of components from pages, custom components within
    // Used in UIAbility
    import { UIContext, uiObserver } from '@kit.ArkUI';
   
-   // callBackFunc is a callback defined by you.
-   function callBackFunc(info: uiObserver.NavDestinationSwitchInfo) {}
-   uiObserver.on('navDestinationSwitch', this.context, callBackFunc);
+   // callback is a callback defined by you.
+   function callbackFunc(info: uiObserver.NavDestinationSwitchInfo) {}
+   uiObserver.on('navDestinationSwitch', this.context, callbackFunc);
   
    // The getUIContext() API of the window can be used to obtain the corresponding UIContent.
    uiContext: UIContext | null = null;
-   uiObserver.on('navDestinationSwitch', this.uiContext, callBackFunc);
+   uiObserver.on('navDestinationSwitch', this.uiContext, callbackFunc);
   ```
 
 ## Page Transition
 
-The **Navigation** component provides default transition animations for switching between pages. These animations are activated when operations are performed using the navigation controller, producing different transition effects. Note that for pages in dialog mode, the default transition animations are available only since API version 13. The **Navigation** component also offers advanced features such as disabling the default transitions and implementing custom transitions as well as shared element transitions.
+The **Navigation** component provides default transition animations for switching between pages. These animations are activated when operations are performed using the navigation controller, producing different transition effects. Note that for pages in dialog mode, the default transition animations are available only since API version 13. The **Navigation** component also offers advanced features such as disabling the default transitions and implementing custom transitions as well as shared element transitions. The default animation duration is determined by physical curve parameters and varies across different devices.
 
 ### Disabling Transitions
 
@@ -732,6 +753,11 @@ The **Navigation** component provides default transition animations for switchin
 
   For details about the sample code, see [Example 2: Setting a Custom Transitions for the NavDestination Component](../reference/apis-arkui/arkui-ts/ts-basic-components-navdestination.md#example-2-setting-a-custom-transitions-for-the-navdestination-component).
 
+- How to Use
+  1. [customNavContentTransition](../reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md#customnavcontenttransition11) controls all pages within the **Navigation** component and provides unified transition animation effects.
+  2. [customTransition](../reference/apis-arkui/arkui-ts/ts-basic-components-navdestination.md#customtransition15) controls the transition effect for individual pages.
+  3. When both [customNavContentTransition](../reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md#customnavcontenttransition11) and [customTransition](../reference/apis-arkui/arkui-ts/ts-basic-components-navdestination.md#customtransition15) are used, **customNavContentTransition** takes precedence.
+
 ### Defining a Shared Element Transition
 
 You can implement shared element transitions between navigation destination pages using [geometryTransition](../reference/apis-arkui/arkui-ts/ts-transition-animation-geometrytransition.md#geometrytransition). Ensure that the default transition animations are disabled for pages configured with shared element transitions.
@@ -742,6 +768,7 @@ You can implement shared element transitions between navigation destination page
     NavDestination() {
       Column() {
         // ...
+        // Replace $r('app.media.startIcon') with the resource file you use.
         Image($r('app.media.startIcon'))
         .geometryTransition('sharedId')
         .width(100)
@@ -754,6 +781,7 @@ You can implement shared element transitions between navigation destination page
     NavDestination() {
       Column() {
         // ...
+        // Replace $r('app.media.startIcon') with the resource file you use.
         Image($r('app.media.startIcon'))
         .geometryTransition('sharedId')
         .width(200)
@@ -782,19 +810,9 @@ You can implement shared element transitions between navigation destination page
     .title('FromPage')
     ```
 
-## Cross-Package Dynamic Routing
-
-Using static imports for page routing can lead to coupling between different modules and prolonged home page loading times.
+## Cross-Package Routing
 
-The purpose of dynamic routing is to allow multiple modules (HARs/HSPs) to reuse the same business logic, with decoupling between different modules and integration of routing functionality.
-
-**Advantages of dynamic routing**
-
-- In addition to the URL for navigation, you can configure various information, such as the default orientation (landscape or portrait) and whether authentication is required. The configuration is processed in a unified manner during routing
-- You can assign a name to each routing page and navigate by name instead of file path.
-- Dynamic imports (on-demand loading) can be used to load pages to prevent the first page from loading a large amount of code, which can cause stuttering.
-
-Dynamic routing provides two modes: [System Routing Table](#system-routing-table) and [Custom Routing Table](#custom-routing-table).
+The system provides two implementation modes: [system routing table](#system-routing-table) and [custom routing table](#custom-routing-table).
 
 - The system routing table is easier to use than the custom routing table. It only requires adding the corresponding page navigation configuration items to implement page navigation.
 
@@ -802,6 +820,15 @@ Dynamic routing provides two modes: [System Routing Table](#system-routing-table
 
 The custom route table and system route table can be used together.
 
+### Routing Table Capability Comparison
+
+Different routing modes meet different requirements. Usability and scalability should be balanced based on project characteristics.
+
+| Routing Mode    | Cross-Package Redirection Capability            | Scalability    | Usability                              |
+| ------------ | ------------------------ | ------------ | ------------------------------------ |
+| [System routing table](#system-routing-table)  | No need to import page files before redirection; pages are dynamically loaded on demand| Moderate| High; the system automatically maintains the routing table      |
+| [Custom routing table](#custom-routing-table)| Page files must be imported before redirection| High| Moderate; you must maintain the routing table manually|
+
 ### System Routing Table
 
 The system routing table is an implementation of dynamic routing. **Navigation** supports the system routing table for dynamic routing since API version 12. Each service module ([HSP](../quick-start/in-app-hsp.md) or [HAR](../quick-start/har-package.md)) requires an individual **route_map.json** file. When routing is triggered, the application only needs to pass the name of the page that needs to be routed through the routing API provided by **NavPathStack**. The system then automatically completes the dynamic loading of the target module, page component construction, and route redirection. This way, module decoupling is achieved at the development level. The system routing table supports the Emulator but not the Previewer. The main steps are as follows:
@@ -884,9 +911,24 @@ The system routing table is an implementation of dynamic routing. **Navigation**
 
 ### Custom Routing Table
 
-The custom routing table is also an implementation of dynamic routing. You can implement cross-package dynamic routing through a <!--RP1-->[custom routing table](https://gitcode.com/openharmony/applications_app_samples/tree/master/code/BasicFeature/ApplicationModels/DynamicRouter)<!--RP1End-->.
+A custom routing table is implemented by configuring the Builder function for the [navDestination](../reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md#navdestination10) attribute of **Navigation**. This approach requires importing page modules, which can be done through either static or dynamic import. The differences between these two methods are as follows.
+
+| Import Mode| Module Coupling  | Implementation Complexity| Performance                                    |
+| ---------- | -------------- | ---------- | ---------------------------------------- |
+| Dynamic import| Low coupling between modules| High| Excellent; pages are loaded on demand, with target pages loaded just before navigation|
+| Static import| High coupling between modules| Low| Average; all dependent pages are loaded during initialization|
+
+**Dynamic Import (Recommended)**
 
-**Implementation:**
+Dynamic import enables reuse of service logic across multiple modules (HAR/HSP) to achieve service module decoupling. In addition, it supports route function extension and integration while allowing on-demand loading. For implementation details, see <!--RP1-->the [dynamic route example](https://gitcode.com/openharmony/applications_app_samples/tree/master/code/BasicFeature/ApplicationModels/DynamicRouter)<!--RP1End-->.
+
+Dynamic import offers the following advantages:
+
+- Beyond the navigation URL, you can configure extended information in route definitions, such as the default orientation (landscape or portrait) and authentication requirements, which is processed during route navigation.
+- You can assign a name to each routing page and navigate by name instead of file path.
+- Dynamic imports (on-demand loading) can be used to load pages to prevent the first page from loading a large amount of code, which can cause stuttering.
+
+Implementation solution:
 
 1. Define page navigation configuration items.
    - Use resource files for definitions and use the [@ohos.resourceManager](../reference/apis-localization-kit/js-apis-resource-manager.md) module to parse the resource files at runtime.
@@ -894,6 +936,108 @@ The custom routing table is also an implementation of dynamic routing. You can i
 2. Use [dynamic import](../arkts-utils/arkts-dynamic-import.md) to load the module containing the target page at runtime. Once the module is loaded, call a method within the module that uses **import** to load and display the target page, then return the **Builder** function defined after the page has finished loading.
 3. Execute the **Builder** function loaded in step 2 on the [navDestination](../reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md#navdestination10) attribute of the **Navigation** component to navigate to the target page.
 
+**Static Import**
+
+Static import is straightforward to implement. However, using static imports for routing navigation creates dependency coupling between modules and increases the initial page loading time. Whenever possible, use either dynamic imports with a [custom routing table](#custom-routing-table) or the [system routing table](#system-routing-table) instead.
+
+Implementation solution:
+
+``` TypeScript
+import { hilog } from '@kit.PerformanceAnalysisKit';
+const DOMAIN = 0x0000;
+@Entry
+@Component
+struct NavigationExample {
+  @Provide('navPathStack') navPathStack: NavPathStack = new NavPathStack();
+  private arr: number[] = [1, 2];
+
+  @Builder
+  pageMap(name: string) {
+    if (name === "NavDestinationTitle1") {
+      pageOneTmp();
+    } else if (name === "NavDestinationTitle2") {
+      pageTwoTmp();
+    }
+  }
+
+  build() {
+    Column() {
+      Navigation(this.navPathStack) {
+        TextInput({ placeholder: 'Search...' })
+          .width("90%")
+          .height(40)
+
+        List({ space: 12 }) {
+          ForEach(this.arr, (item: number) => {
+            ListItem() {
+              Text("Page" + item)
+                .width("100%")
+                .height(72)
+                .borderRadius(24)
+                .fontSize(16)
+                .fontWeight(500)
+                .textAlign(TextAlign.Center)
+                .onClick(() => {
+                  this.navPathStack.pushPath({ name: 'NavDestinationTitle' + item });
+                })
+            }
+          }, (item: number) => item.toString())
+        }
+        .width("90%")
+        .margin({ top: 12 })
+      }
+      // Replace $r('app.string.mainTitle') with the string resource file you use.
+      .title($r('app.string.mainTitle'))
+      .navDestination(this.pageMap)
+      .mode(NavigationMode.Split)
+    }
+    .height('100%')
+    .width('100%')
+  }
+}
+
+@Component
+export struct pageTwoTmp {
+  @Consume('navPathStack') navPathStack: NavPathStack;
+  context = this.getUIContext().getHostContext();
+  build() {
+    NavDestination() {
+      Column() {
+        Text("NavDestinationContent2")
+      }.width('100%').height('100%')
+    }.title("NavDestinationTitle2")
+    .onBackPressed(() => {
+      const popDestinationInfo = this.navPathStack.pop(); // Pop the top element out of the navigation stack.
+      // Replace $r('app.string.returnValue') with the string resource file you use.
+      hilog.info(DOMAIN, 'testTag', 'pop', this.context!.resourceManager.getStringSync($r('app.string.returnValue').id),
+        JSON.stringify(popDestinationInfo));
+      return true;
+    })
+  }
+}
+
+// pageOne.ets
+@Component
+export struct pageOneTmp {
+  @Consume('navPathStack') navPathStack: NavPathStack;
+  context = this.getUIContext().getHostContext();
+  build() {
+    NavDestination() {
+      Column() {
+        Text("NavDestinationContent1")
+      }.width('100%').height('100%')
+    }.title("NavDestinationTitle1")
+    .onBackPressed(() => {
+      const popDestinationInfo = this.navPathStack.pop(); // Pop the top element out of the navigation stack.
+      // Replace $r('app.string.returnValue') with the string resource file you use.
+      hilog.info(DOMAIN, 'testTag', 'pop', this.context!.resourceManager.getStringSync($r('app.string.returnValue').id),
+        JSON.stringify(popDestinationInfo));
+      return true;
+    })
+  }
+}
+```
+
 ## Navigation Examples
 
 ### Creating a Navigation Home Page
@@ -908,12 +1052,12 @@ The implementation procedure is as follows:
 @Entry
 @Component
 struct NavigationDemo {
-  @Provide('pathInfos') pathInfos: NavPathStack = new NavPathStack();
+  @Provide('navPathStack') navPathStack: NavPathStack = new NavPathStack();
   private listArray: Array<string> = ['WLAN', 'Bluetooth', 'Personal Hotspot', 'Connect & Share'];
 
   build() {
     Column() {
-      Navigation(this.pathInfos) {
+      Navigation(this.navPathStack) {
         TextInput({ placeholder: 'Search by keyword' })
           .width('90%')
           .height(40)
@@ -965,7 +1109,7 @@ struct NavigationDemo {
             }
             .width('100%')
             .onClick(() => {
-              this.pathInfos.pushPathByName(`${item}`, 'Details page parameters'); // Push the navigation destination page specified by name, with the data specified by param, to the routing stack.
+              this.navPathStack.pushPathByName(`${item}`, 'Details page parameters'); // Push the navigation destination page specified by name, with the data specified by param, to the navigation stack.
             })
           }, (item: string): string => item)
         }
@@ -1003,9 +1147,9 @@ export function PageOneBuilder(name: string, param: string) {
 
 @Component
 export struct PageOne {
-  pathInfos: NavPathStack = new NavPathStack();
-  name: String = '';
-  @State value: String = '';
+  navPathStack: NavPathStack = new NavPathStack();
+  name: string = '';
+  @State value: string = '';
 
   build() {
     NavDestination() {
@@ -1034,14 +1178,14 @@ export struct PageOne {
           .margin({ top: 50 })
           .onClick(() => {
             // Pop the top element of the routing stack and return to the previous page.
-            this.pathInfos.pop();
+            this.navPathStack.pop();
           })
       }
       .size({ width: '100%', height: '100%' })
     }.title(`${this.name}`)
     .onReady((ctx: NavDestinationContext) => {
       // Obtain the current navigation controller via NavDestinationContext.
-      this.pathInfos = ctx.pathStack;
+      this.navPathStack = ctx.pathStack;
     })
   }
 }
@@ -1062,8 +1206,8 @@ export function PageTwoBuilder(name: string) {
 
 @Component
 export struct PageTwo {
-  pathInfos: NavPathStack = new NavPathStack();
-  name: String = '';
+  navPathStack: NavPathStack = new NavPathStack();
+  name: string = '';
   private listArray: Array<string> = ['Projection', 'Print', 'VPN', 'Private DNS', 'NFC'];
 
   build() {
@@ -1114,7 +1258,7 @@ export struct PageTwo {
             }
             .width('100%')
             .onClick(() => {
-              this.pathInfos.pushPathByName(`${item}`, 'Parameters');
+              this.navPathStack.pushPathByName(`${item}`, 'Parameters');
             })
           }, (item: string): string => item)
         }
@@ -1127,7 +1271,7 @@ export struct PageTwo {
     }.title(`${this.name}`)
     .onReady((ctx: NavDestinationContext) => {
       // Obtain the current navigation controller via NavDestinationContext.
-      this.pathInfos = ctx.pathStack;
+      this.navPathStack = ctx.pathStack;
     })
   }
 }

en/application-dev/ui/arkts-routing.md

@@ -4,7 +4,7 @@
 <!--Owner: @mayaolll-->
 <!--Designer: @jiangdayuan-->
 <!--Tester: @lxl007-->
-<!--Adviser: @HelloCrease-->
+<!--Adviser: @Brilliantry_Rui-->
 
 
 Page routing refers to the redirection and data transfer between different pages in an application. It can be implemented through APIs of the **Router** module. Through different URLs, you can easily navigate users through pages. This document outlines the key features of the **Router** module, including: [Page Redirection](#page-redirection), [Page Return](#page-return), [Adding a Confirmation Dialog Box Before Page Return](#adding-a-confirmation-dialog-box-before-page-return), and [Named Route](#named-route).
@@ -15,23 +15,23 @@ Page routing refers to the redirection and data transfer between different pages
 
 ## Page Redirection
 
-Page redirection is an important part of the development process. When using an application, you usually need to jump between different pages, and sometimes you need to pass data from one page to another.
+Page redirection is a fundamental part of development. Users often need to move between different pages within an application, and sometimes data must be passed from one page to another.
 
   **Figure 1** Page redirection 
 ![router-jump-to-detail](figures/router-jump-to-detail.gif)
 
-The Router module provides two redirection modes: [pushUrl](../reference/apis-arkui/arkts-apis-uicontext-router.md#pushurl) and [replaceUrl](../reference/apis-arkui/arkts-apis-uicontext-router.md#replaceurl). Whether the target page will replace the current page depends on the mode used.
+The **Router** module provides two redirection modes: [pushUrl](../reference/apis-arkui/arkts-apis-uicontext-router.md#pushurl) and [replaceUrl](../reference/apis-arkui/arkts-apis-uicontext-router.md#replaceurl). Whether the target page will replace the current page depends on the mode used.
 
-- pushUrl: The target page is not replaced with the current page. Instead, the target page is pushed to the page stack. In this way, the status of the current page can be retained, and the current page can be returned by pressing the back button or calling the [back](../reference/apis-arkui/arkts-apis-uicontext-router.md#back) method.
+- **pushUrl**: The target page does not replace the current page. Instead, it is pushed onto the page stack. In this mode, the state of the current page is retained, and users can return to the current page by pressing the back button or calling the [back](../reference/apis-arkui/arkts-apis-uicontext-router.md#back) API.
 
-- replaceUrl: The target page replaces the current page and destroys the current page. In this mode, the resources of the current page can be released, and users cannot return to the current page.
+- **replaceUrl**: The target page replaces the current page, and the current page is destroyed. In this mode, the resources of the current page are released, and users cannot return to the current page.
 
 >**NOTE**
 >
 >- When creating a page, configure the route to this page by following instructions in <!--RP1-->[Building the Second Page](../quick-start/start-with-ets-stage.md#building-the-second-page)<!--RP1End-->.
 >
 >
->- The maximum capacity of a page stack is 32 pages. If the number of pages exceeds the limit, you can call the [clear](../reference/apis-arkui/arkts-apis-uicontext-router.md#clear) method to clear the historical page stack and release the memory space.
+>- The maximum capacity of a page stack is 32 pages. If this limit is exceeded, the [clear](../reference/apis-arkui/arkts-apis-uicontext-router.md#clear) API can be called to clear the historical page stack and free the memory.
 
 The **Router** module also provides two instance modes: **Standard** and **Single**. Depending on the mode, the target URL is mapped to one or more instances.
 
@@ -42,17 +42,26 @@ The **Router** module also provides two instance modes: **Standard** and **Singl
 - Scenario 1: There is a home page (**Home**) and a details page (**Detail**). You want to click an offering on the home page to go to the details page. In addition, the home page needs to be retained in the page stack so that the status can be restored when the page is returned. In this scenario, you can use the **pushUrl** API and use the **Standard** instance mode (which can also be omitted).
 
   ```ts
-  // On the Home page
-  onJumpClick(): void {
-    this.getUIContext().getRouter().pushUrl({
-      url: 'pages/Detail' // Target URL.
-    }, router.RouterMode.Standard, (err) => {
-      if (err) {
-        console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);
-        return;
-      }
-      console.info('Invoke pushUrl succeeded.');
-    });
+  import { router } from '@kit.ArkUI';
+
+  @Entry
+  @Component
+  struct Index {
+    // On the Home page
+    onJumpClick(): void {
+      this.getUIContext().getRouter().pushUrl({
+        url: 'pages/Detail' // Target URL.
+      }, router.RouterMode.Standard, (err) => {
+        if (err) {
+          console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);
+          return;
+        }
+        console.info('Invoke pushUrl succeeded.');
+      });
+    }
+
+    build() {
+    }
   }
   ```
 
@@ -63,17 +72,26 @@ The **Router** module also provides two instance modes: **Standard** and **Singl
 - Scenario 2: There is a login page (**Login**) and a personal center page (**Profile**). After a user successfully logs in from the **Login** page, the **Profile** page is displayed. At the same time, the **Login** page is destroyed, and the application exits when the back button is pressed. In this scenario, you can use the **replaceUrl** API and use the Standard instance mode (which can also be omitted).
 
   ```ts
-  // On the Login page
-  onJumpClick(): void {
-    this.getUIContext().getRouter().replaceUrl({
-      url: 'pages/Profile' // Target URL.
-    }, router.RouterMode.Standard, (err) => {
-      if (err) {
-        console.error(`Invoke replaceUrl failed, code is ${err.code}, message is ${err.message}`);
-        return;
-      }
-      console.info('Invoke replaceUrl succeeded.');
-    })
+  import { router } from '@kit.ArkUI';
+
+  @Entry
+  @Component
+  struct Index {
+    // On the Login page
+    onJumpClick(): void {
+      this.getUIContext().getRouter().replaceUrl({
+        url: 'pages/Profile' // Target URL.
+      }, router.RouterMode.Standard, (err) => {
+        if (err) {
+          console.error(`Invoke replaceUrl failed, code is ${err.code}, message is ${err.message}`);
+          return;
+        }
+        console.info('Invoke replaceUrl succeeded.');
+      })
+    }
+
+    build() {
+    }
   }
   ```
 
@@ -84,34 +102,52 @@ The **Router** module also provides two instance modes: **Standard** and **Singl
 - Scenario 3: There is a **Setting** page and a **Theme** page. After a theme option on the **Setting** page is clicked, the **Theme** page is displayed. Only one **Theme** page exists in the page stack at the same time. When the back button is clicked on the **Theme** page, the **Setting** page is displayed. In this scenario, you can use the **pushUrl** API and use the **Single** instance mode.
 
   ```ts
-  // On the Setting page
-  onJumpClick(): void {
-    this.getUIContext().getRouter().pushUrl({
-      url: 'pages/Theme' // Target URL.
-    }, router.RouterMode.Single, (err) => {
-      if (err) {
-        console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);
-        return;
-      }
-      console.info('Invoke pushUrl succeeded.');
-    });
+  import { router } from '@kit.ArkUI';
+
+  @Entry
+  @Component
+  struct Index {
+    // On the Setting page
+    onJumpClick(): void {
+      this.getUIContext().getRouter().pushUrl({
+        url: 'pages/Theme' // Target URL.
+      }, router.RouterMode.Single, (err) => {
+        if (err) {
+          console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);
+          return;
+        }
+        console.info('Invoke pushUrl succeeded.');
+      });
+    }
+
+    build() {
+    }
   }
   ```
 
 - Scenario 4: There is a search result list page (**SearchResult**) and a search result details page (**SearchDetail**). You want to click a result on the **SearchResult** page to go to the **SearchDetail** page. In addition, if the result has been viewed before, clicking the result displays the existing details page, instead of creating a new one. In this scenario, you can use the **replaceUrl** API and use the **Single** instance mode.
 
   ```ts
-  // On the SearchResult page
-  onJumpClick(): void {
-    this.getUIContext().getRouter().replaceUrl({
-      url: 'pages/SearchDetail' // Target URL.
-    }, router.RouterMode.Single, (err) => {
-      if (err) {
-        console.error(`Invoke replaceUrl failed, code is ${err.code}, message is ${err.message}`);
-        return;
-      }
-      console.info('Invoke replaceUrl succeeded.');
-    })
+  import { router } from '@kit.ArkUI';
+
+  @Entry
+  @Component
+  struct Index {
+    // On the SearchResult page
+    onJumpClick(): void {
+      this.getUIContext().getRouter().replaceUrl({
+        url: 'pages/SearchDetail' // Target URL.
+      }, router.RouterMode.Single, (err) => {
+        if (err) {
+          console.error(`Invoke replaceUrl failed, code is ${err.code}, message is ${err.message}`);
+          return;
+        }
+        console.info('Invoke replaceUrl succeeded.');
+      })
+    }
+
+    build() {
+    }
   }
   ```
 
@@ -152,7 +188,7 @@ onJumpClick(): void {
 }
 ```
 
-On the target page, you can call the [getParams](../reference/apis-arkui/arkts-apis-uicontext-router.md#getparams) method of the Router module to obtain the passed parameters. Example:
+On the target page, you can call the [getParams](../reference/apis-arkui/arkts-apis-uicontext-router.md#getparams) API of the **Router** module to obtain the passed parameters. Example:
 
 
 ```ts
@@ -208,7 +244,7 @@ You can use any of the following methods to return to a page:
 
   ```ts
   this.getUIContext().getRouter().back({
-    url: 'myPage' // myPage is the returned alias of the naming route page.
+    url: 'myPage' // myPage is the alias of the page to return to.
   });
   ```
 
@@ -232,16 +268,16 @@ You can use any of the following methods to return to a page:
 
   ```ts
   this.getUIContext().getRouter().back({
-    url: 'yPage', // myPage is the alias of the named route page to be returned.
+    url: 'myPage', // myPage is the alias of the page to return to.
     params: {
       info: 'From Home Page'
     }
   });
   ```
 
-  This method not only allows you to return to the specified page, but also pass in custom parameter information during the return process. You can call the [getParams](../reference/apis-arkui/arkts-apis-uicontext-router.md#getparams) method on the target page to obtain and parse the parameters.
+  This method not only lets you return to the specified page, but also allows custom parameters to be passed during the return. On the target page, you can call the [getParams](../reference/apis-arkui/arkts-apis-uicontext-router.md#getparams) method to obtain and parse these parameters.
 
-On the target page, call the [getParams](../reference/apis-arkui/arkts-apis-uicontext-router.md#getparams) method where parameters need to be obtained, for example, in the [onPageShow](../reference/apis-arkui/arkui-ts/ts-custom-component-lifecycle.md#onpageshow) lifecycle callback.
+On the target page, call [getParams](../reference/apis-arkui/arkts-apis-uicontext-router.md#getparams) where the parameters are needed, for example, in the [onPageShow](../reference/apis-arkui/arkui-ts/ts-custom-component-lifecycle.md#onpageshow) lifecycle callback.
 
 > **NOTE**
 > 
@@ -266,39 +302,39 @@ struct Home {
 
 >**NOTE**
 >
->When the back method is used to return to a specified page, all pages from the original top page (included) to the specified page (excluded) are popped out of the stack and destroyed.
+>When the **back** API is used to return to a specified page, all pages between the top page (included) and the specified page (excluded) are pushed from the page stack and destroyed.
 >
-> In addition, if the back method is used to return to the original page, the original page is not created repeatedly. Therefore, variables declared using \@State are not declared repeatedly, and the aboutToAppear lifecycle callback of the page is not triggered. If you want to use the custom parameters transferred from the returned page on the original page, you can parse the parameters in the required position. For example, parameter parsing can be performed in the **onPageShow** lifecycle callback.
+> If the **back** API is used to return to the original page, the original page will not be created repeatedly. Therefore, the variable declared using \@State will not be declared repeatedly, and the **aboutToAppear** lifecycle callback of the page will not be triggered. If you want to use the custom parameters transferred from the returned page on the original page, you can parse the parameters in the required position. For example, parameter parsing can be performed in the **onPageShow** lifecycle callback.
 
 ## Lifecycle
 
-[\@Entry](state-management/arkts-create-custom-components.md#entry)-decorated component lifecycle. The following lifecycle APIs are provided:
+The [router](../reference/apis-arkui/js-apis-router.md) page lifecycle refers to the lifecycle of components decorated with [\@Entry](state-management/arkts-create-custom-components.md#entry). The following lifecycle callbacks are provided:
 
 - [onPageShow](../reference/apis-arkui/arkui-ts/ts-custom-component-lifecycle.md#onpageshow): Invoked each time the page is displayed, for example, during page redirection or when the application is switched to the foreground.
 
 - [onPageHide](../reference/apis-arkui/arkui-ts/ts-custom-component-lifecycle.md#onpagehide): Invoked each time the page is hidden, for example, during page redirection or when the application is switched to the background.
 
-- [onBackPress](../reference/apis-arkui/arkui-ts/ts-custom-component-lifecycle.md#onbackpress): Invoked when the user clicks the **Back** button.
+- [onBackPress](../reference/apis-arkui/arkui-ts/ts-custom-component-lifecycle.md#onbackpress): Invoked when the user clicks the back button.
 
 ```ts
 // Index.ets
 @Entry
 @Component
 struct MyComponent {
-  // Only components decorated by @Entry can call the lifecycle callbacks of a page.
+  // Only components decorated with @Entry can call the lifecycle callbacks of a page.
   onPageShow() {
     console.info('Index onPageShow');
   }
 
-  // Only components decorated by @Entry can call the lifecycle callbacks of a page.
+  // Only components decorated with @Entry can call the lifecycle callbacks of a page.
   onPageHide() {
     console.info('Index onPageHide');
   }
 
-  // Only components decorated by @Entry can call the lifecycle callbacks of a page.
+  // Only components decorated with @Entry can call the lifecycle callbacks of a page.
   onBackPress() {
     console.info('Index onBackPress');
-    // If true is returned, the page processes the return logic and does not perform page routing. If false is returned, the default return logic is used. If no return value is set, false is used.
+    // The value true means that the page executes its own return logic, and false (default) means that the default return logic is used.
     return true;
   }
 
@@ -321,18 +357,18 @@ struct Page {
   @State textColor: Color = Color.Black;
   @State num: number = 0;
 
-  // Only components decorated by @Entry can call the lifecycle callbacks of a page.
+  // Only components decorated with @Entry can call the lifecycle callbacks of a page.
   onPageShow() {
     console.info('Page onPageShow');
     this.num = 5;
   }
 
-  // Only components decorated by @Entry can call the lifecycle callbacks of a page.
+  // Only components decorated with @Entry can call the lifecycle callbacks of a page.
   onPageHide() {
     console.info('Page onPageHide');
   }
 
-  // Only components decorated by @Entry can call the lifecycle callbacks of a page.
+  // Only components decorated with @Entry can call the lifecycle callbacks of a page.
   onBackPress() { // If the value is not set, false is used.
     console.info('Page onBackPress');
     this.textColor = Color.Grey;
@@ -358,11 +394,11 @@ struct Page {
   }
 }
 ```
-
+![router_2025-07-02_152548](figures/router_2025-07-02_152548.gif)
 
 ## Defining a Custom Transition
 
-[pageTransition](../reference/apis-arkui/arkui-ts/ts-custom-component-lifecycle.md#pagetransition9) can be used to customize the transition of router. For details, see [Page Transition (pageTransition)](../reference/apis-arkui/arkui-ts/ts-page-transition-animation.md).
+[pageTransition](../reference/apis-arkui/arkui-ts/ts-custom-component-lifecycle.md#pagetransition9) can be used to customize router page transitions. For details, see [Page Transition (pageTransition)](../reference/apis-arkui/arkui-ts/ts-page-transition-animation.md).
 
 ## Adding a Confirmation Dialog Box Before Page Return
 
@@ -377,11 +413,11 @@ Such a dialog box can be in the [default style](#default-confirmation-dialog-box
 
 ### Default Confirmation Dialog Box
 
-You can use the [showAlertBeforeBackPage](../reference/apis-arkui/arkts-apis-uicontext-router.md#showalertbeforebackpage) and [back](../reference/apis-arkui/arkts-apis-uicontext-router.md#back) methods provided by the router module to implement this function.
+To implement this feature, you can use the showAlertBeforeBackPage](../reference/apis-arkui/arkts-apis-uicontext-router.md#showalertbeforebackpage) and [back](../reference/apis-arkui/arkts-apis-uicontext-router.md#back) APIs provided by the **Router** module.
 
 Directly using **router** can lead to the issue of [ambiguous UI context](./arkts-global-interface.md#ambiguous-ui-context). To avoid this, obtain a [UIContext](../reference/apis-arkui/arkts-apis-uicontext-uicontext.md) instance using the **getUIContext()** API, and then obtain the **router** object bound to that instance through the [getRouter](../reference/apis-arkui/arkts-apis-uicontext-uicontext.md#getrouter) API.
 
-If you want to display a confirmation dialog box on the target page, you need to call the [showAlertBeforeBackPage](../reference/apis-arkui/arkts-apis-uicontext-router.md#showalertbeforebackpage) method to set the information about the confirmation dialog box before calling the [back](../reference/apis-arkui/arkts-apis-uicontext-router.md#back) method. For example, define a click event processing function for the back button on the payment page:
+To enable the confirmation dialog box for page return, call the [showAlertBeforeBackPage](../reference/apis-arkui/arkts-apis-uicontext-router.md#showalertbeforebackpage) API (for setting the information about the dialog box), then the [back](../reference/apis-arkui/arkts-apis-uicontext-router.md#back) API. For example, define a click event processing function for the back button on the payment page:
 
 ```ts
 import { BusinessError } from '@kit.BasicServicesKit';
@@ -404,20 +440,20 @@ function onBackClick(): void {
 }
 ```
 
-The this.getUIContext().getRouter().showAlertBeforeBackPage method receives an object as a parameter. The object contains the following attributes:
+The **this.getUIContext().getRouter().showAlertBeforeBackPage** API receives an object as a parameter. The object contains the following attributes:
 
 **message**: content of the dialog box. The value is of the string type.
 If the API is called successfully, the confirmation dialog box is displayed on the target page. Otherwise, an exception is thrown and the error code and error information is obtained through **err.code** and **err.message**.
 
-When the user clicks the back button, a confirmation dialog box is displayed, prompting the user to confirm their operation. If you tap Cancel, the current page is displayed. If you tap OK, the [back](../reference/apis-arkui/arkts-apis-uicontext-router.md#back) method is triggered, and the jump is determined based on the parameter.
+When the user clicks the back button, a confirmation dialog box is displayed, prompting the user to confirm their operation. If the user selects **Cancel**, the application stays on the current page. If the user selects **OK**, the [back](../reference/apis-arkui/arkts-apis-uicontext-router.md#back) API is called and the redirection is performed based on the parameters.
 
 ### Custom Confirmation Dialog Box
 
-You can customize a dialog box by using the [showDialog](../reference/apis-arkui/arkts-apis-uicontext-promptaction.md#showdialog-1) or custom pop-up window. . This topic uses the APIs in the **PromptAction** module an example to describe how to implement a custom confirmation dialog box.
+To implement a custom confirmation dialog box, use [showDialog](../reference/apis-arkui/arkts-apis-uicontext-promptaction.md#showdialog-1) or create a custom dialog box . This topic uses the APIs in the **PromptAction** module an example to describe how to implement a custom confirmation dialog box.
 
 Directly using **router** can lead to the issue of [ambiguous UI context](./arkts-global-interface.md). To avoid this, obtain a [UIContext](../reference/apis-arkui/arkts-apis-uicontext-uicontext.md) instance using the **getUIContext()** API, and then obtain the **router** object bound to that instance through the [getRouter](../reference/apis-arkui/arkts-apis-uicontext-uicontext.md#getrouter) API.
 
-In the event callback, call the [showDialog](../reference/apis-arkui/arkts-apis-uicontext-promptaction.md#showdialog-1) method of the pop-up window.
+In the event callback, call the [showDialog](../reference/apis-arkui/arkts-apis-uicontext-promptaction.md#showdialog-1) API.
 
 ```ts
 import { promptAction} from '@kit.ArkUI';
@@ -455,24 +491,17 @@ onBackClick() {
 }
 ```
 
-When the user clicks the back button, the custom confirmation dialog box is displayed, prompting the user to confirm their operation. If the user taps Cancel, the user stays on the current page. If the user taps OK, the [back](../reference/apis-arkui/arkts-apis-uicontext-router.md#back) method is triggered, and the redirection is determined based on the parameters.
+When the user clicks the back button, the custom confirmation dialog box is displayed, prompting the user to confirm their operation. If the user selects **Cancel**, the application stays on the current page. If the user selects **OK**, the [back](../reference/apis-arkui/arkts-apis-uicontext-router.md#back) API is called and the redirection is performed based on the parameters.
 
 ## Named Route
 
-You can use [pushNamedRoute](../reference/apis-arkui/arkts-apis-uicontext-router.md#pushnamedroute) to redirect to a page in a shared package [HAR](../quick-start/har-package.md) or [HSP](../quick-start/in-app-hsp.md).
+To redirect to a page in a [HAR](../quick-start/har-package.md) or [HSP](../quick-start/in-app-hsp.md), you can use [pushNamedRoute](../reference/apis-arkui/arkts-apis-uicontext-router.md#pushnamedroute).
 
   **Figure 4** Named route redirection 
 
 ![(figures/router-add-query-box-before-back.gif)](figures/namedroute-jump-to-mypage.gif)
 
-Before using the **Router** module, import it first.
-
-
-```ts
-import { router } from '@kit.ArkUI';
-```
-
-In the shared package [HAR](../quick-start/har-package.md) or [HSP](../quick-start/in-app-hsp.md) page to which you want to redirect, name the custom component EntryOptions decorated with [@Entry](../ui/state-management/arkts-create-custom-components.md#entry).
+In the target[HAR](../quick-start/har-package.md) or [HSP](../quick-start/in-app-hsp.md), name the [@Entry](../ui/state-management/arkts-create-custom-components.md#entry) decorated custom component in **EntryOptions**.
 
 ```ts
 // library/src/main/ets/pages/Index.ets
@@ -502,14 +531,14 @@ When the configuration is successful, import the named route page to the page fr
 >
 >```ts
 >"dependencies": {
->    "@ohos/library": "file:../library",
+>    "library": "file:../library",
 >    // ...
 > }
 >```
 
 ```ts
 import { BusinessError } from '@kit.BasicServicesKit';
-import '@ohos/library/src/main/ets/pages/Index'; // Import the named route page from the library of the shared package.
+import 'library/src/main/ets/pages/Index'; // Import the named route page from the library of the shared package.
 
 @Entry
 @Component
@@ -531,7 +560,7 @@ struct Index {
                   data3: [123, 456, 789]
                 }
               }
-            })
+            });
           } catch (err) {
             let message = (err as BusinessError).message;
             let code = (err as BusinessError).code;

en/application-dev/ui/arkts-sheet-page.md

@@ -1,37 +1,43 @@
-# Binding a Semi-Modal Page (bindSheet)
+# Binding a Modal Sheet (bindSheet)
+<!--Kit: ArkUI-->
+<!--Subsystem: ArkUI-->
+<!--Owner: @CCFFWW-->
+<!--Designer: @CCFFWW-->
+<!--Tester: @lxl007-->
+<!--Adviser: @Brilliantry_Rui-->
 
-A semi-modal page, implemented using [bindSheet](../reference/apis-arkui/arkui-ts/ts-universal-attributes-sheet-transition.md#bindsheet), is a modal, non-full-screen popup interaction page by default, allowing parts of the underlying parent view to be visible. This helps users retain the context of their parent view while interacting with the semi-modal.
+A modal sheet, implemented using [bindSheet](../reference/apis-arkui/arkui-ts/ts-universal-attributes-sheet-transition.md#bindsheet), is a modal, non-full-screen popup interaction page by default, allowing parts of the underlying parent view to be visible. This helps users retain the context of their parent view while interacting with the sheet.
 
-Semi-modal pages are suitable for displaying simple tasks or information panels, such as personal information, text introductions, sharing panels, creating schedules, and adding content. If a semi-modal page needs to be displayed in a way that could potentially affect the parent view, it can be configured to use a non-modal interaction form.
+Modal sheets are suitable for displaying simple tasks or information panels, such as personal information, text introductions, sharing panels, creating schedules, and adding content. If a sheet needs to be displayed in a way that could potentially affect the parent view, it can be configured to use a non-modal interaction form.
 
-Semi-modal pages have different form capabilities on devices of different widths. For details about the form requirements on devices with different widths, see the [preferType](../reference/apis-arkui/arkui-ts/ts-universal-attributes-sheet-transition.md#sheetoptions) property. You can use **bindSheet** to build semi-modal transition effects. For details, see [Modal Transition](arkts-modal-transition.md#creating-sheet-transition-with-bindsheet). For complex or lengthy user processes, consider other transition methods instead of semi-modals, such as [full-modal transition](arkts-contentcover-page.md) and [navigation transition](arkts-navigation-navigation.md).
+Modal sheets have different form capabilities on devices of different widths. For details about the form requirements on devices with different widths, see the [preferType](../reference/apis-arkui/arkui-ts/ts-universal-attributes-sheet-transition.md#sheetoptions) property. You can use **bindSheet** to build modal sheet transition effects. For details, see [Modal Transition](arkts-modal-transition.md#creating-sheet-transition-with-bindsheet). For complex or lengthy user processes, consider other transition methods instead of modal sheets, such as [full-modal transition](arkts-contentcover-page.md) and [navigation transition](arkts-navigation-navigation.md).
 
 ## Constraints
 
- - When a [UIExtension](../reference/apis-arkui/js-apis-arkui-uiExtension.md) is embedded in a semi-modal, launching another semi-modal or popup window within the UIExtension is not allowed.
+ - When a [UIExtension](../reference/apis-arkui/js-apis-arkui-uiExtension.md) is embedded in a modal sheet, launching another modal sheet or popup window within the UIExtension is not allowed.
 
  - In scenarios without secondary confirmation or custom close behavior, avoid using the [shouldDismiss/onWillDismiss](../reference/apis-arkui/arkui-ts/ts-universal-attributes-sheet-transition.md#sheetoptions) API.
 
 ## Lifecycle
 
-The semi-modal page provides lifecycle callbacks to notify the application of the lifecycle status of the popup. These callbacks are triggered in the following order: onWillAppear -> onAppear -> onWillDisappear -> onDisappear.
+The modal sheet provides lifecycle callbacks to notify the application of its lifecycle status. These callbacks are triggered in the following order: onWillAppear -> onAppear -> onWillDisappear -> onDisappear.
 
 | Name           |Type| Description                      |
 | ----------------- | ------ | ---------------------------- |
-| onWillAppear    | () => void | Callback for when the semi-modal page is about to appear (before the animation starts).|
-| onAppear    | () => void  | Callback for when the semi-modal page appears (after the animation ends). |
-| onWillDisappear | () => void | Callback for when the semi-modal page is about to disappear (before the animation starts).|
-| onDisappear |() => void  | Callback for when the semi-modal page disappears (after the animation ends).    |
+| onWillAppear    | () => void | Callback for when the modal sheet is about to appear (before the animation starts).|
+| onAppear    | () => void  | Callback for when the modal sheet appears (after the animation ends). |
+| onWillDisappear | () => void | Callback for when the modal sheet is about to disappear (before the animation starts).|
+| onDisappear |() => void  | Callback for when the modal sheet disappears (after the animation ends).    |
 
 ## Using Nested Scrolling
 
-The priority of operations during scrolling in the content area of a semi-modal panel is as follows:
+The priority of operations during scrolling in the content area of a modal sheet is as follows:
 
 1. 1. Content at the top and content that cannot be scrolled
 
-   Swiping up: The sheet will attempt to expand upwards. If no expansion is possible, the content will scroll.
+   Swiping up: The modal sheet will attempt to expand upwards. If no expansion is possible, the content will scroll.
 
-   Swiping down: The panel will attempt to contract downwards. If no contraction is possible, the panel will close.
+   Swiping down: The modal sheet will attempt to contract downwards. If no contraction is possible, the panel will close.
 2. 2. Content in the middle (scrollable both up and down)
 
    Swiping up or down: The content will scroll until it reaches the top or bottom of the panel.
@@ -44,7 +50,7 @@ The priority of operations during scrolling in the content area of a semi-modal
 
 By default, the nested scrolling mode for the half-modal panel is as follows: {Forward: PARENT\_FIRST, Backward: SELF\_FIRST}
 
-If you want to define a scrollable container, such as **List** or **Scroll**, in the panel content builder, and combine it with the semi-modal's interaction capabilities, you must set the nested scrolling attributes for the scrollable container in the vertical direction.
+If you want to define a scrollable container, such as **List** or **Scroll**, in the panel content builder, and combine it with the modal sheet's interaction capabilities, you must set the nested scrolling attributes for the scrollable container in the vertical direction.
 
 ```ts
 .nestedScroll({
@@ -111,55 +117,85 @@ struct SheetDemo {
 }
 ```
 
+![sheetTwo](figures/sheetTwo.PNG)
+
 ## Secondary Confirmation Capability
 
 To implement the secondary confirmation capability, you are advised to use the **onWillDismiss** API, with which you can handle secondary confirmation or custom close behavior in the callback.
 
 > **NOTE**
 >
-> After the **onWillDismiss** API is declared, all close operations of the semi-modal page, including side swiping, touching the close button, touching the mask, and pulling down, must be implemented by calling the **dismiss** API. If this logic is not implemented, the semi-modal page will not respond to the above close operations.
+> After the **onWillDismiss** API is declared, all dismiss operations of the modal sheet, including side swiping, touching the close button, touching the mask, and pulling down, must be implemented by calling the **dismiss** API. If this logic is not implemented, the modal sheet will not respond to the above dismiss operations.
 
 ```ts
-// Step 1: Declare the onWillDismiss callback.
-onWillDismiss: ((DismissSheetAction: DismissSheetAction) => {
-// Step 2: Implement the secondary confirmation interaction, using an AlertDialog component to prompt the user for confirmation.
-  this.getUIContext().showAlertDialog(
-    {
-      message: 'Do you want to close the semi-modal?',
-      autoCancel: true,
-      alignment: DialogAlignment.Bottom,
-      gridCount: 4,
-      offset: { dx: 0, dy: -20 },
-      primaryButton: {
-        value: 'cancel',
-        action: () => {
-          console.info('Callback when the cancel button is clicked');
-        }
-      },
-      secondaryButton: {
-        enabled: true,
-        defaultFocus: true,
-        style: DialogButtonStyle.HIGHLIGHT,
-        value: 'ok',
-        // Step 3: Define the logic for closing the semi-modal within the AlertDialog button callback.
-        action: () => {
-          // Step 4: Call dismiss() to close the semi-modal when the logic in step 3 is triggered.
-          DismissSheetAction.dismiss();
-          console.info('Callback when the ok button is clicked');
-        }
-      },
-      cancel: () => {
-        console.info('AlertDialog Closed callbacks');
-      }
+@Entry
+@Component
+struct onWillDismiss_Dismiss {
+  @State isShow: Boolean = false;
+
+  @Builder
+  myBuilder() {
+    Column() {
+      Button('Button')
     }
-  )
-})
+  }
+
+  build() {
+    Button("OpenBindSheet")
+      .onClick(() => {
+        this.isShow = true
+      })
+      .margin(120)
+      .bindSheet($$this.isShow, this.myBuilder(), {
+        height: SheetSize.MEDIUM,
+        blurStyle: BlurStyle.Thick,
+        dragBar: true,
+        detents: [SheetSize.MEDIUM, SheetSize.LARGE],
+        title: { title: "title", subtitle: "subtitle" },
+        enableOutsideInteractive: false,
+        onWillDismiss: ((DismissSheetAction: DismissSheetAction) => { 
+          // Step 2: Implement the secondary confirmation interaction, using an AlertDialog component to prompt the user for confirmation.
+          this.getUIContext().showAlertDialog(
+            {
+              message: 'Do you want to close the sheet?',
+              autoCancel: true,
+              alignment: DialogAlignment.Bottom,
+              gridCount: 4,
+              offset: { dx: 0, dy: -20 },
+              primaryButton: {
+                value: 'Cancel',
+                action: () => {
+                  console.info('Callback when the cancel button is clicked');
+                }
+              },
+              secondaryButton: {
+                enabled: true,
+                defaultFocus: true,
+                style: DialogButtonStyle.HIGHLIGHT,
+                value: 'Close',
+                // Step 3: Define the logic for closing the modal sheet within the AlertDialog button callback.
+                action: () => {
+                  // Step 4: Call dismiss() to close the modal sheet when the logic in step 3 is triggered.
+                  DismissSheetAction.dismiss();
+                  console.info('Callback when the ok button is clicked');
+                }
+              },
+              cancel: () => {
+                console.info('AlertDialog Closed callbacks');
+              }
+            }
+          )
+        })
+      })
+  }
+}
 ```
+![onWillDismiss](figures/onWillDismiss.png)
 
 ## Blocking Specific Dismiss Behavior
 
-After the **onWillDismiss** API is declared, it takes control over all dismiss behaviors of the semi-modal. This means that the semi-modal can be dismissed only when you explicitly call the **dismiss** API. You can customize the dismissal logic using **if** statements or other logic.
-For example, you might want the semi-modal to be dismissed only when the user swipes down. Here's how you can implement this:
+After the **onWillDismiss** API is declared, it takes control over all dismiss behaviors of the modal sheet. This means that the modal sheet can be dismissed only when you explicitly call the **dismiss** API. You can customize the dismissal logic using **if** statements or other logic.
+For example, you might want the modal sheet to be dismissed only when the user swipes down. Here's how you can implement this:
 
 ```ts
 onWillDismiss: ((DismissSheetAction: DismissSheetAction) => {
@@ -172,7 +208,7 @@ onWillDismiss: ((DismissSheetAction: DismissSheetAction) => {
 To enhance the user experience during the swiping down action, you can use the **onWillSpringBackWhenDismiss** API.
 Just like with **onWillDismiss**, after **onWillSpringBackWhenDismiss** is declared, the rebound operation during a swipe-down of the half-modal requires handling with **SpringBackAction.springBack()**; without this logic, no rebound will occur.
 
-Here is the specific code to prevent the rebound effect when the semi-modal is swiped down:
+Here is the specific code to prevent the rebound effect when the modal sheet is swiped down:
 
 ```ts
 onWillDismiss: ((DismissSheetAction: DismissSheetAction) => {
@@ -182,6 +218,77 @@ onWillDismiss: ((DismissSheetAction: DismissSheetAction) => {
 }),
 
 onWillSpringBackWhenDismiss: ((SpringBackAction: SpringBackAction) => {
- // No springBack is registered, so the half-modal will not bounce back when swiped down.
+ // No springBack is registered, so the modal sheet will not bounce back when swiped down.
 }),
 ```
+
+## Implementing Center Axis Avoidance
+
+Center axis avoidance is supported for modal sheets since API version 14. This capability is enabled by default on 2-in-1 devices (avoidance behavior is triggered only when the window is in waterfall mode), with the default avoidance area set to the upper half of the screen. You can actively configure whether to enable center axis avoidance using the **enableHoverMode** property in [SheetOptions](../reference/apis-arkui/arkui-ts/ts-universal-attributes-sheet-transition.md#sheetoptions), and specify the display area after avoidance using the **hoverModeArea** property.
+
+- Center axis avoidance for modal sheets does not support the subwindow capability. This restriction applies to scenarios where **showInSubWindow** in [SheetOptions](../reference/apis-arkui/arkui-ts/ts-universal-attributes-sheet-transition.md#sheetoptions) is set to **true**.
+- On 2-in-1 devices, center axis avoidance occurs only when the window is in waterfall mode.
+
+The sample code is as follows:
+
+```ts
+@Entry
+@Component
+struct SheetTransitionExample {
+  @State isShow: boolean = false;
+  @State enableHoverMode: boolean = true;
+  @State hoverModeArea: HoverModeAreaType = HoverModeAreaType.TOP_SCREEN;
+
+  @Builder
+  myBuilder() {
+    Column() {
+      Button("Toggle enableHoverMode")
+        .margin(10)
+        .fontSize(20)
+        .onClick(() => {
+          this.enableHoverMode = !this.enableHoverMode;
+        })
+
+      Button("Toggle hoverModeArea")
+        .margin(10)
+        .fontSize(20)
+        .onClick(() => {
+          this.hoverModeArea = this.hoverModeArea === HoverModeAreaType.TOP_SCREEN ?
+          HoverModeAreaType.BOTTOM_SCREEN : HoverModeAreaType.TOP_SCREEN;
+        })
+
+      Button("Close Sheet")
+        .margin(10)
+        .fontSize(20)
+        .onClick(() => {
+          this.isShow = false;
+        })
+    }
+    .width('100%')
+    .height('100%')
+  }
+
+  build() {
+    Column() {
+      Button("Open Sheet")
+        .onClick(() => {
+          this.isShow = true;
+        })
+        .fontSize(20)
+        .margin(10)
+        .bindSheet($$this.isShow, this.myBuilder(), {
+          height: 300,
+          backgroundColor: Color.Green,
+          preferType: SheetType.CENTER,
+          enableHoverMode: this.enableHoverMode,
+          hoverModeArea: this.hoverModeArea
+        })
+    }
+    .justifyContent(FlexAlign.Center)
+    .width('100%')
+    .height('100%')
+  }
+}
+```
+
+![sheetOne](figures/sheetOne.PNG)

en/application-dev/ui/arkts-ui-development-overview.md

@@ -4,18 +4,18 @@
 <!--Owner: @piggyguy; @xiang-shouxing; @yangfan229-->
 <!--Designer: @piggyguy; @xiang-shouxing; @yangfan229-->
 <!--Tester: @fredyuan912-->
-<!--Adviser: @HelloCrease-->
+<!--Adviser: @Brilliantry_Rui-->
 
 Powered by the ArkTS-based declarative development paradigm, ArkUI is a simplified, high-performance UI development framework for cross-device applications. It provides the capabilities required for building the application UI, including:
 
 
 - **ArkTS**
 
-  ArkTS is the preferred programming language for application development. As a superset of [TypeScript](https://www.typescriptlang.org/) (TS for short), it contains all TS features and added features, including declarative UI description, custom components, dynamic UI element extension, state management, and rendering control. State management in ArkTS provides clear page re-render processes and pipes through decorators with different functions. It covers UI component states and application states, allowing for a comprehensive data update and UI rendering mechanism across the application. To learn more about ArkTS, see [Getting Started with ArkTS](../quick-start/arkts-get-started.md).
+  ArkTS is the preferred programming language for application development. Extending the [TypeScript](https://www.typescriptlang.org/) ecosystem, ArkTS enhances it with capabilities tailored for application development, including declarative UI description, custom components, dynamic UI element extension, state management, and rendering control. State management in ArkTS provides clear page re-render processes and pipes through decorators with different functions. It covers UI component states and application states, allowing for a comprehensive data update and UI rendering mechanism across the application. To learn more about ArkTS, see [Getting Started with ArkTS](../quick-start/arkts-get-started.md).
 
 - **Layout**
 
-  Layout defines how components are laid out in the UI. ArkUI offers a diverse array of layouts. Besides the basic layouts, such as linear, stack, flex, and relative, you also have access to the advanced layouts, including list, grid, and swiper, for more complex UI design needs.
+  Layout defines how components are laid out in the UI. ArkUI offers a diverse array of layout options. Besides the basic layouts, such as linear, stack, flex, and relative, advanced layouts including list, grid, and swiper are available for more complex UI design requirements.
 
 - **Component**
 
@@ -53,7 +53,7 @@ Powered by the ArkTS-based declarative development paradigm, ArkUI is a simplifi
   - Language compiler and runtime optimization: The productivity punch includes unified bytecode, efficient Foreign Function Interface (FFI), ahead-of-time (AOT), engine minimization, and type optimization.
 
 - Promising ecosystem
-  ArkUI can gain traction with its relatively neutral and friendly programming language. It can tap on the ecosystems of mainstream languages and pushed toward a steady revolutionary path with standards organizations.
+  ArkUI can gain traction with its relatively neutral and developer-friendly programming language. It can tap on the ecosystems of mainstream languages and advance along an evolutionary path with standards organizations.
 
 
 ## Architecture
@@ -66,7 +66,7 @@ Powered by the ArkTS-based declarative development paradigm, ArkUI is a simplifi
 
 
 - **Declarative UI frontend**
-  Provides basic language specifications of the UI development paradigm, built-in UI components, layouts, and animations, and multiple state management mechanisms, with a wide array of APIs for you to call as required.
+  Provides basic language specifications of the UI development paradigm, built-in UI components, layout, and animations, and multiple state management mechanisms, with a wide array of APIs for you to call as required.
 
 - **Language runtime**
   Provides the parsing capability for the UI paradigm syntax and allows for cross-language API calls for a high-performance operating environment of the TS language.

en/application-dev/ui/arkts-uicontext-custom-dialog.md

@@ -1,4 +1,4 @@
-# Global Custom Dialog Box Independent of UI Components (openCustomDialog) (Recommended)
+# Global Custom Dialog Box Independent of UI Components (openCustomDialog)
 <!--Kit: ArkUI-->
 <!--Subsystem: ArkUI-->
 <!--Owner: @houguobiao-->
@@ -6,7 +6,7 @@
 <!--Tester: @lxl007-->
 <!--Adviser: @Brilliantry_Rui-->
 
-For complex application scenarios, use the [openCustomDialog](../reference/apis-arkui/arkts-apis-uicontext-promptaction.md#opencustomdialog12) API from the **PromptAction** object obtained through UIContext to implement custom dialog boxes. Compared with [CustomDialogController](../reference/apis-arkui/arkui-ts/ts-methods-custom-dialog-box.md#customdialogcontroller), this approach offers better page decoupling and supports [dynamic updates](../reference/apis-arkui/js-apis-arkui-ComponentContent.md#update).
+In scenarios that require user interaction responses such as advertisements, prize notifications, warnings, and software updates, you can use the [openCustomDialog](../reference/apis-arkui/arkts-apis-uicontext-promptaction.md#opencustomdialog12) API provided by the **PromptAction** object obtained from **UIContext** to implement custom dialog boxes. Compared with [CustomDialogController](../reference/apis-arkui/arkui-ts/ts-methods-custom-dialog-box.md#customdialogcontroller), its advantages include decoupling from pages and support for [dynamic updates](../reference/apis-arkui/js-apis-arkui-ComponentContent.md#update).
 
 > **NOTE**
 > 
@@ -26,8 +26,8 @@ The dialog box provides lifecycle functions to notify users of its lifecycle eve
 
 | Name           |Type| Description                      |
 | ----------------- | ------ | ---------------------------- |
-| onDidAppear    | () => void  | Callback invoked when the dialog box appears.   |
-| onDidDisappear |() => void  | Callback invoked when the dialog box disappears.   |
+| onDidAppear    | () => void  | Callback invoked after the dialog box appears.   |
+| onDidDisappear |() => void  | Callback invoked after the dialog box disappears.   |
 | onWillAppear    | () => void | Callback invoked when the dialog box is about to appear.|
 | onWillDisappear | () => void | Callback invoked when the dialog box is about to disappear.|
 
@@ -121,7 +121,8 @@ import { BusinessError } from '@kit.BasicServicesKit';
 @Entry
 @Component
 struct Index {
-  private customDialogComponentId: number = 0
+  private customDialogComponentId: number = 0;
+
   @Builder
   customDialogComponent() {
     Row({ space: 50 }) {
@@ -135,28 +136,36 @@ struct Index {
         Text('Open dialog box')
           .fontSize(30)
           .onClick(() => {
-            this.getUIContext().getPromptAction().openCustomDialog({
-              builder: () => {
-                this.customDialogComponent()
-              },
-              isModal:true,
-              showInSubWindow:false,
-              maskColor: Color.Pink,
-              maskRect:{ x: 20, y: 20, width: '90%', height: '90%' },
-
-              dialogTransition: // Set the transition effect for dialog box content display.
-              TransitionEffect.translate({ x: 0, y: 290, z: 0 })
-                .animation({ duration: 4000, curve: Curve.Smooth }),// 4-second translation animation
-
-              maskTransition: // Set the transition effect for mask display.
-              TransitionEffect.opacity(0)
-                .animation({ duration: 4000, curve: Curve.Smooth }) // 4-second opacity animation
-
-            }).then((dialogId: number) => {
-              this.customDialogComponentId = dialogId
-            })
+            this.getUIContext()
+              .getPromptAction()
+              .openCustomDialog({
+                builder: () => {
+                  this.customDialogComponent()
+                },
+                isModal: true,
+                showInSubWindow: false,
+                maskColor: Color.Pink,
+                maskRect: {
+                  x: 20,
+                  y: 20,
+                  width: '90%',
+                  height: '90%'
+                },
+
+                dialogTransition: // Set the transition effect for dialog box content display.
+                TransitionEffect.translate({ x: 0, y: 290, z: 0 })
+                  .animation({ duration: 4000, curve: Curve.Smooth }), // 4-second translation animation
+
+                maskTransition: // Set the transition effect for mask display.
+                TransitionEffect.opacity(0)
+                  .animation({ duration: 4000, curve: Curve.Smooth }) // 4-second opacity animation
+
+              })
+              .then((dialogId: number) => {
+                this.customDialogComponentId = dialogId;
+              })
               .catch((error: BusinessError) => {
-                console.error(`openCustomDialog error code is ${error.code}, message is ${error.message}`)
+                console.error(`openCustomDialog error code is ${error.code}, message is ${error.message}`);
               })
           })
       }
@@ -202,7 +211,7 @@ struct Index {
               builder: () => {
                 this.customDialogComponent()
               },
-              alignment:DialogAlignment.Bottom,
+              alignment: DialogAlignment.Bottom,
               keyboardAvoidMode: KeyboardAvoidMode.DEFAULT, // The dialog box automatically avoids the soft keyboard.
               keyboardAvoidDistance: LengthMetrics.vp(0) // The distance between the soft keyboard and the dialog box is 0 vp.
             }).catch((error: BusinessError) => {

en/application-dev/ui/arkts-user-defined-extension-attributeModifier.md

@@ -307,7 +307,7 @@ You can use **AttributeModifier** to set polymorphic styles and events, which en
   | CommonAttribute | [accessibilityText](../reference/apis-arkui/arkui-ts/ts-universal-attributes-accessibility.md#accessibilitytext12)     | -   | -  |
   | CommonAttribute | [accessibilityDescription](../reference/apis-arkui/arkui-ts/ts-universal-attributes-accessibility.md#accessibilitydescription12)     | -   | -  |
   | CommonAttribute | [animation](../reference/apis-arkui/arkui-ts/ts-animatorproperty.md#animation)                | Method not implemented.   | Animation attributes are not supported.                |
-  | CommonAttribute | [attributeModifier](../reference/apis-arkui/arkui-ts/ts-universal-attributes-attribute-modifier.md#attributemodifiert)        | -                         | **attributeModifier** does not take effect when nested.|
+  | CommonAttribute | [attributeModifier](../reference/apis-arkui/arkui-ts/ts-universal-attributes-attribute-modifier.md#attributemodifier)        | -                         | **attributeModifier** does not take effect when nested.|
   | CommonAttribute | [backgroundFilter](../reference/apis-arkui/arkui-ts/ts-universal-attributes-filter-effect.md#backgroundfilter)         | is not callable           | -                                         |
   | CommonAttribute | [chainWeight](../reference/apis-arkui/arkui-ts/ts-universal-attributes-location.md#chainweight14)              | is not callable           | -                                         |
   | CommonAttribute | [compositingFilter](../reference/apis-arkui/arkui-ts/ts-universal-attributes-filter-effect.md#compositingfilter)        | is not callable           | -                                         |
@@ -329,7 +329,6 @@ You can use **AttributeModifier** to set polymorphic styles and events, which en
   | CommonAttribute | [bindSheet](../reference/apis-arkui/arkui-ts/ts-universal-attributes-sheet-transition.md#bindsheet) | Method not implemented. | Attributes that accept a CustomBuilder are not supported.|
   | CommonAttribute | [dragPreview](../reference/apis-arkui/arkui-ts/ts-universal-attributes-drag-drop.md#dragpreview15) | Builder is not supported. | Attributes that accept a CustomBuilder are not supported.|
   | CommonAttribute | [bindPopup](../reference/apis-arkui/arkui-ts/ts-universal-attributes-popup.md#bindpopup) | Method not implemented. | Attributes that accept a CustomBuilder are not supported.|
-  | CommonAttribute | [onDragStart](../reference/apis-arkui/arkui-ts/ts-universal-events-drag-drop.md#ondragstart) | Method not implemented. | Attributes that return a CustomBuilder are not supported.|
   | CommonAttribute | [accessibilityVirtualNode](../reference/apis-arkui/arkui-ts/ts-universal-attributes-accessibility.md#accessibilityvirtualnode11) | is not callable | Attributes that accept a CustomBuilder are not supported.|
   | CommonAttribute | [chainWeight](../reference/apis-arkui/arkui-ts/ts-universal-attributes-location.md#chainweight14) | - | - |
   | CheckboxGroup |  [contentModifier](../reference/apis-arkui/arkui-ts/ts-basic-components-checkboxgroup.md#contentmodifier21)| - | - |
@@ -392,6 +391,7 @@ You can use **AttributeModifier** to set polymorphic styles and events, which en
   | CommonAttribute | [accessibilityTextHint](../reference/apis-arkui/arkui-ts/ts-universal-attributes-accessibility.md#accessibilitytexthint12)    |12        | 20                         |
   | CommonAttribute | [accessibilitySelected](../reference/apis-arkui/arkui-ts/ts-universal-attributes-accessibility.md#accessibilityselected13)    | 13       |20                                      |
   | CommonAttribute  | [visualEffect](../reference/apis-arkui/arkui-ts/ts-universal-attributes-filter-effect.md#visualeffect) | 12 | 20 |
+  | CommonAttribute | [onDragStart](../reference/apis-arkui/arkui-ts/ts-universal-events-drag-drop.md#ondragstart) | 8 | 13 |
   | CommonAttribute  | [onVisibleAreaChange](../reference/apis-arkui/arkui-ts/ts-universal-component-visible-area-change-event.md#onvisibleareachange) | 9     | 20     |
   | CommonAttribute  | [onTouchIntercept](../reference/apis-arkui/arkui-ts/ts-universal-attributes-on-touch-intercept.md#ontouchintercept) | 12       | 20    |
   | CommonAttribute  | [onPreDrag](../reference/apis-arkui/arkui-ts/ts-universal-events-drag-drop.md#onpredrag12)    | 12                  | 20             |

en/application-dev/ui/arkts-user-defined.md

@@ -1,12 +1,20 @@
 # Customization Capability Overview
 
+<!--Kit: ArkUI-->
+<!--Subsystem: ArkUI-->
+<!--Owner: @xiang-shouxing-->
+<!--Designer: @xiang-shouxing-->
+<!--Tester: @sally__-->
+<!--Adviser: @Brilliantry_Rui-->
+
+
 ## Customization Capability Levels
   Customization capabilities in the ArkUI development framework allow for flexible UI development and personalization. These capabilities span various control levels, each suited for different use cases. Lower levels of customization provide closer access to foundational capabilities, offering greater flexibility but also higher development complexity and demands on developer skills.
 
   Currently, the following customization levels are available, organized from the most basic to the most advanced:
-  - **Custom composition**: the most basic customization method provided by the ArkUI framework, which combines and reuses existing components through the basic capabilities of built-in and custom components to encapsulate new components. This includes basic capabilities such as encapsulation, layout, drawing, and animation.
+  - **Custom composition**: the most basic customization method provided by the ArkUI framework, which combines and reuses existing components through the basic capabilities of system and custom components to encapsulate new components. This includes basic capabilities such as encapsulation, layout, drawing, and animation.
   - **Custom extension**: a range of modifiers, including the following, that enable the enhancement and customization of UI components in a way that is separate from the UI: [AttributeModifier](../reference/apis-arkui/arkui-ts/ts-universal-attributes-attribute-modifier.md), [GestureModifier](../reference/apis-arkui/arkui-ts/ts-universal-attributes-gesture-modifier.md#gesturemodifier-1), [DrawModifier](../reference/apis-arkui/arkui-ts/ts-universal-attributes-draw-modifier.md#drawmodifier-1).
-  - **Custom nodes**: node objects with some basic capabilities of underlying entity nodes, which can be mixed and displayed with built-in components through [custom placeholder nodes](./arkts-user-defined-place-holder.md). There are three types of custom nodes: [FrameNode](../reference/apis-arkui/js-apis-arkui-frameNode.md), [RenderNode](../reference/apis-arkui/js-apis-arkui-renderNode.md), and [BuilderNode](../reference/apis-arkui/js-apis-arkui-builderNode.md). These nodes have customization capabilities for individual nodes, such as measurement and layout, setting basic attributes, setting event listeners, and custom drawing and content rendering.
+  - **Custom nodes**: node objects with some basic capabilities of underlying entity nodes, which can be mixed and displayed with system components through [custom placeholder nodes](./arkts-user-defined-place-holder.md). There are three types of custom nodes: [FrameNode](../reference/apis-arkui/js-apis-arkui-frameNode.md), [RenderNode](../reference/apis-arkui/js-apis-arkui-renderNode.md), and [BuilderNode](../reference/apis-arkui/js-apis-arkui-builderNode.md). These nodes have customization capabilities for individual nodes, such as measurement and layout, setting basic attributes, setting event listeners, and custom drawing and content rendering.
   - **Custom rendering**: custom content rendering implemented by writing display data generated by EGL/OpenGLES or other decoded media stream data into the **NativeWindow** object, thanks to the "surface" mode of [XComponent](napi-xcomponent-guidelines.md) that exposes the **NativeWindow** object and the NDK APIs.
 
 ## A Quick Glance of Customization Capabilities
@@ -20,8 +28,8 @@
   |Custom composition|Custom animation| Use [property animation](./arkts-attribute-animation-apis.md) for custom animation effects on animatable component properties.<br>Use [@AnimatableExtend](../ui/state-management/arkts-animatable-extend.md) to animate non-animatable properties.<br>Use APIs in [@ohos.animator](../reference/apis-arkui/js-apis-animator.md) to create custom animations similar to frame animations, by modifying properties frame-by-frame or integrating with custom drawing.|
   |Custom extension|Attribute extension| Use [AttributeModifier](../reference/apis-arkui/arkui-ts/ts-universal-attributes-attribute-modifier.md#attributemodifier) for UI and style separation, dynamic setting and updating of attributes and events, and exporting and reusing across files, which is useful for component encapsulation and extending properties through exposed modifiers.<br>Use [custom modifiers](../reference/apis-arkui/arkui-ts/ts-universal-attributes-attribute-modifier.md#custom-modifier) for simplified attribute passing and extension in component encapsulation.<br> Use [AttributeUpdater](../reference/apis-arkui/js-apis-arkui-AttributeUpdater.md) for direct attribute setting to improve performance in scenarios with frequent attribute updates.|
   |Custom extension|Gesture extension| Use [GestureModifier](../reference/apis-arkui/arkui-ts/ts-universal-attributes-gesture-modifier.md#gesturemodifier-1) for gesture extension, adding or removing gestures dynamically, with cross-file export and reuse, which is suitable for encapsulating and reusing custom gesture handling logic.|
-  |Custom extension|Content extension| Use [DrawModifier](../reference/apis-arkui/arkui-ts/ts-universal-attributes-draw-modifier.md#drawmodifier-1) to extend or replace default component drawing with custom content.<br>Use [ContentModifier](../reference/apis-arkui/arkui-ts/ts-universal-attributes-content-modifier.md#contentmodifiert) to replace component content with custom **Builder** methods in components with clear content and interaction areas.|
-  |Custom nodes|Component node| Use [FrameNode](arkts-user-defined-arktsNode-frameNode.md) for the following capabilities:<br>Fully custom node capability, including custom measurement, layout, and rendering, with support for dynamically adding and removing nodes, setting universal attributes, and configuring event callbacks. It is suitable for third-party frameworks with high-level languages that do not have their own rendering engines but rely on system capabilities for layout, events, animation, and rendering.<br>Native component proxy capabilities for built-in components, enabling traversal of the node tree. By using FrameNodes within the component tree, you can navigate the entire tree and access component information or register additional event listeners. This is useful for combining seamless listening APIs to implement services such as tracking, advertising SDKs, and mid-end DFX.<br>Use [TypedFrameNode](../reference/apis-arkui/js-apis-arkui-frameNode.md#typedframenode12) for creating specific types of FrameNodes, which can then be mounted with APIs of **FrameNode** to generate a custom component tree. It is ideal for seamless integration with dynamic frameworks developed in high-level programming languages.|
+  |Custom extension|Content extension| Use [DrawModifier](../reference/apis-arkui/arkui-ts/ts-universal-attributes-draw-modifier.md#drawmodifier-1) to extend or replace default component drawing with custom content.<br>Use [ContentModifier](../reference/apis-arkui/arkui-ts/ts-universal-attributes-content-modifier.md#contentmodifiert) to replace component content with custom **Builder** methods in system components with clear content and interaction areas.|
+  |Custom nodes|Component node| Use [FrameNode](arkts-user-defined-arktsNode-frameNode.md) for the following capabilities:<br>Fully custom node capability, including custom measurement, layout, and rendering, with support for dynamically adding and removing nodes, setting universal attributes, and configuring event callbacks. It is suitable for third-party frameworks with high-level languages that do not have their own rendering engines but rely on system capabilities for layout, events, animation, and rendering.<br>Component proxy capabilities for declarative components, enabling traversal of the node tree. By using FrameNodes, you can navigate the entire component tree and access component information or register additional event listeners. This is useful for combining seamless listening APIs to implement services such as tracking, advertising SDKs, and mid-end DFX.<br>Use [TypedFrameNode](../reference/apis-arkui/js-apis-arkui-frameNode.md#typedframenode12) for creating specific types of FrameNodes, which can then be mounted with APIs of **FrameNode** to generate a custom component tree. It is ideal for seamless integration with dynamic frameworks developed in high-level programming languages.|
   |Custom nodes|Rendering node| Use [RenderNode](arkts-user-defined-arktsNode-renderNode.md) for lightweight rendering nodes that provide rendering-related attribute setting, custom drawing, and node operation capabilities. It is suitable for integration with third-party frameworks without a rendering engine but relying on system animation and rendering capabilities.|
-  |Custom nodes| Mixing with built-in components| Use [BuilderNode](arkts-user-defined-arktsNode-builderNode.md) to create and update built-in components and component trees. It allows for the integration of declarative components within custom FrameNode or RenderNode structures, facilitating the hybrid display of built-in components with custom nodes. It also allows builder content to be exported as textures, facilitating same-layer rendering in environments created by the **XComponent**.|
+  |Custom nodes| Mixing with system components| Use [BuilderNode](arkts-user-defined-arktsNode-builderNode.md) to create and update system components and component trees. It allows for the integration of declarative components within custom FrameNode or RenderNode structures, facilitating the hybrid display of system components with custom nodes. It also allows builder content to be exported as textures, facilitating same-layer rendering in environments created by the **XComponent**.|
   |Custom rendering| Independent rendering| Use [XComponent](napi-xcomponent-guidelines.md)'s surface mode with the NDK APIs to create a standalone rendering environment through **NativeWindow**, which enables writing display data generated by EGL/OpenGLES or other media stream data decoded through various methods into the **NativeWindow** object. This way, custom rendering is achieved without relying on other components provided by the ArkUI framework. It is suitable for frameworks that come with their own rendering engines, such as those used in gaming engines, mapping applications, and camera software.|

en/application-dev/ui/arkui-overview.md

@@ -18,21 +18,21 @@ ArkUI provides a comprehensive infrastructure for application UI development, in
 
 ## Two Development Paradigms
 
-ArkUI comes with two development paradigms: [ArkTS-based declarative development paradigm](arkts-ui-development-overview.md) (declarative development paradigm for short) and [JS-compatible web-like development paradigm](ui-js-overview.md) (web-like development paradigm for short). You can choose whichever development paradigm that aligns with your practice.
+ArkUI comes with two development paradigms: [ArkTS-based declarative development paradigm](arkts-ui-development-overview.md) (declarative development paradigm for short) and [JavaScript-compatible web-like development paradigm](ui-js-overview.md) (web-like development paradigm for short). You can choose whichever development paradigm that aligns with your practice.
 
-- **Declarative development paradigm**: uses [ArkTS](../quick-start/arkts-get-started.md) – a superset of TypeScript with declarative UI syntax, providing UI drawing capabilities from three dimensions: component, animation, and state management.
+- **Declarative development paradigm**: uses the [ArkTS language](../quick-start/arkts-get-started.md), which extends TypeScript with declarative UI syntax, to provide UI drawing capabilities from three dimensions: components, animations, and state management.
 
-- **Web-like development paradigm**: uses the classical three-stage programming model, in which <!--RP1-->HML<!--RP1End--> is used for building layouts, CSS for defining styles, and JS for adding processing logic. This development paradigm has a low learning curve for frontend web developers, allowing them to quickly transform existing web applications into ArkUI applications.
+- **Web-like development paradigm**: uses the classical three-stage programming model, in which <!--RP1-->HML<!--RP1End--> is used for building layouts, CSS for defining styles, and JavaScript for adding processing logic. This development paradigm has a low learning curve for frontend web developers, allowing them to quickly transform existing web applications into ArkUI applications.
 
 The declarative development paradigm is a better choice for building new application UIs for the following reasons:
 
 - **Higher development efficiency**: In the declarative development paradigm, the programming mode used is closer to natural semantics. You can intuitively describe the UI without caring about how the framework implements UI drawing and rendering, leading to simplified and efficient development.
 
-- **Higher application performance**: As shown below, the two development paradigms share the UI backend engine and language runtime. However, the declarative development paradigm does not require the JS framework for managing the page DOM. As such, it has more streamlined rendering and update links and less memory usage.
+- **Higher application performance**: As shown below, the two development paradigms share the UI backend engine and language runtime. However, the declarative development paradigm does not require the JavaScript framework for managing the page DOM. As such, it has more streamlined rendering and update links and less memory usage.
 
 - **Future proof**: The declarative development paradigm will continue to develop as the preferred development paradigm, providing increasingly diverse and powerful capabilities.
 
-  **Figure 1** ArkUI framework
+  **Figure 1** ArkUI framework 
 
   ![arkui-framework](figures/arkui-framework.png)
 
@@ -46,9 +46,9 @@ The supported development paradigm varies according to the [application model](.
 | Application Model       | Page Form    | Supported Development Paradigm               |
 | ----------- | -------- | ------------------------ |
 | Stage model (recommended)| Application or service page| Declarative development paradigm (recommended)             |
-|             | Widget      | Declarative development paradigm (recommended)<br>Web-like development paradigm|
+| Stage model (recommended)| Widget      | Declarative development paradigm (recommended)<br>Web-like development paradigm|
 | FA model       | Application or service page| Declarative development paradigm<br>Web-like development paradigm    |
-|             | Widget      | Web-like development paradigm                |
+| FA model      | Widget      | Web-like development paradigm                |
 
 ## Layered API Architecture and Selection Guidelines
 

en/application-dev/ui/ndk-bind-gesture-events.md

@@ -31,7 +31,7 @@ The following is a simple example to illustrate how to implement gesture binding
    nodeAPI->setAttribute(column, NODE_HEIGHT, &height);
    ```
 
-2. Create a single-finger long-press gesture with a 1-second activation threshold.
+2. Create a single-finger long press gesture with a 1-second activation threshold.
    ```
    // Obtain the set of native gesture APIs.
    auto gestureApi = reinterpret_cast<ArkUI_NativeGestureAPI_1 *>(

en/application-dev/ui/ui-dark-light-color-adaptation.md

@@ -109,7 +109,7 @@ To enhance user experience, applications should adapt to the system's dark and l
 
 5. Listening for Color Mode Switching Events
 
-    Applications can listen for system color mode changes and perform custom logic, such as initializing resources of other types. This approach works regardless of whether the application is set to follow the system's dark or light mode.
+    Applications can listen for system color mode changes and perform custom logic, such as initializing resources of other types. When an application uses [setColorMode](../reference/apis-ability-kit/js-apis-inner-application-uiAbilityContext.md#setcolormode18) to manually set the color mode, it will not receive the **onConfigurationUpdate** callback. Except for this case, this listener remains effective regardless of whether the application follows the system's color mode changes.
 
     a. Save the current color mode to the AppStorage in the **onCreate()** lifecycle of the AbilityStage.
 
@@ -161,7 +161,7 @@ To enhance user experience, applications should adapt to the system's dark and l
 
 6. Partial Adaptation
 
-    Using [WithTheme](../reference/apis-arkui/arkui-ts/ts-container-with-theme.md), you can set three color modes: follow the system, light mode, and dark mode.
+    Using [WithTheme](../reference/apis-arkui/arkui-ts/ts-container-with-theme.md), you can set three [color modes](../reference/apis-arkui/arkui-ts/ts-universal-attributes-foreground-blur-style.md#themecolormode): follow the system, light mode, and dark mode.
 
     Within the scope of **WithTheme**, component styles adapt to the specified color mode by accessing the corresponding system and application resource values, ensuring components adjust their appearance based on the configured mode. For details, see [Setting a Custom Theme Style for Specific Application Pages](./theme_skinning.md#setting-a-custom-theme-style-for-specific-application-pages).
 
@@ -171,7 +171,7 @@ By default, applications follow the system's color mode. When configured this wa
 
 > **NOTE**
 > 
-> If your application does not support dark mode properly and displays abnormalities, you can use this approach to lock the UI in light mode.
+> If an application is not specifically adapted for dark mode, directly following the system settings may cause display issues in dark mode. As a workaround, this method can be used to lock the application in light mode.
 
 ```ts
 onCreate(): void {
@@ -208,7 +208,7 @@ onCreate(): void {
 
 - Not Recommended Approach
 
-  Avoid adapting to color mode changes through functions in attribute settings that rely on re-executing attribute setting code during the color mode switching process. Incorrect usage:
+  Avoid adapting to color mode changes through function return values in attribute settings that rely on re-executing attribute setting code during the color mode switching process. Incorrect usage:
 
   ```ts
   getResource() : string {
@@ -236,7 +236,7 @@ Starting from API version 20, the system provides an optimized color mode switch
 
 > **NOTE**
 >
-> When configuring **metadata**, ensure that any custom adaptation logic implemented through attribute setting functions properly handles color mode changes.
+> When configuring **metadata**, ensure that color mode switching is not implemented through function return values in attribute settings.
 > <!--RP1--><!--RP1End-->
 
 1. Enable color mode switching optimization through **metadata**.
@@ -254,11 +254,151 @@ Starting from API version 20, the system provides an optimized color mode switch
 
 2. Ensure proper adaptation of your application's custom behavior.
 
-   After enabling color mode switching optimization, frontend code and attribute settings are not re-executed during mode switching. Only essential attributes are updated and redrawn. If your application relies on function-based attribute settings to handle mode changes, this adaptation approach will no longer work. You must implement proper adaptation before enabling the optimization. For detailed guidance, see [Recommendations and Precautions](#recommendations-and-precautions).
+   After enabling color mode switching optimization, frontend code and attribute settings are not re-executed during mode switching. Only essential attributes are updated and redrawn. If your application relies on function-based attribute settings to handle mode changes, this adaptation approach will no longer work. You must implement proper adaptation before enabling the optimization. For detailed guidance, see [Recommendations and Precautions](#recommendations-and-precautions). Below are three typical adaptation scenarios:
+
+  - Returning different resource values based on the current color mode
+
+    After enabling the optimization, you can actively listen for system color mode changes using either the [AbilityStage's callback](../reference/apis-ability-kit/js-apis-app-ability-abilityStage.md#onconfigurationupdate) or the [Ability's callback](../reference/apis-ability-kit/js-apis-app-ability-ability.md#abilityonconfigurationupdate), and update the text color accordingly. Example:
+
+      ```ts
+      // EntryAbility.ets
+      import { Configuration, UIAbility } from '@kit.AbilityKit';
+
+      export default class EntryAbility extends UIAbility {
+
+        onConfigurationUpdate(newConfig: Configuration): void {
+          AppStorage.setOrCreate('colorMode', newConfig.colorMode);
+        }
+      }
+      ```
+      ```ts
+      // Index.ets
+      import { ConfigurationConstant } from '@kit.AbilityKit';
+
+      @Entry
+      @Component
+      struct MainPage {
+        @StorageLink('colorMode') @Watch('colorModeChange') colorMode: ConfigurationConstant.ColorMode = ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET;
+        @State textColor: Resource = $r("app.color.color_light");
+
+        colorModeChange() {
+          if (this.colorMode === ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT) {
+            this.textColor = $r("app.color.color_light")
+          } else {
+            this.textColor = $r("app.color.color_night")
+          }
+        }
+
+        build() {
+          Column() {
+            Text('fontColor')
+              .fontColor(this.textColor)
+          }
+        }
+      }
+      ```
+
+  - Returning different resource values based on a custom theme mode
+
+    fter enabling the optimization, you need to bind both the text content and the text color of the **Text** component to state variables. When a color mode switch event occurs, update the component attributes through those state variables. Example:
+
+      ```ts
+      // ResourceTheme.ets
+      export enum ThemeMode {
+        mode1 = 0,
+        mode2
+      }
+
+      export class ResourceTheme {
+        fontColor: ResourceColor = this.getColor();
+        themeMode: ThemeMode = ThemeMode.mode1;
+
+        setThemeMode(mode: ThemeMode) {
+          this.themeMode = mode
+        }
+        getThemeMode(): ThemeMode {
+          return this.themeMode
+        }
+        getColor(): ResourceColor {
+          if (this.themeMode === ThemeMode.mode1) {
+            return $r("app.color.color_light")
+          } else {
+            return $r("app.color.color_night")
+          }
+        }
+      }
+      ```
+      ```ts
+      // Index.ets
+      import { ConfigurationConstant } from '@kit.AbilityKit';
+      import { ResourceTheme, ThemeMode } from './ResourceTheme';
+
+      @Entry
+      @Component
+      struct MainPage {
+        @StorageLink('colorMode') @Watch('colorModeChange') colorMode: ConfigurationConstant.ColorMode = ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET;
+        resourceTheme = new ResourceTheme();
+        @State textColor: ResourceColor = this.resourceTheme.getColor();
+        @State textContent: string = this.resourceTheme.getThemeMode().toString();
+
+        colorModeChange() {
+          if (this.colorMode === ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT) {
+            this.resourceTheme.setThemeMode(ThemeMode.mode1)
+          } else {
+            this.resourceTheme.setThemeMode(ThemeMode.mode2)
+          }
+          this.textContent = this.resourceTheme.getThemeMode().toString()
+          this.textColor = this.resourceTheme.getColor()
+        }
+
+        build() {
+          Column() {
+            Text('ThemeMode is ' + this.textContent)
+              .fontColor(this.textColor)
+          }
+        }
+      }
+      ```
+
+  - Returning different resource values based on a member variable's value
+
+    After enabling the optimization, you need to bind the text color attribute to a state variable. During a color mode switch, update the state variable via a callback so that attribute changes are applied on the next mode switch. Example:
+
+      ```ts
+      // Index.ets
+      import { ConfigurationConstant } from '@kit.AbilityKit';
+
+      @Entry
+      @Component
+      struct MainPage {
+        mode: number = 0;
+        @StorageLink('colorMode') @Watch('colorModeChange') colorMode: ConfigurationConstant.ColorMode = ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET;
+        @State textColor: Resource = $r("app.color.color_light");
+
+        colorModeChange() {
+          if (this.mode % 2 === 0) {
+            return $r("app.color.color_light")
+          } else {
+            return $r("app.color.color_night")
+          }
+        }
+
+        build() {
+          Column() {
+            Button('change mode')
+              .onClick((event: ClickEvent) => {
+                this.mode++
+              })
+            Text('fontColor')
+              .fontColor(this.textColor)
+          }
+        }
+      }
+      ```
 
 ## Using Color Inversion for Quick Dark Mode Adaptation
 
-Starting from API version 20, applications with substantial existing codebases can leverage the system's color inversion capability to rapidly implement dark mode support. This approach serves as an alternative to the [resource configuration approach](#following-the-systems-color-mode) and [theme-based adaptation](../reference/apis-arkui/arkui-ts/ts-container-with-theme.md).
+Starting from API version 20, for applications with a large existing codebase that have already partially adapted to dark mode via [resource configuration](#following-the-systems-color-mode) or [theme](../reference/apis-arkui/arkui-ts/ts-container-with-theme.md) approaches, you can use the system's built‑in color inversion capability to quickly achieve full dark‑mode adaptation.
 
 While offering less granular control compared to resource configuration and theme modes, color inversion significantly reduces adaptation effort and prevents application package size growth from extensive resource definitions. This method provides visually acceptable results in most scenarios.
 
@@ -274,17 +414,19 @@ While offering less granular control compared to resource configuration and them
 
     > **NOTE**
     >
-    > 1. Before calling **OH_ArkUI_SetForceDarkConfig**, ensure that [OH_ArkUI_QueryModuleInterfaceByName(ARKUI_NATIVE_NODE, "ArkUI_NativeNodeAPI_1")](../reference/apis-arkui/capi-native-interface-h.md#oh_arkui_querymoduleinterfacebyname) is loaded.
+    > - Before calling **OH_ArkUI_SetForceDarkConfig**, ensure that [OH_ArkUI_QueryModuleInterfaceByName(ARKUI_NATIVE_NODE, "ArkUI_NativeNodeAPI_1")](../reference/apis-arkui/capi-native-interface-h.md#oh_arkui_querymoduleinterfacebyname) is loaded.
+    >
+    > - The **OH_ArkUI_SetForceDarkConfig** API must be called in the UI thread before node creation. **After a page is created, dynamically modifying the application's color inversion capability status via this API is not supported.**
     >
-    > 2. The **OH_ArkUI_SetForceDarkConfig** API must be called in the UI thread before node creation.
+    > - The **OH_ArkUI_SetForceDarkConfig** API takes effect only at the process level. Different instances cannot use different color inversion algorithms.
     >
-    > 3. The **OH_ArkUI_SetForceDarkConfig** API takes effect only at the process level. Different instances cannot use different color inversion algorithms.
+    > - The **OH_ArkUI_SetForceDarkConfig** API supports only C API implementation. This design avoids significant cross-language call overhead during frequent color mode transitions.
     >
-    > 4. The **OH_ArkUI_SetForceDarkConfig** API supports only C API implementation. This design avoids significant cross-language call overhead during frequent color mode transitions.
+    > - [DatePickerDialog](../reference/apis-arkui/arkui-ts/ts-methods-datepicker-dialog.md), [TimePickerDialog](../reference/apis-arkui/arkui-ts/ts-methods-timepicker-dialog.md), [CalendarPickerDialog](../reference/apis-arkui/arkui-ts/ts-methods-calendarpicker-dialog.md), and [TextPickerDialog](../reference/apis-arkui/arkui-ts/ts-methods-textpicker-dialog.md) do not support color inversion because they lack physical node implementations.
     >
-    > 5. [DatePickerDialog](../reference/apis-arkui/arkui-ts/ts-methods-datepicker-dialog.md), [TimePickerDialog](../reference/apis-arkui/arkui-ts/ts-methods-timepicker-dialog.md), [CalendarPickerDialog](../reference/apis-arkui/arkui-ts/ts-methods-calendarpicker-dialog.md), and [TextPickerDialog](../reference/apis-arkui/arkui-ts/ts-methods-textpicker-dialog.md) do not support color inversion because they lack physical node implementations.
+    > - Color inversion is not supported for the following properties in **TextArea**: **NODE_BORDER_COLOR**, **NODE_TEXT_RADIAL_GRADIENT**, and **NODE_TEXT_LINEAR_GRADIENT**.
     >
-    > 6. Color inversion is not supported for the following **TextArea** attributes: **NODE_BORDER_COLOR**, **NODE_TEXT_RADIAL_GRADIENT**, and **NODE_TEXT_LINEAR_GRADIENT**.
+    > - If a component has an invalid color value or **undefined** configured, the color inversion capability will not take effect.
 
     This example demonstrates the fundamental usage of the **OH_ArkUI_SetForceDarkConfig** API. Configure a custom color inversion algorithm based on actual scenarios to display appropriate color values during color mode transitions.
 
@@ -341,4 +483,4 @@ While offering less granular control compared to resource configuration and them
 
 3. Implement inversion capability control.
 
-   Use the [allowForceDark](../reference/apis-arkui/arkui-ts/ts-allow-force-dark.md#allowforcedark) attribute as an escape mechanism to disable automatic color inversion for specific components, preserving their original appearance during theme transitions.
+   Starting from API version 21, you can use the [allowForceDark](../reference/apis-arkui/arkui-ts/ts-allow-force-dark.md#allowforcedark) attribute as an escape mechanism to disable automatic color inversion for specific components, preserving their original appearance during theme transitions.

zh-cn/application-dev/ai/mindspore/mindspore-asr-based-native.md

@@ -833,3 +833,4 @@ struct Index {
 
 - [基于Native接口的MindSpore Lite ASR应用开发（C/C++）（API14）](https://gitcode.com/openharmony/applications_app_samples/tree/master/code/DocsSample/MindSporeLiteKit/MindSporeLiteCDemoASR)
 
+<!--RP1--><!--RP1End-->

zh-cn/application-dev/ai/mindspore/mindspore-guidelines-based-native.md

@@ -581,3 +581,4 @@ struct Index {
 
 - [基于Native接口的MindSpore Lite应用开发（C/C++）（API11）](https://gitcode.com/openharmony/applications_app_samples/tree/master/code/DocsSample/MindSporeLiteKit/MindSporeLiteCDemo)
 
+<!--RP1--><!--RP1End-->

zh-cn/application-dev/application-models/embeddeduiextensionability.md

@@ -39,6 +39,8 @@ EmbeddedUIExtensionAbility需要和[EmbeddedComponent](../reference/apis-arkui/a
 > EmbeddedComponent只能在UIAbility中使用，且被拉起的EmbeddedUIExtensionAbility需与UIAbility属于同一应用。<!--Del-->
 > 
 > 当前提供的EmbeddedUIExtensionAbility支持多实例场景，并且继承了UIExtensionAbility的进程模型，UIExtensionAbility的多实例及进程配置相关介绍可参见[UIExtensionAbility](uiextensionability-sys.md)。<!--DelEnd-->
+>
+> EmbeddedUIExtensionAbility支持应用分身，被拉起的EmbeddedUIExtensionAbility与UIAbility属于同一分身应用。
 
 EmbeddedUIExtensionAbility通过[UIExtensionContext](../reference/apis-ability-kit/js-apis-inner-application-uiExtensionContext.md)和[UIExtensionContentSession](../reference/apis-ability-kit/js-apis-app-ability-uiExtensionContentSession.md)提供相关能力。本文描述中称被启动的EmbeddedUIExtensionAbility为提供方，称启动EmbeddedUIExtensionAbility的EmbeddedComponent组件为使用方。
 
@@ -142,7 +144,7 @@ EmbeddedUIExtensionAbility通过[UIExtensionContext](../reference/apis-ability-k
 ## 开发EmbeddedUIExtensionAbility使用方
 
 开发者可以在[UIAbility](../reference/apis-ability-kit/js-apis-app-ability-uiAbility.md)的页面中通过[EmbeddedComponent](../reference/apis-arkui/arkui-ts/ts-container-embedded-component.md)容器加载自己应用内的[EmbeddedUIExtensionAbility](../reference/apis-ability-kit/js-apis-app-ability-embeddedUIExtensionAbility.md)。此外，EmbeddedUIExtensionAbility在[want](../reference/apis-ability-kit/js-apis-app-ability-want.md).parameters中新增了两个字段ohos.extension.processMode.hostSpecified和ohos.extension.processMode.hostInstance。
-- ohos.extension.processMode.hostSpecified控制非首次启动的EmbeddedUIExtensionAbility是否运行在同[UIExtensionAbility](../reference/apis-ability-kit/js-apis-app-ability-uiExtensionAbility.md)的进程中，参数是进程名称。例如，"ohos.extension.processMode.hostSpecified"： "com.ohos.inentexecutedemo:share"。  
+- ohos.extension.processMode.hostSpecified控制非首次启动的EmbeddedUIExtensionAbility是否运行在同[UIExtensionAbility](../reference/apis-ability-kit/js-apis-app-ability-uiExtensionAbility.md)的进程中，参数是进程名称。例如，"ohos.extension.processMode.hostSpecified"： "com.ohos.inentexecutedemo:embeddedUI"。
 - ohos.extension.processMode.hostInstance控制启动的EmbeddedUIExtensionAbility是否按照独立进程启动，传入false时，按照UIExtensionAbility的进程模型启动，入参true的时候，不管被拉起的UIExtensionAbility配置的是什么进程模型，都会新增一个进程，例如，"ohos.extension.processMode.hostInstance": "true"。
 
 ohos.extension.processMode.hostSpecified和ohos.extension.processMode.hostInstance同时配置时，hostSpecified优先，会运行在指定的进程中。

zh-cn/application-dev/basic-services/common-event/common-event-static-subscription-sys.md

@@ -52,7 +52,7 @@
    ```json
    {
      "module": {
-   	// ...
+    // ...
        "extensionAbilities": [
          {
            "name": "StaticSubscriber",
@@ -70,7 +70,7 @@
            ]
          }
        ],
-   	// ...
+    // ...
      }
    }
    ```

zh-cn/application-dev/basic-services/update/sample-server-guidelines.md

@@ -10,192 +10,192 @@
 
 1. 生成SSL证书
 
-	生成serverKey.pem和serverCert.cer两个文件，用于示例服务器的SSL协议通信。
+    生成serverKey.pem和serverCert.cer两个文件，用于示例服务器的SSL协议通信。
 
-	```
-	openssl req -newkey rsa:2048 -nodes -keyout serverKey.pem -x509 -days 365 -out serverCert.cer -subj "/C=CN/ST=GD/L=GZ/O=abc/OU=defg/CN=hijk/emailAddress=test.com"
-	```
+    ```shell
+    openssl req -newkey rsa:2048 -nodes -keyout serverKey.pem -x509 -days 365 -out serverCert.cer -subj "/C=CN/ST=GD/L=GZ/O=abc/OU=defg/CN=hijk/emailAddress=test.com"
+    ```
 
 
 
 2. 修改bundle.json
 
-	在build字段新增一个sub_component。
+    在build字段新增一个sub_component。
 
-	```
-	"sub_component": [
-		"//base/update/updateservice/server_sample:testserver",
-		...
-	],
-	```
+    ```json
+    "sub_component": [
+        "//base/update/updateservice/server_sample:testserver",
+        ...
+    ],
+    ```
 
 3. 建立代码目录
 
-	进入到update_updateservice目录下，执行以下命令，建立代码目录。
+    进入到update_updateservice目录下，执行以下命令，建立代码目录。
 
-	```
-	mkdir server_sample                            // 建立示例服务器server_sample目录
-	touch server_sample/BUILD.gn                   // 创建BUILD.gn编译文件
-	mkdir server_sample/include                    // 建立示例服务器头文件include目录
-	touch server_process.h                         // 创建server_process.h头文件
-	mkdir server_sample/src                        // 建立示例服务器c/c++文件src目录
-	touch server_sample/src/server_process.c       // 创建server_process.c文件
-	touch server_sample/src/main.cpp               // 创建main.cpp文件
-	```
+    ```shell
+    mkdir server_sample                            // 建立示例服务器server_sample目录
+    touch server_sample/BUILD.gn                   // 创建BUILD.gn编译文件
+    mkdir server_sample/include                    // 建立示例服务器头文件include目录
+    touch server_process.h                         // 创建server_process.h头文件
+    mkdir server_sample/src                        // 建立示例服务器c/c++文件src目录
+    touch server_sample/src/server_process.c       // 创建server_process.c文件
+    touch server_sample/src/main.cpp               // 创建main.cpp文件
+    ```
 
 4. 编写编译文件BUILD.gn
 
-	文件BUILD.gn一共编译两个ohos组件，一个是ohos_shared_library库文件libserver_process.z.so，另一个是ohos_executable可执行文件testserver。
+    文件BUILD.gn一共编译两个ohos组件，一个是ohos_shared_library库文件libserver_process.z.so，另一个是ohos_executable可执行文件testserver。
 
-	```
-	import("//build/ohos.gni")
+    ```gn
+    import("//build/ohos.gni")
 
-	ohos_shared_library("server_process") {
-		sources = [
-			"//base/update/updateservice/server_sample/src/server_process.c",
-		]
+    ohos_shared_library("server_process") {
+        sources = [
+            "//base/update/updateservice/server_sample/src/server_process.c",
+        ]
 
-		include_dirs = [
-			"//base/update/updateservice/server_sample/include",
-			"//third_party/openssl/include",
-		]
+        include_dirs = [
+            "//base/update/updateservice/server_sample/include",
+            "//third_party/openssl/include",
+        ]
 
-		deps = [
-			"//base/update/updater/services/log:libupdaterlog",
-			"//third_party/bounds_checking_function:libsec_static",
-			"//third_party/openssl:crypto_source",
-			"//third_party/openssl:ssl_source",
-			"//utils/native/base:utils",
-		]
+        deps = [
+            "//base/update/updater/services/log:libupdaterlog",
+            "//third_party/bounds_checking_function:libsec_static",
+            "//third_party/openssl:crypto_source",
+            "//third_party/openssl:ssl_source",
+            "//utils/native/base:utils",
+        ]
 
-		part_name = "update_service"
-	}
+        part_name = "update_service"
+    }
 
-	ohos_executable("testserver") {
-		sources = [
-			"//base/update/updateservice/server_sample/src/main.cpp",
-		]
+    ohos_executable("testserver") {
+        sources = [
+            "//base/update/updateservice/server_sample/src/main.cpp",
+        ]
 
-		include_dirs = [
-			"//base/update/updateservice/server_sample/include",
-		]
+        include_dirs = [
+            "//base/update/updateservice/server_sample/include",
+        ]
 
-		deps = [
-			"//base/update/updateservice/server_sample:server_process",
-		]
+        deps = [
+            "//base/update/updateservice/server_sample:server_process",
+        ]
 
-		part_name = "update_service"
-	}
-	```
+        part_name = "update_service"
+    }
+    ```
 
 5. 编写头文件server_process.h
 
-	文件server_process.h声明了示例服务器的接口。
+    文件server_process.h声明了示例服务器的接口。
 
-	```c++
-	#ifndef __SERVER_PROCESS_H__
-	#define __SERVER_PROCESS_H__
+    ```c++
+    #ifndef __SERVER_PROCESS_H__
+    #define __SERVER_PROCESS_H__
 
-	/*
-	Init函数：用于创建socket环境，并预设置一些属性
-	*/
-	int Init();
+    /*
+    Init函数：用于创建socket环境，并预设置一些属性
+    */
+    int Init();
 
-	/*
-	SetParam函数：所有插件参数设置的统一接口
-	*/
-	int SetParam(const char *key, const char *value);
+    /*
+    SetParam函数：所有插件参数设置的统一接口
+    */
+    int SetParam(const char *key, const char *value);
 
-	/*
-	GetParam函数：所有插件参数获取的统一接口
-	*/
-	int GetParam(const char *key, char *value);
+    /*
+    GetParam函数：所有插件参数获取的统一接口
+    */
+    int GetParam(const char *key, char *value);
 
-	/*
-	ReverseSetParamCallback函数：回调
-	*/
-	int ReverseSetParamCallback(int(*setParam)(const char *key, const char *value));
+    /*
+    ReverseSetParamCallback函数：回调
+    */
+    int ReverseSetParamCallback(int(*setParam)(const char *key, const char *value));
 
-	/*
-	Open函数：用于服务打开的接口
-	*/
-	int Open();
+    /*
+    Open函数：用于服务打开的接口
+    */
+    int Open();
 
-	/*
-	MainLoop函数：每隔100ms调用一次
-	*/
-	int MainLoop();
+    /*
+    MainLoop函数：每隔100ms调用一次
+    */
+    int MainLoop();
 
-	/*
-	Close函数，用于关闭服务并释放资源
-	*/
-	int Close();
+    /*
+    Close函数，用于关闭服务并释放资源
+    */
+    int Close();
 
-	#endif //__SERVER_PROCESS_H__
-	```
+    #endif //__SERVER_PROCESS_H__
+    ```
 
 6. 编写server_process.c、main.cpp
 
-	文件server_process.c主要声明了服务器的返回报文格式respondContent，main.cpp可参考普通SSL协议的服务器编写，注意包含相关头文件，同时加载serverKey.pem和serverCert.cer两个证书。
-
-	```c
-	#include "server_process.h"
-
-	#include <netinet/in.h>
-	#include <sys/types.h>
-	#include <sys/socket.h>
-	#include <arpa/inet.h>
-	#include <unistd.h>
-	#include <stdlib.h>
-	#include <string.h>
-	#include <stdio.h>
-
-	#include "openssl/err.h"
-	#include "openssl/ssl.h"
-
-	#define SERVER_PEM "/data/sdcard/serverKey.pem"  //使用绝对路径
-	#define SERVER_CER "/data/sdcard/serverCert.cer" //使用绝对路径
-
-	#define LOG_PRINT(fmt, ...) printf("[ServerProcess][%s:%d] " fmt "\n", __func__, __LINE__, ##__VA_ARGS__)
-	#define DO_CHECK(cond, log, ...) \
-		if (!(cond)) {\
-			LOG_PRINT(log);\
-			__VA_ARGS__;\
-			return -1;\
-		}
-
-	// 请参考server_process.h的接口予以实现，注意服务器返回的内容格式。
-	respondContent = "{"
-		"\"searchStatus\": 0,"
-		"\"errMsg\": \"success\","
-		"\"checkResults\": [{"
-			"\"versionName\": \"sampleVersionName\","
-			"\"versionCode\": \"sampleVersionCode\","
-			"\"verifyInfo\": \"sampleVerifyInfoSha256Value\","
-			"\"size\": 1234567,"
-			"\"packageType\": 1,"
-			"\"descriptPackageId\": \"abcdefg1234567ABCDEFG\","
-		"}],"
-		"\"descriptInfo\": [{"
-			"\"descriptionType\": 0,"
-			"\"content\": \"This package message is used for sampleContent\""
-		"}]"
-	"}";
-	```
+    文件server_process.c主要声明了服务器的返回报文格式respondContent，main.cpp可参考普通SSL协议的服务器编写，注意包含相关头文件，同时加载serverKey.pem和serverCert.cer两个证书。
+
+    ```c
+    #include "server_process.h"
+
+    #include <netinet/in.h>
+    #include <sys/types.h>
+    #include <sys/socket.h>
+    #include <arpa/inet.h>
+    #include <unistd.h>
+    #include <stdlib.h>
+    #include <string.h>
+    #include <stdio.h>
+
+    #include "openssl/err.h"
+    #include "openssl/ssl.h"
+
+    #define SERVER_PEM "/data/sdcard/serverKey.pem"  //使用绝对路径
+    #define SERVER_CER "/data/sdcard/serverCert.cer" //使用绝对路径
+
+    #define LOG_PRINT(fmt, ...) printf("[ServerProcess][%s:%d] " fmt "\n", __func__, __LINE__, ##__VA_ARGS__)
+    #define DO_CHECK(cond, log, ...) \
+        if (!(cond)) {\
+            LOG_PRINT(log);\
+            __VA_ARGS__;\
+            return -1;\
+        }
+
+    // 请参考server_process.h的接口予以实现，注意服务器返回的内容格式。
+    respondContent = "{"
+        "\"searchStatus\": 0,"
+        "\"errMsg\": \"success\","
+        "\"checkResults\": [{"
+            "\"versionName\": \"sampleVersionName\","
+             "\"versionCode\": \"sampleVersionCode\","
+            "\"verifyInfo\": \"sampleVerifyInfoSha256Value\","
+            "\"size\": 1234567,"
+            "\"packageType\": 1,"
+            "\"descriptPackageId\": \"abcdefg1234567ABCDEFG\","
+        "}],"
+        "\"descriptInfo\": [{"
+            "\"descriptionType\": 0,"
+            "\"content\": \"This package message is used for sampleContent\""
+        "}]"
+    "}";
+    ```
 
 7. 编译输出产物
 
-	编译输出目录会新增testserver和libserver_process.z.so两个文件。
+    编译输出目录会新增testserver和libserver_process.z.so两个文件。
 
 8. 升级包制作
 
-	参考[update_packaging_tools仓](https://gitcode.com/openharmony/update_packaging_tools)制作升级包。
+    参考[update_packaging_tools仓](https://gitcode.com/openharmony/update_packaging_tools)制作升级包。
 
 9. 启动搜包服务器
 
-	建议在开发板上新建一个纯英文路径，然后将testserver、libserver_process.z.so、serverCert.cer和serverKey.pem放到同一个目录下，进入该目录，执行以下启动命令即可启动搜包服务器。
+    建议在开发板上新建一个纯英文路径，然后将testserver、libserver_process.z.so、serverCert.cer和serverKey.pem放到同一个目录下，进入该目录，执行以下启动命令即可启动搜包服务器。
 
-	```
-	./testserver ./libserver_process.z.so &
-	```
+    ```shell
+    ./testserver ./libserver_process.z.so &
+    ```
 

zh-cn/application-dev/contacts/contacts-intro.md

@@ -68,7 +68,8 @@ Contacts Kit可以帮助开发者轻松实现联系人的增删改查等功能
    - 删除联系人，调用deleteContact接口，需要配置ohos.permission.WRITE_CONTACTS权限，权限级别为system_basic。
    - 更新联系人，调用updateContact接口，需要配置ohos.permission.WRITE_CONTACTS权限，权限级别为system_basic。
    - 查询联系人，调用queryContact接口，需要配置ohos.permission.READ_CONTACTS权限，权限级别为system_basic。
-   在申请权限前，请保证符合[权限使用的基本原则](../security/AccessToken/app-permission-mgmt-overview.md#权限使用的基本原则)。然后参考[申请应用权限](../security/AccessToken/determine-application-mode.md#system_basic等级应用申请权限的方式)声明对应权限。
+
+      在申请权限前，请保证符合[权限使用的基本原则](../security/AccessToken/app-permission-mgmt-overview.md#权限使用的基本原则)。然后参考[申请应用权限](../security/AccessToken/determine-application-mode.md#system_basic等级应用申请权限的方式)声明对应权限。
    <!--RP2End-->
 
 2. 设置一个需要的Permissions数组变量。

zh-cn/application-dev/distributedservice/abilityconnectmanager-guidelines.md

@@ -419,11 +419,9 @@ hidumper -s 4700 -a "buscenter -l remote_device_info"
 
 1. 点击设备A应用的“连接”按钮，此时设备B上的应用被拉起。
 2. 点击设备A应用的“sendMessage”按钮，此时设备B上的应用会触发on()方法的回调，接收该字符串。
-<!--Del-->
 3. 点击设备A应用的“sendData”按钮，此时设备B上的应用会触发on()方法的回调，接收该字节流。
 4. 点击设备A应用的“sendImage”按钮，此时设备B上的应用会触发on()方法的回调，接收该图片。
 5. 点击设备A应用的“启动传输流”按钮，此时设备B上的应用会触发on()方法的回调，接收传输流内容。
-<!--DelEnd-->
 6. 点击设备A或设备B应用的“disconnect”按钮，此时双端会断开连接，触发connect()接口的回调，将断连信息上报给双端应用。
 
 ## 常见问题

zh-cn/application-dev/distributedservice/camera-distributed.md

@@ -68,10 +68,10 @@
 
 **导入相机和多媒体等模块文件**
 
-   ```ts
-  import { camera } from '@kit.CameraKit';
-  import { media } from '@kit.MediaKit';
-   ```
+```ts
+import { camera } from '@kit.CameraKit';
+import { media } from '@kit.MediaKit';
+```
 
 **赋予应用访问权限**
 

zh-cn/application-dev/enterprise-device-management/enterprise-extensionAbility.md

@@ -57,7 +57,7 @@ export default class EnterpriseAdminAbility extends EnterpriseAdminExtensionAbil
 };
 ```
 
-​	4.在工程Module对应的[module.json5](../quick-start/module-configuration-file.md)配置文件中注册ServiceExtensionAbility，type标签需要设置为“enterpriseAdmin”，srcEntry标签表示当前ExtensionAbility组件所对应的代码路径。
+​4.在工程Module对应的[module.json5](../quick-start/module-configuration-file.md)配置文件中注册ServiceExtensionAbility，type标签需要设置为“enterpriseAdmin”，srcEntry标签表示当前ExtensionAbility组件所对应的代码路径。
 
 ```json
 "extensionAbilities": [

zh-cn/application-dev/internationalization/l10n-hard-coding-concatenate.md

@@ -11,7 +11,7 @@
 
 本地化的关键操作是资源文件的翻译，为提升翻译可行性在开发过程中应避免硬编码与拼接。
 
-不同于从外部获取数据或在运行时生成数据，硬编码是指将数据、参数、常量等直接嵌入到程序中，实现特定功能。在界面中显示的文字，包括图片中的文字、音频、字幕等，不能采用硬编码，避免难以本地化或增加本地化的工作量。同时，界面上的一句完整文本，不应由多个片段直接前后拼接而成，这可能导致翻译时无法获取句子完整信息，从而导致翻译错误或语义表达顺序问题。例如，下图中将“Rain tomorrow”和“Bring  an umbrella”两句直接拼接在一起，造成语句大小写问题。
+与从外部获取数据或在运行时动态生成数据不同，硬编码是将数据、参数或常量直接写入程序代码中，从而实现特定功能。在界面中显示的文字，包括图片中的文字、音频、字幕等，不能采用硬编码，避免难以本地化或增加本地化的工作量。同时，界面上的一句完整文本，不应由多个片段直接前后拼接而成，这可能导致翻译时无法获取句子完整信息，从而导致翻译错误或语义表达顺序问题。例如，下图中将“Rain tomorrow”和“Bring  an umbrella”两句直接拼接在一起，造成语句大小写问题。
 
 ![zh-cn_image_0000001784263061](figures/zh-cn_image_0000001784263061.png)
 

zh-cn/application-dev/internationalization/pseudo-i18n-testing-translation.md

@@ -44,4 +44,4 @@
 
 3. 检查字符串拼接问题。如果存在连续的伪翻译格式字符串出现在同一个控件里，例如“[字符串1][字符串2]”，说明存在字符串拼接。
 
-4. 检查多语言文字显示问题。如果伪翻译文字未能正常显示，出现类似方块、空缺或文字显示不完整等现象，说明多语言显示存在异常。
+4. 检查多语言文字显示问题。如果伪翻译文字未能正常显示，出现类似方块、空白或文字显示不完整等现象，说明多语言显示存在异常。

zh-cn/application-dev/napi/fdsan.md

@@ -127,7 +127,7 @@ uint64_t fdsan_get_owner_tag(int fd);
 
 | 名称                       | 类型               | 说明                                                         |
 | -------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
-| `tag` | uint64_t | ownership tag。     |
+| `fd` | int | 文件描述符。     |
 
 **返回值：** 返回对应fd的tag。
 

zh-cn/application-dev/napi/jsvm-data-types-interfaces.md

@@ -488,7 +488,7 @@ static JSVM_Value Add(JSVM_Env env, JSVM_CallbackInfo info) {
     JSVM_Value args[2];
     OH_JSVM_GetCbInfo(env, info, &argc, args, NULL, NULL);
     double num1 = 0;
-	double num2 = 0;
+    double num2 = 0;
     OH_JSVM_GetValueDouble(env, args[0], &num1);
     OH_JSVM_GetValueDouble(env, args[1], &num2);
     JSVM_Value sum = nullptr;
@@ -610,8 +610,8 @@ const concat = (...args) => args.reduce((a, b) => a + b);
 )JS";
 
 static void RunScriptWithOption(JSVM_Env env, string& src,
-								uint8_t** dataPtr = nullptr,
-								size_t* lengthPtr = nullptr) {
+                                uint8_t** dataPtr = nullptr,
+                                size_t* lengthPtr = nullptr) {
     JSVM_HandleScope handleScope;
     OH_JSVM_OpenHandleScope(env, &handleScope);
 
@@ -623,34 +623,34 @@ static void RunScriptWithOption(JSVM_Env env, string& src,
     size_t length = lengthPtr ? *lengthPtr : 0;
     JSVM_Script script;
     // 编译js代码
-	JSVM_ScriptOrigin origin {
-	    // 以包名 helloworld 为例, 假如存在对应的 sourcemap, sourcemap 的路径可以是 /data/app/el2/100/base/com.example.helloworld/files/index.js.map
-	    .sourceMapUrl = "/data/app/el2/100/base/com.example.helloworld/files/index.js.map",
-	    // 源文件名字
-	    .resourceName = "index.js",
-	    // script 在源文件中的起始行列号
-	    .resourceLineOffset = 0,
-	    .resourceColumnOffset = 0,
-	};
-	JSVM_CompileOptions option[3];
-	option[0] = {
-		.id = JSVM_COMPILE_MODE,
-		.content = { .num = compilMode }
-	};
-	JSVM_CodeCache codeCache = {
-		.cache = data,
-		.length = length
-	};
-	option[1] = {
-		.id = JSVM_COMPILE_CODE_CACHE,
-		.content = { .ptr = &codeCache }
-	};
-	// JSVM_COMPILE_ENABLE_SOURCE_MAP 选项默认值为 false，若为 true 那么对应的 sourceMapUrl 必须不为空
-	option[2] = {
-		.id = JSVM_COMPILE_ENABLE_SOURCE_MAP,
-		.content = { .boolean = true }
-	};
-	OH_JSVM_CompileScriptWithOptions(env, jsSrc, 3, option, &script);
+    JSVM_ScriptOrigin origin {
+        // 以包名 helloworld 为例, 假如存在对应的 sourcemap, sourcemap 的路径可以是 /data/app/el2/100/base/com.example.helloworld/files/index.js.map
+        .sourceMapUrl = "/data/app/el2/100/base/com.example.helloworld/files/index.js.map",
+        // 源文件名字
+        .resourceName = "index.js",
+        // script 在源文件中的起始行列号
+        .resourceLineOffset = 0,
+        .resourceColumnOffset = 0,
+    };
+    JSVM_CompileOptions option[3];
+    option[0] = {
+        .id = JSVM_COMPILE_MODE,
+        .content = { .num = compilMode }
+    };
+    JSVM_CodeCache codeCache = {
+        .cache = data,
+        .length = length
+    };
+    option[1] = {
+        .id = JSVM_COMPILE_CODE_CACHE,
+        .content = { .ptr = &codeCache }
+    };
+    // JSVM_COMPILE_ENABLE_SOURCE_MAP 选项默认值为 false，若为 true 那么对应的 sourceMapUrl 必须不为空
+    option[2] = {
+        .id = JSVM_COMPILE_ENABLE_SOURCE_MAP,
+        .content = { .boolean = true }
+    };
+    OH_JSVM_CompileScriptWithOptions(env, jsSrc, 3, option, &script);
 
     JSVM_Value result;
     // 执行js代码
@@ -679,18 +679,18 @@ static void RunScript(JSVM_Env env, string& src,
     JSVM_Script script;
     // 编译js代码
     if (withOrigin) {
-	    JSVM_ScriptOrigin origin {
-	        // 以包名 helloworld 为例, 假如存在对应的 sourcemap, sourcemap 的路径可以是 /data/app/el2/100/base/com.example.helloworld/files/index.js.map
-		    .sourceMapUrl = "/data/app/el2/100/base/com.example.helloworld/files/index.js.map",
-		    // 源文件名字
-		    .resourceName = "index.js",
-		    // script 在源文件中的起始行列号
-		    .resourceLineOffset = 0,
-		    .resourceColumnOffset = 0,
-	    };
-		OH_JSVM_CompileScriptWithOrigin(env, jsSrc, data, length, true, &cacheRejected, &origin, &script);
+        JSVM_ScriptOrigin origin {
+            // 以包名 helloworld 为例, 假如存在对应的 sourcemap, sourcemap 的路径可以是 /data/app/el2/100/base/com.example.helloworld/files/index.js.map
+            .sourceMapUrl = "/data/app/el2/100/base/com.example.helloworld/files/index.js.map",
+            // 源文件名字
+            .resourceName = "index.js",
+            // script 在源文件中的起始行列号
+            .resourceLineOffset = 0,
+            .resourceColumnOffset = 0,
+        };
+        OH_JSVM_CompileScriptWithOrigin(env, jsSrc, data, length, true, &cacheRejected, &origin, &script);
     } else {
-	    OH_JSVM_CompileScript(env, jsSrc, data, length, true, &cacheRejected, &script);
+        OH_JSVM_CompileScript(env, jsSrc, data, length, true, &cacheRejected, &script);
     }
     printf("Code cache is %s\n", cacheRejected ? "rejected" : "used");
 

zh-cn/application-dev/napi/jsvm-frequently-questions.md

@@ -16,7 +16,7 @@
 
 1. Q：在`OH_JSVM_RunScript`或`OH_JSVM_CallFunction`时crash，调用栈顶层为`SetReturnValue`
 
-   ```
+   ```txt
    #00 pc 0000000000c68ef0 /system/lib64/ndk/libjsvm.so(v8impl::(anonymous namespace)::FunctionCallbackWrapper::SetReturnValue(JSVM_Value__*)+16)
    #01 pc 0000000000c5ad30 /system/lib64/ndk/libjsvm.so(v8impl::(anonymous namespace)::FunctionCallbackWrapper::Invoke(v8::FunctionCallbackInfo<v8::Value> const&)+332)
    #02 pc 00000000014a9e58 /system/lib64/ndk/libjsvm.so
@@ -50,9 +50,9 @@
 
    A：检查`JSVM_CallbackStruct`是否为栈上变量。如果跨函数使用，需确保`JSVM_CallbackStruct`的生命周期长于`JSVM_Env`的生命周期。
 
-   ```
+   ```c++
    func {
-   	// ...
+      // ...
        JSVM_CallbackStruct param[] = {
            {.data = nullptr, .callback = ConsoleInfo},
            {.data = nullptr, .callback = Add},
@@ -78,7 +78,7 @@
 
 4. Q：在虚拟机引擎实例中创建JS类型实例崩溃（如`OH_JSVM_CreateDouble`），调用栈如下
 
-   ```
+   ```txt
    #00 pc 0000000001d209e4/system/lib64/ndk/libjsvm.so(v8::base::0S::Abort()+28)
    #01 pc 0000000001408480/system/lib64/ndk/libjsvm.so(v8::Utils::ReportApiFailure(char const*,char const*)+124)
    #02 pc 00000000015c99b8/system/lib64/ndk/libjsvm.so(v8::internal::HandleScope::Extend(v8::internal::Isolate*+200)

zh-cn/application-dev/napi/jsvm-guidelines.md

@@ -424,9 +424,9 @@ std::string sourcecodestr = R"JS(
     FunctionNameInJSContext() // 调用成功
     consolelog(FunctionNameInJSContext.name) // 打印 "NativeFunction"
     try {
-    	NativeFunction() // 无法找到该函数，抛出异常
+        NativeFunction() // 无法找到该函数，抛出异常
     } catch (e) {
-    	consolelog(e.message)
+        consolelog(e.message)
     }
 )JS";
 ```

zh-cn/application-dev/napi/qos-guidelines.md

@@ -22,7 +22,7 @@ QoS(quality-of-service)，即服务质量，在OpenHarmony中QoS特性主要指
 | QOS_DEFAULT | 默认。 | 任务完成需要几秒钟。 |
 | QOS_USER_INITIATED | 用户触发并且可见进展的任务，例如打开文档。 | 任务在几秒钟之内完成。 |
 | QOS_DEADLINE_REQUEST | 越快越好的关键任务，如页面加载。 | 任务几乎是瞬间完成的。 |
-| QOS_USER_INTERACTIVE	 | 用户交互任务（UI线程、刷新界面、动效）。 | 任务是即时的。 |
+| QOS_USER_INTERACTIVE | 用户交互任务（UI线程、刷新界面、动效）。 | 任务是即时的。 |
 
 QoS等级定义为枚举类型QoS_Level，如上表所示；枚举值定义如下。
 ### QoS_Level声明
@@ -128,7 +128,7 @@ QoS_Level level
 为某个任务设置指定的QoS等级。设置当前任务的QoS等级。开发者可以根据当前任务的重要程度，为其标记不同等级的QoS，从而获得不同的调度供给。参考[QoS实践指导](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-thread-priority-setting)。
 
 **样例**
-```
+```c++
 #include <stdio.h>
 #include "qos/qos.h"
 
@@ -165,7 +165,7 @@ int OH_QoS_ResetThreadQoS();
 取消某个任务设置的QoS等级。取消当前任务的QoS等级。参考[QoS实践指导](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-thread-priority-setting)。
 
 **样例**
-```
+```c++
 #include <stdio.h>
 #include "qos/qos.h"
 
@@ -204,7 +204,7 @@ QoS_Level *level
 获取某个任务之前最近一次设置的QoS等级；如果之前未设置任何QoS等级，则返回-1。查看当前任务的QoS等级。参考[QoS实践指导](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-thread-priority-setting)。
 
 **样例**
-```
+```c++
 #include <stdio.h>
 #include "qos/qos.h"
 

zh-cn/application-dev/napi/use-call-threadsafe-function-with-priority.md

@@ -30,11 +30,10 @@ napi_status napi_call_threadsafe_function_with_priority(napi_threadsafe_function
 
 - 功能实现
 
-  <!-- @[napi_call_threadsafe_function_with_priority_cpp](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkTS/NodeAPI/NodeAPIClassicUseCases/NodeAPIApplicationScenario/entry/src/main/cpp/napi_init.cpp) -->
+  <!-- @[napi_call_threadsafe_function_with_priority_cpp](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkTS/NodeAPI/NodeAPIClassicUseCases/NodeAPIApplicationScenario/entry/src/main/cpp/napi_init.cpp) -->  
   
   ``` C++
   #include "napi/native_api.h"
-  #include <future>
   // ...
   #include <hilog/log.h>
   // ...

zh-cn/application-dev/napi/use-jsvm-about-array.md

@@ -12,7 +12,7 @@
 
 ## 基本概念
 
-使用 JSVM-API 接口进行数组（array）相关开发时，涉及的基本概念主要包括数组的创建、访问、修改、遍历以及与数组相关的操作。这些概念对于理解在 JSVM 模块中与 JavaScript 数组交互非常重要。以下是一些关键概念：	
+使用 JSVM-API 接口进行数组（array）相关开发时，涉及的基本概念主要包括数组的创建、访问、修改、遍历以及与数组相关的操作。这些概念对于理解在 JSVM 模块中与 JavaScript 数组交互非常重要。以下是一些关键概念：
 
 - **数组的创建**：若在 JSVM 模块中需要创建新的 JavaScript 数组时，可以使用提供的 OH_JSVM_CreateArray 接口创建数组，将传递给 JavaScript 层。
 - **数组相关操作**：在 JSVM 模块中通过对应的接口获取 JavaScript 数组的长度、检索指定索引处的元素、设置指定索引的元素值，从而实现 JSVM 模块与 JavaScript 数组的交互。
@@ -96,7 +96,7 @@ const char *srcCallNative = R"JS(
 <!-- @[oh_jsvm_create_array](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkTS/JSVMAPI/JsvmUsageGuide/JsvmAboutArray/createarray/src/main/cpp/hello.cpp) -->
 
 预计的输出结果：
-```
+```txt
 JSVM CreateArray success
 ```
 ### OH_JSVM_CreateArrayWithLength
@@ -157,7 +157,7 @@ testCreateArrayWithLength(num);
 <!-- @[oh_jsvm_create_array_with_length](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkTS/JSVMAPI/JsvmUsageGuide/JsvmAboutArray/createarraywithlength/src/main/cpp/hello.cpp) -->
 
 预计的输出结果：
-```
+```txt
 JSVM CreateArrayWithLength success
 ```
 ### OH_JSVM_CreateTypedarray
@@ -261,7 +261,7 @@ createTypedArray(type.INT32_ARRAY);
 <!-- @[oh_jsvm_create_typedarray](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkTS/JSVMAPI/JsvmUsageGuide/JsvmAboutArray/createtypedarray/src/main/cpp/hello.cpp) -->
 
 预计的输出结果：
-```
+```txt
 JSVM CreateTypedArray success
 JSVM CreateTypedArray success
 ```
@@ -366,7 +366,7 @@ const char *srcCallNative = R"JS(
 <!-- @[oh_jsvm_create_dataview](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkTS/JSVMAPI/JsvmUsageGuide/JsvmAboutArray/createdataview/src/main/cpp/hello.cpp) -->
 
 预计的输出结果：
-```
+```txt
 CreateDataView success, returnLength: 12
 JSVM CreateDataView success, isArraybuffer: 1
 JSVM CreateDataView success, returnOffset: 4
@@ -429,7 +429,7 @@ getArrayLength(data);
 <!-- @[oh_jsvm_get_array_length](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkTS/JSVMAPI/JsvmUsageGuide/JsvmAboutArray/getarraylength/src/main/cpp/hello.cpp) -->
 
 预计的输出结果：
-```
+```txt
 JSVM length: 6
 ```
 ### OH_JSVM_GetTypedarrayInfo
@@ -544,7 +544,7 @@ getTypedArrayInfo(new Int8Array(1), 3);
 <!-- @[oh_jsvm_get_typedarray_info](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkTS/JSVMAPI/JsvmUsageGuide/JsvmAboutArray/gettypedarrayinfo/src/main/cpp/hello.cpp) -->
 
 预计的输出结果：
-```
+```txt
 JSVM GetTypedArrayInfo success, JSVM_INT8_ARRAY: 1
 JSVM GetTypedArrayInfo success, length: 5
 JSVM GetTypedArrayInfo success, isArrayBuffer: 1
@@ -653,7 +653,7 @@ getDataViewInfo(data, isarraybuffer);
 <!-- @[oh_jsvm_get_dataview_info](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkTS/JSVMAPI/JsvmUsageGuide/JsvmAboutArray/getdataviewinfo/src/main/cpp/hello.cpp) -->
 
 预计的输出结果：
-```
+```txt
 JSVM GetDataViewInfo success, byteLength: 2
 JSVM GetDataViewInfo fail
 JSVM GetDataViewInfo success, isArrayBuffer: 1
@@ -705,7 +705,7 @@ isArray(data);
 <!-- @[oh_jsvm_is_array](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkTS/JSVMAPI/JsvmUsageGuide/JsvmAboutArray/isarray/src/main/cpp/hello.cpp) -->
 
 预计的输出结果：
-```
+```txt
 JSVM IsArray success, IsArray: 1
 ```
 ### OH_JSVM_SetElement
@@ -754,7 +754,7 @@ setElement(data, 3, undefined);
 <!-- @[oh_jsvm_set_element](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkTS/JSVMAPI/JsvmUsageGuide/JsvmAboutArray/setelement/src/main/cpp/hello.cpp) -->
 
 预计的输出结果：
-```
+```txt
 JSVM SetElement success
 ```
 ### OH_JSVM_GetElement
@@ -805,7 +805,7 @@ getElement(arr, 3);
 <!-- @[oh_jsvm_get_element](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkTS/JSVMAPI/JsvmUsageGuide/JsvmAboutArray/getelement/src/main/cpp/hello.cpp) -->
 
 预计的输出结果：
-```
+```txt
 JSVM GetElement success
 ```
 ### OH_JSVM_HasElement
@@ -860,7 +860,7 @@ hasElement(arr, 4);
 <!-- @[oh_jsvm_has_element](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkTS/JSVMAPI/JsvmUsageGuide/JsvmAboutArray/haselement/src/main/cpp/hello.cpp) -->
 
 预计的输出结果：
-```
+```txt
 JSVM hasElement: 1
 JSVM hasElement: 0
 ```
@@ -915,7 +915,7 @@ deleteElement(arr, 0);
 <!-- @[oh_jsvm_delete_element](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkTS/JSVMAPI/JsvmUsageGuide/JsvmAboutArray/deleteelement/src/main/cpp/hello.cpp) -->
 
 预计的输出结果：
-```
+```txt
 JSVM DeleteElement: 1
 ```
 ### OH_JSVM_IsDataview
@@ -965,7 +965,7 @@ isDataView(dataView);
 <!-- @[oh_jsvm_is_dataview](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkTS/JSVMAPI/JsvmUsageGuide/JsvmAboutArray/isdataview/src/main/cpp/hello.cpp) -->
 
 预计的输出结果：
-```
+```txt
 JSVM IsDataView: 1
 ```
 ### OH_JSVM_IsTypedarray
@@ -1012,6 +1012,6 @@ isTypedarray(new Uint16Array([1, 2, 3, 4]));
 <!-- @[oh_jsvm_is_typedarray](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkTS/JSVMAPI/JsvmUsageGuide/JsvmAboutArray/istypedarray/src/main/cpp/hello.cpp) -->
 
 预计的输出结果：
-```
+```txt
 JSVM IsTypedarray: 1
 ```

zh-cn/application-dev/napi/use-napi-ark-runtime.md

@@ -14,141 +14,154 @@
 
 一个进程最多只能创建64个运行时环境。
 
-## 使用示例
+### 示例代码
 
-1. 接口声明、编译配置以及模块注册。
+- 接口声明
 
-   **接口声明**
-
-   ```ts
+   <!-- @[napi_ark_runtime_dts](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkTS/NodeAPI/NodeAPIClassicUseCases/NodeAPIApplicationScenario/entry/src/main/cpp/types/libentry/Index.d.ts) -->
+   
+   ``` TypeScript
    // index.d.ts
    export const createArkRuntime: () => object;
    ```
-   <!-- @[napi_ark_runtime_dts](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkTS/NodeAPI/NodeAPIClassicUseCases/NodeAPIApplicationScenario/entry/src/main/cpp/types/libentry/Index.d.ts) -->
-
-   **编译配置**
-
-   ```txt
-   // CMakeLists.txt
-   # the minimum version of CMake.
-   cmake_minimum_required(VERSION 3.4.1)
-   project(MyApplication)
-
-   set(NATIVERENDER_ROOT_PATH ${CMAKE_CURRENT_SOURCE_DIR})
-
-   include_directories(${NATIVERENDER_ROOT_PATH}
-                       ${NATIVERENDER_ROOT_PATH}/include)
-   add_library(entry SHARED create_ark_runtime.cpp)
-   target_link_libraries(entry PUBLIC libace_napi.z.so libhilog_ndk.z.so)
-   ```
 
-   在当前模块的build-profile.json5文件中进行以下配置：
-   ```json
-   {
-       "buildOption" : {
-           "arkOptions" : {
-               "runtimeOnly" : {
-                   "sources": [
-                       "./src/main/ets/pages/ObjectUtils.ets"
-                   ]
-               }
-           }
-       }
-   }
-   ```
-   <!-- @[napi_ark_runtime_build](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkTS/NodeAPI/NodeAPIClassicUseCases/NodeAPIApplicationScenario/entry/build-profile.json5) -->
-
-   **模块注册**
-
-   ```cpp
-   // create_ark_runtime.cpp
-   EXTERN_C_START
-   static napi_value Init(napi_env env, napi_value exports)
-   {
-       napi_property_descriptor desc[] = {
-           { "createArkRuntime", nullptr, CreateArkRuntime, nullptr, nullptr, nullptr, napi_default, nullptr }
-       };
-       napi_define_properties(env, exports, sizeof(desc) / sizeof(desc[0]), desc);
-       return exports;
-   }
-   EXTERN_C_END
-
-   static napi_module nativeModule = {
-       .nm_version = 1,
-       .nm_flags = 0,
-       .nm_filename = nullptr,
-       .nm_register_func = Init,
-       .nm_modname = "entry",
-       .nm_priv = nullptr,
-       .reserved = { 0 },
-   };
-
-   extern "C" __attribute__((constructor)) void RegisterQueueWorkModule()
-   {
-       napi_module_register(&nativeModule);
-   }
-   ```
-   <!-- @[napi_ark_runtime_cpp](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkTS/NodeAPI/NodeAPIClassicUseCases/NodeAPIApplicationScenario/entry/src/main/cpp/napi_init.cpp) -->
-
-2. 新建线程并创建ArkTS基础运行时环境，加载自定义模块请参考[napi_load_module_with_info](./use-napi-load-module-with-info.md)。
-
-   ```cpp
-   // create_ark_runtime.cpp
-   #include <pthread.h>
-   #include "napi/native_api.h"
-
-   static void *CreateArkRuntimeFunc(void *arg)
-   {
-       // 1. 创建基础运行环境
-       napi_env env;
-       napi_status ret = napi_create_ark_runtime(&env);
-       if (ret != napi_ok) {
-           return nullptr;
-       }
-
-       // 2. 加载自定义模块
-       napi_value objUtils;
-       ret = napi_load_module_with_info(env, "entry/src/main/ets/pages/ObjectUtils", "com.example.myapplication/entry", &objUtils);
-       if (ret != napi_ok) {
-           return nullptr;
-       }
-
-       // 3. 使用ArkTS中的logger
-       napi_value logger;
-       ret = napi_get_named_property(env, objUtils, "Logger", &logger);
-       if (ret != napi_ok) {
-           return nullptr;
-       }
-       ret = napi_call_function(env, objUtils, logger, 0, nullptr, nullptr);
-
-       // 4. 销毁ArkTS环境
-       ret = napi_destroy_ark_runtime(&env);
-       return nullptr;
-   }
-
-   static napi_value CreateArkRuntime(napi_env env, napi_callback_info info)
-   {
-       pthread_t tid;
-       pthread_create(&tid, nullptr, CreateArkRuntimeFunc, nullptr);
-       pthread_join(tid, nullptr);
-       return nullptr;
-   }
-   ```
-   <!-- @[napi_ark_runtime_cpp](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkTS/NodeAPI/NodeAPIClassicUseCases/NodeAPIApplicationScenario/entry/src/main/cpp/napi_init.cpp) -->
-
-3. 编写ArkTS侧示例代码。
-
-   ```ts
-   // ObjectUtils.ets
-   export function Logger() {
-       console.info("print log");
-   }
-   ```
-   <!-- @[napi_ark_runtime_utils](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkTS/NodeAPI/NodeAPIClassicUseCases/NodeAPIApplicationScenario/entry/src/main/ets/pages/ObjectUtils.ets) -->
-   ```ts
-   // ArkTS侧调用接口
-   import testNapi from 'libentry.so';
-
-   testNapi.createArkRuntime();
-   ```
-   <!-- @[napi_ark_runtime_ets](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkTS/NodeAPI/NodeAPIClassicUseCases/NodeAPIApplicationScenario/entry/src/main/ets/pages/Index.ets) -->
+- 编译配置
+
+  ``` txt
+  # the minimum version of CMake.
+  cmake_minimum_required(VERSION 3.5.0)
+  project(MyApplication3)
+
+  set(NATIVERENDER_ROOT_PATH ${CMAKE_CURRENT_SOURCE_DIR})
+  if(DEFINED PACKAGE_FIND_FILE)
+      include(${PACKAGE_FIND_FILE})
+  endif()
+  add_definitions( "-DLOG_TAG=\"LOG_TAG\"" )
+  include_directories(${NATIVERENDER_ROOT_PATH}
+                      ${NATIVERENDER_ROOT_PATH}/include)
+
+  add_library(entry SHARED napi_init.cpp)
+  target_link_libraries(entry PUBLIC libace_napi.z.so libhilog_ndk.z.so)
+  ```
+
+  在当前模块的build-profile.json5文件中进行以下配置：
+
+  <!-- @[napi_ark_runtime_build](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkTS/NodeAPI/NodeAPIClassicUseCases/NodeAPIApplicationScenario/entry/build-profile.json5) -->
+  
+  ``` JSON5
+  "buildOption": {
+    "arkOptions" : {
+      "runtimeOnly" : {
+        "sources": [
+          "./src/main/ets/pages/ObjectUtils.ets"
+        ]
+      }
+    },
+  ```
+
+- 模块注册
+
+  ```cpp
+  // create_ark_runtime.cpp
+  EXTERN_C_START
+  static napi_value Init(napi_env env, napi_value exports)
+  {
+      napi_property_descriptor desc[] = {
+          { "createArkRuntime", nullptr, CreateArkRuntime, nullptr, nullptr, nullptr, napi_default, nullptr }
+      };
+      napi_define_properties(env, exports, sizeof(desc) / sizeof(desc[0]), desc);
+      return exports;
+  }
+  EXTERN_C_END
+
+  static napi_module nativeModule = {
+      .nm_version = 1,
+      .nm_flags = 0,
+      .nm_filename = nullptr,
+      .nm_register_func = Init,
+      .nm_modname = "entry",
+      .nm_priv = nullptr,
+      .reserved = { 0 },
+  };
+
+  extern "C" __attribute__((constructor)) void RegisterQueueWorkModule()
+  {
+      napi_module_register(&nativeModule);
+  }
+  ```
+
+- 功能实现  
+  新建线程并创建ArkTS基础运行时环境，加载自定义模块请参考[napi_load_module_with_info](./use-napi-load-module-with-info.md)。
+
+  <!-- @[napi_ark_runtime_cpp](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkTS/NodeAPI/NodeAPIClassicUseCases/NodeAPIApplicationScenario/entry/src/main/cpp/napi_init.cpp) -->
+  
+  ``` C++
+  #include "napi/native_api.h"
+  #include <pthread.h>
+  // ...
+  static void *CreateArkRuntimeFunc(void *arg)
+  {
+      // 1. 创建基础运行环境
+      napi_env env;
+      napi_status ret = napi_create_ark_runtime(&env);
+      if (ret != napi_ok) {
+          return nullptr;
+      }
+  
+      napi_handle_scope scope;
+      napi_open_handle_scope(env, &scope);
+  
+      // 2. 加载自定义模块
+      napi_value objUtils;
+      ret = napi_load_module_with_info(env, "entry/src/main/ets/pages/ObjectUtils", "com.example.myapplication/entry",
+                                       &objUtils);
+      if (ret != napi_ok) {
+          return nullptr;
+      }
+  
+      // 3. 使用ArkTS中的logger
+      napi_value logger;
+      ret = napi_get_named_property(env, objUtils, "Logger", &logger);
+      if (ret != napi_ok) {
+          return nullptr;
+      }
+      ret = napi_call_function(env, objUtils, logger, 0, nullptr, nullptr);
+  
+      napi_close_handle_scope(env, scope);
+  
+      // 4. 销毁ArkTS环境
+      ret = napi_destroy_ark_runtime(&env);
+  
+      return nullptr;
+  }
+  
+  static napi_value CreateArkRuntime(napi_env env, napi_callback_info info)
+  {
+      pthread_t tid;
+      pthread_create(&tid, nullptr, CreateArkRuntimeFunc, nullptr);
+      pthread_join(tid, nullptr);
+      return nullptr;
+  }
+  ```
+
+- ArkTS导入头文件
+  ``` TypeScript
+  import testNapi from 'libentry.so';
+  ```
+
+- ArkTS代码示例
+  
+  <!-- @[napi_ark_runtime_utils](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkTS/NodeAPI/NodeAPIClassicUseCases/NodeAPIApplicationScenario/entry/src/main/ets/pages/ObjectUtils.ets) -->
+  
+  ``` TypeScript
+  export function Logger() {
+    console.info('print log');
+  }
+  ```
+
+  <!-- @[napi_ark_runtime_ets](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkTS/NodeAPI/NodeAPIClassicUseCases/NodeAPIApplicationScenario/entry/src/main/ets/pages/Index.ets) -->
+  
+  ``` TypeScript
+  // index.ets
+  testNapi.createArkRuntime();
+  ```

zh-cn/application-dev/napi/use-napi-event-loop.md

@@ -16,14 +16,14 @@
 
 ### 示例代码
 - 功能实现
-  <!-- @[napi_event_loop_cpp](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkTS/NodeAPI/NodeAPIClassicUseCases/NodeAPIApplicationScenario/entry/src/main/cpp/napi_init.cpp) -->
+  <!-- @[napi_event_loop_cpp](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkTS/NodeAPI/NodeAPIClassicUseCases/NodeAPIApplicationScenario/entry/src/main/cpp/napi_init.cpp) -->  
   
   ``` C++
   #include "napi/native_api.h"
-  // ...
   #include <pthread.h>
   #include <hilog/log.h>
   #include <napi/common.h>
+  static constexpr int INT_ARG_2 = 2; // 入参索引
   // ...
   static napi_value ResolvedCallback(napi_env env, napi_callback_info info)
   {

zh-cn/application-dev/napi/use-napi-process.md

@@ -229,7 +229,9 @@ struct Index {
 
 ### 代码调试设备选择
 
-强烈建议开发者使用真机而非预览器进行代码调试。预览器的主要功能是调试界面组块，若用于功能调试可能会出现如下报错：
+建议开发者优先使用真机进行代码调试，若无真机或者真机无权限则可使用模拟器进行调试，模拟器调试中遇到的问题详见[bm工具](../tools/bm-tool.md#bm工具错误码)
+
+开发者不要使用预览器进行功能调试，预览器的主要功能是调试界面组件，若用于功能调试可能会出现如下报错：
 
 - TypeError: undefined is not callable
 

zh-cn/application-dev/napi/use-napi-thread-safety.md

@@ -122,9 +122,9 @@ napi_create_threadsafe_function是Node-API接口之一，用于创建一个线
        napi_value resolvedCallback = nullptr;
        napi_value rejectedCallback = nullptr;
        napi_create_function(env, "resolvedCallback", NAPI_AUTO_LENGTH, ResolvedCallback, data,
-   					     &resolvedCallback);
+                         &resolvedCallback);
        napi_create_function(env, "rejectedCallback", NAPI_AUTO_LENGTH, RejectedCallback, data,
-   					     &rejectedCallback);
+                         &rejectedCallback);
        napi_value argv[2] = {resolvedCallback, rejectedCallback};
        napi_call_function(env, promise, thenFunc, INT_NUM_2, argv, nullptr);
    }

zh-cn/application-dev/network/net-connection-manager.md

@@ -36,7 +36,8 @@
 ## 接收指定网络的状态变化通知
 
 1. 声明接口调用所需要的权限：ohos.permission.GET_NETWORK_INFO。
-此权限级别为normal，在申请权限前，请保证符合[权限使用的基本原则](../security/AccessToken/app-permission-mgmt-overview.md#权限使用的基本原则)。然后参考[访问控制-声明权限](../security/AccessToken/declare-permissions.md)声明对应权限。
+
+   此权限级别为normal，在申请权限前，请保证符合[权限使用的基本原则](../security/AccessToken/app-permission-mgmt-overview.md#权限使用的基本原则)。然后参考[访问控制-声明权限](../security/AccessToken/declare-permissions.md)声明对应权限。
 
 2. 从@kit.NetworkKit中导入connection命名空间。
 
@@ -197,7 +198,8 @@ function socketTest() {
 ## 获取所有注册的网络
 
 1. 声明接口调用所需要的权限：ohos.permission.GET_NETWORK_INFO。
-此权限级别为normal，在申请权限前，请保证符合[权限使用的基本原则](../security/AccessToken/app-permission-mgmt-overview.md#权限使用的基本原则)。然后参考[访问控制-声明权限](../security/AccessToken/declare-permissions.md)声明对应权限。
+
+   此权限级别为normal，在申请权限前，请保证符合[权限使用的基本原则](../security/AccessToken/app-permission-mgmt-overview.md#权限使用的基本原则)。然后参考[访问控制-声明权限](../security/AccessToken/declare-permissions.md)声明对应权限。
 
 2. 示例代码
     ```ts
@@ -216,7 +218,8 @@ function socketTest() {
 ## 查询默认网络或者指定网络的连接信息
 
 1. 声明接口调用所需要的权限：ohos.permission.GET_NETWORK_INFO。
-此权限级别为normal，在申请权限前，请保证符合[权限使用的基本原则](../security/AccessToken/app-permission-mgmt-overview.md#权限使用的基本原则)。然后参考[访问控制-声明权限](../security/AccessToken/declare-permissions.md)声明对应权限。
+
+   此权限级别为normal，在申请权限前，请保证符合[权限使用的基本原则](../security/AccessToken/app-permission-mgmt-overview.md#权限使用的基本原则)。然后参考[访问控制-声明权限](../security/AccessToken/declare-permissions.md)声明对应权限。
 2. 查询默认网络或指定网络连接信息代码示例
    
    通过调用[getDefaultNet](../reference/apis-network-kit/js-apis-net-connection.md#connectiongetdefaultnet)方法，获取默认的数据网络(NetHandle)；调用[getNetCapabilities](../reference/apis-network-kit/js-apis-net-connection.md#connectiongetnetcapabilities)方法，获取该NetHandle对应网络的能力信息。能力信息包含了网络类型(蜂窝网络、Wi-Fi网络、以太网网络等)、网络具体能力等网络信息。也可以调用[getConnectionProperties](../reference/apis-network-kit/js-apis-net-connection.md#connectiongetconnectionproperties)方法，获取该NetHandle对应网络的连接信息。
@@ -324,11 +327,13 @@ function socketTest() {
 如果应用需要检查当前连接的网络是否可以访问互联网，可参考以下步骤进行判断：
 
 1. 声明接口调用所需要的权限：ohos.permission.GET_NETWORK_INFO
-此权限级别为normal，在申请权限前，请保证符合[权限使用的基本原则](../security/AccessToken/app-permission-mgmt-overview.md#权限使用的基本原则)。然后参考[访问控制-声明权限](../security/AccessToken/declare-permissions.md)声明对应权限。
+
+   此权限级别为normal，在申请权限前，请保证符合[权限使用的基本原则](../security/AccessToken/app-permission-mgmt-overview.md#权限使用的基本原则)。然后参考[访问控制-声明权限](../security/AccessToken/declare-permissions.md)声明对应权限。
 
 2. 代码示例
    
    调用[getDefaultNetSync](../reference/apis-network-kit/js-apis-net-connection.md#connectiongetdefaultnetsync9)方法，获取当前默认网络的netHandle，netHandle有效的情况下，调用[getNetCapabilitiesSync](../reference/apis-network-kit/js-apis-net-connection.md#connectiongetnetcapabilitiessync10)方法，获取NetHandle对应网络的能力信息，根据获取到的能力信息，判断networkCap数组中的值判断网络是否可用。
+
    NET_CAPABILITY_CHECKING_CONNECTIVITY表示在进行连通性判断的过程中，当不处于连通性判断过程中，且networkCap数组中包含NET_CAPABILITY_VALIDATED表示网络连通性校验通过，可以访问互联网。
 
     ```ts
@@ -364,7 +369,8 @@ function socketTest() {
 ## 使用默认网络解析域名，获取所有IP
 
 1. 声明接口调用所需要的权限：ohos.permission.GET_NETWORK_INFO
-此权限级别为normal，在申请权限前，请保证符合[权限使用的基本原则](../security/AccessToken/app-permission-mgmt-overview.md#权限使用的基本原则)。然后参考[访问控制-声明权限](../security/AccessToken/declare-permissions.md)声明对应权限。
+
+   此权限级别为normal，在申请权限前，请保证符合[权限使用的基本原则](../security/AccessToken/app-permission-mgmt-overview.md#权限使用的基本原则)。然后参考[访问控制-声明权限](../security/AccessToken/declare-permissions.md)声明对应权限。
 
 2. 代码示例
    

zh-cn/application-dev/network/net-eap.md

@@ -19,6 +19,7 @@
 
 1. 在EAP协议报文内封装私有数据，该私有数据遵循客户端与认证服务器约定的数据结构。
 2. 在认证过程中，客户端在本地进行安检扫描等定制动作，定制动作结束后，客户端向接入设备回复认证消息。
+
    在这种机制下，需要操作系统提供三方客户端介入802.1X认证流程的机制，支撑客户端的定制认证。
 
 

zh-cn/application-dev/network/net-mgmt-overview.md

@@ -23,6 +23,7 @@ Network Kit（网络服务）主要提供以下功能：
 ## 约束与限制
 
 使用网络管理模块的相关功能时，需要请求相应的权限。
+
 在申请权限前，请保证符合[权限使用的基本原则](../security/AccessToken/app-permission-mgmt-overview.md#权限使用的基本原则)。然后参考[访问控制-声明权限](../security/AccessToken/declare-permissions.md)声明对应权限。
 
 | 权限名                           | 说明                                   |

zh-cn/application-dev/network/net-vpnExtension.md

@@ -170,6 +170,7 @@ export default class MyVpnExtAbility extends VpnExtensionAbility {
 ### 生成VPN Id
 
 创建新的VPN时，应生成一个VPN Id作为VPN的唯一标识。
+
 可参考如下示例：
 
 ```ts

zh-cn/application-dev/notification/notification-overview.md

@@ -11,6 +11,7 @@ Notification Kit（用户通知服务）为开发者提供本地通知发布通
 
 ## 使用场景
 当应用进程处于运行时，开发者可以使用Notification Kit向用户发布通知。<!--RP1--><!--RP1End-->
+
 开发者可以在多种场景中运用本地通知能力。如同步用户的上传下载进度、发布即时的客服支付通知、更新运动步数等。
 
 ## 能力范围

zh-cn/application-dev/quick-start/application-package-install-uninstall.md

@@ -9,7 +9,7 @@
 本章节介绍应用程序包的安装卸载流程和两种更新方式。
 
 ## 应用程序包的安装卸载
-开发者可以通过调试命令安装和卸载应用，安装应用命令参考bm工具中的[install](../tools/bm-tool.md#安装命令install)，卸载应用命令参考bm工具中的[uninstall](../tools/bm-tool.md#卸载命令uninstall)，详情参考[编译发布与上架部署流程图](./application-package-structure-stage.md#发布态包结构)。
+开发者可以通过调试命令安装和卸载应用，安装应用命令参考bm工具中的[install](../tools/bm-tool.md#安装命令install)，卸载应用命令参考bm工具中的[uninstall](../tools/bm-tool.md#卸载命令uninstall)，详情参见[编译发布与上架部署流程图](./application-package-structure-stage.md#发布态包结构)。
 
 **图1** 应用程序包安装和卸载流程（开发者）
 

zh-cn/application-dev/quick-start/application-package-structure-stage.md

@@ -9,7 +9,7 @@
 为了让开发者能对应用程序包在不同阶段的形态有更加清晰的认知，分别对开发态、编译态、发布态的应用程序结构展开介绍。
 
 ## 开发态包结构
-在DevEco Studio上创建项目工程，并尝试创建多个不同类型的Module。根据实际工程中的目录对照本章节进行学习，可以有助于理解开发态的应用程序结构。
+在DevEco Studio上创建项目工程，并尝试创建多个不同类型的Module。根据实际工程中的目录对照本章节进行学习，有助于理解开发态的应用程序结构。
 
 **图1** 项目工程结构示意图（以实际为准）
 

zh-cn/application-dev/quick-start/typical-scenario-configuration.md

@@ -10,7 +10,7 @@
 
 ## 场景介绍
 
-以导航场景为例，用户使用地图应用导航时，通常先搜索目的地，然后开始导航。为了提升导航效率和操作便捷性，建议在地图应用中添加常去地点的快捷方式，如公司、家等。添加这些快捷方式后，用户长按应用图标，即可打开快捷方式入口，快速启动导航。详情请参考[桌面快捷方式](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-desktop-shortcuts)。
+以导航场景为例，用户使用地图应用导航时，通常先搜索目的地，然后开始导航。为了提升导航效率和操作便捷性，建议在地图应用中添加常去地点的快捷方式，如公司、家等。添加这些快捷方式后，用户长按应用图标，即可打开快捷方式入口，快速启动导航。详情请参见[桌面快捷方式](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-desktop-shortcuts)。
 
 ## 配置方法
 

zh-cn/application-dev/reference/apis-ability-kit/js-apis-inner-application-uiAbilityContext-sys.md

@@ -58,6 +58,8 @@ startAbilityForResultWithAccount(want: Want, accountId: number, callback: AsyncC
 
 | 错误码ID | 错误信息 |
 | ------- | -------------------------------- |
+| 201 | The application does not have permission to call the interface. |
+| 202 | The application is not system-app, can not use system-api. |
 | 401 | Parameter error. Possible causes: 1.Mandatory parameters are left unspecified. 2.Incorrect parameter types. |
 | 16000001 | The specified ability does not exist. |
 | 16000002 | Incorrect ability type. |
@@ -152,6 +154,8 @@ startAbilityForResultWithAccount(want: Want, accountId: number, options: StartOp
 
 | 错误码ID | 错误信息 |
 | ------- | -------------------------------- |
+| 201 | The application does not have permission to call the interface. |
+| 202 | The application is not system-app, can not use system-api. |
 | 401 | Parameter error. Possible causes: 1.Mandatory parameters are left unspecified. 2.Incorrect parameter types. |
 | 16000001 | The specified ability does not exist. |
 | 16000004 | Cannot start an invisible component. |
@@ -252,6 +256,8 @@ startAbilityForResultWithAccount(want: Want, accountId: number, options?: StartO
 
 | 错误码ID | 错误信息 |
 | ------- | -------------------------------- |
+| 201 | The application does not have permission to call the interface. |
+| 202 | The application is not system-app, can not use system-api. |
 | 401 | Parameter error. Possible causes: 1.Mandatory parameters are left unspecified. 2.Incorrect parameter types. |
 | 16000001 | The specified ability does not exist. |
 | 16000002 | Incorrect ability type. |
@@ -338,6 +344,8 @@ startServiceExtensionAbility(want: Want, callback: AsyncCallback\<void>): void
 
 | 错误码ID | 错误信息 |
 | ------- | -------------------------------- |
+| 201 | The application does not have permission to call the interface. |
+| 202 | The application is not system-app, can not use system-api. |
 | 401 | Parameter error. Possible causes: 1.Mandatory parameters are left unspecified. 2.Incorrect parameter types. |
 | 16000001 | The specified ability does not exist. |
 | 16000002 | Incorrect ability type. |
@@ -414,6 +422,8 @@ startServiceExtensionAbility(want: Want): Promise\<void>
 
 | 错误码ID | 错误信息 |
 | ------- | -------------------------------- |
+| 201 | The application does not have permission to call the interface. |
+| 202 | The application is not system-app, can not use system-api. |
 | 401 | Parameter error. Possible causes: 1.Mandatory parameters are left unspecified. 2.Incorrect parameter types. |
 | 16000001 | The specified ability does not exist. |
 | 16000002 | Incorrect ability type. |
@@ -493,6 +503,8 @@ startServiceExtensionAbilityWithAccount(want: Want, accountId: number, callback:
 
 | 错误码ID | 错误信息 |
 | ------- | -------------------------------- |
+| 201 | The application does not have permission to call the interface. |
+| 202 | The application is not system-app, can not use system-api. |
 | 401 | Parameter error. Possible causes: 1.Mandatory parameters are left unspecified. 2.Incorrect parameter types. |
 | 16000001 | The specified ability does not exist. |
 | 16000002 | Incorrect ability type. |
@@ -578,6 +590,8 @@ startServiceExtensionAbilityWithAccount(want: Want, accountId: number): Promise\
 
 | 错误码ID | 错误信息 |
 | ------- | -------------------------------- |
+| 201 | The application does not have permission to call the interface. |
+| 202 | The application is not system-app, can not use system-api. |
 | 401 | Parameter error. Possible causes: 1.Mandatory parameters are left unspecified. 2.Incorrect parameter types. |
 | 16000001 | The specified ability does not exist. |
 | 16000002 | Incorrect ability type. |
@@ -649,6 +663,8 @@ stopServiceExtensionAbility(want: Want, callback: AsyncCallback\<void>): void
 
 | 错误码ID | 错误信息 |
 | ------- | -------------------------------- |
+| 201 | The application does not have permission to call the interface. |
+| 202 | The application is not system-app, can not use system-api. |
 | 401 | Parameter error. Possible causes: 1.Mandatory parameters are left unspecified. 2.Incorrect parameter types. |
 | 16000001 | The specified ability does not exist. |
 | 16000002 | Incorrect ability type. |
@@ -723,6 +739,8 @@ stopServiceExtensionAbility(want: Want): Promise\<void>
 
 | 错误码ID | 错误信息 |
 | ------- | -------------------------------- |
+| 201 | The application does not have permission to call the interface. |
+| 202 | The application is not system-app, can not use system-api. |
 | 401 | Parameter error. Possible causes: 1.Mandatory parameters are left unspecified. 2.Incorrect parameter types. |
 | 16000001 | The specified ability does not exist. |
 | 16000002 | Incorrect ability type. |
@@ -797,6 +815,8 @@ stopServiceExtensionAbilityWithAccount(want: Want, accountId: number, callback:
 
 | 错误码ID | 错误信息 |
 | ------- | -------------------------------- |
+| 201 | The application does not have permission to call the interface. |
+| 202 | The application is not system-app, can not use system-api. |
 | 401 | Parameter error. Possible causes: 1.Mandatory parameters are left unspecified. 2.Incorrect parameter types. |
 | 16000001 | The specified ability does not exist. |
 | 16000002 | Incorrect ability type. |
@@ -877,6 +897,8 @@ stopServiceExtensionAbilityWithAccount(want: Want, accountId: number): Promise\<
 
 | 错误码ID | 错误信息 |
 | ------- | -------------------------------- |
+| 201 | The application does not have permission to call the interface. |
+| 202 | The application is not system-app, can not use system-api. |
 | 401 | Parameter error. Possible causes: 1.Mandatory parameters are left unspecified. 2.Incorrect parameter types. |
 | 16000001 | The specified ability does not exist. |
 | 16000002 | Incorrect ability type. |
@@ -961,6 +983,8 @@ connectServiceExtensionAbilityWithAccount(want: Want, accountId: number, options
 
 | 错误码ID | 错误信息 |
 | ------- | -------------------------------- |
+| 201 | The application does not have permission to call the interface. |
+| 202 | The application is not system-app, can not use system-api. |
 | 401 | Parameter error. Possible causes: 1.Mandatory parameters are left unspecified. 2.Incorrect parameter types. |
 | 16000001 | The specified ability does not exist. |
 | 16000002 | Incorrect ability type. |
@@ -1046,6 +1070,8 @@ startAbilityWithAccount(want: Want, accountId: number, callback: AsyncCallback\<
 
 | 错误码ID | 错误信息 |
 | ------- | -------------------------------- |
+| 201 | The application does not have permission to call the interface. |
+| 202 | The application is not system-app, can not use system-api. |
 | 401 | Parameter error. Possible causes: 1.Mandatory parameters are left unspecified. 2.Incorrect parameter types. |
 | 16000001 | The specified ability does not exist. |
 | 16000002 | Incorrect ability type. |
@@ -1140,6 +1166,8 @@ startAbilityWithAccount(want: Want, accountId: number, options: StartOptions, ca
 
 | 错误码ID | 错误信息 |
 | ------- | -------------------------------- |
+| 201 | The application does not have permission to call the interface. |
+| 202 | The application is not system-app, can not use system-api. |
 | 401 | Parameter error. Possible causes: 1.Mandatory parameters are left unspecified. 2.Incorrect parameter types. |
 | 16000001 | The specified ability does not exist. |
 | 16000004 | Cannot start an invisible component. |
@@ -1240,6 +1268,8 @@ startAbilityWithAccount(want: Want, accountId: number, options?: StartOptions):
 
 | 错误码ID | 错误信息 |
 | ------- | -------------------------------- |
+| 201 | The application does not have permission to call the interface. |
+| 202 | The application is not system-app, can not use system-api. |
 | 401 | Parameter error. Possible causes: 1.Mandatory parameters are left unspecified. 2.Incorrect parameter types. |
 | 16000001 | The specified ability does not exist. |
 | 16000002 | Incorrect ability type. |
@@ -1327,6 +1357,7 @@ setMissionIcon(icon: image.PixelMap, callback: AsyncCallback\<void>): void
 
 | 错误码ID | 错误信息 |
 | ------- | -------------------------------- |
+| 202 | The application is not system-app, can not use system-api. |
 | 401 | Parameter error. Possible causes: 1.Mandatory parameters are left unspecified. 2.Incorrect parameter types. |
 | 16000011 | The context does not exist. |
 | 16000050 | Internal error. |
@@ -1396,6 +1427,7 @@ setMissionIcon(icon: image.PixelMap): Promise\<void>
 
 | 错误码ID | 错误信息 |
 | ------- | -------------------------------- |
+| 202 | The application is not system-app, can not use system-api. |
 | 401 | Parameter error. Possible causes: 1.Mandatory parameters are left unspecified. 2.Incorrect parameter types. |
 | 16000011 | The context does not exist. |
 | 16000050 | Internal error. |
@@ -1471,6 +1503,8 @@ startRecentAbility(want: Want, callback: AsyncCallback&lt;void&gt;): void
 
 | 错误码ID | 错误信息 |
 | ------- | -------------------------------- |
+| 201 | The application does not have permission to call the interface. |
+| 202 | The application is not system-app, can not use system-api. |
 | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2. Incorrect parameter types; 3. Parameter verification failed. |
 | 16000001 | The specified ability does not exist. |
 | 16000002 | Incorrect ability type. |
@@ -1564,6 +1598,8 @@ startRecentAbility(want: Want, options: StartOptions, callback: AsyncCallback&lt
 
 | 错误码ID | 错误信息 |
 | ------- | -------------------------------- |
+| 201 | The application does not have permission to call the interface. |
+| 202 | The application is not system-app, can not use system-api. |
 | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2. Incorrect parameter types; 3. Parameter verification failed. |
 | 16000001 | The specified ability does not exist. |
 | 16000004 | Cannot start an invisible component. |
@@ -1664,6 +1700,8 @@ startRecentAbility(want: Want, options?: StartOptions): Promise&lt;void&gt;
 
 | 错误码ID | 错误信息 |
 | ------- | -------------------------------- |
+| 201 | The application does not have permission to call the interface. |
+| 202 | The application is not system-app, can not use system-api. |
 | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2. Incorrect parameter types; 3. Parameter verification failed. |
 | 16000001 | The specified ability does not exist. |
 | 16000002 | Incorrect ability type. |
@@ -1739,7 +1777,7 @@ startAbilityByCallWithAccount(want: Want, accountId: number): Promise&lt;Caller&
  - 跨应用场景下，目标UIAbility的exported属性若配置为false，调用方应用需申请`ohos.permission.START_INVISIBLE_ABILITY`权限。
  - 同设备与跨设备场景下，该接口的使用规则存在差异，详见：[组件启动规则（Stage模型）](../../application-models/component-startup-rules.md)。
 
-**需要权限**：ohos.permission.ABILITY_BACKGROUND_COMMUNICATION, ohos.permission.INTERACT_ACROSS_LOCAL_ACCOUNTS
+**需要权限**：ohos.permission.ABILITY_BACKGROUND_COMMUNICATION 和 ohos.permission.INTERACT_ACROSS_LOCAL_ACCOUNTS
 
 **系统能力**：SystemCapability.Ability.AbilityRuntime.Core
 
@@ -1764,6 +1802,8 @@ startAbilityByCallWithAccount(want: Want, accountId: number): Promise&lt;Caller&
 
 | 错误码ID | 错误信息 |
 | ------- | -------------------------------- |
+| 201 | The application does not have permission to call the interface. |
+| 202 | The application is not system-app, can not use system-api. |
 | 401 | Parameter error. Possible causes: 1.Mandatory parameters are left unspecified. 2.Incorrect parameter types. |
 | 16000001 | The specified ability does not exist. |
 | 16000002 | Incorrect ability type. |
@@ -1853,6 +1893,8 @@ startAbilityAsCaller(want: Want, callback: AsyncCallback\<void>): void
 
 | 错误码ID | 错误信息 |
 | ------- | -------------------------------- |
+| 201 | The application does not have permission to call the interface. |
+| 202 | The application is not system-app, can not use system-api. |
 | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2. Incorrect parameter types; 3. Parameter verification failed. |
 | 16000001 | The specified ability does not exist. |
 | 16000002 | Incorrect ability type. |
@@ -1931,6 +1973,8 @@ startAbilityAsCaller(want: Want, options: StartOptions, callback: AsyncCallback\
 
 | 错误码ID | 错误信息 |
 | ------- | -------------------------------- |
+| 201 | The application does not have permission to call the interface. |
+| 202 | The application is not system-app, can not use system-api. |
 | 401 | 401 - Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2. Incorrect parameter types; 3. Parameter verification failed.|
 | 16000001 | The specified ability does not exist. |
 | 16000004 | Cannot start an invisible component. |
@@ -2015,6 +2059,8 @@ startAbilityAsCaller(want: Want, options?: StartOptions): Promise\<void>
 
 | 错误码ID | 错误信息 |
 | ------- | -------------------------------- |
+| 201 | The application does not have permission to call the interface. |
+| 202 | The application is not system-app, can not use system-api. |
 | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2. Incorrect parameter types; 3. Parameter verification failed. |
 | 16000001 | The specified ability does not exist. |
 | 16000002 | Incorrect ability type. |
@@ -2105,6 +2151,7 @@ requestModalUIExtension(pickerWant: Want): Promise\<void>
 
 | 错误码ID | 错误信息 |
 | ------- | -------------------------------- |
+| 202 | The application is not system-app, can not use system-api. |
 | 401 | Parameter error. Possible causes: 1.Mandatory parameters are left unspecified. 2.Incorrect parameter types. |
 | 16000050 | Internal error. |
 
@@ -2177,6 +2224,7 @@ requestModalUIExtension(pickerWant: Want, callback: AsyncCallback\<void>): void
 
 | 错误码ID | 错误信息 |
 | ------- | -------------------------------- |
+| 202 | The application is not system-app, can not use system-api. |
 | 401 | Parameter error. Possible causes: 1.Mandatory parameters are left unspecified. 2.Incorrect parameter types. |
 | 16000050 | Internal error. |
 

zh-cn/application-dev/reference/apis-accessibility-kit/js-apis-inner-application-accessibilityExtensionContext-sys.md

@@ -18,7 +18,7 @@ AccessibilityExtensionContext是AccessibilityExtensionAbility上下文环境，
 
 ## 使用说明
 
-在使用AccessibilityExtensionContext的功能前，需要通过AccessibilityExtensionAbility子类实例获取AccessibilityExtensionContex的实例。
+在使用AccessibilityExtensionContext功能前，需要先通过AccessibilityExtensionAbility子类实例获取一个AccessibilityExtensionContext的实例。
 
 ```ts
 import { AccessibilityExtensionAbility } from '@kit.AccessibilityKit';

zh-cn/application-dev/reference/apis-arkdata/capi-relational-store-h.md

@@ -203,7 +203,7 @@ enum Rdb_Tokenizer
 | -- | -- |
 | RDB_NONE_TOKENIZER = 1 | 表示不使用分词器。 |
 | RDB_ICU_TOKENIZER = 2 | 表示使用ICU分词器。 |
-| RDB_CUSTOM_TOKENIZER = 3 | 表示使用CUSTOM分词器。	<br>**起始版本：** 18 |
+| RDB_CUSTOM_TOKENIZER = 3 | 表示使用CUSTOM分词器。<br>**起始版本：** 18 |
 
 ### Rdb_DistributedType
 
@@ -1825,7 +1825,7 @@ typedef void (*Rdb_ProgressCallback)(void *context, Rdb_ProgressDetails *progres
 
 | 参数项               | 描述           |
 |-------------------|--------------|
-| void *context     |              |
+| void *context     | 回调数据的上下文。 |
 | [Rdb_ProgressDetails](capi-rdb-rdb-progressdetails.md) *progressDetails | 端云同步进度的详细信息。 |
 
 ### Rdb_SyncCallback()

zh-cn/application-dev/reference/apis-arkgraphics2d/capi-drawing-oh-drawing-linemetrics.md

@@ -16,8 +16,8 @@
 
 | 名称                                                         | 描述                                                         |
 | ------------------------------------------------------------ | ------------------------------------------------------------ |
-| double ascender                                              | 文字相对于基线以上的高度。                                   |
-| double descender                                             | 文字相对于基线以下的高度。                                   |
+| double ascender                                              | 文字相对于基线以上取绝对值后的高度。                                   |
+| double descender                                             | 文字相对于基线以下取绝对值后的高度。                                   |
 | double capHeight                                             | 大写字母的高度。                                             |
 | double xHeight                                               | 小写字母的高度。                                             |
 | double width                                                 | 文字宽度。                                                   |

zh-cn/application-dev/reference/apis-arkui/Readme-CN.md

@@ -418,6 +418,7 @@
     - [SaveButton](arkui-ts/ts-security-components-savebutton.md)
     <!--Del-->
     - [SaveButton (系统接口)](arkui-ts/ts-security-components-savebutton-sys.md)
+    - [安全控件通用属性 (系统接口)](arkui-ts/ts-securitycomponent-attributes-sys.md)
     <!--DelEnd-->
   - 主题<!--themes-->
     - [WithTheme](arkui-ts/ts-container-with-theme.md)

zh-cn/application-dev/reference/apis-arkui/arkts-apis-uicontext-uicontext.md

@@ -988,46 +988,49 @@ struct DatePickerDialogExample {
   selectedDate: Date = new Date("2010-1-1");
 
   build() {
-    Column() {
-      Button("DatePickerDialog")
-        .margin(20)
-        .onClick(() => {
-          this.getUIContext().showDatePickerDialog({
-            start: new Date("2000-1-1"),
-            end: new Date("2100-12-31"),
-            selected: this.selectedDate,
-            showTime: true,
-            useMilitaryTime: false,
-            dateTimeOptions: { hour: "numeric", minute: "2-digit" },
-            onDateAccept: (value: Date) => {
-              // 通过Date的setFullYear方法设置按下确定按钮时的日期，这样当弹窗再次弹出时显示选中的是上一次确定的日期
-              this.selectedDate = value;
-              console.info("DatePickerDialog:onDateAccept()" + value.toString());
-            },
-            onCancel: () => {
-              console.info("DatePickerDialog:onCancel()");
-            },
-            onDateChange: (value: Date) => {
-              console.info("DatePickerDialog:onDateChange()" + value.toString());
-            },
-            onDidAppear: () => {
-              console.info("DatePickerDialog:onDidAppear()");
-            },
-            onDidDisappear: () => {
-              console.info("DatePickerDialog:onDidDisappear()");
-            },
-            onWillAppear: () => {
-              console.info("DatePickerDialog:onWillAppear()");
-            },
-            onWillDisappear: () => {
-              console.info("DatePickerDialog:onWillDisappear()");
-            }
+    Row(){
+      Column() {
+        Button("DatePickerDialog")
+          .margin(20)
+          .onClick(() => {
+            this.getUIContext().showDatePickerDialog({
+              start: new Date("2000-1-1"),
+              end: new Date("2100-12-31"),
+              selected: this.selectedDate,
+              showTime: true,
+              useMilitaryTime: false,
+              dateTimeOptions: { hour: "numeric", minute: "2-digit" },
+              onDateAccept: (value: Date) => {
+                // 通过Date的setFullYear方法设置按下确定按钮时的日期，这样当弹窗再次弹出时显示选中的是上一次确定的日期
+                this.selectedDate = value;
+                console.info("DatePickerDialog:onDateAccept()" + value.toString());
+              },
+              onCancel: () => {
+                console.info("DatePickerDialog:onCancel()");
+              },
+              onDateChange: (value: Date) => {
+                console.info("DatePickerDialog:onDateChange()" + value.toString());
+              },
+              onDidAppear: () => {
+                console.info("DatePickerDialog:onDidAppear()");
+              },
+              onDidDisappear: () => {
+                console.info("DatePickerDialog:onDidDisappear()");
+              },
+              onWillAppear: () => {
+                console.info("DatePickerDialog:onWillAppear()");
+              },
+              onWillDisappear: () => {
+                console.info("DatePickerDialog:onWillDisappear()");
+              }
+            })
           })
-        })
-    }.width('100%')
+      }.width('100%')
+    }.height('100%')
   }
 }
 ```
+![showDatePickerDialog](figures/showDatePickerDialog.gif)
 
 ## showTimePickerDialog
 
@@ -1142,34 +1145,37 @@ struct TextPickerDialogExample {
   private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4', 'banana5'];
   private select: number  = 0;
   build() {
-    Column() {
-      Button('showTextPickerDialog')
-        .margin(30)
-        .onClick(() => {
-          this.getUIContext().showTextPickerDialog({
-            range: this.fruits,
-            selected: this.select,
-            onAccept: (value: TextPickerResult) => {
-              // 设置select为按下确定按钮时候的选中项index，这样当弹窗再次弹出时显示选中的是上一次确定的选项
-              let selectedVal = new SelectedValue();
-              let selectedArr = new SelectedArray();
-              if (value.index){
-                value.index instanceof Array?selectedArr.set(value.index) : selectedVal.set(value.index);
+    Row(){
+      Column() {
+        Button('showTextPickerDialog')
+          .margin(30)
+          .onClick(() => {
+            this.getUIContext().showTextPickerDialog({
+              range: this.fruits,
+              selected: this.select,
+              onAccept: (value: TextPickerResult) => {
+                // 设置select为按下确定按钮时候的选中项index，这样当弹窗再次弹出时显示选中的是上一次确定的选项
+                let selectedVal = new SelectedValue();
+                let selectedArr = new SelectedArray();
+                if (value.index){
+                  value.index instanceof Array?selectedArr.set(value.index) : selectedVal.set(value.index);
+                }
+                console.info("TextPickerDialog:onAccept()" + JSON.stringify(value));
+              },
+              onCancel: () => {
+                console.info("TextPickerDialog:onCancel()");
+              },
+              onChange: (value: TextPickerResult) => {
+                console.info("TextPickerDialog:onChange()" + JSON.stringify(value));
               }
-              console.info("TextPickerDialog:onAccept()" + JSON.stringify(value));
-            },
-            onCancel: () => {
-              console.info("TextPickerDialog:onCancel()");
-            },
-            onChange: (value: TextPickerResult) => {
-              console.info("TextPickerDialog:onChange()" + JSON.stringify(value));
-            }
-          });
-        })
-    }.width('100%').margin({ top: 5 })
+            });
+          })
+      }.width('100%').margin({ top: 5 })
+    }.height('100%')
   }
 }
 ```
+![showTextPickerDialog](figures/showTextPickerDialog.gif)
 
 ## showTextPickerDialog<sup>20+</sup>
 

zh-cn/application-dev/reference/apis-arkui/arkui-js-lite/js-lite-components-basic-chart.md

@@ -81,7 +81,7 @@
 | ----------- | -------------- | -------- | ---- | ---------------------------------- |
 | shape       | string         | circle   | 否    | 高亮点的形状。可选值为：<br/>-&nbsp;circle：圆形。 |
 | size        | &lt;length&gt; | 5px      | 否    | 高亮点的大小。                            |
-| strokeWidth | &lt;length&gt; | 1px      | 否    | 边框宽度                               |
+| strokeWidth | &lt;length&gt; | 1px      | 否    | 边框宽度。                               |
 | strokeColor | &lt;color&gt;  | \#ff0000 | 否    | 边框颜色。                              |
 | fillColor   | &lt;color&gt;  | \#ff0000 | 否    | 填充颜色。                              |
 | display     | boolean        | true     | 否    | 是否高亮显示。<br/>默认值：true，表示高亮显示。                           |

zh-cn/application-dev/reference/apis-arkui/arkui-js/js-components-basic-input.md

@@ -60,7 +60,7 @@
 | color                    | <color>              | \#e6000000 | 否    | 单行输入框或者按钮的文本颜色。                          |
 | font-size                | <length>             | 16px       | 否    | 单行输入框或者按钮的文本尺寸。                          |
 | allow-scale              | boolean                    | true       | 否    | 单行输入框或者按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。true表示跟随，false表示不跟随。<br/>如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
-| placeholder-color        | &lt;color&gt;              | \#99000000 | 否    | 单行输入框的提示文本的颜色，type为text\|email\|date\|time\|number\|password时生效。 |
+| placeholder-color        | &lt;color&gt;              | \#99000000 | 否    | 单行输入框的提示文本的颜色，type为text \| email \| date \| time \| number \| password时生效。 |
 | font-weight              | number&nbsp;\|&nbsp;string | normal     | 否    | 单行输入框或者按钮的字体粗细，见[text组件font-weight的样式属性](js-components-basic-text.md#样式)。 |
 | caret-color<sup>6+</sup> | &lt;color&gt;              | -          | 否    | 设置输入光标的颜色。                               |
 
@@ -93,9 +93,9 @@
 
 | 名称                  | 参数                                       | 描述                                       |
 | ------------------- | ---------------------------------------- | ---------------------------------------- |
-| focus               | {<br>&nbsp;focus:&nbsp;true\|false<br>&nbsp;}，<br>focus不传值时默认为true。 | 使组件获得或者失去焦点，type为text\|email\|date\|time\|number\|password时，可弹出或收起输入法。 |
-| showError           | {<br>&nbsp;error:&nbsp;string&nbsp;<br>} | 展示输入错误提示，type为text\|email\|date\|time\|number\|password时生效。 |
-| delete<sup>6+</sup> | -                                        | type为text\|email\|date\|time\|number\|password时，根据当前光标位置删除文本内容，如果当前输入组件没有光标，默认删除最后一个字符并展示光标。 |
+| focus               | {<br>&nbsp;focus:&nbsp;true\|false<br>&nbsp;}，<br>focus不传值时默认为true。 | 使组件获得或者失去焦点，type为text \| email \| date \| time \| number \| password时，可弹出或收起输入法。 |
+| showError           | {<br>&nbsp;error:&nbsp;string&nbsp;<br>} | 展示输入错误提示，type为text \| email \| date \| time \| number \| password时生效。 |
+| delete<sup>6+</sup> | -                                        | type为text \| email \| date \| time \| number \| password时，根据当前光标位置删除文本内容，如果当前输入组件没有光标，默认删除最后一个字符并展示光标。 |
 
 ## 示例
 

zh-cn/application-dev/reference/apis-arkui/arkui-js/js-components-canvas-canvasrenderingcontext2d.md

@@ -56,7 +56,7 @@
 
 | 名称                                       | 类型                                       | 描述                                       |
 | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
-| [fillStyle](#fillstyle)                  | &lt;color&gt;&nbsp;\|&nbsp;[CanvasGradient](js-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;CanvasPattern | 指定绘制的填充色。<br/>-&nbsp;类型为&lt;color&gt;时，表示设置填充区域的颜色。<br/>-&nbsp;类型为CanvasGradient时，表示渐变对象，使用&nbsp;createLinearGradient()方法创建。<br/>-&nbsp;类型为CanvasPattern时，使用&nbsp;createPattern()方法创建。 |
+| [fillStyle](#fillstyle)                  | &lt;color&gt;&nbsp;\|&nbsp;[CanvasGradient](js-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](../arkui-ts/ts-components-canvas-canvaspattern.md) | 指定绘制的填充色。<br/>-&nbsp;类型为&lt;color&gt;时，表示设置填充区域的颜色。<br/>-&nbsp;类型为CanvasGradient时，表示渐变对象，使用&nbsp;createLinearGradient()方法创建。<br/>-&nbsp;类型为CanvasPattern时，使用&nbsp;createPattern()方法创建。 |
 | [lineWidth](#linewidth)                  | number                                   | 设置绘制线条的宽度。                               |
 | [strokeStyle](#strokestyle)              | &lt;color&gt;&nbsp;\|&nbsp;[CanvasGradient](js-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;CanvasPattern | 设置描边的颜色。<br/>-&nbsp;类型为&lt;color&gt;时，表示设置描边使用的颜色。<br/>-&nbsp;类型为CanvasGradient时，表示渐变对象，使用&nbsp;createLinearGradient()方法创建。<br/>-&nbsp;类型为CanvasPattern时，使用&nbsp;createPattern()方法创建。 |
 | [lineCap](#linecap)                      | string                                   | 指定线端点的样式，可选值为：<br/>-&nbsp;butt：线端点以方形结束。<br/>-&nbsp;round：线端点以圆形结束。<br/>-&nbsp;square：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。<br>默认值：butt |

zh-cn/application-dev/reference/apis-arkui/arkui-js/js-components-canvas-path2d.md

@@ -7,7 +7,7 @@
 <!--Adviser: @Brilliantry_Rui-->
 
 
-路径对象，支持通过对象的接口进行路径的描述，并通过Canvas的stroke接口进行绘制。
+路径对象，支持通过对象的接口进行路径的描述，并通过Canvas的[stroke](js-components-canvas-canvasrenderingcontext2d.md#stroke)接口进行绘制。
 
 >  **说明：**
 >

zh-cn/application-dev/reference/apis-arkui/arkui-js/js-components-common-animation.md

@@ -16,9 +16,9 @@
 | 名称                                | 类型                                       | 描述                                       |
 | --------------------------------- | ---------------------------------------- | ---------------------------------------- |
 | transform-origin                  | string<sup>6+</sup>&nbsp;\|<br>&nbsp;&lt;percentage&gt;&nbsp;\|<br>&nbsp;&lt;length&gt;&nbsp;string<sup>6+</sup>&nbsp;\|<br>&nbsp;&lt;percentage&gt;&nbsp;\|&nbsp;&lt;length&gt; | 变换对象的原点位置，支持px和百分比(相对于动画目标组件)，如果仅设置一个值，另一个值为50%，第一个string的可选值为：left&nbsp;\|&nbsp;center&nbsp;\|&nbsp;right&nbsp;，第二个string的可选值为：top&nbsp;\|&nbsp;center&nbsp;\|&nbsp;bottom。<br/>示例：<br/>transform-origin:&nbsp;200px&nbsp;30%。<br/>transform-origin:&nbsp;100px&nbsp;top。<br/>transform-origin:&nbsp;center&nbsp;center。<br>默认值：center&nbsp;center |
-| transform                         | string                                   | 支持同时设置平移/旋转/缩放的属性。<br/>详见表 transform操作说明。 |
+| transform                         | string                                   | 支持同时设置平移/旋转/缩放的属性。<br/>详情请参见表1 transform操作说明。 |
 | animation<sup>6+</sup>            | string                                   | 格式：duration&nbsp;\|&nbsp;timing-function&nbsp;\|&nbsp;delay&nbsp;\|&nbsp;iteration-count&nbsp;\|&nbsp;direction&nbsp;\|&nbsp;fill-mode&nbsp;\|&nbsp;play-state&nbsp;\|&nbsp;name，每个字段不区分先后，但是&nbsp;duration&nbsp;/&nbsp;delay&nbsp;按照出现的先后顺序解析。<br>默认值：0s&nbsp;ease&nbsp;0s&nbsp;1&nbsp;normal&nbsp;none&nbsp;running&nbsp;none |
-| animation-name                    | string                                   | 指定\@keyframes，详见表 @keyframes属性说明。        |
+| animation-name                    | string                                   | 指定\@keyframes，详情请参见表2 @keyframes属性说明。        |
 | animation-delay                   | &lt;time&gt;                             | 定义动画播放的延迟时间。支持的单位为[s(秒)\|ms(毫秒)&nbsp;]，默认单位为ms，格式为：1000ms或1s。<br>默认值：0 |
 | animation-duration                | &lt;time&gt;                             | 定义一个动画周期。支持的单位为[s(秒)\|ms(毫秒)&nbsp;]，默认单位为ms，格式为：1000ms或1s。<br/>必须设置animation-duration&nbsp;样式，否则时长为&nbsp;0将不会播放动画。<br>默认值：0 |
 | animation-iteration-count         | number&nbsp;\|&nbsp;infinite             | 定义动画播放的次数，默认播放一次，可通过设置为infinite无限次播放。<br>默认值：1 |
@@ -64,7 +64,7 @@
 | opacity                          | number                                   | 1            | 动画执行后应用到组件上的不透明度值，为介于0到1间的数值，默认为1。       |
 | width                            | &lt;length&gt;                           | -            | 动画执行后应用到组件上的宽度值。                         |
 | height                           | &lt;length&gt;                           | -            | 动画执行后应用到组件上的高度值。                         |
-| transform                        | string                                   | -            | 定义应用在组件上的变换类型，见表 transform操作说明。          |
+| transform                        | string                                   | -            | 定义应用在组件上的变换类型，详情请参见表1 transform操作说明。          |
 | background-position<sup>6+</sup> | string&nbsp;\|&nbsp;&lt;percentage&gt;&nbsp;\|&nbsp;&lt;length&gt;&nbsp;string&nbsp;\|<br>&nbsp;&lt;percentage&gt;&nbsp;\|&nbsp;&lt;length&gt; | 50%&nbsp;50% | 背景图位置。单位支持百分比和px，第一个值是水平位置，第二个值是垂直位置。如果仅设置一个值，另一个值为50%。第一个string的可选值为：left&nbsp;\|&nbsp;center&nbsp;\|&nbsp;right&nbsp;，第二个string的可选值为：top&nbsp;\|&nbsp;center&nbsp;\|&nbsp;bottom。<br/>示例：<br/>-&nbsp;background-position:&nbsp;200px&nbsp;30%<br/>-&nbsp;background-position:&nbsp;100px&nbsp;top<br/>-&nbsp;background-position:&nbsp;center&nbsp;center |
 
 

zh-cn/application-dev/reference/apis-arkui/arkui-js/js-components-common-customizing-font.md

@@ -15,7 +15,8 @@
 
 ## 定义font-face
 
-```
+```js
+// xxx.js
 @font-face {   
   font-family: font; 
   src: url('/common/font.ttf'); 
@@ -30,7 +31,7 @@
 
 自定义字体的来源，支持如下类别：
 
-- 项目中的字体文件：通过url指定项目中的字体文件路径(只支持绝对路径，详见[资源和文件访问规则](../../../ui/js-framework-file.md)章节)。
+- 项目中的字体文件：通过url指定项目中的字体文件路径(只支持绝对路径，详情请参见[资源和文件访问规则](../../../ui/js-framework-file.md#文件访问规则)章节)。
 
 - 不支持设置多个src。
 

zh-cn/application-dev/reference/apis-arkui/arkui-js/js-components-common-events.md

@@ -26,7 +26,7 @@
 | touchcancel              | TouchEvent | 手指触摸屏幕中动作被打断时触发该事件。                       | 是<sup>5+</sup>                                       | 是<sup>5+</sup> |
 | touchend                 | TouchEvent | 手指触摸结束离开屏幕时触发该事件。                           | 是<sup>5+</sup>                                       | 是<sup>5+</sup> |
 | click                    | BaseEvent  | 点击动作触发该事件。                                         | 是<sup>6+</sup>                                       | 否              |
-| doubleclick<sup>7+</sup> | BaseEvent  | 双击动作触发该事件                                           | 否<br/> 从API&nbsp;Version&nbsp;9&nbsp;开始支持冒泡。 | 否              |
+| doubleclick<sup>7+</sup> | BaseEvent  | 双击动作触发该事件。                                           | 否<br/> 从API&nbsp;Version&nbsp;9&nbsp;开始支持冒泡。 | 否              |
 | longpress                | BaseEvent  | 长按动作触发该事件。                                         | 否<br/>从API&nbsp;Version&nbsp;9&nbsp;开始支持冒泡。  | 否              |
 | swipe<sup>5+</sup>       | SwipeEvent | 组件上快速滑动后触发该事件。 SwipeEvent具体可参考表4 。      | 否<br/>从API&nbsp;Version&nbsp;9&nbsp;开始支持冒泡。  | 否              |
 | attached<sup>6+</sup>    | -          | 当前组件节点挂载在渲染树后触发。                             | 否                                                    | 否              |
@@ -107,7 +107,7 @@
 
 | 属性                   | 类型     | 说明                                       |
 | -------------------- | ------ | ---------------------------------------- |
-| dataSet<sup>6+</sup> | Object | 组件上通过通用属性设置的[data-*](js-components-common-attributes.md)的自定义属性组成的集合。 |
+| dataSet<sup>6+</sup> | Object | 组件上通过通用属性设置的[data-*](js-components-common-attributes.md#常规属性)的自定义属性组成的集合。 |
 
 **示例：**
 

zh-cn/application-dev/reference/apis-arkui/arkui-js/js-components-common-gradient.md

@@ -27,7 +27,8 @@
 
 - angle：进行角度渐变。
 
-```
+```js
+// xxx.js
 background: linear-gradient(direction/angle, color, color, ...);
 background: repeating-linear-gradient(direction/angle, color, color, ...);
 ```

zh-cn/application-dev/reference/apis-arkui/arkui-js/js-components-common-methods.md

@@ -16,6 +16,8 @@
 
 animate( keyframes: Keyframes, options: Options)：void
 
+设置动画样式和动画属性的对象列表。
+
 **参数：** 
 
 | 参数名       | 类型      | 必填   | 说明                                   |

zh-cn/application-dev/reference/apis-arkui/arkui-js/js-components-common-transition.md

@@ -16,7 +16,7 @@
 
 | 名称      | 类型     | 默认值  | 描述                                       |
 | ------- | ------ | ---- | ---------------------------------------- |
-| shareid | string | 无    | 进行共享元素转场时使用，若不配置，则转场样式不生效。共享元素转场当前支持的组件：list-item、image、text、button、label。 |
+| shareid | string | 无    | 进行共享元素转场时使用，若不配置，则转场样式不生效。共享元素转场当前支持的组件：[list-item](js-components-container-list-item.md)、[image](js-components-basic-image.md)、[text](js-components-basic-text.md)、[button](js-components-basic-button.md)、[label](js-components-basic-label.md)。 |
 
 
 ### 样式
@@ -229,8 +229,8 @@ export default {
 
 | 名称                         | 类型     | 默认值           | 描述                                       |
 | -------------------------- | ------ | ------------- | ---------------------------------------- |
-| transition-enter           | string | -             | 与@keyframes配套使用，支持transform和透明度动画，详见[动画样式 表 @keyframes属性说明](js-components-common-animation.md)。 |
-| transition-exit            | string | -             | 与\@keyframes配套使用，支持transform和透明度动画，详见[动画样式 表 @keyframes属性说明](js-components-common-animation.md)。 |
+| transition-enter           | string | -             | 与@keyframes配套使用，支持transform和透明度动画，详见[动画样式 表2 @keyframes属性说明](js-components-common-animation.md)。 |
+| transition-exit            | string | -             | 与\@keyframes配套使用，支持transform和透明度动画，详见[动画样式 表2 @keyframes属性说明](js-components-common-animation.md)。 |
 | transition-duration        | string | 跟随设备默认的页面转场时间 | 支持的单位为[s(秒)\|ms(毫秒) ]，默认单位为ms，未配置时使用系统默认值。 |
 | transition-timing-function | string | friction      | 描述转场动画执行的速度曲线，用于使转场更为平滑。详细参数见[动画样式](js-components-common-animation.md)中“animation-timing-function”有效值说明。 |
 

zh-cn/application-dev/reference/apis-arkui/arkui-js/js-components-container-dialog.md

@@ -38,7 +38,7 @@
 
 ## 样式
 
-仅支持[通用样式](js-components-common-styles.md)中的width、height、margin、margin-[left|top|right|bottom]、margin-[start|end]样式。
+仅支持[通用样式](js-components-common-styles.md)中的width、height、margin、margin-[left | top | right | bottom]、margin-[start | end]样式。
 
 
 ## 事件

zh-cn/application-dev/reference/apis-arkui/arkui-js/js-components-container-div.md

@@ -37,10 +37,10 @@
 | justify-content                | string         | flex-start   | 否   | flex容器当前行的主轴对齐格式。可选项有：<br/>-&nbsp;flex-start：项目位于容器的开头。<br/>-&nbsp;flex-end：项目位于容器的结尾。<br/>-&nbsp;center：项目位于容器的中心。<br/>-&nbsp;space-between：项目位于各行之间留有空白的容器内。<br/>-&nbsp;space-around：项目位于各行之前、之间、之后都留有空白的容器内。<br/>-&nbsp;space-evenly<sup>5+</sup>:&nbsp;&nbsp;均匀排列每个元素，每个元素之间的间隔相等。 |
 | align-items                    | string         | stretch<br/> | 否   | flex容器当前行的交叉轴对齐格式，可选值为：<br/>-&nbsp;stretch：弹性元素在交叉轴方向被拉伸到与容器相同的高度或宽度。<br/>-&nbsp;flex-start：元素向交叉轴起点对齐。<br/>-&nbsp;flex-end：元素向交叉轴终点对齐。<br/>-&nbsp;center：元素在交叉轴居中。<br/>-&nbsp;baseline：如Flex布局纵向排列，则该值与’flex-start‘等效。横向布局时，内容元素存在文本时按照文本基线对齐，否则底部对齐。 |
 | align-content                  | string         | flex-start   | 否   | 交叉轴中有额外的空间时，多行内容对齐格式，可选值为：<br/>-&nbsp;flex-start：所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。<br/>-&nbsp;flex-end：所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。<br/>-&nbsp;center：所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。<br/>-&nbsp;space-between：所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。<br/>-&nbsp;space-around：所有行在容器中平均分布，相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。 |
-| grid-template-[columns\|rows]  | string         | 1行1列       | 否   | 用于设置当前网格布局行和列的数量，不设置时默认1行1列，仅当display为grid时生效。<br/>示例：如设置grid-template-columns为：<br/>-&nbsp;50px&nbsp;100px&nbsp;60px：分三列，第一列50px，第二列100px，第三列60px；<br/>-&nbsp;1fr&nbsp;1fr&nbsp;2fr：分三列，将父组件允许的宽分为4等份，第一列占1份，第二列占一份，第三列占2份；<br/>-&nbsp;30%&nbsp;20%&nbsp;50%：分三列，将父组件允许的宽为基准，第一列占30%，第二列占20%，第三列占50%；<br/>-&nbsp;repeat(2,100px)：分两列，第一列100px，第二列100px；<br/>-&nbsp;repeat(auto-fill,100px)<sup>5+</sup>：按照每列100px的大小和交叉轴大小计算最大正整数重复次数，按照该重复次数布满交叉轴；<br/>-&nbsp;auto&nbsp;1fr&nbsp;1fr：分三列，第一列自适应内部子组件所需宽度，剩余空间分为两等份，第二列占一份，第三列占一份。 |
-| grid-[columns\|rows]-gap       | &lt;length&gt; | 0            | 否   | 用于设置行与行的间距或者列与列的间距，也可以支持通过grid-gap设置相同的行列间距，仅当display为grid时生效。 |
-| grid-row-[start\|end]          | number         | -            | 否   | 用于设置当前元素在网格布局中的起止行号，仅当父组件display样式为grid时生效（仅div支持display样式设置为grid）。 |
-| grid-column-[start\|end]       | number         | -            | 否   | 用于设置当前元素在网格布局中的起止列号，仅当父组件display样式为grid时生效（仅div支持display样式设置为grid）。 |
+| grid-template-[columns \| rows]  | string         | 1行1列       | 否   | 用于设置当前网格布局行和列的数量，不设置时默认1行1列，仅当display为grid时生效。<br/>示例：如设置grid-template-columns为：<br/>-&nbsp;50px&nbsp;100px&nbsp;60px：分三列，第一列50px，第二列100px，第三列60px；<br/>-&nbsp;1fr&nbsp;1fr&nbsp;2fr：分三列，将父组件允许的宽分为4等份，第一列占1份，第二列占一份，第三列占2份；<br/>-&nbsp;30%&nbsp;20%&nbsp;50%：分三列，将父组件允许的宽为基准，第一列占30%，第二列占20%，第三列占50%；<br/>-&nbsp;repeat(2,100px)：分两列，第一列100px，第二列100px；<br/>-&nbsp;repeat(auto-fill,100px)<sup>5+</sup>：按照每列100px的大小和交叉轴大小计算最大正整数重复次数，按照该重复次数布满交叉轴；<br/>-&nbsp;auto&nbsp;1fr&nbsp;1fr：分三列，第一列自适应内部子组件所需宽度，剩余空间分为两等份，第二列占一份，第三列占一份。 |
+| grid-[columns \| rows]-gap       | &lt;length&gt; | 0            | 否   | 用于设置行与行的间距或者列与列的间距，也可以支持通过grid-gap设置相同的行列间距，仅当display为grid时生效。 |
+| grid-row-[start \| end]          | number         | -            | 否   | 用于设置当前元素在网格布局中的起止行号，仅当父组件display样式为grid时生效（仅div支持display样式设置为grid）。 |
+| grid-column-[start \| end]       | number         | -            | 否   | 用于设置当前元素在网格布局中的起止列号，仅当父组件display样式为grid时生效（仅div支持display样式设置为grid）。 |
 | grid-auto-flow<sup>5+</sup>    | string         | -            | 否   | 使用框架自动布局算法进行网格的布局，可选值为：<br/>-&nbsp;row：逐行填充元素，如果行空间不够，则新增行；<br/>-&nbsp;column：逐列填充元素，如果列空间不够，则新增列。 |
 | overflow<sup>6+</sup>          | string         | visible      | 否   | 设置元素内容区超过元素本身大小时的表现形式。<br/>-&nbsp;visible：多个子元素内容超过元素大小时，显示在元素外面；<br/>-&nbsp;hidden：元素内容超过元素大小时，进行裁切显示；<br/>-&nbsp;scroll：元素内容超过元素大小时，进行滚动显示并展示滚动条（当前只支持纵向）。<br/>overflow:&nbsp;scroll样式需要元素设置固定的大小，默认滚动方向与容器方向一致。 |
 | align-items<sup>6+</sup>       | string         | -            | 否   | 设置容器中元素交叉轴上的对齐方式：<br/>-&nbsp;stretch：Flex容器内容在交叉轴方向被拉伸到与容器相同的高度或宽度；<br/>-&nbsp;flex-start：Flex布局容器内元素向交叉轴起点对齐；<br/>-&nbsp;flex-end：Flex布局容器内元素向交叉轴终点对齐；<br/>-&nbsp;center：Flex布局容器内元素在交叉轴居中对齐；<br/>-&nbsp;baseline：如Flex布局纵向排列，则该值与'flex-start'等效。横向布局时，内容元素存在文本时按照文本基线对齐，否则底部对齐。 |
@@ -57,10 +57,10 @@
 
 | 名称                       | 参数   | 描述                                       |
 | ------------------------ | ---- | ---------------------------------------- |
-| reachstart<sup>6+</sup>  | -    | 当页面滑动到最开始的点时触发的事件回调，当flex-direction:&nbsp;row时才会触发。 |
-| reachend<sup>6+</sup>    | -    | 当页面滑动到最末尾的点时触发的事件回调，当flex-direction:&nbsp;row时才会触发。 |
-| reachtop<sup>6+</sup>    | -    | 当页面滑动到最上部的点时触发的事件回调，当flex-direction:&nbsp;column时才会触发。 |
-| reachbottom<sup>6+</sup> | -    | 当页面滑动到最下部的点时触发的事件回调，当flex-direction:&nbsp;column时才会触发。 |
+| reachstart<sup>6+</sup>  | -    | 当页面滑动到最开始的点时触发的事件回调，需要设置flex-direction为row时才会触发。 |
+| reachend<sup>6+</sup>    | -    | 当页面滑动到最末尾的点时触发的事件回调，需要设置flex-direction为row时才会触发。 |
+| reachtop<sup>6+</sup>    | -    | 当页面滑动到最上部的点时触发的事件回调，需要设置flex-direction为column时才会触发。 |
+| reachbottom<sup>6+</sup> | -    | 当页面滑动到最下部的点时触发的事件回调，需要设置flex-direction为column时才会触发。 |
 
 ## 方法
 

zh-cn/application-dev/reference/apis-arkui/arkui-js/js-components-container-list.md

@@ -39,7 +39,7 @@
 | divider<sup>5+</sup>        | boolean                                  | false   | 否    | item是否自带分隔线。<br/>其样式参考样式列表的divider-color、divider-height、divider-length、divider-origin。<br/>-&nbsp;false：item不自带分隔线。<br/>-&nbsp;true：item自带分隔线。 |
 | shapemode                   | string                                   | default | 否    | 侧边滑动栏的形状类型。<br/>-&nbsp;default：不指定，跟随主题；<br/>-&nbsp;rect：矩形；<br/>-&nbsp;round：圆形。 |
 | updateeffect                | boolean                                  | false   | 否    | 用于设置当list内部的item发生删除或新增时是否支持动效。<br/>-&nbsp;false：新增删除item时无过渡动效。<br/>-&nbsp;true：新增删除item时播放过程动效。 |
-| chainanimation<sup>5+</sup> | boolean                                  | false   | 否    | 用于设置当前list是否启用链式联动动效，开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果：list内的list-item间隔一定距离，在基本的滑动交互行为下，主动对象驱动从动对象进行联动，驱动效果遵循弹簧物理动效。<br/>-&nbsp;false：不启用链式联动<br/>-&nbsp;true：启用链式联动<br/>不支持动态修改。<br/>同时配置了indexer，链式动效不生效。<br/>如配置了链式动效，list-item的sticky不生效。 |
+| chainanimation<sup>5+</sup> | boolean                                  | false   | 否    | 用于设置当前list是否启用链式联动动效，开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果：list内的list-item间隔一定距离，在基本的滑动交互行为下，主动对象驱动从动对象进行联动，驱动效果遵循弹簧物理动效。<br/>-&nbsp;false：不启用链式联动。<br/>-&nbsp;true：启用链式联动。<br/>不支持动态修改。<br/>同时配置了indexer，链式动效不生效。<br/>如配置了链式动效，list-item的sticky不生效。 |
 | initialindex                | number                                   | 0       | 否    | 用于设置当前List初次加载时视口起始位置显示的item，默认为0，即显示第一个item，如设置的序号超过了最后一个item的序号，则设置不生效，当同时设置了initialoffset属性时，当前属性不生效。当indexer为true或者scrollpage为true时，不生效。 |
 | initialoffset               | &lt;length&gt;                           | 0       | 否    | 用于设置当前List初次加载时视口的起始偏移量，偏移量无法超过当前List可滑动的范围，如果超过会被截断为可滑动范围的极限值。当indexer为true或者scrollpage为true时，不生效。 |
 | selected<sup>5+</sup>       | string                                   | -       | 否    | 指定当前列表中被选中激活的项，可选值为list-item的section属性值。 |
@@ -94,7 +94,7 @@
 | scrollArrow   | {&nbsp;reverse:&nbsp;boolean,&nbsp;smooth:&nbsp;boolean&nbsp;} | reverse缺省值为false，表示向底部方向滑动一段距离，无足够距离则滚动到底部。<br/>reverse为true，表示向顶部方向滑动一段距离，无足够距离则滚动到顶部。<br/>smooth缺省值为false，表示直接滚动。<br/>smooth为true，表示平滑滚动。 |
 | collapseGroup | {&nbsp;groupid:&nbsp;string&nbsp;}       | 收起指定的group。<br/>groupid：需要收拢的group的id。<br/>当未指定groupid时收起所有group。 |
 | expandGroup   | {&nbsp;groupid:&nbsp;string&nbsp;}       | 展开指定的group。<br/>groupid：需要展开的group的id。<br/>当groupid未指定时展开所有的group。 |
-| currentOffset | -                                        | 返回当前滑动的偏移量。返回值类型是Object，返回值说明请见表 currentOffset返回对象属性说明。 |
+| currentOffset | -                                        | 返回当前滑动的偏移量。返回值类型是Object，返回值说明请参见表1 currentOffset返回对象属性说明。 |
 
 **表1** currentOffset返回对象属性说明
 

zh-cn/application-dev/reference/apis-arkui/arkui-js/js-components-grid-col.md

@@ -27,10 +27,10 @@ grid-col是栅格布局容器grid-row的子容器组件。
 
 | 名称     | 类型             | 默认值  | 必填   | 描述                                       |
 | ------ | -------------- | ---- | ---- | ---------------------------------------- |
-| xs     | number\|object | -    | 否    | 在分辨率为xs模式下，设置该项占用列数与偏移列数，当值为number类型时，仅设置列数，也可通过object同时设置占用列数与偏移列数。如<br>`{"span": 1, "offset": 0}` |
-| sm     | number\|object | -    | 否    | 在分辨率为sm模式下，该项占用列数与偏移列数，当值为number类型时，仅设置列数，也可通过object同时设置占用列数与偏移列数。如<br>`{"span": 1, "offset": 0}` |
-| md     | number\|object | -    | 否    | 在分辨率为md模式下，该项占用列数与偏移列数，当值为number类型时，仅设置列数，也可通过object同时设置占用列数与偏移列数。如<br>`{"span": 1, "offset": 0}` |
-| lg     | number\|object | -    | 否    | 在分辨率为lg模式下，该项占用列数与偏移列数，当值为number类型时，仅设置列数，也可通过object同时设置占用列数与偏移列数。如<br>`{"span": 1, "offset": 0}` |
+| xs     | number \| object | -    | 否    | 在分辨率为xs模式下，设置该项占用列数与偏移列数，当值为number类型时，仅设置列数，也可通过object同时设置占用列数与偏移列数。如<br>`{"span": 1, "offset": 0}` |
+| sm     | number \| object | -    | 否    | 在分辨率为sm模式下，该项占用列数与偏移列数，当值为number类型时，仅设置列数，也可通过object同时设置占用列数与偏移列数。如<br>`{"span": 1, "offset": 0}` |
+| md     | number \| object | -    | 否    | 在分辨率为md模式下，该项占用列数与偏移列数，当值为number类型时，仅设置列数，也可通过object同时设置占用列数与偏移列数。如<br>`{"span": 1, "offset": 0}` |
+| lg     | number \| object | -    | 否    | 在分辨率为lg模式下，该项占用列数与偏移列数，当值为number类型时，仅设置列数，也可通过object同时设置占用列数与偏移列数。如<br>`{"span": 1, "offset": 0}` |
 | span   | number         | 1    | 否    | 在未设置明确断点时，默认占用列数。                         |
 | offset | number         | 0    | 否    | 未设置具体分辨率模式下偏移时，当前元素延容器布局方向，默认偏移的列数。       |