diff --git a/en/application-dev/application-models/Readme-EN.md b/en/application-dev/application-models/Readme-EN.md
index aca0bbb39f14d5110bf82d2a610eca7d8b05dd6c..bdfbb5472e9389d57211c10042be0b9055508adc 100644
--- a/en/application-dev/application-models/Readme-EN.md
+++ b/en/application-dev/application-models/Readme-EN.md
@@ -5,7 +5,7 @@
   - [Interpretation of the Application Model](application-model-description.md)
 - Stage Model Development
   - [Stage Model Development Overview](stage-model-development-overview.md)
-  - Stage Mode Application Components
+  - Stage Model Application Components
     - [Application- or Component-Level Configuration](application-component-configuration-stage.md)
     - UIAbility Component
       - [UIAbility Component Overview](uiability-overview.md)
@@ -56,12 +56,13 @@
       - [Using Explicit Want to Start an Application Component](ability-startup-with-explicit-want.md)
       - [Using Implicit Want to Open a Website](ability-startup-with-implicit-want.md)
       - [Using Want to Share Data Between Applications](data-share-via-want.md)
-    - [Component Startup Rules](component-startup-rules.md)
-    - Inter-Device Application Component Interaction (Continuation) 
+    - [Component Startup Rules (Stage Model)](component-startup-rules.md)
+    - Inter-Device Application Component Interaction (Continuation)
       - [Continuation Overview](inter-device-interaction-hop-overview.md)
       - [Cross-Device Migration (for System Applications Only)](hop-cross-device-migration.md)
       - [Multi-device Collaboration (for System Applications Only)](hop-multi-device-collaboration.md)
     - [Subscribing to System Environment Variable Changes](subscribe-system-environment-variable-changes.md)
+    - [Setting Atomic Services to Support Sharing](atomic-services-support-sharing.md)
   - Process Model
     - [Process Model Overview](process-model-stage.md)
     - Common Events
@@ -81,12 +82,12 @@
   - Mission Management
     - [Mission Management Scenarios](mission-management-overview.md)
     - [Mission and Launch Type](mission-management-launch-type.md)
-    - [Page Stack and MissionList](page-mission-stack.md)
+    - [Page Stack and Mission List](page-mission-stack.md)
     - [Setting the Icon and Name of a Mission Snapshot](mission-set-icon-name-for-task-snapshot.md)
   - [Application Configuration File](config-file-stage.md)
 - FA Model Development
   - [FA Model Development Overview](fa-model-development-overview.md)
-  - FA Mode Application Components
+  - FA Model Application Components
     - [Application- or Component-Level Configuration](application-component-configuration-fa.md)
     - PageAbility Component Development
       - [PageAbility Component Overview](pageability-overview.md)
@@ -119,7 +120,7 @@
     - [Widget Development](widget-development-fa.md)
     - [Context](application-context-fa.md)
     - [Want](want-fa.md)
-    - [Component Startup Rules](component-startup-rules-fa.md)
+    - [Component Startup Rules (FA Model)](component-startup-rules-fa.md)
   - Process Model
     - [Process Model Overview](process-model-fa.md)
     - [Common Events](common-event-fa.md)
diff --git a/en/application-dev/application-models/atomic-services-support-sharing.md b/en/application-dev/application-models/atomic-services-support-sharing.md
new file mode 100644
index 0000000000000000000000000000000000000000..99feea4719836f576762c3a43b0323c6bf2388cc
--- /dev/null
+++ b/en/application-dev/application-models/atomic-services-support-sharing.md
@@ -0,0 +1,39 @@
+# Setting Atomic Services to Support Sharing
+By means of sharing, users can quickly access atomic services and use their features.
+
+## How to Develop
+In the sharing scenario, there are two parties involved: a target application that shares data and an application that obtains the shared data. The two can be physically the same. The target application uses the **onShare()** lifecycle callback to set the data to share. After the target application is started, you can run the **hdc shell aa dump -a** command to check the started services and processes and find its mission ID. After the current application is started, call the **abilityManager.acquireShareData()** API with the mission ID passed in to obtain the shared data.
+> **NOTE**
+>
+> The mission ID of the target application can also be obtained by calling [missionManager.getMissionInfos()](../reference/apis/js-apis-app-ability-missionManager.md#getmissioninfos).
+
+1. The target application calls **UIAbility.onShare()** provided by the UIAbility component to set the data to share. **ohos.extra.param.key.contentTitle** indicates the title of the content to share in the sharing box, **ohos.extra.param.key.shareAbstract** provides an abstract description of the content, and **ohos.extra.param.key.shareUrl** indicates the online address of the service. You need to set these three items as objects, with the key set to **title**, **abstract**, and **url**, respectively.
+
+   ```ts
+   import AbilityConstant from '@ohos.app.ability.AbilityConstant';
+   class MyUIAbility extends UIAbility {
+       onShare(wantParams) {
+           console.log('onShare');
+           wantParams['ohos.extra.param.key.contentTitle'] = {title: "W3"};
+           wantParams['ohos.extra.param.key.shareAbstract'] = {abstract: "communication for huawei employee"};
+           wantParams['ohos.extra.param.key.shareUrl'] = {url: "w3.huawei.com"};
+       }
+   }
+   ```
+
+2. The current application calls **abilityManager.acquireShareData()** to obtain the data shared by the target application. **missionId** indicates the target application's mission ID, which can be obtained by running the **hdc shell aa dump -a** command or calling the **missionManager.getMissionInfos()** API after the target application is started. **wantParam** indicates the data shared by the target application through the **UIAbility.onShare()** lifecycle callback.
+
+   ```ts
+   import abilityManager from '@ohos.app.ability.abilityManager';
+   try {
+       abilityManager.acquireShareData(1, (err, wantParam) => {
+           if (err) {
+               console.error(`acquireShareData fail, err: ${JSON.stringify(err)}`);
+           } else {
+               console.log(`acquireShareData success, data: ${JSON.stringify(wantParam)}`);
+           }
+       });
+   } catch (paramError) {
+       console.error(`error.code: ${JSON.stringify(paramError.code)}, error.message: ${JSON.stringify(paramError.message)}`);
+   }
+   ```
diff --git a/en/application-dev/faqs/Readme-EN.md b/en/application-dev/faqs/Readme-EN.md
index 2d2d57ca6bb00f25c3db08338518910905417e5d..195bfc2294b5ba41c00d20bf5b7dec7938248c90 100644
--- a/en/application-dev/faqs/Readme-EN.md
+++ b/en/application-dev/faqs/Readme-EN.md
@@ -4,7 +4,12 @@
 - [Switching to Full SDK](full-sdk-switch-guide.md)
 - [Application Model Development](faqs-ability.md)
 - ArkUI Framework Development (ArkTS)
-  - [ArkUI Development (ArkTS Syntax)](faqs-arkui-arkts.md)
+  - [ArkTS Syntax Usage](faqs-arkui-arkts.md)
+  - [ArkUI Component Development (ArkTS)](faqs-arkui-component.md)
+  - [ArkUI Layout Development (ArkTS)](faqs-arkui-layout.md)
+  - [ArkUI Routing/Navigation Development (ArkTS)](faqs-arkui-route-nav.md)
+  - [ArkUI Animation/Interaction Event Development (ArkTS)](faqs-arkui-animation-interactive-event.md)
+- [ArkUI Development (JS)](faqs-arkui-js.md)
 - [Web Development](faqs-arkui-web.md)
 - [Bundle Management Development](faqs-bundle-management.md)
 - [Resource Manager Development](faqs-globalization.md)
diff --git a/en/application-dev/faqs/faqs-arkui-animation-interactive-event.md b/en/application-dev/faqs/faqs-arkui-animation-interactive-event.md
new file mode 100644
index 0000000000000000000000000000000000000000..fbe2594e6591bb774aa116095e721ca889490cc8
--- /dev/null
+++ b/en/application-dev/faqs/faqs-arkui-animation-interactive-event.md
@@ -0,0 +1,269 @@
+# ArkUI Animation/Interaction Event Development (ArkTS)
+
+## What should I do if the onBlur and onFocus callbacks cannot be triggered?
+
+Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
+
+**Symptom**
+
+The **onBlur** and **onFocus** callbacks of the focus event cannot be triggered.
+
+**Solution**
+
+Check the trigger device. By default, the focus event (and the **onBlur** and **onFocus** callbacks) can be triggered only by the Tab button and arrow buttons on the connected keyboard. To enable the focus event to be triggered by a touch, add the **focusOnTouch** attribute for the target component.
+
+**Reference**
+
+[Focus Control](../reference/arkui-ts/ts-universal-attributes-focus.md)
+
+## How do I disable the scroll event of a \<Grid> nested in the \<Scroll>?
+
+Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
+
+Implement nested scrolling of the containers, by using the **onScrollFrameBegin** event and the **scrollBy** method.
+
+**Reference**
+
+[Scroll](../reference/arkui-ts/ts-container-scroll.md#example-2)
+
+## How do I enable a component to rotate continuously?
+
+Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
+
+You can use [attribute animation](../reference/arkui-ts/ts-animatorproperty.md) to that effect.
+
+## How do I scroll a list with the keyboard?
+
+Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
+
+**Solution** 
+
+- Add **focusable\(true\)** to the list item to enable it to obtain focus.
+
+- Nest a focusable component, for example, **\<Button>**, at the outer layer of each item.
+
+## Why is the click event not triggered for the focused component upon the press of the Enter key after keyboard navigation?
+
+Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
+
+By default, the built-in click event of the component and the custom **onClick** click event are bound to the space bar instead of the Enter key.
+
+## How do I block event bubbling when a button is nested in multi-layer components?
+
+Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
+
+You can bind the button to the **stopPropagation** parameter.
+
+## How do I disable the transition effect between pages when the router or navigator is used to switch between pages?
+
+Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
+
+1.  Define the **pageTransition** method for the current and target pages, by following instructions in [Example](../reference/arkui-ts/ts-page-transition-animation.md#example).
+2.  Set the **duration** parameter of both **PageTransitionEnter** and **PageTransitionExit** to **0**.
+
+## How do I fix misidentification of the pan gesture where container nesting is involved?
+
+Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
+
+The pan gesture requires a minimum 5 vp movement distance of a finger on the screen. You can set the **distance** parameter in **PanGesture** to **1** so that the pan gesture can be more easily recognized.
+
+**Reference**
+
+[PanGesture](../reference/arkui-ts/ts-basic-gestures-pangesture.md)
+
+## Can I use the fontFamily attribute to set different fonts for OpenHarmony applications?
+
+Applicable to: OpenHarmony 3.2 Beta5 (API version 9)
+
+No. For applications developed based on OpenHarmony, only the default font, HarmonyOS Sans, is supported.
+
+## How do I implement a text input box that shows a soft keyboard when touched and hides the soft keyboard when a button is touched?
+
+Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
+
+Use **focusControl** for the **\<TextInput>** component to control its focus. The **\<TextInput>** component shows a soft keyboard when it gains focus and hides the soft keyboard when it loses focus.
+
+**Example**
+
+```
+build() {
+  Column() {
+    TextInput()
+    Button(`hide`)
+      .key('button')
+      .onClick(()=>{
+        focusControl.requestFocus('button')
+      })
+  }
+}
+```
+
+## How do I implement a button that only responds to the bound onClick event, but not the onTouch event bound to the button's parent component?
+
+Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
+
+Bind **onTouch** to the **\<Button>** component and use **stopPropagation\(\)** in **onTouch** to prevent **onTouch** from bubbling up to the parent component.
+
+**Example**
+
+```
+build() {
+  Row() {
+    Button ("Click Me")
+      .width(100)
+      .width(100)
+      .backgroundColor('#f00')
+      .onClick(()=>{
+        console.log("Button onClick")
+      })
+      .onTouch((e) => {
+        console.log("Button onTouch")
+        e.stopPropagation()
+      })
+  }
+  .onTouch(() => {
+    console.log("Row onTouch")
+  })
+}
+```
+
+## Why is the menu bound to a component not displayed by a right-click on the component?
+
+Applicable to: OpenHarmony 3.2 Beta (API version 9)
+
+**Solution**
+
+Currently, the menu is displayed when the bound component is clicked or long pressed.
+
+## How do I shield the default keyboard popup behavior of the \<TextInput> component?
+
+Applicable to: OpenHarmony 3.2 Beta5 (API version 9)
+
+Set the **focusable** attribute of the **\<TextInput>** component to **false**. In this way, the component is not focusable and therefore will not bring up the keyboard.
+
+## How do I implement the slide up and slide down effect for page transition?
+
+Applicable to: OpenHarmony 3.2 Beta5 (API version 9)
+
+**Solution**
+
+You can use the **pageTransition** API to implement the page transition effect. Specifically, set the **slide** attribute in **PageTransitionEnter** and **PageTransitionExit** to **SlideEffect.Bottom**. In this way, the page slides in and out from the bottom.
+
+**Example**
+
+```
+// Index.ets
+@Entry
+@Component
+struct PageTransition1 {
+  build() {
+    Stack({alignContent: Alignment.Bottom}) {
+      Navigator({ target: 'pages/Page1'}) {
+        Image($r('app.media.ic_banner01')).width('100%').height(200) // Save the image in the media folder.
+      }
+    }.height('100%').width('100%')
+  }
+  pageTransition() {
+    PageTransitionEnter({ duration: 500, curve: Curve.Linear }).slide(SlideEffect.Bottom)
+    PageTransitionExit({ duration: 500, curve: Curve.Ease }).slide(SlideEffect.Bottom)
+  }
+}
+```
+
+```
+// Page1.ets
+@Entry
+@Component
+struct PageTransition2 {
+  build() {
+    Stack({alignContent: Alignment.Bottom}) {
+      Navigator({ target: 'pages/Index'}) {
+        Image($r('app.media.ic_banner02')).width('100%').height(200) // Save the image in the media folder.
+      }
+    }.height('100%').width('100%')
+  }
+  pageTransition() {
+    PageTransitionEnter({ duration: 500, curve: Curve.Linear }).slide(SlideEffect.Bottom)
+    PageTransitionExit({ duration: 500, curve: Curve.Ease }).slide(SlideEffect.Bottom)
+  }
+}
+```
+
+**Reference**
+
+[Page Transition Animation](../ui/arkts-page-transition-animation.md)
+
+## How do I configure custom components to slide in and out from the bottom?
+
+Applicable to: OpenHarmony 3.2 Beta5 (API version 9)
+
+**Symptom**
+
+Custom components A and B need to deliver the following effects: When custom component A, displayed at the bottom of the screen by default, is touched, it is hidden, and custom component B slides in from the bottom. When custom component B is touched, it is hidden, and custom component A slides in from the bottom.
+
+**Solution**
+
+You can use the **transition** attribute to create component transition animations. Set the **type** parameter to specify the component transition type, which can be component addition, component deletion, or both. Set the **translate** parameter to specify the translation of the component during transition. **NOTE**<br>The **transition** attribute must work with **animateTo**. The animation duration, curve, and delay follow the settings in **animateTo**.
+
+**Example**
+
+```
+@Entry
+@Component
+struct ComponentTransition {
+  @State flag: boolean = true;
+
+  build() {
+    Stack({alignContent: Alignment.Bottom}) {
+        if (this.flag) {
+          ComponentChild1({ flag: $flag })
+            .transition({ type: TransitionType.Insert,translate: { x: 0, y: 200 } })
+        }
+        if (!this.flag) {
+          ComponentChild2({ flag: $flag })
+            .transition({ type: TransitionType.Insert, translate: { x: 0, y: 200 } })
+        }
+    }.height('100%').width('100%')
+  }
+}
+
+@Component
+struct ComponentChild1 {
+  @Link flag: boolean
+
+  build() {
+    Column() {
+      Image($r('app.media.ic_banner01'))
+        .width('100%')
+        .height(200)
+        .onClick(() => {
+          animateTo({ duration: 1000 }, () => {
+            this.flag = !this.flag;
+          })
+        })
+    }
+  }
+}
+
+@Component
+struct ComponentChild2 {
+  @Link flag: boolean
+
+  build() {
+    Column() {
+      Image($r('app.media.ic_banner02'))
+        .width('100%')
+        .height(200)
+        .onClick(() => {
+          animateTo({ duration: 1000 }, () => {
+            this.flag = !this.flag;
+          })
+        })
+    }
+  }
+}
+```
+
+**Reference**
+
+[Transition Animation Within the Component](../ui/arkts-transition-animation-within-component.md)
diff --git a/en/application-dev/faqs/faqs-arkui-arkts.md b/en/application-dev/faqs/faqs-arkui-arkts.md
index 13bc55587a4a8c82ced1d028fbc8c04cb6559d2b..30372ac1e4f810f87e225b397b2aa5f95208ed0c 100644
--- a/en/application-dev/faqs/faqs-arkui-arkts.md
+++ b/en/application-dev/faqs/faqs-arkui-arkts.md
@@ -1,4 +1,4 @@
-# ArkUI Development (ArkTS Syntax)
+# ArkTS Syntax Usage
 
 ## How do I dynamically create components using code in ArkUI?
 
@@ -522,7 +522,7 @@ Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
 
 **Reference**
 
-[Resource Categories and Access](../quick-start/resource-categories-and-access.md) and [@ohos.resourceManager (Resource Manager)](../reference/apis/js-apis-resource-manager.md#getstring)
+[Resource Categories and Access](../quick-start/resource-categories-and-access.md) and [@ohos.resourceManager (Resource Manager)](../reference/apis/js-apis-resource-manager.md)
 
 ## How do I convert the XML format to the JSON format?
 
diff --git a/en/application-dev/faqs/faqs-arkui-component.md b/en/application-dev/faqs/faqs-arkui-component.md
new file mode 100644
index 0000000000000000000000000000000000000000..0bb884119bda149effc09337d957ccd2231bf1c7
--- /dev/null
+++ b/en/application-dev/faqs/faqs-arkui-component.md
@@ -0,0 +1,687 @@
+# ArkUI Component Development (ArkTS)
+
+## Can custom dialog boxes be defined or used in .ts files?
+
+Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
+
+Unfortunately, no. ArkTS syntax is required for defining and initializing custom dialog boxes. Therefore, they can be defined and used only in .ets files.
+
+**Reference**
+
+[Custom Dialog Box](../reference/arkui-ts/ts-methods-custom-dialog-box.md)
+
+## How do I transfer variables in a custom dialog box to a page?
+
+Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
+
+**Symptom**
+
+The variable defined in a custom dialog box needs to be transferred to the page when the dialog box is closed or the variable changes.
+
+**Solution**
+
+-   Method 1: Define the variable as a state variable of the custom dialog box.
+-   Method 2: During initialization of the custom dialog box, pass to it a method, which is triggered in the custom dialog box and accepts the variable in the custom dialog box as a parameter.
+-   Method 3: Use AppStorage or LocalStorage to manage page state and implement state sharing between the custom dialog box and page.
+
+**Example**
+
+-   Method 1:
+
+    ```
+    @CustomDialog
+    struct CustomDialog01 {
+      @Link inputValue: string
+      controller: CustomDialogController
+      build() {
+        Column() {
+          Text('Change text').fontSize(20).margin({ top: 10, bottom: 10 })
+          TextInput({ placeholder: '', text: this.inputValue }).height(60).width('90%')
+            .onChange((value: string) => {
+              this.inputValue = value
+            })
+        }
+      }
+    }
+    
+    @Entry
+    @Component
+    struct DialogDemo01 {
+      @State inputValue: string = 'click me'
+      dialogController: CustomDialogController = new CustomDialogController({
+        builder: CustomDialog01({
+          inputValue: $inputValue
+        })
+      })
+    
+      build() {
+        Column() {
+          Button(this.inputValue)
+            .onClick(() => {
+              this.dialogController.open()
+            }).backgroundColor(0x317aff)
+        }.width('100%').margin({ top: 5 })
+      }
+    }
+    
+    ```
+
+-   Method 2:
+
+    ```
+    @CustomDialog
+    struct CustomDialog02 {
+      private inputValue: string
+      changeInputValue: (val: string) => void
+      controller: CustomDialogController
+      build() {
+        Column() {
+          Text('Change text').fontSize(20).margin({ top: 10, bottom: 10 })
+          TextInput({ placeholder: '', text: this.inputValue }).height(60).width('90%')
+            .onChange((value: string) => {
+              this.changeInputValue(value)
+            })
+        }
+      }
+    }
+    
+    @Entry
+    @Component
+    struct DialogDemo02 {
+      @State inputValue: string = 'click me'
+      dialogController: CustomDialogController = new CustomDialogController({
+        builder: CustomDialog02({
+          inputValue: this.inputValue,
+          changeInputValue: (val: string) => {
+            this.inputValue = val
+          }
+        })
+      })
+    
+      build() {
+        Column() {
+          Button(this.inputValue)
+            .onClick(() => {
+              this.dialogController.open()
+            }).backgroundColor(0x317aff)
+        }.width('100%').margin({ top: 5 })
+      }
+    }
+    
+    ```
+
+-   Method 3:
+
+    ```
+    let storage = LocalStorage.GetShared()
+    @CustomDialog
+    struct CustomDialog03 {
+      @LocalStorageLink('inputVal')  inputValue: string = ''
+      controller: CustomDialogController
+      build() {
+        Column() {
+          Text('Change text').fontSize(20).margin({ top: 10, bottom: 10 })
+          TextInput({ placeholder: '', text: this.inputValue }).height(60).width('90%')
+            .onChange((value: string) => {
+              this.inputValue = value;
+            })
+        }
+      }
+    }
+    
+    @Entry(storage)
+    @Component
+    struct DialogDemo03 {
+      @LocalStorageLink('inputVal') inputValue: string = ''
+      dialogController: CustomDialogController = new CustomDialogController({
+        builder: CustomDialog03()
+      })
+    
+      build() {
+        Column() {
+          Button(this.inputValue)
+            .onClick(() => {
+              this.dialogController.open()
+            }).backgroundColor(0x317aff)
+        }.width('100%').margin({ top: 5 })
+      }
+    }
+    
+    ```
+
+
+## How do I obtain the width and height of a component?
+
+Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
+
+**Symptom**
+
+The width and height of a component need to be obtained to calculate the size and offset of the layout area.
+
+**Solution**
+
+-   Method 1: Use the **onAreaChange** event of the component, which is triggered when the component is initialized or the component size changes.
+-   Manner 2: Use the callback in the click or touch event, which provides the area information of the target element.
+
+**Reference**
+
+[Component Area Change Event](../reference/arkui-ts/ts-universal-component-area-change-event.md), [Click Event](../reference/arkui-ts/ts-universal-events-click.md), [Touch Event](../reference/arkui-ts/ts-universal-events-touch.md)
+
+## How do I clear the content of the \<TextInput> and \<TextArea> components by one click?
+
+Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
+
+**Symptom**
+
+A click-to-clear feature is required to remove all characters in the **\<TextInput>** and **\<TextArea>** component at once.
+
+**Solution**
+
+Convert the **text** attribute of the **\<TextInput>** and **\<TextArea>** component to a state variable. Assign an empty string to the state variable when the click-to-clear event is performed.
+
+**Example**
+
+```
+struct Index {
+@State text: string = 'Hello World'
+controller: TextInputController = new TextInputController()
+  build() {
+    Row() {
+      Column() {
+        TextInput({ placeholder: 'Please input your words.', text: this.text,
+          controller:this.controller}).onChange((value) => {
+            this.text = value
+          })
+        Button("Clear TextInput").onClick(() => {
+          this.text = "";
+        })
+      }
+      .width('100%')
+    }
+    .height('100%')
+  }
+}
+```
+
+## How do I set the position of a custom dialog box?
+
+Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
+
+**Symptom**
+
+By default, a custom dialog box is displayed in the center of the window. In some cases, it needs to be aligned with the window border.
+
+**Solution**
+
+During initialization of the custom dialog box, set the **alignment** and **offset** parameters.
+
+**Reference**
+
+[Custom Dialog Box](../reference/arkui-ts/ts-methods-custom-dialog-box.md)
+
+## How do I hide the overflow content of a container component?
+
+Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
+
+**Symptom**
+
+When content overflows in a container component, that is, the child component does not fit in the container component, the overflow content needs to be processed.
+
+**Solution**
+
+To clip and hide overflow content, set the **clip** universal attribute to **true**. By default, this attribute is set to **false**.
+
+**Reference**
+
+[Shape Clipping](../reference/arkui-ts/ts-universal-attributes-sharp-clipping.md)
+
+## How do I set a custom dialog box to automatically adapt its size to content?
+
+Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
+
+**Symptom**
+
+When a custom dialog box contains a child component whose area size can be changed, it needs to automatically adjust its size.
+
+**Solution**
+
+-   Method 1: Use the default style of the custom dialog box. In this case, the dialog box automatically adapts its width to the grid system and its height to the child components; the maximum height is 90% of the container height.
+-   Method 2: Use a custom style of the custom dialog box. In this case, the dialog box automatically adapts its width and height to the child components.
+
+**Reference**
+
+[Custom Dialog Box](../reference/arkui-ts/ts-methods-custom-dialog-box.md)
+
+## What is the function of the gridCount parameter in the custom dialog box?
+
+Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
+
+The **gridCount** parameter indicates the number of grid columns occupied by the dialog box. The system divides the window width into equal regions. The number of equal regions is the number of grid columns, which varies by device. For example, if the screen density of a device is 320 vp <= horizontal width < 600 vp, the number of grid columns is 4, and the valid value of **gridCount** is \[1, 4\].
+
+Note: This parameter is valid only when the custom dialog box is in the default style.
+
+**Reference**
+
+[Custom Dialog Box](../reference/arkui-ts/ts-methods-custom-dialog-box.md)
+
+## How do I remove the white background of a custom dialog box?
+
+Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
+
+**Symptom**
+
+When in the default style a custom dialog box comes with a white background.
+
+**Solution**
+
+To remove the white background, set the custom dialog box to a custom style.
+
+1.  During initialization of the custom dialog box, set **customStyle** to **true**.
+2.  During initialization of the custom dialog box, set **backgroundColor** to the color you prefer.
+
+**Reference**
+
+[Custom Dialog Box](../reference/arkui-ts/ts-methods-custom-dialog-box.md)
+
+## How do I customize the eye icon for the password input mode of the \<TextInput> component?
+
+Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
+
+**Symptom**
+
+The eye icon for the password input mode (with the **type** attribute of the **\<TextInput>** component set to **InputType.Password**) cannot be customized.
+
+**Solution**
+
+The eye icon itself cannot be customized. You can use set the **showPasswordIcon** attribute of the **\<TextInput>** component to **false** to hide the icon, and use the **\<Image>** component to control the type of the **\<TextInput>** component.
+
+**Reference**
+
+[TextInput](../reference/arkui-ts/ts-basic-components-textinput.md)
+
+## How do I use the onSubmit event of the \<TextInput> component?
+
+Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
+
+**Solution**
+
+The **onSubmit** event is triggered when a user presses **Enter** on the (physical or soft) keyboard. The callback parameter in the event is the current Enter key type. The Enter key type can be set through the **enterKeyType** attribute of the **\<TextInput>** component. Setting the key style of the soft keyboard requires support by the input method.
+
+**Reference**
+
+[TextInput](../reference/arkui-ts/ts-basic-components-textinput.md)
+
+## How do I set the caret position to the start point for when the \<TextInput> component obtains focus?
+
+Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
+
+**Symptom**
+
+When the **\<TextInput>** component obtains focus, the caret automatically moves to the position of the touch point, instead of the start position.
+
+**Solution**
+
+1.  Bind the **\<TextInput>** component to the **onEditChange** event, which is triggered when the component enters the input state.
+2.  Call the **setTimeout** API for asynchronous processing. Then call the **TextInputController.caretPosition** API in the event callback to set the caret position.
+
+**Example**
+
+```
+@Entry
+@Component
+struct TextInputDemo {
+  controller: TextInputController = new TextInputController()
+
+  build() {
+    Column() {
+      TextInput({ controller: this.controller })
+        .onEditChange((isEditing: boolean) => {
+          if (isEditing) {
+            setTimeout(() => {
+              this.controller.caretPosition(0)
+            }, 100)
+          }
+        })
+    }
+  }
+}
+```
+
+**Reference**
+
+[TextInput](../reference/arkui-ts/ts-basic-components-textinput.md)
+
+
+## How do I obtain the current scrolling offset of a scrollable component?
+
+Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
+
+**Solution**
+
+1.  During initialization of the scrollable component, such as **\<List>**, **\<Grid>**, and **\<Scroll>**, set the **scroller** parameter to bind the component to a scroll controller.
+2.  Call the **currentOffset** API of the controller to obtain the horizontal and vertical scrolling offsets.
+
+**Reference**
+
+[Scroll](../reference/arkui-ts/ts-container-scroll.md#currentoffset)
+
+## How do I align text vertically?
+
+Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
+
+**Symptom**
+
+Text cannot be aligned vertically in the **\<Text>** component.
+
+**Solution**
+
+Text is aligned horizontally in the **\<Text>** component. To enable text to align vertically, you can split the file, include it in a **\<Flex>** container, and set the container's main axis direction to vertical.
+
+**Example**
+
+```
+@Entry
+@Component
+struct Index15 {
+  private message: string = 'This document is intended for novices in developing applications. It introduces you to the application development process and main files in the project director, by walking you through the building of a simple application with the page redirection/return feature.';
+  build() {
+    Flex({ direction: FlexDirection.Column, wrap: FlexWrap.Wrap }) {
+      ForEach(this.message.split(''), (item, index) => {
+        Text(item)
+          .fontSize(30)
+          .flexShrink(0)
+      })
+    }
+  }
+}
+```
+
+## How do I set the UI of an ability to transparent?
+
+Applicable to: OpenHarmony 3.2 Beta5 (API version 9)
+
+**Solution**
+
+Set the background color of the top container component to transparent, and then set the **opacity** attribute of the XComponent to **0.01**.
+
+**Example**
+
+```
+build() {
+  Stack() {
+    XComponent({
+    id: 'componentId',
+    type: 'surface',
+    })
+    .width('100%')
+    .height('100%')
+    .opacity(0.01)
+    // Page content
+  }
+  .width('100%')
+  .height('100%')
+  .backgroundColor('rgba(255,255,255, 0)')
+}
+```
+
+## Why do the constraintSize settings fail to take effect?
+
+Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model)
+
+**Symptom**
+
+If **constraintSize** is set for a component and the width of its child component is set to a percentage, for example, **width\('100%'\)**, **constraintSize** takes effect by multiplying the maximum width by the percentage. As a result, the child component may overflow, in which case it looks like the **constraintSize** settings fail to take effect.
+
+**Solution**
+
+You can use the **\<Scroll>** component at the outer layer. In this way, when **constraintSize** is set and the space occupied by a child component exceeds the specified constraint value, a scrollbar will be displayed.
+
+## How do I set the background color to transparent?
+
+Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
+
+**Solution**
+
+Set **backgroundColor** to **'\#00000000'**.
+
+## What should I do if the \<Scroll> component cannot scroll to the bottom?
+
+Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model)
+
+**Symptom**
+
+Unless otherwise specified, the height of the **\<Scroll>** component is equal to the window height. In this case, the component's bottom area will be blocked by components (if any) outside of it.
+
+**Solution**
+
+Set the height of the **\<Scroll>** component or use the flex layout to limit this height.
+
+## How do I customize the control bar style of the \<Video> component?
+
+Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model)
+
+**Solution**
+
+1. Set **controls** to **false** to disable the default control bar.
+
+2. Sets **controller** for the **\<Video>** component.
+
+3. Implement a custom control bar in ArkTS and use **VideoController** to control video playback.
+
+**Example**
+
+```
+// xxx.ets
+@Entry@Componentstruct VideoCreateComponent {
+  @State videoSrc: Resource = $rawfile('video1.mp4')
+  @State previewUri: Resource = $r('app.media.poster1')
+  @State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X
+  @State isAutoPlay: boolean = false
+  @State showControls: boolean = true
+  controller: VideoController = new VideoController()
+   build() {
+    Column() {
+      Video({
+        src: this.videoSrc,
+        previewUri: this.previewUri,
+        currentProgressRate: this.curRate,
+        controller: this.controller
+      }).width('100%').height(600)
+        .autoPlay(this.isAutoPlay)
+        .controls(this.showControls)
+        .onStart(() => {
+          console.info('onStart')
+        })
+        .onPause(() => {
+          console.info('onPause')
+        })
+        .onFinish(() => {
+          console.info('onFinish')
+        })
+        .onError(() => {
+          console.info('onError')
+        })
+        .onPrepared((e) => {
+          console.info('onPrepared is ' + e.duration)
+        })
+        .onSeeking((e) => {
+          console.info('onSeeking is ' + e.time)
+        })
+        .onSeeked((e) => {
+          console.info('onSeeked is ' + e.time)
+        })
+        .onUpdate((e) => {
+          console.info('onUpdate is ' + e.time)
+        })
+             Row() {
+        Button('src').onClick(() => {
+          this.videoSrc = $rawfile('video2.mp4') // Switch the video source.
+        }).margin(5)
+        Button('previewUri').onClick(() => {
+          this.previewUri = $r('app.media.poster2') // Switch the preview image.
+        }).margin(5)
+
+        Button('controls').onClick(() => {
+          this.showControls =! this.showControls // Specify whether to show the control bar.
+        }).margin(5)
+      }
+       Row() {
+        Button('start').onClick(() => {
+          this.controller.start() // Start playback.
+        }).margin(5)
+        Button('pause').onClick(() => {
+          this.controller.pause() // Pause playback.
+        }).margin(5)
+        Button('stop').onClick(() => {
+          this.controller.stop() // Stop playback.
+        }).margin(5)
+        Button('setTime').onClick(() => {
+          this.controller.setCurrentTime(10, SeekMode.Accurate) // Seek to the 10s position of the video.
+        }).margin(5)
+      }
+       Row() {
+        Button('rate 0.75').onClick(() => {
+          this.curRate = PlaybackSpeed.Speed_Forward_0_75_X // Play the video at the 0.75x speed.
+        }).margin(5)
+        Button('rate 1').onClick(() => {
+          this.curRate = PlaybackSpeed.Speed_Forward_1_00_X // Play the video at the 1x speed.
+        }).margin(5)
+        Button('rate 2').onClick(() => {
+          this.curRate = PlaybackSpeed.Speed_Forward_2_00_X // Play the video at the 2x speed.
+        }).margin(5)
+      }
+    }
+  }}
+```
+
+**Reference**
+
+[Video](../reference/arkui-ts/ts-media-components-video.md#start)
+
+## How do I set state-specific styles for a component?
+
+**Solution**
+
+You can use the **stateStyles** attribute to set styles of a component for different states (stateless, pressed, disabled, focused, or clicked).
+
+**Example**
+
+```
+//xxx.ts
+@Entry
+@Component
+struct StyleExample {
+  @State isEnable: boolean = true;
+
+  @Styles pressedStyles() {
+    .backgroundColor("#ED6F21")
+    .borderRadius(10)
+    .borderStyle(BorderStyle.Dashed)
+    .borderWidth(2)
+    .borderColor('#33000000')
+    .width(120)
+    .height(30)
+    .opacity(1)
+  }
+  build() {
+    Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center}) {
+      Text("pressed")
+        .backgroundColor('#0A59F7')
+        .borderRadius(20)
+        .borderStyle(BorderStyle.Dotted)
+        .borderWidth(2)
+        .borderColor(Color.Red)
+        .width(100)
+        .height(25)
+        .opacity(1)
+        .fontSize(14)
+        .fontColor(Color.White)
+        .stateStyles({
+          pressed: this.pressedStyles
+        })
+        .margin({
+          bottom: 20
+        })
+        .textAlign(TextAlign.Center)
+    }
+    .width(350)
+    .height(300)
+  }
+}
+```
+
+**Reference**
+
+[Polymorphic Style](../reference/arkui-ts/ts-universal-attributes-polymorphic-style.md)
+
+## What should I do if the flex width and height in the \<Scroll> component conflicts with the scrolling?
+
+Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model)
+
+**Symptom**
+
+When a container component with a fixed size is added to the **\<Scroll>** component, a scrolling error occurs.
+
+**Solution**
+
+Do not set a size for any container component in the **\<Scroll>** component. In this way, the **\<Scroll>** component can adapt its size to the content.
+
+## How does a component process click events in its child components?
+
+Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model)
+
+When a child component is initialized in the parent component, the method defined in the parent component is transferred to and invoked in the child component. This process is similar to variable transfer.
+
+**Example**
+
+```
+class Model {
+  value: string
+}
+@Entry
+@Component
+struct EntryComponent {
+  test() {
+    console.log('testTag test in my component');
+  }
+  build() {
+    Column() {
+      MyComponent({ title: { value: 'Hello World 2' }, count: 7, onClick: this.test }) // The defined method is transferred during initialization.
+    }
+  }
+}
+
+@Component
+struct MyComponent {
+  @State title: Model = { value: 'Hello World' }
+  @State count: number = 0
+  onClick: any;
+  private toggle: string = 'Hello World'
+  private increaseBy: number = 1
+
+  build() {
+    Column() {
+      Text(`${this.title.value}`).fontSize(30)
+      Button(`Click to increase count=${this.count}`)
+        .margin(20)
+        .onClick(() => {
+          // Change the count value of the internal state variable.
+          this.count += this.increaseBy
+          this.onClick.call();
+        })
+    }
+  }
+}
+```
+
+## How do I implement a text input box that automatically brings up the soft keyboard?
+
+Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
+
+**Solution**
+
+You can use **focusControl.requestFocus** to control the focus of the text input box. When the text input box is in focus, it automatically brings up the soft keyboard.
+
+**Reference**
+
+[Focus Control](../reference/arkui-ts/ts-universal-attributes-focus.md)
diff --git a/en/application-dev/faqs/faqs-arkui-js.md b/en/application-dev/faqs/faqs-arkui-js.md
new file mode 100644
index 0000000000000000000000000000000000000000..fc5478b32e68696dc4e22bf8c61002d4916fce06
--- /dev/null
+++ b/en/application-dev/faqs/faqs-arkui-js.md
@@ -0,0 +1,37 @@
+# ArkUI Development (JS)
+
+## Why can't array variables be used to control component attributes?
+
+Applicable to: OpenHarmony (DevEco Studio 3.0.0.993, API version 8)
+
+Currently, the web-like development paradigm does not listen for the modification of elements in an array. Therefore, the page refresh can be triggered only when the array object is modified, but not when an element in the array is modified. In the following example, the **test1\(\)** statement, which assigns values to the entire array, will disable the related **\<Button>** component; in contrast, the **test2\(\)** statement, which assigns a value to an element in the array, will not disable the **\<Button>** component. In addition to **test1\(\)**, you can also use the method of modifying the array, for example, **splice\(\)**, to trigger the page refresh.
+
+```
+test1() {this.isDisabled = [true, true, true, true, true]; // This statement disables the <Button> component.
+test2() {this.isDisabled[0] = true; // This statement does not work for the <Button> component.
+```
+
+## Does the \<input> component support center alignment?
+
+Applicable to: OpenHarmony 3.2 Beta5 (API version 9, FA model)
+
+**Symptom**
+
+The **text-align** style does not work for the **\<input>** component.
+
+**Solution**
+
+The **text-align** style works for the **\<text>** component, but not for the **\<input>** component.
+
+**Reference**
+
+[input](../reference/arkui-js/js-components-basic-input.md), [text](../reference/arkui-js/js-components-basic-text.md)
+
+
+## How do I determine whether a value exists in a JS object?
+
+Applicable to: OpenHarmony 3.2 Release (API version 9)
+
+**Solution**
+
+Use **Object.values\(*object name*\).indexOf\(*value to be checked*\)**. If **-1** is returned, the corresponding value is not included. Otherwise, the corresponding value is included.
diff --git a/en/application-dev/faqs/faqs-arkui-layout.md b/en/application-dev/faqs/faqs-arkui-layout.md
new file mode 100644
index 0000000000000000000000000000000000000000..26431f1f1f40b2b257f24443b8a6e6a9adae6ba2
--- /dev/null
+++ b/en/application-dev/faqs/faqs-arkui-layout.md
@@ -0,0 +1,49 @@
+# ArkUI Layout Development (ArkTS)
+
+## What should I do if the height settings in position do not take effect?
+
+Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
+
+**Solution**
+
+When **position** is set for a container component, it is taken out of normal flow and works independently from the outer container. In this case, the height does not take effect. You can replace the outer container with a stack to solve this issue.
+
+## How do I implement horizontal scrolling on a \<Grid> component?
+
+Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
+
+Set **rowsTemplate** (the number of rows) for the **\<Grid>** component and do not set **columnsTemplate** (the number of columns). In this way, the **\<Grid>** component scrolls horizontally when its content does not fit within its width.
+
+## What should I do if the \<List> component cannot be dragged to the bottom when it is used with another component and does not have the size specified?
+
+Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
+
+Add the **layoutWeight** attribute for the **\<List>** component so that it takes up the remaining height (or width, depending on the scrolling direction) adapatively.
+
+By default, the **\<List>** component, as a scrollable container, takes up the entire screen height. When it is used with any component whose height is fixed, you need to explicitly add the **layoutWeight** attribute for the **\<List>** component so that it takes up the remaining height instead of the entire screen height.
+
+## Can tab switching be disabled for the \<Tabs> component?
+
+Applicable to: OpenHarmony 3.2 Release (API version 9)
+
+No. This feature is not supported.
+
+## How do I intercept the onBackPress event so that it does not trigger page return?
+
+Applicable to: OpenHarmony 3.2 Release (API version 9)
+
+If **true** is returned in **onBackPress**, the page executes its own return logic instead of the default return logic.
+
+**Reference**
+
+[onBackPress](../reference/arkui-ts/ts-custom-component-lifecycle.md#onbackpress).
+
+## How do I implement a sticky header for a list item group in the \<List> component?
+
+Applicable to: OpenHarmony 3.2 Release (API version 9)
+
+You can use the **sticky** attribute of the **\<List>** component together with the **\<ListItemGroup>** component. Specifically, set the **sticky** attribute of the **\<List>** component to **StickyStyle.Header** and set the **header** parameter of the corresponding **\<ListItemGroup>** component.
+
+**Reference**
+
+[Adding a Sticky Header](../ui/arkts-layout-development-create-list.md#adding-a-sticky-header)
\ No newline at end of file
diff --git a/en/application-dev/faqs/faqs-arkui-route-nav.md b/en/application-dev/faqs/faqs-arkui-route-nav.md
new file mode 100644
index 0000000000000000000000000000000000000000..a491dce7b7688cd3b79f0bde3e4f4b5da12f4705
--- /dev/null
+++ b/en/application-dev/faqs/faqs-arkui-route-nav.md
@@ -0,0 +1,28 @@
+# ArkUI Routing/Navigation Development (ArkTS)
+
+## Why can't class objects be transferred through params in the router API?
+
+Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model)
+
+Only attributes in an object can be transferred, and methods in the object cannot.
+
+## How do I use router to implement page redirection in the stage model?
+
+Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model)
+
+1.  To implement page redirection through **router**, add all redirected-to pages to the **pages** list in the **main\_pages.json** file.
+2.  Page routing APIs in **router** can be invoked only after page rendering is complete. Do not call these APIs in **onInit** or **onReady** when the page is still in the rendering phase.
+
+**Reference**
+
+[@ohos.router (Page Routing)](../reference/apis/js-apis-router.md)
+
+## Will a page pushed into the stack through router.push be reclaimed?
+
+Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model)
+
+After being pushed to the stack through **router.push**, a page can be reclaimed only when it is popped from the stack through **router.back**.
+
+**Reference**
+
+[router.getParams](../reference/apis/js-apis-router.md#routergetparams)
\ No newline at end of file
diff --git a/en/application-dev/faqs/faqs-arkui.md b/en/application-dev/faqs/faqs-arkui.md
deleted file mode 100644
index 0cce1a7add01d15e8bb6dcb1aa11e6c0ce5c2ab8..0000000000000000000000000000000000000000
--- a/en/application-dev/faqs/faqs-arkui.md
+++ /dev/null
@@ -1,1416 +0,0 @@
-# ArkUI Development
-
-## How do I dynamically replace the %s placeholder in a resource file?
-
-Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
-
-**Symptom**
-
-How do I dynamically replace the %s placeholder in a resource file?
-
-**Solution**
-
-In an application, you can replace the **%s** placeholder by using the second parameter in **$r('app.string.xx')**, which is used to reference application resources.
-
-**Example**
-
-```
-build() {
-  //do something
-  // The second parameter indicates the referenced string resource, which can be used to replace the %s placeholder.
-  Text($r('app.string.entry_desc','aaa')) 
-    .fontSize(100)
-    .fontColor(Color.Black)
-  //do something
-}
-```
-
-## Can custom dialog boxes be defined or used in .ts files?
-
-Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model)
-
-Unfortunately, no. ArkTS syntax is required for defining and initializing custom dialog boxes. Therefore, they can be defined and used only in .ets files.
-
-**Reference**
-
-[Custom Dialog Box](../reference/arkui-ts/ts-methods-custom-dialog-box.md)
-
-## How do I transfer variables in a custom dialog box to a page?
-
-Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model)
-
-**Symptom**
-
-The variable defined in a custom dialog box needs to be transferred to the page when the dialog box is closed or the variable changes.
-
-**Solution**
-
--   Method 1: Define the variable as a state variable of the custom dialog box.
--   Method 2: During initialization of the custom dialog box, pass to it a method, which is triggered in the custom dialog box and accepts the variable in the custom dialog box as a parameter.
--   Method 3: Use AppStorage or LocalStorage to manage page state and implement state sharing between the custom dialog box and page.
-
-**Example**
-
--   Method 1:
-
-    ```
-    @CustomDialog
-    struct CustomDialog01 {
-      @Link inputValue: string
-      controller: CustomDialogController
-      build() {
-        Column() {
-          Text('Change text').fontSize(20).margin({ top: 10, bottom: 10 })
-          TextInput({ placeholder: '', text: this.inputValue }).height(60).width('90%')
-            .onChange((value: string) => {
-              this.inputValue = value
-            })
-        }
-      }
-    }
-    
-    @Entry
-    @Component
-    struct DialogDemo01 {
-      @State inputValue: string = 'click me'
-      dialogController: CustomDialogController = new CustomDialogController({
-        builder: CustomDialog01({
-          inputValue: $inputValue
-        })
-      })
-    
-      build() {
-        Column() {
-          Button(this.inputValue)
-            .onClick(() => {
-              this.dialogController.open()
-            }).backgroundColor(0x317aff)
-        }.width('100%').margin({ top: 5 })
-      }
-    }
-    
-    ```
-
--   Method 2:
-
-    ```
-    @CustomDialog
-    struct CustomDialog02 {
-      private inputValue: string
-      changeInputValue: (val: string) => void
-      controller: CustomDialogController
-      build() {
-        Column() {
-          Text('Change text').fontSize(20).margin({ top: 10, bottom: 10 })
-          TextInput({ placeholder: '', text: this.inputValue }).height(60).width('90%')
-            .onChange((value: string) => {
-              this.changeInputValue(value)
-            })
-        }
-      }
-    }
-    
-    @Entry
-    @Component
-    struct DialogDemo02 {
-      @State inputValue: string = 'click me'
-      dialogController: CustomDialogController = new CustomDialogController({
-        builder: CustomDialog02({
-          inputValue: this.inputValue,
-          changeInputValue: (val: string) => {
-            this.inputValue = val
-          }
-        })
-      })
-    
-      build() {
-        Column() {
-          Button(this.inputValue)
-            .onClick(() => {
-              this.dialogController.open()
-            }).backgroundColor(0x317aff)
-        }.width('100%').margin({ top: 5 })
-      }
-    }
-    
-    ```
-
--   Method 3:
-
-    ```
-    let storage = LocalStorage.GetShared()
-    @CustomDialog
-    struct CustomDialog03 {
-      @LocalStorageLink('inputVal')  inputValue: string = ''
-      controller: CustomDialogController
-      build() {
-        Column() {
-          Text('Change text').fontSize(20).margin({ top: 10, bottom: 10 })
-          TextInput({ placeholder: '', text: this.inputValue }).height(60).width('90%')
-            .onChange((value: string) => {
-              this.inputValue = value;
-            })
-        }
-      }
-    }
-    
-    @Entry(storage)
-    @Component
-    struct DialogDemo03 {
-      @LocalStorageLink('inputVal') inputValue: string = ''
-      dialogController: CustomDialogController = new CustomDialogController({
-        builder: CustomDialog03()
-      })
-    
-      build() {
-        Column() {
-          Button(this.inputValue)
-            .onClick(() => {
-              this.dialogController.open()
-            }).backgroundColor(0x317aff)
-        }.width('100%').margin({ top: 5 })
-      }
-    }
-    
-    ```
-
-
-## How do I obtain the width and height of a component?
-
-Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model)
-
-**Symptom**
-
-The width and height of a component need to be obtained to calculate the size and offset of the layout area.
-
-**Solution**
-
--   Method 1: Use the **onAreaChange** event of the component, which is triggered when the component is initialized or the component size changes.
--   Manner 2: Use the callback in the click or touch event, which provides the area information of the target element.
-
-**Reference**
-
-[Component Area Change Event](../reference/arkui-ts/ts-universal-component-area-change-event.md), [Click Event](../reference/arkui-ts/ts-universal-events-click.md), [Touch Event](../reference/arkui-ts/ts-universal-events-touch.md)
-
-## How do I clear the content of the \<TextInput> and \<TextArea> components by one click?
-
-Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model)
-
-**Symptom**
-
-A click-to-clear feature is required to remove all characters in the **\<TextInput>** and **\<TextArea>** component at once.
-
-**Solution**
-
-Convert the **text** attribute of the **\<TextInput>** and **\<TextArea>** component to a state variable. Assign an empty string to the state variable when the click-to-clear event is performed.
-
-**Example**
-
-```
-struct Index {
-@State text: string = 'Hello World'
-controller: TextInputController = new TextInputController()
-  build() {
-    Row() {
-      Column() {
-        TextInput({ placeholder: 'Please input your words.', text: this.text,
-          controller:this.controller}).onChange((value) => {
-            this.text = value
-          })
-        Button("Clear TextInput").onClick(() => {
-          this.text = "";
-        })
-      }
-      .width('100%')
-    }
-    .height('100%')
-  }
-}
-```
-
-## How do I set the position of a custom dialog box?
-
-Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model)
-
-**Symptom**
-
-By default, a custom dialog box is displayed in the center of the window. In some cases, it needs to be aligned with the window border.
-
-**Solution**
-
-During initialization of the custom dialog box, set the **alignment** and **offset** parameters.
-
-**Reference**
-
-[Custom Dialog Box](../reference/arkui-ts/ts-methods-custom-dialog-box.md)
-
-## How do I hide the overflow content of a container component?
-
-Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model)
-
-**Symptom**
-
-When content overflows in a container component, that is, the child component does not fit in the container component, the overflow content needs to be processed.
-
-**Solution**
-
-To clip and hide overflow content, set the **clip** universal attribute to **true**. By default, this attribute is set to **false**.
-
-**Reference**
-
-[Shape Clipping](../reference/arkui-ts/ts-universal-attributes-sharp-clipping.md)
-
-
-## How do I set a custom dialog box to automatically adapt its size to content?
-
-Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model)
-
-**Symptom**
-
-When a custom dialog box contains a child component whose area size can be changed, it needs to automatically adjust its size.
-
-**Solution**
-
--   Method 1: Use the default style of the custom dialog box. In this case, the dialog box automatically adapts its width to the grid system and its height to the child components; the maximum height is 90% of the container height.
--   Method 2: Use a custom style of the custom dialog box. In this case, the dialog box automatically adapts its width and height to the child components.
-
-**Reference**
-
-[Custom Dialog Box](../reference/arkui-ts/ts-methods-custom-dialog-box.md)
-
-## What is the function of the gridCount parameter in the custom dialog box?
-
-Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model)
-
-The **gridCount** parameter indicates the number of grid columns occupied by the dialog box. The system divides the window width into equal regions. The number of equal regions is the number of grid columns, which varies by device. For example, if the screen density of a phone is 320 vp <= horizontal width < 600 vp, the number of grid columns is 4, and the valid value of **gridCount** is \[1, 4\].
-
-Note: This parameter is valid only when the custom dialog box is in the default style.
-
-**Reference**
-
-[Custom Dialog Box](../reference/arkui-ts/ts-methods-custom-dialog-box.md)
-
-## How do I remove the white background of a custom dialog box?
-
-Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model)
-
-**Symptom**
-
-When in the default style a custom dialog box comes with a white background.
-
-**Solution**
-
-To remove the white background, set the custom dialog box to a custom style.
-
-1.  During initialization of the custom dialog box, set **customStyle** to **true**.
-2.  During initialization of the custom dialog box, set **backgroundColor** to the color you prefer.
-
-**Reference**
-
-[Custom Dialog Box](../reference/arkui-ts/ts-methods-custom-dialog-box.md)
-
-## How do I customize the eye icon for the password input mode of the \<TextInput> component?
-
-Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model)
-
-**Symptom**
-
-The eye icon for the password input mode (with the **type** attribute of the **\<TextInput>** component set to **InputType.Password**) cannot be customized.
-
-**Solution**
-
-The eye icon itself cannot be customized. You can use set the **showPasswordIcon** attribute of the **\<TextInput>** component to **false** to hide the icon, and use the **\<Image>** component to control the type of the **\<TextInput>** component.
-
-**Reference**
-
-[TextInput](../reference/arkui-ts/ts-basic-components-textinput.md)
-
-## How do I use the onSubmit event of the \<TextInput> component?
-
-Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model)
-
-**Solution**
-
-The **onSubmit** event is triggered when a user presses **Enter** on the (physical or soft) keyboard. The callback parameter in the event is the current Enter key type. The Enter key type can be set through the **enterKeyType** attribute of the **\<TextInput>** component. Setting the key style of the soft keyboard requires support by the input method.
-
-**Reference**
-
-[TextInput](../reference/arkui-ts/ts-basic-components-textinput.md)
-
-## How do I set the caret position to the start point for when the \<TextInput> component obtains focus?
-
-Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model)
-
-**Symptom**
-
-When the **\<TextInput>** component obtains focus, the caret automatically moves to the position of the touch point, instead of the start position.
-
-**Solution**
-
-1.  Bind the **\<TextInput>** component to the **onEditChange** event, which is triggered when the component enters the input state.
-2.  Call the **setTimeout** API for asynchronous processing. Then call the **TextInputController.caretPosition** API in the event callback to set the caret position.
-
-**Example**
-
-```
-@Entry
-@Component
-struct TextInputDemo {
-  controller: TextInputController = new TextInputController()
-
-  build() {
-    Column() {
-      TextInput({ controller: this.controller })
-        .onEditChange((isEditing: boolean) => {
-          if (isEditing) {
-            setTimeout(() => {
-              this.controller.caretPosition(0)
-            }, 100)
-          }
-        })
-    }
-  }
-}
-```
-
-**Reference**
-
-[TextInput](../reference/arkui-ts/ts-basic-components-textinput.md)
-
-## How do I obtain component attribute information?
-
-Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model)
-
-**Solution**
-
-To obtain all attributes of a component, use **getInspectorByKey**.
-
-**Reference**
-
-[Component ID](../reference/arkui-ts/ts-universal-attributes-component-id.md)
-
-## How do I obtain the current scrolling offset of a scrollable component?
-
-Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model)
-
-**Solution**
-
-1.  During initialization of the scrollable component, such as **\<List>**, **\<Grid>**, and **\<Scroll>**, set the **scroller** parameter to bind the component to a scroll controller.
-2.  Call the **currentOffset** API of the controller to obtain the horizontal and vertical scrolling offsets.
-
-**Reference**
-
-[Scroll](../reference/arkui-ts/ts-container-scroll.md#currentoffset)
-
-## How do I align text vertically?
-
-Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model)
-
-**Symptom**
-
-Text cannot be aligned vertically in the **\<Text>** component.
-
-**Solution**
-
-Text is aligned horizontally in the **\<Text>** component. To enable text to align vertically, you can split the file, use the **\<Flex>** container component, and set its main axis direction to vertical.
-
-**Example**
-
-```
-@Entry
-@Component
-struct Index15 {
-  private message: string = 'This document is intended for novices in developing applications. It introduces you to the application development process and main files in the project director, by walking you through the building of a simple application with the page redirection/return feature.';
-  build() {
-    Flex({ direction: FlexDirection.Column, wrap: FlexWrap.Wrap }) {
-      ForEach(this.message.split(''), (item, index) => {
-        Text(item)
-          .fontSize(30)
-          .flexShrink(0)
-      })
-    }
-  }
-}
-```
-
-## How do I create a toast window?
-
-Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model)
-
-**Symptom**
-
-A toast window is required for delivering a toast message.
-
-**Solution**
-
-To create a toast window, use the **@ohos.promptAction** API.
-
-**Reference**
-
-[@ohos.promptAction (Prompt)](../reference/apis/js-apis-promptAction.md)
-
-## Can I set the background or font color for the toast window?
-
-Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model)
-
-This feature is not supported currently.
-
-**Reference**
-
-[@ohos.promptAction (Prompt)](../reference/apis/js-apis-promptAction.md)
-
-## How do I set the UI of an ability to transparent?
-
-Applicable to: OpenHarmony 3.2 (API version 9)
-
-**Solution**
-
-Set the background color of the top container component to transparent, and then set the **opacity** attribute of the XComponent to **0.01**.
-
-Example:
-
-```
-build() {
-  Stack() {
-    XComponent({
-    id: 'componentId',
-    type: 'surface',
-    })
-    .width('100%')
-    .height('100%')
-    .opacity(0.01)
-    // Page content
-  }
-  .width('100%')
-  .height('100%')
-  .backgroundColor('rgba(255,255,255, 0)')
-}
-```
-
-## Why do the constraintSize settings fail to take effect?
-
-Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model)
-
-**Symptom**
-
-If **constraintSize** is set for a component and the width of its child component is set to a percentage, for example, **width\('100%'\)**, **constraintSize** takes effect by multiplying the maximum width by the percentage. As a result, the child component may overflow, in which case it looks like the **constraintSize** settings fail to take effect.
-
-**Solution**
-
-You can use the **\<Scroll>** component at the outer layer. In this way, when **constraintSize** is set and the space occupied by a child component exceeds the specified constraint value, a scrollbar will be displayed.
-
-## How do I set the background color to transparent?
-
-Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
-
-**Solution**
-
-Set **backgroundColor** to **'\#00000000'**.
-
-## What should I do if the \<Scroll> component cannot scroll to the bottom?
-
-Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model)
-
-**Symptom**
-
-Unless otherwise specified, the height of the **\<Scroll>** component is equal to the window height. In this case, the component's bottom area will be blocked by components (if any) outside of it.
-
-**Solution**
-
-Set the height of the **\<Scroll>** component or use the flex layout to limit this height.
-
-## What is the counterpart of CenterCrop in OpenHarmony for backgroundImage?
-
-Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model)
-
-**Solution**
-
-To achieve the equivalent effect CenterCrop – place the image in the center of the window and scale the image while maintaining its aspect ratio, you can use the universal attributes **backgroundImageSize**\(**ImageSize.cover**\) and **backgroundImagePosition** \(**Alignment.Center**\).
-
-## How do I customize the control bar style of the \<Video> component?
-
-Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model)
-
-**Solution**
-
-1. Set **controls** to **false** to disable the default control bar.
-
-2. Sets **controller** for the **\<Video>** component.
-
-3. Implement a custom control bar in ArkTS and use **VideoController** to control video playback.
-
-**Example**
-
-```
-// xxx.ets
-@Entry@Componentstruct VideoCreateComponent {
-  @State videoSrc: Resource = $rawfile('video1.mp4')
-  @State previewUri: Resource = $r('app.media.poster1')
-  @State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X
-  @State isAutoPlay: boolean = false
-  @State showControls: boolean = true
-  controller: VideoController = new VideoController()
-   build() {
-    Column() {
-      Video({
-        src: this.videoSrc,
-        previewUri: this.previewUri,
-        currentProgressRate: this.curRate,
-        controller: this.controller
-      }).width('100%').height(600)
-        .autoPlay(this.isAutoPlay)
-        .controls(this.showControls)
-        .onStart(() => {
-          console.info('onStart')
-        })
-        .onPause(() => {
-          console.info('onPause')
-        })
-        .onFinish(() => {
-          console.info('onFinish')
-        })
-        .onError(() => {
-          console.info('onError')
-        })
-        .onPrepared((e) => {
-          console.info('onPrepared is ' + e.duration)
-        })
-        .onSeeking((e) => {
-          console.info('onSeeking is ' + e.time)
-        })
-        .onSeeked((e) => {
-          console.info('onSeeked is ' + e.time)
-        })
-        .onUpdate((e) => {
-          console.info('onUpdate is ' + e.time)
-        })
-             Row() {
-        Button('src').onClick(() => {
-          this.videoSrc = $rawfile('video2.mp4') // Switch the video source.
-        }).margin(5)
-        Button('previewUri').onClick(() => {
-          this.previewUri = $r('app.media.poster2') // Switch the preview image.
-        }).margin(5)
-
-        Button('controls').onClick(() => {
-          this.showControls =! this.showControls // Specify whether to show the control bar.
-        }).margin(5)
-      }
-       Row() {
-        Button('start').onClick(() => {
-          this.controller.start() // Start playback.
-        }).margin(5)
-        Button('pause').onClick(() => {
-          this.controller.pause() // Pause playback.
-        }).margin(5)
-        Button('stop').onClick(() => {
-          this.controller.stop() // Stop playback.
-        }).margin(5)
-        Button('setTime').onClick(() => {
-          this.controller.setCurrentTime(10, SeekMode.Accurate) // Seek to the 10s position of the video.
-        }).margin(5)
-      }
-       Row() {
-        Button('rate 0.75').onClick(() => {
-          this.curRate = PlaybackSpeed.Speed_Forward_0_75_X // Play the video at the 0.75x speed.
-        }).margin(5)
-        Button('rate 1').onClick(() => {
-          this.curRate = PlaybackSpeed.Speed_Forward_1_00_X // Play the video at the 1x speed.
-        }).margin(5)
-        Button('rate 2').onClick(() => {
-          this.curRate = PlaybackSpeed.Speed_Forward_2_00_X // Play the video at the 2x speed.
-        }).margin(5)
-      }
-    }
-  }}
-```
-
-**Reference**
-
-[Video](../reference/arkui-ts/ts-media-components-video.md#start)
-
-## How do I set state-specific styles for a component?
-
-**Solution**
-
-You can use the **stateStyles** attribute to set styles of a component for different states (stateless, pressed, disabled, focused, or clicked).
-
-**Example**
-
-```
-//xxx.ts
-@Entry
-@Component
-struct StyleExample {
-  @State isEnable: boolean = true;
-
-  @Styles pressedStyles() {
-    .backgroundColor("#ED6F21")
-    .borderRadius(10)
-    .borderStyle(BorderStyle.Dashed)
-    .borderWidth(2)
-    .borderColor('#33000000')
-    .width(120)
-    .height(30)
-    .opacity(1)
-  }
-  build() {
-    Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center}) {
-      Text("pressed")
-        .backgroundColor('#0A59F7')
-        .borderRadius(20)
-        .borderStyle(BorderStyle.Dotted)
-        .borderWidth(2)
-        .borderColor(Color.Red)
-        .width(100)
-        .height(25)
-        .opacity(1)
-        .fontSize(14)
-        .fontColor(Color.White)
-        .stateStyles({
-          pressed: this.pressedStyles
-        })
-        .margin({
-          bottom: 20
-        })
-        .textAlign(TextAlign.Center)
-    }
-    .width(350)
-    .height(300)
-  }
-}
-```
-
-**Reference**
-
-[Polymorphic Style](../reference/arkui-ts/ts-universal-attributes-polymorphic-style.md)
-
-## What should I do if the flex width and height in the \<Scroll> component conflicts with the scrolling?
-
-Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model)
-
-**Symptom**
-
-When a container component with a fixed size is added to the **\<Scroll>** component, a scrolling error occurs.
-
-**Solution**
-
-Do not set a size for any container component in the **\<Scroll>** component. In this way, the **\<Scroll>** component can adapt its size to the content.
-
-## What should I do if the height settings in position do not take effect?
-
-Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
-
-**Symptom**
-
-After **position** is set for a container component, the **height** settings do not work.
-
-**Solution**
-
-When **position** is set for a container component, it is taken out of normal flow and works independently from the outer container. In this case, the height does not take effect. You can replace the outer container with a stack to solve this issue.
-
-## Why can't the onBlur or onFocus callback be triggered?
-
-Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
-
-**Solution**
-
-By default, only the Tab button and arrow buttons on the connected keyboard can be used to trigger the focus event. To trigger a focus event by a touch, add the **focusOnTouch** attribute for the target component.
-
-**Reference**
-
-[Focus Control](../reference/arkui-ts/ts-universal-attributes-focus.md)
-
-## How do I disable the scroll event of a \<Grid> nested in the \<Scroll>?
-
-Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
-
-You can use the **onScrollFrameBegin** event and **scrollBy** API to implement nested scrolling of the containers.
-
-For details, see [Nested Scrolling Example](../reference/arkui-ts/ts-container-scroll.md#example-2).
-
-## How do I enable a component to rotate continuously?
-
-Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
-
-You can use [attribute animation](../reference/arkui-ts/ts-animatorproperty.md) to that effect.
-
-## How do I scroll a list with the keyboard?
-
-Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
-
-**Solution**
-
-- Add **focusable\(true\)** to the list item to enable it to obtain focus.
-- Nest a focusable component, for example, **\<Button>**, at the outer layer of each item.
-
-## Why is the click event not triggered for the focused component upon the press of the Enter key after keyboard navigation?
-
-Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
-
-By default, the built-in click event of the component and the custom **onClick** click event are bound to the space bar instead of the Enter key.
-
-## How do I block event bubbling when a button is nested in multi-layer components?
-
-Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
-
-You can bind the button to the **stopPropagation** parameter.
-
-## How do I dynamically create components using code in ArkUI?
-
-Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
-
-**Solution**
-
-ArkUI uses the ArkTS declarative development paradigm. Developers cannot hold component instances. During declaration, you can control component creation by rendering control syntax and dynamically building UI elements.
-
-**Example**
-
-```
-// Create a component using the if statement.
-if(this.isTrue) {
-  Text ("Create Text Component").fontSize (30)
-}
-// Create a component using the ForEach statement.
-ForEach(this.nums,(item) => {
-  Text(item + '').fontSize(30)
-},item => JSON.stringify(item))
-```
-
-**Reference**
-
-[Overview of Rendering Control](../quick-start/arkts-rendering-control-overview.md)
-
-## What is the difference between an @Builder decorated method and a regular method?
-
-Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
-
-**Solution**
-
-The @Builder decorated method allows for use of a custom component, while regular methods do not. If a custom component is used in an @Builder decorated method, it is re-created each time the method is called.
-
-**Reference**
-
-[@BuilderParam](../quick-start/arkts-builderparam.md)
-
-## How do I define @BuilderParam decorated attributes?
-
-Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
-
-**Solution**
-
--   Without parameters
-
-    If no parameter is passed when assigning a value to the **@BuilderParam** decorated attribute (for example, **content: this.specificParam**), define the type of the attribute as a function without a return value (for example, **@BuilderParam content: \(\) =\> void**).
-
--   With parameters
-
-    If any parameter is passed when assigning a value to the **@BuilderParam** decorated attribute (for example, **callContent: this.specificParam1\("111"\)**), define the type of the attribute as **any** (for example, **@BuilderParam callContent: any**).
-
-
-**Reference**
-
-[@BuilderParam](../quick-start/arkts-builderparam.md)
-
-## How do I listen for object changes in an array?
-
-Applicable to: OpenHarmony 3.2 Beta5 (API version 9)
-
-**Solution**
-
-To listen for object changes in an array, use the @Observed and @ObjectLink decorators. **@Observed** applies to classes, and **@ObjectLink** applies to variables.
-
-**Example**
-
-1.  Use @Observed on a class.
-
-    ```
-    @Observed
-    class ClassA {
-      public name: string
-      public c: number
-      public id: number
-    
-      constructor(c: number, name: string = 'OK') {
-        this.name = name
-        this.c = c
-      }
-    }
-    ```
-
-2.  Use @ObjectLink on a component variable.
-
-    ```
-    @Component
-    struct ViewA {
-      label: string = 'ViewA1'
-      @ObjectLink a: ClassA
-    
-      build() {
-        Row() {
-          Button(`ViewA [${this.label}] this.a.c= ${this.a.c} +1`)
-            .onClick(() => {
-              this.a.c += 1
-            })
-        }.margin({ top: 10 })
-      }
-    }
-    ```
-
-
-**Reference**
-
-[\@Observed and \@ObjectLink: Observing Attribute Changes in Nested Class Objects](../quick-start/arkts-observed-and-objectlink.md)
-
-## How do I transfer values through the parent component to @Link decorated varaibles in a child component?
-
-Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
-
-**Solution**
-
-To enable a child component to receive the value from the parent component through @Link, '**\$**' must be used to first establish a reference relationship between variables in the child and parent components.  
-
-**Example**
-
-The **@Link** semantics are derived from the '**$**' operator. In other words, **$isPlaying** is the two-way binding of the internal state **this.isPlaying**. When the button in the **PlayButton** child component is touched, the value of the @Link decorated variable is changed, and **PlayButton** together with the **\<Image>** and **\<Text>** components of the parent component is refreshed. Similarly, when the button in the parent component is touched, the value of **this.isPlaying** is changed, and **PlayButton** together with the **\<Text>** and **\<Button>** components of the parent component is refreshed.
-
-1.  Use the @State decorator in the parent component and use the '**\$**' operator to create a reference for transferring data.
-
-    ```
-    @Entry
-    @Component
-    struct Player {
-      @State isPlaying: boolean = false
-      build() {
-        Column() {
-          PlayButton({ buttonPlaying: $isPlaying })
-          Text(`Player is ${this.isPlaying ? '' : 'not'} playing`).fontSize(18)
-          Button('Parent:' + this.isPlaying)
-            .margin(15)
-            .onClick(() => {
-              this.isPlaying = !this.isPlaying
-            })
-        }
-      }
-    }
-    
-    
-    ```
-
-2.  Use @Link in the child component to receive data.
-
-    ```
-    @Component
-    struct PlayButton {
-      @Link buttonPlaying: boolean
-    
-      build() {
-        Column() {
-          Button(this.buttonPlaying ? 'pause' : 'play')
-            .margin(20)
-            .onClick(() => {
-              this.buttonPlaying = !this.buttonPlaying
-            })
-        }
-      }
-    }
-    ```
-
-
-**Reference**
-
-[@Link](../quick-start/arkts-link.md)
-
-## How does a component synchronize state with its grandchild components?
-
-Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
-
-**Solution**
-
--   Method 1 (recommended): Use the @Provide and @Consume decorators. Specifically, use @Provide in the component and @Consume in the grandchild component to implement two-way data binding between the components.
-
--   Method 2: Use the @State and @Link decorators. Specifically, use @State in the parent component and @Link in each layer of child components (child and grandchild components).
-
-**Example 1**
-
-1.  Include a child component in the component. Employ @Provide in the component to provide the **reviewVote** parameter to its grandchild component.
-
-    ```
-    @Entry
-    @Component
-    struct Father{
-      @Provide("reviewVote") reviewVotes: number = 0;
-    
-      build() {
-        Column() {
-          Son()
-          Button(`Father: ${this.reviewVotes}`)
-            ...
-        }
-      }
-    }
-    ```
-
-2.  Include the grandchild component in the child component.
-
-    ```
-    @Component
-    struct Son{
-      build() {
-        Column() {
-          GrandSon()
-        }
-      }
-    }
-    ```
-
-3.  Employ @Consume in the grandchild component to receive the **reviewVote** parameter.
-
-    ```
-    @Component
-    struct GrandSon{
-      @Consume("reviewVote") reviewVotes: number
-    
-      build() {
-        Column() {
-          Button(`GrandSon: ${this.reviewVotes}`)
-            ...
-        }.width('100%')
-      }
-    }
-    ```
-
-
-**Example 2**
-
-1.  Employ @State in the component **Father** to decorate **reviewVote**.
-
-    ```
-    @Entry
-    @Component
-    struct Father {
-      @State reviewVotes: number = 0;
-    
-      build() {
-        Column() {
-          Son({reviewVotes:$reviewVotes})
-          Button(`Father: ${this.reviewVotes}`)
-            ...
-        }
-      }
-    }
-    ```
-
-2.  Employ @Link in the child component **Son** to receive the **reviewVote** parameter passed from **Father**.
-
-    ```
-    @Component
-    struct Son{
-      @Link reviewVotes: number;
-      build() {
-        Column() {
-          Grandson({reviewVotes:$reviewVotes})
-        }
-      }
-    }
-    
-    
-    ```
-
-3.  Employ @Link in the grandchild component **GrandSon** to receive the **reviewVote** parameter passed from **Son**.
-
-    ```
-    @Component
-    struct Grandson{
-      @Link reviewVotes: number;
-    
-      build() {
-        Column() {
-          Button(`Grandson: ${this.reviewVotes}`)
-            ...
-        }.width('100%')
-      }
-    }
-    ```
-
-
-## How is a callback function defined in JS?
-
-Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
-
-**Solution**
-
-The following is an example to illustrate how to define a callback function:
-
-1.  Define the callback function.
-
-    ```
-    // Define a callback function that contains two parameters and returns void.
-    myCallback: (a:number,b:string) => void
-    ```
-
-2.  Initialize the callback function by assigning values.
-
-    ```
-    aboutToAppear() {
-      // Initialize the callback function.
-      this.myCallback= (a,b)=>{
-        console.info(`handle myCallback a=${a},b=${b}`)
-      }}
-    ```
-
-
-## How do I maximize performance in cases when a component needs to be updated for multiple times?
-
-Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
-
-**Solution**
-
-Use the state management module for the purpose. Currently, the minimum update is supported. When the data dependency changes, instead of updating the entire custom component, only the view content that depends on the data is updated.
-
-## How does this of a function in an object point to the outer layer?
-
-Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
-
-**Solution**
-
-You can use the arrow function for this purpose.
-
-**Example**
-
-```
-const obj = {
-  start:() => {
-    return this.num
-  }
-}
-```
-
-## How do I obtain data through an API before page loading?
-
-Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
-
-**Symptom**
-
-Data needs to be obtained before page rendering so as to be rendered when needed.
-
-**Solution**
-
-In the **aboutToAppear** function, use an asynchronous API to obtain page data and @State to decorate related variables. After the data is obtained, the page is automatically refreshed based on the variables.
-
-**Example**
-
-```
-@Entry
-@Component
-struct Test6Page {
-  // After the data is obtained, the page is automatically refreshed.
-  @State message: string = 'loading.....'
-  aboutToAppear(){
-    // Simulate an asynchronous API to obtain data.
-    setTimeout(()=>{
-      this.message = 'new msg'
-    },3000)
-  }
-  build() {
-    Row() {
-      Column() {
-        Text(this.message)
-          .fontSize(50)
-          .fontWeight(FontWeight.Bold)
-      }
-      .width('100%')
-    }
-    .height('100%')
-  }
-}
-```
-
-## Can placeholders be configured in the string.json file in the stage model?
-
-Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
-
-The **string.json** file does not support placeholders. As an alternative, you can define variables on the target page and combine these variables and **Resource** objects.
-
-## What are the differences between .ets Files and.ts files?
-
-Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
-
-**Solution**
-
-ArkTS is a superset of TypeScript. In addition to all TS features, ArkTS offers added declarative UI features, allowing you to develop high-performance applications in a more natural and intuitive manner. It is recommended that you use ArtTS for UI development and TS for service logic development.
-
-**Reference**
-
-[Getting Started with ArkTS](../quick-start/arkts-get-started.md)
-
-## How do I send a verification code through email in ArkTS?
-
-Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
-
-**Solution**
-
-To send a verification code, you need to request the server, which in turn calls the SMS verification code API. The SMS service can be used to implement related functions.
-
-## How do I display sensor data in the \<Text> component on the UI in real time?
-
-Applicable to: OpenHarmony 3.2 Beta5 (API version 9)
-
-**Solution**
-
-The type of data returned by the sensor is double. To display it in the \<Text> component, first convert the data from double to string.
-
-## How do I listen for screen rotation events?
-
-Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
-
-**Solution**
-
-To listen for screen rotation events, use the **mediaquery** API.
-
-```
-import mediaquery from '@ohos.mediaquery'
-let listener = mediaquery.matchMediaSync('(orientation: landscape)'); // Listen for landscape events.
-function onPortrait(mediaQueryResult) {
-  if (mediaQueryResult.matches) {
-   // do something here
-  } else {
-   // do something here
-  }
-}
-listener.on('change', onPortrait) // Register a callback.
-listener.off('change', onPortrait) // Deregister a callback.
-```
-
-**Reference**
-
-[@ohos.mediaquery (Media Query)](../reference/apis/js-apis-mediaquery.md)
-
-## What should I do if ForEach does not traverse all data after DevEco Studio is updated to the latest version?
-
-Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
-
-**Solution**
-
-In the **forEach\(\)** statement, if the third parameter **keyGenerator** has a value passed in, ensure that the key generated by each element in the data source array is unique. Otherwise, the traversal cannot be performed. If the generated keys are the same, only one key can be generated.
-
-The traversal can also be performed if **keyGenerator** is not specified, in which case the system uses the default generation mode.
-
-## What should I do if a singleton does not take effect after the page is changed?
-
-Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
-
-**Symptom**
-
-A singleton works only in the same page. It becomes **undefined** when the page changes.
-
-**Solution**
-
-A JS file is generated for each page, and a defined singleton is generated in each JS file. Therefore, the singleton in applicable only to the owning page.
-
-To share an instance across pages, it must be created at the UIAbility or application level.
-
-## How do I convert a string in time format to a date object?
-
-Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
-
-**Solution**
-
-If the string is in the yyyy-MM-dd format, you can convert it to a date object by calling **new Date\("yyyy-MM-dd"\)**.
-
-```
-new Date("2021-05-23");
-new Date("2020/2/29");
-new Date("2020-14-03");
-new Date("14-02-2021");
-```
-
-If the string is in other formats, you can convert it to a date object by calling **new Date\(year:number,month:number,day?:number,hour?:number,minute?:number,second?:number,ms?:number\)**.
-
-```
-Syntax for creating a date based on parameters:
-new Date(yearValue, IndexOfMonth, dayValue, hours, minutes, seconds)
-```
-
-Pass the date parameters as arguments.
-
--   **yearValue**: the year in the ISO 8061 YYYY format, for example, **2021**. If we specify a value in YY format, it will be incorrectly accepted. For example, the value **21** would be considered the year 1921 rather than 2021.
--   **IndexOfMonth**: index of the month, which starts from 0. It is obtained by subtracting 1 from the month value. For example, for March, the month value is 3, but the value of **IndexOfMonth** will be 2 (that is, 3 – 1 = 2). The value should typically be within the 0–11 range.
--   **dayValue**: day of the month. It should range from 1 to 31 depending on the number of days in the month. For example, for 21-05-2021, the day value is **21**.
--   **hours**: hour of the day. For example, **10** for 10 o'clock.
--   **minutes**: number of minutes that have elapsed in the hour.
--   **seconds**: number of seconds past a minute.
-
-## How do I convert a string to a byte array in ArkTS?
-
-Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
-
-**Solution**
-
-Refer to the following code:
-
-```
-stringToArray(str:string) {
-  var arr = [];
-  for(var i = 0,j = str.length;i<j;++i) {
- arr.push(str.charCodeAt(i))
-  }
-  return arr;
-}
-```
-
-## How do I implement string encoding and decoding in ArkTS?
-
-Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
-
-**Solution**
-
-You can use **TextEncoder** and **TextDecoder** provided by the **util** module.
-
-**Reference**
-
-[TextEncoder](../reference/apis/js-apis-util.md#textencoder), [TextDecoder](../reference/apis/js-apis-util.md#textdecoder)
-
-## How do I import and export namespaces?
-
-Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
-
-**Solution**
-
-Use **import** and **export** statements.
-
--   Exporting namespaces from the database:
-
-    ```
-    namespace Util{
-        export function getTime(){
-            return Date.now()
-        }
-    }
-    export default Util
-    ```
-
--   Importing namespaces
-
-    ```
-    import Util from './util'
-    Util.getTime()
-    ```
-
-
-## Can relational database operations be performed in the Worker thread?
-
-Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
-
-Currently, the relational database (RDB) object in the UI main thread cannot be sent to the Worker thread for operations. To use the RDB in the Worker thread, you must obtain a new RDB object.
-
-## How do I obtain files in the resource directory of an application?
-
-Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
-
-**Solution**
-
--   Method 1: Use **\$r** or **\$rawfile**. This method applies to static access, during which the **resource** directory remains unchanged when the application is running.
--   Method 2: Use **ResourceManager**. This method applies to dynamic access, during which the **resource** directory dynamically changes when the application is running.
-
-**Reference**
-
-[Resource Categories and Access](../quick-start/resource-categories-and-access.md) and [@ohos.resourceManager (Resource Manager)](../reference/apis/js-apis-resource-manager.md)
-
-
-## How do I convert the XML format to the JSON format?
-
-Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
-
-**Symptom**
-
-The data returned by the server is encoded using Base64 in XML format and needs to be converted to the JSON format for subsequent processing.
-
-**Solution**
-
-Use the Base64-related APIs in the **util** module to decode data, and then use the **convertxml** module to parse data in XML format.
-
-**Example**
-
-```
-import convertxml from '@ohos.convertxml';
-import util from '@ohos.util';
-
-@Entry
-@Component
-struct Faq_4_31 {
-  @State message: string = 'base64 to JSON'
-
-  build() {
-    Row() {
-      Column() {
-        Text(this.message)
-          .fontSize(50)
-          .fontWeight(FontWeight.Bold)
-          .onClick(() => {
-            / *Original data in GBK encoding
-            <?xml version="1.0" encoding="GBK"?>
-            <data>
-            <asset_no>xxxxx</asset_no>
-            <machine_sn>xxxx</machine_sn>
-            <bios_id>xxxx</bios_id>
-            <responsible_emp_name><![CDATA[xxxx]]></responsible_emp_name>
-            <responsible_account><![CDATA[xxxx xxxx]]></responsible_account>
-            <responsible_emp_no>xxxx</responsible_emp_no>
-            <responsible_dept><![CDATA[xxxx]]></responsible_dept>
-            <user_dept><![CDATA[xxxx]]></user_dept>
-            <user_name><![CDATA[xxx]]></user_name>
-            <cur_domain_account>xxxx</cur_domain_account>
-            <asset_loc><![CDATA[--]]></asset_loc>
-            <asset_loc_cur><![CDATA[]]></asset_loc_cur>
-            <asset_type>1</asset_type>
-            <asset_use>For Outsourcing Staff/xxxx</asset_use>
-            <overdue_date></overdue_date>
-            <asset_status>xxxx</asset_status>
-            <asset_period>xxxx</asset_period>
-            <license></license>
-            </data>
-             */
-            let src = 'PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iR0JLIj8+CjxkYXRhPgo8YXNzZXRfbm8+eHh4eHg8L2Fzc2V0X25vPgo8bWFjaGluZV9zbj54eHh4PC9tYWNoaW5lX3NuPgo8Ymlvc19pZD54eHh4PC9iaW9zX2lkPgo8cmVzcG9uc2libGVfZW1wX25hbWU+PCFbQ0RBVEFbeHh4eF1dPjwvcmVzcG9uc2libGVfZW1wX25hbWU+CjxyZXNwb25zaWJsZV9hY2NvdW50PjwhW0NEQVRBW3h4eHggeHh4eF1dPjwvcmVzcG9uc2libGVfYWNjb3VudD4KPHJlc3BvbnNpYmxlX2VtcF9ubz54eHh4PC9yZXNwb25zaWJsZV9lbXBfbm8+CjxyZXNwb25zaWJsZV9kZXB0PjwhW0NEQVRBW3h4eHhdXT48L3Jlc3BvbnNpYmxlX2RlcHQ+Cjx1c2VyX2RlcHQ+PCFbQ0RBVEFbeHh4eF1dPjwvdXNlcl9kZXB0Pgo8dXNlcl9uYW1lPjwhW0NEQVRBW3h4eF1dPjwvdXNlcl9uYW1lPgo8Y3VyX2RvbWFpbl9hY2NvdW50Pnh4eHg8L2N1cl9kb21haW5fYWNjb3VudD4KPGFzc2V0X2xvYz48IVtDREFUQVstLV1dPjwvYXNzZXRfbG9jPgo8YXNzZXRfbG9jX2N1cj48IVtDREFUQVtdXT48L2Fzc2V0X2xvY19jdXI+Cjxhc3NldF90eXBlPjE8L2Fzc2V0X3R5cGU+Cjxhc3NldF91c2U+Rm9yIE91dHNvdXJjaW5nIFN0YWZmL3h4eHg8L2Fzc2V0X3VzZT4KPG92ZXJkdWVfZGF0ZT48L292ZXJkdWVfZGF0ZT4KPGFzc2V0X3N0YXR1cz54eHh4PC9hc3NldF9zdGF0dXM+Cjxhc3NldF9wZXJpb2Q+eHh4eDwvYXNzZXRfcGVyaW9kPgo8bGljZW5zZT48L2xpY2Vuc2U+CjwvZGF0YT4='
-            let base64 = new util.Base64Helper();
-            // base64 decoding
-            let src_uint8Array = base64.decodeSync(src);
-            // Decode the string into a UTF-8 string.
-            let textDecoder = util.TextDecoder.create("utf-8",{ignoreBOM: true})
-            let src_str = textDecoder.decodeWithStream(src_uint8Array)
-            // Replace the encoding field.
-            src_str = src_str.replace("GBK","utf-8")
-            console.log('Test src_str: ' + JSON.stringify(src_str));
-            //Convert XML format to JSON format.
-            let conv = new convertxml.ConvertXML();
-            let options = {trim : false, declarationKey:"_declaration",
-              instructionKey : "_instruction", attributesKey : "_attributes",
-              textKey : "_text", cdataKey:"_cdata", doctypeKey : "_doctype",
-              commentKey : "_comment", parentKey : "_parent", typeKey : "_type",
-              nameKey : "_name", elementsKey : "_elements"}
-            let src_json = JSON.stringify(conv.convertToJSObject(src_str, options));
-            console.log('Test json: ' + JSON.stringify(src_json));
-          })
-      }
-      .width('100%')
-    }
-    .height('100%')
-  }
-}
-```
-
-## What is the cause of error code 401 obtained through the try/catch statement?
-
-Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
-
-**Cause**
-
-1. Mandatory parameters are not passed in.
-
-2. The parameter type is incorrect.
-
-3. The parameter is **undefined**.
-
-**Reference**
-
-[Universal Error Codes](../reference/errorcodes/errorcode-universal.md)
diff --git a/en/application-dev/napi/Readme-EN.md b/en/application-dev/napi/Readme-EN.md
index 2b1f8639a152589b76f44af97f9812a1a5711d23..5148a2b5ce3cf73bbd68e96ba2d15449f86a0990 100644
--- a/en/application-dev/napi/Readme-EN.md
+++ b/en/application-dev/napi/Readme-EN.md
@@ -1,9 +1,9 @@
 # Native APIs
 
-- [Introduction to Native APIs](introduction.md)
 - [Using Native APIs in Application Projects](napi-guidelines.md)
 - [Drawing Development](drawing-guidelines.md)
 - [Raw File Development](rawfile-guidelines.md)
 - [Native Window Development](native-window-guidelines.md)
 - [Using MindSpore Lite for Model Inference](mindspore-lite-guidelines.md)
-- [Connecting the Neural Network Runtime to an AI Inference Framework](neural-network-runtime-guidelines.md)
\ No newline at end of file
+- [Connecting the Neural Network Runtime to an AI Inference Framework](neural-network-runtime-guidelines.md)
+- [Purgeable Memory Development](purgeable-memory-guidelines.md)
diff --git a/en/application-dev/napi/purgeable-memory-guidelines.md b/en/application-dev/napi/purgeable-memory-guidelines.md
new file mode 100644
index 0000000000000000000000000000000000000000..ffc2ff72ddd045d61da55c41f07434a8d4e31c28
--- /dev/null
+++ b/en/application-dev/napi/purgeable-memory-guidelines.md
@@ -0,0 +1,117 @@
+# Purgeable Memory Development
+
+## When to Use
+
+You can use the native purgeable memory APIs to apply for and release purgeable memory.
+
+
+The following scenarios are common for native purgeable memory development:
+
+* Apply for a **PurgeableMemory** object and write data to the object.
+* Release the **PurgeableMemory** object when it is no longer required.
+
+## Available APIs
+
+| API| Description| 
+| -------- | -------- |
+| OH_PurgeableMemory \*OH_PurgeableMemory_Create(size_t size, OH_PurgeableMemory_ModifyFunc func, void \*funcPara) | Creates a **PurgeableMemory** object. A new **PurgeableMemory** object is generated each time this API is called.| 
+| bool OH_PurgeableMemory_Destroy(OH_PurgeableMemory \*purgObj) | Destroys a **PurgeableMemory** object.| 
+| bool OH_PurgeableMemory_BeginRead(OH_PurgeableMemory \*purgObj) | Begins a read operation on a **PurgeableMemory** object.| 
+| void OH_PurgeableMemory_EndRead(OH_PurgeableMemory \*purgObj) | Ends a read operation on a **PurgeableMemory** object and decreases the reference count of the object by 1. When the reference count reaches 0, the object can be reclaimed by the system.| 
+|bool OH_PurgeableMemory_BeginWrite(OH_PurgeableMemory \*purgObj) | Begins a write operation on a **PurgeableMemory** object.|
+|void OH_PurgeableMemory_EndWrite(OH_PurgeableMemory \*purgObj)|Ends a write operation on a **PurgeableMemory** object and decreases the reference count of the object by 1. When the reference count reaches 0, the object can be reclaimed by the system.|
+|void \*OH_PurgeableMemory_GetContent(OH_PurgeableMemory \*purgObj)|Obtains the memory data of a **PurgeableMemory** object.|
+|size_t OH_PurgeableMemory_ContentSize(OH_PurgeableMemory \*purgObj)|Obtains the memory data size of a **PurgeableMemory** object.|
+|bool OH_PurgeableMemory_AppendModify(OH_PurgeableMemory \*purgObj, OH_PurgeableMemory_ModifyFunc func, void \*funcPara)|Adds a function for modifying a **PurgeableMemory** object.|
+
+
+## How to Develop
+
+The following steps describe how to use the native purgeable memory APIs to apply for a **PurgeableMemory** object, write data to the object, and read data from the object.
+
+1. Declare the rules for creating a **PurgeableMemory** object.
+    ```c++
+    // Declare the parameters of the constructor.
+    struct ParaData{
+        int start;
+        int end;
+    }
+
+    // Declare a function for modifying the object.
+    bool FactorialFunc(void* data, size_t size, void* param){
+         bool ret = true;
+         int oriData = *(int*)(data);
+         int i = param->start;
+         while(i<param->end){
+            oriData *= i;
+         }
+         *data = oriData;
+         if(oriData < 0)
+            ret = false;
+         return ret;
+    }
+
+    // Declare the parameters of the extended function for modifying the object.
+    struct AppendParaData{
+        int newPara;
+    }
+
+    // Declare the extended function for modifying the object.
+    bool AddFunc(void* data, size_t size, void* param){
+         bool ret = true;
+         int oriData = *(int*)(data);
+         oriData += param->newPara;
+         *data = oriData;
+         return ret;
+    }
+    ```
+2. Create a **PurgeableMemory** object.
+    ```c++
+    // Define the memory data size to 4 MB.
+    #define DATASIZE (4 * 1024 * 1024)
+
+    // Declare the parameters of the constructor.
+    struct ParaData pdata = {1,2};
+
+    // Create a PurgeableMemory object.
+    OH_PurgableMmory* pPurgmem = OH_PurgableMmory_Create(DATASIZE, FactorialFunc, &pdata);
+    ```
+
+3. Perfrom a read operation on the **PurgeableMemory** object.
+    ```c++
+    // Begin a read operation on the object.
+    OH_PurgeableMemory_BeginRead(pPurgmem);
+
+    // Obtain the object size.
+    size_t size = OH_PurgeableMemory_ContentSize(pPurgmem);
+
+    // Obtain the object content.
+    ReqObj* pReqObj = (ReqObj*) OH_PurgeableMemory_GetContent(pPurgmem);
+
+    // End a read operation on the object.
+    OH_PurgeableMemory_EndRead(pPurgmem);
+    ```
+
+4. Perform a write operation on the **PurgeableMemory** object.
+    ```c++
+    // Begin a write operation on the object.
+    OH_PurgeableMemory_BeginWrite(pPurgmem)
+
+    // Obtain the object data.
+    ReqObj* pReqObj = (ReqObj*) OH_PurgeableMemory_GetContent(pPurgmem);
+
+    // Declare the parameters of the extended constructor.
+    struct AppendParaData apdata = {1};
+
+    // Update the rules for recreating the object.
+    OH_PurgeableMemory_AppendModify(pPurgmem, AddFunc, &apdata);
+
+    // Stop writing data to the object.
+    OH_PurgeableMemory_EndWrite(pPurgmem);
+    ```
+
+5. Destroy the **PurgeableMemory** object.
+    ```c++
+    // Destroy the object.
+    OH_PurgeableMemory_Destroy(pPurgmem);
+    ```
diff --git a/en/application-dev/quick-start/figures/application_details.jpg b/en/application-dev/quick-start/figures/application_details.jpg
index 02524b549eaf636e2a8a0f2ec869513d99f1a161..311f1f6b17263622d514caa6deac9905df8aa6c3 100644
Binary files a/en/application-dev/quick-start/figures/application_details.jpg and b/en/application-dev/quick-start/figures/application_details.jpg differ
diff --git a/en/application-dev/quick-start/module-configuration-file.md b/en/application-dev/quick-start/module-configuration-file.md
index f9a2bae37b168a476bc6729db3565eb0c10756a9..cca1cb058c358aff32c7b8e635af01a58f7aadfd 100644
--- a/en/application-dev/quick-start/module-configuration-file.md
+++ b/en/application-dev/quick-start/module-configuration-file.md
@@ -74,7 +74,7 @@ As shown above, the **module.json5** file contains several tags.
 
 | Name| Description| Data Type| Initial Value Allowed|
 | -------- | -------- | -------- | -------- |
-| name | Name of the module. The value is a string with a maximum of 31 bytes and must be unique in the entire application. Chinese characters are not allowed.| String| No|
+| name | Name of the module. The value is a string with a maximum of 31 bytes and must be unique in the entire application. | String| No|
 | type | Type of the module. The options are as follows:<br>- **entry**: main module of the application.<br>- **feature**: dynamic feature module of the application.<br>- **har**: static shared module.<br>- **shared**: dynamic shared module.| String| No|
 | srcEntry | Code path corresponding to the module. The value is a string with a maximum of 127 bytes.| String| Yes (initial value: left empty)|
 | description | Description of the module. The value is a string with a maximum of 255 bytes or a string resource index.| String| Yes (initial value: left empty)|
@@ -228,73 +228,6 @@ The **metadata** tag represents the custom metadata of the HAP file. The tag val
 
 The **abilities** tag represents the UIAbility configuration of the module, which is valid only for the current UIAbility component.
 
-**By default, application icons cannot be hidden from the home screen in OpenHarmony.**
-
-The OpenHarmony system imposes a strict rule on the presence of application icons. If no icon is configured in the HAP file of an application, the system uses the icon specified in the **app.json** file as the application icon and displays it on the home screen.
-
-Touching this icon will direct the user to the application details screen in **Settings**, as shown in Figure 1.
-
-To hide an application icon from the home screen, you must configure the **AllowAppDesktopIconHide** privilege. For details, see [Application Privilege Configuration Guide](../../device-dev/subsystems/subsys-app-privilege-config-guide.md).
-
-**Objectives**:
-
-This requirement on application icons is intended to prevent malicious applications from deliberately configuring no icon to block uninstallation attempts.
-
-**Setting the application icon to be displayed on the home screen**:
-
-Set **icon**, **label**, and **skills** under **abilities** in the **module.json5** file. Make sure the **skills** configuration contains **ohos.want.action.home** and **entity.system.home**.
-
-```
-{
-  "module":{
-
-    ...
-
-    "abilities": [{
-      "icon": "$media:icon",
-      "label": "Login",
-      "skills": [{
-        "actions": ["ohos.want.action.home"],
-        "entities": ["entity.system.home"],
-        "uris": []
-      }]
-    }],
-    ...
-
-  }
-}
-```
-
-**Display rules of application icons and labels on the home screen:**
-* The HAP file contains UIAbility configuration.
-  * The application icon on the home screen is set under **abilities** in the **module.json5** file.
-    * The application does not have the privilege to hide its icon from the home screen.
-      * The application icon displayed on the home screen is the icon configured for the UIAbility.
-      * The application label displayed on the home screen is the label configured for the UIAbility. If no label is configured, the bundle name is returned.
-      * The name of the UIAbility is displayed.
-      * When the user touches the home screen icon, the home screen of the UIAbility is displayed.
-    * The application has the privilege to hide its icon from the home screen.
-      * The information about the application is not returned during home screen information query, and the icon of the application is not displayed on the home screen.
-  * The application icon on the home screen is not set under **abilities** in the **module.json5** file.
-    * The application does not have the privilege to hide its icon from the home screen.
-      * The application icon displayed on the home screen is the icon specified under **app**. (The **icon** field in the **app.json** file is mandatory.)
-      * The application label displayed on the home screen is the label specified under **app**. (The **label** field in the **app.json** file is mandatory.)
-      * Touching the application icon on the home screen will direct the user to the application details screen shown in Figure 1.
-    * The application has the privilege to hide its icon from the home screen.
-      * The information about the application is not returned during home screen information query, and the icon of the application is not displayed on the home screen.
-* The HAP file does not contain UIAbility configuration.
-  * The application does not have the privilege to hide its icon from the home screen.
-    * The application icon displayed on the home screen is the icon specified under **app**. (The **icon** field in the **app.json** file is mandatory.)
-    * The application label displayed on the home screen is the label specified under **app**. (The **label** field in the **app.json** file is mandatory.)
-    * Touching the application icon on the home screen will direct the user to the application details screen shown in Figure 1.
-  * The application has the privilege to hide its icon from the home screen.
-    * The information about the application is not returned during home screen information query, and the icon of the application is not displayed on the home screen.<br><br>
-
-**Figure 1** Application details screen
-
-![Application details screen](figures/application_details.jpg)
-
-
   **Table 6** abilities
 
 | Name| Description| Data Type| Initial Value Allowed|
@@ -325,6 +258,7 @@ Set **icon**, **label**, and **skills** under **abilities** in the **module.json
 | minWindowHeight | Minimum window height supported by the UIAbility component, in vp. The minimum value is 0, and the value cannot be less than the minimum window height allowed by the platform or greater than the value of **maxWindowHeight**. For details about the window size, see [Constraints](../windowmanager/window-overview.md#constraints).| Number| Yes (initial value: minimum window height supported by the platform)|
 | excludeFromMissions | Whether the UIAbility component is displayed in the recent task list.<br>- **true**: displayed in the recent task list.<br>- **false**: not displayed in the recent task list.<br>**NOTE**<br>This attribute applies only to system applications and does not take effect for third-party applications.| Boolean| Yes (initial value: **false**)|
 | recoverable | Whether the application can be recovered to its previous state in case of a detected fault.<br>- **true**: The application can be recovered to its previous state in case of a detected fault.<br>- **false**: The application cannot be recovered to its previous state in case of a detected fault.| Boolean| Yes (initial value: **false**)|
+| unclearableMission | Whether the UIAbility component is unclearable in the recent tasks list.<br>- **true**: The UIAbility component is unclearable in the recent tasks list.<br>- **false**: The UIAbility component is clearable in the recent tasks list.<br>**NOTE**<br>This attribute works only after the [AllowMissionNotCleared](../../device-dev/subsystems/subsys-app-privilege-config-guide.md) privilege is obtained.| Boolean| Yes (initial value: **false**)|
 
 Example of the **abilities** structure:
 
@@ -369,7 +303,8 @@ Example of the **abilities** structure:
     "minWindowWidth": 1400,
     "maxWindowHeight": 300,
     "minWindowHeight": 200,
-    "excludeFromMissions": false
+    "excludeFromMissions": false,
+    "unclearableMission": false
   }]
 }
 ```
@@ -441,12 +376,12 @@ The **extensionAbilities** tag represents the configuration of extensionAbilitie
 | description | Description of the ExtensionAbility component. The value is a string with a maximum of 255 bytes or a resource index to the description.| String| Yes (initial value: left empty)|
 | icon | Icon of the ExtensionAbility component. The value is an icon resource index. If **ExtensionAbility** is set to **MainElement** of the current module, this attribute is mandatory and its value must be unique in the application.| String| Yes (initial value: left empty)|
 | label | Name of the ExtensionAbility component displayed to users. The value is a string resource index.<br>**NOTE**<br>If **ExtensionAbility** is set to **MainElement** of the current module, this attribute is mandatory and its value must be unique in the application.| String| No|
-| type | Type of the ExtensionAbility component. The options are as follows:<br>- **form**: ExtensionAbility of a widget.<br>- **workScheduler**: ExtensionAbility of a Work Scheduler task.<br>- **inputMethod**: ExtensionAbility of an input method.<br>- **service**: service component running in the background.<br>- **accessibility**: ExtensionAbility of an accessibility feature.<br>- **dataShare**: ExtensionAbility for data sharing.<br>- **fileShare**: ExtensionAbility for file sharing.<br>- **staticSubscriber**: ExtensionAbility for static broadcast.<br>- **wallpaper**: ExtensionAbility of the wallpaper.<br>- **backup**: ExtensionAbility for data backup.<br>- **window**: ExtensionAbility of a window. This type of ExtensionAbility creates a window during startup for which you can develop the GUI. The window is then combined with other application windows through **abilityComponent**.<br>- **thumbnail**: ExtensionAbility for obtaining file thumbnails. You can provide thumbnails for files of customized file types.<br>- **preview**: ExtensionAbility for preview. This type of ExtensionAbility can parse the file and display it in a window. You can combine the window with other application windows.<br>- **print**: ExtensionAbility for the print framework.<br>- **driver**: ExtensionAbility for the driver framework.<br>**NOTE**<br>The **service** and **dataShare** types apply only to system applications and do not take effect for third-party applications.| String| No|
+| type | Type of the ExtensionAbility component. The options are as follows:<br>- **form**: ExtensionAbility of a widget.<br>- **workScheduler**: ExtensionAbility of a Work Scheduler task.<br>- **inputMethod**: ExtensionAbility of an input method.<br>- **service**: service component running in the background.<br>- **accessibility**: ExtensionAbility of an accessibility feature.<br>- **dataShare**: ExtensionAbility for data sharing.<br>- **fileShare**: ExtensionAbility for file sharing.<br>- **staticSubscriber**: ExtensionAbility for static broadcast.<br>- **wallpaper**: ExtensionAbility of the wallpaper.<br>- **backup**: ExtensionAbility for data backup.<br>- **window**: ExtensionAbility of a window. This type of ExtensionAbility creates a window during startup for which you can develop the GUI. The window is then combined with other application windows through **abilityComponent**.<br>- **thumbnail**: ExtensionAbility for obtaining file thumbnails. You can provide thumbnails for files of customized file types.<br>- **preview**: ExtensionAbility for preview. This type of ExtensionAbility can parse the file and display it in a window. You can combine the window with other application windows.<br>- **print**: ExtensionAbility for the print framework.<br>- **push**: ExtensionAbility to be pushed.<br>- **driver**: ExtensionAbility for the driver framework.<br>**NOTE**<br>The **service** and **dataShare** types apply only to system applications and do not take effect for third-party applications.| String| No|
 | permissions | Permissions required for another application to access the ExtensionAbility component.<br>The value is generally in the reverse domain name notation and contains a maximum of 255 bytes. It is an array of permission names predefined by the system or customized. The name of a customized permission must be the same as the **name** value of a permission defined in the **defPermissions** attribute.| String array| Yes (initial value: left empty)|
 | uri | Data URI provided by the ExtensionAbility component. The value is a string with a maximum of 255 bytes, in the reverse domain name notation.<br>**NOTE**<br>This attribute is mandatory when the type of the ExtensionAbility component is set to **dataShare**.| String| Yes (initial value: left empty)|
 |skills | Feature set of [wants](../application-models/want-overview.md) that can be received by the ExtensionAbility component.<br>Configuration rule: In an entry package, you can configure multiple **skills** attributes with the entry capability. (A **skills** attribute with the entry capability is the one that has **ohos.want.action.home** and **entity.system.home** configured.) The **label** and **icon** in the first ExtensionAbility that has **skills** configured are used as the **label** and **icon** of the entire OpenHarmony service/application.<br>**NOTE**<br>The **skills** attribute with the entry capability can be configured for the feature package of an OpenHarmony application, but not for an OpenHarmony service.| Array| Yes (initial value: left empty)|
 | [metadata](#metadata)| Metadata of the ExtensionAbility component.| Object| Yes (initial value: left empty)|
-| exported | Whether the ExtensionAbility component can be called by other applications. <br>- **true**: The ExtensionAbility component can be called by other applications.<br>- **false**: The UIAbility component cannot be called by other applications.| Boolean| Yes (initial value: **false**)|
+| exported | Whether the ExtensionAbility component can be called by other applications. <br>- **true**: The ExtensionAbility component can be called by other applications.<br>- **false**: The ExtensionAbility component cannot be called by other applications.| Boolean| Yes (initial value: **false**)|
 
 Example of the **extensionAbilities** structure:
 
diff --git a/en/application-dev/quick-start/module-structure.md b/en/application-dev/quick-start/module-structure.md
index b155d24ed6d4d22307c37a3374542b8283d1f352..830848bba13635f6e2b2a24aab3b8d634db6aebf 100644
--- a/en/application-dev/quick-start/module-structure.md
+++ b/en/application-dev/quick-start/module-structure.md
@@ -7,24 +7,24 @@ The **module** tag contains the HAP configuration.
 
 | Name| Description| Data Type| Initial Value Allowed|
 | -------- | -------- | -------- | -------- |
-| mainAbility | Ability whose icon is displayed in the Service Center. When the resident process is started, the **mainAbility** is started.| String| Yes (initial value: left empty)|
-| package | Package name of the HAP file, which must be unique in the application. The value is a string with a maximum of 127 bytes, in the reverse domain name notation. It is recommended that the value be the same as the project directory of the HAP file.  | String| No|
-| name | Class name of the HAP file. The value is a string with a maximum of 255 bytes, in the reverse domain name notation. The prefix must be the same as the **package** value specified for this module. Alternatively, the value can start with a period (.) followed by the class name.| String| Yes (initial value: left empty)|
-| description | Description of the HAP file. The value is a string with a maximum of 255 bytes. If the value exceeds the limit or needs to support multiple languages, you can use a resource index to the description.| String| Yes (initial value: left empty)|
-| supportedModes | Modes supported by the application. Currently, only the **drive** mode is defined. This attribute applies only to head units.| String array| Yes (initial value: left empty)|
-|deviceType | Type of device on which the ability can run. The device types predefined in the system include **tablet**, **tv**, **car**, and **wearable**.| String array| No|
-|distro | Distribution description of the HAP file.| Object| No|
-|metaData | Metadata of the HAP file.| Object| Yes (initial value: left empty)|
-| abilities | All abilities in the current module. The value is an array of objects, each of which represents an ability.| Object array| Yes (initial value: left empty)|
-| js | A set of JS modules developed using ArkUI. The value is an array of objects, each of which represents a JS module.| Object array| Yes (initial value: left empty)|
-| shortcuts | Shortcuts of the application. The value is an array of objects, each of which represents a shortcut object.| Object array| Yes (initial value: left empty)|
-| reqPermissions | Permissions that the application requests from the system when it is running.| Object array| Yes (initial value: left empty)|
-| colorMode | Color mode of the application. The options are as follows:<br>- **dark**: Resources applicable for the dark mode are used.<br>- **light**: Resources applicable for the light mode are used.<br>- **auto**: Resources are used based on the color mode of the system.| String| Yes (initial value: **auto**)|
+| mainAbility     | Ability whose icon is displayed in the Service Center. When the resident process is started, the **mainAbility** is started.| String| Yes (initial value: left empty)|
+| package         | Package name of the HAP file, which must be unique in the application. The value is a string with a maximum of 127 bytes, in the reverse domain name notation. It is recommended that the value be the same as the project directory of the HAP file.  | String| No|
+| name            | Class name of the HAP file. The value is a string with a maximum of 255 bytes, in the reverse domain name notation. The prefix must be the same as the **package** value specified for this module. Alternatively, the value can start with a period (.) followed by the class name.| String| Yes (initial value: left empty)|
+| description     | Description of the HAP file. The value is a string with a maximum of 255 bytes. If the value exceeds the limit or needs to support multiple languages, you can use a resource index to the description.| String| Yes (initial value: left empty)|
+| supportedModes  | Modes supported by the application. Currently, only the **drive** mode is defined. This attribute applies only to head units.| String array| Yes (initial value: left empty)|
+|deviceType       | Type of device on which the ability can run. The device types predefined in the system include **tablet**, **tv**, **car**, and **wearable**.| String array| No|
+|distro           | Distribution description of the HAP file.| Object| No|
+|metaData         | Metadata of the HAP file.| Object| Yes (initial value: left empty)|
+| abilities       | All abilities in the current module. The value is an array of objects, each of which represents an ability.| Object array| Yes (initial value: left empty)|
+| js              | A set of JS modules developed using ArkUI. The value is an array of objects, each of which represents a JS module.| Object array| Yes (initial value: left empty)|
+| shortcuts       | Shortcuts of the application. The value is an array of objects, each of which represents a shortcut object.| Object array| Yes (initial value: left empty)|
+| reqPermissions  | Permissions that the application requests from the system when it is running.| Object array| Yes (initial value: left empty)|
+| colorMode       | Color mode of the application. The options are as follows:<br>- **dark**: Resources applicable for the dark mode are used.<br>- **light**: Resources applicable for the light mode are used.<br>- **auto**: Resources are used based on the color mode of the system.| String| Yes (initial value: **auto**)|
 | distributionFilter | Distribution rules of the application. This attribute defines the rules for distributing HAP files based on different device specifications, so that precise matching can be performed when the application market distributes applications. Distribution rules cover three factors: API version, screen shape, and screen resolution. During distribution, a unique HAP is determined based on the mapping between **deviceType** and these three factors.| Object| Yes (initial value: left empty) Set this attribute when an application has multiple entry modules.|
-|commonEvents | Information about the common event static subscriber, which must contain the subscriber name, required permissions, and list of the common events subscribed to. When a subscribed event is sent, the static subscriber is started. Unlike the dynamic subscriber, the static subscriber does not need to proactively call the common event subscription API in the service code, and may not be running when the common event is published.| Object array| Yes (initial value: left empty)|
-| entryTheme | Keyword of an OpenHarmony internal theme. Set it to the resource index of the name.| String| Yes (initial value: left empty)|
-|testRunner | Test runner configuration.| Object| Yes (initial value: left empty)|
-|generateBuildHash |Whether the hash value of the HAP or HSP file is generated by the packaging tool. The hash value (if any) is used to determine whether the application needs to be updated when the system is updated in OTA mode but the value of [code](#internal-structure-of-the-apiversion-attribute) in **version** of the application remains unchanged.<br>**NOTE**<br>This tag applies only to system applications.|Boolean|Yes (initial value: **false**)|
+|commonEvents        | Information about the common event static subscriber, which must contain the subscriber name, required permissions, and list of the common events subscribed to. When a subscribed event is sent, the static subscriber is started. Unlike the dynamic subscriber, the static subscriber does not need to proactively call the common event subscription API in the service code, and may not be running when the common event is published.| Object array| Yes (initial value: left empty)|
+| entryTheme         | Keyword of an OpenHarmony internal theme. Set it to the resource index of the name.| String| Yes (initial value: left empty)|
+|testRunner          | Test runner configuration.| Object| Yes (initial value: left empty)|
+|generateBuildHash   | Whether the hash value of the HAP or HSP file is generated by the packaging tool. The hash value (if any) is used to determine whether the application needs to be updated when the system is updated in OTA mode but the value of [code](#internal-structure-of-the-apiversion-attribute) in **version** of the application remains unchanged.<br>**NOTE**<br>This tag applies only to system applications.|Boolean|Yes (initial value: **false**)|
 
 Example of the **module** tag structure:
 
@@ -129,7 +129,7 @@ Example of the **distro** attribute structure:
 
 | Name| Description| Data Type| Initial Value Allowed|
 | -------- | -------- | -------- | -------- |
-| description | Description of the parameter. The value can be a string or a resource index to descriptions in multiple languages. The value can contain a maximum of 255 characters.| String| Yes (initial value: left empty)|
+| description | Description of the parameter. The value can be a string or a resource index to descriptions in multiple languages. The value can contain a maximum of 255 bytes.| String| Yes (initial value: left empty)|
 | name | Name of the parameter passed for calling the ability. The value can contain a maximum of 255 bytes.| String| No|
 | type | Type of the parameter passed for calling the ability, for example, **Integer**.| String| No|
 
@@ -139,8 +139,8 @@ Example of the **distro** attribute structure:
 
 | Name| Description| Data Type| Initial Value Allowed|
 | -------- | -------- | -------- | -------- |
-| description | Description of the return value. The value can be a string or a resource index to descriptions in multiple languages. The value can contain a maximum of 255 characters.| String| Yes (initial value: left empty)|
-| name | Name of the return value. The value can contain a maximum of 255 characters.| String| Yes (initial value: left empty)|
+| description | Description of the return value. The value can be a string or a resource index to descriptions in multiple languages. The value can contain a maximum of 255 bytes.| String| Yes (initial value: left empty)|
+| name | Name of the return value. The value can contain a maximum of 255 bytes.| String| Yes (initial value: left empty)|
 | type | Type of the return value, for example, **Integer**.| String| No|
 
 ## Internal Structure of the customizeData Attribute
@@ -191,17 +191,44 @@ Example of the metadata attribute:
 
 ## Internal Structure of the abilities Attribute
 
-**By default, application icons cannot be hidden from the home screen in OpenHarmony.**
-
-The OpenHarmony system imposes a strict rule on the presence of application icons. If no icon is configured in the HAP file of an application, the system creates a default icon for the application and displays it on the home screen.
+**Table 8** Internal structure of the abilities attribute
 
-Touching this icon will direct the user to the application details screen in **Settings**, as shown in Figure 1.
+| Name| Description| Data Type| Initial Value Allowed|
+| -------- | -------- | -------- | -------- |
+| process | Name of the process running the application or ability. If the **process** attribute is configured in the **deviceConfig** tag, all abilities of the application run in this process. You can set the **process** attribute for a specific ability in the **abilities** attribute, so that the ability can run in the particular process. If this attribute is set to the name of the process running other applications, all these applications can run in the same process, provided they have the same unified user ID and the same signature. The value can contain a maximum of 31 bytes.| String| Yes (initial value: left empty)|
+| name | Ability name. The value can be a reverse domain name, in the format of "*bundleName*.*className*", for example, **"com.example.myapplication.EntryAbility"**. Alternatively, the value can start with a period (.) followed by the class name, for example, **".EntryAbility"**.<br>The ability name must be unique in an application.<br/>**NOTE**<br/>If you use DevEco Studio to create the project, an ability named **EntryAbility** will be created by default, and its configuration will be saved to the **config.json** file. If you use other IDEs, the value of this attribute can be customized. The value can contain a maximum of 127 bytes. | String| No|
+| description | Description of the ability. The value can be a string or a resource index to descriptions in multiple languages. The value can contain a maximum of 255 bytes.| String| Yes (initial value: left empty)|
+| icon | Index to the ability icon file. Example value: **$media:ability_icon**. In the **skills** attribute of the ability, if the **actions** value contains **action.system.home** and the **entities** value contains **entity.system.home**, the icon of the ability is also used as the icon of the application. If multiple abilities address this condition, the icon of the first candidate ability is used as the application icon.<br>**NOTE**<br>The **icon** and **label** values of an application are visible to users. Ensure that at least one of them is different from any existing icons or labels. | String| Yes (initial value: left empty)|
+| label | Ability name displayed to users. The value can be a name string or a resource index to names in multiple languages, for example, **$string:ability_label**. In the **skills** attribute of the ability, if the **actions** value contains **action.system.home** and the **entities** value contains **entity.system.home**, the label of the ability is also used as the label of the application. If multiple abilities address this condition, the label of the first candidate ability is used as the application label.<br>**NOTE**<br/>The **icon** and **label** values of an application are visible to users. Ensure that at least one of them is different from any existing icons or labels. The value can be a reference to a string defined in a resource file or a string enclosed in brackets ({}). The value can contain a maximum of 255 bytes. | String| Yes (initial value: left empty)|
+| uri | Uniform Resource Identifier (URI) of the ability. The value can contain a maximum of 255 bytes.| String| Yes (No for abilities using the Data template)|
+| launchType | Launch type of the ability. The value can be **standard** or **singleton**.<br>**standard**: Multiple **Ability** instances can be created during startup. Most abilities can use this type.<br>**singleton**: Only a single **Ability** instance can be created across all task stacks during startup. For example, a globally unique incoming call screen uses the singleton launch type. This attribute applies only to the default, tablet, smart TV, head unit, and wearable device types.| String| Yes (initial value: **"singleton"**)|
+| visible | Whether the ability can be called by other applications.<br>**true**: The ability can be called by other applications.<br>**false**: The ability cannot be called by other applications.| Boolean| Yes (initial value: **false**)|
+| permissions | Permissions required for abilities of another application to call the current ability. The value is an array of permission names predefined by the system, generally in the reverse domain name notation. It contains a maximum of 255 bytes.| String array| Yes (initial value: left empty)|
+|skills | Types of the **want** that can be accepted by the ability.| Object array| Yes (initial value: left empty)|
+| deviceCapability | Device capabilities required to run the ability. The value is an array of up to 512 elements, each of which contains a maximum of 64 bytes.| String array| Yes (initial value: left empty)|
+| metaData | Metadata.| Object| Yes (initial value: left empty)|
+| type | Ability type. The options are as follows:<br>**page**: FA developed using the Page template to provide the capability of interacting with users.<br>**service**: PA developed using the Service template to provide the capability of running tasks in the background.<br>**data**: PA developed using the Data template to provide unified data access for external systems.<br>**CA**: ability that can be started by other applications as a window.| String| No|
+| orientation | Display orientations of the ability. This attribute applies only to the ability using the Page template. The options are as follows:<br>**unspecified**: indicates that the system automatically determines the display orientation of the ability.<br>**landscape**: indicates the landscape orientation.<br>**portrait**: indicates the portrait orientation.<br>**followRecent**: indicates that the orientation follows the most recent application in the stack.| String| Yes (initial value: **"unspecified"**)|
+| backgroundModes | Background service type of the ability. You can assign multiple background service types to a specific ability. This field applies only to the ability using the Service template. The options are as follows:<br>**dataTransfer**: service for downloading, backing up, sharing, or transferring data from the network or peer devices.<br>**audioPlayback**: audio playback service.<br>**audioRecording**: audio recording service.<br>**pictureInPicture**: picture in picture (PiP) and small-window video playback services.<br>**voip**: voice/video call and VoIP services.<br>**location**: location and navigation services.<br>**bluetoothInteraction**: Bluetooth scanning, connection, and transmission services.<br>**wifiInteraction**: WLAN scanning, connection, and transmission services.<br>**screenFetch**: screen recording and screenshot services.<br>**multiDeviceConnection**: multi-device interconnection service.| String array| Yes (initial value: left empty)|
+| grantPermission | Whether permissions can be granted for any data in the ability.| Boolean| Yes (initial value: left empty)|
+| readPermission | Permission required for reading data in the ability. This attribute applies only to the ability using the Data template. The value is a string with a maximum of 255 bytes. This attribute applies only to the default, tablet, smart TV, head unit, and wearable device types.| String| Yes (initial value: left empty)|
+| writePermission | Permission required for writing data to the ability. This attribute applies only to the ability using the Data template. The value is a string with a maximum of 255 bytes.| String| Yes (initial value: left empty)|
+| configChanges | System configurations that the ability concerns. Upon any changes on the concerned configurations, the **onConfigurationUpdated** callback will be invoked to notify the ability. The options are as follows:<br>**mcc**: indicates that the mobile country code (MCC) of the IMSI is changed. Typical scenario: A SIM card is detected, and the MCC is updated.<br>**mnc**: indicates that the mobile network code (MNC) of the IMSI is changed. Typical scenario: A SIM card is detected, and the MNC is updated.<br>**locale**: indicates that the locale is changed. Typical scenario: The user selects a new language for the text display of the device.<br>**layout**: indicates that the screen layout is changed. Typical scenario: Currently, different display forms are all in the active state.<br>**fontSize**: indicates that font size is changed. Typical scenario: A new global font size is set.<br>**orientation**: indicates that the screen orientation is changed. Typical scenario: The user rotates the device.<br>**density**: indicates that the display density is changed. Typical scenario: The user may specify different display ratios, or different display forms are active at the same time.<br>**size**: indicates that the size of the display window is changed.<br>**smallestSize**: indicates that the length of the shorter side of the display window is changed.<br>**colorMode**: indicates that the color mode is changed.| String array| Yes (initial value: left empty)|
+| mission | Task stack of the ability. This attribute applies only to the ability using the Page template. By default, all abilities in an application belong to the same task stack.| String| Yes (initial value: bundle name of the application)|
+| targetAbility | Target ability that this ability alias points to. This attribute applies only to the ability using the Page template. If the **targetAbility** attribute is set, only **name**, **icon**, **label**, **visible**, **permissions**, and **skills** take effect in the current ability (ability alias). Other attributes use the values of the **targetAbility** attribute. The target ability must belong to the same application as the alias and must be declared in **config.json** ahead of the alias.| String| Yes (initial value: left empty, indicating that the current ability is not an alias)|
+| formsEnabled | Whether the ability can provide widgets. This attribute applies only to the ability using the Page template.<br>**true**: This ability can provide widgets.<br>**false**: This ability cannot provide widgets.| Boolean| Yes (initial value: **false**)|
+| forms | Information about the widgets used by the ability. This attribute is valid only when **formsEnabled** is set to **true**.| Object array| Yes (initial value: left empty)|
+| srcLanguage | Programming language of the ability, which you can specify when creating the project.| String| Yes (initial value: **"js"**)|
+| srcPath | JS code path corresponding to the ability. The value can contain a maximum of 127 bytes.| String| No|
+| uriPermission | Application data that the ability can access. This attribute consists of the **mode** and **path** sub-attributes. This attribute is valid only for the capability of the type provider.| Object| Yes (initial value: left empty)|
+| startWindowIcon | Index to the icon file of the ability startup page. This attribute applies only to the ability using the Page template. Example: **$media:icon**.| String| Yes (initial value: left empty)|
+| startWindowBackground | Index to the background color resource file of the ability startup page. This attribute applies only to the ability using the Page template. Example: **$color:red**.| String| Yes (initial value: left empty)|
+| removeMissionAfterTerminate | Whether to remove the relevant task from the task list after the ability is destroyed. This attribute applies only to the ability using the Page template. The value **true** means to remove the relevant task from the task list after the ability is destroyed, and **false** means the opposite.| Boolean| Yes (initial value: **false**)|
 
-To hide an application icon from the home screen, you must configure the **AllowAppDesktopIconHide** privilege. For details, see [Application Privilege Configuration Guide](../../device-dev/subsystems/subsys-app-privilege-config-guide.md).
 
-**Objectives**:
+**By default, application icons cannot be hidden from the home screen in OpenHarmony.**
 
-This requirement on application icons is intended to prevent malicious applications from deliberately configuring no icon to block uninstallation attempts.
+OpenHarmony 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**:
 
@@ -229,71 +256,34 @@ Set **icon**, **label**, and **skills** under **abilities** in the **config.json
 }
 ```
 
-**Display rules of application icons and labels on the home screen:**
+To hide an application icon from the home screen, you must configure the **AllowAppDesktopIconHide** privilege. For details, see [Application Privilege Configuration Guide](../../device-dev/subsystems/subsys-app-privilege-config-guide.md). The rules for displaying the entry icon and entry label are as follows:
 * The HAP file contains Page ability configuration.
   * The application icon on the home screen is set under **abilities** in the **config.json** file.
     * The application does not have the privilege to hide its icon from the home screen.
-      * The application icon displayed on the home screen is the icon configured for the Page ability.
-      * The application label displayed on the home screen is the label configured for the Page ability. If no label is configured, the bundle name is returned.
-      * The name of the Page ability is displayed.
-      * When the user touches the home screen icon, the home screen of the Page ability is displayed.
+      * The system uses the icon configured for the Page ability as the entry icon and displays it on the home screen. Touching this icon will direct the user to the home page of the Page ability.
+      * The system uses the label configured for the PageAbility as the entry label and displays it on the home screen. If no label is configured, the bundle name is returned.
     * The application has the privilege to hide its icon from the home screen.
-      * The information about the application is not returned during home screen information query, and the icon of the application is not displayed on the home screen.
+      * The application information is not returned when the home screen queries the information, and the entry icon and label of the application are not displayed on the home screen.
   * The application icon on the home screen is not set under **abilities** in the **config.json** file.
     * The application does not have the privilege to hide its icon from the home screen.
-      * The application icon displayed on the home screen is the default icon.
-      * The application label displayed on the home screen is the bundle name of the application.
-      * Touching the application icon on the home screen will direct the user to the application details screen shown in Figure 1.
+      * The system uses the default icon as the entry icon and displays it on the home screen. Touching this icon will direct the user to the application details screen under application management, as shown in Figure 1.
+      * The system uses the bundle name of the application as the entry label and displays it on the home screen.
     * The application has the privilege to hide its icon from the home screen.
-      * The information about the application is not returned during home screen information query, and the icon of the application is not displayed on the home screen.
+      * The application information is not returned when the home screen queries the information, and the entry icon and label of the application are not displayed on the home screen.
 * The HAP file does not contain Page ability configuration.
   * The application does not have the privilege to hide its icon from the home screen.
-    * The application icon displayed on the home screen is the default icon.
-    * The application label displayed on the home screen is the bundle name of the application.
-    * Touching the application icon on the home screen will direct the user to the application details screen shown in Figure 1.
+    * The system uses the default icon as the entry icon and displays it on the home screen. Touching this icon will direct the user to the application details screen under application management, as shown in Figure 1.
+    * The system uses the bundle name of the application as the entry label and displays it on the home screen.
   * The application has the privilege to hide its icon from the home screen.
-    * The information about the application is not returned during home screen information query, and the icon of the application is not displayed on the home screen.
-
-Note: The label displayed on the application details screen may be different from that displayed on the home screen. For non-Page abilities, it is the entry label set (if any).<br><br>
+    * The application information is not returned when the home screen queries the information, and the entry icon and label of the application are not displayed on the home screen.
 
 **Figure 1** Application details screen
 
 ![Application details screen](figures/application_details.jpg)
 
-
-**Table 8** Internal structure of the abilities attribute
-
-| Name| Description| Data Type| Initial Value Allowed|
-| -------- | -------- | -------- | -------- |
-| process | Name of the process running the application or ability. If the **process** attribute is configured in the **deviceConfig** tag, all abilities of the application run in this process. You can set the **process** attribute for a specific ability in the **abilities** attribute, so that the ability can run in the particular process. If this attribute is set to the name of the process running other applications, all these applications can run in the same process, provided they have the same unified user ID and the same signature. The value can contain a maximum of 31 bytes.| String| Yes (initial value: left empty)|
-| name | Ability name. The value can be a reverse domain name, in the format of "*bundleName*.*className*", for example, **"com.example.myapplication.EntryAbility"**. Alternatively, the value can start with a period (.) followed by the class name, for example, **".EntryAbility"**.<br>The ability name must be unique in an application. Note: If you use DevEco Studio to create the project, an ability named **EntryAbility** will be created by default, and its configuration will be saved to the **config.json** file. If you use other IDEs, the value of this attribute can be customized. The value can contain a maximum of 127 bytes.| String| No|
-| description | Description of the ability. The value can be a string or a resource index to descriptions in multiple languages. The value can contain a maximum of 255 bytes.| String| Yes (initial value: left empty)|
-| icon | Index to the ability icon file. Example value: **$media:ability_icon**. In the **skills** attribute of the ability, if the **actions** value contains **action.system.home** and the **entities** value contains **entity.system.home**, the icon of the ability is also used as the icon of the application. If multiple abilities address this condition, the icon of the first candidate ability is used as the application icon.<br>Note: The **icon** and **label** values of an application are visible to users. Ensure that at least one of them is different from any existing icons or labels.| String| Yes (initial value: left empty)|
-| label | Ability name displayed to users. The value can be a name string or a resource index to names in multiple languages, for example, **$string:ability_label**. In the **skills** attribute of the ability, if the **actions** value contains **action.system.home** and the **entities** value contains **entity.system.home**, the label of the ability is also used as the label of the application. If multiple abilities address this condition, the label of the first candidate ability is used as the application label.<br>Note: The **icon** and **label** values of an application are visible to users. Ensure that at least one of them is different from any existing icons or labels. The value can be a reference to a string defined in a resource file or a string enclosed in brackets ({}). The value can contain a maximum of 255 characters.| String| Yes (initial value: left empty)|
-| uri | Uniform Resource Identifier (URI) of the ability. The value can contain a maximum of 255 bytes.| String| Yes (No for abilities using the Data template)|
-| launchType | Launch type of the ability. The value can be **standard** or **singleton**.<br>**standard**: Multiple **Ability** instances can be created during startup. Most abilities can use this type.<br>**singleton**: Only a single **Ability** instance can be created across all task stacks during startup. For example, a globally unique incoming call screen uses the singleton launch type. This attribute applies only to the default, tablet, smart TV, head unit, and wearable device types.| String| Yes (initial value: **"singleton"**)|
-| visible | Whether the ability can be called by other applications.<br>**true**: The ability can be called by other applications.<br>**false**: The ability cannot be called by other applications.| Boolean| Yes (initial value: **false**)|
-| permissions | Permissions required for abilities of another application to call the current ability. The value is an array of permission names predefined by the system, generally in the reverse domain name notation. It contains a maximum of 255 bytes.| String array| Yes (initial value: left empty)|
-|skills | Types of the **want** that can be accepted by the ability.| Object array| Yes (initial value: left empty)|
-| deviceCapability | Device capabilities required to run the ability. The value is an array of up to 512 elements, each of which contains a maximum of 64 bytes.| String array| Yes (initial value: left empty)|
-| metaData | Metadata.| Object| Yes (initial value: left empty)|
-| type | Ability type. The options are as follows:<br>**page**: FA developed using the Page template to provide the capability of interacting with users.<br>**service**: PA developed using the Service template to provide the capability of running tasks in the background.<br>**data**: PA developed using the Data template to provide unified data access for external systems.<br>**CA**: ability that can be started by other applications as a window.| String| No|
-| orientation | Display orientations of the ability. This attribute applies only to the ability using the Page template. The options are as follows:<br>**unspecified**: indicates that the system automatically determines the display orientation of the ability.<br>**landscape**: indicates the landscape orientation.<br>**portrait**: indicates the portrait orientation.<br>**followRecent**: indicates that the orientation follows the most recent application in the stack.| String| Yes (initial value: **"unspecified"**)|
-| backgroundModes | Background service type of the ability. You can assign multiple background service types to a specific ability. This field applies only to the ability using the Service template. The options are as follows:<br>**dataTransfer**: service for downloading, backing up, sharing, or transferring data from the network or peer devices.<br>**audioPlayback**: audio playback service.<br>**audioRecording**: audio recording service.<br>**pictureInPicture**: picture in picture (PiP) and small-window video playback services.<br>**voip**: voice/video call and VoIP services.<br>**location**: location and navigation services.<br>**bluetoothInteraction**: Bluetooth scanning, connection, and transmission services.<br>**wifiInteraction**: WLAN scanning, connection, and transmission services.<br>**screenFetch**: screen recording and screenshot services.<br>**multiDeviceConnection**: multi-device interconnection service.| String array| Yes (initial value: left empty)|
-| grantPermission | Whether permissions can be granted for any data in the ability.| Boolean| Yes (initial value: left empty)|
-| readPermission | Permission required for reading data in the ability. This attribute applies only to the ability using the Data template. The value is a string with a maximum of 255 bytes. This attribute applies only to the default, tablet, smart TV, head unit, and wearable device types.| String| Yes (initial value: left empty)|
-| writePermission | Permission required for writing data to the ability. This attribute applies only to the ability using the Data template. The value is a string with a maximum of 255 bytes.| String| Yes (initial value: left empty)|
-| configChanges | System configurations that the ability concerns. Upon any changes on the concerned configurations, the **onConfigurationUpdated** callback will be invoked to notify the ability. The options are as follows:<br>**mcc**: indicates that the mobile country code (MCC) of the IMSI is changed. Typical scenario: A SIM card is detected, and the MCC is updated.<br>**mnc**: indicates that the mobile network code (MNC) of the IMSI is changed. Typical scenario: A SIM card is detected, and the MNC is updated.<br>**locale**: indicates that the locale is changed. Typical scenario: The user selects a new language for the text display of the device.<br>**layout**: indicates that the screen layout is changed. Typical scenario: Currently, different display forms are all in the active state.<br>**fontSize**: indicates that font size is changed. Typical scenario: A new global font size is set.<br>**orientation**: indicates that the screen orientation is changed. Typical scenario: The user rotates the device.<br>**density**: indicates that the display density is changed. Typical scenario: The user may specify different display ratios, or different display forms are active at the same time.<br>**size**: indicates that the size of the display window is changed.<br>**smallestSize**: indicates that the length of the shorter side of the display window is changed.<br>**colorMode**: indicates that the color mode is changed.| String array| Yes (initial value: left empty)|
-| mission | Task stack of the ability. This attribute applies only to the ability using the Page template. By default, all abilities in an application belong to the same task stack.| String| Yes (initial value: bundle name of the application)|
-| targetAbility | Target ability that this ability alias points to. This attribute applies only to the ability using the Page template. If the **targetAbility** attribute is set, only **name**, **icon**, **label**, **visible**, **permissions**, and **skills** take effect in the current ability (ability alias). Other attributes use the values of the **targetAbility** attribute. The target ability must belong to the same application as the alias and must be declared in **config.json** ahead of the alias.| String| Yes (initial value: left empty, indicating that the current ability is not an alias)|
-| formsEnabled | Whether the ability can provide widgets. This attribute applies only to the ability using the Page template.<br>**true**: This ability can provide widgets.<br>**false**: This ability cannot provide widgets.| Boolean| Yes (initial value: **false**)|
-| forms | Information about the widgets used by the ability. This attribute is valid only when **formsEnabled** is set to **true**.| Object array| Yes (initial value: left empty)|
-| srcLanguage | Programming language of the ability, which you can specify when creating the project.| String| Yes (initial value: **"js"**)|
-| srcPath | JS code path corresponding to the ability. The value can contain a maximum of 127 bytes.| String| No|
-| uriPermission | Application data that the ability can access. This attribute consists of the **mode** and **path** sub-attributes. This attribute is valid only for the capability of the type provider.| Object| Yes (initial value: left empty)|
-| startWindowIcon | Index to the icon file of the ability startup page. This attribute applies only to the ability using the Page template. Example: **$media:icon**.| String| Yes (initial value: left empty)|
-| startWindowBackground | Index to the background color resource file of the ability startup page. This attribute applies only to the ability using the Page template. Example: **$color:red**.| String| Yes (initial value: left empty)|
-| removeMissionAfterTerminate | Whether to remove the relevant task from the task list after the ability is destroyed. This attribute applies only to the ability using the Page template. The value **true** means to remove the relevant task from the task list after the ability is destroyed, and **false** means the opposite.| Boolean| Yes (initial value: **false**)|
+> **NOTE**
+>
+> The label displayed on the application details screen may be different from the one displayed on the home screen. These two are the same if the entry icon and label are configured for the non-Page ability.
 
 ## Internal Structure of the uriPermission Attribute
 
@@ -318,7 +308,7 @@ Example of the **abilities** attribute structure:
     "label": "$string:example",
     "launchType": "standard",
     "orientation": "unspecified",
-    "permissions": [], 
+    "permissions": [],
     "visible": true,
     "skills": [
       {
@@ -331,11 +321,11 @@ Example of the **abilities** attribute structure:
       }
     ],
     "configChanges": [
-      "locale", 
-      "layout", 
-      "fontSize", 
+      "locale",
+      "layout",
+      "fontSize",
       "orientation"
-    ], 
+    ],
     "type": "page",
     "startWindowIcon": "$media:icon",
     "startWindowBackground": "$color:red",
@@ -381,7 +371,7 @@ Example of the **abilities** attribute structure:
 | -------- | -------- | -------- | -------- |
 | actions | Actions of the **want** that can be accepted by the ability. Generally, the value is an **action** value predefined in the system.| String array| Yes (initial value: left empty)|
 | entities | Entities of the **want** that can be accepted by the ability, such as video and home applications.| String array| Yes (initial value: left empty)|
-| uris | Data specifications to be added to the want filter. The specification is a data type (using the **mimeType** attribute), a URI, or both a data type and a URI.<br>The URI is specified by separate attributes of each part: &lt;scheme&gt;://&lt;host&gt;:&lt;port&gt;[&lt;path&gt;\|&lt;pathStartWith&gt;\|&lt;pathRegex&gt;].  <br>**scheme** is mandatory when the specification is of the URI type and is optional when the specification is a data type. | Object array| Yes (initial value: left empty)|
+| uris | Data specifications to be added to the want filter. The specification is a data type (using the **mimeType** attribute), a URI, or both a data type and a URI.<br>The URI is specified by separate attributes of each part: &lt;scheme&gt;://&lt;host&gt;:&lt;port&gt;[&lt;path&gt;\|&lt;pathStartWith&gt;\|&lt;pathRegex&gt;].  <br>**scheme** is mandatory when the specification is of the URI type and is optional when the specification is a data type.| Object array| Yes (initial value: left empty)|
 
 ## Internal Structure of the uris Attribute
 
@@ -405,7 +395,7 @@ Example of the **skills** attribute structure:
   {
     "actions": [
       "action.system.home"
-    ], 
+    ],
     "entities": [
       "entity.system.home"
     ],
@@ -477,11 +467,11 @@ Example of the **js** attribute structure:
 ```json
 "js": [
   {
-    "name": "default", 
-    "pages": [      
+    "name": "default",
+    "pages": [
       "pages/index/index",
       "pages/detail/detail"
-    ],     
+    ],
     "window": {
       "designWidth": 720,
       "autoDesignWidth": false
diff --git a/en/application-dev/quick-start/multi-hap-release-deployment.md b/en/application-dev/quick-start/multi-hap-release-deployment.md
index b4587f2c2125c526b86bfa0646af4b1fcbc9e9d3..4d3d1167e7765e25f3e07942a0ce703e7e2b2355 100644
--- a/en/application-dev/quick-start/multi-hap-release-deployment.md
+++ b/en/application-dev/quick-start/multi-hap-release-deployment.md
@@ -9,7 +9,9 @@ Below is the process of developing, debugging, releasing, and deploying multiple
 You can use [DevEco Studio](https://developer.harmonyos.com/en/develop/deveco-studio) to create multiple modules as needed and develop services in respective modules.
 
 ## Debugging
-After building code into one or more HAP files and installing or updating these HAP files, you can debug them by using the methods:
+After building code into one or more HAP files and installing or updating these HAP files, you can debug them. You can leverage a single set of code and files to build multiple target editions for different audiences, deployment environments, operating environments, and more. For details, see [Customizing Multi-Target and Multi-Product Builds](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/customized-multi-targets-and-products-0000001430013853-V3?catalogVersion=V3).
+
+You can debug HAP files using the methods:
 * Using DevEco Studio for debugging
 
    Follow the instructions in [Debugging Configuration](https://developer.harmonyos.com/en/docs/documentation/doc-guides/ohos-debugging-and-running-0000001263040487#section10491183521520).
@@ -49,7 +51,7 @@ After building code into one or more HAP files and installing or updating these
     // The execution result is as follows:
     uninstall bundle successfully.
     ```
-    After the HAP files are installed or updated, you can debug them by following the instructions in [Ability Assistant](https://docs.openharmony.cn/pages/v3.2Beta/en/application-dev/tools/aa-tool.md/).
+    After the HAP files are installed or updated, you can debug them by following the instructions in [Ability Assistant](../tools/aa-tool.md).
 
 ## Release
 When your application package meets the release requirements, you can package and build it into an App Pack and release it to the application market on the cloud. The application market verifies the signature of the App Pack. If the signature verification is successful, the application market obtains the HAP files from the App Pack, signs them, and distributes the signed HAP files.
diff --git a/en/application-dev/reference/apis/js-apis-app-ability-abilityManager.md b/en/application-dev/reference/apis/js-apis-app-ability-abilityManager.md
index c3e24aadaa8254b5546c126bf6fbdb4d512b478f..ed56fca0dd96bdd53e0bc66548c72c028a0ddf4f 100644
--- a/en/application-dev/reference/apis/js-apis-app-ability-abilityManager.md
+++ b/en/application-dev/reference/apis/js-apis-app-ability-abilityManager.md
@@ -143,7 +143,7 @@ try {
 
 getAbilityRunningInfos(callback: AsyncCallback\<Array\<AbilityRunningInfo>>): void
 
-Obtains the ability running information. This API uses an asynchronous callback to return the result.
+Obtains the UIAbility running information. This API uses an asynchronous callback to return the result.
 
 **Required permissions**: ohos.permission.GET_RUNNING_INFO
 
@@ -388,7 +388,7 @@ abilityManager.getTopAbility().then((data) => {
 
 acquireShareData(missionId: number, callback: AsyncCallback<{[key: string]: Object}>): void;
 
-Acquires the shared data of the target device. This API uses an asynchronous callback to return the result.
+Acquires the shared data of the target application. This API uses an asynchronous callback to return the result. **missionId** indicates the target application's mission ID, which can be obtained by running the **hdc shell aa dump -a** command or calling the [missionManager.getMissionInfos()](js-apis-app-ability-missionManager.md#getmissioninfos) API after the target application is started. **callback** indicates the data shared by the target application through the [UIAbility.onShare()](js-apis-app-ability-uiAbility.md#onshare) lifecycle callback.
 
 **System capability**: SystemCapability.Ability.AbilityRuntime.Core
 
@@ -396,7 +396,7 @@ Acquires the shared data of the target device. This API uses an asynchronous cal
 
 | Name       | Type                                      | Mandatory  | Description            |
 | --------- | ---------------------------------------- | ---- | -------------- |
-| missionId | number                                   | Yes| Mission ID on the target device. The maximum value is 2<sup>31</sup>-1.|
+| missionId | number                                   | Yes| Mission ID on the target application. The maximum value is 2<sup>31</sup>-1.|
 | callback  | AsyncCallback<{[key: string]: Object}>  | Yes   | Callback used to return the API call result and the shared data. You can perform error handling or custom processing in it.     |
 
 **Error codes**
@@ -411,14 +411,17 @@ For details about the error codes, see [Ability Error Codes](../errorcodes/error
 
 ```ts
 import abilityManager from '@ohos.app.ability.abilityManager';
-
-abilityManager.acquireShareData(1, (err, data) => { 
-    if (err) {
-        console.error(`acquireShareData fail, err: ${JSON.stringify(err)}`);
-    } else {
-        console.log(`acquireShareData success, data: ${JSON.stringify(data)}`);
-    }
-});
+try {
+    abilityManager.acquireShareData(1, (err, wantParam) => { 
+        if (err) {
+            console.error(`acquireShareData fail, err: ${JSON.stringify(err)}`);
+        } else {
+            console.log(`acquireShareData success, data: ${JSON.stringify(wantParam)}`);
+        }
+    });
+} catch (paramError) {
+    console.error(`error.code: ${JSON.stringify(paramError.code)}, error.message: ${JSON.stringify(paramError.message)}`);
+}
 
 ```
 
@@ -426,7 +429,7 @@ abilityManager.acquireShareData(1, (err, data) => {
 
 acquireShareData(missionId: number): Promise<{[key: string]: Object}>;
 
-Acquires the shared data of the target device. This API uses a promise to return the result.
+Acquires the shared data of the target application. This API uses a promise to return the result. **missionId** indicates the target application's mission ID, which can be obtained by running the **hdc shell aa dump -a** command or calling the [missionManager.getMissionInfos()](js-apis-app-ability-missionManager.md#getmissioninfos) API after the target application is started. **Promise<{[key: string]: Object}>** indicates the data shared by the target application through the [UIAbility.onShare()](js-apis-app-ability-uiAbility.md#onshare) lifecycle callback.
  
 **System capability**: SystemCapability.Ability.AbilityRuntime.Core
 
@@ -449,8 +452,8 @@ For details about the error codes, see [Ability Error Codes](../errorcodes/error
 ```ts
 import abilityManager from '@ohos.app.ability.abilityManager';
 try {
-    abilityManager.acquireShareData(1).then((data) => {
-    console.log(`acquireShareData success, data: ${JSON.stringify(data)}`);
+    abilityManager.acquireShareData(1).then((wantParam) => {
+    console.log(`acquireShareData success, data: ${JSON.stringify(wantParam)}`);
     }).catch((err) => {
     console.error(`acquireShareData fail, err: ${JSON.stringify(err)}`);
     });
diff --git a/en/application-dev/reference/apis/js-apis-app-ability-uiAbility.md b/en/application-dev/reference/apis/js-apis-app-ability-uiAbility.md
index cfd08c64b6cd10f74516ad9bac10b8d0febd0b97..572f8909b48c89f8f9decdfee326976f62098fd2 100644
--- a/en/application-dev/reference/apis/js-apis-app-ability-uiAbility.md
+++ b/en/application-dev/reference/apis/js-apis-app-ability-uiAbility.md
@@ -315,7 +315,7 @@ class MyUIAbility extends UIAbility {
 
 onShare(wantParam:{ [key: string]: Object }): void;
 
-Called when this UIAbility sets data to share. **ohos.extra.param.key.contentTitle** indicates the title of the content to share in the sharing box, and **ohos.extra.param.key.shareAbstract** provides an abstract description of the content, **ohos.extra.param.key.shareUrl** indicates the online address of the service. You need to set these three items as objects, with the key set to **title**, **abstract**, and **url**, respectively.
+Called when this UIAbility sets data to share. **ohos.extra.param.key.contentTitle** indicates the title of the content to share in the sharing box, **ohos.extra.param.key.shareAbstract** provides an abstract description of the content, and **ohos.extra.param.key.shareUrl** indicates the online address of the service. You need to set these three items as objects, with the key set to **title**, **abstract**, and **url**, respectively.
 
 **System capability**: SystemCapability.Ability.AbilityRuntime.AbilityCore
 
diff --git a/en/application-dev/reference/apis/js-apis-curve.md b/en/application-dev/reference/apis/js-apis-curve.md
index 03e735cca85b6fd6c9ce9c019e7d29a21c6976b7..bd673773b094eda6a3aa6d14c6d6ab7336120e65 100644
--- a/en/application-dev/reference/apis/js-apis-curve.md
+++ b/en/application-dev/reference/apis/js-apis-curve.md
@@ -153,14 +153,14 @@ Creates a spring animation curve. If multiple spring animations are applied to t
 | --------- | ------ | ---- | ----- |
 | response  | number | No   | Duration of one complete oscillation,<br>Default value: **0.55**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.55**.|
 | dampingFraction      | number | No   | Damping coefficient.<br>**0**: undamped. In this case, the spring oscillates forever.<br>> 0 and < 1: underdamped. In this case, the spring overshoots the equilibrium position.<br>**1**: critically damped.<br>> 1: overdamped. In this case, the spring approaches equilibrium gradually.<br>Default value: **0.825**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.55**.|
-| overlapDuration | number | No   | Duration for animations to overlap, in seconds. When animations overlap, if the **response** values of the two animations are different, they will transit smoothly over this duration.<br><br>Default value: **0**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0**.<br>The spring animation curve is physics-based. Its duration depends on the **springMotion** parameters and the previous velocity, rather than the **duration** parameter in **[animation](../arkui-ts/ts-animatorproperty.md)** or **[animateTo](../arkui-ts/ts-explicit-animation.md)**. The time cannot be normalized. Therefore, the interpolation cannot be obtained by using the **[interpolate](#interpolate)** function of the curve.|
+| overlapDuration | number | No   | Duration for animations to overlap, in seconds. When animations overlap, if the **response** values of the two animations are different, they will transit smoothly over this duration.<br><br>Default value: **0**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0**.<br>The spring animation curve is physics-based. Its duration depends on the **springMotion** parameters and the previous velocity, rather than the **duration** parameter in [animation](../arkui-ts/ts-animatorproperty.md) or [animateTo](../arkui-ts/ts-explicit-animation.md). The time cannot be normalized. Therefore, the interpolation cannot be obtained by using the **[interpolate](#interpolate)** function of the curve.|
 
 
 **Return value**
 
 | Type                          | Description            |
 | ---------------------------------- | ---------------- |
-|  [ICurve](#icurve)| Curve.<br>**NOTE**<br>The spring animation curve is physics-based. Its duration depends on the **springMotion** parameters and the previous velocity, rather than the **duration** parameter in **animation** or **animateTo**. The time cannot be normalized. Therefore, the interpolation cannot be obtained by using the **[interpolate](#interpolate)** function of the curve.|
+|  [ICurve](#icurve)| Curve.<br>**NOTE**<br>The spring animation curve is physics-based. Its duration depends on the **springMotion** parameters and the previous velocity, rather than the **duration** parameter in [animation](../arkui-ts/ts-animatorproperty.md) or [animateTo](../arkui-ts/ts-explicit-animation.md). The time cannot be normalized. Therefore, the interpolation cannot be obtained by using the **[interpolate](#interpolate)** function of the curve.|
 
 **Example**
 
@@ -187,13 +187,13 @@ Creates a responsive spring animation curve. It is a special case of [springMoti
 | --------- | ------ | ---- | ----- |
 | response  | number | No   | See **response** in **springMotion**.<br>Default value: **0.15**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.15**.|
 | dampingFraction      | number | No   | See **dampingFraction** in **springMotion**.<br>Default value: **0.86**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.86**.|
-| overlapDuration | number | No   | See **overlapDuration** in **springMotion**.<br>Default value: **0.25**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.25**.<br> To apply custom settings for a spring animation, you are advised to use **springMotion**. When using **responsiveSpringMotion**, you are advised to retain the default settings.<br>The duration of the responsive spring animation depends on the **responsiveSpringMotion** parameters and the previous velocity, rather than the **duration** parameter in **[animation](../arkui-ts/ts-animatorproperty.md)** or **[animateTo](../arkui-ts/ts-explicit-animation.md)**. In addition, the interpolation cannot be obtained by using the **[interpolate](#interpolate)** function of the curve.|
+| overlapDuration | number | No   | See **overlapDuration** in **springMotion**.<br>Default value: **0.25**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.25**.<br> To apply custom settings for a spring animation, you are advised to use **springMotion**. When using **responsiveSpringMotion**, you are advised to retain the default settings.<br>The duration of the responsive spring animation depends on the **responsiveSpringMotion** parameters and the previous velocity, rather than the **duration** parameter in [animation](../arkui-ts/ts-animatorproperty.md) or [animateTo](../arkui-ts/ts-explicit-animation.md). In addition, the interpolation cannot be obtained by using the [interpolate](#interpolate) function of the curve.|
 
 **Return value**
 
 | Type                          | Description            |
 | ---------------------------------- | ---------------- |
-|  [ICurve](#icurve)| Curve.<br>**NOTE**<br>1. To apply custom settings for a spring animation, you are advised to use **springMotion**. When using **responsiveSpringMotion**, you are advised to retain the default settings.<br>2. The duration of the responsive spring animation depends on the **responsiveSpringMotion** parameters and the previous velocity, rather than the **duration** parameter in **animation** or **animateTo**. In addition, the interpolation cannot be obtained by using the **interpolate** function of the curve.|
+|  [ICurve](#icurve)| Curve.<br>**NOTE**<br>1. To apply custom settings for a spring animation, you are advised to use **springMotion**. When using **responsiveSpringMotion**, you are advised to retain the default settings.<br>2. The duration of the responsive spring animation depends on the **responsiveSpringMotion** parameters and the previous velocity, rather than the **duration** parameter in **animation** or **animateTo**. In addition, the interpolation cannot be obtained by using the [interpolate](#interpolate) function of the curve.|
 
 **Example**
 
@@ -220,14 +220,12 @@ Creates an interpolating spring curve animated from 0 to 1. The actual animation
 | stiffness | number | Yes   | Stiffness. It is the degree to which an object deforms by resisting the force applied. In an elastic system, the greater the stiffness, the stronger the ability to resist deformation, and the faster the speed of restoring to the equilibrium position.|
 | damping   | number | Yes   | Damping. It is a pure number and has no real physical meaning. It is used to describe the oscillation and attenuation of the system after being disturbed. The larger the damping, the smaller the number of oscillations of elastic motion, and the smaller the oscillation amplitude.|
 
-
 **Return value**
 
 | Type                          | Description            |
 | ---------------------------------- | ---------------- |
 |  [ICurve](#icurve)| Interpolation curve.|
 
-
 **Example**
 
 ```ts
@@ -235,6 +233,37 @@ import Curves from '@ohos.curves'
 Curves.interpolatingSpring(100, 1, 228, 30) // Create an interpolating spring curve whose duration is subject to spring parameters.
 ```
 
+## Curves.customCurve<sup>10+</sup>
+
+customCurve(interpolate: (fraction: number) => number): ICurve
+
+Creates a custom curve.
+
+**System capability**: SystemCapability.ArkUI.ArkUI.Full
+
+**Parameters**
+
+| Name     | Type                        | Mandatory| Description                                                        |
+| ----------- | ---------------------------- | ---- | ------------------------------------------------------------ |
+| interpolate | (fraction: number) => number | Yes  | Custom interpolation callback.<br>**fraction**: input x value for interpolation when the animation starts. Value range: [0, 1]<br>The return value is the y value of the curve. Value range: [0, 1]<br>**NOTE**<br>If **fraction** is **0**, the return value **0** corresponds to the animation start point; any other return value means that the animation jumps at the start point.<br>If **fraction** is **1**, the return value **1** corresponds to the animation end point; any other return value means that the end value of the animation is not the value of the state variable, which will result in an effect of transition from that end value to the value of the state variable.|
+
+**Return value**
+
+| Type             | Description            |
+| ----------------- | ---------------- |
+| [ICurve](#icurve) | Interpolation curve.|
+
+**Example**
+
+```ts
+import Curves from '@ohos.curves'
+interpolate(fraction) {
+    return Math.sqrt(fraction);
+  }
+Curves.customCurve(this.interpolate) // Create a custom curve.
+```
+
+
 
 ## ICurve
 
diff --git a/en/application-dev/reference/apis/js-apis-file-backup.md b/en/application-dev/reference/apis/js-apis-file-backup.md
index c6842fef719d243394b612dfa6f95d6e34485bc5..2c2586c9530b639abdd8060285ee0db7210fb04f 100644
--- a/en/application-dev/reference/apis/js-apis-file-backup.md
+++ b/en/application-dev/reference/apis/js-apis-file-backup.md
@@ -22,7 +22,7 @@ Defines a file metadata object, which includes the application name and file URI
 | Name      | Type  | Mandatory| Description                                                                                          |
 | ---------- | ------ | ---- | ---------------------------------------------------------------------------------------------- |
 | bundleName | string | Yes  | Bundle name of the application, which can be obtained by using the method provided by [bundle.BundleInfo](js-apis-bundle-BundleInfo.md).         |
-| uri        | string | Yes  | Name of the file in the application sandbox.<br>Currently, the URI has not been upgraded to the standard format. It can consist of digits (0–9), letters (a–z and A–Z), underscores (_), and period (.) only.|
+| uri        | string | Yes  | URI of the file in the application sandbox.<br>Currently, the URI is not in the standard format. It can consist of digits (0–9), letters (a–z and A–Z), underscores (_), and period (.) only.|
 
 ## FileData
 
@@ -51,7 +51,7 @@ inherits from [FileMeta](#filemeta) and [FileData](#filedata).
 
 ## GeneralCallbacks
 
-Provides general callbacks invoked during the backup or restoration process. The backup service uses these callbacks to notify the client of the backup/restoration phase of the application.
+Provides callbacks to be used in the backup or restoration process. The backup service uses these callbacks to notify the client of the backup/restoration phase of the application.
 
 **System capability**: SystemCapability.FileManagement.StorageService.Backup
 
@@ -263,7 +263,7 @@ The following is an example of the file obtained:
     "versionCode" : 1000000,
     "versionName" : "1.0.0"
     }],
-  "deviceType" : "phone",
+  "deviceType" : "default",
   "systemFullName" : "OpenHarmony-4.0.0.0"
  }
  ```
@@ -324,7 +324,7 @@ For details about the error codes, see [File Management Error Codes](../errorcod
     "versionCode" : 1000000,
     "versionName" : "1.0.0"
     }],
-  "deviceType" : "phone",
+  "deviceType" : "default",
   "systemFullName" : "OpenHarmony-4.0.0.0"
  }
  ```
@@ -546,7 +546,7 @@ For details about the error codes, see [File Management Error Codes](../errorcod
 
 ## SessionRestore
 
-Provides a restoration process object to support the data restoration process of applications. Before using the APIs of this class, you need to create a **SessionRestore** instance.
+Provides an object to support the data restoration process of applications. Before using the APIs of this class, you need to create a **SessionRestore** instance.
 
 ### constructor
 
diff --git a/en/application-dev/reference/apis/js-apis-file-fileuri.md b/en/application-dev/reference/apis/js-apis-file-fileuri.md
index 1aa5fe9cf08005980285bd04ae87763e58de8751..f713a5d0ee3127642ca2d391b71a7b9b310c2a61 100644
--- a/en/application-dev/reference/apis/js-apis-file-fileuri.md
+++ b/en/application-dev/reference/apis/js-apis-file-fileuri.md
@@ -14,6 +14,8 @@ import fileuri from "@ohos.file.fileuri";
 
 Before using this module, you need to obtain the path of the file in the application sandbox. The following is an example:
 
+**Stage Model**
+
  ```js
 import UIAbility from '@ohos.app.ability.UIAbility';
 
@@ -25,6 +27,19 @@ export default class EntryAbility extends UIAbility {
 }
  ```
 
+**FA Model**
+
+ ```js
+ import featureAbility from '@ohos.ability.featureAbility';
+ 
+ let context = featureAbility.getContext();
+ context.getFilesDir().then((data) => {
+      let pathDir = data;
+ })
+ ```
+
+For details about how to obtain the FA model context, see [Context](js-apis-inner-app-context.md#context).
+
 ## fileUri.getUriFromPath
 
 getUriFromPath(path: string): string
diff --git a/en/application-dev/reference/apis/js-apis-resourceschedule-backgroundTaskManager.md b/en/application-dev/reference/apis/js-apis-resourceschedule-backgroundTaskManager.md
index 3066cbef6e6a7c36bb6828c82eec5756ba54b532..58e035e687e8b43c22f0f8ed8b92bd9ec31002df 100644
--- a/en/application-dev/reference/apis/js-apis-resourceschedule-backgroundTaskManager.md
+++ b/en/application-dev/reference/apis/js-apis-resourceschedule-backgroundTaskManager.md
@@ -628,9 +628,11 @@ Enumerates the efficiency resource types.
 | Name                    | Value | Description                   |
 | ----------------------- | ---- | --------------------- |
 | CPU                     | 1    | CPU resources, which prevent the application from being suspended.            |
-| COMMON_EVENT            | 2    | A type of software resources, which prevent common events from being proxied when the application is suspended. |
-| TIMER                   | 4    | A type of software resources, which prevent timers from being proxied when the application is suspended.   |
-| WORK_SCHEDULER          | 8    | WORK_SCHEDULER resources, which ensure that the application has more time to execute the task.     |
-| BLUETOOTH               | 16   | A type of hardware resources, which prevent Bluetooth resources from being proxied when the application is suspended. |
-| GPS                     | 32   | A type of hardware resources, which prevent GPS resources from being proxied when the application is suspended. |
-| AUDIO                   | 64   | A type of hardware resources, which prevent audio resources from being proxied when the application is suspended.|
+| COMMON_EVENT            | 2    | Common events are not proxied when the application is suspended.|
+| TIMER                   | 4    | System timers are not proxied when the application is suspended.|
+| WORK_SCHEDULER          | 8    | WorkScheduler uses a loose control policy by default. For details, see [Restrictions on Using Work Scheduler Tasks](../../task-management/background-task-overview.md#restrictions-on using-work-scheduler-tasks).|
+| BLUETOOTH               | 16   | Bluetooth resources are not proxied when the application is suspended.|
+| GPS                     | 32   | GPS resources are not proxied when the application is suspended.|
+| AUDIO                   | 64   | Audio resources are not proxied when the application is suspended.|
+| RUNNING_LOCK | 128 | RUNNING_LOCK resources are not proxied when the application is suspended.|
+| SENSOR | 256 | Sensor callbacks are not intercepted.|
diff --git a/en/application-dev/reference/apis/js-apis-uitest.md b/en/application-dev/reference/apis/js-apis-uitest.md
index b14811afdb9d1305579768c96a733d2c84e93085..673744bf89745e4b929bddf57db88f7de730c33f 100644
--- a/en/application-dev/reference/apis/js-apis-uitest.md
+++ b/en/application-dev/reference/apis/js-apis-uitest.md
@@ -20,7 +20,7 @@ This module provides the following functions:
 ## Modules to Import
 
 ```js
-import {UiComponent, UiDriver, Component, Driver, UiWindow, ON, BY, MatchPattern, DisplayRotation, ResizeDirection, WindowMode, PointerMatrix, UiDirection, MouseButton} from '@ohos.UiTest';
+import {UiComponent, UiDriver, Component, Driver, UiWindow, ON, BY, MatchPattern, DisplayRotation, ResizeDirection, WindowMode, PointerMatrix, UiDirection, MouseButton, UIElementInfo, UIEventObserver} from '@ohos.UiTest';
 ```
 
 ## MatchPattern
@@ -141,10 +141,31 @@ Describes the injected simulated mouse button.
 | MOUSE_BUTTON_RIGHT  | 1    | Right button on the mouse.  |
 | MOUSE_BUTTON_MIDDLE | 2    | Middle button on the mouse.|
 
+## UIElementInfo<sup>10+</sup>
+
+Provides information about the UI event.
+
+**System capability**: SystemCapability.Test.UiTest
+
+| Name      | Type  | Readable| Writable| Description                 |
+| ---------- | ------ | ---- | ---- | --------------------- |
+| bundleName | string | Yes  | No  | Bundle name of the home application.     |
+| type       | string | Yes  | No  | Component or window type.      |
+| text       | string | Yes  | No  | Text information of the component or window.|
+
 ## On<sup>9+</sup>
 
 Since API version 9, the UiTest framework provides a wide range of UI component feature description APIs in the **On** class to filter and match components.
-The API capabilities provided by the **On** class exhibit the following features: 1. Allow one or more attributes as the match conditions. For example, you can specify both the **text** and **id** attributes to find the target component. <br>2. Provide multiple match patterns for component attributes. <br>3. Support absolute positioning and relative positioning for components. APIs such as [ON.isBefore](#isbefore9) and [ON.isAfter](#isafter9) can be used to specify the features of adjacent components to assist positioning. <br>All APIs provided in the **On** class are synchronous. You are advised to use the static constructor **ON** to create an **On** object in chain mode.
+
+The API capabilities provided by the **On** class exhibit the following features:
+
+- Allow one or more attributes as the match conditions. For example, you can specify both the **text** and **id** attributes to find the target component.
+
+- Provide multiple match patterns for component attributes.
+
+- Support absolute positioning and relative positioning for components. APIs such as [ON.isBefore](#isbefore9) and [ON.isAfter](#isafter9) can be used to specify the features of adjacent components to assist positioning. 
+
+All APIs provided in the **On** class are synchronous. You are advised to use the static constructor **ON** to create an **On** object in chain mode.
 
 ```js
 ON.text('123').type('button');
@@ -244,7 +265,7 @@ Specifies the clickable status attribute of the target component.
 
 | Name| Type   | Mandatory| Description                                                        |
 | ------ | ------- | ---- | ------------------------------------------------------------ |
-| b      | boolean | No  | Clickable status of the target component.<br>**true**: clickable.<br>**false**: not clickable.<br>Default value: **true** |
+| b      | boolean | No  | Clickable status of the target component.<br>**true**: clickable.<br>**false**: not clickable.<br> Default value: **true**|
 
 **Return value**
 
@@ -270,7 +291,7 @@ Specifies the long-clickable status attribute of the target component.
 
 | Name| Type   | Mandatory| Description                                                        |
 | ------ | ------- | ---- | ------------------------------------------------------------ |
-| b      | boolean | No  | Long-clickable status of the target component.<br>**true**: long-clickable.<br>**false**: not long-clickable.<br>Default value: **true** |
+| b      | boolean | No  | Long-clickable status of the target component.<br>**true**: long-clickable.<br>**false**: not long-clickable.<br> Default value: **true**|
 
 **Return value**
 
@@ -297,7 +318,7 @@ Specifies the scrollable status attribute of the target component.
 
 | Name| Type   | Mandatory| Description                                                       |
 | ------ | ------- | ---- | ----------------------------------------------------------- |
-| b      | boolean | No  | Scrollable status of the target component.<br>**true**: scrollable.<br>**false**: not scrollable.<br>Default value: **true** |
+| b      | boolean | No  | Scrollable status of the target component.<br>**true**: scrollable.<br>**false**: not scrollable.<br> Default value: **true**|
 
 **Return value**
 
@@ -323,7 +344,7 @@ Specifies the enabled status attribute of the target component.
 
 | Name| Type   | Mandatory| Description                                                     |
 | ------ | ------- | ---- | --------------------------------------------------------- |
-| b      | boolean | No  | Enabled status of the target component.<br>**true**: enabled.<br>**false**: not enabled.<br>Default value: **true** |
+| b      | boolean | No  | Enabled status of the target component.<br>**true**: enabled.<br>**false**: not enabled.<br> Default value: **true**|
 
 **Return value**
 
@@ -349,7 +370,7 @@ Specifies the focused status attribute of the target component.
 
 | Name| Type   | Mandatory| Description                                                 |
 | ------ | ------- | ---- | ----------------------------------------------------- |
-| b      | boolean | No  | Focused status of the target component.<br>**true**: focused.<br>**false**: not focused.<br>Default value: **true** |
+| b      | boolean | No  | Focused status of the target component.<br>**true**: focused.<br>**false**: not focused.<br> Default value: **true**|
 
 **Return value**
 
@@ -375,7 +396,7 @@ Specifies the selected status attribute of the target component.
 
 | Name| Type   | Mandatory| Description                                                        |
 | ------ | ------- | ---- | ------------------------------------------------------------ |
-| b      | boolean | No  | Selected status of the target component.<br>**true**: selected.<br>**false**: not selected.<br>Default value: **true** |
+| b      | boolean | No  | Selected status of the target component.<br>**true**: selected.<br>**false**: not selected.<br> Default value: **true**|
 
 **Return value**
 
@@ -401,7 +422,7 @@ Specifies the checked status attribute of the target component.
 
 | Name| Type   | Mandatory| Description                                                        |
 | ------ | ------- | ---- | ------------------------------------------------------------ |
-| b      | boolean | No  | Checked status of the target component.<br>**true**: checked.<br>**false**: not checked.<br>Default value: **false** |
+| b      | boolean | No  | Checked status of the target component.<br>**true**: checked.<br>**false**: not checked.<br> Default value: **false**|
 
 **Return value**
 
@@ -427,7 +448,7 @@ Specifies the checkable status attribute of the target component.
 
 | Name| Type   | Mandatory| Description                                                        |
 | ------ | ------- | ---- | ------------------------------------------------------------ |
-| b      | boolean | No  | Checkable status of the target component.<br>**true**: checkable.<br>**false**: not checkable.<br>Default value: **false** |
+| b      | boolean | No  | Checkable status of the target component.<br>**true**: checkable.<br>**false**: not checkable.<br> Default value: **false**|
 
 **Return value**
 
@@ -523,7 +544,7 @@ let on = ON.within(ON.type('List')); // Create an On object using the static con
 
 inWindow(bundleName: string): On;
 
-Specifies that the target component is within the given application window.
+Specifies that the target component is located within the given application window.
 
 **System capability**: SystemCapability.Test.UiTest
 
@@ -542,12 +563,13 @@ Specifies that the target component is within the given application window.
 **Example**
 
 ```js
-let on = ON.inWindow('com.uitestScene.acts'); // Create an On object using the static constructor ON, specifying that the target component is within the given application window.
+let on = ON.inWindow('com.uitestScene.acts'); // Create an On object using the static constructor ON, specifying that the target component is located within the given application window.
 ```
 
 ## Component<sup>9+</sup>
 
-In **UiTest** of API version 9, the **Component** class represents a component on the UI and provides APIs for obtaining component attributes, clicking a component, scrolling to search for a component, and text injection.
+Represents a component on the UI and provides APIs for obtaining component attributes, clicking a component, scrolling to search for a component, and text injection.
+
 All APIs provided in this class use a promise to return the result and must be invoked using **await**.
 
 ### click<sup>9+</sup>
@@ -564,8 +586,8 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                                |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
-| 17000004 | Component lost/UiWindow lost.            |
+| 17000002 | if the async function was not called with await. |
+| 17000004 | if the component is invisible or destroyed.           |
 
 **Example**
 
@@ -591,8 +613,8 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                                |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
-| 17000004 | Component lost/UiWindow lost.            |
+| 17000002 | if the async function was not called with await. |
+| 17000004 | if the component is invisible or destroyed.           |
 
 **Example**
 
@@ -618,8 +640,8 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                                |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
-| 17000004 | Component lost/UiWindow lost.            |
+| 17000002 | if the async function was not called with await. |
+| 17000004 | if the component is invisible or destroyed.           |
 
 **Example**
 
@@ -651,8 +673,8 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                                |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
-| 17000004 | Component lost/UiWindow lost.            |
+| 17000002 | if the async function was not called with await. |
+| 17000004 | if the component is invisible or destroyed.           |
 
 **Example**
 
@@ -684,8 +706,8 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
-| 17000004 | Component lost/UiWindow lost.            |
+| 17000002 | if the async function was not called with await. |
+| 17000004 | if the component is invisible or destroyed.           |
 
 **Example**
 
@@ -717,8 +739,8 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
-| 17000004 | Component lost/UiWindow lost.            |
+| 17000002 | if the async function was not called with await. |
+| 17000004 | if the component is invisible or destroyed.           |
 
 **Example**
 
@@ -750,8 +772,8 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
-| 17000004 | Component lost/UiWindow lost.            |
+| 17000002 | if the async function was not called with await. |
+| 17000004 | if the component is invisible or destroyed.           |
 
 **Example**
 
@@ -783,8 +805,8 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
-| 17000004 | Component lost/UiWindow lost.            |
+| 17000002 | if the async function was not called with await. |
+| 17000004 | if the component is invisible or destroyed.           |
 
 **Example**
 
@@ -816,8 +838,8 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
-| 17000004 | Component lost/UiWindow lost.            |
+| 17000002 | if the async function was not called with await. |
+| 17000004 | if the component is invisible or destroyed.           |
 
 **Example**
 
@@ -853,8 +875,8 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
-| 17000004 | Component lost/UiWindow lost.            |
+| 17000002 | if the async function was not called with await. |
+| 17000004 | if the component is invisible or destroyed.           |
 
 **Example**
 
@@ -890,8 +912,8 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
-| 17000004 | Component lost/UiWindow lost.            |
+| 17000002 | if the async function was not called with await. |
+| 17000004 | if the component is invisible or destroyed.           |
 
 **Example**
 
@@ -899,7 +921,7 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 async function demo() {
     let driver = Driver.create();
     let checkBox = await driver.findComponent(ON.type('Checkbox'));
-    if(await checkBox.isChecked) {
+    if(await checkBox.isChecked()) {
         console.info('This checkBox is checked');
     } else {
         console.info('This checkBox is not checked');
@@ -927,8 +949,8 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                                |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
-| 17000004 | Component lost/UiWindow lost.            |
+| 17000002 | if the async function was not called with await. |
+| 17000004 | if the component is invisible or destroyed.           |
 
 **Example**
 
@@ -936,7 +958,7 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 async function demo() {
     let driver = Driver.create();
     let checkBox = await driver.findComponent(ON.type('Checkbox'));
-    if(await checkBox.isCheckable) {
+    if(await checkBox.isCheckable()) {
         console.info('This checkBox is checkable');
     } else {
         console.info('This checkBox is not checkable');
@@ -964,8 +986,8 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
-| 17000004 | Component lost/UiWindow lost.            |
+| 17000002 | if the async function was not called with await. |
+| 17000004 | if the component is invisible or destroyed.           |
 
 **Example**
 
@@ -1002,8 +1024,8 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
-| 17000004 | Component lost/UiWindow lost.            |
+| 17000002 | if the async function was not called with await. |
+| 17000004 | if the component is invisible or destroyed.           |
 
 **Example**
 
@@ -1040,8 +1062,8 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
-| 17000004 | Component lost/UiWindow lost.            |
+| 17000002 | if the async function was not called with await. |
+| 17000004 | if the component is invisible or destroyed.           |
 
 **Example**
 
@@ -1077,8 +1099,8 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
-| 17000004 | Component lost/UiWindow lost.            |
+| 17000002 | if the async function was not called with await. |
+| 17000004 | if the component is invisible or destroyed.           |
 
 **Example**
 
@@ -1114,8 +1136,8 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
-| 17000004 | Component lost/UiWindow lost.            |
+| 17000002 | if the async function was not called with await. |
+| 17000004 | if the component is invisible or destroyed.           |
 
 **Example**
 
@@ -1139,8 +1161,8 @@ Clears text in this component. This API is applicable to text boxes.
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
-| 17000004 | Component lost/UiWindow lost.            |
+| 17000002 | if the async function was not called with await. |
+| 17000004 | if the component is invisible or destroyed.           |
 
 **Example**
 
@@ -1178,8 +1200,8 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
-| 17000004 | Component lost/UiWindow lost.            |
+| 17000002 | if the async function was not called with await. |
+| 17000004 | if the component is invisible or destroyed.           |
 
 **Example**
 
@@ -1211,8 +1233,8 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
-| 17000004 | Component lost/UiWindow lost.            |
+| 17000002 | if the async function was not called with await. |
+| 17000004 | if the component is invisible or destroyed.           |
 
 **Example**
 
@@ -1244,8 +1266,8 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
-| 17000004 | Component lost/UiWindow lost.            |
+| 17000002 | if the async function was not called with await. |
+| 17000004 | if the component is invisible or destroyed.           |
 
 **Example**
 
@@ -1277,8 +1299,8 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
-| 17000004 | Component lost/UiWindow lost.            |
+| 17000002 | if the async function was not called with await. |
+| 17000004 | if the component is invisible or destroyed.           |
 
 **Example**
 
@@ -1311,8 +1333,8 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
-| 17000004 | Component lost/UiWindow lost.            |
+| 17000002 | if the async function was not called with await. |
+| 17000004 | if the component is invisible or destroyed.           |
 
 **Example**
 
@@ -1344,8 +1366,8 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
-| 17000004 | Component lost/UiWindow lost.            |
+| 17000002 | if the async function was not called with await. |
+| 17000004 | if the component is invisible or destroyed.           |
 
 **Example**
 
@@ -1360,6 +1382,7 @@ async function demo() {
 ## Driver<sup>9+</sup>
 
 The **Driver** class is the main entry to the UiTest framework. It provides APIs for features such as component matching/search, key injection, coordinate clicking/sliding, and screenshot.
+
 All APIs provided by this class, except for **Driver.create()**, use a promise to return the result and must be invoked using **await**.
 
 ### create<sup>9+</sup>
@@ -1382,7 +1405,7 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message          |
 | -------- | ------------------ |
-| 17000001 | Initialize failed. |
+| 17000001 | if the test framework failed to initialize. |
 
 **Example**
 
@@ -1412,7 +1435,7 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
+| 17000002 | if the async function was not called with await. |
 
 **Example**
 
@@ -1449,7 +1472,7 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
+| 17000002 | if the async function was not called with await. |
 
 **Example**
 
@@ -1486,7 +1509,7 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
+| 17000002 | if the async function was not called with await. |
 
 **Example**
 
@@ -1523,7 +1546,7 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
+| 17000002 | if the async function was not called with await. |
 
 **Example**
 
@@ -1561,7 +1584,7 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
+| 17000002 | if the async function was not called with await. |
 
 **Example**
 
@@ -1592,8 +1615,8 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
-| 17000003 | Component existence assertion failed.    |
+| 17000002 | if the async function was not called with await. |
+| 17000003 | if the assertion failed.    |
 
 **Example**
 
@@ -1618,7 +1641,7 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
+| 17000002 | if the async function was not called with await. |
 
 **Example**
 
@@ -1649,7 +1672,7 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
+| 17000002 | if the async function was not called with await. |
 
 **Example**
 
@@ -1682,7 +1705,7 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
+| 17000002 | if the async function was not called with await. |
 
 **Example**
 
@@ -1715,7 +1738,7 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
+| 17000002 | if the async function was not called with await. |
 
 **Example**
 
@@ -1747,7 +1770,7 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
+| 17000002 | if the async function was not called with await. |
 
 **Example**
 
@@ -1779,7 +1802,7 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
+| 17000002 | if the async function was not called with await. |
 
 **Example**
 
@@ -1814,7 +1837,7 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
+| 17000002 | if the async function was not called with await. |
 
 **Example**
 
@@ -1849,7 +1872,7 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
+| 17000002 | if the async function was not called with await. |
 
 **Example**
 
@@ -1886,7 +1909,7 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
+| 17000002 | if the async function was not called with await. |
 
 **Example**
 
@@ -1917,7 +1940,7 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
+| 17000002 | if the async function was not called with await. |
 
 **Example**
 
@@ -1948,7 +1971,7 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
+| 17000002 | if the async function was not called with await. |
 
 **Example**
 
@@ -1979,7 +2002,7 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
+| 17000002 | if the async function was not called with await. |
 
 **Example**
 
@@ -2010,7 +2033,7 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
+| 17000002 | if the async function was not called with await. |
 
 **Example**
 
@@ -2041,7 +2064,7 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
+| 17000002 | if the async function was not called with await. |
 
 **Example**
 
@@ -2066,7 +2089,7 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
+| 17000002 | if the async function was not called with await. |
 
 **Example**
 
@@ -2091,7 +2114,7 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
+| 17000002 | if the async function was not called with await. |
 
 **Example**
 
@@ -2129,7 +2152,7 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
+| 17000002 | if the async function was not called with await. |
 
 **Example**
 
@@ -2163,7 +2186,7 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
+| 17000002 | if the async function was not called with await. |
 
 **Example**
 
@@ -2201,7 +2224,7 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
+| 17000002 | if the async function was not called with await. |
 
 **Example**
 
@@ -2221,7 +2244,7 @@ async function demo() {
 
 ### fling<sup>10+</sup>
 
-fling(direction: UiDirection, speed: number): Promise<void>;
+fling(direction: UiDirection, speed: number): Promise\<void>;
 
 Simulates a fling operation on the screen, in the specified direction and speed.
 
@@ -2240,7 +2263,7 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                                |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
+| 17000002 | if the async function was not called with await. |
 
 **Example**
 
@@ -2253,7 +2276,7 @@ async function demo() {
 
 ### screenCapture<sup>10+</sup>
 
-screenCapture(savePath: string, rect?: Rect): Promise<boolean>;
+screenCapture(savePath: string, rect?: Rect): Promise\<boolean>;
 
 Captures the specified area of the current screen and saves the captured screenshot as a PNG image to the specified path.
 
@@ -2278,7 +2301,7 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                                |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
+| 17000002 | if the async function was not called with await. |
 
 **Example**
 
@@ -2291,7 +2314,7 @@ async function demo() {
 
 ### mouseClick<sup>10+</sup>
 
-mouseClick(p: Point, btnId: MouseButton, key1?: number, key2?: number): Promise<void>;
+mouseClick(p: Point, btnId: MouseButton, key1?: number, key2?: number): Promise\<void>;
 
 Injects a mouse click at the specified coordinates, with the optional key or key combination. For example, if the value of **key1** is **2072**, the **Ctrl** button is pressed with the mouse click.
 
@@ -2302,8 +2325,8 @@ Injects a mouse click at the specified coordinates, with the optional key or key
 | Name| Type                         | Mandatory| Description               |
 | ------ | ----------------------------- | ---- | ------------------- |
 | p      | [Point](#point9)              | Yes  | Coordinates of the mouse click.   |
-| btnId  | [MouseButton](#mousebutton10) | Yes  | Mouse button pressesd.   |
-| key1   | number                        | Yes  | The first key value.|
+| btnId  | [MouseButton](#mousebutton10) | Yes  | Mouse button pressed.   |
+| key1   | number                        | No  | The first key value.|
 | key2   | number                        | No  | The second key value.|
 
 **Error codes**
@@ -2312,7 +2335,7 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                                |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
+| 17000002 | if the async function was not called with await. |
 
 **Example**
 
@@ -2325,7 +2348,7 @@ async function demo() {
 
 ### mouseScroll<sup>10+</sup>
 
-mouseScroll(p: Point, down: boolean, d: number, key1?: number, key2?: number): Promise<void>;
+mouseScroll(p: Point, down: boolean, d: number, key1?: number, key2?: number): Promise\<void>;
 
 Injects a mouse scroll action at the specified coordinates, with the optional key or key combination. For example, if the value of **key1** is **2072**, the **Ctrl** button is pressed with mouse scrolling.
 
@@ -2338,7 +2361,7 @@ Injects a mouse scroll action at the specified coordinates, with the optional ke
 | p      | [Point](#point9) | Yes  | Coordinates of the mouse click.                                   |
 | down   | boolean          | Yes  | Whether the scroll wheel slides downward.                             |
 | d      | number           | Yes  | Number of grids by which the scroll wheel slides. Sliding by one grid means a 120-pixel offset of the target point.|
-| key1   | number           | Yes  | The first key value.                                |
+| key1   | number           | No  | The first key value.                                |
 | key2   | number           | No  | The second key value.                                |
 
 **Error codes**
@@ -2347,7 +2370,7 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                                |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
+| 17000002 | if the async function was not called with await. |
 
 **Example**
 
@@ -2360,7 +2383,7 @@ async function demo() {
 
 ### mouseMoveTo<sup>10+</sup>
 
-mouseMoveTo(p: Point): Promise<void>;
+mouseMoveTo(p: Point): Promise\<void>;
 
 Moves the cursor to the target point.
 
@@ -2378,7 +2401,7 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                                |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
+| 17000002 | if the async function was not called with await. |
 
 **Example**
 
@@ -2389,6 +2412,37 @@ async function demo() {
 }
 ```
 
+### createUIEventObserver<sup>10+</sup>
+
+createUIEventObserver(): UIEventObserver;
+
+Creates a UI event listener.
+
+**System capability**: SystemCapability.Test.UiTest
+
+**Return value**
+
+| Type                                           | Description                                 |
+| ----------------------------------------------- | ------------------------------------- |
+| Promise\<[UIEventObserver](#uieventobserver10)> | Promise used to return the target window.|
+
+**Error codes**
+
+For details about the error codes, see [UiTest Error Codes](../errorcodes/errorcode-uitest.md).
+
+| ID| Error Message                                |
+| -------- | ---------------------------------------- |
+| 17000002 | if the async function was not called with await. |
+
+**Example**
+
+```js
+async function demo() {
+    let driver = Driver.create();
+    let obeserver = await driver.createUiEventObserve();
+}
+```
+
 ## PointerMatrix<sup>9+</sup>
 
 Implements a **PointerMatrix** object that stores coordinates and behaviors of each action of each finger in a multi-touch operation.
@@ -2455,6 +2509,7 @@ async function demo() {
 ## UiWindow<sup>9+</sup>
 
 The **UiWindow** class represents a window on the UI and provides APIs for obtaining window attributes, dragging a window, and adjusting the window size.
+
 All APIs provided in this class use a promise to return the result and must be invoked using **await**.
 
 ### getBundleName<sup>9+</sup>
@@ -2477,8 +2532,8 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
-| 17000004 | Component lost/UiWindow lost.            |
+| 17000002 | if the async function was not called with await. |
+| 17000004 | if the window is invisible or destroyed.           |
 
 **Example**
 
@@ -2510,8 +2565,8 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
-| 17000004 | Component lost/UiWindow lost.            |
+| 17000002 | if the async function was not called with await. |
+| 17000004 | if the window is invisible or destroyed.           |
 
 **Example**
 
@@ -2543,8 +2598,8 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
-| 17000004 | Component lost/UiWindow lost.            |
+| 17000002 | if the async function was not called with await. |
+| 17000004 | if the window is invisible or destroyed.           |
 
 **Example**
 
@@ -2576,8 +2631,8 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
-| 17000004 | Component lost/UiWindow lost.            |
+| 17000002 | if the async function was not called with await. |
+| 17000004 | if the window is invisible or destroyed.          |
 
 **Example**
 
@@ -2609,8 +2664,8 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
-| 17000004 | Component lost/UiWindow lost.            |
+| 17000002 | if the async function was not called with await. |
+| 17000004 | if the window is invisible or destroyed.           |
 
 **Example**
 
@@ -2642,8 +2697,8 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
-| 17000004 | Component lost/UiWindow lost.            |
+| 17000002 | if the async function was not called with await. |
+| 17000004 | if the window is invisible or destroyed.           |
 
 **Example**
 
@@ -2669,8 +2724,8 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
-| 17000004 | Component lost/UiWindow lost.            |
+| 17000002 | if the async function was not called with await. |
+| 17000004 | if the window is invisible or destroyed.           |
 
 **Example**
 
@@ -2703,9 +2758,9 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
-| 17000004 | Component lost/UiWindow lost.            |
-| 17000005 | This operation is not supported.         |
+| 17000002 | if the async function was not called with await. |
+| 17000004 | if the window is invisible or destroyed.           |
+| 17000005 | if the action is not supported on this window.         |
 
 **Example**
 
@@ -2739,9 +2794,9 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
-| 17000004 | Component lost/UiWindow lost.            |
-| 17000005 | This operation is not supported.         |
+| 17000002 | if the async function was not called with await. |
+| 17000004 | if the window is invisible or destroyed.           |
+| 17000005 | if the action is not supported on this window.         |
 
 **Example**
 
@@ -2767,9 +2822,9 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                                |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
-| 17000004 | Component lost/UiWindow lost.            |
-| 17000005 | This operation is not supported.         |
+| 17000002 | if the async function was not called with await. |
+| 17000004 | if the window is invisible or destroyed.         |
+| 17000005 | if the action is not supported on this window.         |
 
 **Example**
 
@@ -2795,9 +2850,9 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
-| 17000004 | Component lost/UiWindow lost.            |
-| 17000005 | This operation is not supported.         |
+| 17000002 | if the async function was not called with await. |
+| 17000004 | if the window is invisible or destroyed.           |
+| 17000005 | if the action is not supported on this window.         |
 
 **Example**
 
@@ -2823,9 +2878,9 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
-| 17000004 | Component lost/UiWindow lost.            |
-| 17000005 | This operation is not supported.         |
+| 17000002 | if the async function was not called with await. |
+| 17000004 | if the window is invisible or destroyed.          |
+| 17000005 | if the action is not supported on this window.         |
 
 **Example**
 
@@ -2851,9 +2906,9 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
-| 17000004 | Component lost/UiWindow lost.            |
-| 17000005 | This operation is not supported.         |
+| 17000002 | if the async function was not called with await. |
+| 17000004 | if the window is invisible or destroyed.          |
+| 17000005 | if the action is not supported on this window.         |
 
 **Example**
 
@@ -2879,9 +2934,9 @@ For details about the error codes, see [UiTest Error Codes](../errorcodes/errorc
 
 | ID| Error Message                              |
 | -------- | ---------------------------------------- |
-| 17000002 | API does not allow calling concurrently. |
-| 17000004 | Component lost/UiWindow lost.            |
-| 17000005 | This operation is not supported.         |
+| 17000002 | if the async function was not called with await. |
+| 17000004 | if the window is invisible or destroyed.           |
+| 17000005 | if the action is not supported on this window.         |
 
 **Example**
 
@@ -2893,10 +2948,78 @@ async function demo() {
 }
 ```
 
+## UIEventObserver<sup>10+</sup>
+
+UI event listener.
+
+### once('toastShow')
+
+once(type: 'toastShow', callback: Callback\<UIElementInfo>):void;
+
+Subscribes to events of the toast component. This API uses a callback to return the result.
+
+**System capability**: SystemCapability.Test.UiTest
+
+**Parameters**
+
+| Name  | Type                                        | Mandatory| Description                             |
+| -------- | -------------------------------------------- | ---- | --------------------------------- |
+| type     | string                                       | Yes  | Event type. The value is fixed at **'toastShow'**.|
+| callback | Callback\<[UIElementInfo](#uielementinfo10)> | Yes  | Callback used to return the result.         |
+
+**Example**
+
+```js
+async function demo() {
+    let observer = await driver.createUIEventObserver()
+    let  callback = (UIElementInfo)=>{
+        console.info(UIElementInfo.bundleName)
+        console.info(UIElementInfo.text)
+        console.info(UIElementInfo.type)
+     }
+    observer.once('toastShow', callback)
+}
+```
+
+### once('dialogShow')
+
+once(type: 'dialogShow', callback: Callback\<UIElementInfo>): void;
+
+Subscribes to events of the dialog component. This API uses a callback to return the result.
+
+**System capability**: SystemCapability.Test.UiTest
+
+**Parameters**
+
+| Name  | Type                                        | Mandatory| Description                              |
+| -------- | -------------------------------------------- | ---- | ---------------------------------- |
+| type     | string                                       | Yes  | Event type. The value is fixed at **'dialogShow'**.|
+| callback | Callback\<[UIElementInfo](#uielementinfo10)> | Yes  | Callback used to return the result.          |
+
+**Example**
+
+```js
+async function demo() {
+    let observer = await driver.createUIEventObserver()
+    let  callback = (UIElementInfo)=>{
+        console.info(UIElementInfo.bundleName)
+        console.info(UIElementInfo.text)
+        console.info(UIElementInfo.type)
+     }
+    observer.once('dialogShow', callback)
+}
+```
+
 ## By<sup>(deprecated)</sup>
 
 The UiTest framework provides a wide range of UI component feature description APIs in the **By** class to filter and match components.
-The API capabilities provided by the **By** class exhibit the following features: <br>1. Allow one or more attributes as the match conditions. For example, you can specify both the **text** and **id** attributes to find the target component. <br>2. Provide multiple match patterns for component attributes. <br>3. Support absolute positioning and relative positioning for components. APIs such as [By.isBefore<sup>(deprecated)</sup>](#isbeforedeprecated) and [By.isAfter<sup>(deprecated)</sup>](#isafterdeprecated) can be used to specify the features of adjacent components to assist positioning. <br>All APIs provided in the **By** class are synchronous. You are advised to use the static constructor **BY** to create a **By** object in chain mode.
+The API capabilities provided by the **By** class exhibit the following features: 
+
+- Allow one or more attributes as the match conditions. For example, you can specify both the **text** and **id** attributes to find the target component. 
+- Provide multiple match patterns for component attributes.
+- Support absolute positioning and relative positioning for components. APIs such as [By.isBefore<sup>(deprecated)</sup>](#isbeforedeprecated) and [By.isAfter<sup>(deprecated)</sup>](#isafterdeprecated) can be used to specify the features of adjacent components to assist positioning.
+
+All APIs provided in the **By** class are synchronous. You are advised to use the static constructor **BY** to create a **By** object in chain mode.
 
 This API is deprecated since API version 9. You are advised to use [On<sup>9+</sup>](#on9) instead.
 
@@ -2910,7 +3033,7 @@ text(txt: string, pattern?: MatchPattern): By
 
 Specifies the text attribute of the target component. Multiple match patterns are supported.
 
-This API is deprecated since API version 9. You are advised to use [text<sup>9+</sup>](#text9).
+This API is deprecated since API version 9. You are advised to use [text<sup>9+</sup>](#text9) instead.
 
 **System capability**: SystemCapability.Test.UiTest
 
@@ -2940,7 +3063,7 @@ key(key: string): By
 
 Specifies the key attribute of the target component.
 
-This API is deprecated since API version 9. You are advised to use [id<sup>9+</sup>](#id9).
+This API is deprecated since API version 9. You are advised to use [id<sup>9+</sup>](#id9) instead.
 
 **System capability**: SystemCapability.Test.UiTest
 
@@ -2998,7 +3121,7 @@ type(tp: string): By
 
 Specifies the type attribute of the target component.
 
-This API is deprecated since API version 9. You are advised to use [type<sup>9+</sup>](#type9).
+This API is deprecated since API version 9. You are advised to use [type<sup>9+</sup>](#type9) instead.
 
 **System capability**: SystemCapability.Test.UiTest
 
@@ -3027,7 +3150,7 @@ clickable(b?: boolean): By
 
 Specifies the clickable status attribute of the target component.
 
-This API is deprecated since API version 9. You are advised to use [clickable<sup>9+</sup>](#clickable9).
+This API is deprecated since API version 9. You are advised to use [clickable<sup>9+</sup>](#clickable9) instead.
 
 **System capability**: SystemCapability.Test.UiTest
 
@@ -3035,7 +3158,7 @@ This API is deprecated since API version 9. You are advised to use [clickable<su
 
 | Name| Type   | Mandatory| Description                                                        |
 | ------ | ------- | ---- | ------------------------------------------------------------ |
-| b      | boolean | No  | Clickable status of the target component.<br>**true**: clickable.<br>**false**: not clickable.<br>Default value: **true** |
+| b      | boolean | No  | Clickable status of the target component.<br>**true**: clickable.<br>**false**: not clickable.<br> Default value: **true**|
 
 **Return value**
 
@@ -3056,7 +3179,7 @@ scrollable(b?: boolean): By
 
 Specifies the scrollable status attribute of the target component.
 
-This API is deprecated since API version 9. You are advised to use [scrollable<sup>9+</sup>](#scrollable9).
+This API is deprecated since API version 9. You are advised to use [scrollable<sup>9+</sup>](#scrollable9) instead.
 
 **System capability**: SystemCapability.Test.UiTest
 
@@ -3064,7 +3187,7 @@ This API is deprecated since API version 9. You are advised to use [scrollable<s
 
 | Name| Type   | Mandatory| Description                                                       |
 | ------ | ------- | ---- | ----------------------------------------------------------- |
-| b      | boolean | No  | Scrollable status of the target component.<br>**true**: scrollable.<br>**false**: not scrollable.<br>Default value: **true** |
+| b      | boolean | No  | Scrollable status of the target component.<br>**true**: scrollable.<br>**false**: not scrollable.<br> Default value: **true**|
 
 **Return value**
 
@@ -3084,7 +3207,7 @@ enabled(b?: boolean): By
 
 Specifies the enabled status attribute of the target component.
 
-This API is deprecated since API version 9. You are advised to use [enabled<sup>9+</sup>](#enabled9).
+This API is deprecated since API version 9. You are advised to use [enabled<sup>9+</sup>](#enabled9) instead.
 
 **System capability**: SystemCapability.Test.UiTest
 
@@ -3092,7 +3215,7 @@ This API is deprecated since API version 9. You are advised to use [enabled<sup>
 
 | Name| Type   | Mandatory| Description                                                     |
 | ------ | ------- | ---- | --------------------------------------------------------- |
-| b      | boolean | No  | Enabled status of the target component.<br>**true**: enabled.<br>**false**: not enabled.<br>Default value: **true** |
+| b      | boolean | No  | Enabled status of the target component.<br>**true**: enabled.<br>**false**: not enabled.<br> Default value: **true**|
 
 **Return value**
 
@@ -3112,7 +3235,7 @@ focused(b?: boolean): By
 
 Specifies the focused status attribute of the target component.
 
-This API is deprecated since API version 9. You are advised to use [focused<sup>9+</sup>](#focused9).
+This API is deprecated since API version 9. You are advised to use [focused<sup>9+</sup>](#focused9) instead.
 
 **System capability**: SystemCapability.Test.UiTest
 
@@ -3120,7 +3243,7 @@ This API is deprecated since API version 9. You are advised to use [focused<sup>
 
 | Name| Type   | Mandatory| Description                                                 |
 | ------ | ------- | ---- | ----------------------------------------------------- |
-| b      | boolean | No  | Focused status of the target component.<br>**true**: focused.<br>**false**: not focused.<br>Default value: **true** |
+| b      | boolean | No  | Focused status of the target component.<br>**true**: focused.<br>**false**: not focused.<br> Default value: **true**|
 
 **Return value**
 
@@ -3140,7 +3263,7 @@ selected(b?: boolean): By
 
 Specifies the selected status of the target component.
 
-This API is deprecated since API version 9. You are advised to use [selected<sup>9+</sup>](#selected9).
+This API is deprecated since API version 9. You are advised to use [selected<sup>9+</sup>](#selected9) instead.
 
 **System capability**: SystemCapability.Test.UiTest
 
@@ -3148,7 +3271,7 @@ This API is deprecated since API version 9. You are advised to use [selected<sup
 
 | Name| Type   | Mandatory| Description                                                        |
 | ------ | ------- | ---- | ------------------------------------------------------------ |
-| b      | boolean | No  | Selected status of the target component.<br>**true**: selected.<br>**false**: not selected.<br>Default value: **true** |
+| b      | boolean | No  | Selected status of the target component.<br>**true**: selected.<br>**false**: not selected.<br> Default value: **true**|
 
 **Return value**
 
@@ -3168,7 +3291,7 @@ isBefore(by: By): By
 
 Specifies that the target component is located before the given attribute component.
 
-This API is deprecated since API version 9. You are advised to use [isBefore<sup>9+</sup>](#isbefore9).
+This API is deprecated since API version 9. You are advised to use [isBefore<sup>9+</sup>](#isbefore9) instead.
 
 **System capability**: SystemCapability.Test.UiTest
 
@@ -3194,9 +3317,9 @@ let by = BY.isBefore(BY.text('123')); // Use the static constructor BY to create
 
 isAfter(by: By): By
 
-Specifies the target component is located after the given attribute component.
+Specifies that the target component is located after the given attribute component.
 
-This API is deprecated since API version 9. You are advised to use [isAfter<sup>9+</sup>](#isafter9).
+This API is deprecated since API version 9. You are advised to use [isAfter<sup>9+</sup>](#isafter9) instead.
 
 **System capability**: SystemCapability.Test.UiTest
 
@@ -3221,6 +3344,7 @@ let by = BY.isAfter(BY.text('123')); // Use the static constructor BY to create
 ## UiComponent<sup>(deprecated)</sup>
 
 In **UiTest**, the **UiComponent** class represents a component on the UI and provides APIs for obtaining component attributes, clicking a component, scrolling to search for a component, and text injection.
+
 All APIs provided in this class use a promise to return the result and must be invoked using **await**.
 
 This API is deprecated since API version 9. You are advised to use [Component<sup>9+</sup>](#component9) instead.
@@ -3231,7 +3355,7 @@ click(): Promise\<void>
 
 Clicks this component.
 
-This API is deprecated since API version 9. You are advised to use [click<sup>9+</sup>](#click9).
+This API is deprecated since API version 9. You are advised to use [click<sup>9+</sup>](#click9) instead.
 
 **System capability**: SystemCapability.Test.UiTest
 
@@ -3251,7 +3375,7 @@ doubleClick(): Promise\<void>
 
 Double-clicks this component.
 
-This API is deprecated since API version 9. You are advised to use [doubleClick<sup>9+</sup>](#doubleclick9).
+This API is deprecated since API version 9. You are advised to use [doubleClick<sup>9+</sup>](#doubleclick9) instead.
 
 **System capability**: SystemCapability.Test.UiTest
 
@@ -3271,7 +3395,7 @@ longClick(): Promise\<void>
 
 Long-clicks this component.
 
-This API is deprecated since API version 9. You are advised to use [longClick<sup>9+</sup>](#longclick9).
+This API is deprecated since API version 9. You are advised to use [longClick<sup>9+</sup>](#longclick9) instead.
 
 **System capability**: SystemCapability.Test.UiTest
 
@@ -3317,7 +3441,7 @@ getKey(): Promise\<string>
 
 Obtains the key of this component.
 
-This API is deprecated since API version 9. You are advised to use [getId<sup>9+</sup>](#getid9).
+This API is deprecated since API version 9. You are advised to use [getId<sup>9+</sup>](#getid9) instead.
 
 **System capability**: SystemCapability.Test.UiTest
 
@@ -3343,7 +3467,7 @@ getText(): Promise\<string>
 
 Obtains the text information of this component.
 
-This API is deprecated since API version 9. You are advised to use [getText<sup>9+</sup>](#gettext9).
+This API is deprecated since API version 9. You are advised to use [getText<sup>9+</sup>](#gettext9) instead.
 
 **System capability**: SystemCapability.Test.UiTest
 
@@ -3369,7 +3493,7 @@ getType(): Promise\<string>
 
 Obtains the type of this component.
 
-This API is deprecated since API version 9. You are advised to use [getType<sup>9+</sup>](#gettype9).
+This API is deprecated since API version 9. You are advised to use [getType<sup>9+</sup>](#gettype9) instead.
 
 **System capability**: SystemCapability.Test.UiTest
 
@@ -3395,7 +3519,7 @@ isClickable(): Promise\<boolean>
 
 Obtains the clickable status of this component.
 
-This API is deprecated since API version 9. You are advised to use [isClickable<sup>9+</sup>](#isclickable9).
+This API is deprecated since API version 9. You are advised to use [isClickable<sup>9+</sup>](#isclickable9) instead.
 
 **System capability**: SystemCapability.Test.UiTest
 
@@ -3425,7 +3549,7 @@ isScrollable(): Promise\<boolean>
 
 Obtains the scrollable status of this component.
 
-This API is deprecated since API version 9. You are advised to use [isScrollable<sup>9+</sup>](#isscrollable9).
+This API is deprecated since API version 9. You are advised to use [isScrollable<sup>9+</sup>](#isscrollable9) instead.
 
 **System capability**: SystemCapability.Test.UiTest
 
@@ -3456,7 +3580,7 @@ isEnabled(): Promise\<boolean>
 
 Obtains the enabled status of this component.
 
-This API is deprecated since API version 9. You are advised to use [isEnabled<sup>9+</sup>](#isenabled9).
+This API is deprecated since API version 9. You are advised to use [isEnabled<sup>9+</sup>](#isenabled9) instead.
 
 **System capability**: SystemCapability.Test.UiTest
 
@@ -3487,7 +3611,7 @@ isFocused(): Promise\<boolean>
 
 Obtains the focused status of this component.
 
-This API is deprecated since API version 9. You are advised to use [isFocused<sup>9+</sup>](#isfocused9).
+This API is deprecated since API version 9. You are advised to use [isFocused<sup>9+</sup>](#isfocused9) instead.
 
 **System capability**: SystemCapability.Test.UiTest
 
@@ -3517,7 +3641,7 @@ isSelected(): Promise\<boolean>
 
 Obtains the selected status of this component.
 
-This API is deprecated since API version 9. You are advised to use [isSelected<sup>9+</sup>](#isselected9).
+This API is deprecated since API version 9. You are advised to use [isSelected<sup>9+</sup>](#isselected9) instead.
 
 **System capability**: SystemCapability.Test.UiTest
 
@@ -3547,7 +3671,7 @@ inputText(text: string): Promise\<void>
 
 Enters text into this component (available for text boxes).
 
-This API is deprecated since API version 9. You are advised to use [inputText<sup>9+</sup>](#inputtext9).
+This API is deprecated since API version 9. You are advised to use [inputText<sup>9+</sup>](#inputtext9) instead.
 
 **System capability**: SystemCapability.Test.UiTest
 
@@ -3573,7 +3697,7 @@ scrollSearch(by: By): Promise\<UiComponent>
 
 Scrolls on this component to search for the target component (applicable to components that support scrolling, such as **\<List>**).
 
-This API is deprecated since API version 9. You are advised to use [scrollSearch<sup>9+</sup>](#scrollsearch9).
+This API is deprecated since API version 9. You are advised to use [scrollSearch<sup>9+</sup>](#scrollsearch9) instead.
 
 **System capability**: SystemCapability.Test.UiTest
 
@@ -3602,6 +3726,7 @@ async function demo() {
 ## UiDriver<sup>(deprecated)</sup>
 
 The **UiDriver** class is the main entry to the UiTest framework. It provides APIs for features such as component matching/search, key injection, coordinate clicking/sliding, and screenshot.
+
 All APIs provided by this class, except for **UiDriver.create()**, use a promise to return the result and must be invoked using **await**.
 
 This API is deprecated since API version 9. You are advised to use [Driver<sup>9+</sup>](#driver9) instead.
@@ -3612,7 +3737,7 @@ static create(): UiDriver
 
 Creates a **UiDriver** object and returns the object created. This API is a static API.
 
-This API is deprecated since API version 9. You are advised to use [create<sup>9+</sup>](#create9).
+This API is deprecated since API version 9. You are advised to use [create<sup>9+</sup>](#create9) instead.
 
 **System capability**: SystemCapability.Test.UiTest
 
@@ -3636,7 +3761,7 @@ delayMs(duration: number): Promise\<void>
 
 Delays this **UiDriver** object within the specified duration.
 
-This API is deprecated since API version 9. You are advised to use [delayMs<sup>9+</sup>](#delayms9).
+This API is deprecated since API version 9. You are advised to use [delayMs<sup>9+</sup>](#delayms9) instead.
 
 **System capability**: SystemCapability.Test.UiTest
 
@@ -3661,7 +3786,7 @@ findComponent(by: By): Promise\<UiComponent>
 
 Searches this **UiDriver** object for the target component that matches the given attributes.
 
-This API is deprecated since API version 9. You are advised to use [findComponent<sup>9+</sup>](#findcomponent9).
+This API is deprecated since API version 9. You are advised to use [findComponent<sup>9+</sup>](#findcomponent9) instead.
 
 **System capability**: SystemCapability.Test.UiTest
 
@@ -3692,7 +3817,7 @@ findComponents(by: By): Promise\<Array\<UiComponent>>
 
 Searches this **UiDriver** object for all components that match the given attributes.
 
-This API is deprecated since API version 9. You are advised to use [findComponents<sup>9+</sup>](#findcomponents9).
+This API is deprecated since API version 9. You are advised to use [findComponents<sup>9+</sup>](#findcomponents9) instead.
 
 **System capability**: SystemCapability.Test.UiTest
 
@@ -3723,7 +3848,7 @@ assertComponentExist(by: By): Promise\<void>
 
 Asserts that a component that matches the given attributes exists on the current page. If the component does not exist, the API throws a JS exception, causing the current test case to fail.
 
-This API is deprecated since API version 9. You are advised to use [assertComponentExist<sup>9+</sup>](#assertcomponentexist9).
+This API is deprecated since API version 9. You are advised to use [assertComponentExist<sup>9+</sup>](#assertcomponentexist9) instead.
 
 **System capability**: SystemCapability.Test.UiTest
 
@@ -3748,7 +3873,7 @@ pressBack(): Promise\<void>
 
 Presses the Back button on this **UiDriver** object.
 
-This API is deprecated since API version 9. You are advised to use [pressBack<sup>9+</sup>](#pressback9).
+This API is deprecated since API version 9. You are advised to use [pressBack<sup>9+</sup>](#pressback9) instead.
 
 **System capability**: SystemCapability.Test.UiTest
 
@@ -3767,7 +3892,7 @@ triggerKey(keyCode: number): Promise\<void>
 
 Triggers the key of this **UiDriver** object that matches the given key code.
 
-This API is deprecated since API version 9. You are advised to use [triggerKey<sup>9+</sup>](#triggerkey9).
+This API is deprecated since API version 9. You are advised to use [triggerKey<sup>9+</sup>](#triggerkey9) instead.
 
 **System capability**: SystemCapability.Test.UiTest
 
@@ -3793,7 +3918,7 @@ click(x: number, y: number): Promise\<void>
 
 Clicks a specific point of this **UiDriver** object based on the given coordinates.
 
-This API is deprecated since API version 9. You are advised to use [click<sup>9+</sup>](#click9).
+This API is deprecated since API version 9. You are advised to use [click<sup>9+</sup>](#click9) instead.
 
 **System capability**: SystemCapability.Test.UiTest
 
@@ -3819,7 +3944,7 @@ doubleClick(x: number, y: number): Promise\<void>
 
 Double-clicks a specific point of this **UiDriver** object based on the given coordinates.
 
-This API is deprecated since API version 9. You are advised to use [doubleClick<sup>9+</sup>](#doubleclick9).
+This API is deprecated since API version 9. You are advised to use [doubleClick<sup>9+</sup>](#doubleclick9) instead.
 
 **System capability**: SystemCapability.Test.UiTest
 
@@ -3845,7 +3970,7 @@ longClick(x: number, y: number): Promise\<void>
 
 Long-clicks a specific point of this **UiDriver** object based on the given coordinates.
 
-This API is deprecated since API version 9. You are advised to use [longClick<sup>9+</sup>](#longclick9).
+This API is deprecated since API version 9. You are advised to use [longClick<sup>9+</sup>](#longclick9) instead.
 
 **System capability**: SystemCapability.Test.UiTest
 
@@ -3871,7 +3996,7 @@ swipe(startx: number, starty: number, endx: number, endy: number): Promise\<void
 
 Swipes on this **UiDriver** object from the start point to the end point based on the given coordinates.
 
-This API is deprecated since API version 9. You are advised to use [swipe<sup>9+</sup>](#swipe9).
+This API is deprecated since API version 9. You are advised to use [swipe<sup>9+</sup>](#swipe9) instead.
 
 **System capability**: SystemCapability.Test.UiTest
 
@@ -3899,7 +4024,7 @@ screenCap(savePath: string): Promise\<boolean>
 
 Captures the current screen of this **UiDriver** object and saves it as a PNG image to the given save path.
 
-This API is deprecated since API version 9. You are advised to use [screenCap<sup>9+</sup>](#screencap9).
+This API is deprecated since API version 9. You are advised to use [screenCap<sup>9+</sup>](#screencap9) instead.
 
 **System capability**: SystemCapability.Test.UiTest
 
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_full_screen_modal_alpha.gif b/en/application-dev/reference/arkui-ts/figures/en-us_full_screen_modal_alpha.gif
new file mode 100644
index 0000000000000000000000000000000000000000..54c74793ba762946b561e869b3352db7a116b3ce
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_full_screen_modal_alpha.gif differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_full_screen_modal_default.gif b/en/application-dev/reference/arkui-ts/figures/en-us_full_screen_modal_default.gif
new file mode 100644
index 0000000000000000000000000000000000000000..a2790b3cf613f7c525ba5b57d3c7b88ed41b1505
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_full_screen_modal_default.gif differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_full_screen_modal_none_1.gif b/en/application-dev/reference/arkui-ts/figures/en-us_full_screen_modal_none_1.gif
new file mode 100644
index 0000000000000000000000000000000000000000..88bc23b3df7443202ac67719d08f33e8b1006a42
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_full_screen_modal_none_1.gif differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_full_screen_modal_none_2.gif b/en/application-dev/reference/arkui-ts/figures/en-us_full_screen_modal_none_2.gif
new file mode 100644
index 0000000000000000000000000000000000000000..0a38281620329cb6a1c2f39ad9babe628950a41a
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_full_screen_modal_none_2.gif differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_sheet.gif b/en/application-dev/reference/arkui-ts/figures/en-us_sheet.gif
new file mode 100644
index 0000000000000000000000000000000000000000..192e22e3d28c4d56350c070fae5375d358a9abb7
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_sheet.gif differ
diff --git a/en/application-dev/reference/arkui-ts/ts-types.md b/en/application-dev/reference/arkui-ts/ts-types.md
index 4e1fc19f2d00bd889a0f7e787b7fcf9dc37addac..235c7c8d13303de0754eb1a346017f39ac45c3cc 100644
--- a/en/application-dev/reference/arkui-ts/ts-types.md
+++ b/en/application-dev/reference/arkui-ts/ts-types.md
@@ -22,7 +22,9 @@ You can use `$r` or `$rawfile` to create a **Resource** object, but its attribut
 
   **filename**: name of the file in the **resources/rawfile** directory of the project.
 
-  **NOTE**<br>When referencing resources of the **Resource** type, make sure the data type is the same as that of the attribute method. For example, if an attribute method supports the **string | Resource** types, the data type of the **Resource** type must be string.
+  > **NOTE**
+  >
+  > When referencing resources of the **Resource** type, make sure the data type is the same as that of the attribute method. For example, if an attribute method supports the **string | Resource** types, the data type of the **Resource** type must be string.
 
 ## Length
 
@@ -230,7 +232,7 @@ The **CustomBuilder** type is used to define custom UI descriptions in component
 
 ## PixelStretchEffectOptions<sup>10+</sup>
 
-Describes the pixel stretch effect options.
+The **PixelStretchEffectOptions** type is used to describe the pixel stretch effect options.
 
 | Name    | Type               | Mandatory  | Description            |
 | ------ | ----------------- | ---- | -------------- |
@@ -245,6 +247,67 @@ The **ModalTransition** type is used to set the transition type for a full-scree
 
 | Name     | Description          |
 | ------- | ------------ |
-| None    | No transition animation for the full-screen modal.  |
-| Default | Slide-up and slide-down animation for the full-screen modal. |
-| Alpha   | Opacity animation for the full-screen modal.|
+| NONE    | No transition animation for the modal.  |
+| DEFAULT | Slide-up and slide-down animation for the modal. |
+| ALPHA   | Opacity gradient animation for the modal. |
+
+## Dimension<sup>10+</sup>
+
+The **Length** type is used to represent a size unit.
+
+| Type                   | Description                                    |
+| --------------------- | -------------------------------------- |
+| [PX](#px10)               | Physical pixel unit type. The unit px must be included, for example, **'10px'**.|
+| [VP](#vp10)                | Pixel unit type specific to the screen density. The unit vp must be included, for example, **'10vp'**.|
+| [FP](#fp10)                | Font pixel unit type. The unit fp must be included, for example, **'10fp'**.|
+| [LPX](#lpx10)              | Logical pixel unit type. The unit lpx must be included, for example, **'10lpx'**.|
+| [Percentage](#percentage10)        | Percentage type. The unit % must be included, for example, **'10%'**.|
+| [Resource](#resource) | Size referenced from system or application resources.|
+
+## PX<sup>10+</sup>
+
+The **PX** type is used to represent a length in px.
+
+| Type                   | Description                                    |
+| --------------------- | -------------------------------------- |
+| {number}px               | Physical pixel unit type. The unit px must be included, for example, **'10px'**.|
+
+## VP<sup>10+</sup>
+
+The **VP** type is used to represent a length in vp.
+
+| Type                   | Description                                    |
+| --------------------- | -------------------------------------- |
+| {number}vp               | Pixel unit type specific to the screen density. The unit vp must be included, for example, **'10vp'**.|
+
+## FP<sup>10+</sup>
+
+The **FP** type is used to represent a length in fp.
+
+| Type                   | Description                                    |
+| --------------------- | -------------------------------------- |
+| {number}fp               | Font pixel unit type. The unit fp must be included, for example, **'10fp'**.|
+
+## LPX<sup>10+</sup>
+
+The **LPX** type is used to represent a length in lpx.
+
+| Type                   | Description                                    |
+| --------------------- | -------------------------------------- |
+| {number}lpx               | Logical pixel unit type. The unit lpx must be included, for example, **'10lpx'**.|
+
+## Percentage<sup>10+</sup>
+
+The **Percentage** type is used to represent a length in percentage.
+
+| Type                   | Description                                    |
+| --------------------- | -------------------------------------- |
+| {number}%               | Percentage type. The unit % must be included, for example, **'10%'**.|
+
+## Degree<sup>10+</sup>
+
+The **Degree** type is used to represent a length in deg.
+
+| Type                   | Description                                    |
+| --------------------- | -------------------------------------- |
+| {number}deg               | Degree type. The unit deg must be included, for example, **'10deg'**.|
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-background.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-background.md
index 4cc26a594e13004d77784cfbb2d5f0ed24f8976b..8d3208442cc40edfd53d623a125c03d979b0af80 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-background.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-background.md
@@ -1,6 +1,6 @@
 # Background
 
-You can set the background of a component.
+You can set the background for a component.
 
 >  **NOTE**
 >
@@ -11,12 +11,22 @@ You can set the background of a component.
 | Name| Type| Description|
 | -------- | -------- | -------- |
 | backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the component.<br>Since API version 9, this API is supported in ArkTS widgets.|
-| backgroundImage | src: [ResourceStr](ts-types.md#resourcestr),<br>repeat?: [ImageRepeat](ts-appendix-enums.md#imagerepeat) | **src**: image address, which can be the address of an Internet or a local image or a Base64 encoded image. SVG images are not supported.<br>**repeat**: whether the background image is repeatedly used. By default, the background image is not repeatedly used. If the set image has a transparent background and **backgroundColor** is set, the image is overlaid on the background color.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| backgroundImage | src: [ResourceStr](ts-types.md#resourcestr),<br>repeat?: [ImageRepeat](ts-appendix-enums.md#imagerepeat) | **src**: image address, which can be the address of an Internet or a local image or a Base64 encoded image. SVG images are not supported.<br>**repeat**: whether the background image is repeated. By default, the background image is not repeated. If the set image has a transparent background and **backgroundColor** is set, the image is overlaid on the background color.<br>Since API version 9, this API is supported in ArkTS widgets.|
 | backgroundImageSize | {<br>width?: [Length](ts-types.md#length),<br>height?: [Length](ts-types.md#length)<br>} \| [ImageSize](ts-appendix-enums.md#imagesize) | Width and height of the background image. If the input is a **{width: Length, height: Length}** object and only one attribute is set, the other attribute is the set value multiplied by the original aspect ratio of the image. By default, the original image aspect ratio remains unchanged.<br>The value range of **width** and **height** is [0, +∞).<br>Default value: **ImageSize.Auto**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>A value less than 0 evaluates to the value **0**. If **height** is set but **width** is not, the image width is adjusted based on the original aspect ratio of the image.|
 | backgroundImagePosition | [Position](ts-types.md#position8) \| [Alignment](ts-appendix-enums.md#alignment) | Position of the background image in the component, that is, the coordinates relative to the upper left corner of the component.<br>Default value:<br>{<br>x: 0,<br>y: 0<br>} <br> When **x** and **y** are set in percentage, the offset is calculated based on the width and height of the component.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| backgroundBlurStyle<sup>9+</sup> | value:[BlurStyle](ts-appendix-enums.md#blurstyle9),<br>options<sup>10+</sup>?:[BackgroundBlurStyleOptions](#backgroundblurstyleoptions10) | Background blur style applied between the content and the background.<br>**value**: settings of the background blur style, including the blur radius, mask color, mask opacity, and saturation.<br>**options**: background blur options. Optional.<br>This API is supported in ArkTS widgets.|
+
+## BackgroundBlurStyleOptions<sup>10+</sup>
+
+| Name                       | Type                                               | Mandatory| Description                                                        |
+| --------------------------- | ------------------------------------------------------- | ---- | ------------------------------------------------------------ |
+| colorMode<sup>10+</sup>     | [ThemeColorMode](ts-appendix-enums.md#themecolormode10) | No  | Color mode used for the background blur.<br>Default value: **ThemeColorMode.System**|
+| adaptiveColor<sup>10+</sup> | [AdaptiveColor](ts-appendix-enums.md#adaptivecolor10)   | No  | Adaptive color mode.<br>Default value: **AdaptiveColor.Default**|
 
 ## Example
 
+### Example 1
+
 ```ts
 // xxx.ets
 @Entry
@@ -84,3 +94,30 @@ struct BackgroundExample {
 ```
 
 ![en-us_image_0000001211898502](figures/en-us_image_0000001211898502.png)
+
+### Example 2
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct BackgroundBlurStyleDemo {
+  build() {
+    Column() {
+      Row() {
+        Text("Thin Material")
+      }
+      .width('50%')
+      .height('50%')
+      .backgroundBlurStyle(BlurStyle.Thin, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT })
+      .position({ x: '15%', y: '30%' })
+    }
+    .height('100%')
+    .width('100%')
+    .backgroundImage($r('app.media.bg'))
+    .backgroundImageSize(ImageSize.Cover)
+  }
+}
+```
+
+![en-us_image_background_blur_style](figures/en-us_image_background_blur_style.png)
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-backgroundBlurStyle.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-backgroundBlurStyle.md
deleted file mode 100644
index 7697d92ebdae9512ebcebfe4d46d6a43cf0143c2..0000000000000000000000000000000000000000
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-backgroundBlurStyle.md
+++ /dev/null
@@ -1,48 +0,0 @@
-# Background Blur
-
-You can apply background blur effects to a component.
-
->  **NOTE**
-> 
->  The APIs of this module are supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.
->
->  The APIs provided by this module are system APIs.
-
-## Attributes
-
-| Name                 | Parameter                    | Description                    |
-| -------------------- | ----------------------- | ------------------------ |
-| backgroundBlurStyle  | value:[BlurStyle](ts-appendix-enums.md#blurstyle9),<br>options<sup>10+</sup>?:[BackgroundBlurStyleOptions](#backgroundblurstyleoptions10) | Background blur style applied between the content and the background.<br>**value**: settings of the background blur style, including the blur radius, mask color, mask opacity, and saturation.<br>**options**: background blur options. This parameter is optional.<br>This API is supported in ArkTS widgets.|
- 
-## BackgroundBlurStyleOptions<sup>10+</sup>
-
-| Name| Type| Mandatory| Description|
-| ----------- | ------| ------ | ------ |
-| colorMode<sup>10+</sup> | [ThemeColorMode](ts-appendix-enums.md#themecolormode10) | No| Color mode used for the background blur.<br>Default value: **ThemeColorMode.System**|
-| adaptiveColor<sup>10+</sup> | [AdaptiveColor](ts-appendix-enums.md#adaptivecolor10) | No| Adaptive color mode.<br>Default value: **AdaptiveColor.Default**|
-
-## Example
-
-```ts
-// xxx.ets
-@Entry
-@Component
-struct BackgroundBlurStyleDemo {
-  build() {
-    Column() {
-      Row() {
-        Text("Thin Material")
-      }
-      .width('50%')
-      .height('50%')
-      .backgroundBlurStyle(BlurStyle.Thin, { colorMode: ThemeColorMode.Light, adaptiveColor: AdaptiveColor.Default })
-      .position({ x: '15%', y: '30%' })
-    }
-    .height('100%')
-    .width('100%')
-    .backgroundImage($r('app.media.bg'))
-    .backgroundImageSize(ImageSize.Cover)
-  }
-}
-```
-![en-us_image_background_blur_style](figures/en-us_image_background_blur_style.png)
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md
index 9e7bc6819ccaaade0636a5ca785f231ae139c0ad..bbd28493234c43fe7638304e4ed91cd8292abb37 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md
@@ -14,6 +14,7 @@
 | flexGrow   | number                                      | Percentage of the parent container's remaining space that is allocated to the component.<br>Default value: **0**<br>Since API version 9, this API is supported in ArkTS widgets.|
 | flexShrink | number                                      | Percentage of the parent container's shrink size that is allocated to the component.<br>When the parent container is **\<Row>** or **\<Column>**, the default value is **0**.<br> When the parent container is **\<Flex>**, the default value is **1**.<br>Since API version 9, this API is supported in ArkTS widgets.|
 | alignSelf  | [ItemAlign](ts-appendix-enums.md#itemalign) | Alignment mode of the child components along the cross axis of the parent container. The setting overwrites the **alignItems** setting of the parent container (**\<Flex>**, **\<Column>**, **\<Row>**, or **\<GridRow>**).<br>**\<GridCol>** can have the **alignsSelf** attribute bound to change its own layout along the cross axis.<br>Default value: **ItemAlign.Auto**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| layoutWeight   | number \| string                                   | Weight of the component during layout. When the container size is determined, the container space is allocated along the main axis among the component and sibling components based on the layout weight, and the component size setting is ignored.<br>Default value: **0**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>This attribute is valid only for the **\<Row>**, **\<Column>**, and **\<Flex>** layouts.<br>The value can be a number greater than or equal to 0 or a string that can be converted to a number.|
 
 
 ## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md
index 8babd263667bf837480d7dd5d13c484bc4610558..5c282923bc24c0d62718d986f16a7ed09b0d7642 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md
@@ -1,6 +1,6 @@
 # Image Effects
 
-Image effects include blur, shadow, and much more.
+Image effects include blur, shadow, spherical effect, and much more.
 
 >  **NOTE**
 >
@@ -10,19 +10,22 @@ Image effects include blur, shadow, and much more.
 ## Attributes
 
 
-| Name                         | Type                                                    | Default Value| Description                                                        |
-| ----------------------------- | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ |
-| blur                          | number                                                       | -      | Applies the content blur effect to the current component. The input parameter is the blur radius. The larger the radius is, the more blurred the content is. If the value is **0**, the content is not blurred.<br>Value range: [0, +∞)<br>Since API version 9, this API is supported in ArkTS widgets.|
-| backdropBlur                  | number                                                       | -      | Applies the background blur effect to the current component. The input parameter is the blur radius. The larger the radius is, the more blurred the background is. If the value is **0**, the background is not blurred.<br>Value range: [0, +∞)<br>Since API version 9, this API is supported in ArkTS widgets.|
-| shadow                        | [ShadowOptions](#shadowoptions) \| [ShadowStyle](#shadowstyle10) | -      | Applies a shadow effect to the current component.<br>When the value type is **ShadowOptions**, the blur radius, shadow color, and offset along the x-axis and y-axis can be specified.<br>When the value type is **ShadowStyle**, the shadow style can be specified.<br>Since API version 9, this API is supported in ArkTS widgets, except that the [ShadowStyle](#shadowstyle10) type is not supported.|
-| grayscale                     | number                                                       | 0.0    | Converts the input image to grayscale. The value indicates the grayscale conversion ratio. If the input value is **1.0**, the image is converted into a grayscale image. If the input value is **0.0**, the image does not change. If the input value is between **0.0** and **1.0**, the effect changes in linear mode. The unit is percentage.<br>Value range: [0, 1]<br>**NOTE**<br>A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.<br>Since API version 9, this API is supported in ArkTS widgets.|
-| brightness                    | number                                                       | 1.0    | Applies a brightness to the current component. The input parameter is a brightness ratio. The value **1** indicates no effects. The value **0** indicates the complete darkness. If the value is less than **1**, the brightness decreases. If the value is greater than **1**, the brightness increases. A larger value indicates a higher brightness.<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the value **0**.<br>Since API version 9, this API is supported in ArkTS widgets.|
-| saturate                      | number                                                       | 1.0    | Applies the saturation effect to the current component. The saturation is the ratio of the chromatic component to the achromatic component (gray) in a color. When the input value is **1**, the source image is displayed. When the input value is greater than **1**, a higher percentage of the chromatic component indicates a higher saturation. When the input value is less than **1**, a higher percentage of the achromatic component indicates a lower saturation. The unit is percentage.<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the value **0**.<br>Since API version 9, this API is supported in ArkTS widgets.|
-| contrast                      | number                                                       | 1.0    | Applies the contrast effect to the current component. The input parameter is a contrast value. If the value is **1**, the source image is displayed. If the value is greater than 1, a larger value indicates a higher contrast and a clearer image. If the value is less than 1, a smaller value indicates a lower contrast is. If the value is **0**, the image becomes all gray. The unit is percentage.<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the value **0**.<br>Since API version 9, this API is supported in ArkTS widgets.|
-| invert                        | number                                                       | 0      | Inverts the input image. The input parameter is an image inversion ratio. The value **1** indicates complete inversion, and **0** indicates that the image does not change. The unit is percentage.<br>Value range: [0, 1]<br>**NOTE**<br>A value less than 0 evaluates to the value **0**.<br>Since API version 9, this API is supported in ArkTS widgets.|
-| sepia                         | number                                                       | 0      | Converts the image color to sepia. The input parameter is an image conversion ratio. The value **1** indicates the image is completely sepia, and **0** indicates that the image does not change. The unit is percentage.<br>Since API version 9, this API is supported in ArkTS widgets.|
-| hueRotate                     | number \| string                                   | '0deg' | Applies the hue rotation effect to the current component. The input parameter is a rotation angle.<br>Value range: (-∞, +∞)<br>**NOTE**<br>A rotation of 360 degrees leaves the color unchanged. A rotation of 180 degrees and then –180 degrees also leaves the color unchanged. When the data type is number, the value 90 is equivalent to **'90deg'**.<br>Since API version 9, this API is supported in ArkTS widgets.|
-| colorBlend <sup>8+</sup> | [Color](ts-appendix-enums.md#color) \| string \| [Resource](ts-types.md#resource) | -      | Applies the color blend effect to the current component. The input parameter is the blended color.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| Name                            | Type                                                    | Default Value| Description                                                        |
+| -------------------------------- | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ |
+| blur                             | number                                                       | -      | Content blur radius of the component. A greater value indicates a higher blur degree. If the value is **0**, the content is not blurred.<br>Value range: [0, +∞)<br>Since API version 9, this API is supported in ArkTS widgets.|
+| backdropBlur                     | number                                                       | -      | Background blur radius of the component. A greater value indicates a higher blur degree. If the value is **0**, the background is not blurred.<br>Value range: [0, +∞)<br>Since API version 9, this API is supported in ArkTS widgets.|
+| shadow                           | [ShadowOptions](#shadowoptions) \| [ShadowStyle](#shadowstyle10)<sup>10+</sup> | -      | Shadow of the component.<br>When the value type is **ShadowOptions**, the blur radius, shadow color, and offset along the x-axis and y-axis can be specified.<br>When the value type is **ShadowStyle**, the shadow style can be specified.<br>Since API version 9, this API is supported in ArkTS widgets, except that the [ShadowStyle](#shadowstyle10) type is not supported.|
+| grayscale                        | number                                                       | 0.0    | Grayscale conversion ratio of the component. If the value is **1.0**, the component is completely converted to grayscale. If the value is **0.0**, the component remains unchanged. Between 0 and 1, the value applies a linear multiplier on the grayscale effect. The unit is percentage.<br>Value range: [0, 1]<br>**NOTE**<br>A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| brightness                       | number                                                       | 1.0    | Brightness of the component. The value **1** indicates no effects. The value **0** indicates the complete darkness. If the value is less than **1**, the brightness decreases. If the value is greater than **1**, the brightness increases. A greater value indicates a higher brightness.<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the value **0**.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| saturate                         | number                                                       | 1.0    | Saturation of the component. The saturation is the ratio of the chromatic component to the achromatic component (gray) in a color. If the value is **1**, the source image is displayed. If the value is greater than **1**, a higher percentage of the chromatic component indicates a higher saturation. If the value is less than **1**, a higher percentage of the achromatic component indicates a lower saturation. The unit is percentage.<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the value **0**.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| contrast                         | number                                                       | 1.0    | Contrast of the component. The input parameter is a contrast value. If the value is **1**, the source image is displayed. If the value is greater than 1, a larger value indicates a higher contrast and a clearer image. If the value is less than 1, a smaller value indicates a lower contrast is. If the value is **0**, the image becomes all gray. The unit is percentage.<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the value **0**.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| invert                           | number                                                       | 0      | Inversion ratio of the component. If the value is **1**, the component is completely inverted. If the value is **0**, the component remains unchanged. The unit is percentage.<br>Value range: [0, 1]<br>**NOTE**<br>A value less than 0 evaluates to the value **0**.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| sepia                            | number                                                       | 0      | Sepia conversion ratio of the component. If the value is **1**, the image is completely sepia. If the value is **0**, the component remains unchanged. The unit is percentage.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| hueRotate                        | number \| string                                   | '0deg' | Hue rotation angle of the component.<br>Value range: (-∞, +∞)<br>**NOTE**<br>A rotation of 360 degrees leaves the color unchanged. A rotation of 180 degrees and then -180 degrees also leaves the color unchanged. When the data type is number, the value 90 is equivalent to **'90deg'**.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| colorBlend <sup>8+</sup>    | [Color](ts-appendix-enums.md#color) \| string \| [Resource](ts-types.md#resource) | -      | Color to blend with the component.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| sphericalEffect<sup>10+</sup>    | [number]                                                     | -      | Spherical degree of the component.<br>The value ranges from 0 to 1.<br>**NOTE**<br>1. If the value is **0**, the component remains unchanged. If the value is **1**, the component is completely spherical. Between 0 and 1, a greater value indicates a higher spherical degree.<br>A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.<br> 2. If a component image is loaded asynchronously, the spherical effect is not supported. For example, the **\<Image>** component uses asynchronous loading by default, which means that **syncLoad** must be set to **true** to apply the spherical effect. However, this setting is not recommended. Asynchronous loading is also used for **backgroundImage**. Therefore, if **backgroundImage** is set, the spherical effect is not supported.<br>3. If the shadow effect is set for a component, the spherical effect is not supported.|
+| lightUpEffect<sup>10+</sup>      | [number]                                                     | -      | Light up degree of the component.<br>The value ranges from 0 to 1.<br>If the value is **0**, the component is dark. If the value is **1**, the component is fully illuminated. Between 0 and 1, a greater value indicates higher luminance. A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.|
+| pixelStretchEffect<sup>10+</sup> | [PixelStretchEffectOptions](ts-types.md#pixelstretcheffectoptions10) | -      | Pixel stretch effect options.<br>The **options** parameter includes the length by which a pixel is stretched toward the four edges.<br>**NOTE**<br>1. If the length is a positive value, the original image is stretched, and the image size increases. The edge pixels grow by the set length toward the top, bottom, left, and right edges.<br>2. 2. If the length is a negative value, the original image shrinks as follows, but the image size remains unchanged:<br>(1) The image shrinks from the four edges by the absolute value of length set through **options**.<br>(2) The image is stretched back to the original size with edge pixels.<br>3. Constraints on **options**:<br>(1) The length values for the four edges must be all positive or all negative. That is, the four edges are stretched or shrink at the same time in the same direction.<br>(2) The length values must all be a percentage or a specific value. Combined use of the percentage and specific value is not allowed.<br>(3) If the input value is invalid, the image is displayed as {0, 0, 0, 0}, that is, the image is the same as the original image. |
 
 ## ShadowOptions
 
@@ -41,12 +44,12 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 | Name  | Description                                  |
 | ------ | -------------------------------------- |
-| OuterDefaultXS  | Mini shadow.|
-| OuterDefaultSM | Small shadow.|
-| OuterDefaultMD    | Medium shadow.|
-| OuterDefaultLG    | Large shadow.|
-| OuterFloatingSM    | Floating small shadow.|
-| OuterFloatingMD    | Floating medium shadow.|
+| OUTER_DEFAULT_XS  | Mini shadow.|
+| OUTER_DEFAULT_SM | Small shadow.|
+| OUTER_DEFAULT_MD    | Medium shadow.|
+| OUTER_DEFAULT_LG    | Large shadow.|
+| OUTER_FLOATING_SM    | Floating small shadow.|
+| OUTER_FLOATING_MD    | Floating medium shadow.|
 
 ## Example
 
@@ -147,3 +150,177 @@ struct ImageEffectsExample {
 ```
 
 ![imageeffect](figures/imageeffect.png)
+
+### Example 3
+
+You can apply a spherical effect to a component to make it appear spherized.
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct SphericalEffectExample {
+  build() {
+    Stack() {
+      TextInput({placeholder: "Enter a percentage."})
+        .width('50%')
+        .height(35)
+        .type(InputType.Number)
+        .enterKeyType(EnterKeyType.Done)
+        .caretColor(Color.Red)
+        .placeholderColor(Color.Blue)
+        .placeholderFont({
+          size: 20,
+          style: FontStyle.Italic,
+          weight: FontWeight.Bold
+        })
+        .sphericalEffect(0.5)
+    }.alignContent(Alignment.Center).width("100%").height("100%")
+  }
+}
+
+```
+
+Below is how the component looks with the spherical effect applied:
+
+![textInputSpherical1](figures/textInputSpherical1.png)
+
+Below is how the component looks without the spherical effect applied:
+
+![textInputSpherical2](figures/textInputSpherical2.png)
+
+### Example 4
+
+You can apply a light up effect to a component.
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct LightUpExample {
+  build() {
+    Stack() {
+      Text('This is the text content with letterSpacing 0.')
+        .letterSpacing(0)
+        .fontSize(12)
+        .border({ width: 1 })
+        .padding(10)
+        .width('50%')
+        .lightUpEffect(0.6)
+    }.alignContent(Alignment.Center).width("100%").height("100%")
+  }
+}
+
+```
+
+Below is how the component looks with **lightUpEffect** set to **0.6**:
+
+![textLightUp3](figures/textLightUp3.png)
+
+Below is how the component looks with **lightUpEffect** set to **0.2**:
+
+![textLightUp2](figures/textLightUp2.png)
+
+Below is how the component looks without the light up effect applied:
+
+![textLightUp1](figures/textLightUp1.png)
+
+### Example 5
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct LightUpExample {
+  @State isLunar: boolean = false
+  private selectedDate: Date = new Date('2028-08-08')
+  build() {
+    Stack() {
+      DatePicker({
+        start: new Date('1970-1-1'),
+        end: new Date('2100-1-1'),
+        selected: this.selectedDate
+      })
+        .lunar(this.isLunar)
+        .onChange((value: DatePickerResult) => {
+          this.selectedDate.setFullYear(value.year, value.month, value.day)
+          console.info('select current date is: ' + JSON.stringify(value))
+        })
+        .lightUpEffect(0.6)
+
+    }.alignContent(Alignment.Center).width("100%").height("100%")
+  }
+}
+```
+
+![datePickerLightUp2](figures/datePickerLightUp2.png)
+
+Below is how the component looks without the light up effect applied:
+
+![datePickerLightUp1](figures/datePickerLightUp1.png)
+
+### Example 6
+
+You can apply a pixel stretch effect to a component.
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct PixelStretchExample {
+  build() {
+    Stack() {
+      Text('This is the text content with letterSpacing 0.')
+        .letterSpacing(0)
+        .fontSize(12)
+        .border({ width: 1 })
+        .padding(10)
+        .width('50%')
+        .pixelStretchEffect({top:10,left:10,right:10,bottom:10 })
+    }.alignContent(Alignment.Center).width("100%").height("100%")
+  }
+}
+
+```
+
+Below is how the component looks with **lightUpEffect** set to **0.6**:
+
+![textPixelStretch1](figures/textPixelStretch1.png)
+
+Below is how the component looks without the pixel stretch effect applied:
+
+![textPixelStretch2](figures/textPixelStretch2.png)
+
+### Example 7
+
+Based on Example 6, change the length values of the pixel stretch effect to negative:
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct PixelStretchExample {
+  build() {
+    Stack() {
+      Text('This is the text content with letterSpacing 0.')
+        .letterSpacing(0)
+        .fontSize(12)
+        .border({ width: 1 })
+        .padding(10)
+        .width('50%')
+        .pixelStretchEffect({top:-10,left:-10,right:-10,bottom:-10 })
+    }.alignContent(Alignment.Center).width("100%").height("100%")
+  }
+}
+```
+
+Below is how the component looks:
+
+![textPixelStretch3](figures/textPixelStretch3.png)
+
+Compared with the original image, the effect drawing is implemented in two steps:
+
+1. The image size is reduced. The resultant size is the original image size minus
+the lengths by which the pixels shrink. For example, if the original image size is 100 x 100 and **pixelStretchEffect({top:-10,left:-10,**
+**right:-10,bottom:-10})** is set, the resultant size is (100-10-10) x (100-10-10), that is, 8080.
+2. Edge pixels are stretched to restore the image to its original size.
\ No newline at end of file
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-lightUpEffect.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-lightUpEffect.md
deleted file mode 100644
index 83cf55784249ebe7af2a2ad7e5f1deab8bc5176c..0000000000000000000000000000000000000000
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-lightUpEffect.md
+++ /dev/null
@@ -1,80 +0,0 @@
-# Light Up Effect
-
-You can apply a light up effect to a component.
-
->  **NOTE**
->
->  This attribute is supported since API Version 10. Updates will be marked with a superscript to indicate their earliest API version. This is a system API.
-
-## Attributes
-
-| Name| Type| Description|
-| -------- | -------- | -------- |
-| lightUpEffect | [number] | Light up degree of the component.<br>The value ranges from 0 to 1.<br>If the value is 0, the component is dark. If the value is 1, the component is fully illuminated. Between 0 and 1, a greater value indicates higher luminance. A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.|
-
-## Example
-
-### Example 1
-```ts
-// xxx.ets
-@Entry
-@Component
-struct LightUpExample {
-  build() {
-    Stack() {
-      Text('This is the text content with letterSpacing 0.')
-        .letterSpacing(0)
-        .fontSize(12)
-        .border({ width: 1 })
-        .padding(10)
-        .width('50%')
-        .lightUpEffect(0.6)
-    }.alignContent(Alignment.Center).width("100%").height("100%")
-  }
-}
-
-```
-Below is how the component looks with **lightUpEffect** set to **0.6**:
-
-![textLightUp3](figures/textLightUp3.png)
-
-Below is how the component looks with **lightUpEffect** set to **0.2**:
-
-![textLightUp2](figures/textLightUp2.png)
-
-Below is how the component looks without the light up effect applied:
-
-![textLightUp1](figures/textLightUp1.png)
-### Example 2
-
-```ts
-// xxx.ets
-@Entry
-@Component
-struct LightUpExample {
-  @State isLunar: boolean = false
-  private selectedDate: Date = new Date('2028-08-08')
-  build() {
-    Stack() {
-      DatePicker({
-        start: new Date('1970-1-1'),
-        end: new Date('2100-1-1'),
-        selected: this.selectedDate
-      })
-        .lunar(this.isLunar)
-        .onChange((value: DatePickerResult) => {
-          this.selectedDate.setFullYear(value.year, value.month, value.day)
-          console.info('select current date is: ' + JSON.stringify(value))
-        })
-        .lightUpEffect(0.6)
-
-    }.alignContent(Alignment.Center).width("100%").height("100%")
-  }
-}
-```
-
-![datePickerLightUp2](figures/datePickerLightUp2.png)
-
-Below is how the component looks without the light up effect applied:
-
-![datePickerLightUp1](figures/datePickerLightUp1.png)
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-modal-transition.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-modal-transition.md
new file mode 100644
index 0000000000000000000000000000000000000000..5e880a729165df29968e502999013ea7af9fbfb0
--- /dev/null
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-modal-transition.md
@@ -0,0 +1,306 @@
+# Modal Transition
+
+You can bind a full-screen modal to a component through the **bindContentCover** attribute. Better yet, with the **ModalTransition** parameter, you can apply a transition effect for when the component is inserted or deleted.
+
+>  **NOTE**
+>
+>  The APIs of this module are supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version.
+>  Switching between landscape and portrait modes is not supported.
+
+## Attributes
+
+| Name              | Parameter                                      | Description                                    |
+| ---------------- | ---------------------------------------- | ---------------------------------------- |
+| bindContentCover | isShow: boolean,<br>builder: [CustomBuilder](ts-types.md#custombuilder8),<br>type?: [ModalTransition](ts-types.md#modaltransition10) | Binds a modal to the component, which can be displayed when the component is touched. The content of the modal is customizable. The transition type can be set to none, slide-up and slide-down animation, and opacity gradient animation.<br>**isShow**: whether to display the modal. Mandatory.<br>**builder**: content of the modal. Mandatory.<br>**type**: transition type of the modal. This parameter is optional. |
+
+## Example
+
+### Example 1
+
+This example applies a custom animation to two modals whose transition type is none.
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct ModalTransitionExample {
+  @State isShow:boolean = false
+  @State isShow2:boolean = false
+
+  @Builder myBuilder2() {
+    Column() {
+      Button("close modal 2")
+        .margin(10)
+        .fontSize(20)
+        .onClick(()=>{
+          this.isShow2 = false;
+        })
+    }
+    .width('100%')
+    .height('100%')
+    .backgroundColor(Color.Orange)
+  }
+
+  @Builder myBuilder() {
+    Column() {
+      Button("transition modal 2")
+        .margin(10)
+        .fontSize(20)
+        .onClick(()=>{
+          this.isShow2 = true;
+        }).bindContentCover($$this.isShow2, this.myBuilder2(), ModalTransition.NONE)
+
+      Button("close modal 1")
+        .margin(10)
+        .fontSize(20)
+        .onClick(()=>{
+          this.isShow = false;
+        })
+    }
+    .width('100%')
+    .height('100%')
+    .backgroundColor(Color.Pink)
+    .justifyContent(FlexAlign.Center)
+  }
+
+  build() {
+    Column() {
+      Button("transition modal 1")
+        .onClick(() => {
+          this.isShow = true
+        })
+        .fontSize(20)
+        .margin(10)
+        .bindContentCover($$this.isShow, this.myBuilder(), ModalTransition.NONE)
+    }
+    .justifyContent(FlexAlign.Center)
+    .backgroundColor("#ff49c8ab")
+    .width('100%')
+    .height('100%')
+  }
+}
+```
+
+![en-us_full_screen_modal_none_1](figures/en-us_full_screen_modal_none_1.gif)
+
+### Example 2
+
+This example applies a custom animation to two modals whose transition type is none.
+
+```ts
+// xxx.ets
+import curves from '@ohos.curves';
+@Entry
+@Component
+struct ModalTransitionExample {
+  @State  @Watch("isShow1Change") isShow:boolean = false
+  @State  @Watch("isShow2Change") isShow2:boolean = false
+  @State isScale1:number = 1;
+  @State isScale2:number = 1;
+  @State flag: boolean = true
+  @State show: string = 'show'
+
+  isShow1Change() {
+    this.isShow ? this.isScale1 = 0.95 : this.isScale1 = 1
+  }
+  isShow2Change() {
+    this.isShow2 ? this.isScale2 = 0.95 : this.isScale2 = 1
+  }
+  @Builder myBuilder2() {
+    Column() {
+      Button("close modal 2")
+        .margin(10)
+        .fontSize(20)
+        .onClick(()=>{
+          this.isShow2 = false;
+        })
+    }
+    .width('100%')
+    .height('100%')
+    .backgroundColor(Color.Orange)
+  }
+
+
+  @Builder myBuilder() {
+    Column() {
+      Button("transition modal 2")
+        .margin(10)
+        .fontSize(20)
+        .onClick(()=>{
+          this.isShow2 = true;
+        }).bindContentCover($$this.isShow2, this.myBuilder2(), ModalTransition.NONE)
+
+      Button("close modal 1")
+        .margin(10)
+        .fontSize(20)
+        .onClick(()=>{
+          this.isShow = false;
+        })
+    }
+    .width('100%')
+    .height('100%')
+    .backgroundColor(Color.Pink)
+    .justifyContent(FlexAlign.Center)
+    .scale({x: this.isScale2, y: this.isScale2})
+    .animation({curve:curves.springMotion()})
+  }
+
+  build() {
+    Column() {
+      Button("transition modal 1")
+        .onClick(() => {
+          this.isShow = true
+        })
+        .fontSize(20)
+        .margin(10)
+        .bindContentCover($$this.isShow, this.myBuilder(), ModalTransition.NONE)
+    }
+    .justifyContent(FlexAlign.Center)
+    .backgroundColor("#ff49c8ab")
+    .width('100%')
+    .height('100%')
+    .scale({ x: this.isScale1, y: this.isScale1 })
+    .animation({ curve: curves.springMotion() })
+  }
+}
+```
+
+![en-us_full_screen_modal_none_2](figures/en-us_full_screen_modal_none_2.gif)
+
+### Example 3
+
+This example shows two modals whose transition type is slide-up and slide-down animation.
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct ModalTransitionExample {
+  @State isShow:boolean = false
+  @State isShow2:boolean = false
+
+  @Builder myBuilder2() {
+    Column() {
+      Button("close modal 2")
+        .margin(10)
+        .fontSize(20)
+        .onClick(()=>{
+          this.isShow2 = false;
+        })
+    }
+    .width('100%')
+    .height('100%')
+    .backgroundColor(Color.Gray)
+  }
+
+  @Builder myBuilder() {
+    Column() {
+      Button("transition modal 2")
+        .margin(10)
+        .fontSize(20)
+        .onClick(()=>{
+          this.isShow2 = true;
+        }).bindContentCover(this.isShow2, this.myBuilder2(), ModalTransition.DEFAULT)
+
+      Button("close modal 1")
+        .margin(10)
+        .fontSize(20)
+        .onClick(()=>{
+          this.isShow = false;
+        })
+    }
+    .width('100%')
+    .height('100%')
+    .backgroundColor(Color.Pink)
+    .justifyContent(FlexAlign.Center)
+  }
+
+  build() {
+    Column() {
+      Button("transition modal 1")
+        .onClick(() => {
+          this.isShow = true
+        })
+        .fontSize(20)
+        .margin(10)
+        .bindContentCover($$this.isShow, this.myBuilder(), ModalTransition.DEFAULT)
+    }
+    .justifyContent(FlexAlign.Center)
+    .backgroundColor(Color.White)
+    .width('100%')
+    .height('100%')
+  }
+}
+```
+
+![en-us_full_screen_modal_default](figures/en-us_full_screen_modal_default.gif)
+
+### Example 4
+
+This example shows two modals whose transition type is opacity gradient animation.
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct ModalTransitionExample {
+  @State isShow:boolean = false
+  @State isShow2:boolean = false
+
+  @Builder myBuilder2() {
+    Column() {
+      Button("close modal 2")
+        .margin(10)
+        .fontSize(20)
+        .onClick(()=>{
+          this.isShow2 = false;
+        })
+    }
+    .width('100%')
+    .height('100%')
+    .backgroundColor(Color.Gray)
+    .justifyContent(FlexAlign.Center)
+  }
+
+
+  @Builder myBuilder() {
+    Column() {
+      Button("transition modal 2")
+        .margin(10)
+        .fontSize(20)
+        .onClick(()=>{
+          this.isShow2 = true;
+        }).bindContentCover(this.isShow2, this.myBuilder2(), ModalTransition.ALPHA)
+
+      Button("close modal 1")
+        .margin(10)
+        .fontSize(20)
+        .onClick(()=>{
+          this.isShow = false;
+        })
+    }
+    .width('100%')
+    .height('100%')
+    .backgroundColor(Color.Pink)
+    .justifyContent(FlexAlign.Center)
+  }
+
+  build() {
+    Column() {
+      Button("transition modal 1")
+        .onClick(() => {
+          this.isShow = true
+        })
+        .fontSize(20)
+        .margin(10)
+        .bindContentCover($$this.isShow, this.myBuilder(), ModalTransition.ALPHA)
+    }
+    .justifyContent(FlexAlign.Center)
+    .backgroundColor(Color.White)
+    .width('100%')
+    .height('100%')
+  }
+}
+```
+
+![en-us_full_screen_modal_alpha](figures/en-us_full_screen_modal_alpha.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-pixelStretchEffect.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-pixelStretchEffect.md
deleted file mode 100644
index 470e6a5349598da54b68e3e798ed160b6f9e5639..0000000000000000000000000000000000000000
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-pixelStretchEffect.md
+++ /dev/null
@@ -1,78 +0,0 @@
-# Pixel Stretch Effect
-
-You can apply a pixel stretch effect to a component.
-
->  **NOTE**
->
->  This attribute is supported since API Version 10. Updates will be marked with a superscript to indicate their earliest API version. This is a system API.
-
-## Attributes
-
-| Name| Type| Description|
-| -------- | -------- | -------- |
-| pixelStretchEffect | [PixelStretchEffectOptions](ts-types.md#pixelstretcheffectoptions10) | Pixel stretch effect options.<br>The **options** parameter includes the length by which a pixel is stretched toward the four edges.<br>**NOTE**<br>1. If the length is a positive value, the original image is stretched, and the image size increases. The edge pixels grow by the set length toward the top, bottom, left, and right edges.<br>2. If the length is a negative value, the original image shrinks as follows, but the image size remains unchanged:<br> (1) The image shrinks from the four edges by the absolute value of length set through **options**. (2) The image is stretched back to the original size with edge pixels.<br>3. Constraints on **options**:<br>(1) The length values for the four edges must be all postive or all negative. That is, the four edges are stretched or shrink at the same time in the same direction. 2. The length values must all be a percentage or a specific value. Combined use of the percentage and specific value is not allowed. 3. If the input value is invalid, the image is displayed as {0, 0, 0, 0}, that is, the image is the same as the original image.|
-
-## Example
-
-### Example 1
-
-```ts
-// xxx.ets
-@Entry
-@Component
-struct PixelStretchExample {
-  build() {
-    Stack() {
-      Text('This is the text content with letterSpacing 0.')
-        .letterSpacing(0)
-        .fontSize(12)
-        .border({ width: 1 })
-        .padding(10)
-        .width('50%')
-        .pixelStretchEffect({top:10,left:10,right:10,bottom:10 })
-    }.alignContent(Alignment.Center).width("100%").height("100%")
-  }
-}
-
-```
-Below is how the component looks with the pixel stretch effect applied:
-
-![textPixelStretch1](figures/textPixelStretch1.png)
-
-Below is how the component looks without the pixel stretch effect applied:
-
-![textPixelStretch2](figures/textPixelStretch2.png)
-
-A comparison of the preceding two figures shows that, if the length values are positive, the original image is stretched.
-
-### Example 2
-
-Based on Example 1, change the length values of the pixel stretch effect to negative:
-
-```ts
-// xxx.ets
-@Entry
-@Component
-struct PixelStretchExample {
-  build() {
-    Stack() {
-      Text('This is the text content with letterSpacing 0.')
-        .letterSpacing(0)
-        .fontSize(12)
-        .border({ width: 1 })
-        .padding(10)
-        .width('50%')
-        .pixelStretchEffect({top:-10,left:-10,right:-10,bottom:-10 })
-    }.alignContent(Alignment.Center).width("100%").height("100%")
-  }
-}
-```
-Below is how the component looks:
-
-![textPixelStretch3](figures/textPixelStretch3.png)
-
-Compared with the original image, the effect drawing is implemented in two steps:
-
-1. The image size is reduced. The resultant size is the originial image size minus the lengths by which the pixels shrink. For example, if the original image size is 100 x 100 and **pixelStretchEffect({top:-10,left:-10,right:-10,bottom:-10})** is set, the resultant size is (100-10-10) x (100-10-10), that is, 8080. 
-
-2. Edge pixels are stretched to restore the image to its original size.
\ No newline at end of file
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md
index 0e588d01fb33704f46f3c33170df2de151020cf7..d76050cf53ac8d98fe0426ea6a3a4e2a857fca15 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md
@@ -29,6 +29,8 @@ You can bind a popup to a component, specifying its content, interaction logic,
 | messageOptions<sup>10+</sup>          | [PopupMessageOptions](#popupmessageoptions10)                | No  | Parameters of the popup message.                                      |
 | targetSpace<sup>10+</sup>             | [Length](ts-types.md#length)                                 | No  | Space between the popup and the target.                                     |
 | placement<sup>10+</sup>               | [Placement](ts-appendix-enums.md#placement8)                 | No  | Position of the popup relative to the target. The default value is **Placement.Bottom**.<br>If both **placementOnTop** and **placement** are set, the latter prevails.|
+| offset<sup>10+</sup>                  | [Position](ts-types.md#position8)                            | No  | Offset of the popup relative to the display position specified by **placement**.          |
+| enableArrow<sup>10+</sup>             | boolean | No  | Whether to display the arrow.<br>Default value: **true**|
 
 ## PopupMessageOptions<sup>10+</sup>
 
@@ -40,7 +42,7 @@ You can bind a popup to a component, specifying its content, interaction logic,
 
 | Name                          | Type                                      | Mandatory  | Description                                      |
 | ---------------------------- | ---------------------------------------- | ---- | ---------------------------------------- |
-| builder                      | [CustomBuilder](ts-types.md#custombuilder8) | Yes   | Popup builder.                             |
+| builder                      | [CustomBuilder](ts-types.md#custombuilder8) | Yes   | Popup builder.<br>**NOTE**<br>The **popup** attribute is a universal attribute. A custom popup does not support display of another popup. The **position** attribute cannot be used for the first-layer container under the builder. If the **position** attribute is used, the popup will not be displayed.                             |
 | placement                    | [Placement](ts-appendix-enums.md#placement8) | No   | Preferred position of the popup. If the set position is insufficient for holding the popup, it will be automatically adjusted.<br>Default value: **Placement.Bottom**|
 | popupColor                   | [ResourceColor](ts-types.md#resourcecolor) | No   | Color of the popup.                                |
 | enableArrow                  | boolean                                  | No   | Whether to display an arrow.<br>Since API version 9, if the position set for the popup is not large enough, the arrow will not be displayed. For example, if **placement** is set to **Left**, but the popup height (80 vp) is less than the sum of the arrow width (32 vp) and diameter of popup rounded corner (48 vp), the arrow will not be displayed.<br>Default value: **true**|
@@ -48,8 +50,10 @@ You can bind a popup to a component, specifying its content, interaction logic,
 | onStateChange                | (event: { isVisible: boolean }) =&gt; void | No   | Callback for the popup status change event.<br/>**isVisible**: whether the popup is visible.           |
 | arrowOffset<sup>9+</sup>     | [Length](ts-types.md#length)             | No   | Offset of the popup arrow relative to the popup.<br/>When the arrow is at the top or bottom of the popup: The value **0** indicates that the arrow is located on the leftmost, and any other value indicates the distance from the arrow to the leftmost; the arrow is centered by default.<br/>When the arrow is on the left or right side of the popup: The value indicates the distance from the arrow to the top; the arrow is centered by default.<br/>When the popup is displayed on either edge of the screen, it will automatically deviate leftward or rightward to stay within the safe area. When the value is **0**, the arrow always points to the bound component. |
 | showInSubWindow<sup>9+</sup> | boolean                                  | No   | Whether to show the popup in the subwindow. The default value is **false**.                   |
+| maskColor<sup>(deprecated)</sup> | [ResourceColor](ts-types.md#resourcecolor)   | No  | Color of the popup mask.<br>**NOTE**<br>This parameter is deprecated since API version 10. You are advised to use **mask** instead.|
 | mask<sup>10+</sup>           | boolean \| [ResourceColor](ts-types.md#resourcecolor) | No   | Whether to apply a mask to the popup. The value **true** means to apply a transparent mask to the popup, **false** means not to apply a mask to the popup, and a color value means to apply a mask in the corresponding color to the popup.|
 | targetSpace<sup>10+</sup>    | [Length](ts-types.md#length)             | No   | Space between the popup and the target.                          |
+| offset<sup>10+</sup>         | [Position](ts-types.md#position8)                            | No  | Offset of the popup relative to the display position specified by placement.|
 
 ## Example
 ```ts
@@ -112,7 +116,7 @@ struct PopupExample {
         .bindPopup(this.customPopup, {
           builder: this.popupBuilder,
           placement: Placement.Top,
-          maskColor: '0x33000000',
+          mask: {color:'0x33000000'},
           popupColor: Color.Yellow,
           enableArrow: true,
           showInSubWindow: false,
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-sheet-transition.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-sheet-transition.md
new file mode 100644
index 0000000000000000000000000000000000000000..2dd74f689b7a90bfdc9810ee0aa5c67d88b80ff0
--- /dev/null
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-sheet-transition.md
@@ -0,0 +1,93 @@
+# Sheet Transition
+
+You can bind a sheet to a component through the **bindSheet** attribute. You can also set the sheet to the preset or custom height for when the component is inserted.
+
+>  **NOTE**
+>
+> The APIs of this module are supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version.
+> Switching between landscape and portrait modes is not supported.
+
+## Attributes
+
+| Name| Parameter  | Description|
+| -------- | -------- | -------- |
+| bindSheet | isShow: boolean,<br>builder: [CustomBuilder](ts-types.md#custombuilder8),<br>sheetStyle?: [SheetStyle](#sheetstyle10) | Binds a sheet to the component, which can be displayed when the component is touched. **isShow**: whether to display the sheet. Mandatory.<br>**builder**: content of the sheet. Mandatory.<br> **sheetStyle**: height and control bar visibility of the sheet. Optional. By default, the default height is **Large** and the control bar is visible.|
+
+## SheetStyle<sup>10+</sup>
+
+| Name              | Type                                  | Mandatory| Description                  |
+| ------------------ | -------------------------------------- | ---- | ---------------------- |
+| height             | [SheetSize](#sheetsize10) \| [Length](ts-types.md#length) | No| Height of the sheet.         |
+| showDragBar        | boolean                                | No  | Whether the control bar is visible.         |
+
+## SheetSize<sup>10+</sup>
+
+| Name| Description|
+| -------- | -------- |
+| MEDIUM   | The sheet height is half of the screen height.|
+| LARGE    | The sheet height is almost the screen height.|
+
+## Example
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct SheetTransitionExample {
+  @State isShow:boolean = false
+  @State isShow2:boolean = false
+  @State sheetHeight:number = 300;
+  @State showDragBar:boolean = true;
+
+  @Builder myBuilder() {
+    Column() {
+      Button("change height")
+        .margin(10)
+        .fontSize(20)
+        .onClick(()=>{
+          this.sheetHeight = 500;
+        })
+
+      Button("Set Illegal height")
+        .margin(10)
+        .fontSize(20)
+        .onClick(()=>{
+          this.sheetHeight = null;
+        })
+
+      Button("close dragBar")
+        .margin(10)
+        .fontSize(20)
+        .onClick(()=>{
+          this.showDragBar = false;
+        })
+
+      Button("close modal 1")
+        .margin(10)
+        .fontSize(20)
+        .onClick(()=>{
+          this.isShow = false;
+        })
+    }
+    .width('100%')
+    .height('100%')
+  }
+
+  build() {
+    Column() {
+      Button("transition modal 1")
+        .onClick(() => {
+          this.isShow = true
+        })
+        .fontSize(20)
+        .margin(10)
+        .bindSheet($$this.isShow, this.myBuilder(), {height: this.sheetHeight, dragBar: this.showDragBar})
+    }
+    .justifyContent(FlexAlign.Center)
+    .width('100%')
+    .height('100%')
+  }
+}
+```
+
+![en-us_sheet](figures/en-us_sheet.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-sphericalEffect.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-sphericalEffect.md
deleted file mode 100644
index 8568bee6aa45bd74382c3ba3c0bff61808b63c6f..0000000000000000000000000000000000000000
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-sphericalEffect.md
+++ /dev/null
@@ -1,49 +0,0 @@
-# Spherical Effect
-
-You can apply a spherical effect to a component to make it appear spherized.
-
->  **NOTE**
->
->  This attribute is supported since API Version 10. Updates will be marked with a superscript to indicate their earliest API version. This is a system API.
-
-## Attributes
-
-| Name| Type| Description|
-| -------- | -------- | -------- |
-| sphericalEffect | [number] | Spherical degree of the component.<br>The value ranges from 0 to 1.<br>**NOTE**<br>1. If the value is 0, the component remains unchanged. If the value is 1, the component is completely spherical. Between 0 and 1, a greater value indicates a higher spherical degree.<br>A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.<br> 2. If a component image is loaded asynchronously, the spherical effect is not supported. For example, the **\<Image>** component uses asynchronous loading by default, which means that **syncLoad** must be set to **true** to apply the spherical effect. However, this setting is not recommended. Asynchronous loading is also used for **backgroundImage**. Therefore, if **backgroundImage** is set, the spherical effect is not supported.<br>3. If the shadow effect is set for a component, the spherical effect is not supported.|
-
-## Example
-
-### Example 1
-```ts
-// xxx.ets
-@Entry
-@Component
-struct SphericalEffectExample {
-  build() {
-    Stack() {
-      TextInput({placeholder: "Enter a percentage."})
-        .width('50%')
-        .height(35)
-        .type(InputType.Number)
-        .enterKeyType(EnterKeyType.Done)
-        .caretColor(Color.Red)
-        .placeholderColor(Color.Blue)
-        .placeholderFont({
-          size: 20,
-          style: FontStyle.Italic,
-          weight: FontWeight.Bold
-        })
-        .sphericalEffect(0.5)
-    }.alignContent(Alignment.Center).width("100%").height("100%")
-  }
-}
-
-```
-Below is how the component looks with the spherical effect applied:
-
-![textInputSpherical1](figures/textInputSpherical1.png)
-
-Below is how the component looks without the spherical effect applied:
-
-![textInputSpherical2](figures/textInputSpherical2.png)
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-mouse-key.md b/en/application-dev/reference/arkui-ts/ts-universal-mouse-key.md
index 6e44804a06b7341c68d5cc632cd806fc19c2b6cb..dd54a335e52621bbca73b7c60d1ed6631218b718 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-mouse-key.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-mouse-key.md
@@ -11,7 +11,7 @@ If an action triggers multiple events, the order of these events is fixed. By de
 
 | Name                                                        | Bubbling Supported| Description                                                        |
 | ------------------------------------------------------------ | -------- | ------------------------------------------------------------ |
-| onHover(event: (isHover?: boolean) =&gt; void) | No      | Triggered when the mouse cursor enters or leaves the component.<br>**isHover**: whether the mouse cursor hovers over the component. The value **true** means that the mouse cursor enters the component, and the value **false** means that the mouse cursor leaves the component.|
+| onHover(event: (isHover?: boolean, event<sup>10+</sup>?: HoverEvent) =&gt; void) | Yes      | Triggered when the mouse cursor enters or leaves the component.<br>**isHover**: whether the mouse cursor hovers over the component. The value **true** means that the mouse cursor enters the component, and the value **false** means that the mouse cursor leaves the component.<br>**event**: bubbling blocking of the event.|
 | onMouse(event: (event?: MouseEvent) =&gt; void) | Yes      | Triggered when the component is clicked by a mouse button or the mouse cursor moves on the component. The **event** parameter indicates the timestamp, mouse button, action, coordinates of the clicked point on the entire screen, and coordinates of the clicked point relative to the component when the event is triggered.|
 
 
@@ -30,6 +30,12 @@ If an action triggers multiple events, the order of these events is fixed. By de
 | target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md#eventtarget8) | Display area of the component that triggers the event.|
 | source<sup>8+</sup> | [SourceType](ts-gesture-settings.md#sourcetype)| Event input device.|
 
+## HoverEvent<sup>10+</sup>
+
+| Name     | Type                           | Description                  |
+| --------- | ------------------------------- | -------------------- |
+| stopPropagation   | () => void                          | Stops the event from bubbling upwards or downwards.|
+
 ## Example
 
 ```ts
@@ -48,7 +54,7 @@ struct MouseEventExample {
       Button(this.hoverText)
         .width(180).height(80)
         .backgroundColor(this.color)
-        .onHover((isHover: boolean) => {
+        .onHover((isHover: boolean, event: HoverEvent) => {
           // Use the onHover event to dynamically change the text content and background color of a button when the mouse pointer is hovered on it.
           if (isHover) {
             this.hoverText = 'hover';
diff --git a/en/application-dev/reference/native-apis/Readme-EN.md b/en/application-dev/reference/native-apis/Readme-EN.md
index 1101b441d4dc99531bf9373ebda56f7ef750d49a..59113d614cd2764c01e94db9440c40268d2b686e 100644
--- a/en/application-dev/reference/native-apis/Readme-EN.md
+++ b/en/application-dev/reference/native-apis/Readme-EN.md
@@ -18,6 +18,7 @@
   - [HuksKeyApi](_huks_key_api.md)
   - [HuksParamSetApi](_huks_param_set_api.md)
   - [HuksTypeApi](_huks_type_api.md)
+  - [Memory](memory.md)
 - Header Files
   - [drawing_bitmap.h](drawing__bitmap_8h.md)
   - [drawing_brush.h](drawing__brush_8h.md)
@@ -56,6 +57,7 @@
   - [native_huks_api.h](native__huks__api_8h.md)
   - [native_huks_param.h](native__huks__param_8h.md)
   - [native_huks_type.h](native__huks__type_8h.md)
+  - [purgeable_memory.h](purgeable__memory_8h.md)
 - Structs
   - [OH_Drawing_BitmapFormat](_o_h___drawing___bitmap_format.md)
   - [OH_NativeXComponent_Callback](_o_h___native_x_component___callback.md)
diff --git a/en/application-dev/reference/native-apis/memory.md b/en/application-dev/reference/native-apis/memory.md
new file mode 100644
index 0000000000000000000000000000000000000000..b460c22eecf1d2974bbcd2346d461ce1363644be
--- /dev/null
+++ b/en/application-dev/reference/native-apis/memory.md
@@ -0,0 +1,325 @@
+# Memory
+
+
+## Overview
+
+Provides APIs for memory management.
+
+@Syscap SystemCapability.CommonLibrary.PurgeableMemory
+
+**Since**
+
+10
+
+
+## Summary
+
+
+### Files
+
+| Name| Description|
+| -------- | -------- |
+| [purgeable_memory.h](purgeable__memory_8h.md) | Declares the APIs for managing purgeable memory at the native layer.|
+
+
+### Types
+
+| Name| Description|
+| -------- | -------- |
+| [OH_PurgeableMemory](#oh_purgeablememory) | Defines the type name of the **OH_PurgeableMemory** data.|
+| (\*[OH_PurgeableMemory_ModifyFunc](#oh_purgeablememory_modifyfunc)) (void \*, size_t, void \*) | Defines the function for rebuilding purgeable memory data.|
+
+
+### Functions
+
+| Name| Description|
+| -------- | -------- |
+| \*[OH_PurgeableMemory_Create](#oh_purgeablememory_create) (size_t size, [OH_PurgeableMemory_ModifyFunc](#oh_purgeablememory_modifyfunc) func, void \*funcPara) | Creates a **PurgeableMemory** object.|
+| [OH_PurgeableMemory_Destroy](#oh_purgeablememory_destroy) ([OH_PurgeableMemory](#oh_purgeablememory) \*purgObj) | Destroys a **PurgeableMemory** object.|
+| [OH_PurgeableMemory_BeginRead](#oh_purgeablememory_beginread) ([OH_PurgeableMemory](#oh_purgeablememory) \*purgObj) | Starts a read operation on a **PurgeableMemory** object. If purgeable memory is reclaimed, the rebuilding function is called to rebuild it.|
+| [OH_PurgeableMemory_EndRead](#oh_purgeablememory_endread) ([OH_PurgeableMemory](#oh_purgeablememory) \*purgObj) | Ends a read operation on a **PurgeableMemory** object. Now the system can reclaim purgeable memory.|
+| [OH_PurgeableMemory_BeginWrite](#oh_purgeablememory_beginwrite) ([OH_PurgeableMemory](#oh_purgeablememory) \*purgObj) | Begins a write operation on the **PurgeableMemory** object. If purgeable memory is reclaimed, the rebuilding function is called to rebuild it.|
+| [OH_PurgeableMemory_EndWrite](#oh_purgeablememory_endwrite) ([OH_PurgeableMemory](#oh_purgeablememory) \*purgObj) | Ends a write operation on the **PurgeableMemory** object. Now the system can reclaim purgeable memory.|
+| [OH_PurgeableMemory_GetContent](#oh_purgeablememory_getcontent) ([OH_PurgeableMemory](#oh_purgeablememory) \*purgObj) | Obtains the memory data of a **PurgeableMemory** object.|
+| [OH_PurgeableMemory_ContentSize](#oh_purgeablememory_contentsize) ([OH_PurgeableMemory](#oh_purgeablememory) \*purgObj) | Obtains the memory data size of a **PurgeableMemory** object.|
+| [OH_PurgeableMemory_AppendModify](#oh_purgeablememory_appendmodify) ([OH_PurgeableMemory](#oh_purgeablememory) \*purgObj, [OH_PurgeableMemory_ModifyFunc](#oh_purgeablememory_modifyfunc) func, void \*funcPara) | Adds a function for modifying a **PurgeableMemory** object.|
+
+
+## Type Description
+
+
+### OH_PurgeableMemory
+
+
+```
+typedef struct OH_PurgeableMemoryOH_PurgeableMemory
+```
+
+**Description**
+
+Defines the type name of the **OH_PurgeableMemory** data.
+
+**Since**
+
+10
+
+
+### OH_PurgeableMemory_ModifyFunc
+
+
+```
+typedef bool(* OH_PurgeableMemory_ModifyFunc) (void *, size_t, void *)
+```
+
+**Description**
+
+Defines the function for rebuilding purgeable memory data.
+
+**Parameters**
+
+| Name| Description|
+| -------- | -------- |
+| void \* | Pointer to the address of purgeable memory.|
+| size_t | Size of the memory data to rebuild.|
+| void \* | Pointer to the parameters used for rebuilding.|
+
+**Returns**
+
+Returns a success message if the operation is successful; returns a failure message otherwise.
+
+**Since**
+
+10
+
+
+## Function Description
+
+
+### OH_PurgeableMemory_AppendModify()
+
+
+```
+bool OH_PurgeableMemory_AppendModify (OH_PurgeableMemory * purgObj, OH_PurgeableMemory_ModifyFunc func, void * funcPara )
+```
+
+**Description**
+
+Adds a function for modifying a **PurgeableMemory** object.
+
+**Parameters**
+
+| Name| Description|
+| -------- | -------- |
+| purgObj | Pointer to the **PurgeableMemory** object.|
+| func | Function pointer to the modify function, which is used for further modification after the purgeable memory data is rebuilt.|
+| funcPara | Pointer to the parameters of the modify function.|
+
+**Returns**
+
+Returns a success message if the operation is successful; returns a failure message otherwise.
+
+**Since**
+
+10
+
+
+### OH_PurgeableMemory_BeginRead()
+
+
+```
+bool OH_PurgeableMemory_BeginRead (OH_PurgeableMemory * purgObj)
+```
+
+**Description**
+
+Starts a read operation on a **PurgeableMemory** object. If purgeable memory is reclaimed, the rebuilding function is called to rebuild it.
+
+**Parameters**
+
+| Name| Description|
+| -------- | -------- |
+| purgObj | Pointer to the **PurgeableMemory** object.|
+
+**Returns**
+
+Returns a success message if the purgeable memory data is ready; returns a failure message if purgeable memory has been reclaimed and fails to be rebuilt.
+
+**Since**
+
+10
+
+
+### OH_PurgeableMemory_BeginWrite()
+
+
+```
+bool OH_PurgeableMemory_BeginWrite (OH_PurgeableMemory * purgObj)
+```
+
+**Description**
+
+Begins a write operation on the **PurgeableMemory** object. If purgeable memory is reclaimed, the rebuilding function is called to rebuild it.
+
+**Parameters**
+
+| Name| Description|
+| -------- | -------- |
+| purgObj | Pointer to the **PurgeableMemory** object.|
+
+**Returns**
+
+Returns a success message if the purgeable memory data is ready; returns a failure message if purgeable memory has been reclaimed and fails to be rebuilt.
+
+**Since**
+
+10
+
+
+### OH_PurgeableMemory_ContentSize()
+
+
+```
+size_t OH_PurgeableMemory_ContentSize (OH_PurgeableMemory * purgObj)
+```
+
+**Description**
+
+Obtains the memory data size of a **PurgeableMemory** object.
+
+**Parameters**
+
+| Name| Description|
+| -------- | -------- |
+| purgObj | Pointer to the **PurgeableMemory** object. |
+
+**Returns**
+
+Returns the memory data size.
+
+**Since**
+
+10
+
+
+### OH_PurgeableMemory_Create()
+
+
+```
+OH_PurgeableMemory* OH_PurgeableMemory_Create (size_t size, OH_PurgeableMemory_ModifyFunc func, void * funcPara )
+```
+
+**Description**
+
+Creates a **PurgeableMemory** object.
+
+**Parameters**
+
+| Name| Description|
+| -------- | -------- |
+| size | Size of the **PurgeableMemory** object.|
+| func | Function pointer to the rebuilding function, which is used to restore the reclaimed purgeable memory data.|
+| funcPara | Pointer to the parameters of the rebuilding function.|
+
+**Returns**
+
+Returns the **PurgeableMemory** object.
+
+**Since**
+
+10
+
+
+### OH_PurgeableMemory_Destroy()
+
+
+```
+bool OH_PurgeableMemory_Destroy (OH_PurgeableMemory * purgObj)
+```
+
+**Description**
+
+Destroys a **PurgeableMemory** object.
+
+**Parameters**
+
+| Name| Description|
+| -------- | -------- |
+| purgObj | Pointer to the **PurgeableMemory** object.|
+
+**Returns**
+
+Returns a success message if the operation is successful; returns a failure message otherwise. If no value is passed, a failure message is returned. If a success message is returned, the value of **purgObj** will be cleared to avoid Use-After-Free (UAF).
+
+**Since**
+
+10
+
+
+### OH_PurgeableMemory_EndRead()
+
+
+```
+void OH_PurgeableMemory_EndRead (OH_PurgeableMemory * purgObj)
+```
+
+**Description**
+
+Ends a read operation on a **PurgeableMemory** object. Now the system can reclaim purgeable memory.
+
+**Parameters**
+
+| Name| Description|
+| -------- | -------- |
+| purgObj | Pointer to the **PurgeableMemory** object.|
+
+**Since**
+
+10
+
+
+### OH_PurgeableMemory_EndWrite()
+
+
+```
+void OH_PurgeableMemory_EndWrite (OH_PurgeableMemory * purgObj)
+```
+
+**Description**
+
+Ends a write operation on the **PurgeableMemory** object. Now the system can reclaim purgeable memory.
+
+**Parameters**
+
+| Name| Description|
+| -------- | -------- |
+| purgObj | Pointer to the **PurgeableMemory** object.|
+
+**Since**
+
+10
+
+
+### OH_PurgeableMemory_GetContent()
+
+
+```
+void* OH_PurgeableMemory_GetContent (OH_PurgeableMemory * purgObj)
+```
+
+**Description**
+
+Obtains the memory data of a **PurgeableMemory** object.
+
+**Parameters**
+
+| Name| Description|
+| -------- | -------- |
+| purgObj | Pointer to the **PurgeableMemory** object. |
+
+**Returns**
+
+Returns the pointer to the purgeable memory address.
+
+**Since**
+
+10
diff --git a/en/application-dev/reference/native-apis/purgeable__memory_8h.md b/en/application-dev/reference/native-apis/purgeable__memory_8h.md
new file mode 100644
index 0000000000000000000000000000000000000000..0b3a87145e85f2ad4ba50d7079109361aa55adf5
--- /dev/null
+++ b/en/application-dev/reference/native-apis/purgeable__memory_8h.md
@@ -0,0 +1,40 @@
+# purgeable_memory.h
+
+
+## Overview
+
+Declares the APIs for managing purgeable memory at the native layer.
+
+**Since**
+
+10
+
+**Related Modules**
+
+[Memory](memory.md)
+
+
+## Summary
+
+
+### Types
+
+| Name| Description|
+| -------- | -------- |
+| [OH_PurgeableMemory](memory.md#oh_purgeablememory) | Defines the type name of the **OH_PurgeableMemory** data.|
+| (\*[OH_PurgeableMemory_ModifyFunc](memory.md#oh_purgeablememory_modifyfunc)) (void \*, size_t, void \*) | Defines the function for rebuilding purgeable memory data.|
+
+
+### Functions
+
+| Name| Description|
+| -------- | -------- |
+| \*[OH_PurgeableMemory_Create](memory.md#oh_purgeablememory_create) (size_t size, [OH_PurgeableMemory_ModifyFunc](memory.md#oh_purgeablememory_modifyfunc) func, void \*funcPara) | Creates a **PurgeableMemory** object.|
+| [OH_PurgeableMemory_Destroy](memory.md#oh_purgeablememory_destroy) ([OH_PurgeableMemory](memory.md#oh_purgeablememory) \*purgObj) | Destroys a **PurgeableMemory** object.|
+| [OH_PurgeableMemory_BeginRead](memory.md#oh_purgeablememory_beginread) ([OH_PurgeableMemory](memory.md#oh_purgeablememory) \*purgObj) | Starts a read operation on a **PurgeableMemory** object. If purgeable memory is reclaimed, the rebuilding function is called to rebuild it.|
+| [OH_PurgeableMemory_EndRead](memory.md#oh_purgeablememory_endread) ([OH_PurgeableMemory](memory.md#oh_purgeablememory) \*purgObj) | Ends a read operation on a **PurgeableMemory** object. Now the system can reclaim purgeable memory.|
+| [OH_PurgeableMemory_BeginWrite](memory.md#oh_purgeablememory_beginwrite) ([OH_PurgeableMemory](memory.md#oh_purgeablememory) \*purgObj) | Begins a write operation on the **PurgeableMemory** object. If purgeable memory is reclaimed, the rebuilding function is called to rebuild it.|
+| [OH_PurgeableMemory_EndWrite](memory.md#oh_purgeablememory_endwrite) ([OH_PurgeableMemory](memory.md#oh_purgeablememory) \*purgObj) | Ends a write operation on the **PurgeableMemory** object. Now the system can reclaim purgeable memory.|
+| [OH_PurgeableMemory_GetContent](memory.md#oh_purgeablememory_getcontent) ([OH_PurgeableMemory](memory.md#oh_purgeablememory) \*purgObj) | Obtains the memory data of a **PurgeableMemory** object.|
+| [OH_PurgeableMemory_ContentSize](memory.md#oh_purgeablememory_contentsize) ([OH_PurgeableMemory](memory.md#oh_purgeablememory) \*purgObj) | Obtains the memory data size of a **PurgeableMemory** object.|
+| [OH_PurgeableMemory_AppendModify](memory.md#oh_purgeablememory_appendmodify) ([OH_PurgeableMemory](memory.md#oh_purgeablememory) \*purgObj, [OH_PurgeableMemory_ModifyFunc](memory.md#oh_purgeablememory_modifyfunc) func, void \*funcPara) | Adds a function for modifying a **PurgeableMemory** object.|
diff --git a/en/application-dev/task-management/background-task-overview.md b/en/application-dev/task-management/background-task-overview.md
index 6daab455ac74e8c051582562ef9ca390de01a97f..c17f1b3827430f5b0aa2408fb4289276c63942a9 100644
--- a/en/application-dev/task-management/background-task-overview.md
+++ b/en/application-dev/task-management/background-task-overview.md
@@ -3,6 +3,8 @@
 Frequent activities of background applications cause user devices to consume power quickly and respond slowly. To meet performance and power consumption requirements, the system allows applications in the background to execute only activities within the specifications. Activities beyond the specifications are suspended by default, and resources allocated to them will be reclaimed when the available resources are insufficient.
 If an application or a service module running in the background has a service to continue, it can request a [transient task](#transient-tasks) to delay the suspension or a [continuous task](#continuous-tasks) to prevent the suspension. If an application needs to execute a non-real-time task when running in the background, it can request a [Work Scheduler task](#work-scheduler-tasks). A privileged application can also request [efficiency resources](#efficiency-resources) for more flexibility.
 
+ **Resource usage constraints**: The system provides resource quotas for running services, including the memory usage and CPU usage in a continuous period of time, as well as disk write I/O volume in 24 hours. When the quota is reached, the system generates a warning-level log if the process is running in the foreground, and terminates the process if it is running in the background.
+
 
 ## Background Task Types
 
diff --git a/en/application-dev/ui/figures/layout-element-omposition.png b/en/application-dev/ui/figures/layout-element-omposition.png
index 03b69e006b2b8c9509056a8de65b4e2b0b37d834..b4bc30b110f51e8ceea3e47bbf279a007d96a5b3 100644
Binary files a/en/application-dev/ui/figures/layout-element-omposition.png and b/en/application-dev/ui/figures/layout-element-omposition.png differ
diff --git a/en/device-dev/subsystems/subsys-app-privilege-config-guide.md b/en/device-dev/subsystems/subsys-app-privilege-config-guide.md
index 32b52a3fe5616b1d0f8adb3bdb57ee6a51caeef2..e5a8f8a2e6af975dd852904fcf40b5d4b036163c 100644
--- a/en/device-dev/subsystems/subsys-app-privilege-config-guide.md
+++ b/en/device-dev/subsystems/subsys-app-privilege-config-guide.md
@@ -4,7 +4,9 @@ Application privileges are high-level capabilities of an application, for exampl
 
 OpenHarmony provides both general and device-specific application privileges. The latter can be configured by device vendors for applications on different devices. The privileges configured in the **install_list_capability.json** file take precedence over the privileges configured in the signature certificate.
 
-> **NOTE**<br>To avoid user dissatisfaction or even infringement, do not abuse application privileges.
+> **NOTE**
+> - To avoid user dissatisfaction or even infringement, do not abuse application privileges.
+> - The method of changing the application's APL in its profile applies only to the applications or services in debug mode. For a commercial application, apply for a release certificate and profile in the corresponding application market.
 
 ## General Application Privileges
 
@@ -18,6 +20,8 @@ General application privileges are privileges available to applications on all t
 | AllowAppDesktopIconHide | Allows the application icon to be hidden from the home screen.|
 | AllowAbilityPriorityQueried | Allows an ability to configure and query the priority.   |
 | AllowAbilityExcludeFromMissions | Allows an ability to be hidden in the mission stack.|
+| AllowAppShareLibrary | Allows an application to provide the [inter-application HSP capability](../../application-dev/quick-start/cross-app-hsp.md) for other applications.|
+| AllowMissionNotCleared | Allows an ability not to be cleared from the task list.|
 
 ### How to Configure
 
@@ -63,7 +67,8 @@ In addition to general application privileges, device vendors can define device-
 | allowAbilityExcludeFromMissions | bool | false| Allows an ability to be hidden in the mission stack.|
 | allowAppUsePrivilegeExtension | bool | false|Allows an application to use ServiceExtension and DataExtension abilities.|
 | allowFormVisibleNotify | bool | false| Allows a widget to be visible on the home screen.|
-| allowAppShareLibrary | bool | false | Allows an application to provide the [inter-application HSP capability](../../application-dev/quick-start/cross-app-hsp.md) for other applications.
+| allowAppShareLibrary | bool | false | Allows an application to provide the [inter-application HSP capability](../../application-dev/quick-start/cross-app-hsp.md) for other applications.|
+| allowMissionNotCleared | bool | false | Allows an ability not to be cleared from the task list.|
 
 ### How to Configure
 
@@ -92,6 +97,7 @@ Configure the required privileges in the [configuration file](https://gitee.com/
             "allowAppUsePrivilegeExtension": true, // Allow the application to use ServiceExtension and DataExtension abilities.
             "allowFormVisibleNotify": true // Allow a widget to be visible on the home screen.
             "allowAppShareLibrary": true // Allow the application to provide the inter-application HSP capability.
+            "allowMissionNotCleared": true // Allow an ability not to be cleared from the task list.
         },
 }
 ```
@@ -131,8 +137,9 @@ Configure the required privileges in the [configuration file](https://gitee.com/
 
 3. Use keytool to run the following command to obtain the certificate fingerprint.
 
-   > **NOTE**<br>You can obtain keytool from the **\tools\openjdk\bin** directory after DevEco Studio is installed.
-
+   > **NOTE**
+   >
+   > You can obtain keytool from the **\tools\openjdk\bin** directory after DevEco Studio is installed.
    ```shell
    keytool -printcert -file profile.cer
    
diff --git a/en/readme/arkui.md b/en/readme/arkui.md
index ba16aacc24c12faae73b28dbe13cbf3bd69fd7f7..9959f7510e5ba437d0e084e887c26d5d38b6fb36 100644
--- a/en/readme/arkui.md
+++ b/en/readme/arkui.md
@@ -6,7 +6,7 @@ ArkUI is a UI development framework that provides what you'll need to develop ap
 
 **Framework Structure**
 
-![en-us_image_0000001267647869](../application-dev/ui/figures/en-us_image_0000001267647869.png)
+![en-us_image_0000001183709904](../application-dev/ui/figures/arkui-framework.png)
 
 As shown above, the two development paradigms share the UI backend engine and language runtime. The UI backend engine implements the six basic capabilities of ArkUI. 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. This makes the declarative development paradigm a better choice for building application UIs.
 
diff --git a/en/release-notes/OpenHarmony-v4.0-beta1.md b/en/release-notes/OpenHarmony-v4.0-beta1.md
new file mode 100644
index 0000000000000000000000000000000000000000..2d7207549430b899f00ba15161bcba14459ac446
--- /dev/null
+++ b/en/release-notes/OpenHarmony-v4.0-beta1.md
@@ -0,0 +1,446 @@
+# OpenHarmony 4.0 Beta1
+
+
+## Version Description
+
+The standard system capabilities of OpenHarmony 4.0 are continuously improved. ArkUI further improves component capabilities and effects. The application framework optimizes ExtensionAbilities. Application packages can be installed without decompression and shared across applications. The unified data management framework (UDMF) is provided for distributed data management. The audio, media playback, media control, and camera capabilities of the multimedia subsystem are further enhanced. Badge management is added to the common event and notification subsystem. More key management capabilities are provided for the security subsystem. ArkCompiler updates the tool versions related to the C++ toolchain. The capabilities of multiple tools in the test framework are enhanced.
+
+OpenHarmony 4.0 Beta1 provides the first batch of API version 10 interfaces.
+
+
+### Application Framework
+
+- ExtensionAbilities adopt minimal management. APIs of the ExtensionAbilities are provided based on service scenarios to prevent calling of sensitive APIs.
+
+- Temporary, URI-based authorization is provided for data or files. An application can grant the read and write permissions of its own files to other applications.
+
+- UIExtensionAbilities are provided. The UI provided by a UIExtensionAbility can be embedded in the window of the invoker application for display. Currently, the following basic UIExtensionAbility capabilities have been built:
+  - Unified UIExtensionAbility template, with clear API definitions
+  - Display of the native default ExtensionAbility page, as well as UI customization
+
+  Templates such as Share and Picker will be gradually provided in later versions.
+
+- Atomic services can be shared. You can use the **UIAbility.onShare()** lifecycle provided by the UIAbility component to set the data to share. Users can share atomic services and widgets to another device through the sharing box.
+
+
+### ArkUI
+
+Addition or enhancement of basic components:
+
+- The ExtensionAbility component is provided so that you can embed the extended feature of an application into another application.
+
+- The drawing components **\<Rect>**, **\<Circle>**, **\<Ellipse>**, **\<Line>**, **\<Polyline>**, **\<Polygon>**, **\<Path>**, **\<Rect>**, and **\<Shape>** support universal attributes such as translating, cropping, and masking.
+
+- The mask color and animation can be customized for custom dialog boxes. For example, you can set parameters related to the animation effect.
+
+- The **bindContextMenu** and **bindMenu** methods allow you to set menu positions.
+
+- The divider set by the **\<ColumnSplit>** component can be dragged.
+
+- The **\<Refresh>** component allows you to set the content to be displayed during pulling down to refresh.
+
+- The width and height of the input string in the **\<Text>** component can be returned. If the string is not fully displayed, a dialog box showing the complete string is displayed when the mouse pointer is hovered over.
+
+Addition or enhancement of the animation effect:
+
+- Transition animation can be used for component attribute changes, for example, when the **\<Divider>** component is used to set the divider color and color attributes.
+
+- You can set the spherical attributes, lower edge pixel stretching, adaptive color, G2 rounded corners, shadows, and gradient attributes for components to implement advanced animation effect.
+
+Development efficiency improvement:
+
+- You can hold the **\<Text>**, **\<Image>**, **\<Video>**, **\<ListItem>**, and **\<GridItem>** components and drag them to the desired position. You can also disable this feature so that no dragging will be triggered upon holding.
+
+
+### Application Package Management
+
+- Application packages can be installed without being decompressed, optimizing the system startup performance and application installation performance.
+
+- Application packages can be shared across applications. System applications can provide their own capabilities to third-party applications. In addition, third-party applications do not need to integrate related content (including code, resources, and .so files) into their installation packages, reducing the integration and update costs.
+
+- Enterprise applications can be installed. The installation permission of enterprise applications is verified to prevent unauthorized distribution and installation of enterprise applications. In addition, the enterprise application certificate information can be queried, facilitating the management and revocation of enterprise applications in the application market.
+
+
+### Distributed Data Management
+
+- System applications can silently access DataShareExtension data of other system applications through the data management service agent. That is, system applications can access DataShareExtension data of another system application without starting that application.
+
+- System applications can access DataShareExtension data in single mode through the data management service agent.
+
+- The DataShare client provides the capability of subscribing to DataShareExtension data changes by URI prefix. The DataShare client will be notified of any DataShareExtension data change under the subscribed URI prefix.
+
+- The UDMF is added to support data standardization models, intra-device data dragging, UDMF data storage adaptation, permission management, and lifecycle management.
+
+
+### File Management
+
+- File category view management is supported. Gallery and other related applications manage media files in albums, indicating that images and videos do not need to pay attention to their storage locations. Functions such as adding and removing files in albums do not involve file I/O operations. Related APIs will be available in later versions.
+
+- Enhanced file I/O access capabilities are provided, including **randomAccessFile**, **moveDir**, **copyDir**, and **watcher**.
+
+- URI-based temporarily authorized file access and authorization revocation capabilities are supported, and cross-application local authorization or cross-device authorization are provided for files.
+
+
+### Graphics & Window
+
+**Graphics**
+
+- Property animations with custom content are supported.
+
+- Transition animation is provided when a component appears or disappears.
+
+- The performance of the unified rendering mode is optimized, including IPC performance optimization (for example, transferring rendering resources in shared memory mode to reduce IPC traffic), component-level rendering optimization (only upper-layer components are rendered to reduce GPU rendering workload), and the use of hardware synthesizer.
+
+- SVG decoding is supported for image encoding and decoding. Parameters, such as the total number of frames and time interval, are parsed for .gif files.
+
+**Window**
+
+- Listening for the focus status of a window is supported. In earlier versions, you can listen for the focus status of the window stage, but not that of system windows and application child windows. Now, you can register **'windowEvent'** to listen for the focused, out-of-focus, and hidden states of a window.
+
+- The z-order of child windows can be adjusted to the top layer. In earlier versions, for multiple sub-windows created in an application, the system always displays the last window displayed at the top of all the other windows. In addition, a window that is last touched or clicked is displayed at the top by default. Now, by using the **aiseToAppTop** method of the window object, you can adjust any child window to the top of the child windows of the window stage.
+
+- The immersive implementation mode is reconstructed to optimize the animation effect when an application is opened, exited, or redirected. In earlier versions, when an application is opened, the size of the full-screen application window does not contain the area of the status bar and navigation bar by default, unless the application calls **setWindowLayoutFullScreen** or **setSystemBarEnable** to enable immersive display. If an immersive application calls either APIs when it is being opened, the opening animation is displayed abnormally. In the new version, regardless of whether immersive display is enabled, the full-screen application window includes the status bar and navigation bar. The status bar and navigation bar of non-immersive applications are avoided by restricting the application display area through ArkUI.
+
+- The **sourceMode** field is added to the **Screen** attribute so that the system application can determine whether the screen is used as the primary screen, mirror of the primary screen, or extended screen.
+
+- The **stopMirror** and **stopExpand** APIs are added to the **Screen** module for you to stop screen mirroring or the extended mode.
+
+
+### Multimedia 
+
+**Audio Capability**
+
+- You can use native APIs to implement audio playback and recording.
+
+- You can query and listen for the playback device with the highest priority.
+
+- You can adjust the alarm volume independently.
+
+- Audio focus is supported. When playing an audio, an application does not need to apply for the focus. Instead, the system automatically applies for the focus in the background and executes the focus policy (such as pause, fade-out, and fade-out recovery). The application only needs to register a listener to receive focus interruption events and update the status, for example, stopping the progress bar when the program is paused.
+
+**Playback Control Framework**
+
+- Custom media information can be transmitted between the media provider and controller. The application can extend the media content display mode. For example, the controller can require the provider to display songs and lyrics in a special form.
+
+- The framework capability of the media playlist is supported. The provider provides the playlist content, and the controller obtains the playlist content and selects any media content to play.
+
+- The framework capability of historical playback records is supported. The AVSession framework provides the list of historical playback applications, sorted by playback sequence (including the applications that are being played and the applications that have exited).
+
+- A transmission channel is provided for custom media events, for example, a transmission channel for lyric content. Through this channel, the provider provides the lyric content, and the controller obtains the lyric content.
+
+- A transmission channel is provided for custom control commands. Through this channel, the controller sends custom control commands to the provider, for example, to require the provider to display bullet comments.
+
+**Media Playback**
+
+- HLS-based live streaming and data source-based streaming playback are supported.
+
+- HDI-based H.265 video hardware decoding and playback are supported.
+
+- Audio playback attributes can be set. Users can select the output audio type when using the player.
+
+- Automatic rotation is supported for videos with rotation angles.
+
+**Camera**
+
+- The error codes and exception handling mechanism of ArkTS APIs are optimized so that you can use error codes to locate error information.
+
+- The front camera provides preview mirroring. By default, the preview image on the front camera is mirrored.
+
+- You can query the main device attributes of a distributed camera, including the device name and type.
+
+- More refined resolution query is supported. You can query the supported size, format, and frame rate by preview, photographing, and recording usage.
+
+- The camera framework provides a horizontal coordinate system [0, 0, 1, 1]. All coordinate-related operations are performed based on this coordinate system.
+
+- When different camera applications use the same physical camera, the camera framework use priority control and mutual exclusion policies.
+
+
+### Common Event and Notification
+
+- Applications can enable or disable static event subscription.
+
+- System applications can remove sticky events that have been published.
+
+- Applications can set badges that represent the number of notifications.
+
+
+### Communication & Connectivity
+
+- NFC eSE card emulation is supported.
+
+- A random MAC address can be used for connection to an AP through Wi-Fi.
+
+- A static IP address can be used for connection to an API through Wi-Fi.
+
+
+### Security
+
+- The following key management capabilities are provided:
+  - Deriving chip-level keys based on the GID
+  - Import of the Chinese cryptography key
+  - Fine-grained access control for secondary identity authentication
+  - NO HASH mode for key management signature
+  - Specifying key parameters during calculation
+
+- The security levels of other devices can be queried on a small-system device.
+
+- The RSA key signature digest and padding can be specified for signature and signature verification.
+
+
+### Ability Access Control
+
+- An application-specific permission management page can be opened.
+
+- Identity verification is provided for system applications.
+
+
+### ArkCompiler
+
+- The task pool supports priority setting and automatic scaling algorithms.
+
+- Hot reloading performance is optimized, and the multi-HAP scenario is supported.
+
+- Multi-instance debugging is supported.
+
+- CFG construction of abnormal functions is supported.
+
+- The C++ compilation toolchain is updated as follows:
+  - The Clang/LLVM toolchain is upgraded to 15.0.4.
+  - The libc version is upgraded to 1.2.3. The interface performance of the libc library is optimized.
+  - The sigaction function provides the sigchain function.
+
+
+### Kernel
+
+- The HCK framework is supported.
+
+- Hierarchical configuration is provided for the Linux kernel.
+
+
+### Driver
+
+- The display hardware synthesis driver is decoupled from the chip platform, VDIs are provided, and an independent hardware synthesis process is used.
+
+- The display driver process provides the dead event listener to improve system fault recovery.
+
+- Detection of hot swap events and obtaining of camera modules are provided for USB cameras.
+
+- The preview drive capability is provided for USB cameras.
+
+- APIs are provided for querying audio effect capabilities, obtaining audio effect descriptors, and creating and destroying audio effect instances.
+
+- The capabilities of control flows and data flows are enhanced for sensors and motions.
+
+
+### Power Supply
+
+- The capability of querying and reporting the system power level is enhanced. The power level can be customized.
+
+- Wired and wireless charging types, including standard charging, fast charging, and super fast charging, can be reported.
+
+- The management mechanism of the running lock is enhanced, and the system power status and level are specified.
+
+- You can set the wakeup source, which can be the power button, mouse, keyboard, touchpad, screen, stylus, or leather case.
+
+- You can set the sleep source, which can be the power button, leather case, or auto-sleep upon timeout.
+
+- Development guides are provided for the management of power, battery, display brightness, power consumption statistics, and thermal.
+
+
+### Pan-Sensor
+
+- You can query the preset vibration effects supported by a device and check whether a vibration effect (specified by **EffectID**) is supported by the device.
+
+- An API is provided for stopping the vibrator in any mode, so that you do not need to find the vibration mode in use in order to stop the vibrator.
+
+
+### Test Framework
+
+**Test Framework arkXtest**
+
+- The definition capability is provided in the automatic script test suite for more flexible script design.
+
+- The object-level assertion capability is provided for test scripts.
+
+- The simulation of Chinese input, mouse operations, and area screenshots is provided.
+
+**Self-Test Execution Framework developer_test**
+
+- Test task management is improved. Now you can execute historical tasks by task ID.
+
+- The precise test capability is provided. Now you can filter and execute test cases at the subsystem, component, test suite, and test case levels.
+
+- You can execute HATS test cases.
+
+**Stability Test Tool wukong**
+
+Rotation event injection is supported.
+
+**Performance Development Tool smartperf_host**
+
+- Frame timeline capture and display capabilities are provided for you to capture and display frame freezing and frame loss data.
+
+- Scheduling analysis capture and display capabilities are provided for you to capture and display data related to CPU scheduling analysis and thread scheduling analysis.
+
+- Call stack visualization is used to display the symbolic results of .so files compiled. The proportions of functions in different libraries are displayed in pie charts.
+
+
+## Version Mapping
+
+**Table 1** Version mapping of software and tools
+
+| Software/Tool| Version| Remarks|
+| -------- | -------- | -------- |
+| OpenHarmony | 4.0 Beta1| NA |
+| Public SDK | Ohos_sdk_public 4.0.7.5 (API Version 10 Beta1)| This toolkit is intended for application developers and does not contain system APIs that require system permissions. It is provided as standard in DevEco Studio.|
+| (Optional) HUAWEI DevEco Studio| 4.0 Beta1| Recommended for developing OpenHarmony applications *To be released*|
+| (Optional) HUAWEI DevEco Device Tool| 3.1 Release| Recommended for developing OpenHarmony smart devices|
+
+
+## Source Code Acquisition
+
+
+### Prerequisites
+
+1. Register your account with Gitee.
+
+2. Register an SSH public key for access to Gitee.
+
+3. Install the [git client](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) and [git-lfs](https://gitee.com/vcs-all-in-one/git-lfs?_from=gitee_search#downloading), and configure user information.
+  
+   ```
+   git config --global user.name "yourname"
+   git config --global user.email "your-email-address"
+   git config --global credential.helper store
+   ```
+
+4. Run the following commands to install the **repo** tool:
+  
+   ```
+   curl -s https://gitee.com/oschina/repo/raw/fork_flow/repo-py3 > /usr/local/bin/repo  # If you do not have the permission, download the tool to another directory and configure it as an environment variable by running the chmod a+x /usr/local/bin/repo command.
+   pip3 install -i https://repo.huaweicloud.com/repository/pypi/simple requests
+   ```
+
+
+### Acquiring Source Code Using the repo Tool
+
+**Method 1 (recommended)**
+
+Use the **repo** tool to download the source code over SSH. (You must have an SSH public key for access to Gitee.)
+
+- Obtain the source code from the version branch. You can obtain the latest source code of the version branch, which includes the code that has been incorporated into the branch up until the time you run the following commands:
+   ```
+   repo init -u git@gitee.com:openharmony/manifest.git -b OpenHarmony-4.0-Beta1 --no-repo-verify
+   repo sync -c
+   repo forall -c 'git lfs pull'
+   ```
+   
+- Obtain the source code from the version tag, which is the same as that released with the version.
+   ```
+   repo init -u git@gitee.com:openharmony/manifest.git -b refs/tags/OpenHarmony-v4.0-Beta1 --no-repo-verify
+   repo sync -c
+   repo forall -c 'git lfs pull'
+   ```
+
+**Method 2**
+
+Use the **repo** tool to download the source code over HTTPS.
+
+- Obtain the source code from the version branch. You can obtain the latest source code of the version branch, which includes the code that has been incorporated into the branch up until the time you run the following commands:
+   ```
+   repo init -u https://gitee.com/openharmony/manifest -b OpenHarmony-4.0-Beta1 --no-repo-verify
+   repo sync -c
+   repo forall -c 'git lfs pull'
+   ```
+   
+- Obtain the source code from the version tag, which is the same as that released with the version.
+   ```
+   repo init -u https://gitee.com/openharmony/manifest -b refs/tags/OpenHarmony-v4.0-Beta1 --no-repo-verify
+   repo sync -c
+   repo forall -c 'git lfs pull'
+   ```
+
+
+### Acquiring Source Code from Mirrors
+
+**Table 2** Mirrors for acquiring source code
+
+| Source Code                               | Version| Mirror                                                | SHA-256 Checksum                                            | Software Package Size|
+| --------------------------------------- | ------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | -------- |
+| Full code base (for mini, small, and standard systems)       | 4.0 Beta1    | [Download](https://repo.huaweicloud.com/openharmony/os/4.0-Beta1/code-v4.0-Beta1.tar.gz) | [Download](https://repo.huaweicloud.com/openharmony/os/4.0-Beta1/code-v4.0-Beta1.tar.gz.sha256) | 26.2 GB |
+| Hi3861 solution (binary)       | 4.0 Beta1    | [Download](https://repo.huaweicloud.com/openharmony/os/4.0-Beta1/hispark_pegasus.tar.gz) | [Download](https://repo.huaweicloud.com/openharmony/os/4.0-Beta1/hispark_pegasus.tar.gz.sha256) | 25.1 MB |
+| Hi3516 solution-LiteOS (binary)| 4.0 Beta1    | [Download](https://repo.huaweicloud.com/openharmony/os/4.0-Beta1/hispark_taurus_LiteOS.tar.gz) | [Download](https://repo.huaweicloud.com/openharmony/os/4.0-Beta1/hispark_taurus_LiteOS.tar.gz.sha256) | 287.6 MB |
+| Hi3516 solution-Linux (binary) | 4.0 Beta1    | [Download](https://repo.huaweicloud.com/openharmony/os/4.0-Beta1/hispark_taurus_Linux.tar.gz) | [Download](https://repo.huaweicloud.com/openharmony/os/4.0-Beta1/hispark_taurus_Linux.tar.gz.sha256) | 186.4 MB |
+| RK3568 standard system solution (binary)       | 4.0 Beta1    | [Download](https://repo.huaweicloud.com/openharmony/os/4.0-Beta1/dayu200_standard_arm32.tar.gz) | [Download](https://repo.huaweicloud.com/openharmony/os/4.0-Beta1/dayu200_standard_arm32.tar.gz.sha256) | 4.5 GB |
+| Public SDK package for the standard system (macOS)            | 4.0.7.5      | [Download](https://repo.huaweicloud.com/openharmony/os/4.0-Beta1/ohos-sdk-mac-public-20230605.tar.gz) | [Download](https://repo.huaweicloud.com/openharmony/os/4.0-Beta1/ohos-sdk-mac-public-20230605.tar.gz.sha256) | 718.2 MB |
+| Public SDK package for the standard system (macOS-M1)            | 4.0.7.5      | [Download](https://repo.huaweicloud.com/openharmony/os/4.0-Beta1/L2-SDK-MAC-M1-PUBLIC-20230605.tar.gz) | [Download](https://repo.huaweicloud.com/openharmony/os/4.0-Beta1/L2-SDK-MAC-M1-PUBLIC-20230605.tar.gz.sha256) | 673.2 MB |
+| Public SDK package for the standard system (Windows\Linux)  | 4.0.7.5      | [Download](https://repo.huaweicloud.com/openharmony/os/4.0-Beta1/ohos-sdk-windows_linux-public-20230605.tar.gz) | [Download](https://repo.huaweicloud.com/openharmony/os/4.0-Beta1/ohos-sdk-windows_linux-public-20230605.tar.gz.sha256) | 1.8 GB |
+
+## What's New
+
+This version has the following updates to OpenHarmony 3.2 Release.
+
+### APIs
+
+For details about the API changes over OpenHarmony 3.2 Release, see [API Differences](/api-diff/v4.0-beta1/Readme-EN.md). A few API changes may affect applications developed using API version 9 or earlier. For details about the change impact and adaptation guide, see [Changelogs](changelogs/v4.0-beta1/Readme-EN.md).
+
+
+### Feature Updates
+
+[Version Description](#version-description)
+
+### Chip and Development Board Adaptation
+
+For details about the adaptation status, see [SIG-Devboard](https://gitee.com/openharmony/community/blob/master/sig/sig_devboard/sig_devboard.md).
+
+
+### Samples
+
+**Table 3** New samples
+
+| Subsystem| Name| Introduction| Programming Language|
+| -------- | -------- | -------- | -------- |
+| Multimedia| [AVSession - Controller](https://gitee.com/openharmony/applications_app_samples/tree/OpenHarmony-v4.0-Beta1/code/BasicFeature/Media/AVSession/MediaController) (for system applications only)| This sample shows the features of MediaController. It uses \@ohos.multimedia.avsession to implement custom information exchange between the provider and controller.| ArkTS |
+| Multimedia| [AVSession - Provider](https://gitee.com/openharmony/applications_app_samples/tree/OpenHarmony-v4.0-Beta1/code/BasicFeature/Media/AVSession/MediaProvider)| This sample shows the features of MediaProvider. It uses \@ohos.multimedia.avsession to implement custom information exchange between the provider and controller.| ArkTS |
+| Multimedia| [Audio Management](https://gitee.com/openharmony/applications_app_samples/tree/OpenHarmony-v4.0-Beta1/code/BasicFeature/Media/Audio)| This sample demonstrates audio-related features. It uses \@ohos.multimedia.audio to switch and query the audio device and implement audio interruption.| ArkTS |
+| DFX | Application Recovery | This sample shows how to adapt fault recovery-related APIs in an application.| ArkTS |
+
+For more information, visit [Samples](https://gitee.com/openharmony/applications_app_samples).
+
+
+## Resolved Issues
+
+**Table 4** Resolved issues
+
+| Issue No.| Description|
+| -------- | -------- |
+| I70PRZ | The avoid area for non-immersive UI is invalid.|
+| I72F9P | There is a high probability that the IPC_2_29472 thread in the ohos.samples.distributedcalc process causes a C++ crash in libwindow_native_kit.z.so.|
+| I6W7ZX | Non-immersive windows penetrate the home screen.|
+| I76QTN | There is a high probability that the IPC_0_18272 thread in the ohos.samples.distributedmusicplayer process causes a C++ crash in libruntime.z.so.|
+| I71TCX | When a call is made without a SIM card, the call is not automatically disconnected after the CallUI is started.|
+| I77PZK | There is a high probability that the RSRenderThread thread in the com.ohos.systemui process causes a C++ crash in libmali-bifrost-g52-g2p0-ohos.so.|
+| I73CUZ | Competition exists in prepare_to_wait_event, leading to UAF.|
+| I770WV | Preview images cannot be backed up.|
+| I6ZDHJ | If **undefined** is passed in for an optional parameter of a globalization API, the default value is not used.|
+| I71KZA | If **null** is passed in for an optional parameter of a globalization API, the default value is not used.|
+| I6YT0U | There is a high probability that the libeventhandler.z.so stack encounters app freezing in the com.ohos.launcher process.|
+| I6YSE5 | There is a high probability that the com.ohos.photos thread in the com.ohos.photos process causes a C++ crash in librender_service_base.z.so.|
+| I77AUK | Calling **connectAbility** fails in distributed scheduling scenarios.|
+| I78J10 | The home screen does not respond when a large folder is dragged repeatedly.|
+| I7975U | When a user opens an image in a gallery application and returns to the previous page, a blank page is displayed.|
+
+
+## Known Issues
+
+**Table 5** Known issues
+
+| Issue No.| Description| Impact| To Be Resolved By|
+| -------- | -------- | -------- | -------- |
+| I78CH7 | Memory leakage occurs in libace.z.so when applications are repeatedly added to or removed from the dock bar.| Each time a widget is moved to a valid area, 99 KB memory of the ArkUI module leaks. This operation scenario is uncommon, and the leak issue disappears after the application is restarted. The impact is controllable.| 2023-07-15|
+| I78CBC | Memory leakage occurs in libace.z.so when a user touches an image folder in Gallery to browse images in grid form and then exits repeatedly.| Each time the user touches an image folder in Gallery to browse images in grid form and then exits, 19 KB memory of the ArkUI module leaks. When the user touches Back on the application, the leak issue disappears. The impact is controllable.| 2023-07-15|
+| I78C9W | Memory leakage occurs in libace.z.so when a user touches an image in Gallery to maximize it and then exits repeatedly.| Each time the user touches an image in Gallery to maximize it and then exits, 10 KB memory of the ArkUI module leaks. When the user touches Back on the application, the leak issue disappears. The impact is controllable.| 2023-07-15|
+| I6U4ZT | The first photo in Gallery cannot be opened when the power supply is disconnected immediately after the photo is taken.| This problem occurs only in the immediate power-off scenario. A new set of mediaLibrary APIs needs to be adapted. The impact is controllable.| 2023-06-30|
+| I79752 | There is a medium probability that the .ohos.smartperf thread of the com.ohos.smartperf process causes a C++ crash in libark_jsruntime.so.| This issue neither occurs in core applications nor affects ARP indicators. The impact is controllable.| 2023-06-30|
+| I79P3K | There is a low probability that the onDestroy stack encounters a JS crash in the com.ohos.callui process.| The application will be reinstalled after the JS crash. This issue does not affect the use of the Call application.| 2023-06-30|
+| I79TCB | There is a low probability that the VizCompositorTh thread of the com.ohos.note process causes a C++ crash in libweb_engine.soTh.| The application will be reinstalled after the JS crash. This issue does not affect the use of the Note application.| 2023-06-30|
diff --git a/en/release-notes/Readme.md b/en/release-notes/Readme.md
index e743516aad3642f7c9bb36e152304979d8f7281e..4a49ce72f79cb4ee7879ac8ac9eaa38332dbf977 100644
--- a/en/release-notes/Readme.md
+++ b/en/release-notes/Readme.md
@@ -1,30 +1,35 @@
 # OpenHarmony Release Notes
+
+## OpenHarmony 4.x Releases
+
+- [OpenHarmony v4.0 Beta1 (2023-06-03)](OpenHarmony-v4.0-beta1.md)
+
 ## OpenHarmony 3.x Releases
 
 - [OpenHarmony v3.2 Release (2023-04-09)](OpenHarmony-v3.2-release.md)
-- [OpenHarmony v3.2.1 Release (2023-05-22)](OpenHarmony-v3.2.1-release.md)
+   - [OpenHarmony v3.2.1 Release (2023-05-22)](OpenHarmony-v3.2.1-release.md)
 - [OpenHarmony v3.2 Beta5 (2023-01-31)](OpenHarmony-v3.2-beta5.md)
 - [OpenHarmony v3.2 Beta4 (2022-11-30)](OpenHarmony-v3.2-beta4.md)
 - [OpenHarmony v3.2 Beta3 (2022-09-30)](OpenHarmony-v3.2-beta3.md)
 - [OpenHarmony v3.2 Beta2 (2022-07-30)](OpenHarmony-v3.2-beta2.md)
 - [OpenHarmony v3.2 Beta1 (2022-05-31)](OpenHarmony-v3.2-beta1.md)
 - [OpenHarmony v3.1 Release (2022-03-30)](OpenHarmony-v3.1-release.md)
-- [OpenHarmony v3.1.7 Release (2023-04-04)](OpenHarmony-v3.1.7-release.md)
-- [OpenHarmony v3.1.6 Release (2023-02-06)](OpenHarmony-v3.1.6-release.md)
-- [OpenHarmony v3.1.5 Release (2023-01-10)](OpenHarmony-v3.1.5-release.md)
-- [OpenHarmony v3.1.4 Release (2022-11-02)](OpenHarmony-v3.1.4-release.md)
-- [OpenHarmony v3.1.3 Release (2022-09-30)](OpenHarmony-v3.1.3-release.md)
-- [OpenHarmony v3.1.2 Release (2022-08-24)](OpenHarmony-v3.1.2-release.md)
-- [OpenHarmony v3.1.1 Release (2022-05-31)](OpenHarmony-v3.1.1-release.md)
+   - [OpenHarmony v3.1.7 Release (2023-04-04)](OpenHarmony-v3.1.7-release.md)
+   - [OpenHarmony v3.1.6 Release (2023-02-06)](OpenHarmony-v3.1.6-release.md)
+   - [OpenHarmony v3.1.5 Release (2023-01-10)](OpenHarmony-v3.1.5-release.md)
+   - [OpenHarmony v3.1.4 Release (2022-11-02)](OpenHarmony-v3.1.4-release.md)
+   - [OpenHarmony v3.1.3 Release (2022-09-30)](OpenHarmony-v3.1.3-release.md)
+   - [OpenHarmony v3.1.2 Release (2022-08-24)](OpenHarmony-v3.1.2-release.md)
+   - [OpenHarmony v3.1.1 Release (2022-05-31)](OpenHarmony-v3.1.1-release.md)
 - [OpenHarmony v3.1 Beta (2021-12-31)](OpenHarmony-v3.1-beta.md)
 - [OpenHarmony v3.0 LTS (2021-09-30)](OpenHarmony-v3.0-LTS.md)
-- [OpenHarmony v3.0.8 LTS (2022-03-03)](OpenHarmony-v3.0.8-LTS.md)
-- [OpenHarmony v3.0.7 LTS (2022-12-05)](OpenHarmony-v3.0.7-LTS.md)
-- [OpenHarmony v3.0.6 LTS (2022-09-15)](OpenHarmony-v3.0.6-LTS.md)
-- [OpenHarmony v3.0.5 LTS (2022-07-01)](OpenHarmony-v3.0.5-LTS.md)
-- [OpenHarmony v3.0.3 LTS (2022-04-08)](OpenHarmony-v3.0.3-LTS.md)
-- [OpenHarmony v3.0.2 LTS (2022-03-18)](OpenHarmony-v3.0.2-LTS.md)
-- [OpenHarmony v3.0.1 LTS (2022-01-12)](OpenHarmony-v3.0.1-LTS.md)
+   - [OpenHarmony v3.0.8 LTS (2022-03-03)](OpenHarmony-v3.0.8-LTS.md)
+   - [OpenHarmony v3.0.7 LTS (2022-12-05)](OpenHarmony-v3.0.7-LTS.md)
+   - [OpenHarmony v3.0.6 LTS (2022-09-15)](OpenHarmony-v3.0.6-LTS.md)
+   - [OpenHarmony v3.0.5 LTS (2022-07-01)](OpenHarmony-v3.0.5-LTS.md)
+   - [OpenHarmony v3.0.3 LTS (2022-04-08)](OpenHarmony-v3.0.3-LTS.md)
+   - [OpenHarmony v3.0.2 LTS (2022-03-18)](OpenHarmony-v3.0.2-LTS.md)
+   - [OpenHarmony v3.0.1 LTS (2022-01-12)](OpenHarmony-v3.0.1-LTS.md)
 
 ## OpenHarmony 2.x Releases
 
diff --git a/en/release-notes/changelogs/v4.0-beta1/Readme-EN.md b/en/release-notes/changelogs/v4.0-beta1/Readme-EN.md
new file mode 100644
index 0000000000000000000000000000000000000000..747efaafba6652047c44174f2f4f63dc98de932a
--- /dev/null
+++ b/en/release-notes/changelogs/v4.0-beta1/Readme-EN.md
@@ -0,0 +1,12 @@
+# Readme
+
+| Subsystem        | Change Type    | Change Description                                                    |
+| :------------- | ------------ | ------------------------------------------------------------ |
+| Common          | Verification enhanced    | [Permission verification enhanced for system APIs. Now only system applications are allowed to use system APIs. If third-party applications use a system API, error 202 is returned.](changelogs-common.md)|
+| Ability framework        | Behavior changed    | [In the **appRecovery** API, the enum names of **RestartFlag** are changed from **NO_RESTART** upon a specific fault to **RESTART** upon a specific fault.](changelogs-ability.md)|
+| Multi-language runtime subsystem| Parsing rule changed| [LLVM parsing format changed. When your code depends on the **version-script** or **-gcc-toolchain** option, parsing may fail if you continue to use the original LLVM 12 configuration file or options.](changelogs-arkcompiler.md)|
+| Multi-language runtime subsystem| Verification enhanced    | [New alarms are added and existing alarms are enhanced along with the upgrade from LLVM 12 to LLVM 15](changelogs-arkcompiler.md)|
+| Multi-language runtime subsystem| Verification enhanced    | [LLVM emu-tls is changed. If you use both LLVM 12 and LLVM 15, the emu-tls symbol cannot be found in libc++.so.](changelogs-arkcompiler.md)|
+| Multi-language runtime subsystem| Verification enhanced    | [New features and internal interface changes in the official release of LLVM 15 are inherited.](changelogs-arkcompiler.md)|
+| Bundle management subsystem        | Mechanism changed    | [The HAP is no longer decompressed during HAP installation.](changelogs-bundlemanager.md)|
+| Resource scheduler subsystem      | Behavior changed    | [The reminder agent allows you to customize buttons for system applications. Clicking a custom button will redirect you to the specified application page.](changelogs-resourceschedule.md)|
diff --git a/en/release-notes/changelogs/v4.0-beta1/changelogs-ability.md b/en/release-notes/changelogs/v4.0-beta1/changelogs-ability.md
new file mode 100644
index 0000000000000000000000000000000000000000..c79c4521a5a2ecbea39b48582705b168b3ec4c3e
--- /dev/null
+++ b/en/release-notes/changelogs/v4.0-beta1/changelogs-ability.md
@@ -0,0 +1,37 @@
+# Ability Framework Changelog
+
+
+## cl.ability.1 RestartFlag Attribute Names Changed and Unsupported Attribute Deleted in appRecovery
+
+In the **appRecovery** API, the enum names of **RestartFlag** are changed from **NO_RESTART** upon a specific fault to **RESTART** upon a specific fault. 
+The **CPP_CRASH_NO_RESTART** enum is deleted.
+
+**Change Impact**
+
+If your application uses the **CPP_CRASH_NO_RESTART**, **JS_CRASH_NO_RESTART**, or **APP_FREEZE_NO_RESTART** attribute in versions earlier than 4.0.2.3, its behavior will change after an upgrade to 4.0.2.3.
+
+**Key API/Component Changes**
+
+**RestartFlag** <sup>9+</sup>
+
+Before change
+| Name                         | Value  | Description                                                        |
+| ----------------------------- | ---- | ------------------------------------------------------------ |
+| ALWAYS_RESTART           | 0    | The application is restarted in all cases.|
+| CPP_CRASH_NO_RESTART           | 0x0001    | The application is **not restarted** in the case of CPP_CRASH.|
+| JS_CRASH_NO_RESTART           | 0x0002    | The application is **not restarted** in the case of JS_CRASH.|
+| APP_FREEZE_NO_RESTART           | 0x0004    | The application is **not restarted** in the case of APP_FREEZE.|
+| NO_RESTART           | 0xFFFF    | The application is not restarted in any case.|
+
+After change
+| Name      | Value  | Description      |
+| ---------- | ---- | ---------- |
+| ALWAYS_RESTART   | 0    | The application is restarted in all cases.|
+| CPP_CRASH_NO_RESTART   | NA    | **Deleted.** The restart in this scenario is not supported.|
+| RESTART_WHEN_JS_CRASH   | 0x0001    | The application is **restarted** in the case of JS_CRASH.|
+| RESTART_WHEN_APP_FREEZE   | 0x0002    | The application is **restarted** in the case of APP_FREEZE.|
+| NO_RESTART           | 0xFFFF    | The application is not restarted in any case.|
+
+**Adaptation Guide**
+
+Perform adaptation based on the new semantics.
diff --git a/en/release-notes/changelogs/v4.0-beta1/changelogs-arkcompiler.md b/en/release-notes/changelogs/v4.0-beta1/changelogs-arkcompiler.md
new file mode 100644
index 0000000000000000000000000000000000000000..649d0ff7edbadf591c49c510e91cbbe73d27f929
--- /dev/null
+++ b/en/release-notes/changelogs/v4.0-beta1/changelogs-arkcompiler.md
@@ -0,0 +1,160 @@
+# Multi-language Runtime Subsystem Changelog
+## cl.arkcompiler.1 New Alarms and Existing Alarm Enhancements for LLVM
+
+**Change Impact**
+
+By default, the **-Werror** option is disabled for the OpenHarmony NDK. If you have enabled the **-Werror** option, you are advised to correct the code based on the suggestions in the check result or mask the errors.
+
+**Changes in Key Compilation Check Rules**
+
+| New Check Item| Description| Suggestion|
+| --- | --- | --- |
+| Wunused-but-set-variable | An alarm is generated when the code contains unused variables (including the ++ operator).| Add the **maybe_unused** attribute when defining variables or use macros to distinguish variables.|
+| Wdeprecated-non-prototype | An alarm is generated when a function without a prototype exists in the code.| Add a function prototype and specify the parameters.|
+| Wunqualified-std-cast-call | An alarm is generated when **std::move** is incorrectly used in code.| Specify the use case of **std::move** and check the code.|
+| Wdeprecated-builtins | An alarm is generated when a deprecated built-in function is used in the code.| Use the substitute function.|
+| Warray-parameter | An alarm is generated when a function parameter contains an array that uses inconsistent forms.| Ensure the consistency of the function parameter.|
+| Wbitwise-instead-of-logical | An alarm is generated when bitwise OR is used in Boolean operations.| Use logical OR in Boolean operations.|
+| Wint-conversion | An alarm is generated when an int variable is converted to a pointer in the code.| Use a new implementation mode in the code.|
+| Wdeprecated-declarations | An alarm is generated when a deprecated definition (including functions and variables) is used in code.| Use a new implementation mode in the code.|
+| Wnull-pointer-subtraction | An alarm is generated when a null pointer is used in the subtraction operation.| Do not a null pointer in the subtraction operation.|
+| Wunused-but-set-parameter | An alarm is generated when a function contains unused parameters.| Delete unused parameters.|
+| Warray-bounds | An alarm is generated when out-of-bounds access to an array occurs in the code.| Modify the out-of-bounds access.|
+| Wdeprecated-pragma | An alarm is generated when a deprecated macro is used in the code.| Delete the deprecated macro.|
+| Wreserved-identifier | An alarm is generated when a variable starting with __ is used in the code.| Check the code to prevent variables starting with underscores (_) from being used externally.|
+
+ **Adaptation Guide**
+
+1. For issues in the code that are not detected by LLVM 12, check and update the code.
+2. Some old implementations are discarded during LLVM update. Adapt to the new rules and update the code.
+3. If you believe a certain type of error can be masked, use the **-Wno-xxx** option to mask the error.
+
+Defective code example
+
+```
+void Heap::Resume(TriggerGCType gcType)
+{
+    if (mode_ != HeapMode::SPAWN &&
+        activeSemiSpace_->AdjustCapacity(inactiveSemiSpace_->GetAllocatedSizeSinceGC())) {
+        // If activeSpace capacity changes, oldSpace maximumCapacity should change too.
+        size_t multiple = 2;
+        // oldSpaceMaxLimit is assigned a value but is not used.
+        size_t oldSpaceMaxLimit = 0;
+        if (activeSemiSpace_->GetInitialCapacity() >= inactiveSemiSpace_->GetInitialCapacity()) {
+            size_t delta = activeSemiSpace_->GetInitialCapacity() - inactiveSemiSpace_->GetInitialCapacity();
+            oldSpaceMaxLimit = oldSpace_->GetMaximumCapacity() - delta * multiple;
+        } else {
+            size_t delta = inactiveSemiSpace_->GetInitialCapacity() - activeSemiSpace_->GetInitialCapacity();
+            oldSpaceMaxLimit = oldSpace_->GetMaximumCapacity() + delta * multiple;
+        }
+        inactiveSemiSpace_->SetInitialCapacity(activeSemiSpace_->GetInitialCapacity());
+    }
+    // irrelated code ...
+}
+```
+
+The oldSpaceMaxLimit variable is not used, and the compiler reports an alarm.
+
+```
+../../arkcompiler/ets_runtime/ecmascript/mem/heap.cpp:247:16: error: variable 'oldSpaceMaxLimit' set but not used [-Werror,-Wunused-but-set-variable]
+        size_t oldSpaceMaxLimit = 0;
+```
+
+The error is rectified after the attribute is added.
+
+```
+void Heap::Resume(TriggerGCType gcType)
+{
+    if (mode_ != HeapMode::SPAWN &&
+        activeSemiSpace_->AdjustCapacity(inactiveSemiSpace_->GetAllocatedSizeSinceGC())) {
+        // If activeSpace capacity changes, oldSpace maximumCapacity should change too.
+        size_t multiple = 2;
+        // Add the maybe_unused attribute and declare that the variable oldSpaceMaxLimit may not be used.
+        [[maybe_unused]] size_t oldSpaceMaxLimit = 0;
+        if (activeSemiSpace_->GetInitialCapacity() >= inactiveSemiSpace_->GetInitialCapacity()) {
+            size_t delta = activeSemiSpace_->GetInitialCapacity() - inactiveSemiSpace_->GetInitialCapacity();
+            oldSpaceMaxLimit = oldSpace_->GetMaximumCapacity() - delta * multiple;
+        } else {
+            size_t delta = inactiveSemiSpace_->GetInitialCapacity() - activeSemiSpace_->GetInitialCapacity();
+            oldSpaceMaxLimit = oldSpace_->GetMaximumCapacity() + delta * multiple;
+        }
+        inactiveSemiSpace_->SetInitialCapacity(activeSemiSpace_->GetInitialCapacity());
+    }
+    // irrelated code ...
+}
+```
+
+## cl.arkcompiler.2 LLVM Parsing Format Changed
+
+**Change Impact**
+
+When your code depends on the **version-script** or **-gcc-toolchain** option, parsing may fail if you continue to use the original LLVM 12 configuration file or options.
+
+**Changes in Key Compilation Rules**
+
+1. The symbol representation is changed. In the new version, consecutive greater signs (>) are represented as ">>", which was represented as "> >" in the old version.
+2. The -xx options are deprecated. For example, the **-gcc-toolchain** option is replaced by the **--gcc-toolchain** option. (This option has been marked as deprecated in versions later than Clang 3.4 and is officially deprecated in LLVM15.)
+
+**Adaptation Guide**
+
+If two consecutive greater signs (>) exist in the code (without considering the number of spaces in the middle), they will be parsed as "> >" in the older version and ">>" in the new version in version-script (due to mangling differences). In LLVM15, ">>" must be used.
+
+Original configuration file
+
+```
+{
+  global:
+  extern "C++" {
+    "google::protobuf::TextFormat::ParseFromString(std::__cxx11::basic_string<char, std::char_traits<char>, std::allocator<char> > const&, google::protobuf::Message*)";
+    // In LLVM 12, "> >" can be parsed, but ">>" cannot.
+    "google::protobuf::TextFormat::PrintToString(google::protobuf::Message const&, std::__cxx11::basic_string<char, std::char_traits<char>, std::allocator<char> >*)";
+  };
+  local:
+    *;
+}
+```
+
+Modified configuration file
+
+```
+{
+  global:
+  extern "C++" {
+    "google::protobuf::TextFormat::ParseFromString(std::__cxx11::basic_string<char, std::char_traits<char>, std::allocator<char>> const&, google::protobuf::Message*)";
+    // In LLVM 15, ">>" can be parsed.
+    "google::protobuf::TextFormat::PrintToString(google::protobuf::Message const&, std::__cxx11::basic_string<char, std::char_traits<char>, std::allocator<char>>*)";
+  };
+  local:
+    *;
+}
+```
+
+## cl.arkcompiler.3 LLVM emu-tls Changed
+
+**Change Impact**
+
+If you use both LLVM 12 and LLVM 15 (this behavior is prohibited) for your code, the emu-tls symbol cannot be found in libc++.so.
+
+**Key Library Dependency Changes**
+
+In LLVM 15, the emu-tls symbol is extracted from the target binary file to libc++.so. That is, the __emutls_get_address attribute changes from an internal symbol to an externally visible symbol, which is included in libc++.so. As a result, the compiled dynamic library may depend on libc++.so.
+
+**Adaptation Guide**
+
+This symbol is also in libclang_rt.builtin.a. If you do not want the compiled dynamic library to depend on libc++.so, statically link the libclang_rt.builtin.a library.
+
+## cl.arkcompiler.4 LLVM Official Release Notes
+
+**Change Impact**
+
+New features are added and internal interfaces are changed (such as IR in LLVM and compiler front-end modification). For details, see the official release notes.
+
+**Key Documents**
+
+https://releases.llvm.org/13.0.0/docs/ReleaseNotes.html
+https://releases.llvm.org/14.0.0/docs/ReleaseNotes.html
+https://releases.llvm.org/15.0.0/docs/ReleaseNotes.html
+
+**Adaptation Guide**
+
+For details about the updates and adaptation guide, see the official documents.
diff --git a/en/release-notes/changelogs/v4.0-beta1/changelogs-bundlemanager.md b/en/release-notes/changelogs/v4.0-beta1/changelogs-bundlemanager.md
new file mode 100644
index 0000000000000000000000000000000000000000..5f6b375496ffb015068b191ee859ad4b9056cfe7
--- /dev/null
+++ b/en/release-notes/changelogs/v4.0-beta1/changelogs-bundlemanager.md
@@ -0,0 +1,17 @@
+# Bundle Management Subsystem Changelog
+
+## cl.bundlemanager.1 Changed Underlying Capability by Not Decompressing the HAP During HAP Installation
+
+The HAP will no longer be decompressed during installation. After the installation is complete, only the HAP file exists in the installation directory. As a result, the application must use the standard resource management interface, rather than a combined path, to access a resource file.
+
+**Change Impact**
+
+If the application uses a combined path to access a resource file, the access fails. It must use the resource management interface.
+
+**Key API/Component Changes**
+
+No API or component change is involved.
+
+**Adaptation Guide**
+
+The resource management subsystem provides the JS interface for accessing resource files. Reference: [Accessing Resource Files](../../../application-dev/reference/apis/js-apis-resource-manager.md#getrawfilecontent9)
\ No newline at end of file
diff --git a/en/release-notes/changelogs/v4.0-beta1/changelogs-common.md b/en/release-notes/changelogs/v4.0-beta1/changelogs-common.md
new file mode 100644
index 0000000000000000000000000000000000000000..eae28d584a6d3c7e16be7f12194f4d2047e1576b
--- /dev/null
+++ b/en/release-notes/changelogs/v4.0-beta1/changelogs-common.md
@@ -0,0 +1,13 @@
+# Common Capability Changelog
+
+## cl.common.1 System API Usage Rule Changed
+
+When a system API is called, no verification is performed to check whether the caller is a system application or third-party application. As a result, a third-party application can switch to the full SDK to use system APIs, which brings security risks. To address this issue, application identity verification is added to OpenHarmony 4.0.2.1 and later versions.
+
+**Change Impact**
+
+System APIs are available only to system applications. When a third-party application tries to use a system API, the **202** error will be returned via either an exception or asynchronous callback.
+
+**Adaptation Guide**
+
+To use a system API, a third-party application must either request the system application permission or use a substitute API that is available for non-system applications.
diff --git a/en/release-notes/changelogs/v4.0-beta1/changelogs-resourceschedule.md b/en/release-notes/changelogs/v4.0-beta1/changelogs-resourceschedule.md
new file mode 100644
index 0000000000000000000000000000000000000000..fa8b61bc1975c382484fa06689561e39614ea024
--- /dev/null
+++ b/en/release-notes/changelogs/v4.0-beta1/changelogs-resourceschedule.md
@@ -0,0 +1,48 @@
+# Resource Scheduler Subsystem Changelog
+
+
+## cl.resourceschedule.reminderAgent.1  
+
+The reminder agent allows you to customize buttons for system applications. Clicking a custom button will redirect you to the specified application page.
+
+**Change Impact**
+
+For system applications developed based on OpenHarmony 4.0.7.1 and later SDK versions, you can set custom buttons for reminders.
+
+**Key API/Component Changes**
+
+| Module| Class| Method/Attribute/Enum/Constant| Change Type|
+|  -- | -- | -- | -- |
+| reminderAgentManager | ActionButtonType  | ACTION_BUTTON_TYPE_CUSTOM = 2 | Added|
+| reminderAgentManager | ActionButton  | wantAgent?: WantAgent | Added|
+| reminderAgentManager | WantAgent  | uri?: string | Added|
+| reminderAgentManager | ReminderRequest   | actionButton?: [ActionButton?, ActionButton?, ActionButton?] | Changed|
+
+**Adaptation Guide**
+
+```ts
+import reminderAgentManager from '@ohos.reminderAgentManager';
+
+let targetReminderAgent: reminderAgentManager.ReminderRequestAlarm = {
+    reminderType: reminderAgentManager.ReminderType.REMINDER_TYPE_ALARM, // The reminder type is alarm clock.
+    ...
+    actionButton: [
+        {
+            title: 'Remind later',
+            type: reminderAgentManager.ActionButtonType.ACTION_BUTTON_TYPE_SNOOZE
+        },
+        {
+            title: 'Close',
+            type: reminderAgentManager.ActionButtonType.ACTION_BUTTON_TYPE_CLOSE
+        },
+        {
+            title: 'Custom',
+            type: reminderAgentManager.ActionButtonType.ACTION_BUTTON_TYPE_CUSTOM,
+            wantAgent: {
+                pkgName: "com.example.myapplication",
+                abilityName: "EntryAbility",
+            }
+        },
+    ]
+}
+```
diff --git a/zh-cn/application-dev/reference/apis/js-apis-inputdevice.md b/zh-cn/application-dev/reference/apis/js-apis-inputdevice.md
index ed3029bd8c372c20afb25ad9f465c8cbac729c88..7b8c540c6c9d216be69bb4dd97aa9e21fc0cbe61 100755
--- a/zh-cn/application-dev/reference/apis/js-apis-inputdevice.md
+++ b/zh-cn/application-dev/reference/apis/js-apis-inputdevice.md
@@ -180,7 +180,7 @@ try {
 
 off(type: "change", listener?: Callback&lt;DeviceListener&gt;): void
 
-取消监听输入设备的热插拔事件。
+取消监听输入设备的热插拔事件。在应用退出前调用，取消监听。
 
 **系统能力**：SystemCapability.MultimodalInput.Input.InputDevice
 
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md
index dcb045948e0ce6cf577913bda72dd49608389624..5ea62d723c5ac73ba1caf623cc0709aa1886a322 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md
@@ -48,8 +48,8 @@ ListItem(value?: string)
 ## SwipeEdgeEffect<sup>9+</sup>枚举说明
 | 名称 | 描述 |
 | -------- | -------- |
-| Spring | ListItem划动距离超过划出组件大小后可以继续划动，松手后按照弹簧阻尼曲线回弹。 |
-| None | ListItem划动距离不能超过划出组件大小。 |
+| Spring | ListItem划动距离超过划出组件大小后可以继续划动。如果设置了删除区域，ListItem划动距离超过删除阈值后可以继续划动，松手后按照弹簧阻尼曲线回弹。 |
+| None | ListItem划动距离不能超过划出组件大小。如果设置了删除区域，ListItem划动距离不能超过删除阈值，并且在设置删除回调的情况下，达到删除阈值后松手触发删除回调。 |
 
 ## SwipeActionItem<sup>10+</sup>对象说明
 List垂直布局，ListItem向右滑动，item左边的长距离滑动删除选项或向左滑动时，item右边的长距离滑动删除选项。
@@ -210,4 +210,4 @@ struct ListItemExample2 {
   }
 }
 ```
-![deleteListItem](figures/deleteListItem.gif)
\ No newline at end of file
+![deleteListItem](figures/deleteListItem.gif)
diff --git a/zh-cn/application-dev/windowmanager/application-window-stage.md b/zh-cn/application-dev/windowmanager/application-window-stage.md
index b850abef867e5851da3c5590c0cd9482e2bf99b4..c3058041334c8164b36b40f5e211c80dfd256a69 100644
--- a/zh-cn/application-dev/windowmanager/application-window-stage.md
+++ b/zh-cn/application-dev/windowmanager/application-window-stage.md
@@ -382,3 +382,5 @@ export default class EntryAbility extends UIAbility {
 针对window开发（Stage模型），有以下相关实例可供参考：
 
 - [`Window`：一多设置典型页面（Settings）（API9）](https://gitee.com/openharmony/applications_app_samples/tree/master/code/SuperFeature/MultiDeviceAppDev/Settings)
+
+- [`WindowManage`：窗口管理（ArkTS）（API9）](https://gitee.com/openharmony/applications_app_samples/tree/master/code/BasicFeature/WindowManagement/WindowManage)
diff --git a/zh-cn/design/ux-design/OpenHarmony_Icons.zip b/zh-cn/design/ux-design/OpenHarmony_Icons.zip
deleted file mode 100644
index 1e590189dfd6c237a1f2eaa31a216d1b1c1a4375..0000000000000000000000000000000000000000
Binary files a/zh-cn/design/ux-design/OpenHarmony_Icons.zip and /dev/null differ
diff --git a/zh-cn/design/ux-design/design-resources.md b/zh-cn/design/ux-design/design-resources.md
index d33310d80af901cdc6c622bb34b0bdbd4a1d046b..79e13ac1e9ace4b8d5a5a02dc39634589012b58f 100644
--- a/zh-cn/design/ux-design/design-resources.md
+++ b/zh-cn/design/ux-design/design-resources.md
@@ -7,7 +7,8 @@
 
 - 符合规范的[设计交付件](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/key-features/multi-device-app-dev/design-delivery.md)样例，[OpenHarmony天气应用UX设计交付件V1.0.zip](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/key-features/multi-device-app-dev/OpenHarmony_%E5%A4%A9%E6%B0%94%E5%BA%94%E7%94%A8UX%E8%AE%BE%E8%AE%A1%E4%BA%A4%E4%BB%98%E4%BB%B6_V1.0.zip)
 
-- OpenHarmony[图标](visual-icons.md)资源，[OpenHarmony_Icons.zip](OpenHarmony_Icons.zip)
+- OpenHarmony[图标](visual-icons.md)资源，OpenHarmony_Icons.zip
+
 
 系统资源分层设计表列出了当前OpenHarmony中可用系统资源id及其在不同类型设备上的取值，它由六张子表组成，各个子表的含义如下所示。
 
diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001559442068.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001559442068.png
new file mode 100644
index 0000000000000000000000000000000000000000..6e86c4924c5c9abcf0ee1669db059b3156ca65db
Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001559442068.png differ
diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001559442072.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001559442072.png
new file mode 100644
index 0000000000000000000000000000000000000000..99a10c92c5b85eb9ab20d49be36bf29355f2b529
Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001559442072.png differ
diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001559601332.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001559601332.png
new file mode 100644
index 0000000000000000000000000000000000000000..a10f1038384ba22d893a18d2ac17504aa96fc145
Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001559601332.png differ
diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001559601336.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001559601336.png
new file mode 100644
index 0000000000000000000000000000000000000000..3a85ff4f04cae724c95790855f1a6c2b3d9b77ec
Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001559601336.png differ
diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001559760964.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001559760964.png
new file mode 100644
index 0000000000000000000000000000000000000000..56ef6f90bbf869dd319d023c62d5b95517a89317
Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001559760964.png differ
diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001559760968.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001559760968.png
new file mode 100644
index 0000000000000000000000000000000000000000..892d790237df80fa9123847fe13d09027f743d0c
Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001559760968.png differ
diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001559920864.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001559920864.png
new file mode 100644
index 0000000000000000000000000000000000000000..f2cbe4e6cbc4d7957150bd1853cdf264cb224783
Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001559920864.png differ
diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001559920868.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001559920868.png
new file mode 100644
index 0000000000000000000000000000000000000000..05b4e2b5b3db3b42534ab5e073f1dc23b8e2b0a2
Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001559920868.png differ
diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001559920872.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001559920872.png
new file mode 100644
index 0000000000000000000000000000000000000000..5d82706d9165b4d3cd0afdee675f52522428251a
Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001559920872.png differ
diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001559920876.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001559920876.png
new file mode 100644
index 0000000000000000000000000000000000000000..154baee05d5100830e96838a8919a858791e0a64
Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001559920876.png differ
diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001609961253.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001609961253.png
new file mode 100644
index 0000000000000000000000000000000000000000..de84cff642f8c0b5dd75df65ecf1ff979cd8306d
Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001609961253.png differ
diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001609961257.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001609961257.png
new file mode 100644
index 0000000000000000000000000000000000000000..b6d50f7243626a9d6fe36a8e23c5fb1ef6ffadad
Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001609961257.png differ
diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001609961261.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001609961261.png
new file mode 100644
index 0000000000000000000000000000000000000000..11d7c5b30a5a80f76d5b20112997912dfcab6705
Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001609961261.png differ
diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001609961265.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001609961265.png
new file mode 100644
index 0000000000000000000000000000000000000000..a3b383e9827188b66801de7ac6f79ada5448c912
Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001609961265.png differ
diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001610200817.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001610200817.png
new file mode 100644
index 0000000000000000000000000000000000000000..c3616c13dddad68e8d1eabf5a8b4b10a2a817ff7
Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001610200817.png differ
diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001610200821.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001610200821.png
new file mode 100644
index 0000000000000000000000000000000000000000..4108f6160c13e8a52b1046c9ef774bf7bf364c9a
Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001610200821.png differ
diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001610200829.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001610200829.png
new file mode 100644
index 0000000000000000000000000000000000000000..f9ab024952321da5ebf816f4bc1946607e7824e5
Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001610200829.png differ
diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001610200833.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001610200833.png
new file mode 100644
index 0000000000000000000000000000000000000000..f814d1372ba86c053e8046110e9df444ab461e38
Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001610200833.png differ
diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001610280813.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001610280813.png
new file mode 100644
index 0000000000000000000000000000000000000000..f767c50a072b4ff025f7a1cfb35ade3b30dc3692
Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001610280813.png differ
diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001610280817.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001610280817.png
new file mode 100644
index 0000000000000000000000000000000000000000..3eade7b087f2367f3c99f1b1da202a633c7a339b
Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001610280817.png differ
diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001610280821.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001610280821.png
new file mode 100644
index 0000000000000000000000000000000000000000..7ac1ca3a83146438120a91d1098da946c16d0a3a
Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001610280821.png differ
diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001610401157.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001610401157.png
new file mode 100644
index 0000000000000000000000000000000000000000..9bd22b321c3093fbd3369f7c08be85b439574960
Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001610401157.png differ
diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001610401161.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001610401161.png
new file mode 100644
index 0000000000000000000000000000000000000000..67449033811558f0e448346ce20fe5e6d155bdb2
Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001610401161.png differ
diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001610401169.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001610401169.png
new file mode 100644
index 0000000000000000000000000000000000000000..7cec83ff9c40c405fa85d6ff5f222c37f2e63947
Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001610401169.png differ
diff --git "a/zh-cn/design/ux-design/figures/\347\224\273\346\235\277.png" "b/zh-cn/design/ux-design/figures/\347\224\273\346\235\277.png"
new file mode 100644
index 0000000000000000000000000000000000000000..4a60dcb19be82b445993d09cc3419ddcf086e293
Binary files /dev/null and "b/zh-cn/design/ux-design/figures/\347\224\273\346\235\277.png" differ
diff --git "a/zh-cn/design/ux-design/figures/\347\272\242\350\211\262.png" "b/zh-cn/design/ux-design/figures/\347\272\242\350\211\262.png"
new file mode 100644
index 0000000000000000000000000000000000000000..6640bf3c9c403f24eab1d530dd8a2f6d2bfe4a97
Binary files /dev/null and "b/zh-cn/design/ux-design/figures/\347\272\242\350\211\262.png" differ
diff --git "a/zh-cn/design/ux-design/figures/\347\273\277\350\211\262.png" "b/zh-cn/design/ux-design/figures/\347\273\277\350\211\262.png"
new file mode 100644
index 0000000000000000000000000000000000000000..21b7371000196d65373d49acd83b0fbee29532fd
Binary files /dev/null and "b/zh-cn/design/ux-design/figures/\347\273\277\350\211\262.png" differ
diff --git a/zh-cn/design/ux-design/visual-icons.md b/zh-cn/design/ux-design/visual-icons.md
index ad9891c59e24399515a3a1042836eac896634d9f..6960e2b29c044dd324b01283a8e4846704639982 100644
--- a/zh-cn/design/ux-design/visual-icons.md
+++ b/zh-cn/design/ux-design/visual-icons.md
@@ -6,4 +6,101 @@
 ![zh-cn_image_0000001517612980](figures/zh-cn_image_0000001517612980.jpg)
 
 
-关于OpenHarmony默认提供的图标库，详见[线上图标库](https://developer.harmonyos.com/cn/design/harmonyos-icon/)。
+## 设计原则
+
+OpenHarmony系统图标追求精致简约、独特考究的设计原则，主要运用几何型塑造图形，精简线条的结构，精准把握比例关系。在造型和隐喻上增加年轻化的设计语言，使整体风格更加年轻时尚。避免尖锐直角的使用，在情感表达上给用户传递出亲近、友好的视觉体验。
+
+| <div style="width:50%">精致简约</div> | <div style="width:50%">独特考究</div>|
+|  --------  |  --------  |
+| 脱胎于几何形状，精简的线条，精确控制比例和结构位置。 | 运用开口细节交代线条的穿插和叠压关系，所形成的负型巧妙的体现结构产生的阴影和空间感。    | 
+| ![zh-cn_image_0000001559920864.png](figures/zh-cn_image_0000001559920864.png) |   ![zh-cn_image_0000001559601332.png](figures/zh-cn_image_0000001559601332.png)   | 
+
+## 图标样式
+
+系统图标根据不同场景使用描边图形与填充图形两种样式，两种样式使用同一结构图形，使他们看起来具有一致的视觉体验。<br/>图标根据不同的使用场景，分为单色图标和双色图标，单色图标用于系统界面中辅助表达基础功能。
+  | ![zh-cn_image_0000001610200817](figures/zh-cn_image_0000001610200817.png) | ![zh-cn_image_0000001559442068](figures/zh-cn_image_0000001559442068.png) |
+| -------- | -------- |
+  | 描边图形 |填充图形 |
+  
+双色图标是基于填充图形样式做的多彩双色效果，多用于需要突出或强调功能的场景。
+  |  ![zh-cn_image_0000001610401157](figures/zh-cn_image_0000001610401157.png) |  ![zh-cn_image_0000001610280813](figures/zh-cn_image_0000001610280813.png)|
+| -------- | -------- |
+| 状态图标-关 | 状态图标-开  |
+| ![zh-cn_image_0000001609961253](figures/zh-cn_image_0000001609961253.png) | ![zh-cn_image_0000001559760964](figures/zh-cn_image_0000001559760964.png) | 
+|功能型入口图标 | 运营类入口图标 | 
+
+
+## 图形大小布局
+
+系统图标设计以 24vp 为标准尺寸，中央 22vp 为图标主要绘制区域，上下左右各留 1vp 作为空隙。
+
+  | ![zh-cn_image_0000001559920868](figures/zh-cn_image_0000001559920868.png) |![zh-cn_image_0000001559601336](figures/zh-cn_image_0000001559601336.png)|
+| -------- | -------- |
+  |活动区域&nbsp;Living&nbsp;area |空隙区域&nbsp;Space&nbsp;area |
+
+**关键形状**
+
+关键线的形状是网格的基础。利用这些核心形状做为向导，即可使整个产品相关的图标保持一致的视觉比例及体量。
+
+  | ![zh-cn_image_0000001610200821](figures/zh-cn_image_0000001610200821.png) | ![zh-cn_image_0000001559442072](figures/zh-cn_image_0000001559442072.png)|
+| -------- | -------- |
+|正方形<br/>宽高&nbsp;20vp | 圆形<br/>直径&nbsp;22vp | 
+| ![zh-cn_image_0000001610401161](figures/zh-cn_image_0000001610401161.png) | ![zh-cn_image_0000001610280817](figures/zh-cn_image_0000001610280817.png) | 
+|横长方形<br/>宽&nbsp;22vp<br/>高&nbsp;18vp |竖长方形<br/>宽&nbsp;18vp<br/>高&nbsp;22vp | 
+
+**额外视觉重量**
+
+若图标形状特殊，需要添加额外的视觉重量实现整体图标体量平衡，绘制区域可以延伸到空隙区域内，但图标整体仍应保持在24vp大小的范围之内。
+
+  |![zh-cn_image_0000001609961257](figures/zh-cn_image_0000001609961257.png) | ![zh-cn_image_0000001559760968.png](figures/zh-cn_image_0000001559760968.png) |
+| -------- | -------- |
+
+**图形重心**
+找准图标视觉重心，使其在图标区域中心；允许在保证图标重心稳定的情况下，图标部分超出绘制活动范围，延伸至间隙区域内。
+  | ![zh-cn_image_0000001559920872](figures/zh-cn_image_0000001559920872.png) |![zh-cn_image_0000001610200829](figures/zh-cn_image_0000001610200829.png) |
+| -------- | -------- |
+|![绿色](figures/绿色.png)<br/>推荐 |![红色](figures/红色.png)<br/>不推荐 | 
+
+## 图形特征
+
+1. 描边粗细：1.5vp
+
+2. 终点样式：圆头
+
+3. 外圆角：4vp，内圆角：2.5vp
+
+4. 断口宽度：1vp
+
+![画板](figures/画板.png)
+
+  | | |
+| -------- | -------- |
+| ![zh-cn_image_0000001610280821](figures/zh-cn_image_0000001610280821.png) | **切断定义**<br/>1.&nbsp;切断效果，保留上方的切断留白，下方保留连接<br/>2.&nbsp;断口宽度：1vp<br/>3.&nbsp;切断面应保持平直的被切效果<br/>4.&nbsp;斜线从左上至右下，角度为45° | 
+
+**图形叠加**
+
+两个图形的叠加使用，表示群、组、集的概念。
+图形与图形之间需留出1vp的间隙
+  | ![zh-cn_image_0000001609961261](figures/zh-cn_image_0000001609961261.png) |  ![zh-cn_image_0000001559920876](figures/zh-cn_image_0000001559920876.png)|
+| -------- | -------- |
+| ![绿色](figures/绿色.png)<br/>推荐 | ![红色](figures/红色.png)<br/>不推荐 | 
+
+ 图形间隙的拐角处同样需要添加3.5vp内圆角
+
+| ![zh-cn_image_0000001610200833](figures/zh-cn_image_0000001610200833.png)  |  ![zh-cn_image_0000001610401169](figures/zh-cn_image_0000001610401169.png)  |
+|  --------  |  --------  |
+| ![绿色](figures/绿色.png)<br/>推荐   |![红色](figures/红色.png)<br/>不推荐   | 
+
+
+## 图标资源命名规则
+
+**命名逻辑顺序样例： ic_模块_功能_位置_颜色_状态_数字**
+
+ic_模块_功能，为必选项；位置_颜色_状态_数字，可根据实际情况选填。
+
+注： 资源名要求全部为小写字母，长字段可以尽量用缩写，命名中不能有空格，不同字段之间以“_”分隔。
+
+![zh-cn_image_0000001609961265](figures/zh-cn_image_0000001609961265.png)
+
+
+关于OpenHarmony默认提供的图标库，详见：[资源](design-resources.md)