Merge branch 'OpenHarmony-3.1-Release' of gitee.com:openharmony/docs into C1-1108

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>

en/application-dev/ability/fa-dataability.md

@@ -6,25 +6,24 @@ A Data ability helps applications manage access to data stored by themselves and
 
 Data ability providers can customize data access-related APIs such as data inserting, deleting, updating, and querying, as well as file opening, and share data with other applications through these open APIs.
 
-
 ## Available APIs
 
 **Table 1** Data ability lifecycle APIs
 |API|Description|
 |:------|:------|
-|onInitialized?(info: AbilityInfo): void|Called during ability initialization to initialize the relational database (RDB).|
-|update?(uri: string, valueBucket: rdb.ValuesBucket, predicates: dataAbility.DataAbilityPredicates, callback: AsyncCallback\<number>): void|Updates data in the database.|
-|query?(uri: string, columns: Array\<string>, predicates: dataAbility.DataAbilityPredicates, callback: AsyncCallback\<ResultSet>): void|Queries data in the database.|
-|delete?(uri: string, predicates: dataAbility.DataAbilityPredicates, callback: AsyncCallback\<number>): void|Deletes one or more data records from the database.|
-|normalizeUri?(uri: string, callback: AsyncCallback\<string>): void|Normalizes the URI. A normalized URI applies to cross-device use, persistence, backup, and restore. When the context changes, it ensures that the same data item can be referenced.|
-|batchInsert?(uri: string, valueBuckets: Array\<rdb.ValuesBucket>, callback: AsyncCallback\<number>): void|Inserts multiple data records into the database.|
-|denormalizeUri?(uri: string, callback: AsyncCallback\<string>): void|Converts a normalized URI generated by **normalizeUri** into a denormalized URI.|
-|insert?(uri: string, valueBucket: rdb.ValuesBucket, callback: AsyncCallback\<number>): void|Inserts a data record into the database.|
-|openFile?(uri: string, mode: string, callback: AsyncCallback\<number>): void|Opens a file.|
-|getFileTypes?(uri: string, mimeTypeFilter: string, callback: AsyncCallback<Array\<string>>): void|Obtains the MIME type of a file.|
-|getType?(uri: string, callback: AsyncCallback\<string>): void|Obtains the MIME type matching the data specified by the URI.|
-|executeBatch?(ops: Array\<DataAbilityOperation>, callback: AsyncCallback\<Array\<DataAbilityResult>>): void|Operates data in the database in batches.|
-|call?(method: string, arg: string, extras: PacMap, callback: AsyncCallback\<PacMap>): void|Calls a custom API.|
+|onInitialized(info: AbilityInfo): void|Called during ability initialization to initialize the relational database (RDB).|
+|update(uri: string, valueBucket: rdb.ValuesBucket, predicates: dataAbility.DataAbilityPredicates, callback: AsyncCallback\<number>): void|Updates data in the database.|
+|query(uri: string, columns: Array\<string>, predicates: dataAbility.DataAbilityPredicates, callback: AsyncCallback\<ResultSet>): void|Queries data in the database.|
+|delete(uri: string, predicates: dataAbility.DataAbilityPredicates, callback: AsyncCallback\<number>): void|Deletes one or more data records from the database.|
+|normalizeUri(uri: string, callback: AsyncCallback\<string>): void|Normalizes the URI. A normalized URI applies to cross-device use, persistence, backup, and restore. When the context changes, it ensures that the same data item can be referenced.|
+|batchInsert(uri: string, valueBuckets: Array\<rdb.ValuesBucket>, callback: AsyncCallback\<number>): void|Inserts multiple data records into the database.|
+|denormalizeUri(uri: string, callback: AsyncCallback\<string>): void|Converts a normalized URI generated by **normalizeUri** into a denormalized URI.|
+|insert(uri: string, valueBucket: rdb.ValuesBucket, callback: AsyncCallback\<number>): void|Inserts a data record into the database.|
+|openFile(uri: string, mode: string, callback: AsyncCallback\<number>): void|Opens a file.|
+|getFileTypes(uri: string, mimeTypeFilter: string, callback: AsyncCallback<Array\<string>>): void|Obtains the MIME type of a file.|
+|getType(uri: string, callback: AsyncCallback\<string>): void|Obtains the MIME type matching the data specified by the URI.|
+|executeBatch(ops: Array\<DataAbilityOperation>, callback: AsyncCallback\<Array\<DataAbilityResult>>): void|Operates data in the database in batches.|
+|call(method: string, arg: string, extras: PacMap, callback: AsyncCallback\<PacMap>): void|Calls a custom API.|
 
 
 ## How to Develop
@@ -35,6 +34,7 @@ Data ability providers can customize data access-related APIs such as data inser
     The following code snippet shows how to create a Data ability:
 
    ```javascript
+    import featureAbility from '@ohos.ability.featureAbility'
     import dataAbility from '@ohos.data.dataAbility'
     import dataRdb from '@ohos.data.rdb'
 
@@ -46,7 +46,8 @@ Data ability providers can customize data access-related APIs such as data inser
     export default {
     onInitialized(abilityInfo) {
         console.info('DataAbility onInitialized, abilityInfo:' + abilityInfo.bundleName)
-        dataRdb.getRdbStore(STORE_CONFIG, 1, (err, store) => {
+        let context = featureAbility.getContext()
+        dataRdb.getRdbStore(context, STORE_CONFIG, 1, (err, store) => {
             console.info('DataAbility getRdbStore callback')
             store.executeSql(SQL_CREATE_TABLE, [])
             rdbStore = store

en/application-dev/ability/fa-formability.md

@@ -157,8 +157,8 @@ Configure the **config.json** file for the widget.
   | supportDimensions   | Grid styles supported by the widget. Available values are as follows:<br>**1 * 2**: indicates a grid with one row and two columns.<br>**2 * 2**: indicates a grid with two rows and two columns.<br>**2 * 4**: indicates a grid with two rows and four columns.<br>**4 * 4**: indicates a grid with four rows and four columns.| String array| No                      |
   | defaultDimension    | Default grid style of the widget. The value must be available in the **supportDimensions** array of the widget.| String    | No                      |
   | updateEnabled       | Whether the widget can be updated periodically. Available values are as follows:<br>**true**: The widget can be updated periodically, depending on the update way you select, either at a specified interval (**updateDuration**) or at the scheduled time (**scheduledUpdateTime**). **updateDuration** is preferentially recommended.<br>**false**: The widget cannot be updated periodically.| Boolean  | No                      |
-  | scheduledUpdateTime | Scheduled time to update the widget. The value is in 24-hour format and accurate to minute.        | String    | Yes (initial value: **0:0**) |
-  | updateDuration      | Interval to update the widget. The value is a natural number, in the unit of 30 minutes.<br>If the value is **0**, this field does not take effect.<br>If the value is a positive integer ***N***, the interval is calculated by multiplying ***N*** and 30 minutes.| Number      | Yes (initial value: **0**)   |
+  | scheduledUpdateTime | Scheduled time to update the widget. The value is in 24-hour format and accurate to minute.<br>This parameter has a lower priority than **updateDuration**. If both are specified, the value specified by **updateDuration** is used.| String    | Yes (initial value: **0:0**) |
+  | updateDuration      | Interval to update the widget. The value is a natural number, in the unit of 30 minutes.<br>If the value is **0**, this field does not take effect.<br>If the value is a positive integer ***N***, the interval is calculated by multiplying ***N*** and 30 minutes.<br>This parameter has a higher priority than **scheduledUpdateTime**. If both are specified, the value specified by **updateDuration** is used.| Number      | Yes (initial value: **0**)   |
   | formConfigAbility   | Link to a specific page of the application. The value is a URI.                       | String    | Yes (initial value: left empty)    |
   | formVisibleNotify   | Whether the widget is allowed to use the widget visibility notification.                        | String    | Yes (initial value: left empty)    |
   | jsComponentName     | Component name of the widget. The value is a string with a maximum of 127 bytes.        | String    | No                      |
@@ -189,7 +189,6 @@ Configure the **config.json** file for the widget.
              "scheduledUpdateTime": "10:30",
              "supportDimensions": ["2*2"],
              "type": "JS",
-             "updateDuration": 1,
              "updateEnabled": true
           }]
      }]
@@ -208,7 +207,7 @@ Mostly, the widget provider is started only when it needs to obtain information
            let formName = want.parameters["ohos.extra.param.key.form_name"];
            let tempFlag = want.parameters["ohos.extra.param.key.form_temporary"];
            // Persistently store widget information for subsequent use, such as widget instance retrieval or update.
-           // The storeFormInfo API is not implemented here. For details about the implementation, see "FA Model Widget" provided in "Samples".
+           // The storeFormInfo API is not implemented here.
            storeFormInfo(formId, formName, tempFlag, want);
 
            let obj = {
@@ -227,7 +226,7 @@ You should override **onDestroy** to delete widget data.
            console.log('FormAbility onDestroy');
 
            // You need to implement the code for deleting the persistent widget instance.
-           // The deleteFormInfo API is not implemented here. For details, see "Widget Host" provided in "Samples".
+           // The deleteFormInfo API is not implemented here.
            deleteFormInfo(formId);
        }
 ```
@@ -336,7 +335,7 @@ You can use HML, CSS, and JSON to develop the UI page for a JavaScript-programme
      "actions": {
        "routerEvent": {
          "action": "router",
-         "abilityName": "com.example.MyApplication.hmservice.FormAbility",
+         "abilityName": "com.example.entry.MainAbility",
          "params": {
            "message": "add detail"
          }
@@ -348,3 +347,58 @@ You can use HML, CSS, and JSON to develop the UI page for a JavaScript-programme
 Now you've got a widget shown below.
 
 ![fa-form-example](figures/fa-form-example.png)
+
+### Developing Widget Events
+
+You can set router and message events for components on a widget. The router event applies to ability redirection, and the message event applies to custom click events. The key steps are as follows:
+
+1. Set **onclick** in the HML file to **routerEvent** or **messageEvent**, depending on the **actions** settings in the JSON file.
+2. For the router event, set the following attributes:
+   - **action**: **"router"**.
+   - **abilityName**: target ability name, for example, **com.example.entry.MainAbility**, which is the default main ability name in DevEco Studio for the FA model.
+   - **params**: custom parameters of the target ability. Set them as required. The value can be obtained from **parameters** in **want** used for starting the target ability. For example, in the lifecycle function **onCreate** of the main ability in the FA model, **featureAbility.getWant()** can be used to obtain **want** and its **parameters** field.
+3. For the message event, set the following attributes:
+   - **action**: **"message"**.
+   - **params**: custom parameters of the message event. Set them as required. The value can be obtained from **message** in the widget lifecycle function **onEvent**.
+
+The code snippet is as follows:
+
+   - In the HML file:
+   ```html
+   <div class="container">
+       <stack>
+           <div class="container-img">
+               <image src="/common/widget.png" class="bg-img"></image>
+           </div>
+           <div class="container-inner">
+               <text class="title" onclick="routerEvent">{{title}}</text>
+               <text class="detail_text" onclick="messageEvent">{{detail}}</text>
+           </div>
+       </stack>
+   </div>
+   ```
+
+   - In the JSON file:
+   ```json
+   {
+     "data": {
+       "title": "TitleDefault",
+       "detail": "TextDefault"
+     },
+     "actions": {
+       "routerEvent": {
+         "action": "router",
+         "abilityName": "com.example.entry.MainAbility",
+         "params": {
+           "message": "add detail"
+         }
+       },
+       "messageEvent": {
+         "action": "message",
+         "params": {
+           "message": "add detail"
+         }
+       }
+     }
+   }
+   ```
\ No newline at end of file

en/application-dev/ability/stage-formextension.md

@@ -49,10 +49,10 @@ The **FormExtension** class also has a member context, that is, the **FormExtens
 
 **Table 2** FormExtensionContext APIs
 
-| API                                                      | Description                     |
-| :----------------------------------------------------------- | :------------------------ |
-| updateForm(formId: string, formBindingData: formBindingData.FormBindingData, callback: AsyncCallback\<void>): void | Updates a widget. This API uses an asynchronous callback to return the result.   |
-| updateForm(formId: string, formBindingData: formBindingData.FormBindingData): Promise\<void> | Updates a widget. This API uses a promise to return the result.|
+| API                                                      | Description                                                        |
+| :----------------------------------------------------------- | :----------------------------------------------------------- |
+| updateForm(formId: string, formBindingData: formBindingData.FormBindingData, callback: AsyncCallback\<void>): void | Updates a widget. This API uses an asynchronous callback to return the result.|
+| updateForm(formId: string, formBindingData: formBindingData.FormBindingData): Promise\<void>                | Updates a widget. This API uses a promise to return the result.|
 
 For details about the **FormProvider** APIs, see [FormProvider](../reference/apis/js-apis-formprovider.md).
 
@@ -86,7 +86,7 @@ To create a widget in the stage model, implement the lifecycle callbacks of **Fo
    export default class FormAbility extends FormExtension {
        onCreate(want) {
            console.log('FormAbility onCreate');
-           // Persistently store widget information for subsequent use, such as during widget instance retrieval or update.
+           // Persistently store widget information for subsequent use, such as widget instance retrieval or update.
            let obj = {
                "title": "titleOnCreate",
                "detail": "detailOnCreate"
@@ -176,8 +176,8 @@ To create a widget in the stage model, implement the lifecycle callbacks of **Fo
   | supportDimensions   | Grid styles supported by the widget. Available values are as follows:<br>**1 * 2**: indicates a grid with one row and two columns.<br>**2 * 2**: indicates a grid with two rows and two columns.<br>**2 * 4**: indicates a grid with two rows and four columns.<br>**4 * 4**: indicates a grid with four rows and four columns.| String array| No                      |
   | defaultDimension    | Default grid style of the widget. The value must be available in the **supportDimensions** array of the widget.| String    | No                      |
   | updateEnabled       | Whether the widget can be updated periodically. Available values are as follows:<br>**true**: The widget can be updated periodically, depending on the update way you select, either at a specified interval (**updateDuration**) or at the scheduled time (**scheduledUpdateTime**). **updateDuration** is recommended.<br>**false**: The widget cannot be updated periodically.| Boolean  | No                      |
-  | scheduledUpdateTime | Scheduled time to update the widget. The value is in 24-hour format and accurate to minute.        | String    | Yes (initial value: **0:0**) |
-  | updateDuration      | Interval to update the widget. The value is a natural number, in the unit of 30 minutes.<br>If the value is **0**, this field does not take effect.<br>If the value is a positive integer ***N***, the interval is calculated by multiplying ***N*** and 30 minutes.| Number      | Yes (initial value: **0**)   |
+  | scheduledUpdateTime | Scheduled time to update the widget. The value is in 24-hour format and accurate to minute.<br>This parameter has a lower priority than **updateDuration**. If both are specified, the value specified by **updateDuration** is used.| String    | Yes (initial value: **0:0**) |
+  | updateDuration      | Interval to update the widget. The value is a natural number, in the unit of 30 minutes.<br>If the value is **0**, this field does not take effect.<br>If the value is a positive integer ***N***, the interval is calculated by multiplying ***N*** and 30 minutes.<br>This parameter has a higher priority than **scheduledUpdateTime**. If both are specified, the value specified by **updateDuration** is used.| Number      | Yes (initial value: **0**)   |
   | formConfigAbility   | Link to a specific page of the application. The value is a URI.                       | String    | Yes (initial value: left empty)    |
   | formVisibleNotify   | Whether the widget is allowed to use the widget visibility notification.                        | String    | Yes (initial value: left empty)    |
   | metaData            | Metadata of the widget. This field contains the array of the **customizeData** field.           | Object      | Yes (initial value: left empty)    |
@@ -200,7 +200,6 @@ To create a widget in the stage model, implement the lifecycle callbacks of **Fo
           "defaultDimension": "2*2",
           "updateEnabled": true,
           "scheduledUpdateTime": "10:30",
-          "updateDuration": 1,
           "formConfigAbility": "ability://ohos.samples.FormApplication.MainAbility"
       }]
   }
@@ -218,8 +217,8 @@ Mostly, the widget provider is started only when it needs to obtain information
            let formId = want.parameters["ohos.extra.param.key.form_identity"];
            let formName = want.parameters["ohos.extra.param.key.form_name"];
            let tempFlag = want.parameters["ohos.extra.param.key.form_temporary"];
-           // Persistently store widget data for subsequent use, such as widget instance retrieval and update.
-           // The storeFormInfo API is not implemented here. For details about the implementation, see "Samples" below.
+           // Persistently store widget data for subsequent use, such as widget instance retrieval or update.
+           // The storeFormInfo API is not implemented here.
            storeFormInfo(formId, formName, tempFlag, want);
 
            let obj = {
@@ -238,7 +237,7 @@ You should override **onDestroy** to delete widget data.
            console.log('FormAbility onDestroy');
 
            // You need to implement the code for deleting the persistent widget data.
-           // The deleteFormInfo API is not implemented here. For details about the implementation, see "Samples" below.
+           // The deleteFormInfo API is not implemented here.
            deleteFormInfo(formId);
        }
 ```
@@ -277,10 +276,11 @@ onUpdate(formId) {
 
 You can use HML, CSS, and JSON to develop the UI page for a JavaScript-programmed widget.
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
+> **NOTE**
+>
 > Currently, only the JavaScript-based web-like development paradigm can be used to develop the widget UI.
 
-   - hml:
+   - In the HML file:
    ```html
    <div class="container">
        <stack>
@@ -295,7 +295,7 @@ You can use HML, CSS, and JSON to develop the UI page for a JavaScript-programme
    </div>
    ```
 
-   - css:
+   - In the CSS file:
 
    ```css
 .container {
@@ -336,7 +336,7 @@ You can use HML, CSS, and JSON to develop the UI page for a JavaScript-programme
 }
    ```
 
-   - json:
+   - In the JSON file:
    ```json
    {
      "data": {
@@ -346,7 +346,7 @@ You can use HML, CSS, and JSON to develop the UI page for a JavaScript-programme
      "actions": {
        "routerEvent": {
          "action": "router",
-         "abilityName": "com.example.MyApplication.hmservice.FormAbility",
+         "abilityName": "MainAbility",
          "params": {
            "message": "add detail"
          }
@@ -358,3 +358,58 @@ You can use HML, CSS, and JSON to develop the UI page for a JavaScript-programme
 Now you've got a widget shown below.
 
 ![fa-form-example](figures/fa-form-example.png)
+
+### Developing Widget Events
+
+You can set router and message events for components on a widget. The router event applies to ability redirection, and the message event applies to custom click events. The key steps are as follows:
+
+1. Set **onclick** in the HML file to **routerEvent** or **messageEvent**, depending on the **actions** settings in the JSON file.
+2. For the router event, set the following attributes:
+   - **action**: **"router"**.
+   - **abilityName**: target ability name, for example, **MainAbility**, which is the default main ability name in DevEco Studio for the stage model.
+   - **params**: custom parameters of the target ability. Set them as required. The value can be obtained from **parameters** in **want** used for starting the target ability. For example, in the lifecycle function **onCreate** of the main ability in the stage model, you can obtain **want** and its **parameters** field.
+3. For the message event, set the following attributes:
+   - **action**: **"message"**.
+   - **params**: custom parameters of the message event. Set them as required. The value can be obtained from **message** in the widget lifecycle function **onEvent**.
+
+The following is an example:
+
+   - In the HML file:
+   ```html
+   <div class="container">
+       <stack>
+           <div class="container-img">
+               <image src="/common/widget.png" class="bg-img"></image>
+           </div>
+           <div class="container-inner">
+               <text class="title" onclick="routerEvent">{{title}}</text>
+               <text class="detail_text" onclick="messageEvent">{{detail}}</text>
+           </div>
+       </stack>
+   </div>
+   ```
+
+   - In the JSON file:
+   ```json
+   {
+     "data": {
+       "title": "TitleDefault",
+       "detail": "TextDefault"
+     },
+     "actions": {
+       "routerEvent": {
+         "action": "router",
+         "abilityName": "MainAbility",
+         "params": {
+           "message": "add detail"
+         }
+       },
+       "messageEvent": {
+         "action": "message",
+         "params": {
+           "message": "add detail"
+         }
+       }
+     }
+   }
+   ```
\ No newline at end of file

en/application-dev/reference/apis/js-apis-data-storage.md

@@ -3,13 +3,10 @@
 Lightweight storage provides applications with data processing capability and allows applications to perform lightweight data storage and query. Data is stored in key-value (KV) pairs. Keys are of the string type, and values can be of the number, string, or Boolean type.
 
 
-> **NOTE**<br/>
+> **NOTE**
 >
-> -  The initial APIs of this module are supported since API version 6. Newly added APIs will be marked with a superscript to indicate their earliest API version.
->
-> -  The APIs of this module are no longer maintained since API Version 9. You are advised to use [`@ohos.data.preferences`](js-apis-data-preferences.md).
-> 
-> -  The APIs of this module can be used only in the FA model.
+> The initial APIs of this module are supported since API version 6. Newly added APIs will be marked with a superscript to indicate their earliest API version.
+
 
 
 ## Modules to Import

en/application-dev/reference/arkui-js/js-components-container-dialog.md

 # dialog
 
-The **<dialog>** component is a custom pop-up container.
+>  **NOTE**
+>
+>  This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
+
+The **\<dialog>** component is a custom dialog box.
 
 ## Required Permissions
 
 None
 
-## Child Components
 
-A single child component is supported.
+## Child Components
 
-## Attributes
+This component supports only one child component.
 
-In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported.
 
+## Attributes
 
+In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
 
-| Name                  | Type    | Default Value | Mandatory | Description                        |
-| --------------------- | ------- | ------------- | --------- | ---------------------------------- |
-| dragable<sup>7+</sup> | boolean | false         | No        | Whether the pop-up can be dragged. |
+| Name                   | Type     | Default Value  | Mandatory  | Description          |
+| --------------------- | ------- | ----- | ---- | ------------ |
+| dragable<sup>7+</sup> | boolean | false | No   | Whether the dialog box can be dragged.|
 
-> ![img](https://gitee.com/openharmony/docs/raw/master/en/application-dev/public_sys-resources/icon-note.gif) **NOTE:**
+>  **NOTE**
 >
-> - The **&lt;dialog&gt;** component does not support the **focusable** and **click-effect** attributes.
+>  The **\<dialog>** component does not support the **focusable** and **click-effect** attributes.
+
 
 ## Styles
 
-Only the **width**, **height**, **margin**, **margin-[left|top|right|bottom]**, and **margin-[start|end]** styles in [Universal Styles](js-components-common-styles.md) are supported.
+Only the **width**, **height**, **margin**, **margin-[left|top|right|bottom]**, and **margin-[start|end]** styles in [Universal Styles](../arkui-js/js-components-common-styles.md) are supported.
 
-## Events
 
-Events in [Universal Events](js-components-common-events.md) are not supported. The following table lists the supported event.
+## Events
 
+The following events are supported. The [universal events](../arkui-js/js-components-common-events.md) are not supported.
 
+| Name                | Parameter  | Description                        |
+| ------------------ | ---- | -------------------------- |
+| cancel             | -    | Triggered when a user touches an area outside the dialog box to cancel the dialog box.|
+| show<sup>7+</sup>  | -    | Triggered when the dialog box is displayed.              |
+| close<sup>7+</sup> | -    | Triggered when the dialog box is closed.              |
 
-| Name    | Parameter | Description                                                  |
-| ------- | --------- | ------------------------------------------------------------ |
-| cancel  | -         | Triggered when a user taps a non-dialog area to cancel the pop-up. |
-| show7+  | -         | Triggered when the pop-up is displayed.                      |
-| close7+ | -         | Triggered when the pop-up is closed.                         |
 
 ## Methods
 
-Methods in [Universal Methods](js-components-common-methods.md) are not supported. The following table lists the supported methods.
-
+The following methods are supported. The [universal methods](../arkui-js/js-components-common-methods.md) are not supported.
 
+| Name   | Parameter  | Description    |
+| ----- | ---- | ------ |
+| show  | -    | Shows a dialog box.|
+| close | -    | Close the dialog box.|
 
-| Name  | Parameter | Description          |
-| ----- | --------- | -------------------- |
-| show  | -         | Shows a dialog box.  |
-| close | -         | Closes a dialog box. |
+>  **NOTE**
+>
+>  Attributes and styles of a **\<dialog>** component cannot be dynamically updated.
 
-> ![img](https://gitee.com/openharmony/docs/raw/master/en/application-dev/public_sys-resources/icon-note.gif) **NOTE:** Attributes and styles of a **\<dialog>** component cannot be dynamically updated.
 
-## Example Code
+## Example
 
-```
+```html
 <!-- xxx.hml -->
 <div class="doc-page">
   <div class="btn-div">
@@ -73,6 +79,9 @@ Methods in [Universal Methods](js-components-common-methods.md) are not supporte
     </div>
   </dialog>
 </div>
+```
+
+```css
 /* xxx.css */
 .doc-page {
   flex-direction: column;
@@ -119,30 +128,33 @@ Methods in [Universal Methods](js-components-common-methods.md) are not supporte
   background-color: #F2F2F2;
   text-color: #0D81F2;
 }
+```
+
+```js
 // xxx.js
 import prompt from '@system.prompt';
 export default {
-  showDialog(e) {
+  showDialog() {
     this.$element('simpledialog').show()
   },
-  cancelDialog(e) {
+  cancelDialog() {
     prompt.showToast({
       message: 'Dialog cancelled'
     })
   },
-  cancelSchedule(e) {
+  cancelSchedule() {
     this.$element('simpledialog').close()
     prompt.showToast({
       message: 'Successfully cancelled'
     })
   },
-  setSchedule(e) {
+  setSchedule() {
     this.$element('simpledialog').close()
     prompt.showToast({
       message: 'Successfully confirmed'
     })
   },
-  doubleclick(e){
+  doubleclick(){
     prompt.showToast({
       message: 'doubleclick'
     })
@@ -150,4 +162,4 @@ export default {
 }
 ```
 
-![img](figures/4.gif)
+![4](figures/4.gif)
\ No newline at end of file

en/application-dev/reference/arkui-js/js-components-svg.md

@@ -4,9 +4,9 @@ The **\<svg>** component is a basic container. It can be used as the root node o
 
 
 >  **NOTE**
-> - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-> 
-> - The width and height must be defined for the **<svg>** parent component or **<svg>** component. Otherwise, the component is not drawn.
+>  - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+>
+>  - The width and height must be defined for the **<svg>** parent component or **<svg>** component. Otherwise, the component is not drawn.
 
 ## Required Permissions
 
@@ -15,21 +15,21 @@ None
 
 ## Child Components
 
-The following are supported: [\<svg>](js-components-svg.md), [\<rect>](js-components-svg-rect.md), [\<circle>](js-components-svg-circle.md), [\<ellipse>](../arkui-js/js-components-svg-ellipse.md), [\<path>](js-components-svg-path.md), [\<line](../arkui-js/js-components-svg-line.md), [\<polygon>](../arkui-js/js-components-svg-polygon.md), [\<polyline>](js-components-svg-polyline.md), [\<text>](js-components-svg-text.md), [\<animate>](js-components-svg-animate.md), and [\<animateTransform>](js-components-svg-animateTransform.md).
+The following are supported: [\<svg>](js-components-svg.md), [\<rect>](js-components-svg-rect.md), [\<circle>](js-components-svg-circle.md), [\<ellipse>](../arkui-js/js-components-svg-ellipse.md), [\<path>](js-components-svg-path.md), [\<line](../arkui-js/js-components-svg-line.md), [\<polygon>](../arkui-js/js-components-svg-polygon.md), [\<polyline>](js-components-svg-polyline.md), [\<text>](js-components-svg-text.md), [\<animate>](js-components-svg-animate.md), and [\<animateTransform>](js-components-svg-animatetransform.md).
 
 
 ## Attributes
 
 The [universal attributes](../arkui-js/js-components-svg-common-attributes.md) and the attributes listed below are supported. The configured universal attributes are passed to the child components.
 
-| Name| Type| Default Value| Mandatory| Description|
-| -------- | -------- | -------- | -------- | -------- |
-| id | string | - | No| Unique ID of the component.|
-| width | &lt;length&gt;\|&lt;percentage&gt; | - | No| Component width.|
-| height | &lt;length&gt;\|&lt;percentage&gt; | - | No| Component height.|
-| x | &lt;length&gt;\|&lt;percentage&gt; | - | No| X-coordinate of the current **\<svg>** component. The settings do not work for the root **\<svg>** node. |
-| y | &lt;length&gt;\|&lt;percentage&gt; |  | No| Y-coordinate of the current **\<svg>** component. The settings do not work for the root **\<svg>** node. |
-| viewBox | string | - | No| View box of the current **\<svg>** component. The supported format is \<number number number number>. The four parameters indicate **min-x**, **min-y**, **width**, and **height**, respectively. The width and height of the view box are different from those of the **\<svg>** component. The view box is scaled in center-aligned mode. |
+| Name    | Type                               | Default Value | Mandatory | Description                              |
+| ------- | ---------------------------------- | ------------- | --------- | ---------------------------------------- |
+| id      | string                             | -             | No        | Unique ID of the component.              |
+| width   | &lt;length&gt;\|&lt;percentage&gt; | -             | No        | Component width.                         |
+| height  | &lt;length&gt;\|&lt;percentage&gt; | -             | No        | Component height.                        |
+| x       | &lt;length&gt;\|&lt;percentage&gt; | -             | No        | X-coordinate of the current **\<svg>** component. The settings do not work for the root **\<svg>** node. |
+| y       | &lt;length&gt;\|&lt;percentage&gt; |               | No        | Y-coordinate of the current **\<svg>** component. The settings do not work for the root **\<svg>** node. |
+| viewBox | string                             | -             | No        | View box of the current **\<svg>** component. The supported format is \<number number number number>. The four parameters indicate **min-x**, **min-y**, **width**, and **height**, respectively. The width and height of the view box are different from those of the **\<svg>** component. The view box is scaled in center-aligned mode. |
 
 
 ## Example

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

 # Divider
 
+The **\<Divider>** component is used to separate content blocks and elements.
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
-> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-
-
-The **&lt;Divider&gt;** component is used to separate content blocks and content elements.
-
-
-## Required Permissions
-
-None
+>  **NOTE**
+>
+>  This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 ## Child Components
 
-None
+Not supported
 
 
 ## APIs
 
 Divider()
 
-
 ## Attributes
 
-| Name | Type | Default Value | Description |
-| -------- | -------- | -------- | -------- |
-| vertical | boolean | false | Whether a vertical divider is used. The value **true** means that a vertical divider is used, and **false** means that a horizontal divider is used. |
-| color | Color | - | Color of the divider. |
-| strokeWidth | Length | 1 | Width of the divider. |
-| lineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle-enums) | LineCapStyle.Butt | Cap style of the divider. |
+In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
+
+| Name     | Type        | Description       |
+| ----------- | ---------- | ------------------ |
+| vertical    | boolean | Whether a vertical divider is used. **false**: A horizontal divider is used.<br>**true**: A vertical divider is used.<br>Default value: **false**|
+| color       | [ResourceColor](ts-types.md#resourcecolor) | Color of the divider.|
+| strokeWidth | number \| string | Width of the divider.<br>Default value: **1**|
+| lineCap     | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | Cap style of the divider.<br>Default value: **LineCapStyle.Butt**|
 
 
 ## Events
 
-Universal events are not supported.
+The universal events are not supported.
 
 
 ## Example
 
-
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct DividerExample {

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

 # Image
 
-The **\<image>** component is used to render and display images.
+The **\<Image>** component is used to render and display images.
 
->  **NOTE**
+> **NOTE**
 >
->  This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+
 
 ## Required Permissions
 
 To use online images, the application must have the **ohos.permission.INTERNET** permission. For details about how to apply for a permission, see [Declaring Permissions](../../security/accesstoken-guidelines.md).
 
+
 ## Child Components
 
 Not supported
@@ -19,6 +21,8 @@ Not supported
 
 Image(src: string | PixelMap | Resource)
 
+Obtains an image from the specified source for subsequent rendering and display.
+
 **Parameters**
 
 | Name| Type                                                    | Mandatory| Default Value| Description                                                    |
@@ -47,10 +51,10 @@ Image(src: string | PixelMap | Resource)
 
 ## ImageInterpolation
 
-| Name    | Description                      |
-| ------ | ------------------------ |
-| None   | Interpolation image data is not used.              |
-| High   | The interpolation image data is used at the high level. The use of the interpolation image data may affect the image rendering speed.|
+| Name    | Description                       |
+| ------ | ------------------------- |
+| None   | Interpolation image data is not used.               |
+| High   | The interpolation image data is used at the high level, which may affect the image rendering speed.|
 | Medium | The interpolation image data is used at the medium level.             |
 | Low    | The interpolation image data is used at the low level.             |
 
@@ -63,10 +67,11 @@ Image(src: string | PixelMap | Resource)
 
 ## Events
 
+
 | Name                                      | Description                                    |
 | ---------------------------------------- | ---------------------------------------- |
-| onComplete(callback: (event?: { width: number, height: number, componentWidth: number,<br> componentHeight: number, loadingStatus: number }) =&gt; void) | Triggered when an image is successfully loaded. The loaded image is returned.               |
-| onError(callback: (event?: { componentWidth: number, componentHeight: number }) =&gt; void) | Triggered when an exception occurs during image loading.                         |
+| onComplete(callback: (event?: { width: number, height: number, componentWidth: number,<br> componentHeight: number, loadingStatus: number }) =&gt; void) | Triggered when an image is successfully loaded. The size of the loaded image is returned.<br>- **width**: width of the image, in pixels.<br>- **height**: height of the image, in pixels.<br>- **componentWidth**: width of the container component, in pixels.<br>- **componentHeight**: height of the container component, in pixels.<br>- **loadingStatus**: image loading status.<br>|
+| onError(callback: (event?: { componentWidth: number, componentHeight: number }) =&gt; void) | Triggered when an exception occurs during image loading.<br>- **componentWidth**: width of the container component, in pixels.<br>- **componentHeight**: height of the container component, in pixels.<br>|
 | onFinish(event: () =&gt; void) | Triggered when the animation playback in the loaded SVG image is complete. If the animation is an infinite loop, this callback is not triggered.|
 
 

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

@@ -32,7 +32,7 @@ In addition to the [universal text style](ts-universal-attributes-text-style.md)
 | -------- | -------- | -------- |
 | decoration | {<br>type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype),<br>color?: [ResourceColor](ts-types.md#resourcecolor)<br>} | Style and color of the text decorative line.<br>Default value: {<br>type: TextDecorationType.None<br>color: Color.Black<br>} |
 | letterSpacing       | number \| string  | Letter spacing.                                |
-| textCase | [TextCase](ts-appendix-enums.md#textcase) | Text case.<br>Default value: **Normal** |
+| textCase | [TextCase](ts-appendix-enums.md#textcase) | Text case.<br>Default value: **TextCase.Normal**|
 
 
 ## Events

en/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md

@@ -15,24 +15,24 @@ PanGesture(value?: { fingers?: number, direction?: PanDirection, distance?: numb
 
 **Parameters**
 
-| Name| Type| Mandatory| Description|
-| -------- | -------- | -------- | -------- |
-| fingers | number | No| Minimum number of fingers to trigger a pan gesture. The value ranges from 1 to 10.<br>Default value: **1**|
-| direction | PanDirection | No| Pan direction. The enumerated value supports the AND (&amp;) and OR (\|) operations.<br>Default value: **PanDirection.All**|
-| distance | number | No| Minimum pan distance to trigger the gesture, in vp.<br>Default value: **5**<br>**NOTE**<br>If a pan gesture and tab swipe occur at the same time, set **distance** to **1** so that the gesture can be more easily recognized.|
+| Name      | Type         | Mandatory | Description                              |
+| --------- | ------------ | --------- | ---------------------------------------- |
+| fingers   | number       | No        | Minimum number of fingers to trigger a pan gesture. The value ranges from 1 to 10.<br>Default value: **1** |
+| direction | PanDirection | No        | Pan direction. The enumerated value supports the AND (&amp;) and OR (\|) operations.<br>Default value: **PanDirection.All** |
+| distance  | number       | No        | Minimum pan distance to trigger the gesture, in vp.<br>Default value: **5**<br>**NOTE**<br>If a pan gesture and tab swipe occur at the same time, set **distance** to **1** so that the gesture can be more easily recognized. |
 
 ## PanDirection enums
 
-| Name| Description|
-| -------- | -------- |
-| All | All directions.|
-| Horizontal | Horizontal panning.|
-| Vertical | Vertical panning.|
-| Left | Panning to the left.|
-| Right | Panning to the right.|
-| Up | Panning up.|
-| Down | Panning down.|
-| None | Panning disabled.|
+| Name       | Description           |
+| ---------- | --------------------- |
+| All        | All directions.       |
+| Horizontal | Horizontal panning.   |
+| Vertical   | Vertical panning.     |
+| Left       | Panning to the left.  |
+| Right      | Panning to the right. |
+| Up         | Panning up.           |
+| Down       | Panning down.         |
+| None       | Panning disabled.     |
 
 
 ## PanGestureOptions
@@ -47,21 +47,21 @@ See the **PanGesture** parameters.
 
 **APIs**
 
-| Name| Description|
-| -------- | -------- |
-| setDirection(value: PanDirection) | Sets the direction.|
-| setDistance(value: number) | Sets the distance.|
-| setFingers(value: number) | Sets the number of fingers.|
+| Name                              | Description                 |
+| --------------------------------- | --------------------------- |
+| setDirection(value: PanDirection) | Sets the direction.         |
+| setDistance(value: number)        | Sets the distance.          |
+| setFingers(value: number)         | Sets the number of fingers. |
 
 
 ## Events
 
-| Name| Description|
-| -------- | -------- |
-| onActionStart(event: (event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Callback invoked when a pan gesture is recognized.|
-| onActionUpdate(event: (event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Callback invoked when the pan gesture status is updated.|
-| onActionEnd(event: (event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Callback invoked when the finger used for a pan gesture is lift.|
-| onActionCancel(event: () =&gt; void) | Callback invoked when a tap cancellation event is received after a pan gesture is recognized.|
+| Name                                     | Description                              |
+| ---------------------------------------- | ---------------------------------------- |
+| onActionStart(event: (event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Callback invoked when a pan gesture is recognized. |
+| onActionUpdate(event: (event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Callback invoked when the pan gesture status is updated. |
+| onActionEnd(event: (event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Callback invoked when the finger used for a pan gesture is lift. |
+| onActionCancel(event: () =&gt; void)     | Callback invoked when a tap cancellation event is received after a pan gesture is recognized. |
 
 
 ## Example
@@ -115,13 +115,3 @@ struct PanGestureExample {
   }
 }
 ```
-
-**Diagrams**
-
-Pannig to the left:
-
-![en-us_image_0000001174264374](figures/en-us_image_0000001174264374.png) 
-
-Click Set PanGesture Trigger Condition to two fingers moving toward the lower left corner.
-
- ![en-us_image1_0000001174264374](figures/en-us_image1_0000001174264374.png) 

en/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md

@@ -13,20 +13,20 @@ PinchGesture(value?: { fingers?: number, distance?: number })
 
 **Parameters**
 
-| Name| Type| Mandatory| Description|
-| -------- | -------- | -------- | -------- |
-| fingers | number | No| Minimum number of fingers to trigger a pinch. The value ranges from 2 to 5.<br>Default value: **2**|
-| distance | number | No| Minimum recognition distance, in vp.<br>Default value: **3**|
+| Name     | Type   | Mandatory | Description                              |
+| -------- | ------ | --------- | ---------------------------------------- |
+| fingers  | number | No        | Minimum number of fingers to trigger a pinch. The value ranges from 2 to 5.<br>Default value: **2** |
+| distance | number | No        | Minimum recognition distance, in vp.<br>Default value: **3** |
 
 
 ## Events
 
-| Name| Description|
-| -------- | -------- |
-| onActionStart(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when a pinch gesture is recognized.|
-| onActionUpdate(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when the user moves the finger in a pinch gesture on the screen.|
-| onActionEnd(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when the finger used for a pinch gesture is lift.|
-| onActionCancel(event: () =&gt; void) | Triggered when a tap cancellation event is received after a pinch gesture is recognized.|
+| Name                                     | Description                              |
+| ---------------------------------------- | ---------------------------------------- |
+| onActionStart(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when a pinch gesture is recognized. |
+| onActionUpdate(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when the user moves the finger in a pinch gesture on the screen. |
+| onActionEnd(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when the finger used for a pinch gesture is lift. |
+| onActionCancel(event: () =&gt; void)     | Triggered when a tap cancellation event is received after a pinch gesture is recognized. |
 
 
 ## Example

en/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md

@@ -13,27 +13,27 @@ SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: num
 
 **Parameters**
 
-| Name| Type| Mandatory| Description|
-| -------- | -------- | -------- | -------- |
-| fingers | number | No| Minimum number of fingers to trigger a swipe gesture. The value ranges from 1 to 10.<br>Default value: **1**|
-| direction | SwipeDirection | No| Swipe direction.<br>Default value: **SwipeDirection.All**|
-| speed | number | No| Minimum speed of the swipe gesture, in vp/s.<br>Default value: **100**|
+| Name      | Type           | Mandatory | Description                              |
+| --------- | -------------- | --------- | ---------------------------------------- |
+| fingers   | number         | No        | Minimum number of fingers to trigger a swipe gesture. The value ranges from 1 to 10.<br>Default value: **1** |
+| direction | SwipeDirection | No        | Swipe direction.<br>Default value: **SwipeDirection.All** |
+| speed     | number         | No        | Minimum speed of the swipe gesture, in vp/s.<br>Default value: **100** |
 
 ## SwipeDirection
 
-| Name| Description|
-| -------- | -------- |
-| All | All directions.|
+| Name       | Description           |
+| ---------- | --------------------- |
+| All        | All directions.       |
 | Horizontal | Horizontal direction. |
-| Vertical | Vertical direction. |
-| None | Swiping disabled.|
+| Vertical   | Vertical direction.   |
+| None       | Swiping disabled.     |
 
 
 ## Events
 
-| Name| Description|
-| -------- | -------- |
-| onAction(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when a swipe gesture is recognized.|
+| Name                                     | Description                              |
+| ---------------------------------------- | ---------------------------------------- |
+| onAction(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when a swipe gesture is recognized. |
 
 ## Example
 

en/application-dev/reference/arkui-ts/ts-container-badge.md

@@ -24,7 +24,7 @@ Create a badge.
 | count | number | Yes| - | Number of notifications.|
 | position | [BadgePosition](#badgeposition) | No| BadgePosition.RightTop | Position to display the badge relative to the parent component.|
 | maxCount | number | No| 99 | Maximum number of notifications. When the maximum number is reached, only **maxCount+** is displayed.|
-| style | [BadgeStyle](#badgestyle) | Yes| - | Style of the badge, including the font color, font size, badge color, and badge size. |
+| style | [BadgeStyle](#badgestyle) | Yes| - | Style of the badge, including the font color, font size, badge color, and badge size.|
 
 **Method 2**: Badge(value: {value: string, position?: BadgePosition, style: BadgeStyle})
 
@@ -36,7 +36,7 @@ Creates a badge based on the given string.
 | -------- | -------- | -------- | -------- | -------- |
 | value | string | Yes| - | Prompt content.|
 | position | [BadgePosition](#badgeposition) | No| BadgePosition.RightTop | Position to display the badge relative to the parent component.|
-| style | [BadgeStyle](#badgestyle) | Yes| - | Style of the badge, including the font color, font size, badge color, and badge size. |
+| style | [BadgeStyle](#badgestyle) | Yes| - | Style of the badge, including the font color, font size, badge color, and badge size.|
 
 ## BadgePosition
 
@@ -47,12 +47,13 @@ Creates a badge based on the given string.
 | Left | The badge is vertically centered on the left of the parent component.|
 
 ## BadgeStyle
-| Name| Type| Mandatory| Default Value| Description|
-| -------- | -------- | -------- | -------- | -------- |
-| color | [ResourceColor](ts-types.md#resourcecolor) | No| Color.White | Font color. |
-| fontSize | number \| string | No| 10 | Font size. |
-| badgeSize | number \| string | Yes| - | Badge size.|
-| badgeColor | [ResourceColor](ts-types.md#resourcecolor) | No| Color.Red | Badge color.|
+
+| Name      | Type                                      | Mandatory| Default Value     | Description                                       |
+| ---------- | ------------------------------------------ | ---- | ----------- | ------------------------------------------- |
+| color      | [ResourceColor](ts-types.md#resourcecolor) | No  | Color.White | Font color.                                 |
+| fontSize   | number \| string                 | No  | 10          | Font size, in vp.                    |
+| badgeSize  | number \| string                 | No  | 16          | Badge size, in vp. This parameter cannot be set in percentage. If it is set to an invalid value, the default value is used.|
+| badgeColor | [ResourceColor](ts-types.md#resourcecolor) | No  | Color.Red   | Badge color.                              |
 
 ## Example
 

en/application-dev/reference/arkui-ts/ts-drawing-components-shape.md

@@ -23,30 +23,30 @@ Shape(value?: PixelMap)
 
 **Parameters**
 
-| Name| Type| Mandatory| Default Value| Description|
-| -------- | -------- | -------- | -------- | -------- |
-| value | PixelMap | No| - | Shape to draw. You can draw a shape in the specified **PixelMap** object. If no object is specified, the shape is drawn in the current drawing target.|
+| Name  | Type     | Mandatory | Default Value | Description                              |
+| ----- | -------- | --------- | ------------- | ---------------------------------------- |
+| value | PixelMap | No        | -             | Shape to draw. You can draw a shape in the specified **PixelMap** object. If no object is specified, the shape is drawn in the current drawing target. |
 
 
 ## Attributes
 
 In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
 
-| Name| Type| Default Value| Mandatory| Description|
-| -------- | -------- | -------- | -------- | -------- |
-| viewPort | {<br>x?: number \| string,<br>y?: number \| string,<br>width?: number \| string,<br>height?: number \| string<br>} | { x:0, y:0, width:0, height:0 } | No| View port of the shape.|
-| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | No| Color of the fill area.|
-| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Opacity of the fill area.|
-| stroke | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | No| Stroke color.|
-| strokeDashArray | Array&lt;Length&gt; | [] | No| Stroke dash.|
-| strokeDashOffset | number \| string | 0 | No| Offset of the start point for drawing the stroke.|
-| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | No| Cap style of the stroke.|
-| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | No| Join style of the stroke.|
-| strokeMiterLimit | number \| string | 4 | No| Limit value when the sharp angle is drawn as a miter.|
-| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Stroke opacity.|
-| strokeWidth | number \| string | 1 | No| Stroke width.|
-| antiAlias | boolean | true | No| Whether anti-aliasing is enabled.|
-| mesh<sup>8+</sup> | Array&lt;number&gt;,number,number | [],0,0 | No| Mesh effect. The first parameter is an array of lengths (column + 1) * (row + 1) * 2, which records the position of each vertex of the distorted bitmap. The second parameter is the number of columns in the mesh matrix. The third parameter is the number of rows in the mesh matrix.|
+| Name              | Type                                     | Default Value                   | Mandatory | Description                              |
+| ----------------- | ---------------------------------------- | ------------------------------- | --------- | ---------------------------------------- |
+| viewPort          | {<br>x?: number \| string,<br>y?: number \| string,<br>width?: number \| string,<br>height?: number \| string<br>} | { x:0, y:0, width:0, height:0 } | No        | View port of the shape.                  |
+| fill              | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black                     | No        | Color of the fill area.                  |
+| fillOpacity       | number \| string \| [Resource](ts-types.md#resource) | 1                               | No        | Opacity of the fill area.                |
+| stroke            | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black                     | No        | Stroke color.                            |
+| strokeDashArray   | Array&lt;Length&gt;                      | []                              | No        | Stroke dash.                             |
+| strokeDashOffset  | number \| string                         | 0                               | No        | Offset of the start point for drawing the stroke. |
+| strokeLineCap     | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt               | No        | Cap style of the stroke.                 |
+| strokeLineJoin    | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter             | No        | Join style of the stroke.                |
+| strokeMiterLimit  | number \| string                         | 4                               | No        | Limit value when the sharp angle is drawn as a miter. |
+| strokeOpacity     | number \| string \| [Resource](ts-types.md#resource) | 1                               | No        | Stroke opacity.                          |
+| strokeWidth       | number \| string                         | 1                               | No        | Stroke width.                            |
+| antiAlias         | boolean                                  | true                            | No        | Whether anti-aliasing is enabled.        |
+| mesh<sup>8+</sup> | Array&lt;number&gt;,number,number        | [],0,0                          | No        | Mesh effect. The first parameter is an array of lengths (column + 1) * (row + 1) * 2, which records the position of each vertex of the distorted bitmap. The second parameter is the number of columns in the mesh matrix. The third parameter is the number of rows in the mesh matrix. |
 
 ## Example
 

en/application-dev/ui/ts-framework-directory.md

 # Directory Structure
 
 
-The following figure shows the typical directory structure of the eTS module (entry/src/main) for an application with feature abilities (FAs).
+The following figure shows the typical directory structure of the **ets** module (in **entry/src/main**) for an application with feature abilities (FAs).
 
 
 ![en-us_image_0000001222967752](figures/en-us_image_0000001222967752.png)
 
 
-Functions of the files are as follows:
+The **ets** directory contains the following files:
 
 
-- The Extended TypeScript (eTS) files that end with the .ets extension describe the UI layouts, styles, event interactions, and page logics.
-
+**.ets** files: Extended TypeScript (eTS) files that describe the UI layouts, styles, event interactions, and page logics.
 
 Functions of the folders and files are as follows:
 
+- The **app.ets** file manages global application logics and lifecycles.
+
+- The **pages** directory stores all pages.
+
+- The **common** directory stores common code files, such as files of custom components and public methods.
 
-- The app.ets file manages global application logics and lifecycles.
 
-- The pages directory stores all component pages.
+> **NOTE**
+>
+> - For details about the **resources** directory in **src/main**, see [Resource File Categories](ui-ts-basic-resource-file-categories.md).
+> - TypeScript and JavaScript files can be imported as page files.
+
+"js" tag configuration:
 
-- The common directory stores common code files, such as custom components and public methods.
+Configure the **"js"** tag in the configuration file of your application. The **"js"** tag contains the instance name, page route, and window configuration information.
 
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> **NOTE**
+>
+>  For details about the **"js"** tag in the FA model, see [Table 22 Internal structure of the js attribute](../quick-start/package-structure.md#internal-structure-of-the-js-attribute).
 >
-> TypeScript and JavaScript files can be imported as page files.

en/application-dev/website.md

@@ -243,8 +243,8 @@
       - [Distributed Data Object Development](database/database-distributedobject-guidelines.md)
   - Task Management
     - Background Task Management
-      - [Background Task Management Overview](background-task-management/background-task-overview.md)
-      - [Background Task Management Development](background-task-management/background-task-dev-guide.md)
+      - [Background Task Management Overview](task-management/background-task-overview.md)
+      - [Background Task Management Development](task-management/background-task-dev-guide.md)
     - Work Scheduler
       - [Work Scheduler Overview](task-management/work-scheduler-overview.md)
       - [Work Scheduler Development](task-management/work-scheduler-dev-guide.md)

en/release-notes/api-change/v3.1-Release/changelog-v3.1-release.md

+# Updates (OpenHarmony 3.1 Beta -> OpenHarmony 3.1 Release)
+
+### Added Validity Verification for Color Values in Color.json
+
+Validity verification is added for color values in the **color.json** file. The verification rules are as follows:
+
+- The hexadecimal color code is used in any of the following formats:
+    - #rgb: red(0-f) green(0-f) blue(0-f)
+    - #argb: transparency(0-f) red(0-f) green(0-f) blue(0-f)
+    - #rrggbb: red(00-ff) green(00-ff) blue(00-ff)
+    - #aarrggbb: transparency(00-ff) red(00-ff) green(00-ff) blue(00-ff)
+- The dollar sign ($) is used to reference resources defined in the application. The format is as follows:
+    - $color:xxx
+
+**Change Impacts**
+
+If the verification rules are not met, an error is reported during compilation.
+
+**Key API/Component Changes**
+
+None
+
+### Restrictions on Declaring Multiple Data Types of State Variables
+
+If a **@State**, **@Provide**, **@Link**, or **@Consume** decorated state variable supports multiple data types, they must be all simple data types or references at one time.
+
+Example:
+
+```ts
+@Entry
+@Component
+struct Index {
+  // Incorrect: @State message: string | Resource = 'Hello World'
+  @State message: string = 'Hello World'
+
+  build() {
+    Row() {
+      Column() {
+        Text(`${ this.message }`)
+          .fontSize(50)
+          .fontWeight(FontWeight.Bold)
+      }
+      .width('100%')
+    }
+    .height('100%')
+  }
+}
+```
+
+**Change Impacts**
+
+When the defined state variable type contains both the simple data types and references, an error is reported during compilation.
+
+**Key API/Component Changes**
+
+If the defined state variable type contains both the simple data types and references, change the type to one of them, as shown in the preceding sample code.

en/release-notes/api-change/v3.1-Release/readme.md

@@ -4,3 +4,4 @@ This directory records the API changes in OpenHarmony 3.1 Release over OpenHarmo
 
 - [JS API Differences](js-apidiff-v3.1-release.md)
 - [Native API Differences](native-apidiff-v3.1-release.md)
+- [Updates (OpenHarmony 3.1 Beta -> OpenHarmony 3.1 Release)](changelog-v3.1-release.md)

en/website.md

@@ -52,6 +52,7 @@
         - [User IAM subsystem](release-notes/api-change/v3.1-Release/js-apidiff-user-authentication.md)
         - [Window manager subsystem](release-notes/api-change/v3.1-Release/js-apidiff-window.md)
       - [Native API Differences](release-notes/api-change/v3.1-Release/native-apidiff-v3.1-release.md)
+      - [Updates (OpenHarmony 3.1 Beta -> OpenHarmony 3.1 Release)](release-notes/api-change/v3.1-Release/changelog-v3.1-release.md)      
 - Contribution
   - [How to Contribute](contribute/how-to-contribute.md)
   - [Code of Conduct](contribute/code-of-conduct.md)

zh-cn/application-dev/Readme-CN.md

@@ -5,7 +5,7 @@
     - [了解OpenHarmony开源项目](../OpenHarmony-Overview_zh.md)
     - [术语](../glossary.md)
     - [版本说明](../release-notes/Readme.md)
-- 快速开始
+- 入门
     - 快速入门
         - [开发准备](quick-start/start-overview.md)
         - [使用eTS语言开发(传统代码方式)](quick-start/start-with-ets.md)
@@ -15,7 +15,6 @@
     - 开发基础知识
         - [应用包结构说明(FA模型)](quick-start/package-structure.md)
         - [应用包结构说明(Stage模型)](quick-start/stage-structure.md)
-        - [资源文件的分类](quick-start/basic-resource-file-categories.md)
         - [SysCap说明](quick-start/syscap.md)
 - 开发
     - [Ability开发](ability/Readme-CN.md)

zh-cn/application-dev/application-dev-guide-for-gitee.md

@@ -4,9 +4,9 @@
 
 在应用开发的文档中，您可以获取到如下几方面的内容：
 
-### 快速开始
+### 入门
 
-[快速开始](quick-start/Readme-CN.md)可以帮助开发者了解应用开发的基本方法。
+[入门](quick-start/Readme-CN.md)可以帮助开发者了解应用开发的基本方法。
 
 这一部分包含了快速构建首个应用的快速入门，以及开发OpenHarmony应用所必备的基础知识。
 

zh-cn/application-dev/application-dev-guide.md

@@ -4,9 +4,9 @@
 
 在应用开发的文档中，您可以获取到如下几方面的内容：
 
-### 快速开始
+### 入门
 
-[快速开始](quick-start/start-overview.md)可以帮助开发者了解应用开发的基本方法。
+[入门](quick-start/start-overview.md)可以帮助开发者了解应用开发的基本方法。
 
 这一部分包含了快速构建首个应用的快速入门，以及开发OpenHarmony应用所必备的基础知识。
 

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

@@ -118,7 +118,7 @@ var subscriber = {
     },
   };
 
-  Notification.subscribe(subscriber, (err, data) => { // callback形式调用异步接口
+  Notification.subscribe(subscriber, (err) => { // callback形式调用异步接口
     if (err.code) {
       console.error('===>failed to subscribe because ' + JSON.stringify(err));
       return;
@@ -154,7 +154,7 @@ var notificationRequest = {
 }
 
 //通知发送
-Notification.publish(notificationRequest) .then((data) => {
+Notification.publish(notificationRequest) .then(() => {
 	console.info('===>publish promise success req.id : ' + notificationRequest.id);
 }).catch((err) => {
 	console.error('===>publish promise failed because ' + JSON.stringify(err));
@@ -223,7 +223,7 @@ var notificationRequest = {
 }
 
 //通知发送
-Notification.publish(notificationRequest) .then((data) => {
+Notification.publish(notificationRequest) .then(() => {
 	console.info('===>publish promise success req.id : ' + notificationRequest.id);
 }).catch((err) => {
 	console.error('===>publish promise failed because ' + JSON.stringify(err));
@@ -244,8 +244,3 @@ function cancelCallback(err) {
 
 Notification.cancel(1, "label", cancelCallback)
 ```
-
-## 相关实例
-
-针对通知开发，有以下相关可供参考：
-- [`Notification`：通知（eTS）（API8）](https://gitee.com/openharmony/applications_app_samples/tree/master/common/Notification)

zh-cn/application-dev/quick-start/Readme-CN.md

-# 快速开始
+# 入门
 
 - 快速入门
   - [开发准备](start-overview.md)

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

@@ -68,6 +68,9 @@
   - bundle/[HapModuleInfo (HapModuleInfo)](js-apis-bundle-HapModuleInfo.md)
   - bundle/[Metadata (Metadata)](js-apis-bundle-Metadata.md)
   - bundle/[ModuleInfo (ModuleInfo)](js-apis-bundle-ModuleInfo.md)
+- 应用管理
+
+  - [@system.package (应用管理)](js-apis-system-package.md)
 - UI界面
 
   - [@ohos.animator (动画)](js-apis-animator.md)
@@ -234,7 +237,6 @@
   - [@system.mediaquery (媒体查询)](js-apis-system-mediaquery.md)
   - [@system.network (网络状态)](js-apis-system-network.md)
   - [@system.notification (通知消息)](js-apis-system-notification.md)
-  - [@system.package (应用管理)](js-apis-system-package.md)
   - [@system.prompt (弹窗)](js-apis-system-prompt.md)
   - [@system.request (上传下载)](js-apis-system-request.md)
   - [@system.router (页面路由)](js-apis-system-router.md)

zh-cn/application-dev/reference/apis/js-apis-featureAbility.md

@@ -36,7 +36,7 @@ startAbility(parameter: StartAbilityParameter, callback: AsyncCallback\<number>)
 import featureAbility from '@ohos.ability.featureAbility'
 import wantConstant from '@ohos.ability.wantConstant'
 featureAbility.startAbility(
-        {
+    {
         want:
         {
             action: "",
@@ -49,6 +49,9 @@ featureAbility.startAbility(
             uri: ""
         },
     },
+    (err, data) => {
+        console.info("err: " + JSON.stringify(err) + "data: " + JSON.stringify(data))
+    }
 );
 ```
 
@@ -262,6 +265,9 @@ featureAbility.terminateSelfWithResult(
             }
         },
     },
+    (err) => {
+        console.info("err: " + JSON.stringify(err))
+    }
 );
 ```
 
@@ -340,7 +346,11 @@ hasWindowFocus(callback: AsyncCallback\<boolean>): void
 
 ```javascript
 import featureAbility from '@ohos.ability.featureAbility';
-featureAbility.hasWindowFocus()
+featureAbility.hasWindowFocus(
+    (err, data) => {
+        console.info("err: " + JSON.stringify(err) + "data: " + JSON.stringify(data))
+    }
+)
 ```
 
 
@@ -388,7 +398,11 @@ getWant(callback: AsyncCallback\<Want>): void
 
 ```javascript
 import featureAbility from '@ohos.ability.featureAbility';
-featureAbility.getWant()
+featureAbility.getWant(
+    (err, data) => {
+        console.info("err: " + JSON.stringify(err) + "data: " + JSON.stringify(data))
+    }
+)
 ```
 
 
@@ -458,7 +472,11 @@ terminateSelf(callback: AsyncCallback\<void>): void
 
 ```javascript
 import featureAbility from '@ohos.ability.featureAbility';
-featureAbility.terminateSelf()
+featureAbility.terminateSelf(
+    (err) => {
+        console.info("err: " + JSON.stringify(err))
+    }
+)
 ```
 
 
@@ -595,8 +613,8 @@ var connId = featureAbility.connectAbility(
     },
 );
 var result = featureAbility.disconnectAbility(connId,
-    (error,data) => {
-    console.log('featureAbilityTest DisConnectJsSameBundleName result errCode : ' + error.code + " data: " + data)
+    (error) => {
+        console.log('featureAbilityTest DisConnectJsSameBundleName result errCode : ' + error.code)
     },
 );
 ```
@@ -670,7 +688,11 @@ getWindow(callback: AsyncCallback\<window.Window>): void
 **示例：**
 
 ```javascript
-featureAbility.getWindow()
+featureAbility.getWindow(
+    (err, data) => {
+        console.info("err: " + JSON.stringify(err) + "data: " + JSON.stringify(data))
+    }
+)
 ```
 
 ## featureAbility.getWindow<sup>7+</sup>

zh-cn/application-dev/reference/apis/js-apis-inputmethod.md

 # 输入法框架
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 本模块首批接口从API version 6开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。
+本模块提供对输入法框架的管理，包括隐藏输入法、查询已安装的输入法列表和拉起选择输入法弹窗。
 
+> **说明：**
+>
+> 本模块首批接口从API version 6开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。
 
 ## 导入模块
 
-```
+```js
 import inputMethod from '@ohos.inputmethod';
 ```
 
-## inputMethod<sup>6+</sup>
+## 常量
 
 常量值。
 
-**系统能力**：以下各项对应的系统能力均为SystemCapability.Miscservices.InputMethodFramework
-
-| 名称 | 参数类型 | 可读 | 可写 | 说明 |
-| -------- | -------- | -------- | -------- | -------- |
-| MAX_TYPE_NUM | number | 是 | 否 | 可支持的最大输入法个数。 |
+**系统能力：** SystemCapability.Miscservices.InputMethodFramework
 
+| 名称 | 参数类型 | 常量值 | 说明 |
+| -------- | -------- | ---------- | -------- |
+| MAX_TYPE_NUM | number | 128 | 可支持的最大输入法个数。 |
 
-## InputMethodProperty<sup>6+</sup>
+## InputMethodProperty
 
 输入法应用属性。
 
-**系统能力**：以下各项对应的系统能力均为SystemCapability.Miscservices.InputMethodFramework
+**系统能力：** SystemCapability.Miscservices.InputMethodFramework
 
 | 名称 | 参数类型 | 可读 | 可写 | 说明 |
 | -------- | -------- | -------- | -------- | -------- |
-| packageName | string | 是 | 否 | 包名。 |
-| methodId | string | 是 | 否 | Ability名。 |
+| packageName | string | 是 | 否 | 输入法包名。 |
+| methodId | string | 是 | 否 | 输入法唯一标识。 |
 
 ## inputMethod.getInputMethodController
 
 getInputMethodController(): InputMethodController
 
-获取客户端实例[InputMethodController](#InputMethodController)。
+获取客户端实例[InputMethodController](#inputmethodcontroller)。
 
-**系统能力**：SystemCapability.Miscservices.InputMethodFramework
+**系统能力：** SystemCapability.Miscservices.InputMethodFramework
 
 **返回值：**
 
-    | 类型 | 说明 |
-    | -------- | -------- |
-    | [InputMethodController](#InputMethodController) | 回调返回当前客户端实例。 |
+| 类型 | 说明 |
+| -------- | -------- |
+| [InputMethodController](#inputmethodcontroller) | 返回当前客户端实例。 |
 
 **示例：**
 
 ```js
-  var InputMethodController = inputMethod.getInputMethodController();
+let inputMethodController = inputMethod.getInputMethodController();
 ```
 
-## inputMethod.getInputMethodSetting<sup>6+</sup>
+## inputMethod.getInputMethodSetting
 
 getInputMethodSetting(): InputMethodSetting
 
-获取客户端设置实例[InputMethodSetting](#InputMethodSetting)。
+获取客户端设置实例[InputMethodSetting](#inputmethodsetting)。
 
-**系统能力**： SystemCapability.Miscservices.InputMethodFramework
+**系统能力：** SystemCapability.Miscservices.InputMethodFramework
 
 **返回值：**
 
-| 类型                                      | 说明                         |
-| ----------------------------------------- | ---------------------------- |
-| [InputMethodSetting](#InputMethodSetting) | 回调返回当前客户端设置实例。 |
-
+| 类型                                      | 说明                     |
+| ----------------------------------------- | ------------------------ |
+| [InputMethodSetting](#inputmethodsetting) | 返回当前客户端设置实例。 |
 
 **示例：**
-  
+
 ```js
-  var InputMethodSetting = inputMethod.getInputMethodSetting();
+let inputMethodSetting = inputMethod.getInputMethodSetting();
 ```
 
 ## InputMethodController
 
-下列API示例中都需使用[getInputMethodController](#getInputMethodController)回调获取到InputMethodController实例，再通过此实例调用对应方法。
+下列API示例中都需使用[getInputMethodController](#inputmethodgetinputmethodcontroller)回调获取到InputMethodController实例，再通过此实例调用对应方法。
 
 ### stopInput
 
 stopInput(callback: AsyncCallback&lt;boolean&gt;): void
 
-隐藏输入法。
+结束输入法会话。使用callback异步回调。
 
-**系统能力**：SystemCapability.Miscservices.InputMethodFramework
+**系统能力：** SystemCapability.Miscservices.InputMethodFramework
 
 **参数：**
 
 | 参数名 | 类型 | 必填 | 说明 |
 | -------- | -------- | -------- | -------- |
-| callback | AsyncCallback&lt;boolean&gt; | 是 | 返回输入法隐藏是否成功。 |
+| callback | AsyncCallback&lt;boolean&gt; | 是 | 回调函数，返回结束输入法会话是否成功的结果。true表示结束输入法会话成功；false表示结束输入法会话失败。 |
 
 **示例：**
 
 ```js
- InputMethodController.stopInput((error)=>{
-     console.info('stopInput');
- });
+inputMethodController.stopInput((error, result) => {
+    if (error) {
+        console.error('Failed to stop inputmethod session: ' + JSON.stringify(error));
+        return;
+    }
+    if (result) {
+        console.info('Succeeded in stopping inputmethod session.');
+    } else {
+        console.error('Failed to stop inputmethod session.');
+    }
+});
 ```
 
 ### stopInput
 
 stopInput(): Promise&lt;boolean&gt;
 
-隐藏输入法。
+结束输入法会话。使用Promise异步回调。
 
-**系统能力**： SystemCapability.Miscservices.InputMethodFramework
+**系统能力：** SystemCapability.Miscservices.InputMethodFramework
 
 **返回值：**
 
 | 类型 | 说明 |
 | -------- | -------- |
-| Promise&lt;boolean&gt; | 返回输入法隐藏是否成功。 |
+| Promise&lt;boolean&gt; | Promise对象，返回结束输入法会话是否成功的结果。true表示结束输入法会话成功；false表示结束输入法会话失败。 |
 
 **示例：**
 
-
 ```js
-  var isSuccess = InputMethodController.stopInput();
-  console.info('stopInput isSuccess = ' + isSuccess);
+inputMethodController.stopInput().then((result) => {
+    if (result) {
+        console.info('Succeeded in stopping inputmethod session.');
+    } else {
+        console.error('Failed to stop inputmethod session');
+    }
+})
 ```
 
-## InputMethodSetting<sup>6+</sup>
+## InputMethodSetting
 
-下列API示例中都需使用[getInputMethodSetting](#getInputMethodSetting)回调获取到InputMethodSetting实例，再通过此实例调用对应方法。
+下列API示例中都需使用[getInputMethodSetting](#inputmethodgetinputmethodsetting)回调获取到InputMethodSetting实例，再通过此实例调用对应方法。
 
 ### listInputMethod
 
 listInputMethod(callback: AsyncCallback&lt;Array&lt;InputMethodProperty&gt;&gt;): void
 
-查询已安装的输入法列表。
+查询已安装的输入法列表。使用callback异步回调。
 
-**系统能力**： SystemCapability.Miscservices.InputMethodFramework
+**系统能力：** SystemCapability.Miscservices.InputMethodFramework
 
 **参数：**
+
 | 参数名   | 类型                                               | 必填 | 说明                   |
 | -------- | -------------------------------------------------- | ---- | ---------------------- |
-| callback | Array<[InputMethodProperty](#InputMethodProperty)> | 是   | 返回已安装输入法列表。 |
+| callback | Array<[InputMethodProperty](#inputmethodproperty)> | 是   | 回调函数，返回已安装的输入法列表。 |
 
 **示例：**
-  
+
 ```js
-  InputMethodSetting.listInputMethod((properties)=>{
-    for (var i = 0;i < properties.length; i++) {
-     var property = properties[i];
-     console.info(property.packageName + "/" + property.methodId);
+inputMethodSetting.listInputMethod((err, data) => {
+    if(err) {
+        console.error('Failed to list inputmethods: ' + JSON.stringify(err));
+        return;
     }
-  });
+    console.log('Succeeded in listing inputmethods, data: ' + JSON.stringify(data));
+ });
 ```
 
 ### listInputMethod
 
 listInputMethod(): Promise&lt;Array&lt;InputMethodProperty&gt;&gt;
 
-查询已安装的输入法列表。
+查询已安装的输入法列表。使用Promise异步回调。
 
-**系统能力**： SystemCapability.Miscservices.InputMethodFramework
+**系统能力：** SystemCapability.Miscservices.InputMethodFramework
 
 **返回值：**
+
 | 类型                                                        | 说明                   |
 | ----------------------------------------------------------- | ---------------------- |
-| Promise<Array<[InputMethodProperty](#InputMethodProperty)>> | 返回已安装输入法列表。 |
+| Promise<Array<[InputMethodProperty](#inputmethodproperty)>> | Promise对象，返回已安装的输入法列表。|
 
 **示例：**
-  
+
 ```js
-  var properties = InputMethodSetting.listInputMethod();
-  for (var i = 0;i < properties.length; i++) {
-    var property = properties[i];
-    console.info(property.packageName + "/" + property.methodId);
-  }
+inputMethodSetting.listInputMethod().then((data) => {
+    console.info('Succeeded in listing inputMethod.');
+}).catch((err) => {
+    console.error('Failed to list inputMethod: ' + JSON.stringify(err));
+})
 ```
 
 ### displayOptionalInputMethod
 
 displayOptionalInputMethod(callback: AsyncCallback&lt;void&gt;): void
 
-显示输入法选择对话框。
+显示选择输入法弹窗。使用callback异步回调。
 
-**系统能力**： SystemCapability.Miscservices.InputMethodFramework
+**系统能力：** SystemCapability.Miscservices.InputMethodFramework
 
 **参数：**
 
 | 参数名 | 类型 | 必填 | 说明 |
 | -------- | -------- | -------- | -------- |
-| callback | AsyncCallback&lt;void&gt; | 是 | 回调函数。 |
+| callback | AsyncCallback&lt;void&gt; | 是 | 回调函数。当选择输入法弹窗显示成功。err为undefined，否则为错误对象。 |
 
 **示例：**
 
 ```js
-  InputMethodSetting.displayOptionalInputMethod(()=>{
-   console.info('displayOptionalInputMethod is called');
-   });
+inputMethodSetting.displayOptionalInputMethod((err) => {
+    if (err) {
+        console.error('Failed to display optionalInputMethod:' + JSON.stringify(err));
+        return;
+    }
+    console.info('Succeeded in displaying optionalInputMethod.');
+});
 ```
 
 ### displayOptionalInputMethod
 
-  displayOptionalInputMethod(): Promise&lt;void&gt;
+displayOptionalInputMethod(): Promise&lt;void&gt;
 
-  显示输入法选择对话框。
+显示选择输入法弹窗。使用Promise异步回调。
 
-  **系统能力**： SystemCapability.Miscservices.InputMethodFramework
+**系统能力：** SystemCapability.Miscservices.InputMethodFramework
 
 **返回值：**
 
 | 类型 | 说明 |
 | -------- | -------- |
-| Promise&lt;void&gt; | 回调函数。 |
+| Promise&lt;void&gt; | 无返回结果的Promise对象。 |
 
 **示例：**
-    
+
 ```js
-  InputMethodSetting.displayOptionalInputMethod();
+inputMethodSetting.displayOptionalInputMethod().then(() => {
+    console.info('Succeeded in displaying optionalInputMethod.');
+}).catch((err) => {
+    console.error('Failed to display optionalInputMethod: ' + JSON.stringify(err));
+})
 ```
\ No newline at end of file

zh-cn/application-dev/reference/apis/js-apis-system-package.md

@@ -3,8 +3,6 @@
 
 > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
 >
-> - 从API Version 7 开始，该接口不再维护，推荐使用新接口[`@ohos.bundle`](js-apis-Bundle.md)。
->
 > - 本模块首批接口从API version 3开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。
 
 

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

 # button
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+>  **说明：**
+>  从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
-提供按钮组件，包括胶囊按钮、圆形按钮、文本按钮、弧形按钮、下载按钮。
+按钮组件，包括胶囊按钮、圆形按钮、文本按钮、弧形按钮、下载按钮。
 
 
 ## 子组件
@@ -15,13 +15,13 @@
 
 除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
 
-| 名称 | 类型 | 默认值 | 必填 | 描述 |
-| -------- | -------- | -------- | -------- | -------- |
-| type | string | - | 否 | 不支持动态修改。如果该属性缺省，展示类胶囊型按钮，不同于胶囊类型，四边圆角可以通过border-radius分别指定，如果需要设置该属性，则可选值包括如下：<br/>-&nbsp;capsule：胶囊型按钮，带圆角按钮，有背景色和文本；<br/>-&nbsp;circle：圆形按钮，支持放置图标；<br/>-&nbsp;text：文本按钮，仅包含文本显示；<br/>-&nbsp;arc：弧形按钮，仅支持智能穿戴；<br/>-&nbsp;download：下载按钮，额外增加下载进度条功能。 |
-| value | string | - | 否 | button的文本值。 |
-| icon | string | - | 否 | button的图标路径，图标格式为jpg，png和svg。 |
-| placement<sup>5+</sup> | string | end | 否 | 仅在type属性为缺省时生效，设置图标位于文本的位置，可选值为：<br/>-&nbsp;start：图标位于文本起始处；<br/>-&nbsp;end：图标位于文本结束处；<br/>-&nbsp;top：图标位于文本上方；<br/>-&nbsp;bottom：图标位于文本下方。 |
-| waiting | boolean | false | 否 | waiting状态，waiting为true时展现等待中转圈效果，位于文本左侧。类型为download时不生效。 |
+| 名称                     | 类型      | 默认值   | 必填   | 描述                                       |
+| ---------------------- | ------- | ----- | ---- | ---------------------------------------- |
+| type                   | string  | -     | 否    | 不支持动态修改。默认展示类胶囊型按钮，不同于胶囊类型，四边圆角可以通过border-radius分别指定。该属性可选值包括：<br/>-&nbsp;capsule：胶囊型按钮，带圆角按钮，有背景色和文本；<br/>-&nbsp;circle：圆形按钮，支持放置图标；<br/>-&nbsp;text：文本按钮，仅包含文本显示；<br/>-&nbsp;arc：弧形按钮，仅支持智能穿戴；<br/>-&nbsp;download：下载按钮，额外增加下载进度条功能。 |
+| value                  | string  | -     | 否    | button的文本值。                              |
+| icon                   | string  | -     | 否    | button的图标路径，图标格式为jpg，png和svg。            |
+| placement<sup>5+</sup> | string  | end   | 否    | 仅在type属性为缺省时生效，设置图标位于文本的位置，可选值为：<br/>-&nbsp;start：图标位于文本起始处；<br/>-&nbsp;end：图标位于文本结束处；<br/>-&nbsp;top：图标位于文本上方；<br/>-&nbsp;bottom：图标位于文本下方。 |
+| waiting                | boolean | false | 否    | waiting状态，waiting为true时展现等待中转圈效果，位于文本左侧。类型为download时不生效。 |
 
 
 ## 样式
@@ -31,31 +31,31 @@
 
 除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式：
 
-| 名称 | 类型 | 默认值 | 必填 | 描述 |
-| -------- | -------- | -------- | -------- | -------- |
-| text-color | &lt;color&gt; | \#ff007dff<br/> | 否 | 按钮的文本颜色。 |
-| font-size | &lt;length&gt; | 16px<br/> | 否 | 按钮的文本尺寸。 |
-| allow-scale | boolean | true | 否 | 按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
-| font-style | string | normal | 否 | 按钮的字体样式。 |
-| font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 按钮的字体粗细。见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
-| font-family | &lt;string&gt; | sans-serif | 否 | 按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
-| icon-width | &lt;length&gt; | - | 否 | 设置圆形按钮内部图标的宽，默认填满整个圆形按钮。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;icon使用svg图源时必须设置该样式。 |
-| icon-height | &lt;length&gt; | - | 否 | 设置圆形按钮内部图标的高，默认填满整个圆形按钮。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;icon使用svg图源时必须设置该样式。 |
-| radius | &lt;length&gt; | - | 否 | 按钮圆角半径。在圆形按钮类型下该样式优先于通用样式的width和height样式。 |
+| 名称          | 类型                         | 默认值             | 必填   | 描述                                       |
+| ----------- | -------------------------- | --------------- | ---- | ---------------------------------------- |
+| text-color  | &lt;color&gt;              | \#007dff<br/> | 否    | 按钮的文本颜色。                                 |
+| font-size   | &lt;length&gt;             | 16px<br/>       | 否    | 按钮的文本尺寸。                                 |
+| allow-scale | boolean                    | true            | 否    | 按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
+| font-style  | string                     | normal          | 否    | 按钮的字体样式。                                 |
+| font-weight | number&nbsp;\|&nbsp;string | normal          | 否    | 按钮的字体粗细。见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
+| font-family | &lt;string&gt;             | sans-serif      | 否    | 按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
+| icon-width  | &lt;length&gt;             | -               | 否    | 设置圆形按钮内部图标的宽，默认填满整个圆形按钮。<br/>icon使用svg图源时必须设置该样式。 |
+| icon-height | &lt;length&gt;             | -               | 否    | 设置圆形按钮内部图标的高，默认填满整个圆形按钮。<br/>icon使用svg图源时必须设置该样式。 |
+| radius      | &lt;length&gt;             | -               | 否    | 按钮圆角半径。在圆形按钮类型下该样式优先于通用样式的width和height样式。 |
 
 
 ### type设置为arc
 
 除支持[通用样式](../arkui-js/js-components-common-styles.md)中background-color、opacity、display、visibility、position、[left|top|right|bottom]外，还支持如下样式：
 
-| 名称 | 类型 | 默认值 | 必填 | 描述 |
-| -------- | -------- | -------- | -------- | -------- |
-| text-color | &lt;color&gt; | \#de0000 | 否 | 弧形按钮的文本颜色。 |
-| font-size | &lt;length&gt; | 37.5px | 否 | 弧形按钮的文本尺寸。 |
-| allow-scale | boolean | true | 否 | 弧形按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。 |
-| font-style | string | normal | 否 | 弧形按钮的字体样式。 |
-| font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 弧形按钮的字体粗细。见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
-| font-family | &lt;string&gt; | sans-serif | 否 | 按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
+| 名称          | 类型                         | 默认值        | 必填   | 描述                                       |
+| ----------- | -------------------------- | ---------- | ---- | ---------------------------------------- |
+| text-color  | &lt;color&gt;              | \#de0000   | 否    | 弧形按钮的文本颜色。                               |
+| font-size   | &lt;length&gt;             | 37.5px     | 否    | 弧形按钮的文本尺寸。                               |
+| allow-scale | boolean                    | true       | 否    | 弧形按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。           |
+| font-style  | string                     | normal     | 否    | 弧形按钮的字体样式。                               |
+| font-weight | number&nbsp;\|&nbsp;string | normal     | 否    | 弧形按钮的字体粗细。见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
+| font-family | &lt;string&gt;             | sans-serif | 否    | 按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
 
 
 ## 事件
@@ -69,13 +69,13 @@
 
 类型为download时，支持如下方法：
 
-| 名称 | 参数 | 描述 |
-| -------- | -------- | -------- |
-| setProgress | {&nbsp;progress:percent&nbsp;} | 设定下载按钮进度条进度，取值位于0-100区间内，当设置的值大于0时，下载按钮展现进度条。当设置的值大于等于100时，取消进度条显示。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;浮在进度条上的文字通过value值进行变更。 |
+| 名称          | 参数                             | 描述                                       |
+| ----------- | ------------------------------ | ---------------------------------------- |
+| setProgress | {&nbsp;progress:percent&nbsp;} | 设定下载按钮进度条进度，取值位于0-100区间内，当设置的值大于0时，下载按钮展现进度条。当设置的值大于等于100时，取消进度条显示。<br/>浮在进度条上的文字通过value值进行变更。 |
 
 ## 示例
 
-```
+```html
 <!-- xxx.hml -->
 <div class="div-button">
   <button class="first" type="capsule" value="Capsule button"></button>
@@ -87,7 +87,7 @@
 </div>
 ```
 
-```
+```css
 /* xxx.css */ 
 .div-button {
   flex-direction: column;
@@ -130,8 +130,8 @@
 }
 ```
 
-```
-// xxx.js 
+```js
+// xxx.js
 export default {
   data: {
     count: 5,