!21760 更新文档

Merge pull request !21760 from LiAn/master

!21760 更新文档
Merge pull request !21760 from LiAn/master
89aac2ed · openharmony_ci · Gitee · ef385b6b · 95d2e4b5 · 89aac2ed
7 changed file
--- a/zh-cn/application-dev/napi/xcomponent-guidelines.md
+++ b/zh-cn/application-dev/napi/xcomponent-guidelines.md
@@ -81,7 +81,7 @@ XComponent({ id: 'xcomponentId1', type: 'surface', libraryname: 'nativerender' }
    // ...
    ```
-2. **Napi模块注册**，具体使用请参考[Native API在应用工程中的使用指导](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/napi/napi-guidelines.md)。
+2. **Napi模块注册**，具体使用请参考[Native API在应用工程中的使用指导](napi-guidelines.md)。
    ```c++
    // 在napi_init.cpp文件中，Init方法注册接口函数，从而将封装的C++方法传递出来，供JS侧调用

--- a/zh-cn/application-dev/quick-start/arkts-mvvm.md
+++ b/zh-cn/application-dev/quick-start/arkts-mvvm.md
@@ -775,7 +775,7 @@ struct ViewA {
 开发一个电话簿应用，实现功能如下：
- 显示联系人和本机（"Me"）电话号码 。
+- 显示联系人和设备（"Me"）电话号码 。
 - 选中联系人时，进入可编辑态”Edit“，可以更新该联系人详细信息，包括电话号码，住址。
@@ -788,8 +788,8 @@ ViewModel需要包括：
 - AddressBook（class）
-  - me (本机）: 存储一个Person类。
+  - me (设备）: 存储一个Person类。
-  - contacts（本机联系人）：存储一个Person类数组。
+  - contacts（设备联系人）：存储一个Person类数组。
 AddressBook类声明如下：
@@ -936,11 +936,11 @@ export class ObservedArray<T> extends Array<T> {
   @Component
   struct PageEntry {
     @Provide addrBook: AddressBook = new AddressBook(
-       new Person("Gigi", "Itamerenkatu 9", 180, "Helsinki", ["+358441234567", "+35891234567", "+49621234567889"]),
+       new Person("Gigi", "Itamerenkatu 9", 180, "Helsinki", ["18*********", "18*********", "18*********"]),
       [
-         new Person("Oly", "Itamerenkatu 9", 180, "Helsinki", ["+358449876543", "+3589456789"]),
+         new Person("Oly", "Itamerenkatu 9", 180, "Helsinki", ["18*********", "18*********"]),
-         new Person("Sam", "Itamerenkatu 9", 180, "Helsinki", ["+358509876543", "+358910101010"]),
+         new Person("Sam", "Itamerenkatu 9", 180, "Helsinki", ["18*********", "18*********"]),
-         new Person("Vivi", "Itamerenkatu 9", 180, "Helsinki", ["+358400908070", "+35894445555"]),
+         new Person("Vivi", "Itamerenkatu 9", 180, "Helsinki", ["18*********", "18*********"]),
       ]);
     build() {
@@ -1099,236 +1099,236 @@ export class ObservedArray<T> extends Array<T> {
     完整应用代码如下：
-     ```ts
+```ts
-     // ViewModel classes
-     let nextId = 0;
+ // ViewModel classes
+ let nextId = 0;
-     @Observed
-     export class ObservedArray<T> extends Array<T> {
+ @Observed
-       constructor(args?: any[]) {
+ export class ObservedArray<T> extends Array<T> {
-         console.log(`ObservedArray: ${JSON.stringify(args)} `)
+   constructor(args?: any[]) {
-         if (Array.isArray(args)) {
+     console.log(`ObservedArray: ${JSON.stringify(args)} `)
-           super(...args);
+     if (Array.isArray(args)) {
-         } else {
+       super(...args);
-           super(args)
+     } else {
-         }
+       super(args)
-       }
-     }
-     @Observed
-     export class Address {
-       street: string;
-       zip: number;
-       city: string;
-       constructor(street: string,
-                   zip: number,
-                   city: string) {
-         this.street = street;
-         this.zip = zip;
-         this.city = city;
-       }
-     }
-     @Observed
-     export class Person {
-       id_: string;
-       name: string;
-       address: Address;
-       phones: ObservedArray<string>;
-       constructor(name: string,
-                   street: string,
-                   zip: number,
-                   city: string,
-                   phones: string[]) {
-         this.id_ = `${nextId}`;
-         nextId++;
-         this.name = name;
-         this.address = new Address(street, zip, city);
-         this.phones = new ObservedArray<string>(phones);
-       }
     }
+   }
+ }
-     export class AddressBook {
-       me: Person;
+ @Observed
-       contacts: ObservedArray<Person>;
+ export class Address {
+   street: string;
-       constructor(me: Person, contacts: Person[]) {
+   zip: number;
-         this.me = me;
+   city: string;
-         this.contacts = new ObservedArray<Person>(contacts);
+   constructor(street: string,
+               zip: number,
+               city: string) {
+     this.street = street;
+     this.zip = zip;
+     this.city = city;
+   }
+ }
+ @Observed
+ export class Person {
+   id_: string;
+   name: string;
+   address: Address;
+   phones: ObservedArray<string>;
+   constructor(name: string,
+               street: string,
+               zip: number,
+               city: string,
+               phones: string[]) {
+     this.id_ = `${nextId}`;
+     nextId++;
+     this.name = name;
+     this.address = new Address(street, zip, city);
+     this.phones = new ObservedArray<string>(phones);
+   }
+ }
+ export class AddressBook {
+   me: Person;
+   contacts: ObservedArray<Person>;
+   constructor(me: Person, contacts: Person[]) {
+     this.me = me;
+     this.contacts = new ObservedArray<Person>(contacts);
+   }
+ }
+ //渲染出Person对象的名称和Observed数组<string>中的第一个号码
+ //为了更新电话号码，这里需要@ObjectLink person和@ObjectLink phones，
+ //不能使用this.person.phones，内部数组的更改不会被观察到。
+ // 在AddressBookView、PersonEditView中的onClick更新selectedPerson
+ @Component
+ struct PersonView {
+   @ObjectLink person: Person;
+   @ObjectLink phones: ObservedArray<string>;
+   @Link selectedPerson: Person;
+   build() {
+     Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween }) {
+       Text(this.person.name)
+       if (this.phones.length) {
+         Text(this.phones[0])
       }
     }
+     .height(55)
-     //渲染出Person对象的名称和手机Observed数组<string>中的第一个号码
+     .backgroundColor(this.selectedPerson.name == this.person.name ? "#ffa0a0" : "#ffffff")
-     //为了更新电话号码，这里需要@ObjectLink person和@ObjectLink phones，
+     .onClick(() => {
-     //不能使用this.person.phones，内部数组的更改不会被观察到。
+       this.selectedPerson = this.person;
-     // 在AddressBookView、PersonEditView中的onClick更新selectedPerson
+     })
-     @Component
+   }
-     struct PersonView {
+ }
-       @ObjectLink person: Person;
-       @ObjectLink phones: ObservedArray<string>;
+ // 渲染Person的详细信息
-       @Link selectedPerson: Person;
+ // @Prop装饰的变量从父组件AddressBookView深拷贝数据，将变化保留在本地, TextInput的变化只会在本地副本上进行修改。
+ // 点击 "Save Changes" 会将所有数据的复制通过@Prop到@Link, 同步到其他组件
-       build() {
+ @Component
-         Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween }) {
+ struct PersonEditView {
-           Text(this.person.name)
+   @Consume addrBook: AddressBook;
-           if (this.phones.length) {
-             Text(this.phones[0])
+   /* 指向父组件selectedPerson的引用 */
-           }
+   @Link selectedPerson: Person;
-         }
-         .height(55)
+   /*在本地副本上编辑，直到点击保存*/
-         .backgroundColor(this.selectedPerson.name == this.person.name ? "#ffa0a0" : "#ffffff")
+   @Prop name: string;
-         .onClick(() => {
+   @Prop address: Address;
-           this.selectedPerson = this.person;
+   @Prop phones: ObservedArray<string>;
+   selectedPersonIndex(): number {
+     return this.addrBook.contacts.findIndex((person) => person.id_ == this.selectedPerson.id_);
+   }
+   build() {
+     Column() {
+       TextInput({ text: this.name })
+         .onChange((value) => {
+           this.name = value;
         })
-       }
+       TextInput({ text: this.address.street })
-     }
+         .onChange((value) => {
+           this.address.street = value;
-     // 渲染Person的详细信息
+         })
-     // @Prop装饰的变量从父组件AddressBookView深拷贝数据，将变化保留在本地, TextInput的变化只会在本地副本上进行修改。
-     // 点击 "Save Changes" 会将所有数据的复制通过@Prop到@Link, 同步到其他组件
+       TextInput({ text: this.address.city })
-     @Component
+         .onChange((value) => {
-     struct PersonEditView {
+           this.address.city = value;
-       @Consume addrBook: AddressBook;
+         })
-       /* 指向父组件selectedPerson的引用 */
+       TextInput({ text: this.address.zip.toString() })
-       @Link selectedPerson: Person;
+         .onChange((value) => {
+           const result = parseInt(value);
-       /*在本地副本上编辑，直到点击保存*/
+           this.address.zip = isNaN(result) ? 0 : result;
-       @Prop name: string;
+         })
-       @Prop address: Address;
-       @Prop phones: ObservedArray<string>;
+       if (this.phones.length > 0) {
+         ForEach(this.phones,
-       selectedPersonIndex(): number {
+           (phone, index) => {
-         return this.addrBook.contacts.findIndex((person) => person.id_ == this.selectedPerson.id_);
+             TextInput({ text: phone })
-       }
+               .width(150)
+               .onChange((value) => {
-       build() {
+                 console.log(`${index}. ${value} value has changed`)
-         Column() {
+                 this.phones[index] = value;
-           TextInput({ text: this.name })
-             .onChange((value) => {
-               this.name = value;
-             })
-           TextInput({ text: this.address.street })
-             .onChange((value) => {
-               this.address.street = value;
-             })
-           TextInput({ text: this.address.city })
-             .onChange((value) => {
-               this.address.city = value;
-             })
-           TextInput({ text: this.address.zip.toString() })
-             .onChange((value) => {
-               const result = parseInt(value);
-               this.address.zip = isNaN(result) ? 0 : result;
-             })
-           if (this.phones.length > 0) {
-             ForEach(this.phones,
-               (phone, index) => {
-                 TextInput({ text: phone })
-                   .width(150)
-                   .onChange((value) => {
-                     console.log(`${index}. ${value} value has changed`)
-                     this.phones[index] = value;
-                   })
-               },
-               (phone, index) => `${index}-${phone}`
-             )
-           }
-           Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween }) {
-             Text("Save Changes")
-               .onClick(() => {
-                 // 将本地副本更新的值赋值给指向父组件selectedPerson的引用
-                 // 避免创建新对象，在现有属性上进行修改
-                 this.selectedPerson.name = this.name;
-                 this.selectedPerson.address.street = this.address.street
-                 this.selectedPerson.address.city = this.address.city
-                 this.selectedPerson.address.zip = this.address.zip
-                 this.phones.forEach((phone: string, index: number) => {
-                   this.selectedPerson.phones[index] = phone
-                 });
               })
-             if (this.selectedPersonIndex() != -1) {
+           },
-               Text("Delete Contact")
+           (phone, index) => `${index}-${phone}`
-                 .onClick(() => {
+         )
-                   let index = this.selectedPersonIndex();
-                   console.log(`delete contact at index ${index}`);
-                   // 删除当前联系人
-                   this.addrBook.contacts.splice(index, 1);
-                   // 删除当前selectedPerson，选中态前移一位
-                   index = (index < this.addrBook.contacts.length) ? index : index - 1;
-                   // 如果contract被删除完，则设置me为选中态
-                   this.selectedPerson = (index >= 0) ? this.addrBook.contacts[index] : this.addrBook.me;
-                 })
-             }
-           }
-         }
       }
-     }
+       Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween }) {
-     @Component
+         Text("Save Changes")
-     struct AddressBookView {
+           .onClick(() => {
-       @ObjectLink me: Person;
+             // 将本地副本更新的值赋值给指向父组件selectedPerson的引用
-       @ObjectLink contacts: ObservedArray<Person>;
+             // 避免创建新对象，在现有属性上进行修改
-       @State selectedPerson: Person = undefined;
+             this.selectedPerson.name = this.name;
+             this.selectedPerson.address.street = this.address.street
-       aboutToAppear() {
+             this.selectedPerson.address.city = this.address.city
-         this.selectedPerson = this.me;
+             this.selectedPerson.address.zip = this.address.zip
-       }
+             this.phones.forEach((phone: string, index: number) => {
+               this.selectedPerson.phones[index] = phone
-       build() {
+             });
-         Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Start }) {
-           Text("Me:")
-           PersonView({ person: this.me, phones: this.me.phones, selectedPerson: this.$selectedPerson })
-           Divider().height(8)
-           ForEach(this.contacts,
-             contact => {
-               PersonView({ person: contact, phones: contact.phones, selectedPerson: this.$selectedPerson })
-             },
-             contact => contact.id_
-           )
-           Divider().height(8)
-           Text("Edit:")
-           PersonEditView({
-             selectedPerson: this.$selectedPerson,
-             name: this.selectedPerson.name,
-             address: this.selectedPerson.address,
-             phones: this.selectedPerson.phones
           })
+         if (this.selectedPersonIndex() != -1) {
+           Text("Delete Contact")
+             .onClick(() => {
+               let index = this.selectedPersonIndex();
+               console.log(`delete contact at index ${index}`);
+               // 删除当前联系人
+               this.addrBook.contacts.splice(index, 1);
+               // 删除当前selectedPerson，选中态前移一位
+               index = (index < this.addrBook.contacts.length) ? index : index - 1;
+               // 如果contract被删除完，则设置me为选中态
+               this.selectedPerson = (index >= 0) ? this.addrBook.contacts[index] : this.addrBook.me;
+             })
         }
-         .borderStyle(BorderStyle.Solid).borderWidth(5).borderColor(0xAFEEEE).borderRadius(5)
       }
     }
+   }
-     @Entry
+ }
-     @Component
-     struct PageEntry {
+ @Component
-       @Provide addrBook: AddressBook = new AddressBook(
+ struct AddressBookView {
-         new Person("Gigi", "Itamerenkatu 9", 180, "Helsinki", ["+358441234567", "+35891234567", "+49621234567889"]),
+   @ObjectLink me: Person;
-         [
+   @ObjectLink contacts: ObservedArray<Person>;
-           new Person("Oly", "Itamerenkatu 9", 180, "Helsinki", ["+358449876543", "+3589456789"]),
+   @State selectedPerson: Person = undefined;
-           new Person("Sam", "Itamerenkatu 9", 180, "Helsinki", ["+358509876543", "+358910101010"]),
-           new Person("Vivi", "Itamerenkatu 9", 180, "Helsinki", ["+358400908070", "+35894445555"]),
+   aboutToAppear() {
-         ]);
+     this.selectedPerson = this.me;
+   }
-       build() {
-         Column() {
+   build() {
-           AddressBookView({ me: this.addrBook.me, contacts: this.addrBook.contacts, selectedPerson: this.addrBook.me })
+     Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Start }) {
-         }
+       Text("Me:")
-       }
+       PersonView({ person: this.me, phones: this.me.phones, selectedPerson: this.$selectedPerson })
+       Divider().height(8)
+       ForEach(this.contacts,
+         contact => {
+           PersonView({ person: contact, phones: contact.phones, selectedPerson: this.$selectedPerson })
+         },
+         contact => contact.id_
+       )
+       Divider().height(8)
+       Text("Edit:")
+       PersonEditView({
+         selectedPerson: this.$selectedPerson,
+         name: this.selectedPerson.name,
+         address: this.selectedPerson.address,
+         phones: this.selectedPerson.phones
+       })
     }
-     ```
+     .borderStyle(BorderStyle.Solid).borderWidth(5).borderColor(0xAFEEEE).borderRadius(5)
\ No newline at end of file
+   }
+ }
+ @Entry
+ @Component
+ struct PageEntry {
+   @Provide addrBook: AddressBook = new AddressBook(
+     new Person("Gigi", "Itamerenkatu 9", 180, "Helsinki", ["18*********", "18*********", "18*********"]),
+     [
+       new Person("Oly", "Itamerenkatu 9", 180, "Helsinki", ["18*********", "18*********"]),
+       new Person("Sam", "Itamerenkatu 9", 180, "Helsinki", ["18*********", "18*********"]),
+       new Person("Vivi", "Itamerenkatu 9", 180, "Helsinki", ["18*********", "18*********"]),
+     ]);
+   build() {
+     Column() {
+       AddressBookView({ me: this.addrBook.me, contacts: this.addrBook.contacts, selectedPerson: this.addrBook.me })
+     }
+   }
+ }
+```
\ No newline at end of file
--- a/zh-cn/application-dev/quick-start/typescript-to-arkts-migration-guide.md
+++ b/zh-cn/application-dev/quick-start/typescript-to-arkts-migration-guide.md
@@ -651,7 +651,7 @@ interface Identity {
 interface Contact {
    email: string
-    phone: string
+    phoneNumber: string
 }
 type Employee = Identity & Contact
@@ -667,7 +667,7 @@ interface Identity {
 interface Contact {
    email: string
-    phone: string
+    phoneNumber: string
 }
 interface Employee extends Identity,  Contact {}
@@ -3174,8 +3174,8 @@ class Person {
 const person: Person = {
    name: "John",
    age: 30,
-    email: "john@example.com",
+    email: "***@example.com",
-    phone: 1234567890,
+    phoneNumber: 18*********,
 }
 ```
@@ -3186,18 +3186,18 @@ class Person {
    name: string
    age: number
    email: string
-    phone: number
+    phoneNumber: number
-    constructor(name: string, age: number, email: string, phone: number) {
+    constructor(name: string, age: number, email: string, phoneNumber: number) {
        this.name = name
        this.age = age
        this.email = email
-        this.phone = phone
+        this.phoneNumber = phoneNumber
    }
 }
 function main(): void {
-    const person: Person = new Person("John", 30, "john@example.com", 1234567890)
+    const person: Person = new Person("John", 30, "***@example.com", 18*********)
 }
 ```

--- a/zh-cn/application-dev/reference/apis/Readme-CN.md
+++ b/zh-cn/application-dev/reference/apis/Readme-CN.md
@@ -198,22 +198,23 @@
 - UI界面
  - [@ohos.animator (动画)](js-apis-animator.md)
  - [@ohos.arkui.componentSnapshot (组件截图)](js-apis-arkui-componentSnapshot.md)
+  - [@ohos.arkui.componentUtils (componentUtils)](js-apis-arkui-componentUtils.md)
  - [@ohos.arkui.dragController (DragController)](js-apis-arkui-dragController.md)
  - [@ohos.arkui.drawableDescriptor (DrawableDescriptor)](js-apis-arkui-drawableDescriptor.md)
  - [@ohos.arkui.inspector (布局回调)](js-apis-arkui-inspector.md)
+  - [ @ohos.arkui.performanceMonitor (性能监测)](js-apis-arkui-performancemonitor.md)
  - [@ohos.arkui.UIContext (UIContext)](js-apis-arkui-UIContext.md)
  - [@ohos.arkui.componentUtils (componentUtils)](js-apis-arkui-componentUtils.md)
  - [@ohos.curves (插值计算)](js-apis-curve.md)
  - [@ohos.font (注册自定义字体)](js-apis-font.md)
  - [@ohos.matrix4 (矩阵变换)](js-apis-matrix4.md)
+  - [@ohos.measure (文本计算)](js-apis-measure.md)
  - [@ohos.mediaquery (媒体查询)](js-apis-mediaquery.md)
  - [@ohos.pluginComponent (PluginComponentManager)](js-apis-plugincomponent.md)
  - [@ohos.promptAction (弹窗)](js-apis-promptAction.md)
  - [@ohos.router (页面路由)](js-apis-router.md)
-  - [@ohos.measure (文本计算)](js-apis-measure.md)
  - [@ohos.uiAppearance (用户界面外观)](js-apis-uiappearance.md)
-  - [ @ohos.arkui.performanceMonitor (性能监测)](js-apis-arkui-performancemonitor.md)
 - 图形图像
  - [@ohos.animation.windowAnimationManager (窗口动画管理)](js-apis-windowAnimationManager.md)
  - [@ohos.application.WindowExtensionAbility (窗口扩展能力)](js-apis-application-windowExtensionAbility.md)

--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md
@@ -52,7 +52,7 @@ Image组件加载图片失败或图片尺寸为0时，图片组件大小自动
 | syncLoad<sup>8+</sup>            | boolean                                                 | 设置是否同步加载图片，默认是异步加载。同步加载时阻塞UI线程，不会显示占位图。<br/>默认值：false<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br>**说明：**<br>建议加载尺寸较小的本地图片时将syncLoad设为true，因为耗时较短，在主线程上执行即可。 |
 | copyOption<sup>9+</sup>          | [CopyOptions](ts-appendix-enums.md#copyoptions9)        | 设置图片是否可复制。<br>当copyOption设置为非CopyOptions.None时，支持使用长按、鼠标右击、快捷组合键'CTRL+C'等方式进行复制。<br>默认值：CopyOptions.None<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br>**说明：**<br>svg图片不支持复制。 |
 | colorFilter<sup>9+</sup>         | [ColorFilter](ts-types.md#colorfilter9)                 | 给图像设置颜色滤镜效果，入参为一个的4x5的RGBA转换矩阵。<br/>矩阵第一行表示R（红色）的向量值，第二行表示G（绿色）的向量值，第三行表示B（蓝色）的向量值，第四行表示A（透明度）的向量值，4行分别代表不同的RGBA的向量值。<br>RGBA值分别是0和1之间的浮点数字，当矩阵对角线值为1时，保持图片原有色彩。<br> **计算规则：**<br>如果输入的滤镜矩阵为：<br>![image-matrix-1](figures/image-matrix-1.jpg)<br>像素点为[R, G, B, A]<br>则过滤后的颜色为 [R’, G’, B’, A’]<br>![image-matrix-2](figures/image-matrix-2.jpg)<br>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
-| draggable<sup>(deprecated)</sup> | boolean                                                 | 设置组件默认拖拽效果，设置为true时，组件可拖拽。<br>不能和[onDragStart](ts-universal-events-drag-drop.md)事件同时使用。<br/>默认值：false<br>**说明：**<br />从 API version 9 开始支持，从 API version 10 开始废弃，建议使用通用属性[draggable](ts-universal-events-drag-drop.md)替代。 |
+| draggable<sup>(deprecated)</sup> | boolean                                                 | 设置组件默认拖拽效果，设置为true时，组件可拖拽。<br>不能和[onDragStart](ts-universal-events-drag-drop.md)事件同时使用。<br/>默认值：false<br>**说明：**<br />从 API version 9 开始支持，从 API version 10 开始废弃，建议使用通用属性[draggable](ts-universal-attributes-drag-drop.md)替代。 |
 >  **说明：**
 >

--- a/zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md
@@ -97,9 +97,10 @@ List垂直布局，ListItem向右滑动，item左边的长距离滑动删除选
 | -------- | -------- |
 | onSelect(event:&nbsp;(isSelected:&nbsp;boolean)&nbsp;=&gt;&nbsp;void)<sup>8+</sup> | ListItem元素被鼠标框选的状态改变时触发回调。<br/>isSelected：进入鼠标框选范围即被选中返回true，&nbsp;移出鼠标框选范围即未被选中返回false。 |
 ## 示例
+### 示例1 
 ```ts
 // xxx.ets
 @Entry
@@ -126,6 +127,8 @@ struct ListItemExample {
 ![zh-cn_image_0000001219864159](figures/zh-cn_image_0000001219864159.gif)
+### 示例2
 ```ts
 // xxx.ets
@@ -192,7 +195,8 @@ struct ListItemExample2 {
 ```
 ![deleteListItem](figures/deleteListItem.gif)
-## 示例3
+### 示例3
 ```ts
 // xxx.ets
 @Entry

--- a/zh-cn/application-dev/website.md
+++ b/zh-cn/application-dev/website.md
@@ -963,21 +963,21 @@
    - UI界面
      - [@ohos.animator (动画)](reference/apis/js-apis-animator.md)
      - [@ohos.arkui.componentSnapshot (组件截图)](reference/apis/js-apis-arkui-componentSnapshot.md)
+      - [@ohos.arkui.componentUtils (componentUtils)](reference/apis/js-apis-arkui-componentUtils.md)
      - [@ohos.arkui.dragController (DragController)](reference/apis/js-apis-arkui-dragController.md)
      - [@ohos.arkui.drawableDescriptor (DrawableDescriptor)](reference/apis/js-apis-arkui-drawableDescriptor.md)
      - [@ohos.arkui.inspector (布局回调)](reference/apis/js-apis-arkui-inspector.md)
+      - [ @ohos.arkui.performanceMonitor (性能监测)](reference/apis/js-apis-arkui-performancemonitor.md)
      - [@ohos.arkui.UIContext (UIContext)](reference/apis/js-apis-arkui-UIContext.md)
-      - [@ohos.arkui.componentUtils (componentUtils)](reference/apis/js-apis-arkui-componentUtils.md)
      - [@ohos.curves (插值计算)](reference/apis/js-apis-curve.md)
      - [@ohos.font (注册自定义字体)](reference/apis/js-apis-font.md)
      - [@ohos.matrix4 (矩阵变换)](reference/apis/js-apis-matrix4.md)
+      - [@ohos.measure (文本计算)](reference/apis/js-apis-measure.md)
      - [@ohos.mediaquery (媒体查询)](reference/apis/js-apis-mediaquery.md)
      - [@ohos.pluginComponent (PluginComponentManager)](reference/apis/js-apis-plugincomponent.md)
      - [@ohos.promptAction (弹窗)](reference/apis/js-apis-promptAction.md)
      - [@ohos.router (页面路由)](reference/apis/js-apis-router.md)
-      - [@ohos.measure (文本计算)](reference/apis/js-apis-measure.md)
      - [@ohos.uiAppearance (用户界面外观)](reference/apis/js-apis-uiappearance.md)
-      - [ @ohos.arkui.performanceMonitor (性能监测)](reference/apis/js-apis-arkui-performancemonitor.md)
    - 图形图像
      - [@ohos.animation.windowAnimationManager (窗口动画管理)](reference/apis/js-apis-windowAnimationManager.md)
      - [@ohos.application.WindowExtensionAbility (窗口扩展能力)](reference/apis/js-apis-application-windowExtensionAbility.md)
@@ -1420,6 +1420,7 @@
      - [Swiper](reference/arkui-ts/ts-container-swiper.md)
      - [Tabs](reference/arkui-ts/ts-container-tabs.md)
      - [TabContent](reference/arkui-ts/ts-container-tabcontent.md)
+      - [UIExtensionComponent](reference/arkui-ts/ts-container-ui-extension-component.md)
      - [WaterFlow](reference/arkui-ts/ts-container-waterflow.md)
    - 媒体组件
      - [Video](reference/arkui-ts/ts-media-components-video.md)