dev...

src/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { h, ref, onMounted, onUnmounted, toRaw} from "vue";
+import { h, ref, onMounted, onUnmounted, toRaw, watch } from "vue";
 import { useStore } from "vuex";
 import styled from "vue3-styled-components";
 import Nav from "@/views/common/Nav.vue";
@@ -13,8 +13,13 @@ import SongStatus from "./views/common/SongStatus.vue";
 import SongProgress from "@/views/common/SongProgress.vue";
 import PlayingList from "@/views/common/PlayingList.vue";
 import ZPlayingList from "@/views/common/ZPlayingList.vue";
+import SongDetail from "@/views/common/SongDetail.vue";
 import pubsub from "pubsub-js";
-import { NConfigProvider, darkTheme, NMessageProvider } from "naive-ui";
+import {
+  NConfigProvider,
+  darkTheme,
+  NMessageProvider,
+} from "naive-ui";
 import router from "./router";
 // import { CloudCircleSharp } from "@vicons/ionicons5";
 
@@ -41,27 +46,38 @@ store.commit("loadCaches");
 // router.replace('/discover/recommend')
 
 const showPlaying = ref(false); //是否显示播放列表
+const showSongDetail = ref(false); //是否显示歌曲详细信息
+
+watch(
+  ()=> store.state.showSongDetail,
+  ()=>{
+    showSongDetail.value = toRaw(store.state.showSongDetail)
+  },
+  {
+    immediate: true,
+  }
+)
 
 //处理route消息
-const routeToken = pubsub.subscribe(
-  "router",
-  (msg, data) => {
-    switch (msg) {
-      case "router.beforeEach":
-      case "router.afterEach":
-        store.commit("saveSettings", {
-          currentRoute: data.to.fullPath,
-        });
-        break;
-    }
+const routeToken = pubsub.subscribe("router", (msg, data) => {
+  switch (msg) {
+    case "router.beforeEach":
+    case "router.afterEach":
+      store.commit("saveSettings", {
+        currentRoute: data.to.fullPath,
+      });
+      break;
   }
-);
+});
 
 const token = pubsub.subscribe("zp", (msg, data) => {
   switch (msg) {
     case "zp.togglePlaying":
       showPlaying.value = !showPlaying.value;
       break;
+    case "zp.toggleSongDetail":
+      showSongDetail.value = store.state.showSongDetail = !showSongDetail.value;
+      break;
   }
 });
 
@@ -70,65 +86,76 @@ onUnmounted(() => {
   pubsub.unsubscribe(routeToken);
   pubsub.unsubscribe(token);
 });
+
+const c = (item) => {
+  return (
+    item.id == "playingList" ||
+    item.id == "top" ||
+    item.id == "footer"
+  );
+};
+
+const hideWins = (e) => {
+  if (showPlaying.value && e.path.findIndex(c) < 0) {
+    showPlaying.value = false;
+  }
+};
 </script>
 
 <template>
   <n-config-provider
     :theme-overrides="store.state.theme.themeOverrides"
   >
-  <n-message-provider>
-    <div id="wp">
-      <!-- <NThemeEditor/> -->
-      <div id="top">
-        <Nav></Nav>
-        <TopMenu></TopMenu>
-        <Search></Search>
-        <Settings></Settings>
-      </div>
-      <div id="content">
-        <div id="side">
-          <!-- <Personal></Personal> -->
-          <MainMenu></MainMenu>
-          
+    <n-message-provider>
+      <div id="wp" @click="hideWins">
+        <!-- <NThemeEditor/> -->
+        <div id="top">
+          <Nav></Nav>
+          <TopMenu></TopMenu>
+          <Search></Search>
+          <Settings></Settings>
         </div>
-        <div id="main">
-          <router-view v-slot="{ Component, route }">
-            <keep-alive exclude="FM,Friends">
-              <component :is="Component" />
-            </keep-alive>
-          </router-view>
-          <!-- <router-view v-slot="{ Component, route }">
+        <div id="content">
+          <div id="side">
+            <!-- <Personal></Personal> -->
+            <MainMenu></MainMenu>
+          </div>
+          <div id="main">
+            <router-view v-slot="{ Component, route }">
+              <keep-alive exclude="FM,Friends">
+                <component :is="Component" />
+              </keep-alive>
+            </router-view>
+            <!-- <router-view v-slot="{ Component, route }">
             <keep-alive v-if="route.meta.keepAlive">
               <component :is="Component" />
             </keep-alive>
             <component :is="Component" v-else />
           </router-view> -->
-          <!-- <router-view>
+            <!-- <router-view>
           </router-view> -->
+          </div>
+        </div>
+        <div id="wpSongDetail" v-show="showSongDetail">
+          <SongDetail/>
+        </div>
+        <div id="wpPlayingList" v-show="showPlaying">
+          <div id="playingList">
+            <ZPlayingList />
+          </div>
+        </div>
+        <div id="footer">
+          <div id="songDetail"></div>
+          <div id="songProgress">
+            <SongProgress />
+          </div>
+          <div id="songCtrl">
+            <SongInfo />
+            <SongCtrl />
+            <SongStatus />
+          </div>
         </div>
       </div>
-      <div
-        id="wpPlayingList"
-        v-show="showPlaying"
-        @click.self="showPlaying = false"
-      >
-        <div id="playingList">
-          <!-- <PlayingList /> -->
-          <ZPlayingList />
-        </div>
-      </div>
-      <div id="footer">
-        <div id="songDetail"></div>
-        <div id="songProgress">
-          <SongProgress />
-        </div>
-        <div id="songCtrl">
-          <SongInfo />
-          <SongCtrl />
-          <SongStatus />
-        </div>
-      </div>
-    </div>
     </n-message-provider>
   </n-config-provider>
 </template>
@@ -155,8 +182,7 @@ body {
   margin-top: -44px;
   position: absolute;
 
-  .zm-top-menu.n-menu.n-menu--horizontal
-    .n-menu-item-content {
+  .zm-top-menu.n-menu.n-menu--horizontal .n-menu-item-content {
     padding: 0 12px;
   }
 }
@@ -200,13 +226,16 @@ body {
       flex: 1;
       padding: 6px;
     }
+  }
+  #wpSongDetail {
+
   }
   #wpPlayingList {
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
+    // position: absolute;
+    // left: 0;
+    // top: 0;
+    // right: 0;
+    // bottom: 0;
 
     #playingList {
       position: absolute;