开始开发"正在播放"

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;