diff --git a/README.en.md b/README.en.md
index 53e21d3e355ba5a98d71aa8e8067e8c202292be9..94d1e6ba2c9f84d838b38b9e0a847b8c7141ac38 100644
--- a/README.en.md
+++ b/README.en.md
@@ -15,7 +15,7 @@ The figure shows the effect on the foldable phone.
 
 The figure shows the effect on the tablet.
 
-![](screenshots/device/pad.en.png)
+![](screenshots/device/tablet.en.png)
 
 The figure shows the effect on the wearable.
 
@@ -73,19 +73,13 @@ The figure shows the effect on the wearable.
 4. Tap the comment button on the page to go to the corresponding comment page.
 5. Other buttons do not have actual tap events or functions.
 
-## Specific Implementation
-1. Use grid layout to monitor breakpoint changes and achieve differentiated display at various breakpoints.
-2. Switch between areas using the Tabs component or the Swiper component.
-3. Use the Blank component to achieve adaptive stretching of the middle space.
-4. Smart wearable devices set borderRadius to achieve a circular watch face.
-
-## Permissions
+### Permissions
 
 N/A
 
-## Constraints
+### Constraints
 
-1. The sample is only supported on standard systems and is compatible with the following devices: Huawei smartphones, tablets, PCs/2in1s, and smart wearables.
+1. The sample is only supported on Huawei phones, tablets and smart wearables with standard systems.
 2. HarmonyOS: HarmonyOS 5.1.0 Release or later.
 3. DevEco Studio: DevEco Studio 5.1.0 Release or later.
 4. HarmonyOS SDK: HarmonyOS 5.1.0 Release SDK or later.
diff --git a/README.md b/README.md
index f70b5b5f5885bb3c9783e04d4274705f4a23f527..8fea407484a1ff7fcadcb44b6cd9a788f6a47101 100644
--- a/README.md
+++ b/README.md
@@ -15,7 +15,8 @@
 
 平板效果图如下：
 
-![](screenshots/device/pad.png)
+![](screenshots/device/tablet.png)
+![](screenshots/device/tablet.png)
 
 智能穿戴效果图如下：
 
@@ -84,7 +85,7 @@
 
 ## 约束与限制
 
-1. 本示例仅支持标准系统上运行，支持设备：华为手机、平板、PC/2in1、智能穿戴。
+1. 本示例仅支持标准系统上运行，支持设备：华为手机、平板、智能穿戴。
 2. HarmonyOS系统：HarmonyOS 5.1.0 Release及以上。
 3. DevEco Studio版本：DevEco Studio 5.1.0 Release及以上。
 4. HarmonyOS SDK版本：HarmonyOS 5.1.0 Release SDK及以上。
\ No newline at end of file
diff --git a/build-profile.json5 b/build-profile.json5
index 87aa30168395a8a5e8a7998f74923c2004140ee9..de53589d8883948be10dbf11bb60e97deed3f21a 100644
--- a/build-profile.json5
+++ b/build-profile.json5
@@ -6,8 +6,8 @@
         "name": "default",
         "signingConfig": "default",
         "compatibleSdkVersion": "5.1.0(18)",
-        "runtimeOS": "HarmonyOS",
-        "targetSdkVersion": "5.1.0(18)"
+        "targetSdkVersion": "5.1.0(18)",
+        "runtimeOS": "HarmonyOS"
       }
     ],
     "buildModeSet": [
diff --git a/common/constantsCommon/src/main/module.json5 b/common/constantsCommon/src/main/module.json5
index b8362aef028a49d53721481d3937f92cfba851e3..3ba42b9d30da28d091a7b212952d5134b9a56eb4 100644
--- a/common/constantsCommon/src/main/module.json5
+++ b/common/constantsCommon/src/main/module.json5
@@ -4,8 +4,7 @@
     "type": "har",
     "deviceTypes": [
       "phone",
-      "tablet",
-      "2in1"
+      "tablet"
     ]
   }
 }
diff --git a/common/mediaCommon/oh-package.json5 b/common/mediaCommon/oh-package.json5
index 4352ce95c3b559b52eb42574e0252fa68481d9fc..241ae06cbf6c7eccfd2d6abc48b95659b0803ed7 100644
--- a/common/mediaCommon/oh-package.json5
+++ b/common/mediaCommon/oh-package.json5
@@ -7,6 +7,6 @@
   "main": "index.ets",
   "version": "1.0.0",
   "dependencies": {
-    "@ohos/constantsCommon": "file:../constantsCommon"
+    "constantscommon": "file:../constantsCommon"
   }
 }
diff --git a/common/mediaCommon/src/main/ets/utils/BreakpointSystem.ets b/common/mediaCommon/src/main/ets/utils/BreakpointSystem.ets
index 2c1cdd2f998e7c7e2f4573042fb7b4142fdd2634..5b802ced25445e6a650aeb14478f6a23911624cb 100644
--- a/common/mediaCommon/src/main/ets/utils/BreakpointSystem.ets
+++ b/common/mediaCommon/src/main/ets/utils/BreakpointSystem.ets
@@ -14,7 +14,7 @@
  */
 
 import { mediaquery } from '@kit.ArkUI';
-import { BreakpointConstants } from '@ohos/constantsCommon';
+import { BreakpointConstants } from 'constantscommon';
 
 declare interface BreakPointTypeOption<T> {
   sm?: T,
diff --git a/common/mediaCommon/src/main/ets/utils/MediaService.ets b/common/mediaCommon/src/main/ets/utils/MediaService.ets
index a144956fbbcdbdb677ece54fbfa63046415e4c8e..d07f5411c9451bfe2b5a8a4cae3f7123843badbd 100644
--- a/common/mediaCommon/src/main/ets/utils/MediaService.ets
+++ b/common/mediaCommon/src/main/ets/utils/MediaService.ets
@@ -20,7 +20,7 @@ import { formProvider } from '@kit.FormKit';
 import { formBindingData } from '@kit.FormKit';
 import { BusinessError } from '@kit.BasicServicesKit';
 import { resourceManager } from '@kit.LocalizationKit';
-import { SongConstants } from '@ohos/constantsCommon';
+import { SongConstants } from 'constantscommon';
 import SongItemBuilder from './SongItemBuilder';
 import { AudioPlayerState, MusicPlayMode } from '../viewmodel/MusicData';
 import { SongItem } from '../viewmodel/SongData';
diff --git a/common/mediaCommon/src/main/module.json5 b/common/mediaCommon/src/main/module.json5
index d9506d28ab0400af0bd2e8f7761f855d41655fc9..635b0a9b8029372b7c124a7471d9dd038758f6ee 100644
--- a/common/mediaCommon/src/main/module.json5
+++ b/common/mediaCommon/src/main/module.json5
@@ -4,9 +4,7 @@
     "type": "har",
     "deviceTypes": [
       "phone",
-      "tablet",
-      "2in1",
-      "wearable"
+      "tablet"
     ],
     "requestPermissions": [
       {
diff --git a/features/live/src/main/ets/view/LivePage.ets b/features/live/src/main/ets/view/LivePage.ets
index 7569800ee86bc81f36a136d6fd455a11ebc31b9e..05f590738b7a8258ed782d4ab07f3a5ff72c3040 100644
--- a/features/live/src/main/ets/view/LivePage.ets
+++ b/features/live/src/main/ets/view/LivePage.ets
@@ -19,6 +19,8 @@ import { LiveConstants} from '../constants/LiveConstants';
 
 @Component
 export struct LivePage {
+  @StorageLink('topRectHeight') topRectHeight: number = 0;
+
   build() {
     Column() {
       Header()
@@ -26,5 +28,6 @@ export struct LivePage {
     }
     .width(LiveConstants.FULL_WIDTH_PERCENT)
     .height(LiveConstants.FULL_HEIGHT_PERCENT)
+    .padding({ top: this.getUIContext().px2vp(this.topRectHeight) })
   }
 }
\ No newline at end of file
diff --git a/features/live/src/main/module.json5 b/features/live/src/main/module.json5
index 3264dd91d5019e645f37f7e6aba02e2939628ed7..fd84d2c0e1a3a04fe4f7238a75948b3e80b0a323 100644
--- a/features/live/src/main/module.json5
+++ b/features/live/src/main/module.json5
@@ -5,8 +5,7 @@
     "description": "$string:shared_desc",
     "deviceTypes": [
       "phone",
-      "tablet",
-      "2in1"
+      "tablet"
     ]
   }
 }
\ No newline at end of file
diff --git a/features/musicComment/oh-package.json5 b/features/musicComment/oh-package.json5
index 040de4ceca956aee7704bcbc8a8ebc09022c0193..d4f21911118918b1cbd171dc9a4a478fa692b61f 100644
--- a/features/musicComment/oh-package.json5
+++ b/features/musicComment/oh-package.json5
@@ -7,7 +7,7 @@
   "main": "./Index.ets",
   "version": "1.0.0",
   "dependencies": {
-    "@ohos/mediaCommon": "file:../../common/mediaCommon",
-    "@ohos/constantsCommon": "file:../../common/constantsCommon"
+    "mediacommon": "file:../../common/mediaCommon",
+    "constantscommon": "file:../../common/constantsCommon"
   }
 }
diff --git a/features/musicComment/src/main/ets/view/HeadComponent.ets b/features/musicComment/src/main/ets/view/HeadComponent.ets
index 5c03a739e3011b0469ef81966c31e66b1423ab18..756b712e2b0656bad30a84f83b54a539789e61fd 100644
--- a/features/musicComment/src/main/ets/view/HeadComponent.ets
+++ b/features/musicComment/src/main/ets/view/HeadComponent.ets
@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import { StyleConstants } from '@ohos/constantsCommon';
+import { StyleConstants } from 'constantscommon';
 
 @Component
 export struct HeadComponent {
diff --git a/features/musicComment/src/main/ets/view/ListItemComponent.ets b/features/musicComment/src/main/ets/view/ListItemComponent.ets
index 5bfc207ddc21d210401624c3efbb997f7e31e48e..a0b69f6ad053136e4621254eaec83151e739cbc7 100644
--- a/features/musicComment/src/main/ets/view/ListItemComponent.ets
+++ b/features/musicComment/src/main/ets/view/ListItemComponent.ets
@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import { StyleConstants } from '@ohos/constantsCommon';
+import { StyleConstants } from 'constantscommon';
 import { Comment } from '../viewmodel/Comment';
 import { CommonConstants } from '../constants/CommonConstants';
 
diff --git a/features/musicComment/src/main/ets/view/MusicCommentPage.ets b/features/musicComment/src/main/ets/view/MusicCommentPage.ets
index a95d12e8df53ed387b10c923be1ec3838fcb7f5f..6a0a2032694a9d734a4e4ed8d1360a312feea7bc 100644
--- a/features/musicComment/src/main/ets/view/MusicCommentPage.ets
+++ b/features/musicComment/src/main/ets/view/MusicCommentPage.ets
@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import { StyleConstants, BreakpointConstants } from '@ohos/constantsCommon';
+import { StyleConstants, BreakpointConstants } from 'constantscommon';
 import { Comment } from '../viewmodel/Comment';
 import CommentViewModel from '../viewmodel/CommentViewModel';
 import { ListItemComponent } from './ListItemComponent';
@@ -26,8 +26,11 @@ export struct MusicCommentPage {
   @StorageProp('currentBreakpoint') currentBp: string = BreakpointConstants.BREAKPOINT_SM;
   @State wonderfulComment: Comment[] = CommentViewModel.getWonderfulReview();
   @State newComment: Comment[] = CommentViewModel.getNewComment();
+  @StorageLink('topRectHeight') topRectHeight: number = 0;
+  @StorageLink('bottomRectHeight') bottomRectHeight: number = 0;
 
-  @Builder ShowTitle(title: ResourceStr) {
+  @Builder
+  ShowTitle(title: ResourceStr) {
     Row() {
       Text(title)
         .fontSize($r('app.float.comment_title_size'))
@@ -38,9 +41,9 @@ export struct MusicCommentPage {
           top: $r('app.float.title_margin_top'),
           bottom: $r('app.float.title_margin_bottom'),
           left: this.currentBp === BreakpointConstants.BREAKPOINT_SM ?
-          $r('app.float.margin_left_sm') : $r('app.float.margin_left'),
+            $r('app.float.margin_left_sm') : $r('app.float.margin_left'),
           right: this.currentBp === BreakpointConstants.BREAKPOINT_SM ?
-          $r('app.float.margin_right_sm') : $r('app.float.margin_right')
+            $r('app.float.margin_right_sm') : $r('app.float.margin_right')
         })
     }
     .justifyContent(FlexAlign.Start)
@@ -128,21 +131,21 @@ export struct MusicCommentPage {
             color: $r('app.color.list_divider'),
             strokeWidth: $r('app.float.stroke_width'),
             startMargin: this.currentBp === BreakpointConstants.BREAKPOINT_SM ?
-            $r('app.float.start_margin') : $r('app.float.start_margin_lg'),
+              $r('app.float.start_margin') : $r('app.float.start_margin_lg'),
             endMargin: this.currentBp === BreakpointConstants.BREAKPOINT_SM ?
               0 : $r('app.float.divider_margin_left')
           })
           .margin({
             left: this.currentBp === BreakpointConstants.BREAKPOINT_SM ?
-            $r('app.float.margin_left_sm') : $r('app.float.margin_left_list'),
+              $r('app.float.margin_left_sm') : $r('app.float.margin_left_list'),
             right: this.currentBp === BreakpointConstants.BREAKPOINT_SM ?
-            $r('app.float.margin_right_sm') : $r('app.float.margin_right_list')
+              $r('app.float.margin_right_sm') : $r('app.float.margin_right_list')
           })
 
           this.ShowTitle($r('app.string.new_comment'));
 
           List() {
-            ForEach(this.newComment, (comment: Comment) => {
+            ForEach(this.newComment, (comment: Comment, index: number) => {
               ListItem() {
                 ListItemComponent({ item: comment })
                   .margin({
@@ -154,7 +157,8 @@ export struct MusicCommentPage {
               }
               .width(StyleConstants.FULL_WIDTH)
               .padding({
-                bottom: $r('app.float.padding_bottom')
+                bottom: index === this.newComment.length - 1 ? this.getUIContext().px2vp(this.bottomRectHeight) :
+                  $r('app.float.padding_bottom')
               })
             }, (item: Comment, index?: number) => index + JSON.stringify(item))
           }
@@ -163,15 +167,15 @@ export struct MusicCommentPage {
           .scrollBar(BarState.Off)
           .margin({
             left: this.currentBp === BreakpointConstants.BREAKPOINT_SM ?
-            $r('app.float.margin_left_sm') : $r('app.float.margin_left_list'),
+              $r('app.float.margin_left_sm') : $r('app.float.margin_left_list'),
             right: this.currentBp === BreakpointConstants.BREAKPOINT_SM ?
-            $r('app.float.margin_right_sm') : $r('app.float.margin_right_list')
+              $r('app.float.margin_right_sm') : $r('app.float.margin_right_list')
           })
           .divider({
             color: $r('app.color.list_divider'),
             strokeWidth: $r('app.float.stroke_width'),
             startMargin: this.currentBp === BreakpointConstants.BREAKPOINT_SM ?
-            $r('app.float.start_margin') : $r('app.float.start_margin_lg'),
+              $r('app.float.start_margin') : $r('app.float.start_margin_lg'),
             endMargin: this.currentBp === BreakpointConstants.BREAKPOINT_SM ?
               0 : $r('app.float.divider_margin_left')
           })
@@ -180,5 +184,6 @@ export struct MusicCommentPage {
       }
     }
     .backgroundColor(Color.White)
+    .padding({ top: this.getUIContext().px2vp(this.topRectHeight) })
   }
 }
\ No newline at end of file
diff --git a/features/musicComment/src/main/ets/view/MusicInfoComponent.ets b/features/musicComment/src/main/ets/view/MusicInfoComponent.ets
index 7451cce7978106f6d5fb99f27234c6704edc345d..83e6548b9742fef82ef25d3531773485af954619 100644
--- a/features/musicComment/src/main/ets/view/MusicInfoComponent.ets
+++ b/features/musicComment/src/main/ets/view/MusicInfoComponent.ets
@@ -13,8 +13,8 @@
  * limitations under the License.
  */
 
-import { SongItem } from '@ohos/mediaCommon';
-import { StyleConstants } from '@ohos/constantsCommon';
+import { SongItem } from 'mediacommon';
+import { StyleConstants } from 'constantscommon';
 
 @Component
 export struct MusicInfoComponent {
diff --git a/features/musicComment/src/main/module.json5 b/features/musicComment/src/main/module.json5
index 373e135f841985eb61263293572cc82ecdc8e780..1b64db9bfae9180d0d14ef808cbb551d1fc25e41 100644
--- a/features/musicComment/src/main/module.json5
+++ b/features/musicComment/src/main/module.json5
@@ -5,8 +5,7 @@
     "description": "$string:shared_desc",
     "deviceTypes": [
       "phone",
-      "tablet",
-      "2in1"
+      "tablet"
     ]
   }
 }
\ No newline at end of file
diff --git a/features/musicList/oh-package.json5 b/features/musicList/oh-package.json5
index c1a58ffcc7420d758ff537f7f310c55a8dcb8d2d..e5993b3fa22f447e2bbf3a2d5c73e2b0fb868793 100644
--- a/features/musicList/oh-package.json5
+++ b/features/musicList/oh-package.json5
@@ -2,12 +2,12 @@
   "license": "Apache-2.0",
   "devDependencies": {},
   "author": "",
-  "name": "@ohos/musiclist",
+  "name": "musiclist",
   "description": "Please describe the basic information.",
   "main": "./Index.ets",
   "version": "1.0.0",
   "dependencies": {
-    "@ohos/mediaCommon": "file:../../common/mediaCommon",
-    "@ohos/constantsCommon": "file:../../common/constantsCommon"
+    "mediacommon": "file:../../common/mediaCommon",
+    "constantscommon": "file:../../common/constantsCommon"
   }
 }
diff --git a/features/musicList/src/main/ets/components/AlbumComponent.ets b/features/musicList/src/main/ets/components/AlbumComponent.ets
index f6b8f56e94d493880afecaad80ed3c6afd0c1586..cd31cd89ef31a8084b011191bb42e7c6ab74ecec 100644
--- a/features/musicList/src/main/ets/components/AlbumComponent.ets
+++ b/features/musicList/src/main/ets/components/AlbumComponent.ets
@@ -13,8 +13,8 @@
  * limitations under the License.
  */
 
-import { BreakpointConstants, GridConstants, StyleConstants } from '@ohos/constantsCommon';
-import { BreakpointType } from '@ohos/mediaCommon';
+import { BreakpointConstants, GridConstants, StyleConstants } from 'constantscommon';
+import { BreakpointType } from 'mediacommon';
 import { OptionItem, optionList } from '../viewmodel/SongListData';
 import { ContentConstants } from '../constants/ContentConstants';
 
diff --git a/features/musicList/src/main/ets/components/AlbumCover.ets b/features/musicList/src/main/ets/components/AlbumCover.ets
index da0a5ba22fb0e650e037b10778e2bbc63b75f2be..201367d6cfd195c60aa747acfb6f4249fc05d38b 100644
--- a/features/musicList/src/main/ets/components/AlbumCover.ets
+++ b/features/musicList/src/main/ets/components/AlbumCover.ets
@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import { BreakpointConstants, StyleConstants } from '@ohos/constantsCommon';
+import { BreakpointConstants, StyleConstants } from 'constantscommon';
 import { AlbumComponent } from './AlbumComponent';
 
 @Component
diff --git a/features/musicList/src/main/ets/components/ControlAreaComponent.ets b/features/musicList/src/main/ets/components/ControlAreaComponent.ets
index 6605ea33659af3543224b7e47e97ddede1be650e..51d096acb8513ff41cc0ec303065a174084e3b54 100644
--- a/features/musicList/src/main/ets/components/ControlAreaComponent.ets
+++ b/features/musicList/src/main/ets/components/ControlAreaComponent.ets
@@ -13,8 +13,8 @@
  * limitations under the License.
  */
 
-import { BreakpointConstants, StyleConstants } from '@ohos/constantsCommon';
-import { BreakpointType, MediaService } from '@ohos/mediaCommon';
+import { BreakpointConstants, StyleConstants } from 'constantscommon';
+import { BreakpointType, MediaService } from 'mediacommon';
 import { PlayerConstants } from '../constants/PlayerConstants';
 
 @Preview
diff --git a/features/musicList/src/main/ets/components/Header.ets b/features/musicList/src/main/ets/components/Header.ets
index eee4c830125a8a161fa57cc230aaaf4d50be7e68..ee29363524c10c7e00495d134dffab6d07fcfcac 100644
--- a/features/musicList/src/main/ets/components/Header.ets
+++ b/features/musicList/src/main/ets/components/Header.ets
@@ -14,8 +14,8 @@
  */
 
 import { promptAction } from '@kit.ArkUI';
-import { BreakpointType, MenuData } from '@ohos/mediaCommon';
-import { BreakpointConstants, StyleConstants } from '@ohos/constantsCommon';
+import { BreakpointType, MenuData } from 'mediacommon';
+import { BreakpointConstants, StyleConstants } from 'constantscommon';
 import { HeaderConstants } from '../constants/HeaderConstants';
 
 @Component
diff --git a/features/musicList/src/main/ets/components/ListContent.ets b/features/musicList/src/main/ets/components/ListContent.ets
index 708128c02546cbeda431ed98150ea5442ddeed00..9e0c49b1210cfe4db85b0b424dca433aedf7ed33 100644
--- a/features/musicList/src/main/ets/components/ListContent.ets
+++ b/features/musicList/src/main/ets/components/ListContent.ets
@@ -13,13 +13,14 @@
  * limitations under the License.
  */
 
-import { BreakpointConstants, GridConstants, StyleConstants } from '@ohos/constantsCommon';
+import { BreakpointConstants, GridConstants, StyleConstants } from 'constantscommon';
 import { AlbumCover } from './AlbumCover';
 import { PlayList } from './PlayList';
 
 @Component
 export struct Content {
   @StorageProp('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_SM;
+  @StorageLink('topRectHeight') topRectHeight: number = 0;
 
   build() {
     GridRow({
@@ -35,11 +36,16 @@ export struct Content {
     }) {
       GridCol({ span: { sm: GridConstants.SPAN_TWELVE, md: GridConstants.SPAN_SIX, lg: GridConstants.SPAN_FOUR } }) {
         AlbumCover({ currentBreakpoint: this.currentBreakpoint })
+          .padding({ top: this.getUIContext().px2vp(this.topRectHeight) })
       }
       .backgroundColor($r('app.color.album_background'))
 
       GridCol({ span: { sm: GridConstants.SPAN_TWELVE, md: GridConstants.SPAN_SIX, lg: GridConstants.SPAN_EIGHT } }) {
         PlayList({ currentBreakpoint: this.currentBreakpoint })
+          .padding({
+            top: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ? 0 :
+              this.getUIContext().px2vp(this.topRectHeight)
+          })
       }
       .borderRadius($r('app.float.playlist_border_radius'))
     }
diff --git a/features/musicList/src/main/ets/components/LyricsComponent.ets b/features/musicList/src/main/ets/components/LyricsComponent.ets
index cac1b40a3a955c1b3809dc9126f658764426774e..0018b1bd0effd859895b8f2db149639591dfdde5 100644
--- a/features/musicList/src/main/ets/components/LyricsComponent.ets
+++ b/features/musicList/src/main/ets/components/LyricsComponent.ets
@@ -15,8 +15,8 @@
 
 import { common } from '@kit.AbilityKit';
 import { util } from '@kit.ArkTS';
-import { BreakpointType, Logger, SongItem } from '@ohos/mediaCommon';
-import { BreakpointConstants, StyleConstants } from '@ohos/constantsCommon';
+import { BreakpointType, Logger, SongItem } from 'mediacommon';
+import { BreakpointConstants, StyleConstants } from 'constantscommon';
 import { LrcEntry } from '../lyric/LrcEntry';
 import { parseKrcLyric, parseLrcLyric } from '../lyric/LrcUtils';
 import LrcView from '../lyric/LrcView';
diff --git a/features/musicList/src/main/ets/components/MusicControlComponent.ets b/features/musicList/src/main/ets/components/MusicControlComponent.ets
index 0c8765efe116822d6a415555aa576365ccec2790..72d6894072ffb7747c5a4f7794e03cb8753ea72f 100644
--- a/features/musicList/src/main/ets/components/MusicControlComponent.ets
+++ b/features/musicList/src/main/ets/components/MusicControlComponent.ets
@@ -18,8 +18,10 @@ import { image } from '@kit.ImageKit';
 import { effectKit } from '@kit.ArkGraphics2D';
 import { common } from '@kit.AbilityKit';
 import { BusinessError, Callback } from '@kit.BasicServicesKit';
-import { BreakpointConstants, StyleConstants } from '@ohos/constantsCommon';
-import { ColorConversion, Logger, SongItem } from '@ohos/mediaCommon';
+import { BreakpointConstants, StyleConstants } from 'constantscommon';
+import { ColorConversion, Logger, SongItem } from 'mediacommon';
+import { BreakpointConstants, StyleConstants } from 'constantscommon';
+import { ColorConversion, Logger, SongItem } from 'mediacommon';
 import { LyricsComponent } from './LyricsComponent';
 import { MusicInfoComponent } from './MusicInfoComponent';
 import { ControlAreaComponent } from './ControlAreaComponent';
@@ -79,6 +81,7 @@ export struct MusicControlComponent {
       } catch (error) {
         Logger.error(TAG, `${error.code} + ${error.message}`);
       }
+      this.isFoldFull = false;
     }
   }
 
diff --git a/features/musicList/src/main/ets/components/MusicInfoComponent.ets b/features/musicList/src/main/ets/components/MusicInfoComponent.ets
index 967036f453d4e6b8fb454bd29987406d1148836a..6f19935dff57c85d1f14b76a46679e421f5a082f 100644
--- a/features/musicList/src/main/ets/components/MusicInfoComponent.ets
+++ b/features/musicList/src/main/ets/components/MusicInfoComponent.ets
@@ -13,8 +13,8 @@
  * limitations under the License.
  */
 
-import { BreakpointConstants, StyleConstants } from '@ohos/constantsCommon';
-import { SongItem } from '@ohos/mediaCommon';
+import { BreakpointConstants, StyleConstants } from 'constantscommon';
+import { SongItem } from 'mediacommon';
 import { PlayerConstants } from '../constants/PlayerConstants';
 import { ControlAreaComponent } from './ControlAreaComponent';
 
diff --git a/features/musicList/src/main/ets/components/PlayList.ets b/features/musicList/src/main/ets/components/PlayList.ets
index 1ad3f2e5d6363a729dcdd1b772a602902a39f3fe..8afebdc7863eb36386cf9cab04b49dbab3a4b495 100644
--- a/features/musicList/src/main/ets/components/PlayList.ets
+++ b/features/musicList/src/main/ets/components/PlayList.ets
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import  { BreakpointConstants, StyleConstants } from '@ohos/constantsCommon';
-import { MediaService, SongItem, BreakpointType } from '@ohos/mediaCommon';
+import { BreakpointConstants, StyleConstants } from 'constantscommon';
+import { MediaService, SongItem, BreakpointType } from 'mediacommon';
 import { SongDataSource } from '../viewmodel/SongDataSource';
 import { ContentConstants } from '../constants/ContentConstants';
 
@@ -24,6 +24,7 @@ export struct PlayList {
   @Link currentBreakpoint: string;
   @StorageLink('songList') songList: SongItem[] = [];
   @StorageLink('isShowPlay') isShowPlay: boolean = false;
+  @StorageLink('bottomRectHeight') bottomRectHeight: number = 0;
 
   @Builder
   PlayAll() {
@@ -140,7 +141,7 @@ export struct PlayList {
     }
     .padding({
       top: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ? 0 : $r('app.float.list_area_padding_top'),
-      bottom: $r('app.float.list_area_padding_bottom')
+      bottom: 48 + this.getUIContext().px2vp(this.bottomRectHeight)
     })
   }
 }
\ No newline at end of file
diff --git a/features/musicList/src/main/ets/components/Player.ets b/features/musicList/src/main/ets/components/Player.ets
index 9e7c65a38993e41267cd9f7b2bb1ca9e5ef18713..aaad3ffb501f1cd4f093efba3055c84eb8beacc7 100644
--- a/features/musicList/src/main/ets/components/Player.ets
+++ b/features/musicList/src/main/ets/components/Player.ets
@@ -16,8 +16,8 @@
 import { curves, window } from '@kit.ArkUI';
 import { displaySync } from '@kit.ArkGraphics2D';
 import { BusinessError } from '@kit.BasicServicesKit';
-import { BreakpointConstants, StyleConstants } from '@ohos/constantsCommon';
-import { BreakpointType, Logger, MediaService, SongItem } from '@ohos/mediaCommon';
+import { BreakpointConstants, StyleConstants } from 'constantscommon';
+import { BreakpointType, Logger, MediaService, SongItem } from 'mediacommon';
 import { PlayerConstants } from '../constants/PlayerConstants';
 import { MusicControlComponent } from './MusicControlComponent';
 import { common } from '@kit.AbilityKit';
@@ -35,15 +35,17 @@ export struct Player {
   @StorageLink('isShowPlay') isShowPlay: boolean = false;
   @State componentHeight: number = 0;
   @StorageLink('deviceHeight') deviceHeight: number = 0;
+  @StorageLink('bottomRectHeight') bottomRectHeight: number = 0;
   private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Vertical });
   private backDisplaySyncSlow: displaySync.DisplaySync | undefined = undefined;
   private context = this.getUIContext().getHostContext() as common.UIAbilityContext;
   private drawFrame: (value: displaySync.IntervalInfo) => void = (value: displaySync.IntervalInfo) => {
-    if (this.imageRotate >= 360 ) {
+    if (this.imageRotate >= 360) {
       this.imageRotate = 0;
     }
     this.imageRotate += 1;
   };
+
   animationFun() {
     if (this.isPlay) {
       this.backDisplaySyncSlow?.start();
@@ -53,7 +55,7 @@ export struct Player {
   }
 
   aboutToAppear() {
-    let range : ExpectedFrameRateRange = {
+    let range: ExpectedFrameRateRange = {
       expected: 30,
       min: 0,
       max: 30
@@ -155,12 +157,12 @@ export struct Player {
       .justifyContent(FlexAlign.End)
     }
     .width(StyleConstants.FULL_WIDTH)
-    .height($r('app.float.player_area_height'))
     .backgroundColor($r('app.color.player_background'))
     .bindContentCover($$this.isShowPlay, this.musicPlayBuilder(), ModalTransition.DEFAULT)
     .padding({
       left: $r('app.float.player_padding'),
-      right: $r('app.float.player_padding')
+      right: $r('app.float.player_padding'),
+      bottom: this.getUIContext().px2vp(this.bottomRectHeight)
     })
     .position({
       x: 0,
@@ -168,7 +170,7 @@ export struct Player {
     })
     .translate({
       x: 0,
-      y: StyleConstants.TRANSLATE_PLAYER_Y
+      y: -(48 + this.getUIContext().px2vp(this.bottomRectHeight))
     })
     .gesture(
       PanGesture(this.panOption)
@@ -178,6 +180,7 @@ export struct Player {
           }
         })
     )
+    .height(48 + this.getUIContext().px2vp(this.bottomRectHeight))
   }
 
   @Builder
@@ -198,10 +201,7 @@ export struct Player {
         this.topArea = this.getUIContext().px2vp(area.topRect.height);
         let bottomArea = windowStage.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR);
         this.bottomArea = this.getUIContext().px2vp(bottomArea.bottomRect.height);
-        Logger.info('bottomArea ' + this.bottomArea);
-        if (this.topArea > 0) {
-          windowStage.setWindowLayoutFullScreen(true);
-        }
+        Logger.info('bottomArea ' + this.bottomArea)
         let sysBarProps: window.SystemBarProperties = {
           statusBarContentColor: '#FFFFFF'
         };
@@ -214,11 +214,6 @@ export struct Player {
       this.componentHeight = 0;
       this.isShowPlay = false;
       window.getLastWindow(this.context).then((windowStage: window.Window) => {
-        let area = windowStage.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM);
-        let topHeight = this.getUIContext().px2vp(area.topRect.height);
-        if (topHeight > 0) {
-          windowStage.setWindowLayoutFullScreen(false);
-        }
         let sysBarProps: window.SystemBarProperties = {
           statusBarContentColor: '#000000'
         };
diff --git a/features/musicList/src/main/ets/components/TopAreaComponent.ets b/features/musicList/src/main/ets/components/TopAreaComponent.ets
index 503cdcff8931d1babd8075a2b0110f27f7a4f8b6..6292604b4a4d45960d81687e3e5feeca68979472 100644
--- a/features/musicList/src/main/ets/components/TopAreaComponent.ets
+++ b/features/musicList/src/main/ets/components/TopAreaComponent.ets
@@ -13,8 +13,8 @@
  * limitations under the License.
  */
 
-import { BreakpointConstants, StyleConstants } from '@ohos/constantsCommon';
-import { BreakpointType } from '@ohos/mediaCommon';
+import { BreakpointConstants, StyleConstants } from 'constantscommon';
+import { BreakpointType } from 'mediacommon';
 
 @Component
 export struct TopAreaComponent {
diff --git a/features/musicList/src/main/ets/lyric/LrcUtils.ets b/features/musicList/src/main/ets/lyric/LrcUtils.ets
index 77e97acd7d8418ba749cf4043fab873e0dded796..d86b460285c3d000bc8664667f95926bc0ecae8b 100644
--- a/features/musicList/src/main/ets/lyric/LrcUtils.ets
+++ b/features/musicList/src/main/ets/lyric/LrcUtils.ets
@@ -14,7 +14,7 @@
  */
 
 import { util } from '@kit.ArkTS';
-import { Logger } from '@ohos/mediaCommon';
+import { Logger } from 'mediacommon';
 import { LrcEntry, Word } from './LrcEntry';
 
 /**
diff --git a/features/musicList/src/main/ets/lyric/LrcView.ets b/features/musicList/src/main/ets/lyric/LrcView.ets
index 260100e661d1ab17de081ece33f11c69fd762d61..bf0f49a3514bd407f944166dd72bd9c86ac3b9a0 100644
--- a/features/musicList/src/main/ets/lyric/LrcView.ets
+++ b/features/musicList/src/main/ets/lyric/LrcView.ets
@@ -14,7 +14,7 @@
  */
 
 import { Animator, AnimatorResult } from '@kit.ArkUI';
-import { Logger } from '@ohos/mediaCommon';
+import { Logger } from 'mediacommon';
 import { LrcEntry } from './LrcEntry';
 import { angleToRadian } from './LrcUtils';
 import { Rectangle, LyricTopPosition, LyricScrollEffect } from './LyricConst';
diff --git a/features/musicList/src/main/ets/view/MusicListPage.ets b/features/musicList/src/main/ets/view/MusicListPage.ets
index 8be59aeb2e2fa4204f118baf0f029170151dd3ef..43ec4e9d38626b338d0989862813b0e17a5b1f98 100644
--- a/features/musicList/src/main/ets/view/MusicListPage.ets
+++ b/features/musicList/src/main/ets/view/MusicListPage.ets
@@ -13,8 +13,8 @@
  * limitations under the License.
  */
 
-import { BreakpointSystem, MediaService } from '@ohos/mediaCommon';
-import { StyleConstants, BreakpointConstants, SongConstants } from '@ohos/constantsCommon';
+import { BreakpointSystem, MediaService } from 'mediacommon';
+import { StyleConstants, BreakpointConstants, SongConstants } from 'constantscommon';
 import { Header } from '../components/Header';
 import { Player } from '../components/Player';
 import { Content } from '../components/ListContent';
@@ -25,6 +25,7 @@ export struct MusicListPage {
   private breakpointSystem: BreakpointSystem = new BreakpointSystem();
   @StorageProp('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_SM;
   @StorageLink('deviceHeight') deviceHeight: number = 0;
+  @StorageLink('topRectHeight') topRectHeight: number = 0;
 
   aboutToAppear() {
     AppStorage.setOrCreate('songList', songList);
@@ -39,6 +40,8 @@ export struct MusicListPage {
   build() {
     Stack({ alignContent: Alignment.Top }) {
       Header()
+        .margin({ top: this.getUIContext().px2vp(this.topRectHeight) })
+        .zIndex(2)
       Content()
       Player()
     }
diff --git a/features/musicList/src/main/ets/viewmodel/SongDataSource.ets b/features/musicList/src/main/ets/viewmodel/SongDataSource.ets
index 6cd8ea376cb8725c6a9fe0bc157efeeb34c5adfb..95694cb7fded0de337080579e70d5a91712f98b9 100644
--- a/features/musicList/src/main/ets/viewmodel/SongDataSource.ets
+++ b/features/musicList/src/main/ets/viewmodel/SongDataSource.ets
@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import { SongItem } from '@ohos/mediaCommon';
+import { SongItem } from 'mediacommon';
 
 export class SongDataSource implements IDataSource {
   private dataArray: SongItem[] = [];
diff --git a/features/musicList/src/main/ets/viewmodel/SongListData.ets b/features/musicList/src/main/ets/viewmodel/SongListData.ets
index 808e80e02d9156f2c31662598469aab574b40d56..058c88220d2fe06553b89555b840c5fae719dd08 100644
--- a/features/musicList/src/main/ets/viewmodel/SongListData.ets
+++ b/features/musicList/src/main/ets/viewmodel/SongListData.ets
@@ -13,8 +13,8 @@
  * limitations under the License.
  */
 
-import { RouterUrlConstants } from '@ohos/constantsCommon';
-import { SongItem } from '@ohos/mediaCommon';
+import { RouterUrlConstants } from 'constantscommon';
+import { SongItem } from 'mediacommon';
 
 const songList: SongItem[] = [
   { id: 1, title: 'Dream It Possible', singer: 'Delacey', mark: $r('app.media.ic_vip'),
diff --git a/features/musicList/src/main/module.json5 b/features/musicList/src/main/module.json5
index 222340862007ffa6d622baae42fc96a793a71eda..1c77d278391b8ba0d4db97b4679fa6e1da66d741 100644
--- a/features/musicList/src/main/module.json5
+++ b/features/musicList/src/main/module.json5
@@ -5,8 +5,7 @@
     "description": "$string:shared_desc",
     "deviceTypes": [
       "phone",
-      "tablet",
-      "2in1"
+      "tablet"
     ]
   }
 }
\ No newline at end of file
diff --git a/products/phone/oh-package.json5 b/products/phone/oh-package.json5
index 8d03a15d76a056d369580efda5dd9730d11e9c22..073073408ed3b86fcf20a693a787d3c83a08c3d2 100644
--- a/products/phone/oh-package.json5
+++ b/products/phone/oh-package.json5
@@ -7,9 +7,9 @@
   "main": "",
   "version": "1.0.0",
   "dependencies": {
-    "@ohos/constantsCommon": "file:../../common/constantsCommon",
-    "@ohos/live": "file:../../features/live",
-    "@ohos/musicComment": "file:../../features/musicComment",
-    "@ohos/musicList": "file:../../features/musicList"
+    "constantscommon": "file:../../common/constantsCommon",
+    "live": "file:../../features/live",
+    "musiccomment": "file:../../features/musicComment",
+    "musiclist": "file:../../features/musicList"
   }
 }
diff --git a/products/phone/src/main/ets/entryability/EntryAbility.ets b/products/phone/src/main/ets/entryability/EntryAbility.ets
index 84e654ef9f8545edfbffbdb729ad9a98125fc726..670dea9caf5867edf48fcf00b49d193ed9211e16 100644
--- a/products/phone/src/main/ets/entryability/EntryAbility.ets
+++ b/products/phone/src/main/ets/entryability/EntryAbility.ets
@@ -15,7 +15,8 @@
 import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
 import { hilog } from '@kit.PerformanceAnalysisKit';
 import { display, window } from '@kit.ArkUI';
-import { BreakpointConstants } from '@ohos/constantsCommon';
+import { BreakpointConstants } from 'constantscommon';
+import { BusinessError } from '@kit.BasicServicesKit';
 
 export default class EntryAbility extends UIAbility {
   private windowObj?: window.Window;
@@ -33,17 +34,32 @@ export default class EntryAbility extends UIAbility {
     // Main window is created, set main page for this ability
     hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
 
-    try {
-      windowStage.getMainWindow().then((data: window.Window) => {
-        this.windowObj = data;
-        this.updateBreakpoint(this.windowObj.getWindowProperties().windowRect.width);
-        this.windowObj.on('windowSizeChange', (windowSize: window.Size) => {
-          this.updateBreakpoint(windowSize.width);
-        });
+    windowStage.getMainWindow().then((data: window.Window) => {
+      this.windowObj = data;
+      this.updateBreakpoint(this.windowObj.getWindowProperties().windowRect.width);
+      this.windowObj.on('windowSizeChange', (windowSize: window.Size) => {
+        this.updateBreakpoint(windowSize.width);
       });
-    } catch (error) {
-      hilog.error(0x0000, 'testTag', '%{public}s', 'Failed to getMainWindow');
-    }
+      data.setWindowLayoutFullScreen(true).then(() => {
+        hilog.info(0x0000, 'EntryAbility', 'Succeeded in setting the window layout to full-screen mode.');
+      }).catch((err: BusinessError) => {
+        hilog.info(0x0000, 'EntryAbility',
+          `Failed to set the window layout to full-screen mode. Cause: code=${err.code}, message=${err.message}`);
+      });
+
+      let type = window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR;
+      let avoidArea = data.getWindowAvoidArea(type);
+      let bottomRectHeight = avoidArea.bottomRect.height;
+      AppStorage.setOrCreate('bottomRectHeight', bottomRectHeight);
+
+      type = window.AvoidAreaType.TYPE_SYSTEM;
+      avoidArea = data.getWindowAvoidArea(type);
+      let topRectHeight = avoidArea.topRect.height;
+      AppStorage.setOrCreate('topRectHeight', topRectHeight);
+    }).catch((error: BusinessError) => {
+      hilog.error(0x0000, 'testTag', 'Failed to getMainWindow. Cause: ',
+        JSON.stringify(error.code) + JSON.stringify(error.message));
+    })
 
     windowStage.loadContent('pages/Index', (err) => {
       AppStorage.setOrCreate('uiContext', windowStage.getMainWindowSync().getUIContext());
diff --git a/products/phone/src/main/ets/pages/Index.ets b/products/phone/src/main/ets/pages/Index.ets
index 7e6bbfb16200ed73d897776a223d45391f4c6243..b498fe57e92bb8174cc26ce8d9ee814cbb67933a 100644
--- a/products/phone/src/main/ets/pages/Index.ets
+++ b/products/phone/src/main/ets/pages/Index.ets
@@ -13,10 +13,10 @@
  * limitations under the License.
  */
 
-import { BreakpointConstants, RouterUrlConstants, StyleConstants } from '@ohos/constantsCommon';
-import { LivePage } from '@ohos/live';
-import { MusicListPage } from '@ohos/musicList';
-import { MusicCommentPage } from '@ohos/musicComment';
+import { BreakpointConstants, RouterUrlConstants, StyleConstants } from 'constantscommon';
+import { LivePage } from 'live';
+import { MusicListPage } from 'musiclist';
+import { MusicCommentPage } from 'musiccomment';
 import IndexItem from '../viewmodel/IndexItem';
 import IndexViewModel from '../viewmodel/IndexViewModel';
 import { HomeConstants } from '../common/constants/HomeConstants';
@@ -26,6 +26,7 @@ import { HomeConstants } from '../common/constants/HomeConstants';
 struct Index {
   @State indexItemList: IndexItem[] = IndexViewModel.getIndexItemList();
   @StorageLink('pageIndexInfos') pageIndexInfos: NavPathStack = new NavPathStack();
+  @StorageLink('topRectHeight') topRectHeight: number = 0;
 
   @Builder
   PagesMap(name: string, param?: object) {
@@ -127,6 +128,7 @@ struct Index {
           right: $r('app.float.column_padding_right'),
           bottom: $r('app.float.column_padding_top')
         })
+        .margin({ top: this.getUIContext().px2vp(this.topRectHeight) })
       }
       .scrollBar(BarState.Off)
     }
diff --git a/products/phone/src/main/ets/viewmodel/IndexViewModel.ets b/products/phone/src/main/ets/viewmodel/IndexViewModel.ets
index 697292e0dbb04fbb713360dae1defca4ee9bb3fc..b5736344f0744aa7d172acd4e11c7e1834453ae4 100644
--- a/products/phone/src/main/ets/viewmodel/IndexViewModel.ets
+++ b/products/phone/src/main/ets/viewmodel/IndexViewModel.ets
@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import { RouterUrlConstants } from '@ohos/constantsCommon';
+import { RouterUrlConstants } from 'constantscommon';
 import IndexItem from './IndexItem';
 
 /**
diff --git a/products/phone/src/main/module.json5 b/products/phone/src/main/module.json5
index e2a51fb98f62c2d636f356997a3d2d0c5157ced3..59b7dd6e39772b1748d8e7a988d587c0ebb0e3ad 100644
--- a/products/phone/src/main/module.json5
+++ b/products/phone/src/main/module.json5
@@ -6,8 +6,7 @@
     "mainElement": "EntryAbility",
     "deviceTypes": [
       "phone",
-      "tablet",
-      "2in1"
+      "tablet"
     ],
     "deliveryWithInstall": true,
     "installationFree": false,
diff --git a/screenshots/device/foldable.en.png b/screenshots/device/foldable.en.png
index ef807c7cbfd10f64a97d3ca526b869f127e68ded..dd88c93b1d8e09ff6a2cdd768b039a92c9f32fbb 100644
Binary files a/screenshots/device/foldable.en.png and b/screenshots/device/foldable.en.png differ
diff --git a/screenshots/device/foldable.png b/screenshots/device/foldable.png
index 8513fbdd544b65b8cd4283347d19969ab43fcbe1..2f5a820394108a5b0397c0ec076d2730a4f1c998 100644
Binary files a/screenshots/device/foldable.png and b/screenshots/device/foldable.png differ
diff --git a/screenshots/device/pad.en.png b/screenshots/device/pad.en.png
deleted file mode 100644
index ba2342f7d7cb0d113c317210b8b8c735a632bacc..0000000000000000000000000000000000000000
Binary files a/screenshots/device/pad.en.png and /dev/null differ
diff --git a/screenshots/device/pad.png b/screenshots/device/pad.png
deleted file mode 100644
index 602e00dd48d9710f5ef248b2fde340177ac4260c..0000000000000000000000000000000000000000
Binary files a/screenshots/device/pad.png and /dev/null differ
diff --git a/screenshots/device/phone.en.png b/screenshots/device/phone.en.png
index bc9371ca661609482a1cb3c594035ea22fff143e..417a54e2647a204dc30048b5e9dbfccaa6d98c4c 100644
Binary files a/screenshots/device/phone.en.png and b/screenshots/device/phone.en.png differ
diff --git a/screenshots/device/phone.png b/screenshots/device/phone.png
index 9811f051e1d519834ec9c68de911f7fe6c75ef1a..b3c794b373693bfe1ae5eb184fb3abde81c51f87 100644
Binary files a/screenshots/device/phone.png and b/screenshots/device/phone.png differ
diff --git a/screenshots/device/tablet.en.png b/screenshots/device/tablet.en.png
new file mode 100644
index 0000000000000000000000000000000000000000..14a958769f6104dd95f7f27587016969d16fac15
Binary files /dev/null and b/screenshots/device/tablet.en.png differ
diff --git a/screenshots/device/tablet.png b/screenshots/device/tablet.png
new file mode 100644
index 0000000000000000000000000000000000000000..58e2575e8be33f82b57c9d2fb68a5fbd54edf8e7
Binary files /dev/null and b/screenshots/device/tablet.png differ