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

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){
-    let dragItem = toRaw(playingList.value)[dragIdx]
-    let item = toRaw(playingList.value)[idx]
+  if (dragIdx !== idx) {
+    let dragItem = toRaw(playingList.value)[dragIdx];
+    let item = toRaw(playingList.value)[idx];
     // console.log(playingList,dragItem);
-    playingList.value.splice(dragIdx,1)
-    playingList.value.splice(idx, 0, dragItem)
-    dragIdx=idx
-    store.commit('saveSettings', {
-      playingList: playingList.value
-    })
+    playingList.value.splice(dragIdx, 1);
+    playingList.value.splice(idx, 0, dragItem);
+    dragIdx = idx;
+    store.commit("saveSettings", {
+      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"
-     draggable="true"
-     @dragstart="dragstart(idx)"
-     @dragenter="dragenter($event, idx)"
-     @dragover="dragover($event, idx)"
-     @drop="drop($event, idx)"
-     >
+    <div
+      class="tr"
+      v-for="(p, idx) in playingList"
+      :key="idx"
+      draggable="true"
+      @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="ar">
-        <ArtistsSpan :artists="p.artists" />
+      <div class="name">
+        <span class="ntext">{{ p.name }}</span>
+        <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-bottom: 1px #ddd solid;
+    border-top: 1px #eee 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{
-      width: 100px;
+    .al {
+      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;