diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/manager/AudioItem.ets b/scenario/arkui/MyMusic/entry/src/main/ets/manager/AudioItem.ets
index ecf51560ed2fc979836fa9e4a35df5a95e400d47..092ec8a1c3e55bc421fbcfe80148fdc3ba434bea 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/manager/AudioItem.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/manager/AudioItem.ets
@@ -29,12 +29,15 @@ export default class AudioItem {
    * Other resource of list item.
    */
   time: number;
-  artist: string
+  artist: string;
+  isPlaying: boolean = false;
+  isVip?:boolean = false;
 
-  constructor(title: string, img: Resource, artist: string, time: number) {
+  constructor(title: string, img: Resource, artist: string, time: number,isVip?:boolean) {
     this.title = title;
     this.img = img;
     this.time = time;
     this.artist = artist;
+    this.isVip = isVip;
   }
 }
\ No newline at end of file
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/manager/PlayerManager.ets b/scenario/arkui/MyMusic/entry/src/main/ets/manager/PlayerManager.ets
index 6df005939d02752ca14fd0eb8f0c2311a4c6ec53..c3b08a472d12cf118f74fcebcd15dda66d33d0a6 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/manager/PlayerManager.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/manager/PlayerManager.ets
@@ -21,7 +21,7 @@ export default class PlayerManager {
   private state: number = -1;
   // 播放状态，未初始化-1，停止0，播放1，暂停2
   private currentTime: number = 0;
-  private item: AudioItem = new AudioItem('',$r('app.media.ic_gallery_frame_overlay_soundphoto'),'',0);
+  private item: AudioItem = new AudioItem('', $r('app.media.ic_gallery_frame_overlay_soundphoto'), '', 0);
   private list: AudioItem[] = [];
   private listPosition: number = 0;
   private intervalID: number = -1;
@@ -29,7 +29,10 @@ export default class PlayerManager {
     eventId: 1,
     priority: emitter.EventPriority.HIGH
   };
-
+  private innerEvent2: emitter.InnerEvent = {
+    eventId: 2,
+    priority: emitter.EventPriority.HIGH
+  };
   /**
    * 初始化
    */
@@ -52,6 +55,10 @@ export default class PlayerManager {
     this.play();
   }
 
+  getCurrentPlayList(): AudioItem[] {
+    return this.list;
+  }
+
   /**
    * 播放
    */
@@ -61,6 +68,13 @@ export default class PlayerManager {
       return;
     }
     this.state = 1
+    this.list[this.listPosition].isPlaying = true
+    let eventData: emitter.EventData = {
+      data: {
+        "state": this.state,
+      }
+    };
+    emitter.emit(this.innerEvent2, eventData);
     this.intervalID = setInterval(() => {
       if (this.currentTime > this.item.time) {
         this.next();
@@ -79,6 +93,23 @@ export default class PlayerManager {
     Logger.info(this.tag, 'Start interval id:' + this.intervalID.toString());
   }
 
+  /**
+   * 播放
+   */
+  playItem(item: AudioItem): void {
+    this.stop();
+    Logger.info(this.tag, 'Play finish:' + this.listPosition.toString());
+    let index = this.list.indexOf(item)
+    if (-1 === index) {
+      this.listPosition = 0;
+    } else {
+      this.listPosition = index;
+    }
+    Logger.info(this.tag, 'Play :' + this.listPosition.toString());
+    this.item = this.list[this.listPosition]
+    this.play();
+  }
+
   /**
    * 暂停
    */
@@ -117,6 +148,7 @@ export default class PlayerManager {
     this.state = 0;
     this.currentTime = 0;
     Logger.info(this.tag, 'Stop:' + this.item.title);
+    this.list[this.listPosition].isPlaying = false
     let eventData: emitter.EventData = {
       data: {
         "state": this.state,
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/pages/LoginPage.ets b/scenario/arkui/MyMusic/entry/src/main/ets/pages/LoginPage.ets
index a864d49d84393f9211565616a801675a86c56ac5..bdb8e4c19aa21bf9334c076a3b8adf93f1819398 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/pages/LoginPage.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/pages/LoginPage.ets
@@ -42,6 +42,9 @@ function blueTextStyle() {
   .fontWeight(FontWeight.Medium)
 }
 
+const ANIMATION_TIME: number = 1000
+const ANIMATION_PROGRESS: number = -600
+
 /**
  * Login page
  */
@@ -52,6 +55,14 @@ struct LoginPage {
   @State password: string = '';
   @State isShowProgress: boolean = false;
   private timeOutId: number = -1;
+  @State topY: number = 0
+  @State zoom: number = 0
+  @State angle: number = 1
+  @State leftX: number = 0
+  @State rightX: number = 0
+  @State bottomY: number = 0
+  @State progress: number = 0
+  @State transitionType: SlideEffect = SlideEffect.Left
 
   @Builder
   imageButton(src: Resource) {
@@ -80,11 +91,42 @@ struct LoginPage {
     }
   }
 
+  aboutToAppear() {
+    let params = router.getParams() as Record<string, string | number | SlideEffect>;
+    this.transitionType = params.type as SlideEffect;
+    this.angle = params.angle as number;
+    this.zoom = params.zoom as number;
+  }
+
   aboutToDisappear() {
     clearTimeout(this.timeOutId);
     this.timeOutId = -1;
   }
 
+  pageTransition() {
+    // Entry animation
+    PageTransitionEnter({ duration: ANIMATION_TIME, curve: Curve.Linear })
+      .slide(this.transitionType)
+      .onEnter((type: RouteType, progress: number) => {
+        this.topY = (-progress + 1) * this.topY
+        this.bottomY = (-progress + 1) * this.bottomY
+        this.leftX = (-progress + 1) * this.leftX
+        this.rightX = (-progress + 1) * this.rightX
+        this.progress = progress
+      })
+
+    // Exit animation
+    PageTransitionExit({ duration: ANIMATION_TIME, curve: Curve.Ease })
+      .slide(this.transitionType)
+      .onExit((type: RouteType, progress: number) => {
+        this.topY = -ANIMATION_PROGRESS * progress
+        this.bottomY = ANIMATION_PROGRESS * progress
+        this.leftX = -ANIMATION_PROGRESS * progress
+        this.rightX = ANIMATION_PROGRESS * progress
+        this.progress = progress
+      })
+  }
+
   build() {
     Column() {
       Image($r('app.media.logo'))
@@ -162,7 +204,7 @@ struct LoginPage {
       }
     }
     .backgroundColor($r('app.color.background'))
-    .height(CommonConstants.FULL_PARENT)
+    .height('80%')
     .width(CommonConstants.FULL_PARENT)
     .padding({
       left: $r('app.float.page_padding_hor'),
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/pages/MainPage.ets b/scenario/arkui/MyMusic/entry/src/main/ets/pages/MainPage.ets
index 98749c081eaaab9045f755a753f41c45888acb06..0db6109f9ea851005727838fd0f039558de05caf 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/pages/MainPage.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/pages/MainPage.ets
@@ -25,6 +25,7 @@ import Logger from '../common/utils/Logger';
 import curves from '@ohos.curves';
 import PodCastHead from '../view/PodCastHead';
 import Setting from '../view/Setting';
+import PlayList from '../view/PlayList';
 
 /**
  * Main page
@@ -40,6 +41,7 @@ struct MainPage {
   @State arr: number[] = [1, 2, 3]
   @State current: number = 1
   @State isShowSidebar: boolean = false;
+  @State isShowPlayList: boolean = false;
   @State maskOpacity: number = 0.5;
 
   aboutToAppear() {
@@ -49,6 +51,19 @@ struct MainPage {
   aboutToDisappear() {
   }
 
+  onBackPress() {
+    if (this.isShowPlayList || this.isShowSidebar) {
+      animateTo({ duration: 350 }, () => {
+        this.isShowSidebar = false;
+        this.isShowPlayList = false;
+      }
+      )
+      return true;
+    } else {
+      return false;
+    }
+  }
+
   @Builder
   TabBuilder(title: string, index: number, selectedImg: Resource, normalImg: Resource) {
     Column() {
@@ -76,6 +91,7 @@ struct MainPage {
       }.width('100%')
       .justifyContent(FlexAlign.SpaceEvenly)
       .backgroundColor($r('app.color.background'))
+
       /*
       .onAreaChange((oldValue: Area, newValue: Area) => {
         this.maskOpacity = (newValue.width as number) / 500;
@@ -129,11 +145,11 @@ struct MainPage {
           this.currentIndex = index;
         })
 
-        PlayerBar()
+        PlayerBar({ isShowPlayList: $isShowPlayList })
           .margin({ bottom: $r('app.float.mainPage_barHeight') })
           .backgroundColor(Color.White)
           .width('100%')
-        if (this.isShowSidebar) {
+        if (this.isShowSidebar || this.isShowPlayList) {
           Rect()
             .width('100%')
             .height('100%')
@@ -142,10 +158,19 @@ struct MainPage {
             .onClick(() => {
               animateTo({ duration: 350 }, () => {
                 this.isShowSidebar = false;
+                this.isShowPlayList = false;
               })
             })
             .transition(TransitionEffect.OPACITY)
         }
+        if (this.isShowPlayList) {
+          PlayList()
+            .width('100%')
+            .height('80%')
+            .transition(TransitionEffect.OPACITY
+              .animation({ curve: curves.springMotion() })
+              .combine(TransitionEffect.move(TransitionEdge.BOTTOM)))
+        }
       }.width('100%').height('100%')
     }
     .showControlButton(false)
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/view/BookFirstItem.ets b/scenario/arkui/MyMusic/entry/src/main/ets/view/BookFirstItem.ets
index 0bb054c36037d015f13904facba2134b866dad29..e88ec4bb32fe839cb592b682e5e365b9a9944115 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/view/BookFirstItem.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/view/BookFirstItem.ets
@@ -14,16 +14,14 @@
  */
 import ItemData from '../viewmodel/ItemData';
 import prompt from '@ohos.promptAction';
-import hilog from '@ohos.hilog';
-import AudioItem from '../manager/AudioItem';
-import PlayerManager  from '../manager/PlayerManager';
+import PlayerManager from '../manager/PlayerManager';
 
 /**
  * List item information component.
  */
 @Component
 export default struct BookFirstItem {
-  private item: ItemData = new ItemData('', $r('app.media.fig1'), '', $r('app.media.fig1'));
+  private item: ItemData = new ItemData('', $r('app.media.fig1'), '',[], $r('app.media.fig1'));
   private playerManager: PlayerManager = AppStorage.get('playerManager') as PlayerManager;
 
   build() {
@@ -45,10 +43,9 @@ export default struct BookFirstItem {
     .borderRadius($r('app.float.podcast_text_border_Radius'))
     .onClick(() => {
       prompt.showToast({
-        message: '进入歌单：' + this.item.title
+        message: '播放歌单：' + this.item.title
       })
-      let list  = [new AudioItem(this.item.title,this.item.img,this.item.subTitle,120)]
-      this.playerManager.playList(list,0)
+      this.playerManager.playList(this.item.list, 0);
     })
   }
 }
\ No newline at end of file
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/view/BookSecondItem.ets b/scenario/arkui/MyMusic/entry/src/main/ets/view/BookSecondItem.ets
index bffbc7f383f98e407102bcb1ea2b5b0367909511..4b8fa3ab2e7d8e657b173cf2d40feb6f6864c87f 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/view/BookSecondItem.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/view/BookSecondItem.ets
@@ -14,14 +14,16 @@
  */
 import ItemData from '../viewmodel/ItemData';
 import prompt from '@ohos.promptAction';
+import PlayerManager from '../manager/PlayerManager';
 
 /**
  * List item information component.
  */
 @Component
 export default struct BookSecondItem {
-  private item: ItemData = new ItemData('', $r('app.media.fig1'), '', $r('app.media.fig1'));
+  private item: ItemData = new ItemData('', $r('app.media.fig1'), '', [],$r('app.media.fig1'));
   private imgWidth: string = '';
+  private playerManager: PlayerManager = AppStorage.get('playerManager') as PlayerManager;
 
   build() {
     Column() {
@@ -38,8 +40,9 @@ export default struct BookSecondItem {
     .margin('8vp')
     .onClick(() => {;
       prompt.showToast({
-        message: '进入歌单：' + this.item.title
+        message: '播放歌单：' + this.item.title
       })
+      this.playerManager.playList(this.item.list, 0);
     })
   }
 }
\ No newline at end of file
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/view/BookTriItem.ets b/scenario/arkui/MyMusic/entry/src/main/ets/view/BookTriItem.ets
index 7e61b498ea708f96f5e134429584d09fb83a7f1c..3badefc5b2912645778ec30db591c06af2e40fc6 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/view/BookTriItem.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/view/BookTriItem.ets
@@ -14,6 +14,7 @@
  */
 import ItemData from '../viewmodel/BookTriItemData';
 import prompt from '@ohos.promptAction';
+import PlayerManager from '../manager/PlayerManager';
 
 /**
  * List item information component.
@@ -21,7 +22,7 @@ import prompt from '@ohos.promptAction';
 @Component
 export default struct BookTriItem {
   private items: ItemData[] = new Array<ItemData>();
-  ;
+  private playerManager: PlayerManager = AppStorage.get('playerManager') as PlayerManager;
 
   build() {
     Column() {
@@ -75,8 +76,9 @@ export default struct BookTriItem {
         .margin($r('app.float.home_homeCell_margin'))
         .onClick(() => {
           prompt.showToast({
-            message: '进入歌单：' + item.title
+            message: '播放歌单：' + item.title
           })
+          this.playerManager.playList(item.list, 0);
         })
       })
     }
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/view/CommunitySquare.ets b/scenario/arkui/MyMusic/entry/src/main/ets/view/CommunitySquare.ets
index 869abd27dd1b168d0cdc5abbfff8ca5bbe205cef..c7265e1b75cf6bcb760f2e46b72a30b6b6c5074e 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/view/CommunitySquare.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/view/CommunitySquare.ets
@@ -17,8 +17,6 @@ import MineActivityItem from './MineActivityItem';
 import MineActivityItemData from '../viewmodel/MineActivityItemData';
 import mainViewModel from '../viewmodel/MainViewModel';
 import ListHead from './ListHead';
-import TriItem from './TriItem';
-import TriItemData from '../viewmodel/TriItemData';
 import SquareTriItem from './SquareTriItem';
 import SquareTriItemData from '../viewmodel/SquareTriItemData';
 
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/view/Follow.ets b/scenario/arkui/MyMusic/entry/src/main/ets/view/Follow.ets
index 1edb3b1439f31040a0730c2d3783b8212cc2057c..1419486ab4ea2b35e9349197bd7e5255adb4edea 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/view/Follow.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/view/Follow.ets
@@ -15,7 +15,7 @@
 
 import FollowHead from './FollowHead';
 import mainViewModel from '../viewmodel/MainViewModel';
-import ItemData from '../viewmodel/ItemData';
+import ItemData from '../viewmodel/FollowerItemData';
 import MineActivityItem from './MineActivityItem';
 import MineActivityItemData from '../viewmodel/MineActivityItemData';
 import curves from '@ohos.curves'
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/view/ListHistoryItem.ets b/scenario/arkui/MyMusic/entry/src/main/ets/view/ListHistoryItem.ets
new file mode 100644
index 0000000000000000000000000000000000000000..4689e247b34e16bb503518d20520ab88cd6334ba
--- /dev/null
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/view/ListHistoryItem.ets
@@ -0,0 +1,60 @@
+/*
+ * Copyright (c) 2023 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 ItemData from '../viewmodel/ListHistoryItemData';
+import PlayerManager  from '../manager/PlayerManager';
+import prompt from '@ohos.promptAction';
+
+/**
+ * List item information component.
+ */
+@Component
+export default struct ListHistoryItem {
+  private item: ItemData = new ItemData('', $r('app.media.fig1'), '',[]);
+  private playerManager: PlayerManager = AppStorage.get('playerManager') as PlayerManager;
+
+  build() {
+    Row() {
+      Image(this.item.img)
+        .height('36vp')
+        .width('36vp')
+        .borderRadius('8vp')
+      Text(this.item.title)
+        .fontSize('16fp')
+        .margin('12vp')
+        .maxLines(1)
+      Blank()
+      Image($r('app.media.ic_public_arrow_right_grey'))
+        .width('12vp')
+        .height('24vp')
+        .margin({right:'12vp'})
+    }
+    .justifyContent(FlexAlign.SpaceBetween)
+    .backgroundColor('#f6f6f6')
+    .borderRadius('8vp')
+    .width('200vp')
+    .margin({right:'20vp'})
+    .onClick(() => {
+      this.enterList();
+    })
+  }
+
+  enterList() {
+    prompt.showToast({
+      message: '播放歌单：' + this.item.title.replace(' ', '')
+    })
+    this.playerManager.playList(this.item.list,0)
+  }
+}
\ No newline at end of file
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/view/MidItem.ets b/scenario/arkui/MyMusic/entry/src/main/ets/view/MidItem.ets
index 46e020ee584f709358d106bb0675bab1cb96c86c..9d80bbc4681b845ae57a0c07ecd47160aeeb4a57 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/view/MidItem.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/view/MidItem.ets
@@ -100,7 +100,7 @@ export default struct MidItem {
 
   enterList() {
     prompt.showToast({
-      message: '进入歌单：' + this.item.title.replace(' ', '')
+      message: '播放歌单：' + this.item.title.replace(' ', '')
     })
     this.playerManager.playList(this.item.list,0)
   }
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/view/MineListItem.ets b/scenario/arkui/MyMusic/entry/src/main/ets/view/MineListItem.ets
index faaff317ce50b73263d25957bcf1981a54657250..d601d85c818cee1c0d283f4b1bd612de3784bf76 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/view/MineListItem.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/view/MineListItem.ets
@@ -15,6 +15,7 @@
 
 import ItemData from '../viewmodel/MineListItemData';
 import prompt from '@ohos.promptAction';
+import PlayerManager  from '../manager/PlayerManager';
 
 /**
  * List item information component.
@@ -22,6 +23,7 @@ import prompt from '@ohos.promptAction';
 @Component
 export default struct MineListItem {
   private item: ItemData = new ItemData('', $r('app.media.fig21'), '', Visibility.None, Visibility.None);
+  private playerManager: PlayerManager = AppStorage.get('playerManager') as PlayerManager;
 
   build() {
     Row() {
@@ -74,7 +76,7 @@ export default struct MineListItem {
     .width('100%')
     .onClick(() => {
       prompt.showToast({
-        message: '进入歌单：' + this.item.title
+        message: '播放歌单：' + this.item.title
       })
     })
   }
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/view/PlayList.ets b/scenario/arkui/MyMusic/entry/src/main/ets/view/PlayList.ets
new file mode 100644
index 0000000000000000000000000000000000000000..f95157b1d4e1cf029946d2a46ef90a1e563aaf5f
--- /dev/null
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/view/PlayList.ets
@@ -0,0 +1,273 @@
+/*
+ * Copyright (c) 2023 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 CommonConstants from '../common/constants/CommonConstants';
+import PlayerManager from '../manager/PlayerManager';
+import AudioItem from '../manager/AudioItem';
+import emitter from '@ohos.events.emitter';
+import ListHistoryItem from './ListHistoryItem';
+import ListHistoryItemData from '../viewmodel/ListHistoryItemData';
+import mainViewModel from '../viewmodel/MainViewModel';
+/**
+ * Setting tab content
+ */
+@Component
+export default struct PlayList {
+  @State subCurrentIndex: number = 1;
+  @State playingList: AudioItem[] = Array<AudioItem>();
+  private tabsController: TabsController = new TabsController();
+  private playerManager: PlayerManager = AppStorage.get('playerManager') as PlayerManager;
+  private innerEvent: emitter.InnerEvent = {
+    eventId: 2,
+    priority: emitter.EventPriority.HIGH
+  };
+
+  @Builder
+  TabBuilder(title: string, index: number, selectedImg: Resource, normalImg: Resource) {
+    Column() {
+      Row() {
+        Text(title)
+          .fontSize('20fp')
+          .fontColor(this.subCurrentIndex === index ? $r('app.color.mainPage_selected') : $r('app.color.mainPage_normal'))
+        if (index === 1) {
+          Text('(' + this.playingList.length.toString() + ')')
+            .textAlign(TextAlign.Start)
+            .fontSize('10fp')
+        }
+      }.alignItems(VerticalAlign.Top)
+
+      Image(this.subCurrentIndex === index ? selectedImg : normalImg)
+        .width($r('app.float.mainPage_baseTab_size'))
+    }
+    .height($r('app.float.mainPage_barHeight'))
+    .margin({
+      top: $r('app.float.mainPage_padding'),
+      left: $r('app.float.mainPage_padding'),
+      right: $r('app.float.mainPage_padding')
+    })
+    .onClick(() => {
+      this.subCurrentIndex = index;
+      this.tabsController.changeIndex(this.subCurrentIndex);
+    })
+  }
+
+  @Builder
+  songCell(item: AudioItem) {
+    Row() {
+      if (item.isPlaying) {
+        Image($r('app.media.ic_public_music_red'))
+          .width($r('app.float.setting_size'))
+          .height($r('app.float.setting_size'))
+          .margin('4vp')
+      }
+      if (item.isVip) {
+        Text('VIP')
+          .fontSize('10fp')
+          .fontColor(Color.Red)
+          .borderWidth(0.5)
+          .borderRadius('4vp')
+          .borderColor(Color.Red)
+          .margin('4vp')
+          .padding('2vp')
+      }
+      if (item.isPlaying) {
+        Text(item.title)
+          .fontSize('20fp')
+          .fontColor(Color.Red)
+        Text('·')
+          .fontSize($r('app.float.normal_text_size'))
+          .fontColor('#e0e0e0')
+          .fontColor(Color.Red)
+        Text(item.artist)
+          .maxLines(1)
+          .fontSize($r('app.float.normal_text_size'))
+          .fontColor('#e0e0e0')
+          .fontColor(Color.Red)
+      } else {
+        Text(item.title)
+          .fontSize('20fp')
+        Text('·')
+          .fontSize($r('app.float.normal_text_size'))
+          .fontColor('#e0e0e0')
+        Text(item.artist)
+          .maxLines(1)
+          .fontSize($r('app.float.normal_text_size'))
+          .fontColor('#e0e0e0')
+      }
+
+      Blank()
+      if (item.isPlaying) {
+        Text('来源')
+          .fontSize($r('app.float.normal_text_size'))
+          .fontColor('#e0e0e0')
+          .borderRadius('16vp')
+          .padding('4vp')
+          .borderColor('#e6e6e6')
+          .borderWidth(0.5)
+          .margin('4vp')
+      }
+      Image($r('app.media.ic_public_cancel'))
+        .width('24vp')
+        .height('24vp')
+    }
+    .justifyContent(FlexAlign.SpaceBetween)
+    .width('100%')
+    .padding({
+      left: $r('app.float.setting_settingCell_left'),
+      right: $r('app.float.setting_settingCell_right')
+    })
+  }
+
+  aboutToAppear() {
+    this.playingList = this.playerManager.getCurrentPlayList();
+    emitter.on(this.innerEvent, (eventData: emitter.EventData) => {
+      if (eventData !== undefined && eventData.data !== undefined) {
+        this.playingList = this.playerManager.getCurrentPlayList();
+      }
+    });
+  }
+
+  aboutToDisappear() {
+    emitter.off(2);
+  }
+
+  build() {
+    Column() {
+      Tabs({
+        barPosition: BarPosition.End,
+        index: 1,
+        controller: this.tabsController
+      }) {
+        TabContent() {
+          Column() {
+            Scroll() {
+              Row() {
+                ForEach(mainViewModel.getListHistoryData(), (item: ListHistoryItemData) => {
+                  ListHistoryItem({ item })
+                })
+              }.margin($r('app.float.home_secondGrid_margin'))
+            }
+            .scrollable(ScrollDirection.Horizontal)
+            .scrollBar(BarState.Off)
+            Row() {
+              Text('全部歌曲' + this.playingList.length + '首')
+                .fontSize('16fp')
+                .margin('4vp')
+              Blank()
+              Image($r('app.media.ic_public_download_black'))
+                .width('24vp')
+                .height('24vp')
+              Image($r('app.media.ic_public_copy'))
+                .width('24vp')
+                .height('24vp')
+                .margin('4vp')
+              Image($r('app.media.ic_public_delete'))
+                .width('24vp')
+                .height('24vp')
+            }
+            .backgroundColor(Color.White)
+            .width('100%')
+            .padding({ left: '5%', right: '5%', top: '12vp', bottom: '12vp' })
+            .justifyContent(FlexAlign.SpaceBetween)
+
+            Scroll() {
+              Column({ space: CommonConstants.COMMON_SPACE }) {
+                List() {
+                  ForEach(this.playingList, (item: AudioItem) => {
+                    ListItem() {
+                      this.songCell(item)
+                    }
+                    .height('64vp')
+                  })
+                }
+                .backgroundColor(Color.White)
+                .padding({ top: $r('app.float.setting_list_padding'), bottom: $r('app.float.setting_list_padding') })
+              }
+            }
+            .width('100%')
+          }.height('100%')
+        }
+        .tabBar(this.TabBuilder('历史播放', 0,
+          $r('app.media.ic_screenshot_line_select'), $r('app.media.ic_screenshot_line')))
+
+        TabContent() {
+          Column() {
+            Row() {
+              Row() {
+                Image($r('app.media.ic_public_list_cycle'))
+                  .width('20vp')
+                  .height('20vp')
+                  .margin('4vp')
+                Text('循环列表')
+                  .fontSize('16fp')
+                  .margin('4vp')
+              }.borderRadius('20vp')
+              .padding('4vp')
+              .backgroundColor('#f6f6f6')
+
+              Blank()
+              Image($r('app.media.ic_public_download_black'))
+                .width('24vp')
+                .height('24vp')
+              Image($r('app.media.ic_public_copy'))
+                .width('24vp')
+                .height('24vp')
+                .margin('4vp')
+              Image($r('app.media.ic_public_delete'))
+                .width('24vp')
+                .height('24vp')
+            }
+            .backgroundColor(Color.White)
+            .width('100%')
+            .padding({ left: '5%', right: '5%', top: '12vp', bottom: '12vp' })
+            .justifyContent(FlexAlign.SpaceBetween)
+
+            Scroll() {
+              Column({ space: CommonConstants.COMMON_SPACE }) {
+                List() {
+                  ForEach(this.playingList, (item: AudioItem) => {
+                    ListItem() {
+                      this.songCell(item)
+                    }
+                    .backgroundColor(item.isPlaying ? '#f6f6f6' : Color.White)
+                    .onClick(() => {
+                      this.playerManager.playItem(item);
+                    })
+                    .height('64vp')
+                  })
+                }
+                .backgroundColor(Color.White)
+                .padding({ top: $r('app.float.setting_list_padding'), bottom: $r('app.float.setting_list_padding') })
+              }
+            }
+            .width('100%')
+          }.height('100%')
+        }
+        .tabBar(this.TabBuilder('当前播放', 1,
+          $r('app.media.ic_screenshot_line_select'), $r('app.media.ic_screenshot_line')))
+      }
+      .width(CommonConstants.FULL_PARENT)
+      .barHeight($r('app.float.mainPage_barHeight'))
+      .barWidth('70%')
+      .barMode(BarMode.Scrollable)
+      .barPosition(BarPosition.Start)
+      .onChange((index: number) => {
+        this.subCurrentIndex = index;
+      })
+    }
+    .backgroundColor(Color.White)
+    .borderRadius({ topLeft: '18vp', topRight: '18vp' })
+  }
+}
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/view/PlayerBar.ets b/scenario/arkui/MyMusic/entry/src/main/ets/view/PlayerBar.ets
index 1439f4508fa0fdd4bccef7fcf95f74b3a46a5540..5442c80ce2c1dc87be3334d6361dec4512d7d88d 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/view/PlayerBar.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/view/PlayerBar.ets
@@ -19,7 +19,6 @@
 import emitter from '@ohos.events.emitter';
 import Logger from '../common/utils/Logger';
 import PlayerManager from '../manager/PlayerManager'
-import AudioItem from '../manager/AudioItem';
 
 @Component
 export default struct PlayerBar {
@@ -31,6 +30,7 @@ export default struct PlayerBar {
   @State durationTime: number = 100; // 总时长
   @State currentTime: number = 0; // 当前时间
   @State state: number = 0; // 播放状态
+  @Link isShowPlayList: boolean;
   private playerManager: PlayerManager = AppStorage.get('playerManager') as PlayerManager;
   private innerEvent: emitter.InnerEvent = {
     eventId: 1,
@@ -131,9 +131,14 @@ export default struct PlayerBar {
 
         Image($r('app.media.ic_public_view_list'))
           .objectFit(ImageFit.Contain)
-          .width($r('app.float.home_homeCell_size'))
-          .height($r('app.float.home_homeCell_size'))
-          .margin({ right: $r('app.float.home_text_margin') })
+          .width('32vp')
+          .height('32vp')
+          .margin({ right: $r('app.float.home_text_margin'),left:'8vp' })
+          .onClick(() => {
+            animateTo({ duration: 350 }, () => {
+              this.isShowPlayList = true;
+            })
+          })
       }
       .width('100%')
       .margin({ top: $r('app.float.home_list_margin') })
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/view/PodCastBigItem.ets b/scenario/arkui/MyMusic/entry/src/main/ets/view/PodCastBigItem.ets
index 42821b77f2f1a185fba7c3659c845213c1260bd4..d8d86693a5ef8acbc7f480334862fbae2070eed6 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/view/PodCastBigItem.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/view/PodCastBigItem.ets
@@ -114,7 +114,7 @@ export default struct PodCastBigItem {
     .height('320vp')
     .onClick(() => {
       prompt.showToast({
-        message: '进入歌单：' + this.item.title
+        message: '播放歌单：' + this.item.title
       })
     })
   }
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/view/PodCastListenItem.ets b/scenario/arkui/MyMusic/entry/src/main/ets/view/PodCastListenItem.ets
index ad2b46d5fb329463598f31ac13b73b2f7b1b2804..86adee2df690ea7a28489cb6c8f0f5ce8a6505b5 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/view/PodCastListenItem.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/view/PodCastListenItem.ets
@@ -77,7 +77,7 @@ export default struct PodCastListenItem {
     .justifyContent(FlexAlign.SpaceBetween)
     .onClick(() => {
       prompt.showToast({
-        message: '进入歌单：' + this.item.title
+        message: '播放歌单：' + this.item.title
       })
     })
   }
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/view/RadioItem.ets b/scenario/arkui/MyMusic/entry/src/main/ets/view/RadioItem.ets
index 507d5b0ed8b8be0dc0f60be9681c68a0abefb7ae..09e55984adffdc1eea5e868738e5fe2c5d6e7c32 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/view/RadioItem.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/view/RadioItem.ets
@@ -72,7 +72,7 @@ export default struct RadioItem {
           .alignItems(VerticalAlign.Center)
           .onClick(() => {
             prompt.showToast({
-              message: '进入歌单：' + item.title
+              message: '播放歌单：' + item.title
             })
           })
         })
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/view/SelectFirstItem.ets b/scenario/arkui/MyMusic/entry/src/main/ets/view/SelectFirstItem.ets
index 30fb3ba3ee1eaae0a0ec65b72c130a5a78e3dacd..ce7c4e6f98a072e1532aaf99ff3132e1c7b332dc 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/view/SelectFirstItem.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/view/SelectFirstItem.ets
@@ -50,7 +50,7 @@ export default struct SelectFirstItem {
     .borderRadius($r('app.float.podcast_text_border_Radius'))
     .onClick(() => {
       prompt.showToast({
-        message: '进入歌单：' + this.item.title
+        message: '播放歌单：' + this.item.title
       })
     })
   }
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/view/Setting.ets b/scenario/arkui/MyMusic/entry/src/main/ets/view/Setting.ets
index 968d537e541b24cf3fa3b55c22284e08eaa2e1b3..d731bb8220099ba11b74916db0f0b2194a68025a 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/view/Setting.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/view/Setting.ets
@@ -14,7 +14,7 @@
  */
 
 import CommonConstants from '../common/constants/CommonConstants';
-import ItemData from '../viewmodel/ItemData';
+import ItemData from '../viewmodel/SettingItemData';
 import mainViewModel from '../viewmodel/MainViewModel';
 
 /**
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/view/SmallItem.ets b/scenario/arkui/MyMusic/entry/src/main/ets/view/SmallItem.ets
index dacb70b77e48c3f999e78a9a2de25ca51be46d95..d2633ae82b3bfc95fad2f87c4dddd0046184e8c8 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/view/SmallItem.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/view/SmallItem.ets
@@ -21,7 +21,7 @@ import prompt from '@ohos.promptAction';
  */
 @Component
 export default struct SmallItem {
-  private item: ItemData = new ItemData('', $r('app.media.fig1'), '', $r('app.media.fig1'));
+  private item: ItemData = new ItemData('', $r('app.media.fig1'), '', [],$r('app.media.fig1'));
 
   build() {
     Column() {
@@ -34,7 +34,7 @@ export default struct SmallItem {
     }.width('20%')
     .onClick(() => {
       prompt.showToast({
-        message: '进入歌单：' + this.item.title
+        message: '播放歌单：' + this.item.title
       })
     })
   }
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/view/TriItem.ets b/scenario/arkui/MyMusic/entry/src/main/ets/view/TriItem.ets
index 9b0fff99ea7ad7bbc3ace640917323fe9b9075a7..ec5fddc97e63dfa10ba09df3eab3b103b34ca74e 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/view/TriItem.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/view/TriItem.ets
@@ -15,6 +15,7 @@
 
 import ItemData from '../viewmodel/TriItemData';
 import prompt from '@ohos.promptAction';
+import PlayerManager from '../manager/PlayerManager';
 
 /**
  * List item information component.
@@ -22,6 +23,7 @@ import prompt from '@ohos.promptAction';
 @Component
 export default struct TriItem {
   private items: ItemData[] = new Array<ItemData>();
+  private playerManager: PlayerManager = AppStorage.get('playerManager') as PlayerManager;
 
   build() {
     Column() {
@@ -50,8 +52,9 @@ export default struct TriItem {
         .margin($r('app.float.home_homeCell_margin'))
         .onClick(() => {
           prompt.showToast({
-            message: '进入歌单：' + item.title
+            message: '播放歌单：' + item.title
           })
+          this.playerManager.playList(item.list, 0);
         })
       })
     }
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/viewmodel/BookTriItemData.ets b/scenario/arkui/MyMusic/entry/src/main/ets/viewmodel/BookTriItemData.ets
index 696c0eb7d0edfeb2885ab243654f1e64c932c95a..579d65a85b563aca92a72e2871f8ce8226cfdc8b 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/viewmodel/BookTriItemData.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/viewmodel/BookTriItemData.ets
@@ -12,6 +12,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import AudioItem from '../manager/AudioItem';
 
 /**
  * List item data entity.
@@ -29,12 +30,13 @@ export default class BookTriItemData {
    * Other resource of list item.
    */
   others?: string;
-  subTitle: string
-  rank: string
-  score: string
-  playNum: string
+  subTitle: string;
+  rank: string;
+  score: string;
+  playNum: string;
+  list:AudioItem[];
 
-  constructor(title: string, img: Resource, subTitle: string, rank: string, score: string, playNum: string, others?: string) {
+  constructor(title: string, img: Resource, subTitle: string, rank: string, score: string, playNum: string,list:AudioItem[], others?: string) {
     this.title = title;
     this.img = img;
     this.others = others;
@@ -42,5 +44,6 @@ export default class BookTriItemData {
     this.rank = rank;
     this.score = score;
     this.playNum = playNum;
+    this.list = list;
   }
 }
\ No newline at end of file
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/viewmodel/FollowerItemData.ets b/scenario/arkui/MyMusic/entry/src/main/ets/viewmodel/FollowerItemData.ets
new file mode 100644
index 0000000000000000000000000000000000000000..dd6d4df02b7ed9bf8aded2a39015d3d4cc51f160
--- /dev/null
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/viewmodel/FollowerItemData.ets
@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) 2023 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 AudioItem from '../manager/AudioItem';
+
+/**
+ * List item data entity.
+ */
+export default class FollowerItemData {
+  /**
+   * Text of list item.
+   */
+  title: string;
+  /**
+   * Image of list item.
+   */
+  img: Resource;
+  /**
+   * Other resource of list item.
+   */
+  others?: Resource;
+  subTitle: string;
+
+  constructor(title: string, img: Resource, subTitle: string, others?: Resource) {
+    this.title = title;
+    this.img = img;
+    this.others = others;
+    this.subTitle = subTitle;
+  }
+}
\ No newline at end of file
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/viewmodel/ItemData.ets b/scenario/arkui/MyMusic/entry/src/main/ets/viewmodel/ItemData.ets
index 438e6ecea10c0404cd70849b4c66d71b1ac09b73..3d8453668f11cf2fe7bb35acc37f75f34d9be65f 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/viewmodel/ItemData.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/viewmodel/ItemData.ets
@@ -12,11 +12,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import AudioItem from '../manager/AudioItem';
 
 /**
  * List item data entity.
  */
-export default class PageResource {
+export default class ItemData {
   /**
    * Text of list item.
    */
@@ -29,12 +30,14 @@ export default class PageResource {
    * Other resource of list item.
    */
   others?: Resource;
-  subTitle: string
+  subTitle: string;
+  list:AudioItem[];
 
-  constructor(title: string, img: Resource, subTitle: string, others?: Resource) {
+  constructor(title: string, img: Resource, subTitle: string,list:AudioItem[], others?: Resource) {
     this.title = title;
     this.img = img;
     this.others = others;
+    this.list = list;
     this.subTitle = subTitle;
   }
 }
\ No newline at end of file
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/viewmodel/ListHistoryItemData.ets b/scenario/arkui/MyMusic/entry/src/main/ets/viewmodel/ListHistoryItemData.ets
new file mode 100644
index 0000000000000000000000000000000000000000..f86a3942b4c532b7da204942fb789d67faf48883
--- /dev/null
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/viewmodel/ListHistoryItemData.ets
@@ -0,0 +1,43 @@
+/*
+ * Copyright (c) 2023 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 AudioItem from '../manager/AudioItem';
+
+/**
+ * List item data entity.
+ */
+export default class ListHistoryItemData {
+  /**
+   * Text of list item.
+   */
+  title: string;
+  /**
+   * Image of list item.
+   */
+  img: Resource;
+  /**
+   * Other resource of list item.
+   */
+  others?: Resource;
+  subTitle: string;
+  list:AudioItem[];
+
+  constructor(title: string, img: Resource, subTitle: string,list:AudioItem[], others?: Resource) {
+    this.title = title;
+    this.img = img;
+    this.others = others;
+    this.list = list;
+    this.subTitle = subTitle;
+  }
+}
\ No newline at end of file
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/viewmodel/MainViewModel.ets b/scenario/arkui/MyMusic/entry/src/main/ets/viewmodel/MainViewModel.ets
index 2dfa29ab79d1e6ada0eb45e015492eadd33ad509..ce7fa9a88b5dd9a1d796a5d00c28e9b0fb1b8168 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/viewmodel/MainViewModel.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/viewmodel/MainViewModel.ets
@@ -25,12 +25,37 @@ import MineActivityItemData from './MineActivityItemData';
 import SquareTriItemData from './SquareTriItemData';
 import AudioItem from '../manager/AudioItem';
 import VideoRecommendItemData from './VideoRecommendItemData';
-
+import SettingItemData from './SettingItemData';
+import FollowerItemData from './FollowerItemData';
+import ListHistoryItemData from './ListHistoryItemData';
 
 /**
  * Binds data to components and provides interfaces.
  */
 export class MainViewModel {
+  private audios: AudioItem[] = [
+    new AudioItem('小船摇', $r('app.media.top'), '雷丘Racheal', 61, true),
+    new AudioItem('先走的人', $r('app.media.brand'), '胡海泉', 123),
+    new AudioItem('星光与潮汐', $r('app.media.found'), '张德彝陵', 312),
+    new AudioItem('唯一', $r('app.media.quareblue8'), '告五人', 161, true),
+    new AudioItem('日落大道', $r('app.media.quarered7'), '梁博', 223),
+    new AudioItem('Gravity', $r('app.media.quaregreen5'), 'Klaas', 112),
+    new AudioItem('凄美地', $r('app.media.top'), '郭顶', 121, true),
+    new AudioItem('十一种孤独', $r('app.media.brand'), '宿宇阳', 23),
+    new AudioItem('The Sprinter', $r('app.media.found'), '中川砂仁', 212),
+    new AudioItem('匆匆那年', $r('app.media.quareblue8'), '叶锐文', 161),
+    new AudioItem('Time Travel', $r('app.media.quarered7'), '岸部真明', 123),
+    new AudioItem('Rylynn', $r('app.media.quaregreen5'), 'Andy McKee', 212)
+  ]
+
+  generateList(num: number): AudioItem[] {
+    if (num > this.audios.length) {
+      num = this.audios.length;
+    }
+    let shuffled = this.audios.sort(() => Math.random() - 0.5);
+    return shuffled.slice(0, num);
+  }
+
   /**
    * Get swiper image data.
    *
@@ -53,14 +78,14 @@ export class MainViewModel {
    */
   getFirstGridData(): Array<ItemData> {
     let firstGridData: ItemData[] = [
-      new ItemData('每日推荐', $r('app.media.love'), '',),
-      new ItemData('私人漫游', $r('app.media.record'), '',),
-      new ItemData('歌单', $r('app.media.message'), '',),
-      new ItemData('排行榜', $r('app.media.shopping'), '',),
-      new ItemData('有声书', $r('app.media.target'), '',),
-      new ItemData('数字专辑', $r('app.media.circle'), '',),
-      new ItemData('直播', $r('app.media.favorite'), '',),
-      new ItemData('关注新歌', $r('app.media.recycle'), '',)
+      new ItemData('每日推荐', $r('app.media.love'), '', this.generateList(3)),
+      new ItemData('私人漫游', $r('app.media.record'), '', this.generateList(4)),
+      new ItemData('歌单', $r('app.media.message'), '', this.generateList(5)),
+      new ItemData('排行榜', $r('app.media.shopping'), '', this.generateList(6)),
+      new ItemData('有声书', $r('app.media.target'), '', this.generateList(7)),
+      new ItemData('数字专辑', $r('app.media.circle'), '', this.generateList(8)),
+      new ItemData('直播', $r('app.media.favorite'), '', this.generateList(9)),
+      new ItemData('关注新歌', $r('app.media.recycle'), '', this.generateList(13))
     ];
     return firstGridData;
   }
@@ -74,29 +99,17 @@ export class MainViewModel {
   getSecondGridData(): Array<MidItemData> {
     let secondGridData: MidItemData[] = [
       new MidItemData('民谣 | 简单的喜欢最长远', $r('app.media.top'), '1024万',
-        [new AudioItem('小船摇', $r('app.media.top'), '雷丘Racheal', 61),
-          new AudioItem('先走的人', $r('app.media.brand'), '胡海泉', 123),
-          new AudioItem('星光与潮汐', $r('app.media.found'), '张德彝陵', 312)], '最近常听'),
+        this.generateList(8), '最近常听'),
       new MidItemData('挪威天才 AW Faded！ 神曲完美了上亿人的愿望', $r('app.media.new'), '24万',
-        [new AudioItem('唯一', $r('app.media.quareblue8'), '告五人', 161),
-          new AudioItem('日落大道', $r('app.media.quarered7'), '梁博', 223),
-          new AudioItem('Gravity', $r('app.media.quaregreen5'), 'Klaas', 112)], ''),
+        this.generateList(7), ''),
       new MidItemData('节奏控系列【抖腿-ing】', $r('app.media.brand'), '47万',
-        [new AudioItem('小船摇', $r('app.media.top'), '雷丘Racheal', 61),
-          new AudioItem('先走的人', $r('app.media.brand'), '胡海泉', 123),
-          new AudioItem('星光与潮汐', $r('app.media.found'), '张德彝陵', 312)], ''),
+        this.generateList(6), ''),
       new MidItemData('下班回家时超适合放松的歌单', $r('app.media.found'), '475万',
-        [new AudioItem('小船摇', $r('app.media.top'), '雷丘Racheal', 61),
-          new AudioItem('先走的人', $r('app.media.brand'), '胡海泉', 123),
-          new AudioItem('星光与潮汐', $r('app.media.found'), '张德彝陵', 312)], '收藏过万'),
+        this.generateList(5), '收藏过万'),
       new MidItemData('555超适合放松的歌单', $r('app.media.found'), '475万',
-        [new AudioItem('小船摇', $r('app.media.top'), '雷丘Racheal', 61),
-          new AudioItem('先走的人', $r('app.media.brand'), '胡海泉', 123),
-          new AudioItem('星光与潮汐', $r('app.media.found'), '张德彝陵', 312)], '收藏过万'),
+        this.generateList(4), '收藏过万'),
       new MidItemData('666回家时超适合放松的歌单', $r('app.media.found'), '475万',
-        [new AudioItem('小船摇', $r('app.media.top'), '雷丘Racheal', 61),
-          new AudioItem('先走的人', $r('app.media.brand'), '胡海泉', 123),
-          new AudioItem('星光与潮汐', $r('app.media.found'), '张德彝陵', 312)], '收藏过万')
+        this.generateList(3), '收藏过万')
     ];
     return secondGridData;
   }
@@ -104,24 +117,24 @@ export class MainViewModel {
   getThirdGridData(): Array<TriItemData[]> {
     let thirdGridDatas = Array<TriItemData[]>();
     let thirdGridData1: TriItemData[] = [
-      new TriItemData('弱水三千', $r('app.media.top'), '满目山河', '南京古风榜第11名'),
-      new TriItemData('挪威天才', $r('app.media.new'), '赤月', ''),
-      new TriItemData('节奏控系列', $r('app.media.brand'), '扣扣', '最最最最最最'),
+      new TriItemData('弱水三千', $r('app.media.top'), '满目山河', this.generateList(6), '南京古风榜第11名'),
+      new TriItemData('挪威天才', $r('app.media.new'), '赤月', this.generateList(14), ''),
+      new TriItemData('节奏控系列', $r('app.media.brand'), '扣扣', this.generateList(34), '最最最最最最'),
     ];
     let thirdGridData2: TriItemData[] = [
-      new TriItemData('2222 | 1111', $r('app.media.top'), '池子', '最近常听'),
-      new TriItemData('2222 | 2222', $r('app.media.new'), '周深', ''),
-      new TriItemData('3333 | 3333', $r('app.media.brand'), '许巍', '最最最最最最'),
+      new TriItemData('2222 | 1111', $r('app.media.top'), '池子', this.generateList(4), '最近常听'),
+      new TriItemData('2222 | 2222', $r('app.media.new'), '周深', this.generateList(4), ''),
+      new TriItemData('3333 | 3333', $r('app.media.brand'), '许巍', this.generateList(4), '最最最最最最'),
     ];
     let thirdGridData3: TriItemData[] = [
-      new TriItemData('3333 | 1111', $r('app.media.top'), '万能青年旅店', '最近常听'),
-      new TriItemData('3333 | 2222 ', $r('app.media.new'), '摇滚', '超过76%人播放'),
-      new TriItemData('3333 | 4444', $r('app.media.brand'), '指弹', ''),
+      new TriItemData('3333 | 1111', $r('app.media.top'), '万能青年旅店', this.generateList(4), '最近常听'),
+      new TriItemData('3333 | 2222 ', $r('app.media.new'), '摇滚', this.generateList(4), '超过76%人播放'),
+      new TriItemData('3333 | 4444', $r('app.media.brand'), '指弹', this.generateList(4), ''),
     ];
     let thirdGridData4: TriItemData[] = [
-      new TriItemData('4444 | 1111', $r('app.media.top'), '民谣', '最近常听'),
-      new TriItemData('4444 | 2222 ', $r('app.media.new'), '催眠神曲', '超过76%人播放'),
-      new TriItemData('4444 | 3333', $r('app.media.brand'), 'ACG', '最最最最最最'),
+      new TriItemData('4444 | 1111', $r('app.media.top'), '民谣', this.generateList(4), '最近常听'),
+      new TriItemData('4444 | 2222 ', $r('app.media.new'), '催眠神曲', this.generateList(4), '超过76%人播放'),
+      new TriItemData('4444 | 3333', $r('app.media.brand'), 'ACG', this.generateList(4), '最最最最最最'),
     ];
     thirdGridDatas.push(thirdGridData1);
     thirdGridDatas.push(thirdGridData2);
@@ -162,24 +175,24 @@ export class MainViewModel {
   getBookTriData1(): Array<BookTriItemData[]> {
     let thirdGridDatas = Array<BookTriItemData[]>();
     let thirdGridData1: BookTriItemData[] = [
-      new BookTriItemData('科技：为了上大学，上交可控核聚变', $r('app.media.top'), '推动长三角一体化发展取得新的重大突破', '1', '9.9分', '2290万', '脑洞二次元'),
-      new BookTriItemData('无敌从满级属性开始 | 爆笑', $r('app.media.new'), '冬季呼吸道疾病防治九问九答', '2', '9.8分', '2230万', '现代言情'),
-      new BookTriItemData('别在门口放脚垫了，真脏！', $r('app.media.brand'), '和我在上海过科技感满满的一天', '3', '9.7分', '2190万', '成长励志'),
+      new BookTriItemData('科技：为了上大学，上交可控核聚变', $r('app.media.top'), '推动长三角一体化发展取得新的重大突破', '1', '9.9分', '2290万', this.generateList(13), '脑洞二次元'),
+      new BookTriItemData('无敌从满级属性开始 | 爆笑', $r('app.media.new'), '冬季呼吸道疾病防治九问九答', '2', '9.8分', '2230万', this.generateList(23), '现代言情'),
+      new BookTriItemData('别在门口放脚垫了，真脏！', $r('app.media.brand'), '和我在上海过科技感满满的一天', '3', '9.7分', '2190万', this.generateList(33), '成长励志'),
     ];
     let thirdGridData2: BookTriItemData[] = [
-      new BookTriItemData('家里再有钱，电视机旁尽量不要放这几样东西', $r('app.media.top'), '95后硕士小伙开包子店：日均三千元', '4', '9.7分', '1893万', '成长励志'),
-      new BookTriItemData('全国哪的羊肉最好吃？经过评比，这6个地方比较出名', $r('app.media.new'), '印度成“美国人的缅北”？全球90%诈骗电话从印度打出', '5', '9.6分', '1790万', '现代言情'),
-      new BookTriItemData('你在哪一刻体验到了真正的贫富差距？', $r('app.media.brand'), '在三国中谁才是第一猛将？吕布也仅排第三', '6', '9.6分', '1690万', '畅销书'),
+      new BookTriItemData('家里再有钱，电视机旁尽量不要放这几样东西', $r('app.media.top'), '95后硕士小伙开包子店：日均三千元', '4', '9.7分', '1893万', this.generateList(3), '成长励志'),
+      new BookTriItemData('全国哪的羊肉最好吃？经过评比，这6个地方比较出名', $r('app.media.new'), '印度成“美国人的缅北”？全球90%诈骗电话从印度打出', '5', '9.6分', '1790万', this.generateList(3), '现代言情'),
+      new BookTriItemData('你在哪一刻体验到了真正的贫富差距？', $r('app.media.brand'), '在三国中谁才是第一猛将？吕布也仅排第三', '6', '9.6分', '1690万', this.generateList(3), '畅销书'),
     ];
     let thirdGridData3: BookTriItemData[] = [
-      new BookTriItemData('古代深夜为什么要打更，不会打扰到人睡觉吗？', $r('app.media.top'), '关羽被杀后，诸葛亮冷冷地说了11个字', '7', '9.4分', '1292万', '经典文学'),
-      new BookTriItemData('大清灭亡后，溥仪的7个妹妹都嫁给了谁？ ', $r('app.media.new'), '大奸臣杀了杨广，又睡了杨广的皇后', '8', '9.3分', '1120万', '儿童故事'),
-      new BookTriItemData('10年后重温《康熙王朝》，才懂容妃获罪', $r('app.media.brand'), '溥任：奶奶是慈禧，溥仪是他哥', '9', '9.1分', '1040万', '现代言情'),
+      new BookTriItemData('古代深夜为什么要打更，不会打扰到人睡觉吗？', $r('app.media.top'), '关羽被杀后，诸葛亮冷冷地说了11个字', '7', '9.4分', '1292万', this.generateList(3), '经典文学'),
+      new BookTriItemData('大清灭亡后，溥仪的7个妹妹都嫁给了谁？ ', $r('app.media.new'), '大奸臣杀了杨广，又睡了杨广的皇后', '8', '9.3分', '1120万', this.generateList(3), '儿童故事'),
+      new BookTriItemData('10年后重温《康熙王朝》，才懂容妃获罪', $r('app.media.brand'), '溥任：奶奶是慈禧，溥仪是他哥', '9', '9.1分', '1040万', this.generateList(3), '现代言情'),
     ];
     let thirdGridData4: BookTriItemData[] = [
-      new BookTriItemData('司马懿一眼识破空城计，为何选择退兵？', $r('app.media.top'), '李隆基称帝后，为何立马除掉上官婉儿？', '10', '9.1分', '990万', '武侠仙侠'),
-      new BookTriItemData('贾元春为何在孕中被赐死，她犯了啥忌讳，惹得皇帝非杀她不可呢？ ', $r('app.media.new'), '明朝十六位皇帝一览表', '11', '9.0分', '760万', '经典文学'),
-      new BookTriItemData('六十年代比你想象中还要艰苦，但你绝对不敢想象', $r('app.media.brand'), '刘备不愧为一代枭雄，一生不重用赵云', '12', '9.0分', '230万', '儿童故事'),
+      new BookTriItemData('司马懿一眼识破空城计，为何选择退兵？', $r('app.media.top'), '李隆基称帝后，为何立马除掉上官婉儿？', '10', '9.1分', '990万', this.generateList(3), '武侠仙侠'),
+      new BookTriItemData('贾元春为何在孕中被赐死，她犯了啥忌讳，惹得皇帝非杀她不可呢？ ', $r('app.media.new'), '明朝十六位皇帝一览表', '11', '9.0分', '760万', this.generateList(3), '经典文学'),
+      new BookTriItemData('六十年代比你想象中还要艰苦，但你绝对不敢想象', $r('app.media.brand'), '刘备不愧为一代枭雄，一生不重用赵云', '12', '9.0分', '230万', this.generateList(3), '儿童故事'),
     ];
     thirdGridDatas.push(thirdGridData1);
     thirdGridDatas.push(thirdGridData2);
@@ -191,24 +204,24 @@ export class MainViewModel {
   getBookTriData2(): Array<BookTriItemData[]> {
     let thirdGridDatas = Array<BookTriItemData[]>();
     let thirdGridData1: BookTriItemData[] = [
-      new BookTriItemData('广播剧《你最好是》', $r('app.media.top'), '撩系直男x钓系美女，你确定你是直男？', '1', '9.9分', '2290万', '青春校园'),
-      new BookTriItemData('[你听起来很好睡]广播剧', $r('app.media.new'), '冬季呼吸道疾病防治九问九答', '2', '9.8分', '2230万', '真甜剧场'),
-      new BookTriItemData('【广播剧】这个Alpha为何那样', $r('app.media.brand'), '别人穿越都难，为何我穿越怎么', '3', '9.7分', '2190万', '狗血虐恋'),
+      new BookTriItemData('广播剧《你最好是》', $r('app.media.top'), '撩系直男x钓系美女，你确定你是直男？', '1', '9.9分', '2290万', this.generateList(3), '青春校园'),
+      new BookTriItemData('[你听起来很好睡]广播剧', $r('app.media.new'), '冬季呼吸道疾病防治九问九答', '2', '9.8分', '2230万', this.generateList(3), '真甜剧场'),
+      new BookTriItemData('【广播剧】这个Alpha为何那样', $r('app.media.brand'), '别人穿越都难，为何我穿越怎么', '3', '9.7分', '2190万', this.generateList(3), '狗血虐恋'),
     ];
     let thirdGridData2: BookTriItemData[] = [
-      new BookTriItemData('【广播剧】家里再有钱，电视机旁尽量不要放这几样东西', $r('app.media.top'), '95后硕士小伙开包子店：日均三千元', '4', '9.7分', '1893万', '成长励志'),
-      new BookTriItemData('【广播剧】全国哪的羊肉最好吃？经过评比，这6个地方比较出名', $r('app.media.new'), '印度成“美国人的缅北”？全球90%诈骗电话从印度打出', '5', '9.6分', '1790万', '现代言情'),
-      new BookTriItemData('【广播剧】你在哪一刻体验到了真正的贫富差距？', $r('app.media.brand'), '在三国中谁才是第一猛将？吕布也仅排第三', '6', '9.6分', '1690万', '畅销书'),
+      new BookTriItemData('【广播剧】家里再有钱，电视机旁尽量不要放这几样东西', $r('app.media.top'), '95后硕士小伙开包子店：日均三千元', '4', '9.7分', '1893万', this.generateList(3), '成长励志'),
+      new BookTriItemData('【广播剧】全国哪的羊肉最好吃？经过评比，这6个地方比较出名', $r('app.media.new'), '印度成“美国人的缅北”？全球90%诈骗电话从印度打出', '5', '9.6分', '1790万', this.generateList(3), '现代言情'),
+      new BookTriItemData('【广播剧】你在哪一刻体验到了真正的贫富差距？', $r('app.media.brand'), '在三国中谁才是第一猛将？吕布也仅排第三', '6', '9.6分', '1690万', this.generateList(3), '畅销书'),
     ];
     let thirdGridData3: BookTriItemData[] = [
-      new BookTriItemData('【广播剧】古代深夜为什么要打更，不会打扰到人睡觉吗？', $r('app.media.top'), '关羽被杀后，诸葛亮冷冷地说了11个字', '7', '9.4分', '1292万', '经典文学'),
-      new BookTriItemData('【广播剧】大清灭亡后，溥仪的7个妹妹都嫁给了谁？ ', $r('app.media.new'), '大奸臣杀了杨广，又睡了杨广的皇后', '8', '9.3分', '1120万', '儿童故事'),
-      new BookTriItemData('【广播剧】10年后重温《康熙王朝》，才懂容妃获罪', $r('app.media.brand'), '溥任：奶奶是慈禧，溥仪是他哥', '9', '9.1分', '1040万', '现代言情'),
+      new BookTriItemData('【广播剧】古代深夜为什么要打更，不会打扰到人睡觉吗？', $r('app.media.top'), '关羽被杀后，诸葛亮冷冷地说了11个字', '7', '9.4分', '1292万', this.generateList(3), '经典文学'),
+      new BookTriItemData('【广播剧】大清灭亡后，溥仪的7个妹妹都嫁给了谁？ ', $r('app.media.new'), '大奸臣杀了杨广，又睡了杨广的皇后', '8', '9.3分', '1120万', this.generateList(3), '儿童故事'),
+      new BookTriItemData('【广播剧】10年后重温《康熙王朝》，才懂容妃获罪', $r('app.media.brand'), '溥任：奶奶是慈禧，溥仪是他哥', '9', '9.1分', '1040万', this.generateList(3), '现代言情'),
     ];
     let thirdGridData4: BookTriItemData[] = [
-      new BookTriItemData('【广播剧】司马懿一眼识破空城计，为何选择退兵？', $r('app.media.top'), '李隆基称帝后，为何立马除掉上官婉儿？', '10', '9.1分', '990万', '武侠仙侠'),
-      new BookTriItemData('【广播剧】贾元春为何在孕中被赐死，她犯了啥忌讳，惹得皇帝非杀她不可呢？ ', $r('app.media.new'), '明朝十六位皇帝一览表', '11', '9.0分', '760万', '经典文学'),
-      new BookTriItemData('【广播剧】六十年代比你想象中还要艰苦，但你绝对不敢想象', $r('app.media.brand'), '刘备不愧为一代枭雄，一生不重用赵云', '12', '9.0分', '230万', '儿童故事'),
+      new BookTriItemData('【广播剧】司马懿一眼识破空城计，为何选择退兵？', $r('app.media.top'), '李隆基称帝后，为何立马除掉上官婉儿？', '10', '9.1分', '990万', this.generateList(3), '武侠仙侠'),
+      new BookTriItemData('【广播剧】贾元春为何在孕中被赐死，她犯了啥忌讳，惹得皇帝非杀她不可呢？ ', $r('app.media.new'), '明朝十六位皇帝一览表', '11', '9.0分', '760万', this.generateList(3), '经典文学'),
+      new BookTriItemData('【广播剧】六十年代比你想象中还要艰苦，但你绝对不敢想象', $r('app.media.brand'), '刘备不愧为一代枭雄，一生不重用赵云', '12', '9.0分', '230万', this.generateList(3), '儿童故事'),
     ];
     thirdGridDatas.push(thirdGridData1);
     thirdGridDatas.push(thirdGridData2);
@@ -227,14 +240,14 @@ export class MainViewModel {
 
   getPodCastSecond(): Array<ItemData> {
     let firstGridData: ItemData[] = [
-      new ItemData('排行榜', $r('app.media.top'), '',),
-      new ItemData('全部分类', $r('app.media.new'), '',),
-      new ItemData('男生小说', $r('app.media.brand'), '',),
-      new ItemData('女生小说', $r('app.media.found'), '',),
-      new ItemData('言情', $r('app.media.brand'), '',),
-      new ItemData('免费', $r('app.media.new'), '',),
-      new ItemData('纯爱', $r('app.media.top'), '',),
-      new ItemData('全年龄', $r('app.media.found'), '',)
+      new ItemData('排行榜', $r('app.media.top'), '', this.generateList(3)),
+      new ItemData('全部分类', $r('app.media.new'), '', this.generateList(3)),
+      new ItemData('男生小说', $r('app.media.brand'), '', this.generateList(3)),
+      new ItemData('女生小说', $r('app.media.found'), '', this.generateList(3)),
+      new ItemData('言情', $r('app.media.brand'), '', this.generateList(3)),
+      new ItemData('免费', $r('app.media.new'), '', this.generateList(3)),
+      new ItemData('纯爱', $r('app.media.top'), '', this.generateList(3)),
+      new ItemData('全年龄', $r('app.media.found'), '', this.generateList(3))
     ];
     return firstGridData;
   }
@@ -258,16 +271,16 @@ export class MainViewModel {
   }
 
   getPodCastSecondVip(): ItemData {
-    return new ItemData('听书VIP新课特惠 首月仅6元', $r('app.media.top'), '',)
+    return new ItemData('听书VIP新课特惠 首月仅6元', $r('app.media.top'), '', this.generateList(3))
   }
 
   getPodCastSecond2(): Array<ItemData> {
     let firstGridData: ItemData[] = [
-      new ItemData('三体速读-艾谁谁FM', $r('app.media.top'), '',),
-      new ItemData('大明武夫 | 穿越历史', $r('app.media.new'), '',),
-      new ItemData('科技：为了上大学', $r('app.media.brand'), '',),
-      new ItemData('大凯故事会：奇闻怪谈', $r('app.media.found'), '',),
-      new ItemData('大凯故事会：奇闻怪谈', $r('app.media.brand'), '',),
+      new ItemData('三体速读-艾谁谁FM', $r('app.media.top'), '', this.generateList(3)),
+      new ItemData('大明武夫 | 穿越历史', $r('app.media.new'), '', this.generateList(3)),
+      new ItemData('科技：为了上大学', $r('app.media.brand'), '', this.generateList(3)),
+      new ItemData('大凯故事会：奇闻怪谈', $r('app.media.found'), '', this.generateList(3)),
+      new ItemData('大凯故事会：奇闻怪谈', $r('app.media.brand'), '', this.generateList(3)),
     ];
     return firstGridData;
   }
@@ -579,59 +592,73 @@ export class MainViewModel {
     return aGridData;
   }
 
-  getSettingListData1(): Array<ItemData> {
-    let listData: ItemData[] = [
-      new ItemData('消息中心', $r("app.media.news"), '',undefined),
-      new ItemData('贝壳中心', $r("app.media.data"), '',undefined),
-      new ItemData('创作者中心', $r("app.media.menu"), '',undefined)
+  getSettingListData1(): Array<SettingItemData> {
+    let listData: SettingItemData[] = [
+      new SettingItemData('消息中心', $r("app.media.news"), '', undefined),
+      new SettingItemData('贝壳中心', $r("app.media.data"), '', undefined),
+      new SettingItemData('创作者中心', $r("app.media.menu"), '', undefined)
     ];
     return listData;
   }
-  getSettingListData2(): Array<ItemData> {
-    let listData: ItemData[] = [
-      new ItemData('趣味', $r("app.media.news"),'点击查看今日运势', undefined),
-      new ItemData('有票', $r("app.media.data"), '',undefined),
-      new ItemData('商城', $r("app.media.menu"), '',undefined),
-      new ItemData('歌房', $r("app.media.menu"), '',undefined),
-      new ItemData('音乐收藏家庭', $r("app.media.menu"),'与音乐人共享收益', undefined),
-      new ItemData('视频彩铃', $r("app.media.menu"),'pick你的音乐彩铃', undefined)
+
+  getSettingListData2(): Array<SettingItemData> {
+    let listData: SettingItemData[] = [
+      new SettingItemData('趣味', $r("app.media.news"), '点击查看今日运势', undefined),
+      new SettingItemData('有票', $r("app.media.data"), '', undefined),
+      new SettingItemData('商城', $r("app.media.menu"), '', undefined),
+      new SettingItemData('歌房', $r("app.media.menu"), '', undefined),
+      new SettingItemData('音乐收藏家庭', $r("app.media.menu"), '与音乐人共享收益', undefined),
+      new SettingItemData('视频彩铃', $r("app.media.menu"), 'pick你的音乐彩铃', undefined)
     ];
     return listData;
   }
-  getSettingListData3(): Array<ItemData> {
-    let listData: ItemData[] = [
-      new ItemData('设置', $r("app.media.news"),'', undefined),
-      new ItemData('深色模式', $r("app.media.data"), '',$r('app.media.home_normal')),
-      new ItemData('定时关闭', $r("app.media.menu"), '',undefined),
-      new ItemData('个性装扮', $r("app.media.menu"), '',undefined),
-      new ItemData('边听边存', $r("app.media.menu"),'未开启', undefined),
-      new ItemData('青少年模式', $r("app.media.menu"),'未开启', undefined)
+
+  getSettingListData3(): Array<SettingItemData> {
+    let listData: SettingItemData[] = [
+      new SettingItemData('设置', $r("app.media.news"), '', undefined),
+      new SettingItemData('深色模式', $r("app.media.data"), '', $r('app.media.home_normal')),
+      new SettingItemData('定时关闭', $r("app.media.menu"), '', undefined),
+      new SettingItemData('个性装扮', $r("app.media.menu"), '', undefined),
+      new SettingItemData('边听边存', $r("app.media.menu"), '未开启', undefined),
+      new SettingItemData('青少年模式', $r("app.media.menu"), '未开启', undefined)
     ];
     return listData;
   }
+
   getVideoRecommendItemData(): Array<VideoRecommendItemData> {
     let listData: VideoRecommendItemData[] = [
-      new VideoRecommendItemData('Kaihong街舞工作室', $r("app.media.quarered6"), $rawfile('video1.mp4'), $r("app.media.found"),'Goo老师编舞——****INAP****','43'),
-      new VideoRecommendItemData('风中流转', $r("app.media.quareblue5"), $rawfile('video2.mp4'), $r("app.media.found"),'【明星】Interview（2023舞台）','143'),
-      new VideoRecommendItemData('兔子亚洲', $r("app.media.quarepink1"), $rawfile('test1.mp4'), $r("app.media.found"),'很乱的走线，谁来整理一下？我愿平凡地陪伴子麦芽糖身边','1243'),
-      new VideoRecommendItemData('麦芽糖', $r("app.media.yellow2"), $rawfile('test2.mp4'), $r("app.media.found"),'麦芽糖的键盘很差','4323'),
-      new VideoRecommendItemData('小a的宝藏', $r("app.media.fig21"), $rawfile('video1.mp4'), $r("app.media.found"),'千篇一律的绿化毫无趣味','6573'),
+      new VideoRecommendItemData('Kaihong街舞工作室', $r("app.media.quarered6"), $rawfile('video1.mp4'), $r("app.media.found"), 'Goo老师编舞——****INAP****', '43'),
+      new VideoRecommendItemData('风中流转', $r("app.media.quareblue5"), $rawfile('video2.mp4'), $r("app.media.found"), '【明星】Interview（2023舞台）', '143'),
+      new VideoRecommendItemData('兔子亚洲', $r("app.media.quarepink1"), $rawfile('test1.mp4'), $r("app.media.found"), '很乱的走线，谁来整理一下？我愿平凡地陪伴子麦芽糖身边', '1243'),
+      new VideoRecommendItemData('麦芽糖', $r("app.media.yellow2"), $rawfile('test2.mp4'), $r("app.media.found"), '麦芽糖的键盘很差', '4323'),
+      new VideoRecommendItemData('小a的宝藏', $r("app.media.fig21"), $rawfile('video1.mp4'), $r("app.media.found"), '千篇一律的绿化毫无趣味', '6573'),
     ];
     return listData;
   }
 
-  getFollowers(): Array<ItemData> {
-    let listData: ItemData[] = [
-      new ItemData('get_a_life', $r("app.media.found"), '',),
-      new ItemData('初玖宅柒', $r("app.media.fig3"), '',),
-      new ItemData('金陵靓仔', $r("app.media.fig4"), '',),
-      new ItemData('吹口哨的青蛙', $r("app.media.about"), '',),
-      new ItemData('sunny', $r("app.media.fig2"), '',),
-      new ItemData('我是周董', $r("app.media.privacy"), '',),
-      new ItemData('更惊奇', $r("app.media.fig1"), '',)
+  getFollowers(): Array<FollowerItemData> {
+    let listData: FollowerItemData[] = [
+      new FollowerItemData('get_a_life', $r("app.media.found"), ''),
+      new FollowerItemData('初玖宅柒', $r("app.media.fig3"), ''),
+      new FollowerItemData('金陵靓仔', $r("app.media.fig4"), ''),
+      new FollowerItemData('吹口哨的青蛙', $r("app.media.about"), ''),
+      new FollowerItemData('sunny', $r("app.media.fig2"), ''),
+      new FollowerItemData('我是周董', $r("app.media.privacy"), ''),
+      new FollowerItemData('更惊奇', $r("app.media.fig1"), '')
     ];
     return listData;
   }
+  getListHistoryData(): Array<ListHistoryItemData> {
+    let list: ListHistoryItemData[] = [
+      new ListHistoryItemData('歌单：时空之力', $r('app.media.top'), '', this.generateList(4)),
+      new ListHistoryItemData('每日推荐', $r('app.media.new'), '', this.generateList(3)),
+      new ListHistoryItemData('私人漫游', $r('app.media.brand'), '', this.generateList(6)),
+      new ListHistoryItemData('歌单：2021-10', $r('app.media.found'), '', this.generateList(8)),
+      new ListHistoryItemData('每日推荐', $r('app.media.brand'), '', this.generateList(31))
+    ];
+    return list;
+  }
+
 }
 
 export default new MainViewModel();
\ No newline at end of file
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/viewmodel/SettingItemData.ets b/scenario/arkui/MyMusic/entry/src/main/ets/viewmodel/SettingItemData.ets
new file mode 100644
index 0000000000000000000000000000000000000000..f6d35b11e52424690deea9324d7ff5f2453e8a9b
--- /dev/null
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/viewmodel/SettingItemData.ets
@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) 2023 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 AudioItem from '../manager/AudioItem';
+
+/**
+ * List item data entity.
+ */
+export default class SettingItemData {
+  /**
+   * Text of list item.
+   */
+  title: string;
+  /**
+   * Image of list item.
+   */
+  img: Resource;
+  /**
+   * Other resource of list item.
+   */
+  others?: Resource;
+  subTitle: string;
+
+  constructor(title: string, img: Resource, subTitle: string, others?: Resource) {
+    this.title = title;
+    this.img = img;
+    this.others = others;
+    this.subTitle = subTitle;
+  }
+}
\ No newline at end of file
diff --git a/scenario/arkui/MyMusic/entry/src/main/ets/viewmodel/TriItemData.ets b/scenario/arkui/MyMusic/entry/src/main/ets/viewmodel/TriItemData.ets
index aa33cb0e6d9952448c17776dd543b55c21298e46..fcd41a908309000b1c41611e91b232f1f35c1449 100644
--- a/scenario/arkui/MyMusic/entry/src/main/ets/viewmodel/TriItemData.ets
+++ b/scenario/arkui/MyMusic/entry/src/main/ets/viewmodel/TriItemData.ets
@@ -12,6 +12,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import AudioItem from '../manager/AudioItem';
 
 /**
  * List item data entity.
@@ -29,12 +30,14 @@ export default class TriItemData {
    * Other resource of list item.
    */
   others?: string;
-  subTitle: string
+  subTitle: string;
+  list:AudioItem[];
 
-  constructor(title: string, img: Resource, subTitle: string, others?: string) {
+  constructor(title: string, img: Resource, subTitle: string, list:AudioItem[],others?: string) {
     this.title = title;
     this.img = img;
     this.others = others;
     this.subTitle = subTitle;
+    this.list = list;
   }
 }
\ No newline at end of file
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/ic_public_cancel.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/ic_public_cancel.png
new file mode 100644
index 0000000000000000000000000000000000000000..55e44c6c71c0fe0f47c40e1fe8c3d46ac5383853
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/ic_public_cancel.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/ic_public_copy.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/ic_public_copy.png
new file mode 100644
index 0000000000000000000000000000000000000000..d5dce1bf204c6a6aef74a05770756f437d6e3932
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/ic_public_copy.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/ic_public_delete.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/ic_public_delete.png
new file mode 100644
index 0000000000000000000000000000000000000000..4affa0f5f9e395b8d2117867082928149b9d45e1
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/ic_public_delete.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/ic_public_download_black.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/ic_public_download_black.png
new file mode 100644
index 0000000000000000000000000000000000000000..10f5983f3ea09c5f895a2c07b3fcb7909b76ef24
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/ic_public_download_black.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/ic_public_list_cycle.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/ic_public_list_cycle.png
new file mode 100644
index 0000000000000000000000000000000000000000..a1e95ae27ca18bd9150205bc1de27afc8e812255
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/ic_public_list_cycle.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/ic_public_music_red.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/ic_public_music_red.png
new file mode 100644
index 0000000000000000000000000000000000000000..e358ec29e6df9d01324332a4de4017ea750f07d3
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/ic_public_music_red.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/ic_public_order_play.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/ic_public_order_play.png
new file mode 100644
index 0000000000000000000000000000000000000000..6fd4788872872098b7a3a43fe310ec32bc21f972
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/ic_public_order_play.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/ic_public_random.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/ic_public_random.png
new file mode 100644
index 0000000000000000000000000000000000000000..0ef64848eb8c577075787af7263b46a2d42f0691
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/ic_public_random.png differ
diff --git a/scenario/arkui/MyMusic/entry/src/main/resources/base/media/ic_public_single_cycle.png b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/ic_public_single_cycle.png
new file mode 100644
index 0000000000000000000000000000000000000000..287c78a143313a0a467431a524bc566c0be3ebb1
Binary files /dev/null and b/scenario/arkui/MyMusic/entry/src/main/resources/base/media/ic_public_single_cycle.png differ