fix: 歌单排序拖动hover样式修复

src/plugins/miaoMusicPlayer/export.ts

@@ -7,7 +7,7 @@ const pluginConfig: registerComponentOption = {
     key: 'miaoMusicPlayer',
     name: '音乐',
     icon: Disc,
-    getComponent: async () => 
+    getComponent: async () =>
         (await import('./miaoMusicPlayerDemo.vue')).default,
     filter: (vDirs, vFiles) => {
         if (vDirs.length !== 0) {
@@ -17,13 +17,13 @@ const pluginConfig: registerComponentOption = {
             return false
         }
         for (let i of vFiles) {
-            for (let s of ['mp3', 'flac', 'ogg']) {
+            for (let s of ['mp3', 'flac', 'ogg', 'mp4']) {
                 if (i.name.endsWith(s)) {
                     return true
                 }
             }
         }
-        return vFiles[0].name.endsWith('?')
+        return false
     },
     disable: false,
     single: true,

src/plugins/miaoMusicPlayer/hooks/aplayerMiao.ts

@@ -38,6 +38,8 @@ const useAplayerMiao = (ap: Reactive<apType>, options?: aplayerMiaoOption) => {
 	const app = createApp(aplayerListNew, { ap, ...(options ?? {}) });
 	app.mount(new_list_dom);
 
+	console.log({ap})
+
 	ap.on("destroy", () => {
 		app.unmount();
 	});

src/plugins/miaoMusicPlayer/miaoMusicPlayerDemo.vue

@@ -17,7 +17,7 @@ import miaoDropHandler from '@/components/miaoDropHandler.vue'
 import miaoAlertTipProvider from '@/components/miaoAlertTipProvider.vue'
 import useAplayerMiao from './hooks/aplayerMiao';
 import { VirtualFile } from '@/class/VirtualDirectory';
-import { onMounted, onUnmounted, reactive, ref, watch } from 'vue';
+import { App, onMounted, onUnmounted, reactive, ref, watch } from 'vue';
 import { NScrollbar } from 'naive-ui';
 import "./src/APlayer.fix.css"
 // @ts-ignore
@@ -61,7 +61,7 @@ const aplayer = ref<any>(null);
 const disableDropReceiver = ref(false)
 
 let ap: apType
-let vueApp: any
+let vueApp: App<Element>
 
 
 onMounted(() => {
@@ -71,7 +71,8 @@ onMounted(() => {
         audio: getMusicList(currentFiles.value),
         autoplay: true,
         volume: 1,
-        theme: "#60e8a2"
+        theme: "#60e8a2",
+        listMaxHeight: '500px'
     }
     ap = reactive<apType>(new APlayer(aplayerOption))
     vueApp = useAplayerMiao(ap, {
@@ -87,10 +88,10 @@ onMounted(() => {
         const _name = ap.list.audios[index].name
         currentFiles.value = currentFiles.value.filter(v => v.name !== _name)
     })
-    vueApp
 });
 
 onUnmounted(() => {
+    vueApp.unmount()
     ap.destroy()
 })
 </script>

src/plugins/miaoMusicPlayer/src/APlayer.fix.css

@@ -604,9 +604,9 @@
     border-top: none
 }
 
-.aplayer .aplayer-list ol li:hover {
+/* .aplayer .aplayer-list ol li:hover {
     background: #efefef
-}
+} */
 
 .aplayer .aplayer-list ol li.aplayer-list-light {
     background: #e9e9e9

src/plugins/miaoMusicPlayer/src/aplayerListNew.vue

@@ -1,55 +1,94 @@
 <template>
-    <ol :style="{ maxHeight: ap.options.listMaxHeight }" :key="refreshKey" ref="ol">
+    <ol
-        <VueDraggable v-model="ap.list.audios" @start="onDragStart" @end="onDragEnd" item-key="id"
+        :style="{ maxHeight: ap.options.listMaxHeight }"
-            handle=".aplayer-list-control-btn-reorder" ghostClass="iSDragging" :animation="150">
+        :class="[!isDragging ? 'miaoMusic-ol-isDragging' : 'miaoMusic-ol-notDragging']"
+        :key="refreshKey"
+        ref="ol">
+        <VueDraggable
+            v-model="ap.list.audios"
+            @start="onDragStart"
+            @end="onDragEnd"
+            item-key="id"
+            handle=".aplayer-list-control-btn-reorder"
+            ghostClass="iSDragging"
+            :animation="150">
             <!-- <miaoLazyDiv :min-height="'32px'" auto-height> -->
-                <li v-for="(element, index) in ap.list.audios"  :class="activeAudioIndex == index ? 'aplayer-list-light' : ''" class="aplayer-list-new"
+            <li
-                    :key="element.id">
+                v-for="(element, index) in ap.list.audios"
-                    <span class="aplayer-list-cur" :style="{ backgroundColor: apTheme }"></span>
+                :class="[activeAudioIndex == index ? 'aplayer-list-light' : '']"
-                    <span class="aplayer-list-index">{{ index + 1 }}</span>
+                class="aplayer-list-new"
-                    <span class="aplayer-list-title">{{ element.name }}</span>
+                :key="element.id">
-                    <div class="aplayer-list-control">
+                <span
-                        <div class="aplayer-list-control-btn aplayer-list-control-btn-hover aplayer-list-control-btn-play"
+                    class="aplayer-list-cur"
-                            @click.stop="switchAudio(index)">
+                    :style="{ backgroundColor: apTheme }"></span>
-                            <PlayOutline class="aplayer-list-control-btn-svg" />
+                <span class="aplayer-list-index">{{ index + 1 }}</span>
-                        </div>
+                <span class="aplayer-list-title">{{ element.name }}</span>
-                        <div class="aplayer-list-control-btn aplayer-list-control-btn-hover"
+                <div class="aplayer-list-control">
-                            @click.stop="switchAudio(index)" v-if="false">
+                    <div
-                            <HeartOutline class="aplayer-list-control-btn-svg" />
+                        class="aplayer-list-control-btn aplayer-list-control-btn-hover aplayer-list-control-btn-play"
-                        </div>
+                        @click.stop="switchAudio(index)">
-                        <div class="aplayer-list-control-btn" @click.stop="listAudioUp(index)" v-if="false">
+                        <PlayOutline class="aplayer-list-control-btn-svg" />
-                            <ChevronUpOutline class="aplayer-list-control-btn-svg" />
-                        </div>
-                        <div class="aplayer-list-control-btn" @click.stop="listAudioDown(index)" v-if="false">
-                            <ChevronDownOutline class="aplayer-list-control-btn-svg" />
-                        </div>
-                        <div class="aplayer-list-control-btn aplayer-list-control-btn-hover"
-                            @click.stop="listAudioRemove(index)">
-                            <CloseOutline class="aplayer-list-control-btn-svg" />
-                        </div>
-                        <div class="aplayer-list-control-btn aplayer-list-control-btn-reorder">
-                            <ReorderFourOutline class="aplayer-list-control-btn-svg" />
-                        </div>
                     </div>
-                    <span class="aplayer-list-author" v-show="element.artist !== 'Audio artist1'">{{ element.artist
+                    <div
-                        }}</span>
+                        class="aplayer-list-control-btn aplayer-list-control-btn-hover"
-                </li>
+                        @click.stop="switchAudio(index)"
+                        v-if="false">
+                        <HeartOutline class="aplayer-list-control-btn-svg" />
+                    </div>
+                    <div
+                        class="aplayer-list-control-btn"
+                        @click.stop="listAudioUp(index)"
+                        v-if="false">
+                        <ChevronUpOutline
+                            class="aplayer-list-control-btn-svg" />
+                    </div>
+                    <div
+                        class="aplayer-list-control-btn"
+                        @click.stop="listAudioDown(index)"
+                        v-if="false">
+                        <ChevronDownOutline
+                            class="aplayer-list-control-btn-svg" />
+                    </div>
+                    <div
+                        class="aplayer-list-control-btn aplayer-list-control-btn-hover"
+                        @click.stop="listAudioRemove(index)">
+                        <CloseOutline class="aplayer-list-control-btn-svg" />
+                    </div>
+                    <div
+                        class="aplayer-list-control-btn aplayer-list-control-btn-reorder">
+                        <ReorderFourOutline
+                            class="aplayer-list-control-btn-svg" />
+                    </div>
+                </div>
+                <span
+                    class="aplayer-list-author"
+                    v-show="element.artist !== 'Audio artist1'">
+                    {{ element.artist }}
+                </span>
+            </li>
             <!-- </miaoLazyDiv> -->
         </VueDraggable>
     </ol>
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, onMounted, ref } from 'vue';
+import { computed, nextTick, onMounted, ref } from 'vue'
-import { ChevronUpOutline, ChevronDownOutline, CloseOutline, ReorderFourOutline, PlayOutline, HeartOutline } from '@vicons/ionicons5';
+import {
+    ChevronUpOutline,
+    ChevronDownOutline,
+    CloseOutline,
+    ReorderFourOutline,
+    PlayOutline,
+    HeartOutline
+} from '@vicons/ionicons5'
 import { VueDraggable } from 'vue-draggable-plus'
 // 与vue-draggable冲突
 // import miaoLazyDiv from '@/components/miaoLazyDiv.vue';
-import apType, { audioType } from '../types/ap';
+import apType, { audioType } from '../types/ap'
 
 const props = defineProps<{
     ap: apType
-    onDragItemStart: () => void,
+    onDragItemStart: () => void
     onDragItemEnd: () => void
 }>()
 
@@ -59,13 +98,17 @@ const refreshKey = ref(Math.random())
 
 const isDragging = ref(false)
 
-const apTheme = computed(() => props.ap.list.audios[activeAudioIndex.value].theme ?? props.ap.options.theme)
+const apTheme = computed(
+    () =>
+        props.ap.list.audios[activeAudioIndex.value].theme ??
+        props.ap.options.theme
+)
 
 const activeAudioIndex = computed(() => props.ap.list.index)
 
 props.ap.on('listswitch', (...args: any) => {
     // 手动触发更新，不然监听不到
-    props.ap.list.index = args[0].index as number;
+    props.ap.list.index = args[0].index as number
 })
 
 const refresh = () => {
@@ -73,7 +116,7 @@ const refresh = () => {
     refreshKey.value = Math.random()
     nextTick(() => {
         ol.value?.scrollTo({
-            top,
+            top
         })
     })
 }
@@ -97,33 +140,33 @@ const listRefreshIndex = (curr: audioType) => {
 }
 
 const listAudioUp = (index: number) => {
-    const arr = props.ap.list.audios;
+    const arr = props.ap.list.audios
     const len = arr.length
     const curr = props.ap.list.audios[props.ap.list.index]
     if (index === 0) {
-        const _item = arr.shift();
+        const _item = arr.shift()
-        _item && arr.push(_item);
+        _item && arr.push(_item)
     } else {
-        const pre: number = (len - 1 + index) % len;
+        const pre: number = (len - 1 + index) % len
-        const _pre = arr[index];
+        const _pre = arr[index]
-        arr[index] = arr[pre];
+        arr[index] = arr[pre]
-        arr[pre] = _pre;
+        arr[pre] = _pre
     }
     listRefreshIndex(curr)
-};
+}
 
 const listAudioDown = (index: number) => {
-    const arr = props.ap.list.audios;
+    const arr = props.ap.list.audios
     const len = arr.length
     const curr = props.ap.list.audios[props.ap.list.index]
     if (index === len - 1) {
-        const _item = arr.pop();
+        const _item = arr.pop()
-        _item && arr.unshift(_item);
+        _item && arr.unshift(_item)
     } else {
-        const pre: number = (len + 1 + index) % len;
+        const pre: number = (len + 1 + index) % len
-        const _pre = arr[index];
+        const _pre = arr[index]
-        arr[index] = arr[pre];
+        arr[index] = arr[pre]
-        arr[pre] = _pre;
+        arr[pre] = _pre
     }
     listRefreshIndex(curr)
 }
@@ -189,7 +232,7 @@ onMounted(() => {
         &-svg {
             width: 20px;
             aspect-ratio: 1;
-            transition: all .1s ease;
+            transition: all 0.1s ease;
         }
     }
 
@@ -222,11 +265,10 @@ onMounted(() => {
     }
 }
 
-.aplayer .aplayer-list ol li:hover {
+.aplayer .aplayer-list .miaoMusic-ol-isDragging li:hover {
     background: #efefef !important;
 }
 
-
 .miaoMusicDrag-move,
 .miaoMusicDrag-enter-active,
 .miaoMusicDrag-leave-active {