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

src/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { h, ref, onMounted, onUnmounted } from "vue";
+import { h, ref, onMounted, onUnmounted, toRaw} from "vue";
 import { useStore } from "vuex";
 import styled from "vue3-styled-components";
 import Nav from "@/views/common/Nav.vue";
@@ -12,8 +12,9 @@ import SongCtrl from "./views/common/SongCtrl.vue";
 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 pubsub from "pubsub-js";
-import { NConfigProvider, darkTheme } from "naive-ui";
+import { NConfigProvider, darkTheme, NMessageProvider } from "naive-ui";
 import router from "./router";
 // import { CloudCircleSharp } from "@vicons/ionicons5";
 
@@ -75,6 +76,7 @@ onUnmounted(() => {
   <n-config-provider
     :theme-overrides="store.state.theme.themeOverrides"
   >
+  <n-message-provider>
     <div id="wp">
       <!-- <NThemeEditor/> -->
       <div id="top">
@@ -87,6 +89,7 @@ onUnmounted(() => {
         <div id="side">
           <!-- <Personal></Personal> -->
           <MainMenu></MainMenu>
+          
         </div>
         <div id="main">
           <router-view v-slot="{ Component, route }">
@@ -110,7 +113,8 @@ onUnmounted(() => {
         @click.self="showPlaying = false"
       >
         <div id="playingList">
-          <PlayingList />
+          <!-- <PlayingList /> -->
+          <ZPlayingList />
         </div>
       </div>
       <div id="footer">
@@ -125,6 +129,7 @@ onUnmounted(() => {
         </div>
       </div>
     </div>
+    </n-message-provider>
   </n-config-provider>
 </template>
 

src/assets/css/common.css

@@ -1,3 +1,8 @@
+.text-el-line-normal {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .text-el-line {
   overflow: hidden;
   text-overflow: ellipsis;

src/assets/css/common.less

@@ -1,3 +1,9 @@
+.text-el-line-normal {
+  overflow: hidden;
+  text-overflow: ellipsis; //文本溢出显示省略号
+  white-space: nowrap; //文本不会换行
+}
+
 .text-el-line {
   overflow: hidden;
   text-overflow: ellipsis;

src/store/index.js

@@ -12,6 +12,7 @@ export default createStore({
       lastPlayed: [], //最近播放
       playingList: [], //当前播放
     },
+    haha: 'haha',
     caches: {},
     theme: {
       //主题覆盖变量

src/views/common/MainMenu.vue

@@ -65,32 +65,32 @@ const menuOptions = ref([
     icon: renderIcon(ZuiJin),
   },
   //#region 其他
-  {
-    label: () =>
-      h(
-        RouterLink,
-        {
-          to: {
-            path: '/fm'
-          }
-        },
-        { default: () => '私人FM' }
-      ),
-    key: '/fm',
-  },
-  {
-    label: () =>
-      h(
-        RouterLink,
-        {
-          to: {
-            path: '/friends'
-          }
-        },
-        { default: () => '朋友' }
-      ),
-    key: '/friends',
-  },
+  // {
+  //   label: () =>
+  //     h(
+  //       RouterLink,
+  //       {
+  //         to: {
+  //           path: '/fm'
+  //         }
+  //       },
+  //       { default: () => '私人FM' }
+  //     ),
+  //   key: '/fm',
+  // },
+  // {
+  //   label: () =>
+  //     h(
+  //       RouterLink,
+  //       {
+  //         to: {
+  //           path: '/friends'
+  //         }
+  //       },
+  //       { default: () => '朋友' }
+  //     ),
+  //   key: '/friends',
+  // },
   //#endregion
 ]);
 

src/views/common/SongCtrl.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, onMounted, onUnmounted, watch } from "vue";
 import { useStore } from "vuex";
-import { NButton, NIcon, NSpace } from "naive-ui";
+import { NButton, NIcon, NSpace, useMessage } from "naive-ui";
 import PlayCircle from "@/assets/svgs/PlayCircle.svg";
 import PlaySkipForward from "@/assets/svgs/PlaySkipForward.svg";
 import PlaySkipBack from "@/assets/svgs/PlaySkipBack.svg";
@@ -12,6 +12,7 @@ import { getSongUrl } from "@/network/song";
 import pubsub from "pubsub-js";
 
 const store = useStore();
+const message = useMessage();
 // const { settings } = store.state;
 const audioEl = ref("");
 const playing = ref(false);
@@ -46,38 +47,42 @@ const onPause = () => {
   console.log("onPause");
 };
 const onEnd = () => {
-  playNext(1)
+  playNext(1);
   // playing.value = false;
   currentTime = 0;
   console.log("下一首...");
 };
 
+//上、下一首
 const playNext = async (step) => {
-  let { songId, playingList, playMode , playing} = store.state.settings;
+  let { songId, playingList, playMode, playing } =
+    store.state.settings;
   let idx = playingList.findIndex((item) => item.id == songId);
-  console.log(idx);
+  // console.log(idx);
   switch (playMode) {
-    case 0:
+    case 0: //顺序
       idx += step;
       if (idx > playingList.length - 1) return;
-      if (idx < 0) return 
+      if (idx < 0) return;
       break;
-    case 1:
+    case 1: //循环
       idx += step;
       if (idx > playingList.length - 1) idx = 0;
       if (idx < 0) idx = playingList.length - 1;
       break;
-    case 2:
+    case 2: //单曲循环
       break;
-    case 3:
+    case 3: //随机
+      if (playingList.length <= 1) return; //只有一首歌
+      const i = Math.floor(Math.random() * (playingList.length - 1));
+      if (i >= idx) idx = i+1;
+      else idx = i;
       break;
   }
-  console.log(idx);
-  play(playingList[idx].id, playing)
+  // console.log(idx);
+  play(playingList[idx].id, playing);
 };
 
-const playPrev = async (id, im = true) => {};
-
 const previous = async () => {
   playNext(-1);
 };
@@ -152,11 +157,13 @@ watch(playing, (val, old) => {
   if (val === true) {
     interval = setInterval(() => {
       // console.log(audioEl.value.duration);
+      if (audioEl.value) {
         currentTime = audioEl.value.currentTime;
         pubsub.publish("zp.progress", {
           progress: audioEl.value.currentTime,
           total: audioEl.value.duration,
         });
+      } else clearInterval(interval);
     }, 200);
   } else {
     clearInterval(interval);

src/views/common/ZPlayingList.vue

@@ -0,0 +1,231 @@
+<script setup>
+import {
+  ref,
+  reactive,
+  h,
+  watch,
+  toRaw,
+  onMounted,
+  onUnmounted,
+  nextTick,
+} from "vue";
+import { RouterLink, useRoute, useRouter } from "vue-router";
+import { useStore } from "vuex";
+import {
+  NButton,
+  NButtonGroup,
+  NSpace,
+  NIcon,
+  NMenu,
+  NLayout,
+  NLayoutHeader,
+  NLayoutFooter,
+  NLayoutContent,
+  NLayoutSider,
+  NTag,
+  NDataTable,
+  useMessage,
+} from "naive-ui";
+import Play from "@/assets/svgs/Play_.svg";
+import Pause from "@/assets/svgs/Pause.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';
+
+const store = useStore();
+const router = useRouter();
+dayjs.extend(duration);
+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":
+      break;
+  }
+});
+
+//卸载组件
+onUnmounted(() => {
+  pubsub.unsubscribe(token);
+});
+
+watch(
+  () => store.state.settings.playingList,
+  (val, oldVal) => {
+    playingList.value = toRaw(store.state.settings.playingList);
+  },
+  {
+    immediate: true,
+    deep: true,
+  }
+);
+
+let dragIdx = -1
+const dragstart = (idx) => {
+  // console.log('start ',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]
+    // console.log(playingList,dragItem);
+    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();
+}
+</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="icon">
+        <NButton
+          v-show="p.id === store.state.settings.songId"
+          text
+          type="primary"
+          circle
+          size="tiny"
+        >
+          <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>
+      <div class="al">{{p.album.name}}</div>
+      <div class="dt">
+        {{dayjs.duration(p.duration).format("mm:ss")}}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="less" scoped>
+@import "@/assets/css/common.less";
+.title {
+  padding: 10px 12px 0px 12px;
+  font-size: 24px;
+}
+.tools {
+  display: flex;
+  align-content: center;
+  .count {
+    flex: 1;
+    padding: 2px 24px;
+    font-size: 12px;
+  }
+  .btns {
+    margin-right: 10px;
+  }
+}
+.wp-list {
+  position: absolute;
+  bottom: 0px;
+  top: 76px;
+  right: 0;
+  left: 0;
+  overflow-y: auto;
+
+  .tr{
+    display: flex;
+    font-size: 14px;
+    border-top: 1px #ddd solid;
+    border-bottom: 1px #ddd solid;
+    margin-bottom: -1px;
+
+    >*{
+      padding: 4px 6px;
+    }
+
+    .icon{
+      padding-left: 10px;
+      width: 20px;
+    }
+    .name{
+      flex: 1;
+      .text-el-line-normal()
+    }
+    .ar{
+      width: 120px;
+      .text-el-line-normal()
+    }
+    .al{
+      width: 100px;
+      margin-top: 1px;
+      color: #999;
+      font-size: 12px;
+      .text-el-line-normal()
+    }
+    .dt{
+      margin-top: 1px;
+      color: #999;
+      font-size: 12px;
+    }
+  }
+}
+
+thead {
+  display: none;
+}
+
+.n-layout-header,
+.n-layout-content,
+.n-layout-side {
+  // background-color: #eee;
+}
+</style>