开始开发"正在播放"

src/App.vue

@@ -34,6 +34,8 @@ const store = useStore();
 store.commit("loadSettings");
 store.commit("loadCaches");
 
+const showPlaying = ref(false); //是否显示播放列表
+
 //处理route消息
 const routeToken = pubsub.subscribe(
   "router",
@@ -49,9 +51,18 @@ const routeToken = pubsub.subscribe(
   }
 );
 
+const token = pubsub.subscribe("zp", (msg, data) => {
+  switch (msg) {
+    case "zp.togglePlaying":
+      showPlaying.value = !showPlaying.value;
+      break;
+  }
+});
+
 //卸载组件
 onUnmounted(() => {
   pubsub.unsubscribe(routeToken);
+  pubsub.unsubscribe(token);
 });
 </script>
 
@@ -77,10 +88,13 @@ onUnmounted(() => {
           <router-view />
         </div>
       </div>
+      <div id="wpPlaying" v-show="showPlaying" @click.self="showPlaying = false">
+        <div id="playing"></div>
+      </div>
       <div id="footer">
         <div id="songDetail"></div>
         <div id="songProgress">
-          <SongProgress/>
+          <SongProgress />
         </div>
         <div id="songCtrl">
           <SongInfo />
@@ -160,16 +174,35 @@ body {
       padding: 6px;
     }
   }
+  #wpPlaying {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    
+
+    #playing {
+      position: absolute;
+      top: 40px;
+      right: 0;
+      bottom: 64px;
+      // left: 0;
+      width: 600px;
+      background-color: #f6f6f6;
+      z-index: 1000;
+    }
+  }
+
   #footer {
     display: flex;
     flex-direction: column;
-    #songDetail{
-
+    #songDetail {
     }
-    #songProgress{
+    #songProgress {
       height: 3px;
       // background-color: red;
-      z-index: 100;
+      z-index: 2000;
     }
     #songCtrl {
       height: 64px;

src/main.js

@@ -18,5 +18,6 @@ createApp(App)
   // loaded: () => {
   //   console.log('loaded')
   // }
+  log: false, //关闭log
 })
 .mount("#app");

src/views/Played.vue

@@ -50,6 +50,7 @@ const createColumns = ({ play ,singerInfo }) => {
       title: "音乐标题",
       key: "name",
       align: "left",
+      ellipsis: true,
       render(row){
         return h(
             NButton,
@@ -70,6 +71,7 @@ const createColumns = ({ play ,singerInfo }) => {
     {
       title: "歌手",
       key: "artists",
+      ellipsis: true,
       render(row) {
         const ars = row.artists.map((ar, idx) => {
           let r = h(

src/views/common/SongCtrl.vue

@@ -149,7 +149,7 @@ onUnmounted(() => {
     id="songCtrl"
     align="center"
     :size="[6]"
-    style="padding-top: 2px"
+    style="padding-top: 2px;margin: 0 4px"
   >
     <n-button circle @click="favorite">
       <template #icon>

src/views/common/SongInfo.vue

@@ -98,6 +98,7 @@ export default {};
 </script>
 
 <style lang="less" scoped>
+@import "@/assets/css/common.less";
 #songInfo {
   flex: 3;
   display: flex;
@@ -111,11 +112,14 @@ export default {};
     .w-song {
       display: flex;
       align-items: center;
+      .song-name{
+        .text-el-line();
+      }
       .song-author {
         margin-left: 4px;
         color: #aaa;
         font-size: 13px;
-        
+        .text-el-line();
       }
     }
     .song-time {

src/views/common/SongStatus.vue

@@ -7,6 +7,7 @@ import RepeatOutline from "@/assets/svgs/RepeatOutline.svg";
 import RepeatOne from "@/assets/svgs/RepeatOne.svg";
 import Playlist from "@/assets/svgs/Playlist.svg";
 import Random from "@/assets/svgs/Random.svg";
+import pubsub from 'pubsub-js';
 
 
 //播放模式：0-3，顺序，循环，单曲，随机。
@@ -51,7 +52,7 @@ const playMode = ref(0)
         </n-icon>
       </template>
     </n-button>
-    <n-button circle>
+    <n-button circle @click="pubsub.publish('zp.togglePlaying',)">
       <template #icon>
         <n-icon>
           <PlaylistMusic />

src/views/discover/Recommend.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="lmt-width">
+    <!-- 轮播 -->
     <n-carousel
       show-arrow
       trigger="hover"
@@ -11,7 +12,7 @@
         v-for="(b, idx) in banners"
         :key="idx"
       >
-        <img class="carousel-img" :src="b.imageUrl" />
+        <img class="carousel-img" :src="b.imageUrl" @click="clickBanner(b.targetId, b.targetType)" />
         <span class="title">{{ b.typeTitle }}</span>
       </div>
     </n-carousel>
@@ -224,7 +225,6 @@ const play = (id) => {
   pubsub.publish("zp.play", { id, im: true });
 };
 
-
 //#region 轮播图片
 let banners = ref([]);
 banners.value = store.getters.cache('banners')
@@ -240,6 +240,13 @@ getBanner(0)
     console.log("getBanner err", err);
   });
 
+const clickBanner = (id, type) => {
+  switch(type){
+    case 1: //新歌首发...
+      pubsub.publish('zp.play', {id, im: true})
+      break;
+  }
+}
 //#endregion
 
 //#region 最新音乐
@@ -322,6 +329,7 @@ getPersonalizedMV()
   .carousel-img {
     width: 100%;
     border-radius: 6px;
+    cursor: pointer;
   }
   .title {
     position: absolute;