Merge branch 'master' of https://gitee.com/sephyrothcloud/applications_app_samples_1215

Signed-off-by: haoxiaohui <haoxiaohui1@huawei.com>

OAT.xml

@@ -169,6 +169,8 @@ Note:If the text contains special characters, please escape them according to th
                 <filteritem type="filename" name="oh-package.json5" desc="OpenHarmony工程编译入口脚本，无需添加License头"/>
                 <filteritem type="filename" name="hvigorw" desc="OpenHarmony工程编译入口脚本，无需添加License头"/>
                 <filteritem type="filename" name="hvigorw.bat" desc="OpenHarmony工程编译配置文件，无需添加License头"/>
+                <filteritem type="filename" name="hvigorfile.js" desc="OpenHarmony工程编译配置文件，无需添加License头"/>
+                <filteritem type="filename" name="hvigorfile.ts" desc="OpenHarmony工程编译配置文件，无需添加License头"/>
                 <filteritem type="filename" name="hvigor-config.json5" desc="OpenHarmony工程编译配置文件，无需添加License头"/>
                 <filteritem type="filename" name="hvigor-wrapper.js" desc="OpenHarmony工程编译配置文件，无需添加License头"/>
                 <filteritem type="filepath" name="code/Project/HapBuild/compile-tool/bin/compile-ohpm-ci.sh" desc="预测试工具脚本文件，无需添加License头"/>
@@ -186,6 +188,8 @@ Note:If the text contains special characters, please escape them according to th
                 <filteritem type="filename" name="oh-package.json5" desc="OpenHarmony工程编译入口脚本，无需添加版权头"/>
                 <filteritem type="filename" name="hvigorw" desc="OpenHarmony工程编译入口脚本，无需添加版权头"/>
                 <filteritem type="filename" name="hvigorw.bat" desc="OpenHarmony工程编译配置文件，无需添加版权头"/>
+                <filteritem type="filename" name="hvigorfile.js" desc="OpenHarmony工程编译配置文件，无需添加版权头"/>
+                <filteritem type="filename" name="hvigorfile.ts" desc="OpenHarmony工程编译配置文件，无需添加版权头"/>
                 <filteritem type="filename" name="hvigor-config.json5" desc="OpenHarmony工程编译配置文件，无需添加版权头"/>
                 <filteritem type="filename" name="hvigor-wrapper.js" desc="OpenHarmony工程编译配置文件，无需添加版权头"/>
                 <filteritem type="filepath" name="code/Project/HapBuild/compile-tool/bin/compile-ohpm-ci.sh" desc="预测试工具脚本文件，无需添加版权头"/>

code/BasicFeature/ApplicationModels/AbilityStartMode/entry/hvigorfile.js

@@ -1,2 +1,17 @@
+/*
+ * Copyright (c) 2024 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.
+ */
+
 // Script for compiling build behavior. It is built in the build plug-in and cannot be modified currently.
 module.exports = require('@ohos/hvigor-ohos-plugin').hapTasks

code/BasicFeature/DFX/Logger/hvigorfile.ts

@@ -1,2 +1,17 @@
+/*
+ * Copyright (c) 2024 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.
+ */
+
 // Script for compiling build behavior. It is built in the build plug-in and cannot be modified currently.
 export { appTasks } from '@ohos/hvigor-ohos-plugin'

code/BasicFeature/DeviceManagement/ScreenDetector/entry/src/ohosTest/ets/TestRunner/OpenHarmonyTestRunner.ts

@@ -1,3 +1,18 @@
+/*
+ * Copyright (c) 2024 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 hilog from '@ohos.hilog';
 import TestRunner from '@ohos.application.testRunner'
 import AbilityDelegatorRegistry from '@ohos.application.abilityDelegatorRegistry'

code/BasicFeature/FileManagement/FileManager/hvigorfile.js

@@ -1,2 +1,17 @@
+/*
+ * Copyright (c) 2024 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.
+ */
+
 // Script for compiling build behavior. It is built in the build plug-in and cannot be modified currently.
 module.exports = require('@ohos/hvigor-ohos-plugin').appTasks

code/BasicFeature/International/International/hvigorfile.ts

@@ -1,2 +1,17 @@
+/*
+ * Copyright (c) 2024 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.
+ */
+
 // Script for compiling build behavior. It is built in the build plug-in and cannot be modified currently.
 export { appTasks } from '@ohos/hvigor-ohos-plugin';

code/BasicFeature/Native/NdkNativeWindow/entry/src/main/cpp/types/libentry/index.d.ts

@@ -1 +1,16 @@
+/*
+ * Copyright (c) 2024 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.
+ */
+
 export const add: (a: number, b: number) => number;

code/BasicFeature/Native/NdkNativeWindow/entry/src/main/ets/entryability/EntryAbility.ts

@@ -1,3 +1,18 @@
+/*
+ * Copyright (c) 2024 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 AbilityConstant from '@ohos.app.ability.AbilityConstant';
 import hilog from '@ohos.hilog';
 import UIAbility from '@ohos.app.ability.UIAbility';

code/DocsSample/ApplicationModels/WidgetUpdateByProxy/build-profile.json5

@@ -23,8 +23,7 @@
         "signingConfig": "default"
       }
     ],
-    "signingConfigs": [
-    ]
+    "signingConfigs": []
   },
   "modules": [
     {

code/DocsSample/ApplicationModels/WidgetUpdateByProxy/entry/src/ohosTest/ets/test/Ability.test.ets

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2022-2023 Huawei Device Co., Ltd.
+ * Copyright (c) 2022-2024 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
@@ -14,26 +14,26 @@
  */
 
 import hilog from '@ohos.hilog';
-import { describe, beforeAll, beforeEach, afterEach, afterAll, it, expect } from '@ohos/hypium'
+import { describe, beforeAll, beforeEach, afterEach, afterAll, it, expect } from '@ohos/hypium';
 
 export default function abilityTest() {
-  describe('ActsAbilityTest', function () {
+  describe('ActsAbilityTest', () => {
     // Defines a test suite. Two parameters are supported: test suite name and test suite function.
-    beforeAll(function () {
+    beforeAll(() => {
       // Presets an action, which is performed only once before all test cases of the test suite start.
       // This API supports only one parameter: preset action function.
     })
-    beforeEach(function () {
+    beforeEach(() => {
       // Presets an action, which is performed before each unit test case starts.
       // The number of execution times is the same as the number of test cases defined by **it**.
       // This API supports only one parameter: preset action function.
     })
-    afterEach(function () {
+    afterEach(() => {
       // Presets a clear action, which is performed after each unit test case ends.
       // The number of execution times is the same as the number of test cases defined by **it**.
       // This API supports only one parameter: clear action function.
     })
-    afterAll(function () {
+    afterAll(() => {
       // Presets a clear action, which is performed after all test cases of the test suite end.
       // This API supports only one parameter: clear action function.
     })

code/DocsSample/ApplicationModels/WidgetUpdateByProxy/entry/src/ohosTest/ets/testability/TestAbility.ets

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2022-2023 Huawei Device Co., Ltd.
+ * Copyright (c) 2022-2024 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
@@ -19,19 +19,21 @@ import hilog from '@ohos.hilog';
 import { Hypium } from '@ohos/hypium';
 import testsuite from '../test/List.test';
 import window from '@ohos.window';
+import Want from '@ohos.app.ability.Want';
+import AbilityConstant from '@ohos.app.ability.AbilityConstant';
 
 const TAG = '[Sample_UpdateByProxy_Test]';
 const DOMAIN = 0xF811;
 
 export default class TestAbility extends UIAbility {
-  onCreate(want, launchParam) {
+  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) {
     hilog.info(DOMAIN, TAG, '%{public}s', 'TestAbility onCreate');
     hilog.info(DOMAIN, TAG, '%{public}s', 'want param:' + JSON.stringify(want) ?? '');
     hilog.info(DOMAIN, TAG, '%{public}s', 'launchParam:' + JSON.stringify(launchParam) ?? '');
-    let abilityDelegator = AbilityDelegatorRegistry.getAbilityDelegator()
-    let abilityDelegatorArguments = AbilityDelegatorRegistry.getArguments()
+    let abilityDelegator = AbilityDelegatorRegistry.getAbilityDelegator();
+    let abilityDelegatorArguments = AbilityDelegatorRegistry.getArguments();
     hilog.info(DOMAIN, TAG, '%{public}s', 'start run testcase!!!');
-    Hypium.hypiumTest(abilityDelegator, abilityDelegatorArguments, testsuite)
+    Hypium.hypiumTest(abilityDelegator, abilityDelegatorArguments, testsuite);
   }
 
   onDestroy() {

code/Performance/PerformanceLibrary/build-profile.json5

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Copyright (c) 2024 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
@@ -15,9 +15,7 @@
 
 {
   "app": {
-    "signingConfigs": [
-
-    ],
+    "signingConfigs": [],
     "products": [
       {
         "name": "default",

code/Performance/PerformanceLibrary/feature/DFXStateManagement/src/main/ets/view/DFXStateAfterOptimization.ets

@@ -13,208 +13,189 @@
  * limitations under the License.
  */
 
-@Observed
-class NeedRenderImage {
+const animationDuration: number = 500; // move动画时长
+const opacityChangeValue: number = 0.1; // opacity每次变化的值
+const opacityChangeRange: number = 1; // opacity变化的范围
+const translateYChangeValue: number = 180; // translateY每次变化的值
+const translateYChangeRange: number = 250; // translateY变化的范围
+const scaleXChangeValue: number = 0.6; // scaleX每次变化的值
+const scaleXChangeRange: number = 0.8; // scaleX每次变化的值
+const imageWidthChangeValue: number = 30; // imageWidth每次变化的值
+const imageWidthChangeRange: number = 160; // imageWidth每次变化的值
+const imageHeightChangeValue: number = 30; // imageHeight每次变化的值
+const imageHeightChangeRange: number = 160; // imageHeight每次变化的值
+
+// 图片样式类
+class ImageStyle {
   public translateImageX: number = 0;
   public translateImageY: number = 0;
   public imageWidth: number = 78;
   public imageHeight: number = 78;
 }
 
+// 缩放属性类
 @Observed
-class NeedRenderScale {
+class ScaleStyle {
   public scaleX: number = 0.3;
   public scaleY: number = 0.3;
 }
 
+// 位移属性类
 @Observed
-class NeedRenderAlpha {
-  public alpha: number = 0.5;
-}
-
-@Observed
-class NeedRenderSize {
-  public width: number = 336;
-  public height: number = 178;
-}
-
-@Observed
-class NeedRenderPos {
-  public posX: number = 10;
-  public posY: number = 50;
-}
-
-@Observed
-class NeedRenderBorderRadius {
-  public borderRadius: number = 24;
-}
-
-@Observed
-class NeedRenderFontSize {
-  public fontSize: number = 20;
-}
-
-@Observed
-class NeedRenderTranslate {
+class TranslateStyle {
   public translateX: number = 0;
   public translateY: number = 0;
 }
 
+// 样式属性类，嵌套ImageStyle, ScaleStyle, TranslateStyle
 @Observed
 class UIStyle {
-  needRenderTranslate: NeedRenderTranslate = new NeedRenderTranslate();
-  needRenderFontSize: NeedRenderFontSize = new NeedRenderFontSize();
-  needRenderBorderRadius: NeedRenderBorderRadius = new NeedRenderBorderRadius();
-  needRenderPos: NeedRenderPos = new NeedRenderPos();
-  needRenderSize: NeedRenderSize = new NeedRenderSize();
-  needRenderAlpha: NeedRenderAlpha = new NeedRenderAlpha();
-  needRenderScale: NeedRenderScale = new NeedRenderScale();
-  needRenderImage: NeedRenderImage = new NeedRenderImage();
+  translateStyle: TranslateStyle = new TranslateStyle();
+  scaleStyle: ScaleStyle = new ScaleStyle();
+  imageStyle: ImageStyle = new ImageStyle();
 }
 
 @Component
-struct SpecialImage {
-  @Consume uiStyle: UIStyle;
-  @Prop needRenderImage: NeedRenderImage
+struct SpecialImageA {
+  @Link specialImageAScaleStyle: ScaleStyle;
+  private opacityNum: number = 1; // 默认透明度
 
   private isRenderSpecialImage(): number {
-    console.log("SpecialImage is rendered");
-    return 1;
+    // Image每次渲染时透明度增加0.1, 在0-1之间循环
+    this.opacityNum = (this.opacityNum + opacityChangeValue) % opacityChangeRange;
+    return this.opacityNum;
   }
 
   build() {
     Image($r('app.media.icon'))
-      .width(this.needRenderImage.imageWidth)
-      .height(this.needRenderImage.imageHeight)
-      .margin({ top: 20 })
-      .translate({
-        x: this.needRenderImage.translateImageX,
-        y: this.needRenderImage.translateImageY
+      .width($r('app.integer.special_image_width'))
+      .height($r('app.integer.special_image_width'))
+      .margin({ top: $r('app.integer.image_margin_top') })
+      .scale({
+        x: this.specialImageAScaleStyle.scaleX,
+        y: this.specialImageAScaleStyle.scaleY
       })
       .opacity(this.isRenderSpecialImage())
   }
 }
 
 @Component
-struct CompA {
-  @Provide uiStyle: UIStyle = new UIStyle();
-  @ObjectLink needRenderTranslate: NeedRenderTranslate;
-  @ObjectLink needRenderFontSize: NeedRenderFontSize;
-  @ObjectLink needRenderBorderRadius: NeedRenderBorderRadius;
-  @ObjectLink needRenderPos: NeedRenderPos;
-  @ObjectLink needRenderSize: NeedRenderSize;
-  @ObjectLink needRenderAlpha: NeedRenderAlpha;
-  @Prop needRenderScale: NeedRenderScale;
+struct SpecialImageB {
+  @Link specialImageBStyle: ImageStyle;
+  private opacityNum: number = 1; // 默认透明度
 
-  private isRenderColumn(): number {
-    console.log("Column is rendered");
-    return 1;
-  }
-
-  private isRenderStack(): number {
-    console.log("Stack is rendered");
-    return 1;
-  }
-
-  private isRenderImage(): number {
-    console.log("Image is rendered");
-    return 1;
-  }
-
-  private isRenderText(): number {
-    console.log("Text is rendered");
-    return 1;
+  private isRenderSpecialImage(): number {
+    // Image每次渲染时透明度增加0.1, 在0-1之间循环
+    this.opacityNum = (this.opacityNum + opacityChangeValue) % opacityChangeRange;
+    return this.opacityNum;
   }
 
   build() {
-    Column() {
-      SpecialImage({
-        needRenderImage: this.uiStyle.needRenderImage
+    Image($r('app.media.icon'))
+      .width(this.specialImageBStyle.imageWidth)
+      .height(this.specialImageBStyle.imageHeight)
+      .margin({ top: $r('app.integer.image_margin_top') })
+      .translate({
+        x: this.specialImageBStyle.translateImageX,
+        y: this.specialImageBStyle.translateImageY
       })
-      SpecialImage({
-        needRenderImage: this.uiStyle.needRenderImage
+      .opacity(this.isRenderSpecialImage())
+  }
+}
+
+@Component
+struct ComponentA {
+  @Prop uiStyle: UIStyle; // 样式属性类，实例属性被多个组件使用
+  @State scaleStyle: ScaleStyle = this.uiStyle.scaleStyle;
+  @State translateStyle: TranslateStyle = this.uiStyle.translateStyle;
+  @State imageStyle: ImageStyle = this.uiStyle.imageStyle;
+
+  build() {
+    Column() {
+      // 受状态变量影响的组件
+      SpecialImageA({
+        specialImageAScaleStyle: this.scaleStyle
+      })
+      SpecialImageB({
+        specialImageBStyle: this.imageStyle
       })
       Stack() {
         Column() {
           Image($r('app.media.icon'))
-            .opacity(this.needRenderAlpha.alpha)
+            .opacity($r('app.float.icon_opacity'))
             .scale({
-              x: this.needRenderScale.scaleX,
-              y: this.needRenderScale.scaleY
+              x: this.scaleStyle.scaleX,
+              y: this.scaleStyle.scaleY
             })
-            .padding(this.isRenderImage())
-            .width(300)
-            .height(300)
+            .width($r('app.integer.stack_icon_width'))
+            .height($r('app.integer.stack_icon_height'))
         }
         .width('100%')
-        .position({ y: -80 })
+        .position({ y: $r('app.integer.stack_column_position_y') })
 
         Stack() {
           Text("Hello World")
             .fontColor($r('app.color.text_color'))
             .fontWeight(FontWeight.Medium)
-            .fontSize(this.needRenderFontSize.fontSize)
-            .opacity(this.isRenderText())
-            .margin({ top: 12 })
+            .fontSize($r('app.integer.button_font_size'))
+            .margin({ top: $r('app.integer.text_margin_top') })
         }
-        .opacity(this.isRenderStack())
         .position({
-          x: this.needRenderPos.posX,
-          y: this.needRenderPos.posY
+          x: $r('app.integer.text_position_x'),
+          y: $r('app.integer.text_position_y')
         })
         .width('100%')
         .height('100%')
       }
-      .margin({ top: 50 })
-      .borderRadius(this.needRenderBorderRadius.borderRadius)
-      .opacity(this.isRenderStack())
+      .margin({ top: $r('app.integer.stack_margin_top') })
+      .borderRadius($r('app.integer.stack_border_radius'))
       .backgroundColor($r('app.color.stack_color'))
-      .width(this.needRenderSize.width)
-      .height(this.needRenderSize.height)
+      .width($r('app.integer.stack_width'))
+      .height($r('app.integer.stack_height'))
       .translate({
-        x: this.needRenderTranslate.translateX,
-        y: this.needRenderTranslate.translateY
+        x: this.translateStyle.translateX,
+        y: this.translateStyle.translateY
       })
 
+      // 通过按钮点击回调修改状态变量的值，引起相应的组件刷新
       Column() {
         Button("Move")
-          .width(312)
-          .fontSize(20)
+          .width($r('app.integer.button_width'))
+          .fontSize($r('app.integer.button_font_size'))
           .backgroundColor($r('app.color.button_color'))
-          .margin({ bottom: 10 })
+          .margin({ bottom: $r('app.integer.button_margin_bottom') })
           .onClick(() => {
             animateTo({
-              duration: 500
+              duration: animationDuration
             }, () => {
-              this.needRenderTranslate.translateY = (this.needRenderTranslate.translateY + 180) % 250;
+              this.translateStyle.translateY = (this.translateStyle.translateY + translateYChangeValue) % translateYChangeRange;
             })
           })
         Button("Scale")
-          .borderRadius(20)
           .backgroundColor($r('app.color.button_color'))
-          .fontSize(20)
-          .width(312)
-          .margin({ bottom: 10 })
+          .fontSize($r('app.integer.button_font_size'))
+          .width($r('app.integer.button_width'))
+          .margin({ bottom: $r('app.integer.button_margin_bottom') })
           .onClick(() => {
-            this.needRenderScale.scaleX = (this.needRenderScale.scaleX + 0.6) % 0.8;
+            this.scaleStyle.scaleX = (this.scaleStyle.scaleX + scaleXChangeValue) % scaleXChangeRange;
           })
         Button("Change Image")
-          .borderRadius(20)
           .backgroundColor($r('app.color.button_color'))
-          .fontSize(20)
-          .width(312)
+          .fontSize($r('app.integer.button_font_size'))
+          .width($r('app.integer.button_width'))
           .onClick(() => {
-            this.uiStyle.needRenderImage.imageWidth = (this.uiStyle.needRenderImage.imageWidth + 30) % 160;
-            this.uiStyle.needRenderImage.imageHeight = (this.uiStyle.needRenderImage.imageHeight + 30) % 160;
+            this.imageStyle.imageWidth =
+              (this.imageStyle.imageWidth + imageWidthChangeValue) % imageWidthChangeRange;
+            this.imageStyle.imageHeight =
+              (this.imageStyle.imageHeight + imageHeightChangeValue) % imageHeightChangeRange;
           })
       }
       .position({
-        y: 616
+        y: $r('app.integer.button_column_position_y')
       })
       .height('100%')
       .width('100%')
     }
-    .opacity(this.isRenderColumn())
     .width('100%')
     .height('100%')
   }
@@ -226,17 +207,10 @@ export struct DFXStateAfterOptimization {
 
   build() {
     Stack() {
-      CompA({
-        uiStyle: this.uiStyle,
-        needRenderTranslate: this.uiStyle.needRenderTranslate,
-        needRenderFontSize: this.uiStyle.needRenderFontSize,
-        needRenderBorderRadius: this.uiStyle.needRenderBorderRadius,
-        needRenderPos: this.uiStyle.needRenderPos,
-        needRenderSize: this.uiStyle.needRenderSize,
-        needRenderAlpha: this.uiStyle.needRenderAlpha,
-        needRenderScale: this.uiStyle.needRenderScale
+      ComponentA({
+        uiStyle: this.uiStyle
       })
     }
     .backgroundColor($r('app.color.stack_background'))
   }
-}
+}

code/Performance/PerformanceLibrary/feature/DFXStateManagement/src/main/ets/view/DFXStateBeforeOptimization.ets

@@ -13,198 +13,179 @@
  * limitations under the License.
  */
 
-class NeedRenderImage {
+const animationDuration: number = 500; // move动画时长
+const opacityChangeValue: number = 0.1; // opacity每次变化的值
+const opacityChangeRange: number = 1; // opacity变化的范围
+const translateYChangeValue: number = 180; // translateY每次变化的值
+const translateYChangeRange: number = 250; // translateY变化的范围
+const scaleXChangeValue: number = 0.6; // scaleX每次变化的值
+const scaleXChangeRange: number = 0.8; // scaleX每次变化的值
+const imageWidthChangeValue: number = 30; // imageWidth每次变化的值
+const imageWidthChangeRange: number = 160; // imageWidth每次变化的值
+const imageHeightChangeValue: number = 30; // imageHeight每次变化的值
+const imageHeightChangeRange: number = 160; // imageHeight每次变化的值
+
+// 图片样式类
+class ImageStyle {
   public translateImageX: number = 0;
   public translateImageY: number = 0;
   public imageWidth: number = 78;
   public imageHeight: number = 78;
 }
 
-class NeedRenderScale {
+// 嵌套ImageStyle类
+class ImageStyleContainer {
+  imageStyle: ImageStyle = new ImageStyle();
+}
+
+// 样式属性类
+class UIStyle {
+  imageStyle: ImageStyle = new ImageStyle();
+  public translateX: number = 0;
+  public translateY: number = 0;
   public scaleX: number = 0.3;
   public scaleY: number = 0.3;
 }
 
-class NeedRenderAlpha {
-  public alpha: number = 0.5;
-}
-
-class NeedRenderSize {
-  public width: number = 336;
-  public height: number = 178;
-}
-
-class NeedRenderPos {
-  public posX: number = 10;
-  public posY: number = 50;
-}
-
-class NeedRenderBorderRadius {
-  public borderRadius: number = 24;
-}
-
-class NeedRenderFontSize {
-  public fontSize: number = 20;
-}
-
-class NeedRenderTranslate {
-  public translateX: number = 0;
-  public translateY: number = 0;
-}
-
-class UIStyle {
-  needRenderTranslate: NeedRenderTranslate = new NeedRenderTranslate();
-  needRenderFontSize: NeedRenderFontSize = new NeedRenderFontSize();
-  needRenderBorderRadius: NeedRenderBorderRadius = new NeedRenderBorderRadius();
-  needRenderPos: NeedRenderPos = new NeedRenderPos();
-  needRenderSize: NeedRenderSize = new NeedRenderSize();
-  needRenderAlpha: NeedRenderAlpha = new NeedRenderAlpha();
-  needRenderScale: NeedRenderScale = new NeedRenderScale();
-  needRenderImage: NeedRenderImage = new NeedRenderImage();
-
-  constructor() {
-  }
-}
-
 @Component
-struct SpecialImage {
-  @Link uiStyle: UIStyle;
+struct SpecialImageA {
+  @Link specialImageAUiStyle: UIStyle;
+  private opacityNum: number = 1; // 默认透明度
 
   private isRenderSpecialImage(): number {
-    console.log("SpecialImage is rendered");
-    return 1;
+    // Image每次渲染时透明度增加0.1, 在0-1之间循环
+    this.opacityNum = (this.opacityNum + opacityChangeValue) % opacityChangeRange;
+    return this.opacityNum;
   }
 
   build() {
     Image($r('app.media.icon'))
-      .width(this.uiStyle.needRenderImage.imageWidth)
-      .height(this.uiStyle.needRenderImage.imageHeight)
-      .margin({ top: 20 })
-      .translate({
-        x: this.uiStyle.needRenderImage.translateImageX,
-        y: this.uiStyle.needRenderImage.translateImageY
+      .width($r('app.integer.special_image_width'))
+      .height($r('app.integer.special_image_width'))
+      .margin({ top: $r('app.integer.image_margin_top') })
+      .scale({
+        x: this.specialImageAUiStyle.scaleX,
+        y: this.specialImageAUiStyle.scaleY
       })
       .opacity(this.isRenderSpecialImage())
   }
 }
 
 @Component
-struct CompA {
-  @Prop uiStyle: UIStyle;
-  @Prop needRenderTranslate: NeedRenderTranslate;
-  @Prop needRenderFontSize: NeedRenderFontSize;
-  @Prop needRenderBorderRadius: NeedRenderBorderRadius;
-  @Prop needRenderPos: NeedRenderPos;
-  @Prop needRenderSize: NeedRenderSize;
-  @Prop needRenderAlpha: NeedRenderAlpha;
-  @Prop needRenderScale: NeedRenderScale;
+struct SpecialImageB {
+  @Link specialImageBStyleContainer: ImageStyleContainer;
+  private opacityNum: number = 1; // 默认透明度
 
-  private isRenderColumn(): number {
-    console.log("Column is rendered");
-    return 1;
-  }
-
-  private isRenderStack(): number {
-    console.log("Stack is rendered");
-    return 1;
-  }
-
-  private isRenderImage(): number {
-    console.log("Image is rendered");
-    return 1;
-  }
-
-  private isRenderText(): number {
-    console.log("Text is rendered");
-    return 1;
+  private isRenderSpecialImage(): number {
+    // Image每次渲染时透明度增加0.1, 在0-1之间循环
+    this.opacityNum = (this.opacityNum + opacityChangeValue) % opacityChangeRange;
+    return this.opacityNum;
   }
 
+  build() {
+    Image($r('app.media.icon'))
+      .width(this.specialImageBStyleContainer.imageStyle.imageWidth)
+      .height(this.specialImageBStyleContainer.imageStyle.imageHeight)
+      .margin({ top: $r('app.integer.image_margin_top') })
+      .translate({
+        x: this.specialImageBStyleContainer.imageStyle.translateImageX,
+        y: this.specialImageBStyleContainer.imageStyle.translateImageY
+      })
+      .opacity(this.isRenderSpecialImage())
+  }
+}
+
+@Component
+struct ComponentA {
+  @Prop uiStyle: UIStyle; // uiStyle的属性被多个组件使用
+  @State imageStyleContainer: ImageStyleContainer = new ImageStyleContainer(); // 传递给SpecialImageB中的Image使用
+
   build() {
     Column() {
-      SpecialImage({
-        uiStyle: this.uiStyle
+      // 使用状态变量的组件
+      SpecialImageA({
+        specialImageAUiStyle: this.uiStyle
+      })
+      SpecialImageB({
+        specialImageBStyleContainer: this.imageStyleContainer
       })
       Stack() {
         Column() {
           Image($r('app.media.icon'))
-            .opacity(this.needRenderAlpha.alpha)
+            .opacity($r('app.float.icon_opacity'))
             .scale({
-              x: this.needRenderScale.scaleX,
-              y: this.needRenderScale.scaleY
+              x: this.uiStyle.scaleX,
+              y: this.uiStyle.scaleY
             })
-            .padding(this.isRenderImage())
-            .width(300)
-            .height(300)
+            .width($r('app.integer.stack_icon_width'))
+            .height($r('app.integer.stack_icon_height'))
         }
         .width('100%')
-        .position({ y: -80 })
+        .position({ y: $r('app.integer.stack_column_position_y') })
 
         Stack() {
           Text("Hello World")
             .fontColor($r('app.color.text_color'))
             .fontWeight(FontWeight.Medium)
-            .fontSize(this.needRenderFontSize.fontSize)
-            .opacity(this.isRenderText())
-            .margin({ top: 12 })
+            .fontSize($r('app.integer.button_font_size'))
+            .margin({ top: $r('app.integer.text_margin_top') })
         }
-        .opacity(this.isRenderStack())
         .position({
-          x: this.needRenderPos.posX,
-          y: this.needRenderPos.posY
+          x: $r('app.integer.text_position_x'),
+          y: $r('app.integer.text_position_y')
         })
         .width('100%')
         .height('100%')
       }
-      .margin({ top: 50 })
-      .borderRadius(this.needRenderBorderRadius.borderRadius)
-      .opacity(this.isRenderStack())
+      .margin({ top: $r('app.integer.stack_margin_top') })
+      .borderRadius($r('app.integer.stack_border_radius'))
       .backgroundColor($r('app.color.stack_color'))
-      .width(this.needRenderSize.width)
-      .height(this.needRenderSize.height)
+      .width($r('app.integer.stack_width'))
+      .height($r('app.integer.stack_height'))
       .translate({
-        x: this.needRenderTranslate.translateX,
-        y: this.needRenderTranslate.translateY
+        x: this.uiStyle.translateX,
+        y: this.uiStyle.translateY
       })
 
+      // 通过按钮点击回调修改状态变量的值，引起相应的组件刷新
       Column() {
-        Button("Move")
-          .width(312)
-          .fontSize(20)
+        Button('Move')
+          .width($r('app.integer.button_width'))
+          .fontSize($r('app.integer.button_font_size'))
           .backgroundColor($r('app.color.button_color'))
-          .margin({ bottom: 10 })
+          .margin({ bottom: $r('app.integer.button_margin_bottom') })
           .onClick(() => {
             animateTo({
-              duration: 500
+              duration: animationDuration
             }, () => {
-              this.needRenderTranslate.translateY = (this.needRenderTranslate.translateY + 180) % 250;
+              this.uiStyle.translateY = (this.uiStyle.translateY + translateYChangeValue) % translateYChangeRange;
             })
           })
-        Button("Scale")
-          .borderRadius(20)
+        Button('Scale')
           .backgroundColor($r('app.color.button_color'))
-          .fontSize(20)
-          .width(312)
-          .margin({ bottom: 10 })
+          .fontSize($r('app.integer.button_font_size'))
+          .width($r('app.integer.button_width'))
+          .margin({ bottom: $r('app.integer.button_margin_bottom') })
           .onClick(() => {
-            this.needRenderScale.scaleX = (this.needRenderScale.scaleX + 0.6) % 0.8;
+            this.uiStyle.scaleX = (this.uiStyle.scaleX + scaleXChangeValue) % scaleXChangeRange;
           })
-        Button("Change Image")
-          .borderRadius(20)
+        Button('Change Image')
           .backgroundColor($r('app.color.button_color'))
-          .fontSize(20)
-          .width(312)
+          .fontSize($r('app.integer.button_font_size'))
+          .width($r('app.integer.button_width'))
           .onClick(() => {
-            this.uiStyle.needRenderImage.imageWidth = (this.uiStyle.needRenderImage.imageWidth + 30) % 160;
-            this.uiStyle.needRenderImage.imageHeight = (this.uiStyle.needRenderImage.imageHeight + 30) % 160;
+            this.imageStyleContainer.imageStyle.imageWidth =
+              (this.imageStyleContainer.imageStyle.imageWidth + imageWidthChangeValue) % imageWidthChangeRange;
+            this.imageStyleContainer.imageStyle.imageHeight =
+              (this.imageStyleContainer.imageStyle.imageHeight + imageHeightChangeValue) % imageHeightChangeRange;
           })
       }
       .position({
-        y: 616
+        y: $r('app.integer.button_column_position_y')
       })
       .height('100%')
       .width('100%')
     }
-    .opacity(this.isRenderColumn())
     .width('100%')
     .height('100%')
   }
@@ -216,19 +197,10 @@ export struct DFXStateBeforeOptimization {
 
   build() {
     Stack() {
-      CompA({
-        uiStyle: this.uiStyle,
-        needRenderTranslate: this.uiStyle.needRenderTranslate,
-        needRenderFontSize: this.uiStyle.needRenderFontSize,
-        needRenderBorderRadius: this.uiStyle.needRenderBorderRadius,
-        needRenderPos: this.uiStyle.needRenderPos,
-        needRenderSize: this.uiStyle.needRenderSize,
-        needRenderAlpha: this.uiStyle.needRenderAlpha,
-        needRenderScale: this.uiStyle.needRenderScale
+      ComponentA({
+        uiStyle: this.uiStyle
       })
     }
     .backgroundColor($r('app.color.stack_background'))
   }
-}
-
-
+}

code/Performance/PerformanceLibrary/feature/DFXStateManagement/src/main/resources/base/element/float.json

@@ -0,0 +1,8 @@
+{
+  "float": [
+    {
+      "name": "icon_opacity",
+      "value": "0.5"
+    }
+  ]
+}

code/Performance/PerformanceLibrary/feature/DFXStateManagement/src/main/resources/base/element/integer.json

@@ -0,0 +1,76 @@
+{
+  "integer": [
+    {
+      "name": "special_image_width",
+      "value": 78
+    },
+    {
+      "name": "special_image_height",
+      "value": 78
+    },
+    {
+      "name": "image_margin_top",
+      "value": 20
+    },
+    {
+      "name": "stack_icon_width",
+      "value": 300
+    },
+    {
+      "name": "stack_icon_height",
+      "value": 300
+    },
+    {
+      "name": "stack_column_position_y",
+      "value": -80
+    },
+    {
+      "name": "text_position_x",
+      "value": 10
+    },
+    {
+      "name": "text_position_y",
+      "value": 50
+    },
+    {
+      "name": "text_margin_top",
+      "value": 12
+    },
+    {
+      "name": "stack_margin_top",
+      "value": 50
+    },
+    {
+      "name": "stack_border_radius",
+      "value": 24
+    },
+    {
+      "name": "stack_width",
+      "value": 336
+    },
+    {
+      "name": "stack_height",
+      "value": 178
+    },
+    {
+      "name": "button_width",
+      "value": 312
+    },
+    {
+      "name": "button_font_size",
+      "value": 20
+    },
+    {
+      "name": "button_margin_bottom",
+      "value": 10
+    },
+    {
+      "name": "button_column_position_y",
+      "value": 616
+    },
+    {
+      "name": "button_move_animation_duration",
+      "value": 500
+    }
+  ]
+}

code/Performance/PerformanceLibrary/feature/DFXStateManagement/src/main/resources/en_US/element/string.json

@@ -1,8 +0,0 @@
-{
-  "string": [
-    {
-      "name": "page_show",
-      "value": "page from npm package"
-    }
-  ]
-}

code/Performance/PerformanceLibrary/feature/DFXStateManagement/src/main/resources/zh_CN/element/string.json

@@ -1,8 +0,0 @@
-{
-  "string": [
-    {
-      "name": "page_show",
-      "value": "page from npm package"
-    }
-  ]
-}

code/Performance/PerformanceLibrary/feature/ThreadCommunication/Index.ets

@@ -13,9 +13,9 @@
  * limitations under the License.
  */
 
-export { Scenario_1 } from './src/main/ets/pages/Scenario_1'
-export { Scenario_2 } from './src/main/ets/pages/Scenario_2'
-export { Scenario_3 } from './src/main/ets/pages/Scenario_3'
-export { Scenario_4 } from './src/main/ets/pages/Scenario_4'
-export { Scenario_5 } from './src/main/ets/pages/Scenario_5'
-export { ThreadCommunicationHomePage } from './src/main/ets/pages/ThreadCommunicationHomePage'
+export { IndependentTask } from './src/main/ets/pages/IndependentTask';
+export { MultiTask } from './src/main/ets/pages/MultiTask';
+export { TaskSendDataUsage } from './src/main/ets/pages/TaskSendDataUsage';
+export { WorkerUsage } from './src/main/ets/pages/WorkerUsage';
+export { WorkerCallGlobalUsage } from './src/main/ets/pages/WorkerCallGlobalUsage';
+export { ThreadCommunicationHomePage } from './src/main/ets/pages/ThreadCommunicationHomePage';

code/Performance/PerformanceLibrary/feature/ThreadCommunication/src/main/ets/pages/IconItemSource.ets

@@ -13,6 +13,7 @@
  * limitations under the License.
  */
 
+// 图片显示类，用于存储图片和对应的文字数据
 export class IconItemSource {
   image: string | Resource = '';
   text: string | Resource = '';

code/Performance/PerformanceLibrary/feature/ThreadCommunication/src/main/ets/pages/IndependentTask.ets

@@ -36,7 +36,7 @@ function loadPicture(count: number): IconItemSource[] {
 }
 
 @Component
-export struct Scenario_1 {
+export struct IndependentTask {
   @State iconItemSourceList: IconItemSource[] = [];
 
   build() {
@@ -78,8 +78,8 @@ export struct Scenario_1 {
         })
         .onClick(() => {
           let lodePictureTask: taskpool.Task = new taskpool.Task(loadPicture, 30);
-          taskpool.execute(lodePictureTask).then((res: IconItemSource[]) => {
-            this.iconItemSourceList = res;
+          taskpool.execute(lodePictureTask).then((res: Object) => {
+            this.iconItemSourceList = res as IconItemSource[];
           })
         })
       if (this.iconItemSourceList.length > 0) {

code/Performance/PerformanceLibrary/feature/ThreadCommunication/src/main/ets/pages/MultiTask.ets

@@ -36,7 +36,7 @@ function loadPicture(count: number): IconItemSource[] {
 }
 
 @Component
-export struct Scenario_2 {
+export struct MultiTask {
   @State iconItemSourceList: IconItemSource[] = [];
 
   build() {
@@ -81,10 +81,11 @@ export struct Scenario_2 {
           taskGroup.addTask(new taskpool.Task(loadPicture, 30));
           taskGroup.addTask(new taskpool.Task(loadPicture, 20));
           taskGroup.addTask(new taskpool.Task(loadPicture, 10));
-          taskpool.execute(taskGroup).then((ret: IconItemSource[][]) => {
+          taskpool.execute(taskGroup).then((ret: Object[]) => {
             for (let i = 0; i < ret.length; i++) {
-              for (let j = 0; j < ret[i].length; j++) {
-                this.iconItemSourceList.push(ret[i][j]);
+              let iconItems: IconItemSource[] = (ret[i] as IconItemSource[]);
+              for (let j = 0; j < iconItems.length; j++) {
+                this.iconItemSourceList.push(iconItems[j] as IconItemSource);
               }
             }
           })

code/Performance/PerformanceLibrary/feature/ThreadCommunication/src/main/ets/pages/TaskSendDataUsage.ets

@@ -19,6 +19,8 @@ import { IconItem } from './IconView';
 import { IconItemSource } from './IconItemSource';
 import Logger from '../util/Logger';
 
+const LOAD_SUCCESS: string = getContext().resourceManager.getStringSync($r('app.string.process_success'));
+
 @Concurrent
 function loadPicture(count: number): IconItemSource[] {
   let iconItemSourceList: IconItemSource[] = [];
@@ -38,11 +40,11 @@ function loadPicture(count: number): IconItemSource[] {
 }
 
 function notice(data: number): void {
-  Logger.info(`子线程任务已执行完，共加载图片: ${data}}`);
+  Logger.info(LOAD_SUCCESS + data);
 }
 
 @Component
-export struct Scenario_3 {
+export struct TaskSendDataUsage {
   @State iconItemSourceList: IconItemSource[] = [];
 
   build() {
@@ -85,8 +87,8 @@ export struct Scenario_3 {
         .onClick(() => {
           let lodePictureTask: taskpool.Task = new taskpool.Task(loadPicture, 30);
           lodePictureTask.onReceiveData(notice);
-          taskpool.execute(lodePictureTask).then((res: IconItemSource[]) => {
-            this.iconItemSourceList = res;
+          taskpool.execute(lodePictureTask).then((res: Object) => {
+            this.iconItemSourceList = res as IconItemSource[];
           })
         })
       if (this.iconItemSourceList.length > 0) {

code/Performance/PerformanceLibrary/feature/ThreadCommunication/src/main/ets/pages/ThreadCommunicationHomePage.ets

@@ -38,7 +38,7 @@ export struct ThreadCommunicationHomePage {
       })
 
       Button($r('app.string.scenario_1'), { type: ButtonType.Normal, stateEffect: true })
-        .id('Scenario 1')
+        .id('Scenario_1')
         .fontSize(14)
         .borderRadius(8)
         .backgroundColor(Color.Blue)
@@ -49,12 +49,12 @@ export struct ThreadCommunicationHomePage {
         })
         .onClick(() => {
           router.pushUrl({
-            url: 'pages/ThreadCommunication/Scenario_1'
+            url: 'pages/ThreadCommunication/IndependentTaskPage'
           })
         })
 
       Button($r('app.string.scenario_2'), { type: ButtonType.Normal, stateEffect: true })
-        .id('Scenario 2')
+        .id('Scenario_2')
         .fontSize(14)
         .borderRadius(8)
         .backgroundColor(Color.Blue)
@@ -65,12 +65,12 @@ export struct ThreadCommunicationHomePage {
         })
         .onClick(() => {
           router.pushUrl({
-            url: 'pages/ThreadCommunication/Scenario_2'
+            url: 'pages/ThreadCommunication/MultiTaskPage'
           })
         })
 
       Button($r('app.string.scenario_3'), { type: ButtonType.Normal, stateEffect: true })
-        .id('Scenario 4')
+        .id('Scenario_3')
         .fontSize(14)
         .borderRadius(8)
         .backgroundColor(Color.Blue)
@@ -81,12 +81,12 @@ export struct ThreadCommunicationHomePage {
         })
         .onClick(() => {
           router.pushUrl({
-            url: 'pages/ThreadCommunication/Scenario_3'
+            url: 'pages/ThreadCommunication/TaskSendDataUsagePage'
           })
         })
 
       Button($r('app.string.scenario_4'), { type: ButtonType.Normal, stateEffect: true })
-        .id('Scenario 5')
+        .id('Scenario_4')
         .fontSize(14)
         .borderRadius(8)
         .backgroundColor(Color.Blue)
@@ -97,12 +97,12 @@ export struct ThreadCommunicationHomePage {
         })
         .onClick(() => {
           router.pushUrl({
-            url: 'pages/ThreadCommunication/Scenario_4'
+            url: 'pages/ThreadCommunication/WorkerUsagePage'
           })
         })
 
       Button($r('app.string.scenario_5'), { type: ButtonType.Normal, stateEffect: true })
-        .id('Scenario 3')
+        .id('Scenario_5')
         .fontSize(14)
         .borderRadius(8)
         .backgroundColor(Color.Blue)
@@ -113,7 +113,7 @@ export struct ThreadCommunicationHomePage {
         })
         .onClick(() => {
           router.pushUrl({
-            url: 'pages/ThreadCommunication/Scenario_5'
+            url: 'pages/ThreadCommunication/WorkerCallGlobalUsagePage'
           })
         })
     }

code/Performance/PerformanceLibrary/feature/ThreadCommunication/src/main/ets/pages/WorkerCallGlobalUsage.ets

@@ -38,7 +38,7 @@ class PicData {
 }
 
 @Component
-export struct Scenario_5 {
+export struct WorkerCallGlobalUsage {
   @State iconItemSourceList: IconItemSource[] = [];
   private workerInstance: worker.ThreadWorker | undefined = undefined;
   private message: string = "run setUp in picData";

code/Performance/PerformanceLibrary/feature/ThreadCommunication/src/main/ets/pages/WorkerUsage.ets

@@ -19,7 +19,7 @@ import { IconItem } from './IconView';
 import { IconItemSource } from './IconItemSource';
 
 @Component
-export struct Scenario_4 {
+export struct WorkerUsage {
   @State iconItemSourceList: IconItemSource[] = [];
   private workerInstance: worker.ThreadWorker | undefined = undefined;
 

code/Performance/PerformanceLibrary/feature/ThreadCommunication/src/main/ets/util/Logger.ets

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2022-2023 Huawei Device Co., Ltd.
+ * Copyright (c) 2024 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

code/Performance/PerformanceLibrary/feature/ThreadCommunication/src/main/resources/base/element/string.json

@@ -47,6 +47,10 @@
     {
       "name": "change_image_number",
       "value": "将图片变成4个"
+    },
+    {
+      "name": "process_success",
+      "value": "子线程任务已执行完，共加载图片:"
     }
   ]
 }

code/Performance/PerformanceLibrary/feature/ThreadCommunication/src/main/resources/en_US/element/string.json

@@ -47,6 +47,10 @@
     {
       "name": "change_image_number",
       "value": "将图片变成4个"
+    },
+    {
+      "name": "process_success",
+      "value": "子线程任务已执行完，共加载图片:"
     }
   ]
 }

code/Performance/PerformanceLibrary/feature/ThreadCommunication/src/main/resources/zh_CN/element/string.json

@@ -47,6 +47,10 @@
     {
       "name": "change_image_number",
       "value": "将图片变成4个"
+    },
+    {
+      "name": "process_success",
+      "value": "子线程任务已执行完，共加载图片:"
     }
   ]
 }

code/Performance/PerformanceLibrary/feature/ThreadCommunication/src/test/List.test.ets

@@ -1,5 +0,0 @@
-import localUnitTest from './LocalUnit.test';
-
-export default function testsuite() {
-  localUnitTest()
-}

code/Performance/PerformanceLibrary/feature/ThreadCommunication/src/test/LocalUnit.test.ets

@@ -1,33 +0,0 @@
-import { describe, beforeAll, beforeEach, afterEach, afterAll, it, expect } from '@ohos/hypium';
-
-export default function localUnitTest() {
-  describe('localUnitTest', function () {
-    // Defines a test suite. Two parameters are supported: test suite name and test suite function.
-    beforeAll(function () {
-      // Presets an action, which is performed only once before all test cases of the test suite start.
-      // This API supports only one parameter: preset action function.
-    });
-    beforeEach(function () {
-      // Presets an action, which is performed before each unit test case starts.
-      // The number of execution times is the same as the number of test cases defined by **it**.
-      // This API supports only one parameter: preset action function.
-    });
-    afterEach(function () {
-      // Presets a clear action, which is performed after each unit test case ends.
-      // The number of execution times is the same as the number of test cases defined by **it**.
-      // This API supports only one parameter: clear action function.
-    });
-    afterAll(function () {
-      // Presets a clear action, which is performed after all test cases of the test suite end.
-      // This API supports only one parameter: clear action function.
-    });
-    it('assertContain', 0, function () {
-      // Defines a test case. This API supports three parameters: test case name, filter parameter, and test case function.
-      let a = 'abc';
-      let b = 'b';
-      // Defines a variety of assertion methods, which are used to declare expected boolean conditions.
-      expect(a).assertContain(b);
-      expect(a).assertEqual(a);
-    });
-  });
-}

code/Performance/PerformanceLibrary/feature/ThreadDataTransfer/oh-package.json5

@@ -1,3 +1,18 @@
+/*
+ * 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.
+ */
+
 {
   "license": "Apache-2.0",
   "devDependencies": {},

code/Performance/PerformanceLibrary/feature/ThreadDataTransfer/src/main/ets/utils/TreadUtil.ets

@@ -37,11 +37,11 @@ export async function pixelMapProcessByTaskPool(pixelMap: image.PixelMap, lastAd
     taskPoolGroup.addTask(createImageTask(arrayBufferSlice, lastAdjustData, currentAdjustData, isParamsByTransfer));
   }
   let start: number = new Date().getTime();
-  taskpool.execute(taskPoolGroup).then((data: ArrayBuffer[]) => {
+  taskpool.execute(taskPoolGroup).then((data: Object[]) => {
     if (callback !== undefined) {
-      let end : number = new Date().getTime();
-      AppStorage.set<String>('timeCost', util.format('%s s', ((end - start) / 60).toFixed(2).toString()));
-      callback(concatenateArrayBuffers(data));
+      let end: number = new Date().getTime();
+      AppStorage.set<String>('timeCost', util.format('%s s', ((end - start) / 1000).toFixed(2).toString()));
+      callback(concatenateArrayBuffers(data as ArrayBuffer[]));
     }
   }).catch((e: BusinessError) => {
     Logger.error(e.message);

code/Performance/PerformanceLibrary/feature/WaterFlow/oh-package.json5

@@ -1,3 +1,18 @@
+/*
+ * 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.
+ */
+
 {
   "license": "Apache-2.0",
   "devDependencies": {},

code/Performance/PerformanceLibrary/feature/nativeThreadsCallJS/build-profile.json5

@@ -19,7 +19,8 @@
     "externalNativeOptions": {
       "path": "./src/main/cpp/CMakeLists.txt",
       "arguments": "",
-      "cppFlags": ""
+      "cppFlags": "",
+      "abiFilters": ["armeabi-v7a"]
     },
   },
   "buildOptionSet": [

code/Performance/PerformanceLibrary/feature/nativeThreadsCallJS/oh-package.json5

@@ -1,3 +1,18 @@
+/*
+ * Copyright (c) 2024 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.
+ */
+
 {
   "license": "Apache-2.0",
   "devDependencies": {},

code/Performance/PerformanceLibrary/oh-package-lock.json5

@@ -1,3 +1,18 @@
+/*
+ * 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.
+ */
+
 {
   "lockfileVersion": 1,
   "ATTENTION": "THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.",

code/Performance/PerformanceLibrary/product/phone/entry/src/main/ets/pages/ThreadCommunication/IndependentTaskPage.ets

@@ -13,14 +13,14 @@
  * limitations under the License.
  */
 
-import { Scenario_2 } from '@ohos/ThreadCommunication';
+import { IndependentTask } from '@ohos/ThreadCommunication';
 
 @Entry
 @Component
-struct Scenario_2_Page {
+struct IndependentTaskPage {
   build() {
     Column() {
-      Scenario_2()
+      IndependentTask()
     }
   }
 }

code/Performance/PerformanceLibrary/product/phone/entry/src/main/ets/pages/ThreadCommunication/MultiTaskPage.ets

@@ -13,14 +13,14 @@
  * limitations under the License.
  */
 
-import { Scenario_1 } from '@ohos/ThreadCommunication';
+import { MultiTask } from '@ohos/ThreadCommunication';
 
 @Entry
 @Component
-struct Scenario_1_Page {
+struct MultiTaskPage {
   build() {
     Column() {
-      Scenario_1()
+      MultiTask()
     }
   }
 }

code/Performance/PerformanceLibrary/product/phone/entry/src/main/ets/pages/ThreadCommunication/TaskSendDataUsagePage.ets

@@ -13,14 +13,14 @@
  * limitations under the License.
  */
 
-import { Scenario_3 } from '@ohos/ThreadCommunication';
+import { TaskSendDataUsage } from '@ohos/ThreadCommunication';
 
 @Entry
 @Component
-struct Scenario_3_Page {
+struct TaskSendDataUsagePage {
   build() {
     Column() {
-      Scenario_3()
+      TaskSendDataUsage()
     }
   }
 }

code/Performance/PerformanceLibrary/product/phone/entry/src/main/ets/pages/ThreadCommunication/WorkerCallGlobalUsagePage.ets

@@ -13,17 +13,17 @@
  * limitations under the License.
  */
 
-import { Scenario_5 } from '@ohos/ThreadCommunication';
+import { WorkerCallGlobalUsage } from '@ohos/ThreadCommunication';
 import worker from '@ohos.worker';
 
 const workerInstance = new worker.ThreadWorker("entry/ets/pages/ThreadCommunication/workers/Worker.ts");
 
 @Entry
 @Component
-struct Scenario_5_Page {
+struct WorkerCallGlobalUsagePage {
   build() {
     Column() {
-      Scenario_5({workerInstance:workerInstance});
+      WorkerCallGlobalUsage({workerInstance:workerInstance});
     }
   }
 }

code/Performance/PerformanceLibrary/product/phone/entry/src/main/ets/pages/ThreadCommunication/WorkerUsagePage.ets

@@ -13,17 +13,17 @@
  * limitations under the License.
  */
 
-import { Scenario_4 } from '@ohos/ThreadCommunication';
+import { WorkerUsage } from '@ohos/ThreadCommunication';
 import worker from '@ohos.worker';
 
 const workerInstance = new worker.ThreadWorker("entry/ets/pages/ThreadCommunication/workers/Worker.ts");
 
 @Entry
 @Component
-struct Scenario_4_Page {
+struct WorkerUsagePage {
   build() {
     Column() {
-      Scenario_4({ workerInstance: workerInstance });
+      WorkerUsage({ workerInstance: workerInstance });
     }
   }
 }

code/Performance/PerformanceLibrary/product/phone/entry/src/main/ets/pages/ThreadCommunication/workers/Worker.ts

@@ -1,3 +1,18 @@
+/*
+ * Copyright (c) 2024 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 worker, { MessageEvents, ThreadWorkerGlobalScope } from '@ohos.worker';
 
 const workerPort: ThreadWorkerGlobalScope = worker.workerPort;

code/Performance/PerformanceLibrary/product/phone/entry/src/main/resources/base/profile/main_pages.json

@@ -43,10 +43,10 @@
     "pages/DFXStateManagement/DFXStateBeforeOptimizationPage",
     "pages/DFXStateManagement/DFXStateAfterOptimizationPage",
     "pages/ThreadCommunication/ThreadCommunicationHomePage",
-    "pages/ThreadCommunication/Scenario_1",
-    "pages/ThreadCommunication/Scenario_2",
-    "pages/ThreadCommunication/Scenario_3",
-    "pages/ThreadCommunication/Scenario_4",
-    "pages/ThreadCommunication/Scenario_5"
+    "pages/ThreadCommunication/IndependentTaskPage",
+    "pages/ThreadCommunication/MultiTaskPage",
+    "pages/ThreadCommunication/TaskSendDataUsagePage",
+    "pages/ThreadCommunication/WorkerUsagePage",
+    "pages/ThreadCommunication/WorkerCallGlobalUsagePage"
   ]
 }

code/Performance/PerformanceLibrary/product/phone/entry/src/ohosTest/ets/test/Ability.test.ets

@@ -603,10 +603,12 @@ export default function abilityTest() {
       await btnAccept.click();
       await driver.delayMs(3000);
       // 获取定位权限
-      await driver.assertComponentExist(ON.text(await getResourceString($r('app.string.permission_while_use'))));
       let locAcceptBtn = await driver.findComponent(ON.text(await getResourceString($r('app.string.permission_while_use'))));
-      await locAcceptBtn.click();
-      await driver.delayMs(1000);
+      await driver.delayMs(500);
+      if (locAcceptBtn !== null) {
+        await locAcceptBtn.click();
+        await driver.delayMs(1000);
+      }
       // 点击开启定位服务
       let startLocationBtn: Component = await driver.findComponent(ON.text('开启定位服务'));
       await driver.delayMs(500);
@@ -765,7 +767,9 @@ export default function abilityTest() {
       await driver.pressBack();
       done();
     })
-
+    /**
+     * 主线程和子线程通信
+     */
     it(BUNDLE + "ThreadCommunication_001", 1, async (done: Function) => {
       Logger.info(TAG, `${BUNDLE}ThreadCommunication_001 begin`);
       let driver: Driver = Driver.create();
@@ -776,31 +780,50 @@ export default function abilityTest() {
       await driver.delayMs(500);
       await threadHome.click();
       await driver.delayMs(1000);
-      await driver.assertComponentExist(ON.text(getContext().resourceManager.getStringSync($r('app.string.thread_communication'))));
+      await driver.assertComponentExist(ON.text(getContext()
+        .resourceManager
+        .getStringSync($r('app.string.thread_communication'))));
       await driver.delayMs(200);
-      await driver.assertComponentExist(ON.text(getContext().resourceManager.getStringSync($r('app.string.scenario_1'))));
+      await driver.assertComponentExist(ON.text(getContext()
+        .resourceManager
+        .getStringSync($r('app.string.scenario_1'))));
       await driver.delayMs(200);
-      await driver.assertComponentExist(ON.text(getContext().resourceManager.getStringSync($r('app.string.scenario_2'))));
+      await driver.assertComponentExist(ON.text(getContext()
+        .resourceManager
+        .getStringSync($r('app.string.scenario_2'))));
       await driver.delayMs(200);
-      await driver.assertComponentExist(ON.text(getContext().resourceManager.getStringSync($r('app.string.scenario_3'))));
+      await driver.assertComponentExist(ON.text(getContext()
+        .resourceManager
+        .getStringSync($r('app.string.scenario_3'))));
       await driver.delayMs(200);
-      await driver.assertComponentExist(ON.text(getContext().resourceManager.getStringSync($r('app.string.scenario_4'))));
+      await driver.assertComponentExist(ON.text(getContext()
+        .resourceManager
+        .getStringSync($r('app.string.scenario_4'))));
       await driver.delayMs(200);
-      await driver.assertComponentExist(ON.text(getContext().resourceManager.getStringSync($r('app.string.scenario_5'))));
+      await driver.assertComponentExist(ON.text(getContext()
+        .resourceManager
+        .getStringSync($r('app.string.scenario_5'))));
       await driver.delayMs(200);
       Logger.info(TAG, `${BUNDLE}ThreadCommunication_001 end`);
       done();
     })
 
+    /**
+     * 独立的耗时任务测试用例
+     */
     it(BUNDLE + "ThreadCommunication_002", 1, async (done: Function) => {
       Logger.info(TAG, `${BUNDLE}ThreadCommunication_002 begin`);
       let driver: Driver = Driver.create();
       await driver.delayMs(500);
-      let scenario: Component = await driver.findComponent(ON.text(getContext().resourceManager.getStringSync($r('app.string.scenario_1'))));
+      let scenario: Component = await driver.findComponent(ON.text(getContext()
+        .resourceManager
+        .getStringSync($r('app.string.scenario_1'))));
       await driver.delayMs(500);
       await scenario.click();
       await driver.delayMs(1000);
-      let loadImage: Component = await driver.findComponent(ON.text(getContext().resourceManager.getStringSync($r('app.string.load_image'))));
+      let loadImage: Component = await driver.findComponent(ON.text(getContext()
+        .resourceManager
+        .getStringSync($r('app.string.load_image'))));
       await driver.delayMs(500);
       await loadImage.click();
       await driver.delayMs(1000);
@@ -809,15 +832,22 @@ export default function abilityTest() {
       done();
     })
 
+    /**
+     * 多个任务执行结果统一返回测试用例
+     */
     it(BUNDLE + "ThreadCommunication_003", 1, async (done: Function) => {
       Logger.info(TAG, `${BUNDLE}ThreadCommunication_003 begin`);
       let driver: Driver = Driver.create();
       await driver.delayMs(500);
-      let scenario: Component = await driver.findComponent(ON.text(getContext().resourceManager.getStringSync($r('app.string.scenario_2'))));
+      let scenario: Component = await driver.findComponent(ON.text(getContext()
+        .resourceManager
+        .getStringSync($r('app.string.scenario_2'))));
       await driver.delayMs(500);
       await scenario.click();
       await driver.delayMs(1000);
-      let loadImage: Component = await driver.findComponent(ON.text(getContext().resourceManager.getStringSync($r('app.string.load_image'))));
+      let loadImage: Component = await driver.findComponent(ON.text(getContext()
+        .resourceManager
+        .getStringSync($r('app.string.load_image'))));
       await driver.delayMs(500);
       await loadImage.click();
       await driver.delayMs(1000);
@@ -826,15 +856,22 @@ export default function abilityTest() {
       done();
     })
 
+    /**
+     * TaskPool和主线程的即时通信测试用例
+     */
     it(BUNDLE + "ThreadCommunication_004", 1, async (done: Function) => {
       Logger.info(TAG, `${BUNDLE}ThreadCommunication_004 begin`);
       let driver: Driver = Driver.create();
       await driver.delayMs(500);
-      let scenario: Component = await driver.findComponent(ON.text(getContext().resourceManager.getStringSync($r('app.string.scenario_3'))));
+      let scenario: Component = await driver.findComponent(ON.text(getContext()
+        .resourceManager
+        .getStringSync($r('app.string.scenario_3'))));
       await driver.delayMs(500);
       await scenario.click();
       await driver.delayMs(1000);
-      let loadImage: Component = await driver.findComponent(ON.text(getContext().resourceManager.getStringSync($r('app.string.load_image'))));
+      let loadImage: Component = await driver.findComponent(ON.text(getContext()
+        .resourceManager
+        .getStringSync($r('app.string.load_image'))));
       await driver.delayMs(500);
       await loadImage.click();
       await driver.delayMs(1000);
@@ -843,15 +880,22 @@ export default function abilityTest() {
       done();
     })
 
+    /**
+     * Worker和主线程的即时通信测试用例
+     */
     it(BUNDLE + "ThreadCommunication_005", 1, async (done: Function) => {
       Logger.info(TAG, `${BUNDLE}ThreadCommunication_005 begin`);
       let driver: Driver = Driver.create();
       await driver.delayMs(500);
-      let scenario: Component = await driver.findComponent(ON.text(getContext().resourceManager.getStringSync($r('app.string.scenario_4'))));
+      let scenario: Component = await driver.findComponent(ON.text(getContext()
+        .resourceManager
+        .getStringSync($r('app.string.scenario_4'))));
       await driver.delayMs(500);
       await scenario.click();
       await driver.delayMs(1000);
-      let loadImage: Component = await driver.findComponent(ON.text(getContext().resourceManager.getStringSync($r('app.string.change_image_number'))));
+      let loadImage: Component = await driver.findComponent(ON.text(getContext()
+        .resourceManager
+        .getStringSync($r('app.string.change_image_number'))));
       await driver.delayMs(500);
       await loadImage.click();
       await driver.delayMs(1000);
@@ -860,15 +904,22 @@ export default function abilityTest() {
       done();
     })
 
+    /**
+     * 子线程同步调用主线程的接口测试用例
+     */
     it(BUNDLE + "ThreadCommunication_006", 1, async (done: Function) => {
       Logger.info(TAG, `${BUNDLE}ThreadCommunication_006 begin`);
       let driver: Driver = Driver.create();
       await driver.delayMs(500);
-      let scenario: Component = await driver.findComponent(ON.text(getContext().resourceManager.getStringSync($r('app.string.scenario_5'))));
+      let scenario: Component = await driver.findComponent(ON.text(getContext()
+        .resourceManager
+        .getStringSync($r('app.string.scenario_5'))));
       await driver.delayMs(500);
       await scenario.click();
       await driver.delayMs(1000);
-      let loadImage: Component = await driver.findComponent(ON.text(getContext().resourceManager.getStringSync($r('app.string.load_image'))));
+      let loadImage: Component = await driver.findComponent(ON.text(getContext()
+        .resourceManager
+        .getStringSync($r('app.string.load_image'))));
       await driver.delayMs(500);
       await loadImage.click();
       await driver.delayMs(1000);
@@ -879,6 +930,9 @@ export default function abilityTest() {
       done();
     })
 
+    /**
+     * 线程间大数据传输测试用例
+     */
     it(BUNDLE + "ThreadDataTransfer_001", 1, async (done: Function) => {
       Logger.info(TAG, `${BUNDLE}ThreadDataTransfer_001 begin`);
       let driver: Driver = Driver.create();
@@ -912,7 +966,7 @@ export default function abilityTest() {
       let slider: Component = await driver.findComponent(ON.id('thread_transfer_data_slider'));
       await driver.delayMs(500);
       await slider.click();
-      await driver.delayMs(5000);
+      await driver.delayMs(70000);
       await driver.pressBack();
       await driver.delayMs(500);
       Logger.info(TAG, `${BUNDLE}ThreadDataTransfer_001 end`);

code/Performance/PerformanceLibrary/product/phone/entry/src/ohosTest/resources/base/element/string.json

@@ -12,14 +12,14 @@
       "name": "TestAbility_label",
       "value": "test label"
     },
-    {
-      "name": "MemoryShared",
-      "value": "MemoryShared"
-    },
     {
       "name": "permission_while_use",
       "value": "仅使用期间允许"
     },
+    {
+      "name": "MemoryShared",
+      "value": "MemoryShared"
+    },
     {
       "name": "atomic_operation",
       "value": "原子操作对比"

code/Solutions/Tools/ArkTSClock/entry/src/main/ets/pages/Index.ets

@@ -91,6 +91,7 @@ struct Clock {
       let y = Math.sin(rad) * (this.radius - 38)
       this.context.fillText(num, x, y)
     })
+    this.context.restore()
 
     // 绘制刻度
     for (let i = 0; i < 60; i++) {
@@ -114,6 +115,7 @@ struct Clock {
       }
       this.context.stroke()
     }
+    this.context.restore()
   }
 
   // 绘制时针

code/SuperFeature/DistributedAppDev/DistributedJotNote/entry/src/ohosTest/ets/testrunner/OpenHarmonyTestRunner.ts

@@ -1,3 +1,18 @@
+/*
+ * Copyright (c) 2024 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 hilog from '@ohos.hilog';
 import TestRunner from '@ohos.application.testRunner';
 import AbilityDelegatorRegistry from '@ohos.app.ability.abilityDelegatorRegistry';

code/UI/ArkTsComponentCollection/ComponentCollection/README_zh.md

@@ -230,6 +230,12 @@ entry/src/main/ets/
 |   |   |   |   |---NavigatorThirdPage.ets
 |   |   |   |---navigationSample
 |   |   |   |   |---NavigationSample.ets                 // 导航根容器
+|   |   |   |   |---NavigationBasic.ets                  // 导航基础属性展示
+|   |   |   |   |---ListExpandSafeArea.ets               // 滚动组件避让导航条
+|   |   |   |   |---NavigationSplit.ets               	 // 导航分栏模式
+|   |   |   |   |---BindSheetSafeArea.ets                // BindSheet键盘避让
+|   |   |   |   |---NavigationSideBar.ets                // 导航分栏鼠标样式
+|   |   |   |   |---NavigationExpandSafeArea.ets         // 导航组件避让导航条
 |   |   |   |---navRouterSample
 |   |   |   |   |---NavRouterSample.ets                  // 导航
 |   |   |   |---stepperAndStepperItemSample
@@ -313,6 +319,10 @@ entry/src/main/ets/
 |   |   |   |   |---TextPickerDialogSample.ets           // 文本滑动选择器弹窗
 |   |   |   |---menuSample
 |   |   |   |   |---MenuSample.ets                       // 菜单
+|   |   |   |---bindSheetSample
+|   |   |   |   |---BindSheetSample.ets                  // 半模态
+|   |   |   |---popUpSample
+|   |   |   |   |---PopUpSample.ets                      // Popup
 |   |---universal                                        // 详情页面
 |   |   |---UniversialData.ets
 |   |   |---events
@@ -410,7 +420,7 @@ entry/src/main/ets/
 |   |   |   |   |---TransformSample.ets                  // 变换矩阵
 |   |   |   |---translateSample
 |   |   |   |   |---TranslateSample.ets                  // 图像变换
-``` 
+```
 
 ### 具体实现
 
@@ -485,6 +495,19 @@ entry/src/main/ets/
         * 弹窗
             * 使用全局组件ShowToast，TitleBar，IntroductionTitle实现弹窗组件页面
             * 使用getStringArrayData，getStringData获取数据[ResourceDataHandle.ets](entry/src/main/ets/data/ResourceDataHandle.ets)
+            
+        * 半模态
+        
+            * 使用全局组件TitleBar，IntroductionTitle实现半模态组件页面
+            * 接口参考：[bindSheet](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-sheet-transition.md)
+        
+        * Popup
+        
+            * 使用全局组件TitleBar，IntroductionTitle实现Popup组件页面
+        
+            * 接口参考：[bindPopup ](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md)，[Popup高级组件](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ohos-arkui-advanced-popup.md)
+        
+              
 
 ### 相关权限
 

code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/informationPresentationAndDynamicEffects/textclockSample/TextClockSample.ets

@@ -51,7 +51,9 @@ import { getStringData } from '../../../../data/ResourceDataHandle'
 struct TextClockSample {
   @State format: string = 'HH:mm:ss'
   @State accumulateTime: number = 0
-  controller: TextClockController = new TextClockController()
+  @State fontFeature: string = 'ss01';
+  @State textShadows: ShadowOptions | Array<ShadowOptions> = [];
+  controller: TextClockController = new TextClockController();
 
   build() {
     Column() {
@@ -63,6 +65,8 @@ struct TextClockSample {
           .format(this.format)
           .margin(20)
           .fontSize(30)
+          .textShadow(this.textShadows)
+          .fontFeature(this.fontFeature)
         Row() {
           Button($r('app.string.text_clock_start')).onClick(() => {
             this.controller.start()
@@ -133,7 +137,52 @@ struct TextClockSample {
       .cardStyle()
       .width('100%')
 
-    }.height('100%')
+      Text($r('app.string.textclock_style'))
+        .leftTitleStyle()
+      Column() {
+        Row() {
+          Text($r('app.string.text_clock_textShadow'))
+            .leftTitleStyle()
+            .width('50%')
+          Blank()
+          Toggle({ type: ToggleType.Switch, isOn: false })
+            .id('text_shadow')
+            .onChange((isOn: boolean) => {
+              if (isOn) {
+                this.textShadows = [{ radius: 10, color: Color.Green, offsetX: 10, offsetY: 0 }];
+              } else {
+                this.textShadows = [{ radius: 0, color: Color.White, offsetX: 0, offsetY: 0 }];
+              }
+            })
+        }
+        .width('100%')
+        .height(50)
+
+        Row() {
+          Text($r('app.string.text_clock_fontSetting'))
+            .leftTitleStyle()
+            .width('50%')
+          Blank()
+          Select([{ value: $r('app.string.text_clock_monospaced_numbers') },
+            { value: $r('app.string.text_clock_monovolume_numbers') }])
+            .id('font_setting')
+            .selected(0)
+            .value($r('app.string.text_clock_select_button'))
+            .onSelect((index: number) => {
+              if (index === 0) {
+                this.fontFeature = 'ss01';
+              } else if (index === 1) {
+                this.fontFeature = 'ss02';
+              }
+            })
+
+        }.width('100%')
+        .height(50)
+      }
+      .cardStyle()
+      .width('100%')
+    }
+    .height('100%')
     .width('100%')
     .backgroundColor($r('app.color.background_light_gray'))
     .padding({ left: 20, right: 20 })

code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/listAndGrid/gridItemSample/GridItemControlPanel.ets

@@ -21,6 +21,7 @@ export struct PropertiesControlPanel {
   @Link rowEnd: number;
   @Link columnStart: number;
   @Link columnEnd: number;
+  @Link gridItemStyle: number;
 
   build() {
     Column() {
@@ -59,6 +60,20 @@ export struct PropertiesControlPanel {
         },
         testId: `griditem_004`
       })
+
+      // polymorphic styles
+      CommonItemSelect({
+        name: $r('app.string.grid_item_polymorphic_styles'),
+        selects: ['plain', 'none'],
+        callback: (index, value) => {
+          if (value === 'plain') {
+            this.gridItemStyle = 1;
+          } else if (value == 'none') {
+            this.gridItemStyle = 0;
+          }
+        },
+        testId: 'gridItem_style'
+      })
     }
   }
 }

code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/listAndGrid/gridItemSample/GridItemSample.ets

@@ -30,7 +30,6 @@ import { PropertiesControlPanel } from './GridItemControlPanel';
   .width('100%')
   .height('100%')
   .textAlign(TextAlign.Center)
-  .backgroundColor($r('app.color.background_blue'))
 }
 
 @Entry
@@ -40,6 +39,7 @@ struct GridItemSample {
   @State rowEnd: number = 0;
   @State columnStart: number = 0;
   @State columnEnd: number = 0;
+  @State gridItemStyle: number = 0;
   private itemsText: string[] = [];
 
   aboutToAppear() {
@@ -57,19 +57,33 @@ struct GridItemSample {
         Grid() {
           ForEach(this.itemsText, (item: string, index: number) => {
             if (index === 0) {
-              GridItem() {
-                Text(item)
-                  .itemStyle()
+              if (this.gridItemStyle === 0) {
+                GridItem({ style: GridItemStyle.NONE }) {
+                  Text(item)
+                    .itemStyle()
+                }
+                .rowStart(this.rowStart)
+                .rowEnd(this.rowEnd)
+                .columnStart(this.columnStart)
+                .columnEnd(this.columnEnd)
+                .backgroundColor($r('app.color.background_blue'))
+              } else {
+                GridItem({ style: GridItemStyle.PLAIN }) {
+                  Text(item)
+                    .itemStyle()
+                }
+                .rowStart(this.rowStart)
+                .rowEnd(this.rowEnd)
+                .columnStart(this.columnStart)
+                .columnEnd(this.columnEnd)
+                .backgroundColor($r('app.color.background_blue'))
               }
-              .rowStart(this.rowStart)
-              .rowEnd(this.rowEnd)
-              .columnStart(this.columnStart)
-              .columnEnd(this.columnEnd)
             } else {
-              GridItem() {
+              GridItem({ style: GridItemStyle.NONE }) {
                 Text(item)
                   .itemStyle()
               }
+              .backgroundColor($r('app.color.background_blue'))
             }
           })
         }
@@ -94,7 +108,8 @@ struct GridItemSample {
               rowStart: $rowStart,
               rowEnd: $rowEnd,
               columnStart: $columnStart,
-              columnEnd: $columnEnd
+              columnEnd: $columnEnd,
+              gridItemStyle: $gridItemStyle
             })
           }
           .backgroundStyle()

code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/navigation/navigationSample/BindSheetSafeArea.ets

@@ -0,0 +1,59 @@
+/*
+ * Copyright (c) 2024 Shenzhen Kaihong Digital Industry Development 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 { TitleBar } from '../../../../common/TitleBar';
+
+@Entry
+@Component
+struct BindSheetSafeArea {
+  @State isShow: boolean = true;
+
+  @Builder myBuilder() {
+    Column() {
+      TextInput({ placeholder: 'Hint' })
+        .position({ x: 0, y: 200 })
+        .type(InputType.Password)
+        .height(40)
+    }
+    .width('87%')
+  }
+
+  build() {
+    Column() {
+      TitleBar({ title: $r('app.string.navigation_bindsheet_title') })
+      Button("show bindSheet")
+        .onClick(() => {
+          this.isShow = true;
+        })
+        .fontSize(20)
+        .margin(10)
+        .visibility(Visibility.Hidden)
+        .bindSheet($$this.isShow, this.myBuilder(), {
+          detents: [SheetSize.MEDIUM],
+          backgroundColor: Color.White,
+          blurStyle: BlurStyle.Thick,
+          showClose: true,
+          title: { title: 'Title' },
+          preferType: SheetType.CENTER,
+          shouldDismiss: ((sheetDismiss: SheetDismiss) => {
+            sheetDismiss.dismiss();
+          })
+        })
+    }
+    .justifyContent(FlexAlign.Start)
+    .width('100%')
+    .height('100%')
+  }
+}

code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/navigation/navigationSample/ListExpandSafeArea.ets

@@ -0,0 +1,68 @@
+/*
+ * Copyright (c) 2024 Shenzhen Kaihong Digital Industry Development 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 { TitleBar } from '../../../../common/TitleBar';
+
+@Entry
+@Component
+struct ListExpandSafeArea {
+  private counts: number[] = [];
+  @State expand: boolean = false;
+
+  aboutToAppear() {
+    for (let i = 0; i < 20; i++) {
+      this.counts.push(i);
+    }
+  }
+
+  build() {
+    Column() {
+      TitleBar({ title: $r('app.string.navigation_list_expand_title') })
+      Button() {
+        Text($r('app.string.navigation_expand'))
+          .height(28)
+          .fontSize(12)
+          .borderRadius(14)
+      }
+      .width('88%')
+      .margin({ bottom: '2%' })
+      .backgroundColor(this.expand ? $r('app.color.button_default_bg_color') : $r('app.color.background_grey'))
+      .onClick(() => {
+        this.expand = !this.expand;
+      })
+
+      List({ space: 12, initialIndex: 0 }) {
+        ForEach(this.counts, () => {
+          ListItem() {
+            Row() {
+              Text('Single list')
+                .fontSize(16)
+            }
+            .height(48)
+            .margin({ left: 24 })
+          }
+        })
+      }
+      .backgroundColor(Color.White)
+      .borderRadius(24)
+      .height('88%')
+      .width('93%')
+      .padding({ top: '5%' })
+      .expandSafeArea(this.expand ? [SafeAreaType.SYSTEM] : [], this.expand ? [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM] : [])
+    }
+    .height('100%')
+    .width('100%')
+    .backgroundColor($r('app.color.background_shallow_grey'))
+  }
+}

code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/navigation/navigationSample/NavigationBasic.ets

@@ -0,0 +1,145 @@
+/*
+ * Copyright (c) 2023-2024 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 { TitleBar } from '../../../../common/TitleBar';
+import { LEFT_PADDING, RIGHT_PADDING } from '../../ComponentData';
+
+@Entry
+@Component
+struct NavigationBasic {
+  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+  @State currentIndex: number = 0;
+  @State Build: Array<BuildType> = [
+    {
+      text: 'add',
+      num: 0
+    },
+    {
+      text: 'app',
+      num: 1
+    },
+    {
+      text: 'collect',
+      num: 2
+    }
+  ];
+
+  @Builder NavigationTitle() {
+    Column() {
+      Text('Title')
+        .fontColor('#182431')
+        .fontSize(30)
+        .lineHeight(41)
+        .fontWeight(700)
+      Text('subtitle')
+        .fontColor('#182431')
+        .fontSize(14)
+        .lineHeight(19)
+        .opacity(0.4)
+        .margin({ top: 2, bottom: 20 })
+    }.alignItems(HorizontalAlign.Start)
+  }
+
+  @Builder NavigationMenus() {
+    Row() {
+      Image($r('app.media.icon'))
+        .width(24)
+        .height(24)
+      Image($r('app.media.icon'))
+        .width(24)
+        .height(24)
+        .margin({ left: 24 })
+      Image($r('app.media.icon'))
+        .width(24)
+        .height(24)
+        .margin({ left: 24 })
+    }
+  }
+
+  @Builder NavigationToolbar() {
+    Row() {
+      ForEach(this.Build, (item: BuildType) => {
+        Column() {
+          Image(this.currentIndex === item.num ? $r('app.media.icon') : $r('app.media.ic_pen'))
+            .width(24)
+            .height(24)
+          Text(item.text)
+            .fontColor(this.currentIndex === item.num ? '#007DFF' : '#182431')
+            .fontSize(10)
+            .lineHeight(14)
+            .fontWeight(500)
+            .margin({ top: 3 })
+        }.width(104).height(56)
+        .onClick(() => {
+          this.currentIndex = item.num
+        })
+      })
+    }.width('100%').justifyContent(FlexAlign.SpaceEvenly)
+  }
+
+  build() {
+    Column() {
+      TitleBar({ title: $r('app.string.navigation_title') })
+      Column() {
+        Navigation() {
+          TextInput({ placeholder: 'search...' })
+            .width('90%')
+            .height(40)
+            .backgroundColor('#FFFFFF')
+            .margin({ top: 8 })
+            .enableKeyboardOnFocus(false)
+
+          List({ space: 12, initialIndex: 0 }) {
+            ForEach(this.arr, (item: number) => {
+              ListItem() {
+                Text('' + item)
+                  .width('90%')
+                  .height(72)
+                  .backgroundColor('#FFFFFF')
+                  .borderRadius(24)
+                  .fontSize(16)
+                  .fontWeight(500)
+                  .textAlign(TextAlign.Center)
+              }.editable(true)
+            }, (item: number) => item.toString())
+          }
+          .height(324)
+          .width('100%')
+          .margin({ top: 12, left: '10%' })
+        }
+        .title(this.NavigationTitle)
+        .menus(this.NavigationMenus)
+        .titleMode(NavigationTitleMode.Full)
+        .toolbarConfiguration(this.NavigationToolbar)
+        .hideTitleBar(false)
+        .hideToolBar(false)
+        .mode(NavigationMode.Stack)
+        .onTitleModeChange((titleModel: NavigationTitleMode) => {
+          console.info('titleMode' + titleModel)
+        })
+        .width('100%')
+        .height('90%')
+      }
+      .padding({ left: LEFT_PADDING, right: RIGHT_PADDING })
+    }.height('100%')
+    .width('100%')
+    .backgroundColor($r('app.color.background_shallow_grey'))
+  }
+}
+
+class BuildType {
+  text: string = '';
+  num: number = 0;
+}

code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/navigation/navigationSample/NavigationExpandSafeArea.ets

@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) 2024 Shenzhen Kaihong Digital Industry Development 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 { TitleBar } from '../../../../common/TitleBar';
+
+@Entry
+@Component
+struct NavigationExpandSafeArea {
+  @State expand: boolean = false;
+
+  build() {
+    Column() {
+      TitleBar({ title: $r('app.string.navigation_expand_title') })
+      Button() {
+        Text($r('app.string.navigation_unexpand'))
+          .height(28)
+          .fontSize(12)
+          .borderRadius(14)
+      }
+      .width('88%')
+      .margin({ bottom: '2%' })
+      .backgroundColor(this.expand ? $r('app.color.background_grey') : $r('app.color.button_default_bg_color'))
+      .onClick(() => {
+        this.expand = !this.expand;
+      })
+
+      Navigation()
+        .hideTitleBar(true)
+        .backgroundColor(Color.White)
+        .borderRadius(24)
+        .height('88%')
+        .width('93%')
+        .expandSafeArea(this.expand ? [SafeAreaType.SYSTEM] : [], this.expand ? [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM] : [])
+    }
+    .height('100%')
+    .width('100%')
+    .backgroundColor($r('app.color.background_shallow_grey'))
+  }
+}

code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/navigation/navigationSample/NavigationSample.ets

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Copyright (c) 2023-2024 Shenzhen Kaihong Digital Industry Development 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
@@ -15,129 +15,46 @@
 
 import { TitleBar } from '../../../../common/TitleBar';
 import { LEFT_PADDING, RIGHT_PADDING } from '../../ComponentData';
+import router from '@ohos.router';
 
 @Entry
 @Component
 struct NavigationSample {
-  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
-  @State currentIndex: number = 0;
-  @State Build: Array<BuildType> = [
-    {
-      text: 'add',
-      num: 0
-    },
-    {
-      text: 'app',
-      num: 1
-    },
-    {
-      text: 'collect',
-      num: 2
-    }
+  private pages: PageInfo[] = [
+    { name: 'Navigation基本功能', url: 'pages/components/navigation/navigationSample/NavigationBasic' },
+    { name: '滚动组件延伸底部导航条', url: 'pages/components/navigation/navigationSample/ListExpandSafeArea' },
+    { name: 'Split模式动画演示', url: 'pages/components/navigation/navigationSample/NavigationSplit' },
+    { name: 'Bindsheet避让键盘', url: 'pages/components/navigation/navigationSample/BindSheetSafeArea' },
+    { name: '分栏的鼠标样式', url: 'pages/components/navigation/navigationSample/NavigationSideBar' },
+    { name: '避让底部导航条', url: 'pages/components/navigation/navigationSample/NavigationExpandSafeArea' }
   ];
 
-  @Builder NavigationTitle() {
-    Column() {
-      Text('Title')
-        .fontColor('#182431')
-        .fontSize(30)
-        .lineHeight(41)
-        .fontWeight(700)
-      Text('subtitle')
-        .fontColor('#182431')
-        .fontSize(14)
-        .lineHeight(19)
-        .opacity(0.4)
-        .margin({ top: 2, bottom: 20 })
-    }.alignItems(HorizontalAlign.Start)
-  }
-
-  @Builder NavigationMenus() {
-    Row() {
-      Image($r('app.media.icon'))
-        .width(24)
-        .height(24)
-      Image($r('app.media.icon'))
-        .width(24)
-        .height(24)
-        .margin({ left: 24 })
-      Image($r('app.media.icon'))
-        .width(24)
-        .height(24)
-        .margin({ left: 24 })
-    }
-  }
-
-  @Builder NavigationToolbar() {
-    Row() {
-      ForEach(this.Build, (item: BuildType) => {
-        Column() {
-          Image(this.currentIndex === item.num ? $r('app.media.icon') : $r('app.media.ic_pen'))
-            .width(24)
-            .height(24)
-          Text(item.text)
-            .fontColor(this.currentIndex === item.num ? '#007DFF' : '#182431')
-            .fontSize(10)
-            .lineHeight(14)
-            .fontWeight(500)
-            .margin({ top: 3 })
-        }.width(104).height(56)
-        .onClick(() => {
-          this.currentIndex = item.num
-        })
-      })
-    }.width('100%').justifyContent(FlexAlign.SpaceEvenly)
-  }
-
   build() {
     Column() {
-      TitleBar({ title: $r('app.string.navigation_title') })
+      TitleBar({ title: $r('app.string.navigation_title') });
       Column() {
-        Navigation() {
-          TextInput({ placeholder: 'search...' })
+        ForEach(this.pages, (item: PageInfo) => {
+          Button(item.name)
             .width('90%')
             .height(40)
-            .backgroundColor('#FFFFFF')
-            .margin({ top: 8 })
-            .enableKeyboardOnFocus(false)
-
-          List({ space: 12, initialIndex: 0 }) {
-            ForEach(this.arr, (item: number) => {
-              ListItem() {
-                Text('' + item)
-                  .width('90%')
-                  .height(72)
-                  .backgroundColor('#FFFFFF')
-                  .borderRadius(24)
-                  .fontSize(16)
-                  .fontWeight(500)
-                  .textAlign(TextAlign.Center)
-              }.editable(true)
-            }, (item: number) => item.toString())
-          }
-          .height(324)
-          .width('100%')
-          .margin({ top: 12, left: '10%' })
-        }
-        .title(this.NavigationTitle)
-        .menus(this.NavigationMenus)
-        .titleMode(NavigationTitleMode.Full)
-        .toolbarConfiguration(this.NavigationToolbar)
-        .hideTitleBar(false)
-        .hideToolBar(false)
-        .mode(NavigationMode.Stack)
-        .onTitleModeChange((titleModel: NavigationTitleMode) => {
-          console.info('titleMode' + titleModel)
-        }).width('100%')
-        .height('90%')
+            .backgroundColor('#007DFF')
+            .borderRadius(20)
+            .fontSize(16)
+            .fontWeight(500)
+            .fontColor($r('app.color.white'))
+            .margin({ top: 12 })
+            .onClick(() => {
+              router.pushUrl({ url: item.url })
+            })
+        });
       }
-      .padding({ left: LEFT_PADDING, right: RIGHT_PADDING })
     }.height('100%')
     .width('100%')
     .backgroundColor($r('app.color.background_shallow_grey'))
   }
 }
-class BuildType {
-  text: string = '';
-  num: number = 0;
+
+class PageInfo {
+  name: string = '';
+  url: string = '';
 }

code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/navigation/navigationSample/NavigationSideBar.ets

@@ -0,0 +1,112 @@
+/*
+ * Copyright (c) 2024 Shenzhen Kaihong Digital Industry Development 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 { TitleBar } from '../../../../common/TitleBar';
+import router from '@ohos.router';
+
+@Entry
+@Component
+struct NavigationSideBar {
+  navarray: number[] = [1, 2, 3];
+  contentarray: number[] = [1, 2, 3, 4];
+  @State expand: boolean = false;
+  @State selectnav: number = -1;
+
+  build() {
+    Column() {
+      Navigation() {
+        TitleBar({ title: $r('app.string.navigation_sidebar_title') })
+        Column() {
+          ForEach(this.navarray, (navidx: number) => {
+            NavRouter() {
+              Row() {
+                Text($r('app.string.navigation_navbar_list', navidx))
+                  .fontSize(16)
+                Blank()
+                Image($r('app.media.ic_right_arrow'))
+                  .objectFit(ImageFit.ScaleDown)
+                  .height(22)
+              }
+              .height(48)
+              .padding(13)
+              .width('90%')
+              .borderRadius(24)
+              .backgroundColor(this.selectnav === navidx ? 0x007DFF : Color.Transparent)
+
+              NavDestination() {
+                Row() {
+                  Image($r('app.media.ic_back'))
+                    .width(20)
+                    .height(20)
+                    .margin({ left: 26 })
+                    .objectFit(ImageFit.Contain)
+                    .onClick(() => {
+                      router.back()
+                    })
+                  Text($r('app.string.navigation_navbar_list', navidx))
+                    .fontSize(20)
+                    .layoutWeight(1)
+                    .margin({ left: 16 })
+                    .align(Alignment.Start)
+                  Blank()
+                }
+                .height(56)
+                .width('100%')
+
+                List() {
+                  ForEach(this.contentarray, (contentidx: number) => {
+                    ListItem() {
+                      Row() {
+                        Text($r('app.string.navigation_navcontent_list', contentidx))
+                          .fontSize(16)
+                        Blank()
+                        Image($r('app.media.ic_right_arrow'))
+                          .objectFit(ImageFit.ScaleDown)
+                          .height(22)
+                      }
+                      .height(48)
+                      .padding({ top: 13, bottom: 13 })
+                      .width('100%')
+                    }
+                  })
+                }
+                .borderRadius('24')
+                .backgroundColor(Color.White)
+                .width('95%')
+                .padding(12)
+              }
+              .hideTitleBar(true)
+              .backgroundColor($r('app.color.background_shallow_grey'))
+              .onShown(() => {
+                this.selectnav = navidx;
+              })
+            }
+          })
+        }
+        .backgroundColor(Color.White)
+        .borderRadius(24)
+        .padding(5)
+      }
+      .hideTitleBar(true)
+      .mode(NavigationMode.Split)
+      .navBarWidthRange([100, 800])
+      .minContentWidth(100)
+      .width('100%')
+      .height('90%')
+    }
+    .height('100%')
+    .width('100%')
+    .backgroundColor($r('app.color.background_shallow_grey'))
+  }
+}

code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/navigation/navigationSample/NavigationSplit.ets

@@ -0,0 +1,110 @@
+/*
+ * Copyright (c) 2024 Shenzhen Kaihong Digital Industry Development 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 { TitleBar } from '../../../../common/TitleBar';
+
+@Entry
+@Component
+struct NavigationSplit {
+  navarray: number[] = [1, 2, 3];
+  contentarray: number[] = [1, 2, 3, 4];
+  @State expand: boolean = false;
+  @State selectnav: number = -1;
+  @Provide('pageInfos') pageInfos: NavPathStack = new NavPathStack();
+  private context: Context = getContext(this);
+
+  @Builder
+  PageMap(name: string, listIndex: number) {
+    this.pageList({ names: name, values: this.pageInfos, listIndex: listIndex });
+  }
+
+  @Builder
+  pageList(info: Pages) {
+    NavDestination() {
+      List() {
+        ForEach(this.contentarray, (contentidx: number) => {
+          ListItem() {
+            Row() {
+              Text($r('app.string.navigation_navcontent_list', contentidx))
+                .fontSize(16)
+              Blank()
+              Image($r('app.media.ic_right_arrow'))
+                .objectFit(ImageFit.ScaleDown)
+                .height(22)
+            }
+            .height(48)
+            .padding({ top: 13, bottom: 13 })
+            .width('100%')
+          }
+        })
+      }
+      .borderRadius('24')
+      .backgroundColor(Color.White)
+      .width('95%')
+      .padding(12)
+    }
+    .title(this.context.resourceManager.getStringSync($r('app.string.navigation_navbar_list_nopara')) + info.listIndex)
+    .backgroundColor($r('app.color.background_shallow_grey'))
+    .onBackPressed(() => {
+      (info.values as NavPathStack).pop();
+      return true;
+    })
+  }
+
+  build() {
+    Column() {
+      Navigation(this.pageInfos) {
+        TitleBar({ title: $r('app.string.navigation_split_title') })
+        Column() {
+          ForEach(this.navarray, (navidx: number) => {
+            Row() {
+              Text($r('app.string.navigation_navbar_list', navidx))
+                .fontSize(16)
+              Blank()
+              Image($r('app.media.ic_right_arrow'))
+                .objectFit(ImageFit.ScaleDown)
+                .height(22)
+            }
+            .height(48)
+            .padding(13)
+            .width('90%')
+            .borderRadius(24)
+            .backgroundColor(this.selectnav === navidx ? 0x007DFF : Color.Transparent)
+            .onClick(() => {
+              this.selectnav = navidx;
+              this.pageInfos.pushPath({ name: `List${navidx}`, param: navidx });
+            })
+          })
+        }
+        .backgroundColor(Color.White)
+        .borderRadius(24)
+        .padding(5)
+      }
+      .hideTitleBar(true)
+      .navDestination(this.PageMap)
+      .mode(NavigationMode.Split)
+      .width('100%')
+      .height('90%')
+    }
+    .height('100%')
+    .width('100%')
+    .backgroundColor($r('app.color.background_shallow_grey'))
+  }
+}
+
+class Pages {
+  names: string = "";
+  values: NavPathStack | null = null;
+  listIndex: number = 0;
+}

code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/textAndInput/textAreaSample/TextAreaSample.ets

@@ -34,6 +34,7 @@ struct TextAreaSample {
   @State textAlign: TextAlign = TextAlign.Start;
   @State caretColor: Color = Color.Blue;
   @State copyOptions: CopyOptions = CopyOptions.None;
+  @State isLimit: boolean = false;
   controller: TextAreaController = new TextAreaController();
 
   build() {
@@ -59,6 +60,8 @@ struct TextAreaSample {
             .height(80)
             .fontSize(20)
             .enableKeyboardOnFocus(false)
+            .maxLength(100)
+            .showCounter(this.isLimit, { thresholdPercentage: 1, highlightBorder: true })
             .onChange(() => {
               ShowToast.shortToast('The input have changed.')
             })
@@ -77,9 +80,25 @@ struct TextAreaSample {
               placeholderColor: $placeholderColor,
               textAlign: $textAlign,
               caretColor: $caretColor,
-              copyOption: $copyOptions
+              copyOption: $copyOptions,
             })
           }.cardStyle()
+
+          Row() {
+            Text($r('app.string.textarea_character_limit'))
+            Blank()
+            Toggle({ type: ToggleType.Switch, isOn: this.isLimit })
+              .onChange((isOn) => {
+                this.isLimit = isOn;
+              })
+              .id('textarea_character_limit')
+          }
+          .width('100%')
+          .borderRadius(24)
+          .height(56)
+          .backgroundColor(Color.White)
+          .padding({ left: 12, right: 18 })
+          .margin({ left: 12, right: 12, top: 12 })
         }
         .width('100%')
       }

code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/textAndInput/textInputSample/TextInputSample.ets

@@ -18,9 +18,13 @@ import { IntroductionTitle } from '../../../../common/IntroductionTitle';
 import ShowToast from '../../../../util/ShowToast';
 import Logger from '../../../../util/Logger';
 import { TitleBar } from '../../../../common/TitleBar';
+import pasteboard from '@ohos.pasteboard';
+import promptAction from '@ohos.promptAction';
+import { BusinessError } from '@ohos.base';
 
-@Extend(Column)
-function backgroundStyle() {
+const DURATION: number = 200000;
+
+@Extend(Column) function backgroundStyle() {
   .width('100%')
   .padding(12)
   .borderRadius(24)
@@ -42,11 +46,94 @@ struct TextInputSample {
   @State endSelect: number = 0;
   @State maxSelect: number = 0;
   @State selects: string[] = ['0'];
+  @State message: string = 'Hint';
+  @State chooseContents: string = '';
+  @State selectedStart: number = 0;
+  @State selectedEnd: number = 0;
   private select: number = 1;
   private maxLength: number = 12;
   private context: Context = getContext(this);
   private inputController: TextInputController = new TextInputController();
   private inputSelectController: TextInputController = new TextInputController();
+  textInputController: TextInputController = new TextInputController();
+  textController: TextController = new TextController();
+  options: TextOptions = { controller: this.textController };
+
+  @Builder LongPressImageCustomMenu() {
+    Row() {
+      Text($r('app.string.text_input_text_copy'))
+        .fontSize(16)
+        .margin({ left: 18, right: 24, top: 10, bottom: 11 })
+        .onClick(() => {
+          let pasteData: pasteboard.PasteData = pasteboard.createData(pasteboard.MIMETYPE_TEXT_PLAIN, this.chooseContents);
+          let systemPasteboard: pasteboard.SystemPasteboard = pasteboard.getSystemPasteboard();
+          try {
+            systemPasteboard.setDataSync(pasteData);
+          } catch (err) {
+            Logger.error('Failed to set PasteData. Cause:' + err.message);
+          };
+
+          try {
+            promptAction.showToast({
+              message: $r('app.string.text_input_text_copy_success'),
+              duration: DURATION
+            });
+          } catch (error) {
+            let message = (error as BusinessError).message;
+            let code = (error as BusinessError).code;
+            Logger.error('showToast args error code is ' + code + 'message is' + message);
+          };
+          this.textController.closeSelectionMenu();
+        })
+      Text($r('app.string.text_input_text_paste'))
+        .fontSize(16)
+        .margin({ top: 10, bottom: 11 })
+        .onClick(() => {
+          let systemPasteboard: pasteboard.SystemPasteboard = pasteboard.getSystemPasteboard();
+          try {
+            let result: pasteboard.PasteData = systemPasteboard.getDataSync();
+            let plainText: string = result.getPrimaryText();
+
+            this.message = this.message.substring(0, this.selectedStart) + plainText +
+              this.message.substring(this.selectedEnd, this.message.length);
+
+          } catch (err) {
+            Logger.error('Failed to get PasteData. Cause:' + err.message);
+          };
+
+          try {
+            promptAction.showToast({
+              message: $r('app.string.text_input_text_paste_success'),
+              duration: DURATION
+            });
+          } catch (error) {
+            let message = (error as BusinessError).message;
+            let code = (error as BusinessError).code;
+            Logger.error('showToast args error code is ' + code + 'message is' + message);
+          };
+          this.textController.closeSelectionMenu();
+        })
+
+      Text($r('app.string.text_input_text_get'))
+        .fontSize(16)
+        .margin({ left: 24, right: 18, top: 10, bottom: 11 })
+        .onClick(() => {
+          try {
+            promptAction.showToast({
+              message: this.chooseContents,
+              duration: DURATION
+            });
+          } catch (error) {
+            let message = (error as BusinessError).message;
+            let code = (error as BusinessError).code;
+            Logger.error('showToast args error code is ' + code + 'message is' + message);
+          };
+          this.textController.closeSelectionMenu();
+        })
+    }
+    .backgroundColor('#FFFFFF')
+    .borderRadius(24)
+  }
 
   build() {
     Column() {
@@ -251,10 +338,47 @@ struct TextInputSample {
               })
           }
           .backgroundStyle()
-          .margin({ bottom: 70 })
+            // 文本选择菜单
+            IntroductionTitle({ introduction: $r('app.string.text_input_text_selection_menu') })
+
+            Column() {
+              Row() {
+                Text(undefined, this.options) {
+                  Span(this.message)
+                }
+                .id('text_hint')
+                .copyOption(CopyOptions.InApp)
+                .bindSelectionMenu(TextSpanType.TEXT, this.LongPressImageCustomMenu, TextResponseType.LONG_PRESS)
+                .onTextSelectionChange((selectionStart: number, selectionEnd: number) => {
+                  this.selectedStart = selectionStart;
+                  this.selectedEnd = selectionEnd;
+                  this.chooseContents = this.message.substring(selectionStart, selectionEnd);
+                })
+                .margin({ left: 12 })
+              }
+              .width(432)
+              .height(40)
+              .backgroundColor($r('app.color.background_shallow_grey'))
+              .borderRadius(20)
+            }
+            .backgroundStyle()
+
+            // 文本删除
+            IntroductionTitle({ introduction: $r('app.string.text_input_text_delete') })
+            Column() {
+              TextInput({ placeholder: 'input ...', controller: this.textInputController })
+                .id('text_delete')
+                .borderRadius(20)
+                .cancelButton({
+                  style: CancelButtonStyle.CONSTANT
+                })
+            }
+            .backgroundStyle()
+            .margin({ bottom: 70 })
         }
         .constraintSize({ minHeight: '100%' }) // Let the minHeight of the component cover screen at least
       }
+      .id('input_scroll')
       .height('100%')
       .padding({ left: 12, right: 12 })
     }

code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/globalMethods/GlobalMethodData.ets

@@ -53,5 +53,20 @@ const MENU: ThirdLevelCategory =
     title: $r('app.string.global_menu'),
     url: 'pages/globalMethods/dialogs/menuSample/MenuSample',
   }
+
+const BINDSHEET: ThirdLevelCategory =
+  {
+    image: $r('app.media.ic_bindSheet'),
+    title: $r('app.string.global_bindSheet_menu'),
+    url: 'pages/globalMethods/dialogs/bindSheetSample/BindSheetSample',
+  }
+
+const POPUP: ThirdLevelCategory =
+  {
+    image: $r('app.media.ic_popUp'),
+    title: $r('app.string.global_popUp_menu'),
+    url: 'pages/globalMethods/dialogs/popUpSample/PopUpSample',
+  }
+
 // The global method categorizes data, second menu data
-export const GLOBAL_METHOD_CATEGORIES: ThirdLevelCategory[] = [DIALOG,MENU]
+export const GLOBAL_METHOD_CATEGORIES: ThirdLevelCategory[] = [DIALOG,MENU, BINDSHEET, POPUP]

code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/globalMethods/dialogs/bindSheetSample/BindSheetSample.ets

@@ -0,0 +1,341 @@
+/*
+* Copyright (c) 2024 Shenzhen Kaihong Digital Industry Development 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 { TitleBar } from '../../../../common/TitleBar'
+import { IntroductionTitle } from '../../../../common/IntroductionTitle'
+import promptAction from '@ohos.promptAction';
+import { BusinessError } from '@ohos.base';
+import Logger from '../../../../util/Logger';
+
+// 自定义半模态页面高度
+const SIZE: number = 200;
+
+@Extend(Text) function textStyle() {
+  .fontFamily('HarmonyHeiTi-Medium')
+  .fontSize(16)
+  .fontColor('#182431')
+  .textAlign(TextAlign.Start)
+  .lineHeight(22)
+  .fontWeight(500)
+}
+
+interface SheetSizes {
+  medium: boolean;
+  large: boolean;
+  size200: boolean;
+}
+
+@Entry
+@Component
+struct BindSheetSample {
+  @State isShow: boolean = false
+  @State showDragBar: boolean = true;
+  @State enableOutsideInteractive: boolean = true;
+  @State popStyle: number = SheetType.BOTTOM;
+  @State showClose: boolean = true;
+  @State blurStyle: BlurStyle = BlurStyle.NONE;
+  @State detentsArray: number[] = [];
+  @State detents: [(SheetSize | Length), (SheetSize | Length)?, (SheetSize | Length)?] = [SheetSize.MEDIUM, SIZE];
+  @State mediumSelected: boolean = true;
+  @State largeSelected: boolean = false;
+  @State size200Selected: boolean = true;
+  @State mediumText: string = 'Medium';
+  @State largeText: string = 'Large';
+  @State size200Text: string = '200';
+  private sheetSizes: SheetSizes = { medium: true, large: false, size200: true };
+
+  @Builder myBuilder() {
+    Column() {
+    }
+    .width('100%')
+  }
+
+  build() {
+    Column() {
+      TitleBar({ title: $r('app.string.global_bindSheet_menu') })
+        .backgroundColor('#F1F3F5')
+      Scroll() {
+        Column() {
+          Row() {
+            Column() {
+              Text($r('app.string.global_bindSheet_text_allow_interaction'))
+                .fontSize(16)
+                .fontColor('#000000')
+                .fontWeight(500)
+                .fontFamily('HarmonyHeiTi-Medium')
+                .textAlign(TextAlign.Start)
+                .width('70%')
+              Text($r('app.string.global_bindSheet_text_desc'))
+                .fontSize(14)
+                .fontColor('#000000')
+                .fontWeight(400)
+                .fontFamily('HarmonyHeiTi')
+                .textAlign(TextAlign.Start)
+                .width('70%')
+            }
+            .margin({ left: 12, top: 6, bottom: 6 })
+            .align(Alignment.Start)
+
+            Blank()
+
+            Toggle({ type: ToggleType.Switch, isOn: this.enableOutsideInteractive })
+              .id('enable_interactive')
+              .margin({ right: 12, top: 8, bottom: 8 })
+              .onChange((isOn: boolean) => {
+                if (isOn) {
+                  this.enableOutsideInteractive = true;
+                } else {
+                  this.enableOutsideInteractive = false;
+                }
+              })
+          }
+          .backgroundColor('#ffffff')
+          .borderRadius(24)
+          .width('100%')
+
+          Text($r('app.string.pop_height'))
+            .lineHeight(19)
+            .fontWeight(500)
+            .fontFamily('HarmonyHeiTi-Medium')
+            .fontSize(14)
+            .width('100%')
+            .direction(Direction.Ltr)
+            .margin({ left: 26, top: 19.5, bottom: 9.5 })
+            .fontColor($r('app.color.font_color_shallow'))
+
+          Column() {
+            Row() {
+              Text(this.mediumText)
+                .textStyle()
+                .margin({ left: 12, top: 8, bottom: 8 })
+              Blank()
+              Checkbox()
+                .select(this.mediumSelected)
+                .borderRadius(4)
+                .margin({ right: 12, top: 8, bottom: 8 })
+                .onChange((value: boolean) => {
+                  if (value) {
+                    this.sheetSizes.medium = true;
+                  } else {
+                    this.sheetSizes.medium = false;
+                  }
+                })
+            }
+            .width('100%')
+            .margin({ top: 4 })
+
+            Divider()
+              .strokeWidth(1)
+              .margin(8)
+              .color('#182431')
+              .opacity(0.05)
+
+            Row() {
+              Text(this.largeText)
+                .textStyle()
+                .margin({ left: 12, top: 8, bottom: 8 })
+              Blank()
+              Checkbox()
+                .select(this.largeSelected)
+                .borderRadius(4)
+                .margin({ right: 12, top: 8, bottom: 8 })
+                .onChange((value: boolean) => {
+                  if (value) {
+                    this.sheetSizes.large = true;
+                  } else {
+                    this.sheetSizes.large = false;
+                  }
+                })
+            }
+            .width('100%')
+            .margin({ top: 4 })
+
+            Divider()
+              .strokeWidth(1)
+              .margin(8)
+              .color('#182431')
+              .opacity(0.05)
+
+            Row() {
+              Text(this.size200Text)
+                .textStyle()
+                .margin({ left: 12, top: 8, bottom: 8 })
+              Blank()
+              Checkbox()
+                .select(this.size200Selected)
+                .borderRadius(4)
+                .margin({ right: 12, top: 8, bottom: 8 })
+                .onChange((value: boolean) => {
+                  if (value) {
+                    this.sheetSizes.size200 = true;
+                  } else {
+                    this.sheetSizes.size200 = false;
+                  }
+                })
+            }
+            .width('100%')
+            .margin({ top: 4, bottom: 4 })
+          }
+          .backgroundColor('#ffffff')
+          .borderRadius(24)
+          .margin({ top: 12 })
+          .width('100%')
+
+          Row() {
+            Text($r('app.string.bindSheet_popup_style'))
+              .textStyle()
+              .margin({ left: 12, top: 8, bottom: 8 })
+            Blank()
+            Select([{ value: $r('app.string.bindSheet_default_popup') },
+              { value: $r('app.string.bindSheet_centered_popup') },
+              { value: $r('app.string.bindSheet_popup_appears') }])
+              .id('popup_style')
+              .selected(0)
+              .value($r('app.string.bindSheet_default_popup'))
+              .margin({ right: 12, top: 8, bottom: 8 })
+              .fontColor('#182431')
+              .onSelect((index: number) => {
+                if (index === 0) {
+                  this.popStyle = SheetType.BOTTOM;
+                } else if (index === 1) {
+                  this.popStyle = SheetType.CENTER;
+                } else {
+                  this.popStyle = SheetType.POPUP;
+                }
+              })
+          }
+          .backgroundColor('#ffffff')
+          .borderRadius(24)
+          .margin({ top: 20 })
+          .width('100%')
+
+          Row() {
+            Text($r('app.string.bindSheet_icon'))
+              .textStyle()
+              .margin({ left: 12, top: 17, bottom: 17 })
+            Blank()
+            Toggle({ type: ToggleType.Switch, isOn: this.showClose })
+              .margin({ right: 12, top: 17, bottom: 17 })
+              .onChange((isOn: boolean) => {
+                if (isOn) {
+                  this.showClose = true;
+                } else {
+                  this.showClose = false;
+                }
+              })
+          }
+          .backgroundColor('#ffffff')
+          .borderRadius(24)
+          .margin({ top: 20 })
+          .width('100%')
+
+          Row() {
+            Text($r('app.string.bindSheet_blurred_background_texture'))
+              .textStyle()
+              .margin({ left: 12, top: 17, bottom: 17 })
+            Blank()
+            Toggle({ type: ToggleType.Switch, isOn: false })
+              .id('bindSheet_blur')
+              .margin({ right: 12, top: 17, bottom: 17 })
+              .onChange((isOn: boolean) => {
+                if (isOn) {
+                  this.blurStyle = BlurStyle.Thick;
+                } else {
+                  this.blurStyle = BlurStyle.NONE;
+                }
+              })
+          }
+          .backgroundColor('#ffffff')
+          .borderRadius(24)
+          .margin({ top: 20 })
+          .width('100%')
+
+          Blank()
+          Button($r('app.string.bindSheet_popup_modal_interface'),
+            { type: ButtonType.Normal, stateEffect: true })
+            .id('bindSheet_button')
+            .borderRadius(24)
+            .width('86.7%')
+            .height('5.1%')
+            .margin({ left: 24, right: 24, bottom: 72 })
+            .bindSheet($$this.isShow, this.myBuilder(),
+              {
+                enableOutsideInteractive: this.enableOutsideInteractive,
+                dragBar: this.showDragBar,
+                backgroundColor: '#FFFFFF',
+                detents: this.detents,
+                blurStyle: this.blurStyle,
+                showClose: this.showClose,
+                title: { title: "Title" },
+                preferType: this.popStyle,
+                shouldDismiss: ((sheetDismiss: SheetDismiss) => {
+                  // 弹出弹窗
+                  try {
+                    promptAction.showDialog({
+                      message: $r('app.string.bindSheet_close_modal'),
+                      buttons: [
+                        {
+                          text: $r('app.string.bindSheet_close_cancel'),
+                          color: '#0A59F7'
+                        },
+                        {
+                          text: $r('app.string.bindSheet_close_confirm'),
+                          color: '#0A59F7'
+                        }
+                      ]
+                    }, (err, data) => {
+                      if (err) {
+                        Logger.error('showDialog err: ' + err);
+                        return;
+                      }
+                      if (data.index === 1) {
+                        this.detentsArray.length = 0;
+                        this.detents = [SheetSize.MEDIUM, SIZE];
+                        sheetDismiss.dismiss();
+                      }
+                    });
+                  } catch (error) {
+                    let message = (error as BusinessError).message;
+                    let code = (error as BusinessError).code;
+                    Logger.error('showDialog args error code is' + code, 'message is' + message);
+                  };
+                })
+              })
+            .onClick(() => {
+              this.isShow = true
+              if (this.sheetSizes.medium) {
+                this.detentsArray.push(SheetSize.MEDIUM);
+              }
+              if (this.sheetSizes.large) {
+                this.detentsArray.push(SheetSize.LARGE);
+              }
+              if (this.sheetSizes.size200) {
+                this.detentsArray.push(SIZE);
+              }
+              for (let i = 0; i < this.detentsArray.length; i++) {
+                this.detents[i] = this.detentsArray[i];
+              }
+            })
+        }
+        .backgroundColor('#f1f3f5')
+        .constraintSize({ minHeight: '100%' }) // Let the minHeight of the component cover screen at least
+        .height('100%')
+      }
+      .backgroundColor('#f1f3f5')
+      .height('100%')
+      .padding({ left: 12, right: 12, bottom: 12, top: 12 })
+    }
+  }
+}

code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/globalMethods/dialogs/menuSample/MenuSample.ets

@@ -17,6 +17,11 @@ import { IntroductionTitle } from '../../../../common/IntroductionTitle';
 import ShowToast from '../../../../util/ShowToast';
 import { TitleBar } from '../../../../common/TitleBar';
 
+// 最小宽度
+const MINWIDTH: number = 64;
+// 最大宽度
+const MAXWIDTH: number = 100;
+
 @Extend(Row) function rowStyle() {
   .height(50)
   .padding(12)
@@ -33,9 +38,23 @@ import { TitleBar } from '../../../../common/TitleBar';
   .padding({ left: 12, right: 12, top: 8, bottom: 8 })
 }
 
+@Extend(Text) function textStyle() {
+  .fontSize(16)
+  .fontFamily('HarmonyHeiTi')
+  .fontColor('#182431')
+  .fontWeight(400)
+  .width('90%')
+  .margin({ top: 13, bottom: 14 })
+}
+
 @Entry
 @Component
 struct MenuSample {
+  @State menuWidth: number = MINWIDTH;
+  @State realMenuWidth: number = 0;
+  @State menuDirection: number = Placement.Bottom;
+  @State vpText: string = 'vp';
+
   @Builder MenuBuilder() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
       Text($r('app.string.text_picker_text_banana'))
@@ -54,6 +73,20 @@ struct MenuSample {
     .width(200)
   }
 
+  @Builder MenuBuilder2() {
+    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+      Text($r('app.string.menu_option'))
+        .textStyle()
+      Text($r('app.string.menu_option'))
+        .textStyle()
+      Text($r('app.string.menu_option'))
+        .textStyle()
+      Text($r('app.string.menu_option'))
+        .textStyle()
+    }
+    .width(this.menuWidth)
+  }
+
   build() {
     Column() {
       TitleBar({ title: $r('app.string.global_menu') })
@@ -73,8 +106,126 @@ struct MenuSample {
           }
           .justifyContent(FlexAlign.Center)
           .rowStyle()
+          // 新增 菜单避让规则
+          IntroductionTitle({ introduction: $r('app.string.global_menu_avoid_rule') })
+          Column() {
+            Row() {
+              Image($r('app.media.ic_pic1'))
+                .draggable(true)
+                .id('menu_image1')
+                .width(162)
+                .height(162)
+                .margin({ left: 12, top: 9.5, bottom: 12 })
+                .bindContextMenu(this.MenuBuilder2(), ResponseType.LongPress,
+                  {
+                    placement: this.menuDirection,
+                  })
+              Blank()
+            }
+            .width('100%')
+
+            Row() {
+              Image($r('app.media.ic_pic2'))
+                .draggable(true)
+                .id('menu_image2')
+                .width(162)
+                .height(162)
+                .margin({ left: 12, bottom: 12 })
+                .bindContextMenu(this.MenuBuilder2(), ResponseType.LongPress,
+                  {
+                    placement: this.menuDirection,
+                  })
+              Blank()
+            }
+            .width('100%')
+          }
+          .width('100%')
+
+          // 菜单布局
+          IntroductionTitle({ introduction: $r('app.string.global_menu_layout') })
+          Column() {
+            Row() {
+              Text($r('app.string.vertical_layout'))
+                .margin({ left: 12, top: 17, bottom: 13 })
+              Blank()
+              // radio单选按钮
+              Radio({ value: 'vertical', group: 'radioGroup' })
+                .id('menu_vertical')
+                .margin({ right: 12, top: 17, bottom: 13 })
+                .onChange((isChecked: boolean) => {
+                  if (isChecked) {
+                    //设置纵向布局属性
+                    this.menuDirection = Placement.Bottom;
+                  }
+                })
+
+            }
+            .width('100%')
+
+            Divider()
+              .strokeWidth(1)
+              .margin(8)
+              .color('#182431')
+              .opacity(0.05)
+            Row() {
+              Text($r('app.string.horizontal_layout'))
+                .margin({ left: 12, bottom: 17 })
+              Blank()
+              Radio({ value: 'horizontal', group: 'radioGroup' })
+                .id('menu_horizontal')
+                .margin({ right: 12, bottom: 17 })
+                .onChange((isChecked: boolean) => {
+                  if (isChecked) {
+                    //设置横向布局属性
+                    this.menuDirection = Placement.RightTop;
+                  }
+                })
+            }
+            .width('100%')
+          }
+          .width('100%')
+          .backgroundColor('#FFFFFF')
+          .borderRadius(24)
+          .margin({ top: 9.5, bottom: 19.5 })
+
+          // 菜单宽度设置
+          IntroductionTitle({ introduction: $r('app.string.global_menu_width') })
+          Column() {
+            Row() {
+              Text($r('app.string.menu_width'))
+                .margin({ left: 12, top: 18, bottom: 8.5 })
+              Blank()
+              Text(Math.trunc(this.menuWidth) + this.vpText)
+                .margin({ right: 12, top: 18, bottom: 8.5 })
+            }
+            .width('100%')
+
+            Slider({
+              style: SliderStyle.OutSet,
+              value: this.menuWidth,
+              step: 1,
+              min: 0,
+              max: MAXWIDTH
+            })
+              .id('menu_setWidth')
+              .showTips(true, this.realMenuWidth.toFixed())
+              .margin({ left: 6, right: 6, bottom: 12 })
+              .onChange(value => {
+                this.realMenuWidth = value;
+                if (value < MINWIDTH) {
+                  this.menuWidth = MINWIDTH;
+                } else {
+                  this.menuWidth = value;
+                }
+              })
+          }
+          .width('100%')
+          .backgroundColor('#FFFFFF')
+          .borderRadius(24)
+          .margin({ top: 9.5, bottom: 70 })
         }
         .constraintSize({ minHeight: '100%' })
+        .padding({ left: 12, right: 12 })
       }
       .id('menu_scroll')
       .onClick(() => {

code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/globalMethods/dialogs/popUpSample/PopUpSample.ets

@@ -0,0 +1,471 @@
+/*
+* Copyright (c) 2024 Shenzhen Kaihong Digital Industry Development 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 { TitleBar } from '../../../../common/TitleBar'
+import { IntroductionTitle } from '../../../../common/IntroductionTitle'
+
+// Popup宽度
+const POPUPWIDTH: number = 50;
+// slider滑块最大值
+const MAXWIDTH: number = 200;
+// Popup border-radius值
+const POPUPRADIUS: number = 20;
+
+@Extend(Button) function myButtonStyle() {
+  .fontFamily('HarmonyHeiTi-Medium')
+  .fontColor('#FFFFFF')
+  .fontSize(16)
+  .fontWeight(500)
+  .height('5.1%')
+  .backgroundColor('#007DFF')
+  .borderRadius(20)
+}
+
+@Extend(Text) function textStyle() {
+  .fontFamily('HarmonyHeiTi-Medium')
+  .fontColor('#182431')
+  .fontWeight(500)
+  .borderRadius(24)
+}
+
+@Entry
+@Component
+struct PopUpSample {
+  @State popupWidth: number = POPUPWIDTH;
+  @State handlePopup: boolean = false;
+  @State customPopup: boolean = false;
+  @State customPopupTop: boolean = false;
+  @State customPopupBottom: boolean = false;
+  @State customPopupRight: boolean = false;
+  @State customPopupLeft: boolean = false;
+  @State customPopupTopRight: boolean = false;
+  @State customPopupTopLeft: boolean = false;
+  @State customPopupBottomRight: boolean = false;
+  @State customPopupBottomLeft: boolean = false;
+  @State customPopupRightTop: boolean = false;
+  @State customPopupLeftTop: boolean = false;
+  @State customPopupRightBottom: boolean = false;
+  @State customPopupLeftBottom: boolean = false;
+  @State popUpText: string = 'AAAAAAAAAAAAAAAA';
+  @State vpText: string = 'vp';
+  @State topText: string = 'Top';
+  @State bottomText: string = 'Bottom';
+  @State rightText: string = 'Right';
+  @State leftText: string = 'Left';
+  @State topRightText: string = 'TopRight';
+  @State topLeftText: string = 'TopLeft';
+  @State bottomRightText: string = 'BottomRight';
+  @State bottomLeftText: string = 'BottomLeft';
+  @State rightTopText: string = 'RightTop';
+  @State leftTopText: string = 'LeftTop';
+  @State rightBottomText: string = 'RightBottom';
+  @State leftBottomText: string = 'LeftBottom';
+
+  // popup构造器定义弹框内容
+  @Builder popupBuilder() {
+    Text(this.popUpText)
+      .fontFamily('HarmonyHeiTi')
+      .fontSize(14)
+      .fontColor('#FFFFFF')
+      .textAlign(TextAlign.Start)
+      .lineHeight(19)
+      .fontWeight(400)
+      .margin({left:16, right: 16, top: 12.5, bottom: 12.5})
+  }
+
+  build() {
+    Column() {
+      TitleBar({ title: $r('app.string.global_popUp_menu') })
+        .backgroundColor('#F1F3F5')
+      Scroll() {
+        Column() {
+          Column() {
+            Row() {
+              Text($r('app.string.popUp_width'))
+                .textStyle()
+                .textAlign(TextAlign.Start)
+                .margin({ left: 12, top: 12 })
+                .fontSize(16)
+                .lineHeight(22)
+
+              Blank()
+
+              Text(Math.trunc(this.popupWidth) + this.vpText)
+                .textStyle()
+                .textAlign(TextAlign.End)
+                .margin({ right: 12, top: 12 })
+                .fontSize(14)
+                .lineHeight(19)
+
+            }
+            .width('100%')
+
+            Slider({
+              style: SliderStyle.OutSet,
+              value: this.popupWidth,
+              step: 1,
+              min: 0,
+              max: MAXWIDTH
+            })
+              .id('popup_slider')
+              .margin({ left: 6, right: 6 })
+              .onChange(value => {
+                this.popupWidth = value;
+              })
+          }
+          .backgroundColor('#ffffff')
+          .borderRadius(24)
+          .width('100%')
+
+          IntroductionTitle({ introduction: $r('app.string.placement') })
+
+          Column() {
+            Row() {
+              Button(this.topText)
+                .id('popup_top')
+                .width('41.7%')
+                .myButtonStyle()
+                .margin({ left: 12 })
+                .bindPopup(this.customPopupTop, {
+                  builder: this.popupBuilder,
+                  popupColor: '#4D4D4D',
+                  radius: POPUPRADIUS,
+                  placement: Placement.Top,
+                  width: this.popupWidth,
+                  onStateChange: (e) => {
+                    if (!e.isVisible) {
+                      this.customPopupTop = false;
+                    }
+                  }
+                })
+                .onClick(() => {
+                  this.customPopupTop = !this.customPopupTop;
+                })
+              Blank()
+              Button(this.bottomText)
+                .id('popup_bottom')
+                .width('41.7%')
+                .myButtonStyle()
+                .margin({ right: 12 })
+                .bindPopup(this.customPopupBottom, {
+                  builder: this.popupBuilder,
+                  popupColor: '#4D4D4D',
+                  radius: POPUPRADIUS,
+                  enableArrow: true,
+                  shadow: ShadowStyle.OUTER_DEFAULT_XS,
+                  placement: Placement.Bottom,
+                  width: this.popupWidth,
+                  onStateChange: (e) => {
+                    if (!e.isVisible) {
+                      this.customPopupBottom = false;
+                    }
+                  }
+                })
+                .onClick(() => {
+                  this.customPopupBottom = !this.customPopupBottom;
+                })
+            }
+            .width('100%')
+            .margin({ left: 12, right: 12, top: 16, bottom: 12 })
+
+            Row() {
+              Button(this.rightText)
+                .id('popup_right')
+                .width('41.7%')
+                .myButtonStyle()
+                .margin({ left: 12 })
+                .bindPopup(this.customPopupRight, {
+                  builder: this.popupBuilder,
+                  popupColor: '#4D4D4D',
+                  radius: POPUPRADIUS,
+                  enableArrow: true,
+                  shadow: ShadowStyle.OUTER_DEFAULT_XS,
+                  placement: Placement.Right,
+                  width: this.popupWidth,
+                  onStateChange: (e) => {
+                    if (!e.isVisible) {
+                      this.customPopupRight = false;
+                    }
+                  }
+                })
+                .onClick(() => {
+                  this.customPopupRight = !this.customPopupRight;
+                })
+              Blank()
+              Button(this.leftText)
+                .id('popup_left')
+                .width('41.7%')
+                .myButtonStyle()
+                .margin({ right: 12 })
+                .bindPopup(this.customPopupLeft, {
+                  builder: this.popupBuilder,
+                  popupColor: '#4D4D4D',
+                  radius: POPUPRADIUS,
+                  enableArrow: true,
+                  shadow: ShadowStyle.OUTER_DEFAULT_XS,
+                  placement: Placement.Left,
+                  width: this.popupWidth,
+                  onStateChange: (e) => {
+                    if (!e.isVisible) {
+                      this.customPopupLeft = false;
+                    }
+                  }
+                })
+                .onClick(() => {
+                  this.customPopupLeft = !this.customPopupLeft;
+                })
+            }
+            .width('100%')
+            .margin({ left: 12, right: 12, bottom: 12 })
+
+            Row() {
+              Button(this.topRightText)
+                .id('popup_topRight')
+                .width('41.7%')
+                .myButtonStyle()
+                .margin({ left: 12 })
+                .bindPopup(this.customPopupTopRight, {
+                  builder: this.popupBuilder,
+                  popupColor: '#4D4D4D',
+                  radius: POPUPRADIUS,
+                  enableArrow: true,
+                  shadow: ShadowStyle.OUTER_DEFAULT_XS,
+                  placement: Placement.TopRight,
+                  width: this.popupWidth,
+                  onStateChange: (e) => {
+                    if (!e.isVisible) {
+                      this.customPopupTopRight = false;
+                    }
+                  }
+                })
+                .onClick(() => {
+                  this.customPopupTopRight = !this.customPopupTopRight;
+                })
+              Blank()
+              Button(this.topLeftText)
+                .id('popup_topLeft')
+                .width('41.7%')
+                .myButtonStyle()
+                .margin({ right: 12 })
+                .bindPopup(this.customPopupTopLeft, {
+                  builder: this.popupBuilder,
+                  popupColor: '#4D4D4D',
+                  radius: POPUPRADIUS,
+                  enableArrow: true,
+                  shadow: ShadowStyle.OUTER_DEFAULT_XS,
+                  placement: Placement.TopLeft,
+                  width: this.popupWidth,
+                  onStateChange: (e) => {
+                    if (!e.isVisible) {
+                      this.customPopupTopLeft = false;
+                    }
+                  }
+                })
+                .onClick(() => {
+                  this.customPopupTopLeft = !this.customPopupTopLeft;
+                })
+            }
+            .width('100%')
+            .margin({ left: 12, right: 12, bottom: 12 })
+
+            Row() {
+              Button(this.bottomRightText)
+                .id('popup_bottomRight')
+                .width('41.7%')
+                .myButtonStyle()
+                .margin({ left: 12 })
+                .bindPopup(this.customPopupBottomRight, {
+                  builder: this.popupBuilder,
+                  popupColor: '#4D4D4D',
+                  radius: POPUPRADIUS,
+                  enableArrow: true,
+                  shadow: ShadowStyle.OUTER_DEFAULT_XS,
+                  placement: Placement.BottomRight,
+                  width: this.popupWidth,
+                  onStateChange: (e) => {
+                    if (!e.isVisible) {
+                      this.customPopupBottomRight = false;
+                    }
+                  }
+                })
+                .onClick(() => {
+                  this.customPopupBottomRight = !this.customPopupBottomRight;
+                })
+              Blank()
+              Button(this.bottomLeftText)
+                .id('popup_bottomLeft')
+                .width('41.7%')
+                .myButtonStyle()
+                .margin({ right: 12 })
+                .bindPopup(this.customPopupBottomLeft, {
+                  builder: this.popupBuilder,
+                  popupColor: '#4D4D4D',
+                  radius: POPUPRADIUS,
+                  enableArrow: true,
+                  shadow: ShadowStyle.OUTER_DEFAULT_XS,
+                  placement: Placement.BottomLeft,
+                  width: this.popupWidth,
+                  onStateChange: (e) => {
+                    if (!e.isVisible) {
+                      this.customPopupBottomLeft = false;
+                    }
+                  }
+                })
+                .onClick(() => {
+                  this.customPopupBottomLeft = !this.customPopupBottomLeft;
+                })
+            }
+            .width('100%')
+            .margin({ left: 12, right: 12, bottom: 12 })
+
+            Row() {
+              Button(this.rightTopText)
+                .id('popup_rightTop')
+                .width('41.7%')
+                .myButtonStyle()
+                .margin({ left: 12 })
+                .bindPopup(this.customPopupRightTop, {
+                  builder: this.popupBuilder,
+                  popupColor: '#4D4D4D',
+                  radius: POPUPRADIUS,
+                  enableArrow: true,
+                  shadow: ShadowStyle.OUTER_DEFAULT_XS,
+                  placement: Placement.RightTop,
+                  width: this.popupWidth,
+                  onStateChange: (e) => {
+                    if (!e.isVisible) {
+                      this.customPopupRightTop = false;
+                    }
+                  }
+                })
+                .onClick(() => {
+                  this.customPopupRightTop = !this.customPopupRightTop;
+                })
+
+              Blank()
+              Button(this.leftTopText)
+                .id('popup_leftTop')
+                .width('41.7%')
+                .myButtonStyle()
+                .margin({ right: 12 })
+                .bindPopup(this.customPopupLeftTop, {
+                  builder: this.popupBuilder,
+                  popupColor: '#4D4D4D',
+                  radius: POPUPRADIUS,
+                  enableArrow: true,
+                  shadow: ShadowStyle.OUTER_DEFAULT_XS,
+                  placement: Placement.LeftTop,
+                  width: this.popupWidth,
+                  onStateChange: (e) => {
+                    if (!e.isVisible) {
+                      this.customPopupLeftTop = false;
+                    }
+                  }
+                })
+                .onClick(() => {
+                  this.customPopupLeftTop = !this.customPopupLeftTop;
+                })
+            }
+            .width('100%')
+            .margin({ left: 12, right: 12, bottom: 12 })
+
+            Row() {
+              Button(this.rightBottomText)
+                .id('popup_rightBottom')
+                .width('41.7%')
+                .myButtonStyle()
+                .margin({ left: 12 })
+                .bindPopup(this.customPopupRightBottom, {
+                  builder: this.popupBuilder,
+                  popupColor: '#4D4D4D',
+                  radius: POPUPRADIUS,
+                  enableArrow: true,
+                  shadow: ShadowStyle.OUTER_DEFAULT_XS,
+                  placement: Placement.RightBottom,
+                  width: this.popupWidth,
+                  onStateChange: (e) => {
+                    if (!e.isVisible) {
+                      this.customPopupRightBottom = false;
+                    }
+                  }
+                })
+                .onClick(() => {
+                  this.customPopupRightBottom = !this.customPopupRightBottom;
+                })
+              Blank()
+              Button(this.leftBottomText)
+                .id('popup_leftBottom')
+                .width('41.7%')
+                .myButtonStyle()
+                .margin({ right: 12 })
+                .bindPopup(this.customPopupLeftBottom, {
+                  builder: this.popupBuilder,
+                  popupColor: '#4D4D4D',
+                  radius: POPUPRADIUS,
+                  enableArrow: true,
+                  shadow: ShadowStyle.OUTER_DEFAULT_XS,
+                  placement: Placement.LeftBottom,
+                  width: this.popupWidth,
+                  onStateChange: (e) => {
+                    if (!e.isVisible) {
+                      this.customPopupLeftBottom = false;
+                    }
+                  }
+                })
+                .onClick(() => {
+                  this.customPopupLeftBottom = !this.customPopupLeftBottom;
+                })
+            }
+            .width('100%')
+            .margin({ left: 12, right: 12, bottom: 16 })
+
+          }
+          .backgroundColor('#FFFFFF')
+          .borderRadius(24)
+
+          Blank()
+
+          Button($r('app.string.popUp_advanced_component'))
+            .id('popup_advanced')
+            .myButtonStyle()
+            .width('86.7%')
+            .margin({ left: 24, right: 24, bottom: 96 })
+            .bindPopup(this.customPopup, {
+              builder: this.popupBuilder,
+              popupColor: '#4D4D4D',
+              radius: POPUPRADIUS,
+              enableArrow: true,
+              shadow: ShadowStyle.OUTER_DEFAULT_XS,
+              onStateChange: (e) => {
+                if (!e.isVisible) {
+                  this.customPopup = false;
+                }
+              }
+            })
+            .onClick(async () => {
+              this.customPopup = !this.customPopup;
+            })
+        }
+        .backgroundColor('#f1f3f5')
+        .constraintSize({ minHeight: '100%' }) // Let the minHeight of the component cover screen at least
+        .width('100%')
+        .height('100%')
+      }
+      .backgroundColor('#f1f3f5')
+      .height('100%')
+      .padding({ left: 12, right: 12, bottom: 12, top: 12 })
+    }
+    .width('100%')
+  }
+}

code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/resources/base/element/string.json

@@ -4688,6 +4688,46 @@
       "name": "navigation_third_page_back",
       "value": "Go back to the first page"
     },
+    {
+      "name": "navigation_expand",
+      "value": "Expand"
+    },
+    {
+      "name": "navigation_list_expand_title",
+      "value": "Navigation List Expand Safe Area"
+    },
+    {
+      "name": "navigation_bindsheet_title",
+      "value": "BindSheet Safe Area"
+    },
+    {
+      "name": "navigation_expand_title",
+      "value": "Navigation Expand Safe Area"
+    },
+    {
+      "name": "navigation_unexpand",
+      "value": "Unexpand"
+    },
+    {
+      "name": "navigation_split_title",
+      "value": "Navigation Split"
+    },
+    {
+      "name": "navigation_sidebar_title",
+      "value": "Navigation SideBar"
+    },
+    {
+      "name": "navigation_navbar_list_nopara",
+      "value": "List"
+    },
+    {
+      "name": "navigation_navbar_list",
+      "value": "List%d"
+    },
+    {
+      "name": "navigation_navcontent_list",
+      "value": "Content%d"
+    },
     // Tabs
     {
       "name": "tabs_title",
@@ -5436,6 +5476,166 @@
       "name": "navigator_return_message",
       "value": "hello! This is a param form the first page"
     },
+    {
+      "name": "global_bindSheet_menu",
+      "value": "BindSheetMenu"
+    },
+    {
+      "name": "global_bindSheet_text_allow_interaction",
+      "value": "Allow Page Interaction"
+    },
+    {
+      "name": "global_bindSheet_text_desc",
+      "value": "Allow Page Interaction Desc"
+    },
+    {
+      "name": "bindSheet_popup_style",
+      "value": "Popup Style"
+    },
+    {
+      "name": "bindSheet_default_popup",
+      "value": "Default Popup"
+    },
+    {
+      "name": "bindSheet_centered_popup",
+      "value": "Centered Popup"
+    },
+    {
+      "name": "bindSheet_popup_appears",
+      "value": "Popup Appears"
+    },
+    {
+      "name": "bindSheet_icon",
+      "value": "Icon"
+    },
+    {
+      "name": "bindSheet_blurred_background_texture",
+      "value": "Blurred Background Texture"
+    },
+    {
+      "name": "bindSheet_popup_modal_interface",
+      "value": "Popup Modal Interface"
+    },
+    {
+      "name": "pop_height",
+      "value": "PopHeight"
+    },
+    {
+      "name": "bindSheet_close_modal",
+      "value": "Whether to close the modal"
+    },
+    {
+      "name": "bindSheet_close_confirm",
+      "value": "Confirm"
+    },
+    {
+      "name": "bindSheet_close_cancel",
+      "value": "Cancel"
+    },
+    {
+      "name": "global_popUp_menu",
+      "value": "Popup"
+    },
+    {
+      "name": "popUp_width",
+      "value": "Width"
+    },
+    {
+      "name": "placement",
+      "value": "Placement"
+    },
+    {
+      "name": "popUp_advanced_component",
+      "value": "PopUp Advanced Component"
+    },
+    {
+      "name": "global_menu_avoid_rule",
+      "value": "Menu Avoid Rule"
+    },
+    {
+      "name": "global_menu_layout",
+      "value": "Menu Layout"
+    },
+    {
+      "name": "global_menu_width",
+      "value": "Menu Width"
+    },
+    {
+      "name": "menu_option",
+      "value": "Menu Option"
+    },
+    {
+      "name": "vertical_layout",
+      "value": "Vertical Layout"
+    },
+    {
+      "name": "horizontal_layout",
+      "value": "Horizontal Layout"
+    },
+    {
+      "name": "menu_width",
+      "value": "Width"
+    },
+    {
+      "name": "textclock_style",
+      "value": "Style"
+    },
+    {
+      "name": "text_clock_textShadow",
+      "value": "TextShadow"
+    },
+    {
+      "name": "text_clock_fontSetting",
+      "value": "FontSetting"
+    },
+    {
+      "name": "text_clock_select_button",
+      "value": "Select Button"
+    },
+    {
+      "name": "text_clock_monospaced_numbers",
+      "value": "Monospaced Numbers"
+    },
+    {
+      "name": "text_clock_monovolume_numbers",
+      "value": "Monovolume Numbers"
+    },
+    {
+      "name": "text_input_text_selection_menu",
+      "value": "Text Selection Menu"
+    },
+    {
+      "name": "text_input_text_copy",
+      "value": "Copy"
+    },
+    {
+      "name": "text_input_text_copy_success",
+      "value": "Copy Success"
+    },
+    {
+      "name": "text_input_text_paste",
+      "value": "Paste"
+    },
+    {
+      "name": "text_input_text_paste_success",
+      "value": "Paste Success"
+    },
+    {
+      "name": "text_input_text_get",
+      "value": "Get"
+    },
+    {
+      "name": "text_input_text_delete",
+      "value": "Text Delete"
+    },
+    {
+      "name": "textarea_character_limit",
+      "value": "Limit Character"
+    },
+    {
+      "name": "grid_item_polymorphic_styles",
+      "value": "Polymorphic Styles"
+    },
     {
       "name": "component_id_press_to_see_attributeModifier",
       "value": "按压按钮查看状态变化"

code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/resources/base/media/ic_arrow.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 4</title>
+    <defs>
+        <path d="M2.00015813,9 L9.9998787,9 C10.5522304,9 11,9.44776286 11,10.0001063 C11,10.227202 10.9227099,10.4475359 10.7808422,10.6248678 L6.78098194,15.6246183 C6.43593055,16.0559261 5.80656184,16.1258549 5.37524759,15.7808087 C5.31757589,15.734672 5.26519224,15.6822891 5.21905488,15.6246183 L1.2191946,10.6248678 C0.874143201,10.19356 0.944073057,9.56420072 1.3753873,9.21915449 C1.55272186,9.07728897 1.77305909,9 2.00015813,9 Z" id="path-1"></path>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="TextInput文本输入2" transform="translate(-302.000000, -440.000000)">
+            <g id="Textfield/Box/WhiteBG/Normal" transform="translate(24.000000, 424.000000)">
+                <g id="编组-4" transform="translate(278.000000, 16.000000)">
+                    <rect id="矩形" x="0" y="0" width="24" height="24"></rect>
+                    <g id="编组" transform="translate(6.000000, 0.000000)">
+                        <mask id="mask-2" fill="white">
+                            <use xlink:href="#path-1"></use>
+                        </mask>
+                        <g id="矩形备份"></g>
+                        <g mask="url(#mask-2)" fill="#000000" fill-opacity="0.9" id="Symbol/color-light/colorPrimary">
+                            <g>
+                                <rect id="color/#000000" x="0" y="0" width="12" height="24"></rect>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/resources/base/media/ic_bindSheet.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>切片</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组">
+            <rect id="矩形" x="0" y="0" width="24" height="24"></rect>
+            <g opacity="0.6" transform="translate(1.000000, 3.000000)" fill="#000000" fill-rule="nonzero" id="形状">
+                <path d="M18.9752492,8 C20.3559611,8 21.4752492,9.1192881 21.4752492,10.5 C21.4752492,10.5830744 21.4711084,10.6660972 21.4628422,10.7487593 L20.9628422,15.7487593 C20.8350417,17.0267638 19.7596278,18 18.4752492,18 L3.00018699,18 C1.71580836,18 0.640394457,17.0267638 0.512594007,15.7487593 L0.0125940069,10.7487593 C-0.124791963,9.3748996 0.877568017,8.149793 2.25142769,8.012407 C2.33408981,8.0041408 2.41711258,8 2.50018699,8 L18.9752492,8 Z M18.9752492,9.5 L2.50018699,9.5 C2.46695722,9.5 2.43374811,9.5016563 2.40068327,9.5049628 C1.89039253,9.5559919 1.50823128,9.9821736 1.5002399,10.4827919 L1.5051498,10.5995037 L2.0051498,15.5995037 C2.05233765,16.0713823 2.42249909,16.4393872 2.88324722,16.4932112 L3.00018699,16.5 L18.4752492,16.5 C18.9494813,16.5 19.3524923,16.1682935 19.4518953,15.7151876 L19.4702864,15.5995037 L19.9702864,10.5995037 C19.9735929,10.5664389 19.9752492,10.5332298 19.9752492,10.5 C19.9752492,9.9477153 19.5275339,9.5 18.9752492,9.5 Z M16.9132258,3 C18.2939376,3 19.4132258,4.11928813 19.4132258,5.5 L19.4119913,5.57855477 L19.320452,7.036819 C19.227344,7.0206831 19.1324704,7.0096977 19.0361351,7.004167 L18.890574,7 L17.8207181,7 L17.9112511,5.56281278 L17.9132258,5.5 L17.9132258,5.5 C17.9132258,4.94771525 17.4655105,4.5 16.9132258,4.5 L4.17499118,4.50197467 C3.66316803,4.53418732 3.2655796,4.94601437 3.23916779,5.44599936 L3.23977864,5.56281278 L3.32971808,7 L2.26045573,7 C2.23074113,7 2.20103127,7.0005298 2.17134028,7.0015888 L2.0823381,7.0063533 C1.99660721,7.0124769 1.9121958,7.0228546 1.82929553,7.0372653 L1.74274065,5.65703196 C1.65601429,4.27904654 2.70278659,3.09166304 4.08077201,3.00493668 L4.23780397,3 L16.9132258,3 Z M15.4877181,0 C15.9019317,0 16.2377181,0.33578644 16.2377181,0.75 C16.2377181,1.16421356 15.9019317,1.5 15.4877181,1.5 L6.48771808,1.5 C6.07350452,1.5 5.73771808,1.16421356 5.73771808,0.75 C5.73771808,0.33578644 6.07350452,0 6.48771808,0 L15.4877181,0 Z"></path>
+            </g>
+        </g>
+    </g>
+</svg>

code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/resources/base/media/ic_bindSheetClose.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>切片</title>
+    <defs>
+        <path d="M19.7781746,4.22182541 C20.0710678,4.51471863 20.0710678,4.98959236 19.7781746,5.28248558 L5.28248558,19.7781746 C4.98959236,20.0710678 4.51471863,20.0710678 4.22182541,19.7781746 C3.92893219,19.4852814 3.92893219,19.0104076 4.22182541,18.7175144 L10.9395166,11.9994697 L4.22182541,5.28248558 C3.92893219,4.98959236 3.92893219,4.51471863 4.22182541,4.22182541 C4.51471863,3.92893219 4.98959236,3.92893219 5.28248558,4.22182541 L12,10.9389863 L18.7175144,4.22182541 C19.0104076,3.92893219 19.4852814,3.92893219 19.7781746,4.22182541 Z M19.7781746,18.7175144 C20.0710678,19.0104076 20.0710678,19.4852814 19.7781746,19.7781746 C19.4852814,20.0710678 19.0104076,20.0710678 18.7175144,19.7781746 L12.7072836,13.7675902 L13.767767,12.7071068 L19.7781746,18.7175144 Z" id="path-1"></path>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <g id="形状"></g>
+            <g mask="url(#mask-2)" fill="#000000" fill-opacity="0.9" id="color/#000000">
+                <g>
+                    <rect x="0" y="0" width="24" height="24"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/resources/base/media/ic_popUp.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>切片</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组">
+            <rect id="矩形" x="0" y="0" width="24" height="24"></rect>
+            <g opacity="0.6" transform="translate(1.000000, 3.000000)" fill="#000000" fill-rule="nonzero" id="path-1">
+                <path d="M14.5,0 C18.6421356,0 22,3.35786438 22,7.5 C22,11.6007143 18.7089571,14.9327643 14.6240262,14.9989952 L14.5,15 L12.8105,15 L9.0303301,18.7803301 C8.7491526,19.0615076 8.30026186,19.0727547 8.00566731,18.8140714 L7.96966991,18.7803301 C7.68849242,18.4991526 7.67724532,18.0502619 7.93592862,17.7556673 L7.96966991,17.7196699 L11.9696699,13.7196699 C12.0986012,13.5907387 12.2696414,13.5135976 12.4504659,13.5016361 L12.5,13.5 L14.5,13.5 C17.8137085,13.5 20.5,10.8137085 20.5,7.5 C20.5,4.21942859 17.8671657,1.55378857 14.599221,1.50080383 L7.5,1.5 C4.1862915,1.5 1.5,4.1862915 1.5,7.5 C1.5,10.7805714 4.1328343,13.4462114 7.40077903,13.4991962 L7.5,13.5 L8.25,13.5 C8.66421356,13.5 9,13.8357864 9,14.25 C9,14.6494202 8.68777001,14.9759152 8.2940682,14.9987268 L8.25,15 L7.5,15 C3.35786438,15 0,11.6421356 0,7.5 C0,3.39928573 3.29104288,0.06723571 7.37597379,0.00100479 L7.5,0 L14.5,0 Z"></path>
+            </g>
+        </g>
+    </g>
+</svg>

code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/resources/base/profile/main_pages.json

@@ -131,6 +131,12 @@
     "pages/components/listAndGrid/gridItemSample/GridItemSample",
     "pages/components/scrollAndSwipe/swiperSample/SwiperSample",
     "pages/components/navigation/navigationSample/NavigationSample",
+    "pages/components/navigation/navigationSample/NavigationBasic",
+    "pages/components/navigation/navigationSample/ListExpandSafeArea",
+    "pages/components/navigation/navigationSample/NavigationSplit",
+    "pages/components/navigation/navigationSample/NavigationSideBar",
+    "pages/components/navigation/navigationSample/BindSheetSafeArea",
+    "pages/components/navigation/navigationSample/NavigationExpandSafeArea",
     "pages/components/navigation/navRouterSample/NavRouterSample",
     "pages/components/navigation/navigatorSample/NavigatorSample",
     "pages/components/navigation/navigatorSample/NavigatorSecondPage",
@@ -148,6 +154,8 @@
     "pages/components/canvasAndGraphicDrawing/polylineSample/PolylineSample",
     "pages/components/canvasAndGraphicDrawing/rectSample/RectSample",
     "pages/components/canvasAndGraphicDrawing/shapeSample/ShapeSample",
+    "pages/globalMethods/dialogs/bindSheetSample/BindSheetSample",
+    "pages/globalMethods/dialogs/popUpSample/PopUpSample",
     "pages/universal/properties/attributeModifierSample/AttributeModifierSample",
     "pages/components/listAndGrid/waterFlowSample/WaterFlowSample",
     "pages/universal/properties/outlineSample/OutlineSample"

code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/resources/en/element/string.json

@@ -2806,6 +2806,166 @@
     {
       "name": "particle_spawn_stop",
       "value": "Stop"
+    },
+    {
+      "name": "global_bindSheet_menu",
+      "value": "BindSheetMenu"
+    },
+    {
+      "name": "global_bindSheet_text_allow_interaction",
+      "value": "Allow Page Interaction"
+    },
+    {
+      "name": "global_bindSheet_text_desc",
+      "value": "Allow Page Interaction Desc"
+    },
+    {
+      "name": "bindSheet_popup_style",
+      "value": "Popup Style"
+    },
+    {
+      "name": "bindSheet_default_popup",
+      "value": "Default Popup"
+    },
+    {
+      "name": "bindSheet_centered_popup",
+      "value": "Centered Popup"
+    },
+    {
+      "name": "bindSheet_popup_appears",
+      "value": "Popup Appears"
+    },
+    {
+      "name": "bindSheet_icon",
+      "value": "Icon"
+    },
+    {
+      "name": "bindSheet_blurred_background_texture",
+      "value": "Blurred Background Texture"
+    },
+    {
+      "name": "bindSheet_popup_modal_interface",
+      "value": "Popup Modal Interface"
+    },
+    {
+      "name": "pop_height",
+      "value": "PopHeight"
+    },
+    {
+      "name": "bindSheet_close_modal",
+      "value": "Whether to close the modal"
+    },
+    {
+      "name": "bindSheet_close_confirm",
+      "value": "Confirm"
+    },
+    {
+      "name": "bindSheet_close_cancel",
+      "value": "Cancel"
+    },
+    {
+      "name": "global_popUp_menu",
+      "value": "Popup"
+    },
+    {
+      "name": "popUp_width",
+      "value": "Width"
+    },
+    {
+      "name": "placement",
+      "value": "Placement"
+    },
+    {
+      "name": "popUp_advanced_component",
+      "value": "PopUp Advanced Component"
+    },
+    {
+      "name": "global_menu_avoid_rule",
+      "value": "Menu Avoid Rule"
+    },
+    {
+      "name": "global_menu_layout",
+      "value": "Menu Layout"
+    },
+    {
+      "name": "global_menu_width",
+      "value": "Menu Width"
+    },
+    {
+      "name": "menu_option",
+      "value": "Menu Option"
+    },
+    {
+      "name": "vertical_layout",
+      "value": "Vertical Layout"
+    },
+    {
+      "name": "horizontal_layout",
+      "value": "Horizontal Layout"
+    },
+    {
+      "name": "menu_width",
+      "value": "Width"
+    },
+    {
+      "name": "textclock_style",
+      "value": "Style"
+    },
+    {
+      "name": "text_clock_textShadow",
+      "value": "TextShadow"
+    },
+    {
+      "name": "text_clock_fontSetting",
+      "value": "FontSetting"
+    },
+    {
+      "name": "text_clock_select_button",
+      "value": "Select Button"
+    },
+    {
+      "name": "text_clock_monospaced_numbers",
+      "value": "Monospaced Numbers"
+    },
+    {
+      "name": "text_clock_monovolume_numbers",
+      "value": "Monovolume Numbers"
+    },
+    {
+      "name": "text_input_text_selection_menu",
+      "value": "Text Selection Menu"
+    },
+    {
+      "name": "text_input_text_copy",
+      "value": "Copy"
+    },
+    {
+      "name": "text_input_text_copy_success",
+      "value": "Copy Success"
+    },
+    {
+      "name": "text_input_text_paste",
+      "value": "Paste"
+    },
+    {
+      "name": "text_input_text_paste_success",
+      "value": "Paste Success"
+    },
+    {
+      "name": "text_input_text_get",
+      "value": "Get"
+    },
+    {
+      "name": "text_input_text_delete",
+      "value": "Text Delete"
+    },
+    {
+      "name": "textarea_character_limit",
+      "value": "Limit Character"
+    },
+    {
+      "name": "grid_item_polymorphic_styles",
+      "value": "Polymorphic Styles"
     }
   ]
 }

code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/resources/zh/element/string.json

@@ -4057,6 +4057,46 @@
       "name": "navigation_third_page_back",
       "value": "返回第一个页面"
     },
+    {
+      "name": "navigation_expand",
+      "value": "延伸"
+    },
+    {
+      "name": "navigation_list_expand_title",
+      "value": "滚动组件延伸底部导航条"
+    },
+    {
+      "name": "navigation_bindsheet_title",
+      "value": "BindSheet避让键盘"
+    },
+    {
+      "name": "navigation_expand_title",
+      "value": "避让底部导航条"
+    },
+    {
+      "name": "navigation_unexpand",
+      "value": "不延伸"
+    },
+    {
+      "name": "navigation_split_title",
+      "value": "Split模式动画演示"
+    },
+    {
+      "name": "navigation_sidebar_title",
+      "value": "分栏的鼠标样式"
+    },
+    {
+      "name": "navigation_navbar_list_nopara",
+      "value": "列表"
+    },
+    {
+      "name": "navigation_navbar_list",
+      "value": "列表%d"
+    },
+    {
+      "name": "navigation_navcontent_list",
+      "value": "内容%d"
+    },
     // Tab
     {
       "name": "tabs_title",
@@ -4537,6 +4577,166 @@
       "name": "navigator_return_message",
       "value": "hello! 这是第一个页面传过来的参数"
     },
+    {
+      "name": "global_bindSheet_menu",
+      "value": "BindSheet半模态"
+    },
+    {
+      "name": "global_bindSheet_text_allow_interaction",
+      "value": "允许页面交互"
+    },
+    {
+      "name": "global_bindSheet_text_desc",
+      "value": "设置弹出的半模态所在页面是否允许交互"
+    },
+    {
+      "name": "bindSheet_popup_style",
+      "value": "弹出样式"
+    },
+    {
+      "name": "bindSheet_default_popup",
+      "value": "默认弹出"
+    },
+    {
+      "name": "bindSheet_centered_popup",
+      "value": "居中弹出"
+    },
+    {
+      "name": "bindSheet_popup_appears",
+      "value": "popup弹出"
+    },
+    {
+      "name": "bindSheet_icon",
+      "value": "图标"
+    },
+    {
+      "name": "bindSheet_blurred_background_texture",
+      "value": "模糊背景材质"
+    },
+    {
+      "name": "bindSheet_popup_modal_interface",
+      "value": "弹出半模态"
+    },
+    {
+      "name": "pop_height",
+      "value": "弹出高度"
+    },
+    {
+      "name": "bindSheet_close_modal",
+      "value": "是否关闭半模态？"
+    },
+    {
+      "name": "bindSheet_close_confirm",
+      "value": "确定"
+    },
+    {
+      "name": "bindSheet_close_cancel",
+      "value": "取消"
+    },
+    {
+      "name": "global_popUp_menu",
+      "value": "Popup"
+    },
+    {
+      "name": "popUp_width",
+      "value": "宽度"
+    },
+    {
+      "name": "placement",
+      "value": "Placement"
+    },
+    {
+      "name": "popUp_advanced_component",
+      "value": "Popup高级组件"
+    },
+    {
+      "name": "global_menu_avoid_rule",
+      "value": "菜单避让规则"
+    },
+    {
+      "name": "global_menu_layout",
+      "value": "菜单布局"
+    },
+    {
+      "name": "global_menu_width",
+      "value": "菜单宽度设置"
+    },
+    {
+      "name": "menu_option",
+      "value": "菜单选项"
+    },
+    {
+      "name": "vertical_layout",
+      "value": "纵向布局"
+    },
+    {
+      "name": "horizontal_layout",
+      "value": "横向布局"
+    },
+    {
+      "name": "menu_width",
+      "value": "宽度"
+    },
+    {
+      "name": "textclock_style",
+      "value": "样式"
+    },
+    {
+      "name": "text_clock_textShadow",
+      "value": "文字阴影"
+    },
+    {
+      "name": "text_clock_fontSetting",
+      "value": "字体设置"
+    },
+    {
+      "name": "text_clock_select_button",
+      "value": "下拉按钮"
+    },
+    {
+      "name": "text_clock_monospaced_numbers",
+      "value": "等宽数字"
+    },
+    {
+      "name": "text_clock_monovolume_numbers",
+      "value": "变宽数字"
+    },
+    {
+      "name": "text_input_text_selection_menu",
+      "value": "文本选择菜单"
+    },
+    {
+      "name": "text_input_text_copy",
+      "value": "复制"
+    },
+    {
+      "name": "text_input_text_copy_success",
+      "value": "复制成功"
+    },
+    {
+      "name": "text_input_text_paste",
+      "value": "粘贴"
+    },
+    {
+      "name": "text_input_text_paste_success",
+      "value": "粘贴成功"
+    },
+    {
+      "name": "text_input_text_get",
+      "value": "获取"
+    },
+    {
+      "name": "text_input_text_delete",
+      "value": "文本删除"
+    },
+    {
+      "name": "textarea_character_limit",
+      "value": "限制字数"
+    },
+    {
+      "name": "grid_item_polymorphic_styles",
+      "value": "多态样式"
+    },
     {
       "name": "focus_control_tab_status",
       "value": "获焦状态样式切换：外接键盘Tab键切换焦点查看状态变化"

code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/ohosTest/ets/test/Ability.test.ets

@@ -942,6 +942,20 @@ export default function abilityTest() {
         // 点击start
         await checkButtonAndClickWithID('test_start');
 
+        // 设置文字阴影
+        await driver.assertComponentExist(ON.id('text_shadow'));
+        let shadow = await driver.findComponent(ON.id('text_shadow'));
+        await shadow.click();
+
+        // 设置字体
+        await driver.assertComponentExist(ON.id('font_setting'));
+        let fontSetting = await driver.findComponent(ON.id('font_setting'));
+        await fontSetting.click();
+        await driver.delayMs(DELAY_TIME_FiVE);
+        // 变宽数字
+        await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.text_clock_monovolume_numbers')));
+        await driver.delayMs(DELAY_TIME_FiVE);
+
         // 返回
         await checkButtonAndClickWithID('backBtn');
         await driver.delayMs(DELAY_TIME_FiVE);
@@ -1314,6 +1328,10 @@ export default function abilityTest() {
         let driver: Driver = Driver.create();
         await driver.delayMs(DELAY_TIME);
 
+        let list = await driver.findComponent(ON.id('list_001'));
+        let on = ON.text(await manager.getStringValue($r('app.string.text_and_input')));
+        await list.scrollSearch(on);
+
         // 进入TextInput 文本输入
         let atom = await manager.getStringValue($r('app.string.text_input_title'));
         let button = await driver.findComponent(ON.text(atom));
@@ -1327,6 +1345,38 @@ export default function abilityTest() {
         let input = await driver.findComponent(ON.id('test_input'));
         await input.inputText('test');
 
+        await driver.pressBack();
+        await driver.delayMs(DELAY_TIME_FiVE);
+        // 滑动scroll到最底部
+        await driver.assertComponentExist(ON.id('input_scroll'));
+        let scroll = await driver.findComponent(ON.id('input_scroll'));
+        await scroll.scrollToBottom();
+        await driver.delayMs(DELAY_TIME_FiVE);
+
+        // 用坐标点击选择菜单
+        await driver.longClick(80, 980)
+        // 点击获取
+        await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.text_get')));
+        await driver.assertComponentExist(ON.text('Hint'));
+        // 点击复制
+        await driver.longClick(80, 980)
+        await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.text_copy')));
+        await driver.assertComponentExist(ON.text(await manager.getStringValue($r('app.string.copy_success'))));
+        // 点击粘贴
+        await driver.longClick(80, 980)
+        await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.text_paste')));
+        await driver.assertComponentExist(ON.text(await manager.getStringValue($r('app.string.paste_success'))));
+
+        // 文本删除
+        await driver.assertComponentExist(ON.id('text_delete'));
+        let textDelete = await driver.findComponent(ON.id('text_delete'));
+        await textDelete.inputText('Hint');
+        await driver.pressBack();
+        await driver.delayMs(DELAY_TIME_FiVE);
+        // 点击 清除 的坐标
+        await driver.click(640, 1126)
+        await driver.delayMs(DELAY_TIME);
+
         // 返回
         await checkButtonAndClickWithID('backBtn');
         await driver.delayMs(DELAY_TIME_FiVE);
@@ -2061,6 +2111,11 @@ export default function abilityTest() {
         let testName = 'GridItemFunction';
         Logger.info(BUNDLE + testName + ' begin ------------------------------');
         await driver.delayMs(DELAY_TIME);
+
+        let list = await driver.findComponent(ON.id('list_001'));
+        let on = ON.text(await manager.getStringValue($r('app.string.list_and_grid')));
+        await list.scrollSearch(on);
+
         let atom = await manager.getStringValue($r('app.string.grid_item_title'));
         let button = await driver.findComponent(ON.text(atom));
         if (!button) {
@@ -2079,6 +2134,16 @@ export default function abilityTest() {
         await checkButtonAndClickWithID(`griditem_004`);
         await checkButtonAndClickWithText(`4`);
 
+        // 多态样式
+        await driver.assertComponentExist(ON.id('gridItem_style'));
+        let gridItemStyle = await driver.findComponent(ON.id('gridItem_style'));
+        await gridItemStyle.click();
+        await driver.delayMs(DELAY_TIME);
+        await driver.assertComponentExist(ON.text('plain'));
+        let plain = await driver.findComponent(ON.text('plain'));
+        await plain.click();
+        await driver.delayMs(DELAY_TIME);
+
         // 返回
         await checkButtonAndClickWithID('backBtn');
         await driver.delayMs(DELAY_TIME_FiVE);
@@ -2283,6 +2348,16 @@ export default function abilityTest() {
         await checkButtonAndClickWithID('textarea_color_002');
         await checkButtonAndClickWithText('Blue')
         await driver.delayMs(DELAY_TIME);
+
+        // 限制字数
+        await driver.pressBack();
+        await driver.assertComponentExist(ON.id('textarea_character_limit'));
+        let limit = await driver.findComponent(ON.id('textarea_character_limit'));
+        await limit.click();
+        // 测试输入一百个字符
+        await input.inputText(await manager.getStringValue($r('app.string.text_input_limit')));
+        await driver.delayMs(DELAY_TIME);
+
         // 返回
         await checkButtonAndClickWithID('backBtn');
         await driver.delayMs(DELAY_TIME_FiVE);
@@ -4655,6 +4730,146 @@ export default function abilityTest() {
         await driver.delayMs(DELAY_TIME);
         // 点击屏幕
         await driver.click(200, 300);
+        // 滑动滚动条到底部   滚动条不起作用，待确定
+        await driver.delayMs(DELAY_TIME);
+        await driver.assertComponentExist(ON.id('menu_scroll'));
+        let scroll = await driver.findComponent(ON.id('menu_scroll'));
+        await scroll.scrollToBottom();
+        await driver.delayMs(DELAY_TIME);
+        // 设置菜单宽度
+        await driver.assertComponentExist(ON.id('menu_setWidth'));
+        // 滑动坐标调整宽度
+        await driver.drag(448, 1140, 680, 1140);
+
+        // 点击纵向布局
+        await driver.assertComponentExist(ON.id('menu_vertical'));
+        let vertical = await driver.findComponent(ON.id('menu_vertical'));
+        await vertical.click()
+
+        // 长按图片1
+        await driver.assertComponentExist(ON.id('menu_image1'));
+        let image1 = await driver.findComponent(ON.id('menu_image1'));
+        await image1.longClick();
+        await driver.delayMs(DELAY_TIME);
+        await driver.click(200, 300);
+        // 长按图片2
+        await driver.assertComponentExist(ON.id('menu_image2'));
+        let image2 = await driver.findComponent(ON.id('menu_image2'));
+        await image2.longClick();
+        await driver.delayMs(DELAY_TIME);
+        await driver.click(200, 300);
+
+        // 点击横向布局
+        await driver.assertComponentExist(ON.id('menu_horizontal'));
+        let horizontal = await driver.findComponent(ON.id('menu_horizontal'));
+        await horizontal.click();
+
+        // 长按图片1
+        await image1.longClick();
+        await driver.delayMs(DELAY_TIME);
+        await driver.click(200, 300);
+        // 长按图片2
+        await image2.longClick();
+        await driver.delayMs(DELAY_TIME);
+        await driver.click(200, 300);
+        await driver.delayMs(DELAY_TIME);
+
+        // 返回
+        await checkButtonAndClickWithID('backBtn');
+        await driver.delayMs(DELAY_TIME);
+        Logger.info(BUNDLE + testName + 'end');
+      })
+
+      /**
+       * BindSheetDialog 半模态界面
+       */
+      it(BUNDLE + 'BindSheetDialogFunction_001', 0, async () => {
+        let testName = 'BindSheetDialogFunction';
+        Logger.info(BUNDLE + testName + 'begin');
+        await driver.delayMs(DELAY_TIME);
+        await driver.findComponent(ON.text(await manager.getStringValue($r('app.string.global_bindSheet_menu'))));
+        // 进入页面
+        await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.global_bindSheet_menu')));
+        // 弹出样式 id: popup_style
+        await checkButtonAndClickWithID('popup_style');
+        await driver.delayMs(DELAY_TIME);
+        await driver.click(200, 300);
+        // 模糊背景材质
+        await driver.assertComponentExist(ON.id('bindSheet_blur'));
+        let blur = await driver.findComponent(ON.id('bindSheet_blur'));
+        await blur.click();
+        // 弹出半模界面
+        await driver.assertComponentExist(ON.id('bindSheet_button'));
+        let button = await driver.findComponent(ON.id('bindSheet_button'));
+        await button.click();
+        await driver.delayMs(DELAY_TIME_FiVE);
+        // 不允许页面交互
+        await checkButtonAndClickWithID('enable_interactive')
+        await driver.delayMs(DELAY_TIME);
+        await driver.drag(352, 556, 352, 1080);
+        await driver.delayMs(DELAY_TIME);
+        // 关闭半模界面
+        await driver.click(664, 1034);
+        await driver.delayMs(DELAY_TIME);
+        // 确定
+        await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.button_confirm')));
+        // 返回
+        await checkButtonAndClickWithID('backBtn');
+        await driver.delayMs(DELAY_TIME);
+        Logger.info(BUNDLE + testName + 'end');
+      })
+
+      /**
+       * PopupDialog Popup
+       */
+      it(BUNDLE + 'PopupDialogFunction_001', 0, async () => {
+        let testName = 'PopupDialogFunction';
+        Logger.info(BUNDLE + testName + 'begin');
+        await driver.delayMs(DELAY_TIME);
+        await driver.findComponent(ON.text(await manager.getStringValue($r('app.string.global_popUp_menu'))));
+        // 进入页面
+        await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.global_popUp_menu')));
+        // 调整宽度
+        await driver.drag(214, 252, 546, 252);
+        // 点击Popup高级组件
+        await checkButtonAndClickWithID('popup_advanced')
+        await driver.click(200, 300);
+        // 点击Top
+        await checkButtonAndClickWithID('popup_top')
+        await driver.click(200, 300);
+        // 点击Bottom
+        await checkButtonAndClickWithID('popup_bottom')
+        await driver.click(200, 300);
+        // 点击Right
+        await checkButtonAndClickWithID('popup_right')
+        await driver.click(200, 300);
+        // 点击Left
+        await checkButtonAndClickWithID('popup_left')
+        await driver.click(200, 300);
+        // 点击TopRight
+        await checkButtonAndClickWithID('popup_topRight')
+        await driver.click(200, 300);
+        // 点击TopLeft
+        await checkButtonAndClickWithID('popup_topLeft')
+        await driver.click(200, 300);
+        // 点击BottomRight
+        await checkButtonAndClickWithID('popup_bottomRight')
+        await driver.click(200, 300);
+        // 点击BottomLeft
+        await checkButtonAndClickWithID('popup_bottomLeft')
+        await driver.click(200, 300);
+        // 点击RightTop
+        await checkButtonAndClickWithID('popup_rightTop')
+        await driver.click(200, 300);
+        // 点击LeftTop
+        await checkButtonAndClickWithID('popup_leftTop')
+        await driver.click(200, 300);
+        // 点击RightBottom
+        await checkButtonAndClickWithID('popup_rightBottom')
+        await driver.click(200, 300);
+        // 点击LeftBottom
+        await checkButtonAndClickWithID('popup_leftBottom')
+        await driver.click(200, 300);
         // 返回
         await checkButtonAndClickWithID('backBtn');
         await driver.delayMs(DELAY_TIME);

code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/ohosTest/resources/base/element/string.json

@@ -3626,6 +3626,42 @@
       "name": "navigator_title",
       "value": "Navigator"
     },
+    {
+      "name": "text_input_limit",
+      "value": "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"
+    },
+    {
+      "name": "text_clock_monovolume_numbers",
+      "value": "Monovolume Numbers"
+    },
+    {
+      "name": "global_popUp_menu",
+      "value": "Popup"
+    },
+    {
+      "name": "text_copy",
+      "value": "Copy"
+    },
+    {
+      "name": "copy_success",
+      "value": "Copy Success"
+    },
+    {
+      "name": "text_paste",
+      "value": "Paste"
+    },
+    {
+      "name": "paste_success",
+      "value": "Paste Success"
+    },
+    {
+      "name": "text_get",
+      "value": "Get"
+    },
+    {
+      "name": "global_bindSheet_menu",
+      "value": "BindSheet半模态"
+    },
     {
       "name": "list_introduction_properties",
       "value": "List properties"

code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/ohosTest/resources/en/element/string.json

@@ -2479,6 +2479,42 @@
       "name": "safe_area",
       "value": "SafeArea"
     },
+    {
+      "name": "text_input_limit",
+      "value": "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"
+    },
+    {
+      "name": "text_clock_monovolume_numbers",
+      "value": "Monovolume Numbers"
+    },
+    {
+      "name": "global_popUp_menu",
+      "value": "Popup"
+    },
+    {
+      "name": "text_copy",
+      "value": "Copy"
+    },
+    {
+      "name": "copy_success",
+      "value": "Copy Success"
+    },
+    {
+      "name": "text_paste",
+      "value": "Paste"
+    },
+    {
+      "name": "paste_success",
+      "value": "Paste Success"
+    },
+    {
+      "name": "text_get",
+      "value": "Get"
+    },
+    {
+      "name": "global_bindSheet_menu",
+      "value": "BindSheet半模态"
+    },
     {
       "name": "attribute_modifier",
       "value": "AttributeModifier"

code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/ohosTest/resources/zh/element/string.json

@@ -2173,6 +2173,42 @@
       "name": "safe_area",
       "value": "SafeArea 安全区域"
     },
+    {
+      "name": "text_input_limit",
+      "value": "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"
+    },
+    {
+      "name": "text_clock_monovolume_numbers",
+      "value": "变宽数字"
+    },
+    {
+      "name": "global_popUp_menu",
+      "value": "Popup"
+    },
+    {
+      "name": "text_copy",
+      "value": "复制"
+    },
+    {
+      "name": "copy_success",
+      "value": "复制成功"
+    },
+    {
+      "name": "text_paste",
+      "value": "粘贴"
+    },
+    {
+      "name": "paste_success",
+      "value": "粘贴成功"
+    },
+    {
+      "name": "text_get",
+      "value": "获取"
+    },
+    {
+      "name": "global_bindSheet_menu",
+      "value": "BindSheet半模态"
+    },
     {
       "name": "attribute_modifier",
       "value": "动态属性设置"

code/UI/ArkTsComponentCollection/ComponentCollection/ohosTest.md

@@ -22,7 +22,7 @@
 | 验证LoadingProgress                  | 展开信息展示与动效，进入LoadingProgress           | 更改LoadingProgress的颜色                                                                               | 正确更改相应的颜色         | 是    | Pass |
 | 验证Marquee 跑马灯                      | 展开信息展示与动效，进入Marquee 跑马灯               | 更改Marquee样式，依次开始，停止跑马灯                                                                             | 正确反馈状态，依次运行，停止跑马灯 | 是    | Pass |
 | 验证TextTimer 文字计时器                  | 展开信息展示与动效，进入TextTimer 文字计时器           | 依次开始、暂停、重置、更换时间格式                                                                                  | 正确运行状态            | 是    | Pass |
-| 验证TextClock 文字时钟                   | 展开信息展示与动效，进入TextClock 文字时钟            | 依次点击开始、暂停、更改时钟样式                                                                                   | 正确运行状态并改变样式       | 是    | Pass |
+| 验证TextClock 文字时钟                   | 展开信息展示与动效，进入TextClock 文字时钟            | 依次点击开始、暂停、更改时钟样式、显示文字阴影、设置字体                                        | 正确运行状态并改变样式       | 是    | Pass |
 | 验证Progress 进度条                     | 展开信息展示与动效，进入Progress 进度条              | 调整进度条的进度                                                                                           | 正确显示进度条的进度        | 是    | Pass |
 | 验证Gauge 仪表盘                        | 展开信息展示与动效，进入Gauge 仪表盘                 | 调整仪表盘的value和strokeWidth                                                                            | 正确改变仪表盘的属性        | 是    | Pass |
 | 验证DataPanel 数据面板                   | 展开信息展示与动效，进入DataPanel 数据面板            |                                                                                                    | 正确显示数据面板动画        | 是    | Pass |
@@ -31,7 +31,7 @@
 | 验证ImageFit 切换                      | 展开信息展示与动效，进入ImageFit 切换         | 依次点击Radius按钮进行ImageFit模式切换                                                                         | ImageFit 模式切换成功   | 是    | Pass |
 | 验证Particle粒子效果                     | 展开信息展示与动效，进入Particle粒子效果         | 点击Particle粒子效果生成按钮                                                                                 | Particle粒子效果生成成功  | 是    | Pass |
 | 验证Span 行内文本                        | 展开文本与输入，进入Span 行内文本                   | 依次调整字符间距，装饰线类型，跨度线高度，颜色                                                                            | 依次改变对于属性          | 是    | Pass |
-| 验证TextInput 文本输入                   | 展开文本与输入，进入TextInput 文本输入              | 在输入框输入文本，可否选择对应文本段选中并高亮                                                                            | 正确显示输入文本          | 是    | Pass |
+| 验证TextInput 文本输入                   | 展开文本与输入，进入TextInput 文本输入              | 在输入框输入文本，可否选择对应文本段选中并高亮，长按文本获取、复制、粘贴文本，验证文本删除                                 | 正确显示输入文本          | 是    | Pass |
 | 验证Text 文本                          | 展开文本与输入，进入Text 文本                     | 依次更改字符间距，行高，对其类型，超长文本显示方式，装饰线，字体颜色，大小写                                                             | 依次更改对应属性          | 是    | Pass |
 | 验证RichText 富文本                     | 展开文本与输入，进入RichText 富文本                |                                                                                                    | 正确显示富文本           | 是    | Pass |
 | 验证ScrollBar 滚动条                    | 展开辅助，进入ScrollBar 滚动条                  | 依次纵向滚动，横向滚动                                                                                        | 正确滚动              | 是    | Pass |
@@ -104,12 +104,14 @@
 | 验证motionPath 路径动画                  | 进入motionPath 路径动画                     | 点击按钮                                                                                               | 按钮按照指定的路径发生改变     | 是    | Pass |
 | 验证ActionSheetDialogSample 列表选择弹框   | 展开弹窗，ActionSheetDialogSample 列表选择弹框   | 依次点击弹窗位置、是否关闭弹窗、偏移量、选项内容                                                                           | 正确展示响应弹窗          | 是    | Pass |
 | 验证TextPickerDialogSample 文本滑动选择器弹框 | 展开弹窗，TextPickerDialogSample 文本滑动选择器弹框 | 点击文字，滑动列表后点确定                                                                                      | 正确展示响应弹窗          | 是    | Pass |
-| 验证MenuSample 菜单                    | 展开弹窗，MenuSample 菜单                    | 鼠标右键点击、手指触摸长按                                                                                      | 正确展示响应弹窗          | 是    | Pass |
+| 验证MenuSample 菜单                    | 展开弹窗，MenuSample 菜单                    | 鼠标右键点击、手指触摸长按、调整menu宽度、选择纵向或者横向布局、长按图片1图片2     | 正确展示响应弹窗          | 是    | Pass |
+| 验证BindSheet半模态 | 进入BindSheet半模态 | 点击弹出样式、模糊背景材质设置属性，然后点击弹出半模态按钮，关闭允许页面交互按钮，下拉半模态界面，然后点击X退出半模态界面 | 正确显示效果 | 是 | Pass |
+| 验证Popup | 进入Popup                                           | 依次点击Popup高级组件按钮以及Placement下方的12个按钮         | 正确显示效果                       | 是       | Pass     |
 | 验证Swiper组件	                        | 展开滚动与滑动，进入swiper翻页	                   | 依次点击下一页、上一页、是否被禁用左右滑动切换功能、是否能纵向滑动、是否首尾循环、是否开启自动循环播放、滑动页面间隙、滑动切换的动画时长、自动播放的时间间隔、上下页边距               | 正确显示效果            | 是    | Pass |
-| 验证TextArea组件                       | 展开文本与输入，进入TextArea多行文本输入框             | 依次点击水平对齐、可否复制、placeholder文本颜色、输入框光标颜色、可否选择对应文本段选中并高亮                                               | 正确显示效果	           | 是    | Pass |
-| 验证PatternLock组件                    | 	展开文本与输入，进入PatternLock图案密码锁           | 依次滑动宫格宽高、圆点半径、连线宽度以及点击圆点未选中状态颜色、圆点激活状态颜色                                                           | 正确显示效果            | 是    | Pass |                            
-| 验证Search组件  	                      | 展开文本与输入，进入Search搜索框	                  | 依次点击水平对齐、可否复制、搜索框本文颜色	                                                                             | 正确显示效果            | 是    | Pass |                                               
-| 验证Row组件	                           | 展开行列与分栏，进入Row水平布局                     | 依次滑动元素间距以及点击交叉轴对齐样式、主轴对齐样式                                                                         | 正确显示效果            | 是    | Pass |                                             
+| 验证TextArea组件                       | 展开文本与输入，进入TextArea多行文本输入框             | 依次点击水平对齐、可否复制、placeholder文本颜色、输入框光标颜色、可否选择对应文本段选中并高亮、限制文本框输入字数                                | 正确显示效果	           | 是    | Pass |
+| 验证PatternLock组件                    | 	展开文本与输入，进入PatternLock图案密码锁           | 依次滑动宫格宽高、圆点半径、连线宽度以及点击圆点未选中状态颜色、圆点激活状态颜色                                                           | 正确显示效果            | 是    | Pass |
+| 验证Search组件  	                      | 展开文本与输入，进入Search搜索框	                  | 依次点击水平对齐、可否复制、搜索框本文颜色	                                                                             | 正确显示效果            | 是    | Pass |
+| 验证Row组件	                           | 展开行列与分栏，进入Row水平布局                     | 依次滑动元素间距以及点击交叉轴对齐样式、主轴对齐样式                                                                         | 正确显示效果            | 是    | Pass |
 | 验证RowSplit组件                       | 	进入RowSplit水平分割布局                     | 	点击拖拽开关                                                                                            | 	正确显示效果           | 是    | Pass |
 | 验证Column组件	                        | 进入Column垂直布局	                         | 依次滑动元素间距以及点击交叉轴对齐样式、主轴对齐样式                                                                         | 	正确显示效果           | 是    | Pass |
 | 验证ColumnSplit组件	                   | 进入ColumnSplit垂直分割布局	                  | 点击拖拽开关	                                                                                            | 正确显示效果            | 是    | Pass |
@@ -120,7 +122,7 @@
 | 验证List组件	                          | 展开列表与宫格，进入List列表容器	                   | 依次点击修改List参数中所有参数设置	                                                                               | 正确显示效果            | 是    | Pass |
 | 验证ListItem组件                       | 	展开列表与宫格，进入Listitem	                  | 依次点击selectable	                                                                                    | 正确显示效果            | 是    | Pass |
 | 验证Grid组件	                          | 展开列表与宫格，进入Grid	                       | 依次点击columnsTemplate、rowsTemplate以及滑动columnGap	                                                     | 正确显示效果            | 是    | Pass |
-| 验证GridItem组件	                      | 展开列表与宫格，进入GridItem	                   | 依次点击修改起始行号、修改终点行号、修改起始列号、修改终点列号	                                                                   | 正确显示效果            | 是    | Pass |
+| 验证GridItem组件	                      | 展开列表与宫格，进入GridItem	                   | 依次点击修改起始行号、修改终点行号、修改起始列号、修改终点列号，选择多态样式	                                                            | 正确显示效果            | 是    | Pass |
 | 验证Navigation组件	                    | 展开导航、进入Navigation                     | 	点击去往第二个页面                                                                                         | 	正确显示效果           | 是    | Pass |
 | 验证Tabs组件                           | 展开导航，进入Tabs	                          | 依次点击修改Tabs的参数中的各个参数设置                                                                              | 正确显示效果            | 是    | Pass |
 | 验证TabContent组件	                    | 展开导航，进入TabContent	                    | 点击子页签/底部页签切换器	                                                                                     | 正确显示效果            | 是    | Pass |
@@ -137,6 +139,6 @@
 | 验证Image组件	                         | 展开图片视频与媒体，进入Image图片	                  | 依次点击缩放类型以及滑动裁剪高度、裁剪宽度以及点击渲染模式、重复样式	                                                                | 正确显示效果            | 是    | Pass |
 | 验证ImageAnimator组件	                 | 展开图片视频与媒体，进入ImageAnimator逐帧播放图片       | 	依次点击start、pause、end、reserve、single、circulate	                                                     | 正确显示效果            | 是    | Pass |
 | 验证Video组件	                         | 展开图片视频与媒体，进入Video视频	                  | 依次点击自动播放、控制栏显示、静音、循环播放、视频显示模式、倍速	                                                                  | 正确显示效果            | 是    | Pass |
-| 验证XComponent组件	                    | 展开图片视频与媒体，进入XComponent绘制组件            | 	无操作	                                                                                              | 正确显示效果            | 是    | Pass |                                                                                    
-| 验证web组件	                           | 展开网页，进入web网页                          | 	无操作                                                                                               | 	正确显示效果           | 是    | Pass |                                                           
+| 验证XComponent组件	                    | 展开图片视频与媒体，进入XComponent绘制组件            | 	无操作	                                                                                              | 正确显示效果            | 是    | Pass |
+| 验证web组件	                           | 展开网页，进入web网页                          | 	无操作                                                                                               | 	正确显示效果           | 是    | Pass |
 | 验证WaterFlow组件	                     | 展开列表与宫格，进入WaterFlow	                   | 依次点击WaterFlow参数、WaterFlow属性的所有设置	                                                                | 正确显示效果            | 是    | Pass |