diff --git a/scenario/MusicPlayerOnline/entry/src/main/ets/constants/ServerConstants.ets b/scenario/MusicPlayerOnline/entry/src/main/ets/constants/ServerConstants.ets
index 78e09c1e1e261064cc412dad01f432f85a414823..f9d8eeab0498f4428148b08b8bf73805c474ad7d 100644
--- a/scenario/MusicPlayerOnline/entry/src/main/ets/constants/ServerConstants.ets
+++ b/scenario/MusicPlayerOnline/entry/src/main/ets/constants/ServerConstants.ets
@@ -99,18 +99,20 @@ export default class ServerConstants {
   /**
    * 首页播放状态更新消息
    */
-  static readonly MAIN_UPDATE_TIME = '1';
-  static readonly MAIN_UPDATE_STATE = '2';
+  static readonly MAIN_UPDATE_TIME = '01';
+  static readonly MAIN_UPDATE_STATE = '02';
+  static readonly MAIN_SHOW_PLAYLIST = '03';
   /**
    * 详情页播放状态更新消息
    */
-  static readonly DETAIL_UPDATE_TIME = '3';
-  static readonly DETAIL_UPDATE_STATE = '4';
-  static readonly DETAIL_UPDATE_FAVOR_AND_QUALITY = '5';
+  static readonly DETAIL_UPDATE_TIME = '10';
+  static readonly DETAIL_UPDATE_STATE = '11';
+  static readonly DETAIL_UPDATE_FAVOR_AND_QUALITY = '12';
   /**
    * 播放列表播放状态更新消息
    */
-  static readonly PLAYLIST_UPDATE_STATE = '6';
+  static readonly PLAYLIST_UPDATE_STATE = '20';
+  static readonly PLAYLIST_UPDATE_CHANGED = '21';
 
   //首页列表更新消息
   static readonly UPDATE_USER_LIST = '8';
@@ -128,7 +130,7 @@ export default class ServerConstants {
    * PLAYER LIST
    */
   static readonly LIST_SONG_COUNT = '首';
-  static readonly LIST_SONG_NO_PLAYING = '没有播放';
+  static readonly LIST_SONG_NO_PLAYING = '点击或双击歌单';
   static readonly LIST_SONG_FAVOURITE = '我的收藏';
   static readonly LIST_SONG_RECENT = '最近播放';
   /**
diff --git a/scenario/MusicPlayerOnline/entry/src/main/ets/manager/HttpManager.ets b/scenario/MusicPlayerOnline/entry/src/main/ets/manager/HttpManager.ets
index ac4f64fc82f79bc3515365c2eda4be5023bbce45..c969d97ccdf0a4c3fb515890d3302352da372deb 100644
--- a/scenario/MusicPlayerOnline/entry/src/main/ets/manager/HttpManager.ets
+++ b/scenario/MusicPlayerOnline/entry/src/main/ets/manager/HttpManager.ets
@@ -380,10 +380,17 @@ export default class HttpManager {
                 Object.keys(jsonObject[key]).forEach((key1) => {
                   let aPlayingList: AudioData[] = [];
                   Object.keys(jsonObject[key][key1]).forEach((key2) => {
-                    aPlayingList.push(new AudioData(jsonObject[key][key1][key2].name, jsonObject[key][key1][key2].singer, jsonObject[key][key1][key2].id));
+                    aPlayingList.push(new AudioData(
+                      jsonObject[key][key1][key2].name,
+                      jsonObject[key][key1][key2].singer,
+                      jsonObject[key][key1][key2].id,
+                      jsonObject[key][key1][key2].album,
+                      jsonObject[key][key1][key2].year,
+                      jsonObject[key][key1][key2].language
+                    ));
                   })
                   let item = new PlayListData(key1, $r('app.media.icon'),
-                    aPlayingList.length > 1 ? aPlayingList.length + ServerConstants.LIST_SONG_COUNT : '',
+                    aPlayingList.length + ServerConstants.LIST_SONG_COUNT,
                     aPlayingList, '')
                   playingLists.push(item);
                 });
@@ -439,10 +446,18 @@ export default class HttpManager {
               let item: PlayListData | undefined = undefined;
               if (jsonObject[ServerConstants.LIST_SONG_FAVOURITE]) {
                 Object.keys(jsonObject[ServerConstants.LIST_SONG_FAVOURITE]).forEach((key) => {
-                  aPlayingList.push(new AudioData(jsonObject[ServerConstants.LIST_SONG_FAVOURITE][key].name, jsonObject[ServerConstants.LIST_SONG_FAVOURITE][key].singer, jsonObject[ServerConstants.LIST_SONG_FAVOURITE][key].id));
+                  aPlayingList.push(new AudioData(
+                    jsonObject[ServerConstants.LIST_SONG_FAVOURITE][key].name,
+                    jsonObject[ServerConstants.LIST_SONG_FAVOURITE][key].singer,
+                    jsonObject[ServerConstants.LIST_SONG_FAVOURITE][key].id,
+                    jsonObject[ServerConstants.LIST_SONG_FAVOURITE][key].album,
+                    jsonObject[ServerConstants.LIST_SONG_FAVOURITE][key].year,
+                    jsonObject[ServerConstants.LIST_SONG_FAVOURITE][key].language
+                  )
+                  );
                 });
                 item = new PlayListData(ServerConstants.LIST_SONG_FAVOURITE, $r('app.media.icon'),
-                  aPlayingList.length > 1 ? aPlayingList.length + ServerConstants.LIST_SONG_COUNT : '',
+                  aPlayingList.length + ServerConstants.LIST_SONG_COUNT,
                   aPlayingList, '')
               }
               this.PlayerManager.setFavourList(aPlayingList);
@@ -495,11 +510,18 @@ export default class HttpManager {
               Object.keys(jsonObject).forEach((key) => {
                 let aPlayingList: AudioData[] = Array<AudioData>();
                 Object.keys(jsonObject[key]).forEach((key2) => {
-                  aPlayingList.push(new AudioData(jsonObject[key][key2].name, jsonObject[key][key2].singer, jsonObject[key][key2].id));
+                  aPlayingList.push(new AudioData(
+                    jsonObject[key][key2].name,
+                    jsonObject[key][key2].singer,
+                    jsonObject[key][key2].id,
+                    jsonObject[key][key2].album,
+                    jsonObject[key][key2].year,
+                    jsonObject[key][key2].language
+                  ));
                 });
 
                 let item = new PlayListData(key, $r('app.media.icon'),
-                  aPlayingList.length > 1 ? aPlayingList.length + ServerConstants.LIST_SONG_COUNT : '',
+                  aPlayingList.length + ServerConstants.LIST_SONG_COUNT,
                   aPlayingList, '');
                 let eventData: emitter.EventData = {
                   data: {
@@ -551,10 +573,12 @@ export default class HttpManager {
               interface PlaylistItem {
                 playlist_name: string;
                 song: number;
-                id: number;
+                id: string;
                 name: string;
                 singer: string;
                 language: string;
+                year: string;
+                album: string;
               }
 
               let jsonObject: PlaylistItem[] = JSON.parse(data.result as string);
@@ -571,11 +595,11 @@ export default class HttpManager {
                 console.log(`Playlist: ${playlistName}`);
                 let aPlayingList: AudioData[] = Array<AudioData>();
                 groupedByPlaylistName[playlistName].forEach((song, index) => {
-                  aPlayingList.push(new AudioData(song.name, song.singer, song.id.toString()));
+                  aPlayingList.push(new AudioData(song.name, song.singer, song.id, song.album, song.year, song.language));
                 });
 
                 let item = new PlayListData(playlistName, $r('app.media.icon'),
-                  aPlayingList.length > 1 ? aPlayingList.length + ServerConstants.LIST_SONG_COUNT : '',
+                  aPlayingList.length + ServerConstants.LIST_SONG_COUNT,
                   aPlayingList, '')
                 let eventData: emitter.EventData = {
                   data: {
@@ -624,7 +648,14 @@ export default class HttpManager {
               Object.keys(jsonObject).forEach((key) => {
                 Object.keys(jsonObject[key]).forEach((key2) => {
                   let aPlayingList: AudioData[] = Array<AudioData>();
-                  let aAudioItem = new AudioData(jsonObject[key][key2].name, jsonObject[key][key2].singer, jsonObject[key][key2].id)
+                  let aAudioItem = new AudioData(
+                    jsonObject[key][key2].name,
+                    jsonObject[key][key2].singer,
+                    jsonObject[key][key2].id,
+                    jsonObject[key][key2].album,
+                    jsonObject[key][key2].year,
+                    jsonObject[key][key2].language
+                  )
                   aPlayingList.push(aAudioItem);
                   let item = new PlayListData(jsonObject[key][key2].name, $r('app.media.icon'), '', aPlayingList, '')
                   let eventData: emitter.EventData = {
diff --git a/scenario/MusicPlayerOnline/entry/src/main/ets/manager/PlayerManager.ets b/scenario/MusicPlayerOnline/entry/src/main/ets/manager/PlayerManager.ets
index cf80333efada3e1bf2c60a5f9ee7d65371c7652c..0f17db0fd7480d3af08d0b93b441971113f8a04d 100644
--- a/scenario/MusicPlayerOnline/entry/src/main/ets/manager/PlayerManager.ets
+++ b/scenario/MusicPlayerOnline/entry/src/main/ets/manager/PlayerManager.ets
@@ -24,6 +24,7 @@ import backgroundTaskManager from '@ohos.resourceschedule.backgroundTaskManager'
 import wantAgent, { WantAgent } from '@ohos.app.ability.wantAgent';
 import common from '@ohos.app.ability.common';
 import HttpManager from './HttpManager';
+import PlayListData from '../model/PlayListData';
 
 
 export default class PlayerManager {
@@ -31,6 +32,7 @@ export default class PlayerManager {
   private isSeek: boolean = false;
   private avPlayer: media.AVPlayer | undefined = undefined;
   private list: AudioData[] = [];
+  private explorePlaylistItem: PlayListData = new PlayListData('', $r('app.media.icon'), '', [], '');
   private favourList: AudioData[] = [];
   private currentTime: number = 0;
   private currentDuration: number = 0;
@@ -143,7 +145,7 @@ export default class PlayerManager {
   /**
    * 初始化
    */
-  playList(listTitle: string, list: AudioData[], item: AudioData): void {
+  playList(listTitle: string, list: AudioData[], item: AudioData, isNotify?: boolean): void {
     this.stop();
     if (list.length <= 0) {
       Logger.error(this.tag, 'PlayList:' + 'list length <= 0');
@@ -157,6 +159,9 @@ export default class PlayerManager {
       this.shuffleIndex.push(i);
     }
     this.play(item);
+    if (isNotify) {
+      emitter.emit(ServerConstants.PLAYLIST_UPDATE_CHANGED, this.emitterOptions);
+    }
   }
 
   getCurrentPlayList(): AudioData[] {
@@ -183,7 +188,7 @@ export default class PlayerManager {
       this.item.isPlaying = false;
     }
     let index = -1
-    if (item === undefined) {
+    if (item === undefined || item.id === '') {
       return
     }
     index = this.list.indexOf(item)
@@ -327,6 +332,14 @@ export default class PlayerManager {
     this.item.isFavor = isFavor;
   }
 
+  setExploreList(aPlayListData: PlayListData) {
+    this.explorePlaylistItem = aPlayListData;
+  }
+
+  getExploreList(): PlayListData {
+    return this.explorePlaylistItem;
+  }
+
   getListTitle(): string {
     return this.listTitle;
   }
diff --git a/scenario/MusicPlayerOnline/entry/src/main/ets/model/AudioData.ets b/scenario/MusicPlayerOnline/entry/src/main/ets/model/AudioData.ets
index 6accefa14ece85ef93b78ef9c0220ca479e83e04..ea72b123574df67c0688a306e0785b9ed934e374 100644
--- a/scenario/MusicPlayerOnline/entry/src/main/ets/model/AudioData.ets
+++ b/scenario/MusicPlayerOnline/entry/src/main/ets/model/AudioData.ets
@@ -18,16 +18,24 @@
  */
 
 export default class AudioData {
+  id: string = ''
   title: string = '';
   artist: string = '';
-  id: string = ''
   isPlaying: boolean = false;
   isFavor: boolean = false;
   quality = '.mp3';
+  album?: string = '';
+  year?: string = '';
+  language?: string = '';
+  count?: string = '';
 
-  constructor(title: string, artist: string, id:string) {
+  constructor(title: string, artist: string, id: string, album?: string, year?: string, language?: string, count?: string) {
     this.title = title;
     this.artist = artist;
     this.id = id;
+    this.album = album;
+    this.year = year;
+    this.language = language;
+    this.count = count;
   }
 }
\ No newline at end of file
diff --git a/scenario/MusicPlayerOnline/entry/src/main/ets/pages/Index.ets b/scenario/MusicPlayerOnline/entry/src/main/ets/pages/Index.ets
index 6c95bdae137e5ec42fffd89797305dbd5b52185a..96f70ea1636fa822f29eb21b210d4f5474600c56 100644
--- a/scenario/MusicPlayerOnline/entry/src/main/ets/pages/Index.ets
+++ b/scenario/MusicPlayerOnline/entry/src/main/ets/pages/Index.ets
@@ -14,7 +14,7 @@
  */
 
 import PlayerBar from '../view/PlayerBar';
-import PlayListDetail from '../view/PlayListDetail';
+import CurrentPlayList from '../view/CurrentPlayList';
 import ServerConstants from '../constants/ServerConstants';
 import UIConstants from '../constants/UIConstants';
 import PlayListData from '../model/PlayListData';
@@ -28,6 +28,7 @@ import HttpManager from '../manager/HttpManager';
 import SingleRowScrollerList from '../view/SingleRowScrollerList';
 import TriColGridList from '../view/TriColGridList';
 import TriColNestScrollerGrid from '../view/TriColNestScrollerGrid';
+import ExplorePlayList from '../view/ExplorePlayList';
 
 PersistentStorage.persistProp('loginCookie', '');
 PersistentStorage.persistProp('loginName', ServerConstants.LOGIN_INFO_NO);
@@ -40,6 +41,7 @@ struct Index {
   @State searchResultPlayLists: PlayListData[] = [];
   @State searchSongTitle: string = ServerConstants.SEARCH_DEFAULT;
   @State isShowPlayerDetail: boolean = false;
+  @State isShowCurrentPlayList: boolean = false;
   @State isShowPlayList: boolean = false;
   @State isRefreshing: boolean = false;
   @State isShowSingerList: boolean = false;
@@ -112,11 +114,23 @@ struct Index {
     emitter.on(ServerConstants.UPDATE_USER_LIST, (eventData: emitter.EventData) => {
       this.updateLists(eventData);
     });
+
+    emitter.on(ServerConstants.PLAYLIST_UPDATE_CHANGED, () => {
+      if (!this.isShowPlayerDetail) {
+        this.isShowPlayerDetail = true;
+      }
+    });
+
+    emitter.on(ServerConstants.MAIN_SHOW_PLAYLIST, () => {
+      this.showExplorePlaylist();
+    });
   }
 
   aboutToDisappear(): void {
     emitter.off(ServerConstants.UPDATE_USER_LIST);
     emitter.off(ServerConstants.LOGIN_RESULT);
+    emitter.off(ServerConstants.PLAYLIST_UPDATE_CHANGED);
+    emitter.off(ServerConstants.MAIN_SHOW_PLAYLIST);
     if (this.dialogController !== null) {
       this.dialogController.close();
       this.dialogController = null;
@@ -173,9 +187,10 @@ struct Index {
             .borderRadius(4)
             .height(42)
             .width(96)
-            .textAlign(TextAlign.End)
+            .textAlign(TextAlign.Center)
             .fontSize(28)
             .maxLines(1)
+            .shadow({ radius: 1, color: Color.Gray })
             .clickEffect(UIConstants.CLICK_EFFECT)
             .onClick(() => {
               if (this.loginButton === ServerConstants.LOGIN_BUTTON_OUT) {
@@ -262,8 +277,17 @@ struct Index {
             }, 1000)
           })
 
+          if (this.isShowPlayList) {
+            ExplorePlayList({ isShowPlayList: this.isShowPlayList })
+              .width('100%')
+              .height('90%')
+              .transition(TransitionEffect.OPACITY
+                .animation({ duration: 1000, curve: Curve.FastOutSlowIn })
+                .combine(TransitionEffect.move(TransitionEdge.BOTTOM)))
+              .margin({ bottom: 72 })
+          }
           Column() {
-            PlayerBar({ isShowPlayList: $isShowPlayList, isShowPlayerDetail: $isShowPlayerDetail })
+            PlayerBar({ isShowCurrentPlayList: $isShowCurrentPlayList, isShowPlayerDetail: $isShowPlayerDetail })
               .backgroundColor(Color.White)
               .width('100%')
               .margin({ top: 4 })
@@ -277,7 +301,7 @@ struct Index {
 
           if (this.isShowPlayerDetail) {
             PlayerDetail({
-              isShowPlayList: $isShowPlayList,
+              isShowCurrentPlayList: $isShowCurrentPlayList,
               isShowPlayerDetail: $isShowPlayerDetail,
               customPlayLists: this.customPlayLists,
               loginInfo: this.loginInfo,
@@ -289,22 +313,22 @@ struct Index {
                 .combine(TransitionEffect.move(TransitionEdge.BOTTOM))
               )
           }
-          if (this.isShowPlayList || this.isShowSidebar) {
+          if (this.isShowCurrentPlayList || this.isShowSidebar) {
             Rect()
               .width('100%')
               .height('100%')
               .fill('#e0e0e0')
               .fillOpacity(this.maskOpacity)
               .onClick(() => {
-                this.isShowPlayList = false;
+                this.isShowCurrentPlayList = false;
                 animateTo({ duration: 1000 }, () => {
                   this.isShowSidebar = false;
                 })
               })
               .transition(TransitionEffect.OPACITY.animation({ duration: 1000, curve: Curve.Ease }))
           }
-          if (this.isShowPlayList) {
-            PlayListDetail()
+          if (this.isShowCurrentPlayList) {
+            CurrentPlayList()
               .width('100%')
               .height('80%')
               .transition(TransitionEffect.OPACITY
@@ -335,12 +359,15 @@ struct Index {
         this.isShowSidebar = false;
       })
       return true;
-    } else if (this.isShowPlayList) {
-      this.isShowPlayList = false;
+    } else if (this.isShowCurrentPlayList) {
+      this.isShowCurrentPlayList = false;
       return true;
     } else if (this.isShowPlayerDetail) {
       this.isShowPlayerDetail = false;
       return true;
+    } else if (this.isShowPlayList) {
+      this.isShowPlayList = false;
+      return true;
     } else {
       return false;
     }
@@ -402,6 +429,12 @@ struct Index {
     }
   }
 
+  showExplorePlaylist() {
+    if (!this.isShowPlayList) {
+      this.isShowPlayList = true;
+    }
+  }
+
   updateLists(eventData: emitter.EventData) {
     if (eventData !== undefined && eventData.data !== undefined) {
       switch (eventData.data.message) {
diff --git a/scenario/MusicPlayerOnline/entry/src/main/ets/view/PlayListDetail.ets b/scenario/MusicPlayerOnline/entry/src/main/ets/view/CurrentPlayList.ets
similarity index 87%
rename from scenario/MusicPlayerOnline/entry/src/main/ets/view/PlayListDetail.ets
rename to scenario/MusicPlayerOnline/entry/src/main/ets/view/CurrentPlayList.ets
index 365252ca05766afc6ba78424f818b66377c7b4c6..44814e140968f62478b29ca183db72c48e8c2dec 100644
--- a/scenario/MusicPlayerOnline/entry/src/main/ets/view/PlayListDetail.ets
+++ b/scenario/MusicPlayerOnline/entry/src/main/ets/view/CurrentPlayList.ets
@@ -21,7 +21,7 @@ import ServerConstants from '../constants/ServerConstants';
 import UIConstants from '../constants/UIConstants';
 
 @Component
-export default struct PlayListDetail {
+export default struct CurrentPlayList {
   private playerManager: PlayerManager = AppStorage.get('PlayerManager') as PlayerManager;
   @State playingList: AudioData[] = Array<AudioData>();
   @State listTitle: string = ServerConstants.LIST_SONG_NO_PLAYING;
@@ -29,7 +29,7 @@ export default struct PlayListDetail {
 
   aboutToAppear() {
     this.listTitle = this.playerManager.getListTitle();
-    animateTo({ duration: 2000 }, () => {
+    animateTo({ duration: 1000 }, () => {
       this.playingList = this.playerManager.getCurrentPlayList();
     })
     setTimeout(() => {
@@ -47,11 +47,18 @@ export default struct PlayListDetail {
 
   build() {
     Column() {
-      Text(this.listTitle)
-        .fontSize(24)
-        .margin(12)
-        .maxLines(1)
-        .textOverflow({ overflow: TextOverflow.MARQUEE })
+      Row() {
+        Text('当前播放：' + this.listTitle)
+          .fontSize(24)
+          .maxLines(1)
+          .textOverflow({ overflow: TextOverflow.MARQUEE })
+        Text('(' + this.playingList.length + ')')
+          .fontSize(16)
+          .maxLines(1)
+      }
+      .margin(12)
+      .alignItems(VerticalAlign.Bottom)
+
       List({ scroller: this.scrollerForList }) {
         ForEach(this.playingList, (item: AudioData) => {
           ListItem() {
diff --git a/scenario/MusicPlayerOnline/entry/src/main/ets/view/ExplorePlayList.ets b/scenario/MusicPlayerOnline/entry/src/main/ets/view/ExplorePlayList.ets
new file mode 100644
index 0000000000000000000000000000000000000000..4db54078ef5e4beb4c86053ac2931651920037c4
--- /dev/null
+++ b/scenario/MusicPlayerOnline/entry/src/main/ets/view/ExplorePlayList.ets
@@ -0,0 +1,109 @@
+/*
+ * Copyright (c) 2024 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import AudioData from '../model/AudioData';
+import PlayerManager from '../manager/PlayerManager'
+import ExploreSongItem from './ExploreSongItem';
+import UIConstants from '../constants/UIConstants';
+import PlayListData from '../model/PlayListData';
+import prompt from '@ohos.promptAction';
+
+@Component
+export default struct ExplorePlayList {
+  private PlayerManager: PlayerManager = AppStorage.get('PlayerManager') as PlayerManager;
+  @State explorePlaylistItem: PlayListData = new PlayListData('', $r('app.media.icon'), '', [], '');
+  @Link isShowPlayList: boolean;
+  private scrollerForList: Scroller = new Scroller();
+
+  aboutToAppear() {
+    animateTo({ duration: 1000 }, () => {
+      this.explorePlaylistItem = this.PlayerManager.getExploreList();
+    })
+  }
+
+  aboutToDisappear(): void {
+  }
+
+  build() {
+    Column() {
+      Row() {
+        Image($r('app.media.chevron_down'))
+          .width(48)
+          .height(48)
+          .padding(6)
+          .clickEffect(UIConstants.CLICK_EFFECT)
+          .onClick(() => {
+            this.isShowPlayList = false;
+          })
+          .id('detail_dismiss')
+        Row() {
+          Text(this.explorePlaylistItem.title)
+            .fontSize(24)
+            .maxLines(1)
+            .textOverflow({ overflow: TextOverflow.MARQUEE })
+          Text('(' + this.explorePlaylistItem.list.length + ')')
+            .fontSize(16)
+            .maxLines(1)
+        }
+        .margin(12)
+        .alignItems(VerticalAlign.Bottom)
+
+        Image($r('app.media.media_center'))
+          .width(48)
+          .height(48)
+          .padding(6)
+          .clickEffect(UIConstants.CLICK_EFFECT)
+          .onClick(() => {
+            if (this.explorePlaylistItem.list.length > 0) {
+              prompt.showToast({
+                message: '播放歌单：' + this.explorePlaylistItem.title
+              })
+              this.PlayerManager.playList(this.explorePlaylistItem.title, this.explorePlaylistItem.list, this.explorePlaylistItem.list[0]);
+            }
+          })
+      }
+      .width('90%')
+      .margin(4)
+      .justifyContent(FlexAlign.SpaceBetween)
+
+      List({ scroller: this.scrollerForList }) {
+        ForEach(this.explorePlaylistItem.list, (item: AudioData, index: number) => {
+          ListItem() {
+            Row() {
+              ExploreSongItem({ item, index })
+            }
+          }
+          .backgroundColor((index % 2) === 0 ? '#fafafa' : Color.White)
+          .width('100%')
+          .height('84vp')
+          .transition({ type: TransitionType.All, opacity: 0 })
+          .clickEffect(UIConstants.CLICK_EFFECT)
+          .onClick(() => {
+            prompt.showToast({
+              message: '播放歌曲：' + item.title
+            })
+            this.PlayerManager.playList(this.explorePlaylistItem.title, this.explorePlaylistItem.list, item);
+          })
+        })
+      }
+      .width('100%')
+      .backgroundColor(Color.White)
+      .margin({ bottom: 36 })
+    }
+    .height('100%')
+    .backgroundColor(Color.White)
+    .borderRadius({ topLeft: '18vp', topRight: '18vp' })
+  }
+}
diff --git a/scenario/MusicPlayerOnline/entry/src/main/ets/view/ExploreSongItem.ets b/scenario/MusicPlayerOnline/entry/src/main/ets/view/ExploreSongItem.ets
new file mode 100644
index 0000000000000000000000000000000000000000..ed332789c44a6879def42aa2889c0540601deb76
--- /dev/null
+++ b/scenario/MusicPlayerOnline/entry/src/main/ets/view/ExploreSongItem.ets
@@ -0,0 +1,56 @@
+/*
+ * Copyright (c) 2024 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import AudioData from '../model/AudioData';
+import ServerConstants from '../constants/ServerConstants';
+
+@Component
+export default struct ExploreSongItem {
+  @State item: AudioData = new AudioData('', '', '');
+  @State index: number = 0;
+
+  aboutToAppear(): void {
+  }
+
+  build() {
+    Row() {
+      Text((this.index + 1).toString())
+        .fontSize(20)
+        .fontColor('#a0a0a0')
+      Column() {
+        Text(this.item.title)
+          .fontSize(20)
+          .maxLines(1)
+          .width('90%')
+          .margin({top:4,bottom:8})
+        Row() {
+          Text(this.item.artist)
+            .fontColor('#a0a0a0')
+            .maxLines(1)
+          Blank()
+          Text(this.item.album+'('+this.item.year+')')
+            .fontColor('#a0a0a0')
+            .maxLines(1)
+        }
+        .align(Alignment.Start)
+        .width('90%')
+        .justifyContent(FlexAlign.SpaceBetween)
+      }
+    }
+    .justifyContent(FlexAlign.SpaceBetween)
+    .width('90%')
+    .alignSelf(ItemAlign.Center)
+  }
+}
diff --git a/scenario/MusicPlayerOnline/entry/src/main/ets/view/PlayListItem.ets b/scenario/MusicPlayerOnline/entry/src/main/ets/view/PlayListItem.ets
index 9f1003b661945419f1d53e226d9579e63e225544..976bed0d500feb54eee0240afa0ea8dd56fbd977 100644
--- a/scenario/MusicPlayerOnline/entry/src/main/ets/view/PlayListItem.ets
+++ b/scenario/MusicPlayerOnline/entry/src/main/ets/view/PlayListItem.ets
@@ -19,6 +19,7 @@ import UIConstants from '../constants/UIConstants';
 import prompt from '@ohos.promptAction';
 import PlayerManager from '../manager/PlayerManager';
 import ServerConstants from '../constants/ServerConstants';
+import emitter from '@ohos.events.emitter';
 
 /**
  * List item information component.
@@ -27,6 +28,9 @@ import ServerConstants from '../constants/ServerConstants';
 export default struct PlayListItem {
   private item: ItemData = new ItemData('', $r('app.media.icon'), '', [], '');
   private PlayerManager: PlayerManager = AppStorage.get('PlayerManager') as PlayerManager;
+  private emitterOptions: emitter.Options = {
+    priority: emitter.EventPriority.HIGH
+  };
 
   aboutToAppear() {
   }
@@ -38,12 +42,9 @@ export default struct PlayListItem {
           Text(this.item.subTitle)
             .fontSize(16)
             .margin(8)
+            .backgroundColor('#10909090')
             .fontColor(Color.White)
           Blank()
-          Image($r('app.media.ic_public_play_white'))
-            .width(20)
-            .height(20)
-            .margin(8)
         }
         .width('100%')
       }
@@ -57,24 +58,38 @@ export default struct PlayListItem {
       Text(this.item.title)
         .fontSize(20)
         .maxLines(1)
-        .textOverflow({overflow:TextOverflow.MARQUEE})
+        .textOverflow({ overflow: TextOverflow.MARQUEE })
         .width(120)
         .textAlign(TextAlign.Center)
         .margin({ top: 4 })
     }
     .alignItems(HorizontalAlign.Center)
     .clickEffect(UIConstants.CLICK_EFFECT)
-    .onClick(() => {
-      this.enterList();
-    })
+    .gesture(
+      TapGesture({ count: 2 })
+        .onAction((event: GestureEvent) => {
+          if (event) {
+            this.playThisList();
+          }
+        })
+    )
+    .gesture(
+      TapGesture({ count: 1 })
+        .onAction((event: GestureEvent) => {
+          if (event) {
+            this.PlayerManager.setExploreList(this.item);
+            emitter.emit(ServerConstants.MAIN_SHOW_PLAYLIST, this.emitterOptions);
+          }
+        })
+    )
   }
 
-  enterList() {
+  playThisList() {
     prompt.showToast({
       message: '播放歌单：' + this.item.title
     })
     if (this.item.list.length > 0) {
-      this.PlayerManager.playList(this.item.title, this.item.list, this.item.list[0])
+      this.PlayerManager.playList(this.item.title, this.item.list, this.item.list[0], true);
     }
   }
 }
\ No newline at end of file
diff --git a/scenario/MusicPlayerOnline/entry/src/main/ets/view/PlayerBar.ets b/scenario/MusicPlayerOnline/entry/src/main/ets/view/PlayerBar.ets
index ac2dc985c5f0cdb455a993f17f60746aecf80f24..490f4e1801886c4b96cf006a2d539db1cdd3ba18 100644
--- a/scenario/MusicPlayerOnline/entry/src/main/ets/view/PlayerBar.ets
+++ b/scenario/MusicPlayerOnline/entry/src/main/ets/view/PlayerBar.ets
@@ -31,7 +31,7 @@ export default struct PlayerBar {
   @State durationTime: number = 100;
   @State currentTime: number = 0;
   @State state: string = ServerConstants.PLAYER_STATE_UNKNOWN;
-  @Link isShowPlayList: boolean;
+  @Link isShowCurrentPlayList: boolean;
   @Link isShowPlayerDetail: boolean;
   private PlayerManager: PlayerManager = AppStorage.get('PlayerManager') as PlayerManager;
   private spaces: string = '               '
@@ -121,12 +121,13 @@ export default struct PlayerBar {
         .margin({ right: 8 })
 
         Image($r('app.media.music_note_list'))
-          .width(42)
-          .height(42)
+          .width(40)
+          .height(40)
           .margin({ right: 8, left: 8 })
+          .shadow({ radius: 1, color: Color.Gray })
           .clickEffect(UIConstants.CLICK_EFFECT)
           .onClick(() => {
-            this.isShowPlayList = true;
+            this.isShowCurrentPlayList = true;
           })
           .id('playlist')
       }
diff --git a/scenario/MusicPlayerOnline/entry/src/main/ets/view/PlayerDetail.ets b/scenario/MusicPlayerOnline/entry/src/main/ets/view/PlayerDetail.ets
index 710ddb5b0699970ed392e9c44df17f261e392d6c..c462c80cbfad9fcc96a045fef3ac7312cb992634 100644
--- a/scenario/MusicPlayerOnline/entry/src/main/ets/view/PlayerDetail.ets
+++ b/scenario/MusicPlayerOnline/entry/src/main/ets/view/PlayerDetail.ets
@@ -46,7 +46,7 @@ export default struct PlayerDetail {
   @State contentSwitch: boolean = true;
   @State playMode: number = this.PlayerManager.getPlayMode();
   @State noItem: boolean = false;
-  @Link isShowPlayList: boolean;
+  @Link isShowCurrentPlayList: boolean;
   @Link isShowPlayerDetail: boolean;
   @Prop customPlayLists: PlayListData[];
   @Prop loginInfo: string;
@@ -429,7 +429,7 @@ export default struct PlayerDetail {
           .height(42)
           .clickEffect(UIConstants.CLICK_EFFECT)
           .onClick(() => {
-            this.isShowPlayList = true;
+            this.isShowCurrentPlayList = true;
           })
           .id('detail_playlist')
       }.width('100%')
diff --git a/scenario/MusicPlayerOnline/entry/src/main/ets/view/loginDialog.ets b/scenario/MusicPlayerOnline/entry/src/main/ets/view/loginDialog.ets
index 2bf9baccfd6c89f1648c4c6862f55e9aeac84819..39d02f7cff08b97d8b760ce5562142155ef51975 100644
--- a/scenario/MusicPlayerOnline/entry/src/main/ets/view/loginDialog.ets
+++ b/scenario/MusicPlayerOnline/entry/src/main/ets/view/loginDialog.ets
@@ -60,6 +60,7 @@ export struct LoginCustomDialog {
           .backgroundColor(Color.White)
           .fontColor(Color.Black)
           .fontWeight(FontWeight.Lighter)
+          .shadow({ radius: 1, color: Color.Gray })
           .fontSize(18)
           .onClick(() => {
             if (this.controller != undefined) {
@@ -71,6 +72,7 @@ export struct LoginCustomDialog {
           .backgroundColor(Color.White)
           .fontColor(Color.Blue)
           .fontWeight(FontWeight.Lighter)
+          .shadow({ radius: 1, color: Color.Gray })
           .fontSize(18)
           .id('register_button')
           .onClick(() => {
@@ -84,6 +86,8 @@ export struct LoginCustomDialog {
         Button('登录')
           .backgroundColor(Color.White)
           .fontWeight(FontWeight.Lighter)
+          .borderRadius(4)
+          .shadow({ radius: 1, color: Color.Gray })
           .fontSize(18)
           .fontColor(Color.Red)
           .id('login_button')
diff --git a/scenario/MusicPlayerOnline/entry/src/ohosTest/ets/test/Ability.test.ets b/scenario/MusicPlayerOnline/entry/src/ohosTest/ets/test/Ability.test.ets
index 7b53270846206dd8975911ac680b16585988811f..f9afb488de9a0e96d3cbfb546ea5c98d8d3b9261 100644
--- a/scenario/MusicPlayerOnline/entry/src/ohosTest/ets/test/Ability.test.ets
+++ b/scenario/MusicPlayerOnline/entry/src/ohosTest/ets/test/Ability.test.ets
@@ -71,7 +71,7 @@ export default function abilityTest() {
       await driver.delayMs(500);
       await driver.assertComponentExist(ON.text('我的歌单'));
       await driver.delayMs(500);
-      await driver.assertComponentExist(ON.text('没有播放'));
+      await driver.assertComponentExist(ON.text('点击或双击歌单'));
       await driver.delayMs(500);
       await driver.assertComponentExist(ON.id('playing'));
       await driver.delayMs(500);