重开一个组件再写当前播放完成

src/App.vue

@@ -215,7 +215,7 @@ body {
       bottom: 64px;
       // left: 0;
       width: 500px;
-      background-color: #f6f6f6;
+      background-color: #fff;
       z-index: 1000;
       border: #ddd solid 1px;
       // border-top-left-radius: 8px;

src/assets/svgs/Dots.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="12" r="1"></circle><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle></g></svg>

src/components/ArtistsSpan.vue

@@ -1,10 +1,20 @@
 <script setup>
+import { ref, defineProps, onUnmounted, onDeactivated } from "vue";
+import { useRouter } from "vue-router";
 
+const props = defineProps({ artists: Array, onLeave: Function });
+const router = useRouter()
+// console.log(props.artists);
+
+const click = (id) => {
+  props.onLeave?.()
+  router.push('/singer/' + id)
+}
 </script>
 <template>
   <template v-for="(ar, idx) of artists" key="idx">
     <span
-      @click="$router.push('/singer/' + ar.id)"
+      @click="click(ar.id)"
       style="margin-right: 4px; cursor: pointer"
       >{{ ar.name }}</span
     >
@@ -12,9 +22,9 @@
 </template>
 
 <script>
-export default {
+// export default {
-  props: ["artists"],
+//   props: ["artists"],
-};
+// };
 </script>
 
 <style></style>

src/store/index.js

@@ -2,8 +2,8 @@ import { createStore, storeKey } from "vuex";
 
 export default createStore({
   state: {
-    appVersion: "0.0.1",
+    // appVersion: "0.0.1",
-    debugStr: "测试debug字符",
+    // debugStr: "测试debug字符",
     settings: {
       currentRoute: "/discover/recommend", //当前路由
       songId: 0, //歌曲id
@@ -11,8 +11,9 @@ export default createStore({
       playMode: 0, //播放模式：0-3，顺序，循环，单曲，随机。
       lastPlayed: [], //最近播放
       playingList: [], //当前播放
+      tArr: [], //测试数组
+      ts: "", //测试字符
     },
-    haha: 'haha',
     caches: {},
     theme: {
       //主题覆盖变量
@@ -32,9 +33,7 @@ export default createStore({
     //根据当前路由计算主菜单的选择项
     mainMenuSelected: (state) => (menuOptions) => {
       return menuOptions.find((item) => {
-        return (
+        return state.settings.currentRoute.indexOf(item.key) > -1;
-          state.settings.currentRoute.indexOf(item.key) > -1
-        );
       })?.key;
     },
     cache:
@@ -44,8 +43,7 @@ export default createStore({
           if (
             state.caches[key].time &&
             (expire <= 0 ||
-              Date.now() - state.caches[key].time <
+              Date.now() - state.caches[key].time < 1000 * expire)
-                1000 * expire)
           )
             return state.caches[key].data;
         }
@@ -56,7 +54,7 @@ export default createStore({
     //载入settings设置
     loadSettings(state) {
       const l = localStorage.getItem("zmusic.settings");
-      if (l) state.settings ={...state.settings, ...JSON.parse(l)};
+      if (l) state.settings = { ...state.settings, ...JSON.parse(l) };
     },
     //保存settings设置
     saveSettings(state, settings) {
@@ -67,7 +65,7 @@ export default createStore({
     //载入caches设置
     loadCaches(state) {
       const l = localStorage.getItem("zmusic.caches");
-      if (l) state.caches = {...state.caches, ...JSON.parse(l)}
+      if (l) state.caches = { ...state.caches, ...JSON.parse(l) };
     },
     //保存caches设置
     saveCaches(state, caches) {
@@ -84,7 +82,7 @@ export default createStore({
     //载入theme设置
     loadTheme(state) {
       const l = localStorage.getItem("zmusic.theme");
-      if (l) state.theme = {...state.theme, ...JSON.parse(l)};
+      if (l) state.theme = { ...state.theme, ...JSON.parse(l) };
     },
     //保存theme设置
     saveTheme(state, theme) {
@@ -105,13 +103,24 @@ export default createStore({
       //如果没有，设置为[]
       if (!state.settings.playingList)
         state.settings.playingList = [];
-        
+
       let f = state.settings.playingList.find((item) => {
         return item.id === song.id;
       });
       if (!f) {
         // console.log("add to playingList");
-        state.settings.playingList.unshift(song)
+        state.settings.playingList.unshift(song);
+        saveLoaclSettings(state.settings);
+      }
+    },
+    removePlayingList(state, song) {
+      // console.log('removePlayingList', song)
+      let idx = state.settings.playingList.findIndex(
+        (item) => item.id === song.id
+      );
+      // console.log(idx)
+      if (idx > -1) {
+        state.settings.playingList.splice(idx, 1);
         saveLoaclSettings(state.settings);
       }
     },
@@ -121,10 +130,7 @@ export default createStore({
 });
 
 function saveLoaclSettings(s) {
-  localStorage.setItem(
+  localStorage.setItem("zmusic.settings", JSON.stringify(s));
-    "zmusic.settings",
-    JSON.stringify(s)
-  );
 }
 function saveLoaclCaches(s) {
   localStorage.setItem("zmusic.caches", JSON.stringify(s));

src/views/common/SongCtrl.vue

@@ -75,7 +75,7 @@ const playNext = async (step) => {
     case 3: //随机
       if (playingList.length <= 1) return; //只有一首歌
       const i = Math.floor(Math.random() * (playingList.length - 1));
-      if (i >= idx) idx = i+1;
+      if (i >= idx) idx = i + 1;
       else idx = i;
       break;
   }
@@ -90,6 +90,18 @@ const forward = async () => {
   playNext(1);
 };
 
+const stop = async () => {
+  pause();
+  if (store.state.settings.playingList.length < 1) {
+    audioEl.value.src = "";
+    lastPause = 0;
+    store.commit("saveSettings", {
+      songId: null,
+    });
+    pubsub.publish('zp.hideSongInfo')
+  }
+};
+
 const play = async (id, im = true) => {
   console.log(id);
   await getSongUrl(id)
@@ -177,6 +189,12 @@ const psToken = pubsub.subscribe("zp", (msg, data) => {
     case "zp.play":
       play(data.id, data.im);
       break;
+    case "zp.next":
+      forward();
+      break;
+    case "zp.stop":
+      stop();
+      break;
     case "zp.setProgressScale":
       setProgressScale(data.scale);
       break;
@@ -249,13 +267,13 @@ onUnmounted(() => {
         </n-icon>
       </template>
     </n-button>
-    <n-button circle>
+    <!-- <n-button circle>
       <template #icon>
         <n-icon>
           <TrashOutline />
         </n-icon>
       </template>
-    </n-button>
+    </n-button> -->
   </n-space>
 
   <!-- </div> -->

src/views/common/SongInfo.vue

@@ -20,7 +20,7 @@ const store = useStore()
 const showInfo = ref(false);
 const info = reactive({
   name: "",
-  artists: "",
+  artists: [],
   album: {},
   duration: 0,
   mv: 0,
@@ -44,7 +44,6 @@ const songInfo = (id, im) => {
           date: Date.now(),
         }, ...toRaw(info)}
         store.commit('savePlayed', p)
-        
         store.commit('addToPlayingList', p)
         console.log('savePlayed');
       }
@@ -67,6 +66,9 @@ const psToken = pubsub.subscribe("zp", (msg, data) => {
     case "zp.getSongInfo":
       songInfo(data.id, data.im);
       break;
+    case "zp.hideSongInfo":
+      showInfo.value = false
+      break;
     case "zp.progress":
       totalTime.value = zpTime(data.total * 1000)
       currTime.value = zpTime(data.progress * 1000)

src/views/common/ZPlayingList.vue

@@ -16,6 +16,7 @@ import {
   NButtonGroup,
   NSpace,
   NIcon,
+  NDropdown,
   NMenu,
   NLayout,
   NLayoutHeader,
@@ -28,11 +29,12 @@ import {
 } from "naive-ui";
 import Play from "@/assets/svgs/Play_.svg";
 import Pause from "@/assets/svgs/Pause.svg";
+import svgDots from "@/assets/svgs/Dots.svg";
 import dayjs from "dayjs";
 import "dayjs/locale/zh-cn";
 import duration from "dayjs/plugin/duration";
 import pubsub from "pubsub-js";
-import ArtistsSpan from '@/components/ArtistsSpan.vue';
+import ArtistsSpan from "@/components/ArtistsSpan.vue";
 
 const store = useStore();
 const router = useRouter();
@@ -41,8 +43,6 @@ const playingList = ref([]);
 const wpTable = ref("");
 const listHeight = ref(0);
 
-// playingList.value = toRaw(store.state.settings.playingList);
-
 const token = pubsub.subscribe("zp", (msg, data) => {
   switch (msg) {
     case "zp.togglePlaying":
@@ -66,86 +66,143 @@ watch(
   }
 );
 
-let dragIdx = -1
+let dragIdx = -1;
 const dragstart = (idx) => {
   // console.log('start ',idx);
-  dragIdx=idx
+  dragIdx = idx;
-}
+};
 const dragenter = (e, idx) => {
   // console.log('enter ',idx);
   e.preventDefault();
-  if(dragIdx !== idx){
+  if (dragIdx !== idx) {
-    let dragItem = toRaw(playingList.value)[dragIdx]
+    let dragItem = toRaw(playingList.value)[dragIdx];
-    let item = toRaw(playingList.value)[idx]
+    let item = toRaw(playingList.value)[idx];
     // console.log(playingList,dragItem);
-    playingList.value.splice(dragIdx,1)
+    playingList.value.splice(dragIdx, 1);
-    playingList.value.splice(idx, 0, dragItem)
+    playingList.value.splice(idx, 0, dragItem);
-    dragIdx=idx
+    dragIdx = idx;
-    store.commit('saveSettings', {
+    store.commit("saveSettings", {
-      playingList: playingList.value
+      playingList: playingList.value,
-    })
+    });
   }
-  
+};
-}
 const dragover = (e, idx) => {
   // console.log('over ',idx);
   e.preventDefault();
-}
+};
 const drop = (e, idx) => {
   // console.log('drop ',idx);
   e.preventDefault();
+};
+
+//菜单
+const options = [
+  {
+    label: "播放",
+    key: "play",
+  },
+  // {
+  //   label: "下一首播放",
+  //   key: "nextToPlay",
+  // },
+  {
+    type: 'divider',
+    key: ''
+  },
+  {
+    label: "从列表删除",
+    key: "remove",
+  },
+];
+
+// 处理菜单选择
+const handleSelect = (key, id) => {
+  switch(key){
+    case 'play':
+      pubsub.publish('zp.play',{
+        id, im: true,
+      })
+      break;
+    case 'nextToPlay':
+      break;
+    case 'remove':
+      store.commit('removePlayingList', {id})
+      if(playingList.value.length>0)
+        pubsub.publish('zp.next')
+      else
+        pubsub.publish('zp.stop')
+      break;
+  }
+};
+const handleClick = () => {
+  // showDropdownRef.value = !showDropdownRef.value;
+};
+
+const arLeave = ()=>{
+  pubsub.publish('zp.togglePlaying',)
 }
 </script>
 
 <template>
-  <!-- <n-layout>
-    <n-layout-header
-      style="padding: 10px 12px 0px 12px; font-size: 24px"
-      >当前播放
-    </n-layout-header>
-    <n-layout has-sider>
-      <n-layout-content style="padding: 6px 12px; font-size: 12px">
-        共{{ playingList.length }}首
-      </n-layout-content>
-      <n-layout-sider width="100" style="padding: 0 12px 6px 12px">
-        <n-button size="tiny">清除列表</n-button>
-      </n-layout-sider>
-    </n-layout>
-  </n-layout> -->
   <div class="title">当前播放</div>
   <div class="tools">
     <div class="count">共{{ playingList.length }}首</div>
     <div class="btns"><n-button size="tiny">清除列表</n-button></div>
   </div>
   <div class="wp-list" ref="wpTable">
-    <div class="tr" v-for="(p, idx) in playingList" :key="idx"
+    <div
-     draggable="true"
+      class="tr"
-     @dragstart="dragstart(idx)"
+      v-for="(p, idx) in playingList"
-     @dragenter="dragenter($event, idx)"
+      :key="idx"
-     @dragover="dragover($event, idx)"
+      draggable="true"
-     @drop="drop($event, idx)"
+      @dragstart="dragstart(idx)"
-     >
+      @dragenter="dragenter($event, idx)"
+      @dragover="dragover($event, idx)"
+      @drop="drop($event, idx)"
+      @dblclick="pubsub.publish('zp.play', {id: p.id,im: true})"
+    >
       <div class="icon">
         <NButton
           v-show="p.id === store.state.settings.songId"
           text
           type="primary"
-          circle
           size="tiny"
         >
-          <NIcon style="bottom: -1px;left:-2px;position: absolute;">
+          <NIcon style="bottom: -1px; left: -2px; position: absolute">
             <Play v-if="store.state.settings.playing"></Play>
             <Pause v-else></Pause>
           </NIcon>
         </NButton>
       </div>
-      <div class="name">{{ p.name }}</div>
+      <div class="name">
-      <div class="ar">
+        <span class="ntext">{{ p.name }}</span>
-        <ArtistsSpan :artists="p.artists" />
+        <span class="nm">
+          <n-dropdown
+            placement="right-start"
+            @select="handleSelect($event, p.id)"
+            trigger="click"
+            :options="options"
+            :show-arrow="true"
+          >
+            <NButton
+              class="mn"
+              text
+              type="primary"
+              style="font-size: 20px"
+            >
+              <NIcon>
+                <svg-dots />
+              </NIcon>
+            </NButton>
+          </n-dropdown>
+        </span>
       </div>
-      <div class="al">{{p.album.name}}</div>
+      <div class="ar">
+        <ArtistsSpan :artists="p.artists" :onLeave="arLeave"/>
+      </div>
+      <div class="al">{{ p.album.name }}</div>
       <div class="dt">
-        {{dayjs.duration(p.duration).format("mm:ss")}}
+        {{ dayjs.duration(p.duration).format("mm:ss") }}
       </div>
     </div>
   </div>
@@ -163,10 +220,10 @@ export default {};
 }
 .tools {
   display: flex;
-  align-content: center;
+  align-items: center;
   .count {
     flex: 1;
-    padding: 2px 24px;
+    padding: 6px 24px;
     font-size: 12px;
   }
   .btns {
@@ -176,42 +233,64 @@ export default {};
 .wp-list {
   position: absolute;
   bottom: 0px;
-  top: 76px;
+  top: 80px;
   right: 0;
   left: 0;
   overflow-y: auto;
 
-  .tr{
+  .tr {
     display: flex;
     font-size: 14px;
-    border-top: 1px #ddd solid;
+    border-top: 1px #eee solid;
-    border-bottom: 1px #ddd solid;
+    border-bottom: 1px #eee solid;
     margin-bottom: -1px;
 
-    >*{
+    > * {
       padding: 4px 6px;
     }
 
-    .icon{
+    &:nth-child(2n + 1) {
+      background-color: #f6f6f6;
+    }
+
+    &:hover {
+      background-color: #eee;
+
+      .name .mn {
+        display: block;
+      }
+    }
+
+    .icon {
       padding-left: 10px;
       width: 20px;
     }
-    .name{
+    .name {
       flex: 1;
-      .text-el-line-normal()
+      .text-el-line-normal();
+      display: flex;
+      align-items: center;
+      .ntext {
+        .text-el-line-normal();
+      }
+
+      .mn {
+        flex: 1;
+        display: none;
+      }
     }
-    .ar{
+    .ar {
       width: 120px;
-      .text-el-line-normal()
+      .text-el-line-normal();
     }
-    .al{
+    .al {
-      width: 100px;
+      width: 80px;
       margin-top: 1px;
       color: #999;
       font-size: 12px;
-      .text-el-line-normal()
+      .text-el-line-normal();
     }
-    .dt{
+    .dt {
       margin-top: 1px;
       color: #999;
       font-size: 12px;

src/views/discover/Discover.vue

@@ -121,9 +121,9 @@ const route = useRoute();
     <!-- <NScrollbar > -->
     <div class="ld-width">
       <router-view v-slot="{ Component }">
-        <keep-alive>
+        <!-- <keep-alive exclude="Recommend"> -->
           <component :is="Component" />
-        </keep-alive>
+        <!-- </keep-alive> -->
       </router-view>
       <!-- <keep-alive>
         <router-view></router-view>

src/views/discover/Recommend.vue

@@ -217,10 +217,10 @@ import {
 import pubsub from "pubsub-js";
 import ArtistsSpan from "@/components/ArtistsSpan.vue";
 
-console.log("recommend 初始化");
+// console.log("recommend 初始化");
-onUnmounted(() => {
+// onUnmounted(() => {
-  console.log('recommend 卸载');
+//   console.log('recommend 卸载');
-})
+// })
 const store = useStore();
 
 const play = (id) => {
@@ -237,7 +237,7 @@ getBanner(0)
       banners: { data: banners.value, time: Date.now() },
     });
     // console.log(banners.value);
-    console.log("recommend 轮播图片初始化");
+    // console.log("recommend 轮播图片初始化");
   })
   .catch((err) => {
     console.log("getBanner err", err);
@@ -323,6 +323,7 @@ getPersonalizedMV()
 
 </script>
 
+
 <style lang="less" scoped>
 @import "@/assets/css/common.less";
 .wp-carousel {