diff --git a/README.en.md b/README.en.md
index 5976672e8a69d92f6b152db03e94ec01b329b434..c29a178a85a238866173059bfaa6efc9d83da183 100644
--- a/README.en.md
+++ b/README.en.md
@@ -14,7 +14,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)
 
 ### How to Use
 
@@ -30,7 +30,7 @@ N/A
 
 ### Constraints
 
-1. The sample is only supported on Huawei phones with standard systems.
+1. The sample is only supported on Huawei phones, tablets with standard systems.
 2. HarmonyOS: HarmonyOS 5.0.5 Release or later.
 3. DevEco Studio: DevEco Studio 5.0.5 Release or later.
 4. HarmonyOS SDK: HarmonyOS 5.0.5 Release SDK or later.
diff --git a/README.md b/README.md
index 165db1fd38d11a92a30a9eb4d55035c1b6a6d59c..74e5c1f713b9b2a53c915da4f1008cbece6fddad 100644
--- a/README.md
+++ b/README.md
@@ -14,7 +14,7 @@
 
 平板效果图如下：
 
-![](screenshots/device/pad.png)
+![](screenshots/device/tablet.png)
 
 ### 使用说明
 
@@ -30,7 +30,7 @@
 
 ### 约束与限制
 
-1. 本示例仅支持标准系统上运行，支持设备：华为手机。
+1. 本示例仅支持标准系统上运行，支持设备：华为手机、平板。
 2. HarmonyOS系统：HarmonyOS 5.0.5 Release及以上。
 3. DevEco Studio版本：DevEco Studio 5.0.5 Release及以上。
 4. HarmonyOS SDK版本：HarmonyOS 5.0.5 Release SDK及以上。
\ No newline at end of file
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 e1a5789bf1ad5e9f625c222fa741adea9454d318..ceb41c74234c05ca6f1c08b6c2a7cad080a01149 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 424268401b4b39b9a79454174807713330189582..a6a4e714a1399d249cff9902e1fef263157a0de1 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 9a0b30951a8f4cbaadc1b45cab27b15b924fce78..635b0a9b8029372b7c124a7471d9dd038758f6ee 100644
--- a/common/mediaCommon/src/main/module.json5
+++ b/common/mediaCommon/src/main/module.json5
@@ -4,8 +4,7 @@
     "type": "har",
     "deviceTypes": [
       "phone",
-      "tablet",
-      "2in1"
+      "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 4a09f627e82a0ee26d61a0cd6d3afb6e4aae12dc..cbfac26929b2ce9dd661416726b30425270a850c 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 47bb2eaa741c6ed2b8c6836496ab601ef837e02e..ca2427f72f6efe9101831b933af8bfcb2c8c8ef0 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 49f0327152805a448b262a608fed63b4b04f0e44..6c96ad716120b87e88a7c8b74bc529ec1a4002b7 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 667b6a5b4296d84970432fd0113b054fd16f5638..0a0d2f0559309902b43d7cb2b16d6e62a8fced99 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, SongItem } from '@ohos/mediaCommon';
-import { BreakpointConstants, StyleConstants } from '@ohos/constantsCommon';
+import { BreakpointType, 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 e68a0ef83022911a18d05e14e221fb5e524c73b9..557736299db42580e6a14c5ee31bc4ce4a732f63 100644
--- a/features/musicList/src/main/ets/components/MusicControlComponent.ets
+++ b/features/musicList/src/main/ets/components/MusicControlComponent.ets
@@ -18,8 +18,8 @@ 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 { LyricsComponent } from './LyricsComponent';
 import { MusicInfoComponent } from './MusicInfoComponent';
 import { ControlAreaComponent } from './ControlAreaComponent';
@@ -73,6 +73,7 @@ export struct MusicControlComponent {
   aboutToDisappear(): void {
     if (canIUse('SystemCapability.Window.SessionManager')) {
       display.off('foldDisplayModeChange', this.callback);
+      this.isFoldFull = false;
     }
   }
 
diff --git a/features/musicList/src/main/ets/components/MusicInfoComponent.ets b/features/musicList/src/main/ets/components/MusicInfoComponent.ets
index 3828c58bafc0e78c385460baf2b5a721cd1f90a0..b85f98f3237947c5bac67302a2fe7bcce6d53815 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 9ed1b12767c1a6eb5416b3e0b5da692584bc455d..718aed16e523d7998334b71b0fbc433047970b10 100644
--- a/features/musicList/src/main/ets/components/PlayList.ets
+++ b/features/musicList/src/main/ets/components/PlayList.ets
@@ -13,8 +13,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';
 
@@ -23,6 +23,7 @@ export struct PlayList {
   @Link currentBreakpoint: string;
   @StorageLink('songList') songList: SongItem[] = [];
   @StorageLink('isShowPlay') isShowPlay: boolean = false;
+  @StorageLink('bottomRectHeight') bottomRectHeight: number = 0;
 
   @Builder
   PlayAll() {
@@ -138,7 +139,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 de49d77050c9e74b81b20aa39aeeee7c45a553e7..a6c77cb7cd2b3d7c71945d016be5206b00ec4386 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
@@ -199,26 +202,18 @@ export struct Player {
         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);
-        }
         let sysBarProps: window.SystemBarProperties = {
           statusBarContentColor: '#FFFFFF'
         };
         windowStage.setWindowSystemBarProperties(sysBarProps);
       }).catch((error: BusinessError) => {
-        Logger.error(`${error.code} + ${error.message}`)
+        Logger.error(`${error.code} + ${error.message}`);
       });
     })
     .onDisAppear(() => {
       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 38f2cdc9d9a89ea4773a9aee3304134971443169..56a9e27c7751d0aa42b582eaf58cd4a51460ada2 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 1eaf47c67bee4d4366b1b0592e8999feb0be1271..640d29d2de2f7a5b239981acf8ac1445fd788647 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 ad29881858629d3deded3b08f30cb0852810d06b..18d86a88f95c500ce2160fc13d1071959221d025 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 866be1222ad2caa3d115eccef7a6a2f067dd4e0f..d9a8238e58c596e0db3ce37d2df14cde235b34ec 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 d7f5303cd441e6d04ef1e361064095465d1b2935..5362023ce7790b1dccddb9ee32a1ad7b79bdd6c0 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 e617cbb6e1da95de9b9e2571e0b526a291d47dbd..40e406e35f978b0d584f0b98eeb32a0a35f66d12 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;
@@ -38,7 +39,23 @@ export default class EntryAbility extends UIAbility {
       this.updateBreakpoint(this.windowObj.getWindowProperties().windowRect.width);
       this.windowObj.on('windowSizeChange', (windowSize: window.Size) => {
         this.updateBreakpoint(windowSize.width);
-      })
+      });
+      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);
     })
 
     windowStage.loadContent('pages/Index', (err) => {
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