diff --git a/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/ApiRect.ets b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/ApiRect.ets
new file mode 100644
index 0000000000000000000000000000000000000000..79dd5692e63e647f4e78e295ad484033637c5d23
--- /dev/null
+++ b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/ApiRect.ets
@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@Entry
+@Component
+struct ApiRect {
+
+  build() {
+    Column({ space: 10 }) {
+      Text('normal').fontSize(11).fontColor(0xCCCCCC).width('90%')
+      .onClick(()=>{
+        let storage: LocalStorage = LocalStorage.getShared();
+        console.log(storage.keys().toString());
+      })
+      // 绘制90% * 50的矩形
+      Column({ space: 5 }) {
+        Text('normal').fontSize(9).fontColor(0xCCCCCC).width('90%')
+        // 绘制90% * 50矩形
+        Rect({ width: '90%', height: 50 })
+          .fill(Color.Pink)
+        // 绘制90% * 50的矩形框
+        Rect()
+          .width('90%')
+          .height(50)
+          .fillOpacity(0)
+          .stroke(Color.Red)
+          .strokeWidth(3)
+
+
+        Text('with rounded corners').fontSize(11).fontColor(0xCCCCCC).width('90%')
+        // 绘制90% * 80的矩形, 圆角宽高分别为40、20
+        Rect({ width: '90%', height: 80 })
+          .radiusHeight(20)
+          .radiusWidth(40)
+          .fill(Color.Pink)
+        // 绘制90% * 80的矩形, 圆角宽高为20
+        Rect({ width: '90%', height: 80 })
+          .radius(20)
+          .fill(Color.Pink)
+          .stroke(Color.Transparent)
+      }.width('100%').margin({ top: 10 })
+      // 绘制90% * 50矩形, 左上圆角宽高40,右上圆角宽高20,右下圆角宽高40,左下圆角宽高20
+      Rect({ width: '90%', height: 80 })
+        .radius([[40, 40], [20, 20], [40, 40], [20, 20]])
+        .fill(Color.Pink)
+    }.width('100%').margin({ top: 5 })
+  }
+}
\ No newline at end of file
diff --git a/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/BlurStyle.ets b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/BlurStyle.ets
new file mode 100644
index 0000000000000000000000000000000000000000..a5ffed021de114836df61cddb6abc10436e4e259
--- /dev/null
+++ b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/BlurStyle.ets
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@Entry
+@Component
+struct BlurStyle1 {
+
+  build() {
+    Column() {
+      Text("BlurStyle.BACKGROUND_THIN").margin(5).id("BACKGROUND_THIN")
+        .backgroundBlurStyle(BlurStyle.BACKGROUND_THIN, { colorMode: ThemeColorMode.SYSTEM, adaptiveColor: AdaptiveColor.DEFAULT })
+      Text("BlurStyle.BACKGROUND_REGULAR").margin(5).id("BACKGROUND_REGULAR")
+        .backgroundBlurStyle(BlurStyle.BACKGROUND_REGULAR, { adaptiveColor: AdaptiveColor.AVERAGE })
+      Text("BlurStyle.BACKGROUND_THICK").margin(5).id("BACKGROUND_THICK")
+        .backgroundBlurStyle(BlurStyle.BACKGROUND_THICK)
+      Text("BlurStyle.BACKGROUND_ULTRA_THICK").margin(5).id("BACKGROUND_ULTRA_THICK")
+        .backgroundBlurStyle(BlurStyle.BACKGROUND_ULTRA_THICK)
+    }.width('90%').height("90%")
+  }
+}
\ No newline at end of file
diff --git a/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/CanvasRenderer.ets b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/CanvasRenderer.ets
new file mode 100644
index 0000000000000000000000000000000000000000..d58373a2e31915139557944c282af9b6e8c5da3e
--- /dev/null
+++ b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/CanvasRenderer.ets
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@Entry
+@Component
+struct CanvasRenderer1 {
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
+
+  build() {
+    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+      Canvas(this.context)
+//        .imageSmooththingQuality(ImageSmooththingQuality.high)
+        .width('100%')
+        .height('100%')
+        .backgroundColor('#ffff00')
+        .onReady(() =>{
+          this.offCanvas
+          var offContext = this.offCanvas.getContext("2d", this.settings)
+          offContext.fillStyle = 0x0000FF
+          offContext.fillRect(20, 20, 150, 100)
+          var image = this.offCanvas.transferToImageBitmap()
+          this.context.transferFromImageBitmap(image)
+        })
+    }
+    .width('100%')
+    .height('100%')
+  }
+}
\ No newline at end of file
diff --git a/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/ClickMouseTouchEvent.ets b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/ClickMouseTouchEvent.ets
new file mode 100644
index 0000000000000000000000000000000000000000..4d9dab8d70be245cf098a51bb24a16c0543f479e
--- /dev/null
+++ b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/ClickMouseTouchEvent.ets
@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@Entry
+@Component
+struct ClickExample {
+  @State displayX: string = 'displayX'
+  @State displayY: string = 'displayY'
+  @State windowX: string = 'windowX'
+  @State windowY: string = 'windowY'
+  @State intentionCode: string = 'intentionCode'
+
+  build() {
+    Column() {
+      Text(this.displayX).id("displayX")
+      Text(this.displayY).id("displayY")
+      Text(this.windowX).id("windowX")
+      Text(this.windowY).id("windowY")
+
+      Text(this.intentionCode).id("intentionCode")
+      Row({ space: 20 }) {
+        Button('Click').width(100).height(40).id("Button_click")
+          .onClick((event: ClickEvent) => {
+            this.displayX = "onClick: " + event.displayX
+            this.displayY = "onClick: " + event.displayY
+            this.windowX = "onClick: " + event.windowX
+            this.windowY = "onClick: " + event.windowY
+          })
+          .onTouch((event: TouchEvent) => {
+            this.displayX = "onTouch: " + event.getHistoricalPoints()[0].touchObject.displayX
+            this.displayY = "onTouch: " + event.getHistoricalPoints()[0].touchObject.displayY
+            this.windowX = "onTouch: " + event.getHistoricalPoints()[0].touchObject.windowX
+            this.windowY = "onTouch: " + event.getHistoricalPoints()[0].touchObject.windowY
+          })
+          .onKeyEvent((event: KeyEvent) => {
+            this.intentionCode = "KeyEvent: " + event.intentionCode
+          })
+
+        Button('Mouse').width(100).height(40).id("Mouse_click")
+          .onClick((event: MouseEvent) => {
+            this.displayX = "MouseEvent: " + event.displayX
+            this.displayY = "MouseEvent: " + event.displayY
+            this.windowX = "MouseEvent: " + event.windowX
+            this.windowY = "MouseEvent: " + event.windowY
+          })
+      }.margin(20)
+    }.width('100%')
+  }
+}
\ No newline at end of file
diff --git a/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/CustomDialogControllerOptions.ets b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/CustomDialogControllerOptions.ets
new file mode 100644
index 0000000000000000000000000000000000000000..1a7e308e060373400fd93ae2d2de4f907d57342d
--- /dev/null
+++ b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/CustomDialogControllerOptions.ets
@@ -0,0 +1,128 @@
+/**
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
+@CustomDialog
+struct CustomDialogExample {
+  @Link textValue: string
+  @Link inputValue: string
+  @Link openAnimation: AnimateParam
+  @Link closeAnimation: AnimateParam
+  @State widthSize: number = 250
+  @State heightSize: number = 100
+  private flag: boolean = true
+  controller: CustomDialogController
+  // 若尝试在CustomDialog中传入多个其他的Controller，以实现在CustomDialog中打开另一个或另一些CustomDialog，那么此处需要将指向自己的controller放在最后
+  cancel: () => void
+  confirm: () => void
+
+  build() {
+    Column() {
+      Button('change size')
+        .width(this.widthSize)
+        .height(this.heightSize)
+        .margin(30)
+        .onClick(() => {
+          if (this.flag) {
+            this.widthSize = 150
+            this.heightSize = 60
+            this.flag = false
+            } else {
+            this.widthSize = 250
+            this.heightSize = 100
+            }
+          })
+
+      Flex({ justifyContent: FlexAlign.SpaceAround }) {
+        Button('cancel')
+          .onClick(() => {
+            this.controller.close()
+            this.cancel()
+          }).backgroundColor(0xffffff).fontColor(Color.Black)
+        Button('confirm')
+          .onClick(() => {
+            this.inputValue = this.textValue
+            this.controller.close()
+            this.confirm()
+          }).backgroundColor(0xffffff).fontColor(Color.Red)
+      }.margin({ bottom: 10 })
+    }
+    // dialog默认的borderRadius为24vp，如果需要使用border属性，请和borderRadius属性一起使用。
+  }
+}
+
+@Entry
+@Component
+struct CustomDialogUser {
+  @State textValue: string = ''
+  @State inputValue: string = 'click me'
+  dialogController: CustomDialogController = new CustomDialogController({
+    builder: CustomDialogExample({
+      cancel: this.onCancel,
+      confirm: this.onAccept,
+      textValue: $textValue,
+      inputValue: $inputValue,
+      openAnimation:{
+        duration: 2000,
+        iterations: 3,
+        onFinish: () => {
+          console.info('openAnimation play end')
+        },
+      },
+      closeAnimation:{
+        duration: 2000,
+        iterations: 3,
+        onFinish: () => {
+          console.info('closeAnimation play end')
+        },
+      }
+    }),
+    cancel: this.existApp,
+    autoCancel: true,
+    alignment: DialogAlignment.Default,
+    offset: { dx: 0, dy: -20 },
+    gridCount: 4,
+    customStyle: false
+  })
+
+  // 在自定义组件即将析构销毁时将dialogControlle删除和置空
+  aboutToDisappear() {
+    delete this.dialogController, // 删除dialogController
+    this.dialogController = undefined // 将dialogController置空
+  }
+
+  onCancel() {
+    console.info('Callback when the first button is clicked')
+  }
+
+  onAccept() {
+    console.info('Callback when the second button is clicked')
+  }
+
+  existApp() {
+    console.info('Click the callback in the blank area')
+  }
+
+  build() {
+    Column() {
+      Button(this.inputValue)
+        .onClick(() => {
+          if (this.dialogController != undefined) {
+            this.dialogController.open()
+          }
+        }).backgroundColor(0x317aff)
+    }.width('100%').margin({ top: 5 })
+  }
+}
\ No newline at end of file
diff --git a/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/DatePickerDialogOptions.ets b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/DatePickerDialogOptions.ets
new file mode 100644
index 0000000000000000000000000000000000000000..d7eb99cd7f104a4c9a3cad96d34631db71349a73
--- /dev/null
+++ b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/DatePickerDialogOptions.ets
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@Entry
+@Component
+struct DatePickerDialogOptions0 {
+
+  build() {
+    Column() {
+      Button("DatePickerDialog")
+        .margin(20)
+        .onClick(() => {
+          DatePickerDialog.show({
+            start: new Date("2000-1-1"),
+            end: new Date("2100-12-31"),
+            selected: new Date("2023-7-24"),
+            lunarSwitch: true
+          }).id("DatePickerDialogOptions0")
+        })
+    }.width('100%')
+  }
+}
\ No newline at end of file
diff --git a/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/DragEvent.ets b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/DragEvent.ets
new file mode 100644
index 0000000000000000000000000000000000000000..998a0d9efacf0daae37929708ee1fc623b6b6991
--- /dev/null
+++ b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/DragEvent.ets
@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
+import promptAction from '@ohos.promptAction';
+@Entry
+@Component
+struct DragEvent {
+  @State targetImage: string = '';
+  @State targetText: string = 'Drag Text';
+  @State hyperLinkText: string = 'HyperLink';
+  @State hyperLinkContent: string = 'HyperLink';
+  @State imageWidth: number = 100;
+  @State imageHeight: number = 100;
+  @State abstractContent: string = "abstract";
+  @State textContent: string = "";
+  @State dragBehavior: string = "dragBehavior";
+  @State dragRet: string = "dragRet";
+  @State useCustomDropAnimation1: string = "useCustomDropAnimation";
+  @State imgState: Visibility = Visibility.Visible;
+
+
+  build() {
+    Row() {
+      Column() {
+        Text(this.dragBehavior).id("dragBehavior").margin(5)
+        Text(this.dragRet).id("dragRet").margin(5)
+        Text(this.useCustomDropAnimation1).id("useCustomDropAnimation").margin(5)
+        Image($r('app.media.icon')).margin(5)
+          .width(100)
+          .height(100)
+          .draggable(true)
+          .margin({left: 15})
+          .visibility(this.imgState)
+          .onDragStart((event)=>{
+            event.setResult(DragRet.DRAG_SUCCESS);
+          })
+          .onDragEnd((event)=>{
+            event.dragBehavior = DragBehavior.MOVE
+            this.dragBehavior = event.dragBehavior.toString()
+            event.useCustomDropAnimation === true
+            if(event.useCustomDropAnimation === true){
+              this.useCustomDropAnimation1 = "true"
+              promptAction.showToast({duration: 100, message: 'useCustomDropAnimation==true'});
+            }
+            if (event.getResult() === DragRet.DRAG_SUCCESS) {
+              promptAction.showToast({duration: 100, message: 'Drag Success'});
+            } else if (event.getResult() === DragRet.DRAG_FAILED) {
+              promptAction.showToast({duration: 100, message: 'Drag Failed'});
+            } else if (event.getResult() === DragRet.DRAG_CANCELED) {
+              promptAction.showToast({duration: 100, message: 'Drag Canceled'});
+            } else if (event.getResult() === DragRet.DROP_DISABLED) {
+              promptAction.showToast({duration: 100, message: 'Drop Disabled'});
+            }
+            this.dragRet = event.getResult().toString()
+          })
+      }.width('90%')
+      .height('100%')
+      .margin({left: '5%'})
+    }
+    .height('100%')
+  }
+}
\ No newline at end of file
diff --git a/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/EntryOptions.ets b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/EntryOptions.ets
new file mode 100644
index 0000000000000000000000000000000000000000..374eba75590bc42c1d1fe05763549a647430116b
--- /dev/null
+++ b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/EntryOptions.ets
@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
+@Component
+struct HelloComponent {
+  @State message: string = 'Hello, World!';
+
+  build() {
+    // HelloComponent自定义组件组合系统组件Row和Text
+    Row() {
+      Text(this.message)
+        .onClick(() => {
+          // 状态变量message的改变驱动UI刷新，UI从'Hello, World!'刷新为'Hello, ArkUI!'
+          this.message = 'Hello, ArkUI!';
+        })
+    }
+  }
+}
+
+
+@Entry
+@Component
+struct myPage {
+  build() {
+    Column() {
+      Text('ArkUI message')
+      HelloComponent({ message: 'Hello, World!' });
+      Divider()
+      HelloComponent({ message: '你好!' });
+    }
+  }
+}
\ No newline at end of file
diff --git a/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/MenuItemGroupOptions.ets b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/MenuItemGroupOptions.ets
new file mode 100644
index 0000000000000000000000000000000000000000..35e50c87059b2ca464ead4f8a5be9483015179c9
--- /dev/null
+++ b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/MenuItemGroupOptions.ets
@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
+@Entry
+@Component
+struct Index {
+
+  @Builder
+  SubMenu() {
+    Menu() {
+      MenuItem({ content: "复制", labelInfo: "Ctrl+C" })
+      MenuItem({ content: "粘贴", labelInfo: "Ctrl+V" })
+    }
+  }
+
+  @Builder
+  MyMenu(){
+    Menu() {
+      MenuItem({
+        content: "content1",
+        endIcon: "resource/base/media/icon.png",
+        labelInfo: "labelInfo1",
+      }).id("menuItem_options1")
+        .contentFont({ size: 10 })
+        .contentFontColor(Color.Blue)
+        .labelFont({ size: 15 })
+        .labelFontColor(Color.Red)
+
+      MenuItem({
+        content: "content2",
+        endIcon: $r("app.media.icon"),
+        labelInfo: $r("app.string.MenuItem2_labelInfo"),
+      }).id("menuItem_options2")
+
+      MenuItemGroup({
+        footer: "footer1"
+      }).id("MenuItemGroup_options1")
+
+      MenuItemGroup({
+        footer: $r("app.string.MenuItemGroup2_footer"),
+      }).id("MenuItemGroup_options2")
+
+      MenuItemGroup({
+        footer: this.SubMenu.bind(this)
+      }).id("MenuItemGroup_options3")
+    }
+  }
+
+  build() {
+    Row() {
+      Column() {
+        Button('click to show menu')
+          .id("button_menu")
+          .fontSize(30)
+          .fontWeight(FontWeight.Bold)
+      }
+      .bindMenu(this.MyMenu)
+      .width('100%')
+    }
+    .height('100%')
+  }
+}
\ No newline at end of file
diff --git a/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/ModalTransition.ets b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/ModalTransition.ets
new file mode 100644
index 0000000000000000000000000000000000000000..b12220b7cc7044ff22ca72990187b52529a15e71
--- /dev/null
+++ b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/ModalTransition.ets
@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@Entry
+@Component
+struct ModalTransitionExample {
+  @State isShow:boolean = false
+  @State isShow2:boolean = false
+
+  @Builder myBuilder2() {
+    Column() {
+      Button("close modal 2")
+        .margin(10)
+        .fontSize(20)
+        .onClick(()=>{
+          this.isShow2 = false;
+        })
+    }
+    .width('100%')
+    .height('100%')
+    .justifyContent(FlexAlign.Center)
+  }
+
+
+  @Builder myBuilder() {
+    Column() {
+      Button("transition modal 2")
+        .margin(10)
+        .fontSize(20)
+        .onClick(()=>{
+          this.isShow2 = true;
+        }).bindContentCover(this.isShow2, this.myBuilder2(), {modalTransition: ModalTransition.ALPHA, backgroundColor: Color.Gray, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})
+
+      Button("close modal 1")
+        .margin(10)
+        .fontSize(20)
+        .onClick(()=>{
+          this.isShow = false;
+        })
+    }
+    .width('100%')
+    .height('100%')
+    .justifyContent(FlexAlign.Center)
+  }
+
+  build() {
+    Column() {
+      Button("transition modal 1")
+        .onClick(() => {
+          this.isShow = true
+        })
+        .fontSize(20)
+        .margin(10)
+        .bindContentCover($$this.isShow, this.myBuilder(), {modalTransition: ModalTransition.ALPHA, backgroundColor: Color.Pink, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})
+    }
+    .justifyContent(FlexAlign.Center)
+    .backgroundColor(Color.White)
+    .width('100%')
+    .height('100%')
+  }
+}
\ No newline at end of file
diff --git a/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/PanGestureEvent.ets b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/PanGestureEvent.ets
new file mode 100644
index 0000000000000000000000000000000000000000..4375c13b56c56e671c5de6f42a1f38ec618461d5
--- /dev/null
+++ b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/PanGestureEvent.ets
@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@Entry
+@Component
+struct PanGestureEvent {
+  @State velocityX: number = 0
+  @State velocityY: number = 0
+  @State velocity: number = 0
+  private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Left | PanDirection.Right })
+
+  build() {
+    Column() {
+      Column() {
+        Text(this.velocityX.toString()).id("velocityX")
+        Text(this.velocityY.toString()).id("velocityY")
+        Text(this.velocity.toString()).id("velocity")
+      }
+      .height("90%")
+      .width("90%")
+      .padding(20)
+      .border({ width: 3 })
+      .margin(50)
+      // 左右拖动触发该手势事件
+      .gesture(
+      PanGesture(this.panOption)
+        .onActionUpdate((event: GestureEvent) => {
+          this.velocityX = event.velocityX
+          this.velocityY = event.velocityY
+          this.velocity = event.velocity
+        })
+      )
+    }
+  }
+}
\ No newline at end of file
diff --git a/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/RenderFit.ets b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/RenderFit.ets
new file mode 100644
index 0000000000000000000000000000000000000000..19780182d25b021f54719b9e130fcf53fdab53c3
--- /dev/null
+++ b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/RenderFit.ets
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@Entry
+@Component
+struct RenderFit1 {
+
+  build() {
+    Column() {
+      Text("LEFT").id("LEFT").renderFit(RenderFit.LEFT).margin(5)
+      Text("RIGHT").id("RIGHT").renderFit(RenderFit.RIGHT).margin(5)
+      Text("TOP_LEFT").id("TOP_LEFT").renderFit(RenderFit.TOP_LEFT).margin(5)
+      Text("TOP_RIGHT").id("TOP_RIGHT").renderFit(RenderFit.TOP_RIGHT).margin(5)
+      Text("BOTTOM_LEFT").id("BOTTOM_LEFT").renderFit(RenderFit.BOTTOM_LEFT).margin(5)
+      Text("BOTTOM_RIGHT").id("BOTTOM_RIGHT").renderFit(RenderFit.BOTTOM_RIGHT).margin(5)
+      Text("RESIZE_FILL").id("RESIZE_FILL").renderFit(RenderFit.RESIZE_FILL).margin(5)
+      Text("RESIZE_CONTAIN").id("RESIZE_CONTAIN").renderFit(RenderFit.RESIZE_CONTAIN).margin(5)
+      Text("RESIZE_CONTAIN_TOP_LEFT").id("RESIZE_CONTAIN_TOP_LEFT").renderFit(RenderFit.RESIZE_CONTAIN_TOP_LEFT).margin(5)
+      Text("RESIZE_CONTAIN_BOTTOM_RIGHT").id("RESIZE_CONTAIN_BOTTOM_RIGHT").renderFit(RenderFit.RESIZE_CONTAIN_BOTTOM_RIGHT).margin(5)
+      Text("RESIZE_COVER").id("RESIZE_COVER").renderFit(RenderFit.RESIZE_COVER).margin(5)
+      Text("RESIZE_COVER_TOP_LEFT").id("RESIZE_COVER_TOP_LEFT").renderFit(RenderFit.RESIZE_COVER_TOP_LEFT).margin(5)
+      Text("RESIZE_COVER_BOTTOM_RIGHT").id("RESIZE_COVER_BOTTOM_RIGHT").renderFit(RenderFit.RESIZE_COVER_BOTTOM_RIGHT).margin(5)
+    }.width('90%').height("90%")
+  }
+}
\ No newline at end of file
diff --git a/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/RotateOptions.ets b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/RotateOptions.ets
new file mode 100644
index 0000000000000000000000000000000000000000..66c6ec39fc7e6833b8978b5a01c84f0e220d51bf
--- /dev/null
+++ b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/RotateOptions.ets
@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@Entry
+@Component
+struct RotateOptions1 {
+  build() {
+    Column() {
+      Text('RotateOptions').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(14)
+      Row().id("RotateOptions")
+        .rotate({
+          x: 0,
+          y: 0,
+          z: 1,
+          centerX: '50%',
+          centerY: '50%',
+          centerZ: 1,
+          perspective: 2,
+          angle: 300
+        }) // 组件以矢量(0,0,1)为旋转轴，绕中心点顺时针旋转300度
+        .width(100).height(100).backgroundColor(0xAFEEEE)
+    }.width('100%').margin({ top: 5 })
+  }
+}
\ No newline at end of file
diff --git a/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/RouteType1.ets b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/RouteType1.ets
new file mode 100644
index 0000000000000000000000000000000000000000..6a769b2dac153035f52a582a7ea6955338107a6b
--- /dev/null
+++ b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/RouteType1.ets
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@Entry
+@Component
+struct RouteType1 {
+  @State scale1: number = 1
+  @State opacity1: number = 1
+
+  build() {
+    Column() {
+      Navigator({ target: 'pages/RouteType2', type: NavigationType.Push }) {
+        Image($r('app.media.icon')).width('100%').height('100%')    // 图片存放在media文件夹下
+      }
+    }.scale({ x: this.scale1 }).opacity(this.opacity1)
+  }
+  // 自定义方式1：完全自定义转场过程的效果
+  pageTransition() {
+    PageTransitionEnter({ type: RouteType.Pop, duration: 1200, curve: Curve.Linear })
+      .onEnter((type: RouteType, progress: number) => {
+        this.scale1 = 1
+        this.opacity1 = progress
+      }) // 进场过程中会逐帧触发onEnter回调，入参为动效的归一化进度(0% -- 100%)
+    PageTransitionExit({ duration: 1200, curve: Curve.Ease })
+      .onExit((type: RouteType, progress: number) => {
+        this.scale1 = 1 - progress
+        this.opacity1 = 1
+      }) // 退场过程中会逐帧触发onExit回调，入参为动效的归一化进度(0% -- 100%)
+  }
+}
\ No newline at end of file
diff --git a/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/RouteType2.ets b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/RouteType2.ets
new file mode 100644
index 0000000000000000000000000000000000000000..9263003e7c835080d754f3b6e2e1cf7a3f603ad2
--- /dev/null
+++ b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/RouteType2.ets
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@Entry
+@Component
+struct RouteType2 {
+  @State scale2: number = 1
+  @State opacity2: number = 1
+
+  build() {
+    Column() {
+      Navigator({ target: 'pages/RouteType1', type: NavigationType.Push }) {
+        Image($r('app.media.icon')).width('100%').height('100%')   // 图片存放在media文件夹下
+      }
+    }.width('100%').height('100%').scale({ x: this.scale2 }).opacity(this.opacity2)
+  }
+  // 自定义方式1：完全自定义转场过程的效果
+  pageTransition() {
+    PageTransitionEnter({ type: RouteType.Pop, duration: 1200, curve: Curve.Linear })
+      .onEnter((type: RouteType, progress: number) => {
+        this.scale2 = 1
+        this.opacity2 = progress
+      }) // 进场过程中会逐帧触发onEnter回调，入参为动效的归一化进度(0% -- 100%)
+    PageTransitionExit({ duration: 1200, curve: Curve.Ease })
+      .onExit((type: RouteType, progress: number) => {
+        this.scale2 = 1 - progress
+        this.opacity2 = 1
+      }) // 退场过程中会逐帧触发onExit回调，入参为动效的归一化进度(0% -- 100%)
+  }
+}
\ No newline at end of file
diff --git a/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/ShadowTypeStyle.ets b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/ShadowTypeStyle.ets
new file mode 100644
index 0000000000000000000000000000000000000000..5fb28cbb2d56155d226a91a5262d48d3f9cde6c5
--- /dev/null
+++ b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/ShadowTypeStyle.ets
@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@Entry
+@Component
+struct ShadowTypeStyle {
+  build() {
+    Column({ space: 10 }) {
+      Text('ShadowType: COLOR').fontSize(15).fontColor(0xCCCCCC).width('90%')
+      Image($r('app.media.icon')).id("ShadowType_COLOR")
+        .width('90%')
+        .height(40)
+        .shadow({type:ShadowType.COLOR,radius:20})
+
+      Text('ShadowType: BLUR').fontSize(15).fontColor(0xCCCCCC).width('90%')
+      Image($r('app.media.icon')).id("ShadowType_BLUR")
+        .width('90%')
+        .height(40)
+        .shadow({type:ShadowType.BLUR,radius:20})
+
+      // 添加阴影效果，图片效果不变
+      Text('ShadowStyle: OUTER_DEFAULT_XS').fontSize(15).fontColor(0xCCCCCC).width('90%')
+      Image($r('app.media.icon')).id("OUTER_DEFAULT_XS")
+        .width('90%')
+        .height(40)
+        .shadow(ShadowStyle.OUTER_DEFAULT_XS)
+        .shadow({type:ShadowType.COLOR,radius:20})
+
+      Text('ShadowStyle: OUTER_DEFAULT_SM').fontSize(15).fontColor(0xCCCCCC).width('90%')
+      Image($r('app.media.icon')).id("OUTER_DEFAULT_SM")
+        .width('90%')
+        .height(40)
+        .shadow(ShadowStyle.OUTER_DEFAULT_SM)
+
+      Text('ShadowStyle: OUTER_DEFAULT_MD').fontSize(15).fontColor(0xCCCCCC).width('90%')
+      Image($r('app.media.icon')).id("OUTER_DEFAULT_MD")
+        .width('90%')
+        .height(40)
+        .shadow(ShadowStyle.OUTER_DEFAULT_MD)
+
+      Text('ShadowStyle: OUTER_DEFAULT_LG').fontSize(15).fontColor(0xCCCCCC).width('90%')
+      Image($r('app.media.icon')).id("OUTER_DEFAULT_LG")
+        .width('90%')
+        .height(40)
+        .shadow(ShadowStyle.OUTER_DEFAULT_LG)
+
+      Text('ShadowStyle: OUTER_FLOATING_SM').fontSize(15).fontColor(0xCCCCCC).width('90%')
+      Image($r('app.media.icon')).id("OUTER_FLOATING_SM")
+        .width('90%')
+        .height(40)
+        .shadow(ShadowStyle.OUTER_FLOATING_SM)
+
+      Text('ShadowStyle: OUTER_FLOATING_MD').fontSize(15).fontColor(0xCCCCCC).width('90%')
+      Image($r('app.media.icon')).id("OUTER_FLOATING_MD")
+        .width('90%')
+        .height(40)
+        .shadow(ShadowStyle.OUTER_FLOATING_MD)
+    }.width('100%').margin({ top: 5 })
+  }
+}
\ No newline at end of file
diff --git a/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/TransitionEffect.ets b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/TransitionEffect.ets
new file mode 100644
index 0000000000000000000000000000000000000000..3ab9306e1ac989cd2530137a63a7a775f82d12d5
--- /dev/null
+++ b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/TransitionEffect.ets
@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@Entry
+@Component
+struct TransitionEffectExample1 {
+  @State flag: boolean = true;
+  @State show: string = 'show';
+
+  build() {
+    Column() {
+      Button(this.show).width(80).height(30).margin(30)
+        .onClick(() => {
+          // 点击Button控制Image的显示和消失
+          if (this.flag) {
+            this.show = 'hide';
+          } else {
+            this.show = 'show';
+          }
+          this.flag = !this.flag;
+        })
+      if (this.flag) {
+        // Image的显示和消失配置为相同的过渡效果（出现和消失互为逆过程）
+        // 出现时从指定的透明度为0、绕z轴旋转180°的状态，变为默认的透明度为1、旋转角为0的状态，透明度与旋转动画时长都为2000ms
+        // 消失时从默认的透明度为1、旋转角为0的状态，变为指定的透明度为0、绕z轴旋转180°的状态，透明度与旋转动画时长都为2000ms
+        Image($r('app.media.icon')).width(200).height(200)
+          .transition(TransitionEffect.OPACITY
+            .animation({ duration: 2000, curve: Curve.Ease }).combine(
+          TransitionEffect.rotate({ z: 1, centerZ: 1, angle: 180 })
+          ))
+      }else{
+        Image($r('app.media.icon')).width(200).height(200)
+          .transition(TransitionEffect.IDENTITY
+
+            .animation({ duration: 2000, curve: Curve.Ease }).combine(
+            TransitionEffect.rotate({ z: 1, centerZ: 1, angle: 180 })
+            ))
+      }
+      Image($r('app.media.icon')).width(200).height(200)
+        .transition(
+        TransitionEffect.SLIDE
+          .animation({ duration: 2000, curve: Curve.Ease })
+          .combine(
+          TransitionEffect.rotate({ z: 1, centerZ: 1, angle: 180 })
+          )
+//          .asymmetric({
+//          appear: TransitionEffect,
+//          disappear: TransitionEffect })
+        )
+    }.width('100%')
+  }
+}
\ No newline at end of file
diff --git a/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/Xcomponent.ets b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/Xcomponent.ets
new file mode 100644
index 0000000000000000000000000000000000000000..394fde622e8f27834f2883003ed8ceeea37d9121
--- /dev/null
+++ b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/Xcomponent.ets
@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@Entry
+@Component
+struct XComponentType1 {
+  @State XComponentType1: XComponentType = XComponentType.SURFACE
+  private surfaceId : string =''
+  xcomponentController: XComponentController = new XComponentController()
+
+  build() {
+    Column() {
+      XComponent({
+        id: 'xcomponent1',
+        type: XComponentType.SURFACE,
+        controller: this.xcomponentController
+      }).id('xcomponent_1')
+        .onLoad(() => {
+          this.xcomponentController.setXComponentSurfaceSize({surfaceWidth:1920,surfaceHeight:1080});
+          this.surfaceId = this.xcomponentController.getXComponentSurfaceId()
+          console.log(this.surfaceId)
+        })
+        .width('640px')
+        .height('480px')
+        .margin(5)
+
+      XComponent({
+        id: 'xcomponent2',
+        type: XComponentType.COMPONENT,
+        controller: this.xcomponentController
+      }).id('xcomponent_2')
+        .onLoad(() => {
+          this.xcomponentController.setXComponentSurfaceSize({surfaceWidth:1920,surfaceHeight:1080});
+          this.surfaceId = this.xcomponentController.getXComponentSurfaceId()
+          console.log(this.surfaceId)
+        })
+        .width('640px')
+        .height('480px')
+        .margin(5)
+
+      XComponent({
+        id: 'xcomponent3',
+        type: XComponentType.TEXTURE,
+        controller: this.xcomponentController
+      }).id('xcomponent_3')
+        .onLoad(() => {
+          this.xcomponentController.setXComponentSurfaceSize({surfaceWidth:1920,surfaceHeight:1080});
+          this.surfaceId = this.xcomponentController.getXComponentSurfaceId()
+          console.log(this.surfaceId)
+        })
+        .width('640px')
+        .height('480px')
+        .margin(5)
+    }
+    .backgroundColor(Color.Black)
+    .position({x: 0, y: 48})
+  }
+}
\ No newline at end of file
diff --git a/arkui/ace_ets_component_ui/entry/src/main/ets/test/List.test.ets b/arkui/ace_ets_component_ui/entry/src/main/ets/test/List.test.ets
index 0721a9713a71855496bdd5cf301274750234dde7..d1dbd1fba20323af165018ac51cce85495b5a4bf 100644
--- a/arkui/ace_ets_component_ui/entry/src/main/ets/test/List.test.ets
+++ b/arkui/ace_ets_component_ui/entry/src/main/ets/test/List.test.ets
@@ -58,6 +58,8 @@ import NavigationJsunit from './NavigationJsunit.test.ets';
 import GridColOffsetJsunit from './GridColoffsetJsunit.test.ets';
 import ApiCommponentAddJsunit from './ApiCommponentAddJsunit.test.ets';
 import fontJsunit from './fontJsunit.test.ets';
+import PanGestureEventJsunit from './PanGestureEventJsunit.test.ets';
+import RenderFitJsunit from './RenderFitJsunit.test.ets';
 
 export default function testsuite() {
   blankJsunit();
@@ -105,4 +107,6 @@ export default function testsuite() {
   GridColOffsetJsunit();
   fontJsunit();
   ApiCommponentAddJsunit();
+  PanGestureEventJsunit();
+  RenderFitJsunit();
 }
\ No newline at end of file
diff --git a/arkui/ace_ets_component_ui/entry/src/main/ets/test/PanGestureEventJsunit.test.ets b/arkui/ace_ets_component_ui/entry/src/main/ets/test/PanGestureEventJsunit.test.ets
new file mode 100644
index 0000000000000000000000000000000000000000..162b7fb7e320bc1b3133d16cf572a6d15fcafb17
--- /dev/null
+++ b/arkui/ace_ets_component_ui/entry/src/main/ets/test/PanGestureEventJsunit.test.ets
@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) 2022 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { describe, beforeAll, beforeEach, afterEach, afterAll, it, expect } from "@ohos/hypium"
+import router from '@system.router';
+import {UiComponent, UiDriver, Component, Driver, UiWindow, ON, BY, MatchPattern, DisplayRotation, ResizeDirection, WindowMode, PointerMatrix} from '@ohos.UiTest';
+import CommonFunc from '../MainAbility/utils/Common';
+import {MessageManager,Callback} from '../MainAbility/utils/MessageManager';
+
+
+export default function PanGestureEventJsunit() {
+  describe('PanGestureEventJsunit', function () {
+    beforeEach(async function (done) {
+      console.info("PanGestureEventJsunit beforeEach start");
+      let options = {
+        uri: 'MainAbility/pages/PanGestureEvent',
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get PanGestureEventJsunit state pages: " + JSON.stringify(pages));
+        if (!("PanGestureEvent" == pages.name)) {
+          console.info("get PanGestureEventJsunit state pages.name: " + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await CommonFunc.sleep(2000);
+          console.info("push PanGestureEventJsunit page result: " + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push PanGestureEventJsunit page error: " + err);
+        expect().assertFail();
+      }
+      done();
+    });
+
+    it('PanGestureEventJsunit_0100', 0, async function (done) {
+      // Get the information of the GestureEvent
+      console.info('[PanGestureEventJsunit_0100] START');
+      let driver = await UiDriver.create()
+      await driver.swipe(200, 400, 400, 400);
+      await CommonFunc.sleep(500);
+      let textComponent = await driver.findComponent(BY.key('velocityX'));
+      let text = await textComponent.getText();
+      await CommonFunc.sleep(1000);
+      expect(text == "0").assertFalse();
+      console.info('[PanGestureEventJsunit_0100] END');
+      done();
+    });
+
+    it('PanGestureEventJsunit_0200', 0, async function (done) {
+      // Get the information of the GestureEvent
+      console.info('[PanGestureEventJsunit_0200] START');
+      let driver = await UiDriver.create()
+      await driver.swipe(200, 400, 400, 400);
+      await CommonFunc.sleep(500);
+      let textComponent = await driver.findComponent(BY.key('velocityY'));
+      let text = await textComponent.getText();
+      await CommonFunc.sleep(1000);
+      expect(text == "0").assertFalse();
+      console.info('[PanGestureEventJsunit_0200] END');
+      done();
+    });
+
+    it('PanGestureEventJsunit_0300', 0, async function (done) {
+      // Get the information of the GestureEvent
+      console.info('[PanGestureEventJsunit_0300] START');
+      let driver = await UiDriver.create()
+      await driver.swipe(200, 400, 400, 400);
+      await CommonFunc.sleep(500);
+       let textComponent = await driver.findComponent(BY.key('velocity'));
+      let text = await textComponent.getText();
+      await CommonFunc.sleep(1000);
+      expect(text == "0").assertFalse();
+      console.info('[PanGestureEventJsunit_0300] END');
+      done();
+    });
+  })
+}
diff --git a/arkui/ace_ets_component_ui/entry/src/main/ets/test/RenderFitJsunit.test.ets b/arkui/ace_ets_component_ui/entry/src/main/ets/test/RenderFitJsunit.test.ets
new file mode 100644
index 0000000000000000000000000000000000000000..f0f350dd1046f15d350a3ad8588b47d4ca9cb1e8
--- /dev/null
+++ b/arkui/ace_ets_component_ui/entry/src/main/ets/test/RenderFitJsunit.test.ets
@@ -0,0 +1,202 @@
+/**
+ * Copyright (c) 2022 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { describe, beforeAll, beforeEach, afterEach, afterAll, it, expect } from "@ohos/hypium"
+import router from '@system.router';
+import {UiComponent, UiDriver, Component, Driver, UiWindow, ON, BY, MatchPattern, DisplayRotation, ResizeDirection, WindowMode, PointerMatrix} from '@ohos.UiTest';
+import CommonFunc from '../MainAbility/utils/Common';
+import {MessageManager,Callback} from '../MainAbility/utils/MessageManager';
+
+
+export default function RenderFitJsunit() {
+  describe('RenderFitJsunit', function () {
+    beforeEach(async function (done) {
+      console.info("RenderFitJsunit beforeEach start");
+      let options = {
+        uri: 'MainAbility/pages/RenderFit',
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get RenderFitJsunit state pages: " + JSON.stringify(pages));
+        if (!("RenderFit" == pages.name)) {
+          console.info("get RenderFitJsunit state pages.name: " + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await CommonFunc.sleep(2000);
+          console.info("push RenderFitJsunit page result: " + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push RenderFitJsunit page error: " + err);
+        expect().assertFail();
+      }
+      done();
+    });
+
+    it('RenderFitJsunit_0100', 0, async function (done) {
+      // Get the information of the RenderFit
+      console.info('[RenderFitJsunit_0100] START');
+      let strJson = getInspectorByKey('LEFT');
+      let obj = JSON.parse(strJson);
+      console.info("[RenderFitJsunit_0100] LEFT: " + JSON.stringify(obj));
+      await CommonFunc.sleep(1000);
+      expect(obj.$attrs.renderFit).assertEqual('RenderFit.LEFT');
+      console.info('[RenderFitJsunit_0100] END');
+      done();
+    });
+
+    it('RenderFitJsunit_0200', 0, async function (done) {
+      // Get the information of the RenderFit
+      console.info('[RenderFitJsunit_0200] START');
+      let strJson = getInspectorByKey('RIGHT');
+      let obj = JSON.parse(strJson);
+      console.info("[RenderFitJsunit_0200] RIGHT: " + JSON.stringify(obj));
+      await CommonFunc.sleep(1000);
+      expect(obj.$attrs.renderFit).assertEqual('RenderFit.RIGHT');
+      console.info('[RenderFitJsunit_0200] END');
+      done();
+    });
+
+    it('RenderFitJsunit_0300', 0, async function (done) {
+      // Get the information of the RenderFit
+      console.info('[RenderFitJsunit_0300] START');
+      let strJson = getInspectorByKey('TOP_LEFT');
+      let obj = JSON.parse(strJson);
+      console.info("[RenderFitJsunit_0300] TOP_LEFT: " + JSON.stringify(obj));
+      await CommonFunc.sleep(1000);
+      expect(obj.$attrs.renderFit).assertEqual('RenderFit.TOP_LEFT');
+      console.info('[RenderFitJsunit_0300] END');
+      done();
+    });
+
+    it('RenderFitJsunit_0400', 0, async function (done) {
+      // Get the information of the RenderFit
+      console.info('[RenderFitJsunit_0400] START');
+      let strJson = getInspectorByKey('TOP_RIGHT');
+      let obj = JSON.parse(strJson);
+      console.info("[RenderFitJsunit_0400] TOP_RIGHT: " + JSON.stringify(obj));
+      await CommonFunc.sleep(1000);
+      expect(obj.$attrs.renderFit).assertEqual('RenderFit.TOP_RIGHT');
+      console.info('[RenderFitJsunit_0400] END');
+      done();
+    });
+
+    it('RenderFitJsunit_0500', 0, async function (done) {
+      // Get the information of the RenderFit
+      console.info('[RenderFitJsunit_0500] START');
+      let strJson = getInspectorByKey('BOTTOM_LEFT');
+      let obj = JSON.parse(strJson);
+      console.info("[RenderFitJsunit_0500] BOTTOM_LEFT: " + JSON.stringify(obj));
+      await CommonFunc.sleep(1000);
+      expect(obj.$attrs.renderFit).assertEqual('RenderFit.BOTTOM_LEFT');
+      console.info('[RenderFitJsunit_0500] END');
+      done();
+    });
+
+    it('RenderFitJsunit_0600', 0, async function (done) {
+      // Get the information of the RenderFit
+      console.info('[RenderFitJsunit_0600] START');
+      let strJson = getInspectorByKey('BOTTOM_RIGHT');
+      let obj = JSON.parse(strJson);
+      console.info("[RenderFitJsunit_0600] BOTTOM_RIGHT: " + JSON.stringify(obj));
+      await CommonFunc.sleep(1000);
+      expect(obj.$attrs.renderFit).assertEqual('RenderFit.BOTTOM_RIGHT');
+      console.info('[RenderFitJsunit_0600] END');
+      done();
+    });
+
+    it('RenderFitJsunit_0700', 0, async function (done) {
+      // Get the information of the RenderFit
+      console.info('[RenderFitJsunit_0700] START');
+      let strJson = getInspectorByKey('RESIZE_FILL');
+      let obj = JSON.parse(strJson);
+      console.info("[RenderFitJsunit_0700] RESIZE_FILL: " + JSON.stringify(obj));
+      await CommonFunc.sleep(1000);
+      expect(obj.$attrs.renderFit).assertEqual('RenderFit.RESIZE_FILL');
+      console.info('[RenderFitJsunit_0700] END');
+      done();
+    });
+
+    it('RenderFitJsunit_0800', 0, async function (done) {
+      // Get the information of the RenderFit
+      console.info('[RenderFitJsunit_0800] START');
+      let strJson = getInspectorByKey('RESIZE_CONTAIN');
+      let obj = JSON.parse(strJson);
+      console.info("[RenderFitJsunit_0800] RESIZE_CONTAIN: " + JSON.stringify(obj));
+      await CommonFunc.sleep(1000);
+      expect(obj.$attrs.renderFit).assertEqual('RenderFit.RESIZE_CONTAIN');
+      console.info('[RenderFitJsunit_0800] END');
+      done();
+    });
+
+    it('RenderFitJsunit_0900', 0, async function (done) {
+      // Get the information of the RenderFit
+      console.info('[RenderFitJsunit_0900] START');
+      let strJson = getInspectorByKey('RESIZE_CONTAIN_TOP_LEFT');
+      let obj = JSON.parse(strJson);
+      console.info("[RenderFitJsunit_0900] RESIZE_CONTAIN_TOP_LEFT: " + JSON.stringify(obj));
+      await CommonFunc.sleep(1000);
+      expect(obj.$attrs.renderFit).assertEqual('RenderFit.RESIZE_CONTAIN_TOP_LEFT');
+      console.info('[RenderFitJsunit_0900] END');
+      done();
+    });
+
+    it('RenderFitJsunit_1000', 0, async function (done) {
+      // Get the information of the RenderFit
+      console.info('[RenderFitJsunit_1000] START');
+      let strJson = getInspectorByKey('RESIZE_CONTAIN_BOTTOM_RIGHT');
+      let obj = JSON.parse(strJson);
+      console.info("[RenderFitJsunit_1000] RESIZE_CONTAIN_BOTTOM_RIGHT: " + JSON.stringify(obj));
+      await CommonFunc.sleep(1000);
+      expect(obj.$attrs.renderFit).assertEqual('RenderFit.RESIZE_CONTAIN_BOTTOM_RIGHT');
+      console.info('[RenderFitJsunit_1000] END');
+      done();
+    });
+
+    it('RenderFitJsunit_1100', 0, async function (done) {
+      // Get the information of the RenderFit
+      console.info('[RenderFitJsunit_1100] START');
+      let strJson = getInspectorByKey('RESIZE_COVER');
+      let obj = JSON.parse(strJson);
+      console.info("[RenderFitJsunit_1100] RESIZE_COVER: " + JSON.stringify(obj));
+      await CommonFunc.sleep(1000);
+      expect(obj.$attrs.renderFit).assertEqual('RenderFit.RESIZE_COVER');
+      console.info('[RenderFitJsunit_1100] END');
+      done();
+    });
+
+    it('RenderFitJsunit_1200', 0, async function (done) {
+      // Get the information of the RenderFit
+      console.info('[RenderFitJsunit_1200] START');
+      let strJson = getInspectorByKey('RESIZE_COVER_TOP_LEFT');
+      let obj = JSON.parse(strJson);
+      console.info("[RenderFitJsunit_1200] RESIZE_COVER_TOP_LEFT: " + JSON.stringify(obj));
+      await CommonFunc.sleep(1000);
+      expect(obj.$attrs.renderFit).assertEqual('RenderFit.RESIZE_COVER_TOP_LEFT');
+      console.info('[RenderFitJsunit_1200] END');
+      done();
+    });
+
+    it('RenderFitJsunit_1300', 0, async function (done) {
+      // Get the information of the RenderFit
+      console.info('[RenderFitJsunit_1300] START');
+      let strJson = getInspectorByKey('RESIZE_COVER_BOTTOM_RIGHT');
+      let obj = JSON.parse(strJson);
+      console.info("[RenderFitJsunit_1300] RESIZE_COVER_BOTTOM_RIGHT: " + JSON.stringify(obj));
+      await CommonFunc.sleep(1000);
+      expect(obj.$attrs.renderFit).assertEqual('RenderFit.RESIZE_COVER_BOTTOM_RIGHT');
+      console.info('[RenderFitJsunit_1300] END');
+      done();
+    });
+  })
+}
diff --git a/arkui/ace_ets_component_ui/entry/src/main/resources/base/element/string.json b/arkui/ace_ets_component_ui/entry/src/main/resources/base/element/string.json
index 2977b612ec4595b13eaaffe3e8fc578e83c42d48..74bb3dfe4a9852b0fb1468caaf215d372daf31e0 100644
--- a/arkui/ace_ets_component_ui/entry/src/main/resources/base/element/string.json
+++ b/arkui/ace_ets_component_ui/entry/src/main/resources/base/element/string.json
@@ -27,6 +27,14 @@
         {
             "name": "app_name",
             "value": "Demo"
+        },
+        {
+          "name": "MenuItem2_labelInfo",
+          "value": "labelInfo2"
+        },
+        {
+          "name": "MenuItemGroup2_footer",
+          "value": "footer2"
         }
     ]
 }
diff --git a/arkui/ace_ets_component_ui/entry/src/main/resources/base/profile/main_pages.json b/arkui/ace_ets_component_ui/entry/src/main/resources/base/profile/main_pages.json
index 9dd326b62482f7fb86a9f5a4623340303f90863e..88df3d5c63e00409e319fac337c86ea7aca7fc80 100644
--- a/arkui/ace_ets_component_ui/entry/src/main/resources/base/profile/main_pages.json
+++ b/arkui/ace_ets_component_ui/entry/src/main/resources/base/profile/main_pages.json
@@ -71,6 +71,24 @@
         "MainAbility/pages/createBuilderadd",
         "MainAbility/pages/dragAdd",
         "MainAbility/pages/TouchAdd",
-        "MainAbility/pages/drwableAdd"
+        "MainAbility/pages/drwableAdd",
+        "MainAbility/pages/ClickMouseTouchEvent",
+        "MainAbility/pages/DragEvent",
+        "MainAbility/pages/MenuItemGroupOptions",
+        "MainAbility/pages/PanGestureEvent",
+        "MainAbility/pages/RotateOptions",
+        "MainAbility/pages/ShadowTypeStyle",
+        "MainAbility/pages/TransitionEffect",
+        "MainAbility/pages/ApiRect",
+        "MainAbility/pages/BlurStyle",
+        "MainAbility/pages/CanvasRenderer",
+        "MainAbility/pages/CustomDialogControllerOptions",
+        "MainAbility/pages/DatePickerDialogOptions",
+        "MainAbility/pages/EntryOptions",
+        "MainAbility/pages/ModalTransition",
+        "MainAbility/pages/RenderFit",
+        "MainAbility/pages/Xcomponent",
+        "MainAbility/pages/RouteType1",
+        "MainAbility/pages/RouteType2"
     ]
 }
\ No newline at end of file