From 171af1219ee28881e5499ee20aa33a0a5e75b0f9 Mon Sep 17 00:00:00 2001
From: Miao_Spring <539943419@qq.com>
Date: Fri, 27 Sep 2024 18:23:40 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=AD=8C=E5=8D=95=E5=86=85=E5=85=83?=
 =?UTF-8?q?=E7=B4=A0=E6=87=92=E5=8A=A0=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/miaoLazyDiv.vue                | 25 ++++++-
 .../miaoMusicPlayer/miaoMusicPlayerDemo.vue   | 40 +++++++----
 .../miaoMusicPlayer/src/aplayerListNew.vue    | 66 ++++++++++---------
 3 files changed, 82 insertions(+), 49 deletions(-)

diff --git a/src/components/miaoLazyDiv.vue b/src/components/miaoLazyDiv.vue
index 2e8e376..2db13cb 100644
--- a/src/components/miaoLazyDiv.vue
+++ b/src/components/miaoLazyDiv.vue
@@ -1,15 +1,20 @@
 <!-- 只适合用于渲染过程较为复杂的组件，不然可能得不偿失
      这么泛用的组件，性能差点也能理解 -->
 <template>
-    <div class="miao-lazy" ref="miaoLazyRoot" :style="!show ? { minHeight, minWidth, margin } : {}">
+    <div class="miao-lazy" ref="miaoLazyRoot"
+        :style="!show ? { minHeight: _autoHeight !== undefined ? _autoHeight : props.minHeight, minWidth, margin } : {}">
         <slot v-if="show" />
     </div>
 </template>
 
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref } from 'vue';
+import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
 
 const props = defineProps({
+    // disable: {
+    //     type: Boolean,
+    //     default: false,
+    // },
     disableLazy: {
         type: Boolean,
         default: false,
@@ -26,11 +31,17 @@ const props = defineProps({
     margin: {
         type: String,
         default: 'none',
+    },
+    autoHeight: {
+        type: Boolean,
+        default: false
     }
 })
 
 const miaoLazyRoot = ref<HTMLDivElement>()
 
+const _autoHeight = ref<string>()
+
 const show = ref<boolean>(props.disableLazy)
 
 const isVisible = (dom: HTMLDivElement) => {
@@ -49,6 +60,9 @@ const { showSlot, hideSlot, clearTimer } = (() => {
     }
     const hideSlot = () => {
         clearTimer()
+        if (props.autoHeight) {
+            _autoHeight.value = `${miaoLazyRoot.value?.clientHeight}px`
+        }
         show.value = false
     }
     const showSlot = () => {
@@ -69,7 +83,12 @@ const { showSlot, hideSlot, clearTimer } = (() => {
                 hideSlot()
             }
         }, 1000)
-        // })
+        // if (props.autoHeight) {
+        //     nextTick(() => {
+        //         console.log(miaoLazyRoot.value?.clientHeight)
+        //         _autoHeight.value = `${miaoLazyRoot.value?.clientHeight}px`
+        //     })
+        // }
     }
     return { showSlot, hideSlot, clearTimer }
 })()
diff --git a/src/plugins/miaoMusicPlayer/miaoMusicPlayerDemo.vue b/src/plugins/miaoMusicPlayer/miaoMusicPlayerDemo.vue
index 723204d..c910783 100644
--- a/src/plugins/miaoMusicPlayer/miaoMusicPlayerDemo.vue
+++ b/src/plugins/miaoMusicPlayer/miaoMusicPlayerDemo.vue
@@ -1,17 +1,20 @@
 <template>
     <miao-drop-handler @on-virtual-files="handleDropVFiles">
-        <div class="miaoMusic-container">
-            <NScrollbar>
-                <div class="miaoMusic-main">
-                </div>
-            </NScrollbar>
-            <div ref="aplayer" />
-        </div>
+        <miao-alertTip-provider ref="miaoMessageRef">
+            <div class="miaoMusic-container">
+                <NScrollbar>
+                    <div class="miaoMusic-main">
+                    </div>
+                </NScrollbar>
+                <div ref="aplayer" />
+            </div>
+        </miao-alertTip-provider>
     </miao-drop-handler>
 </template>
 
 <script setup lang="ts">
 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';
@@ -23,13 +26,22 @@ import config from '@/config';
 import { difference, uniq } from 'lodash';
 import apType from './types/ap';
 
+const miaoMessageRef = ref<InstanceType<typeof miaoAlertTipProvider>>()
 
 const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
     required: true
 });
 
-watch(()=>currentFiles.value, (value, oldValue) => {
-    ap.list.add(getMusicList(difference(value, oldValue)))
+watch(() => currentFiles.value, (value, oldValue) => {
+    const diff = difference(value, oldValue)
+    if (diff.length > 0) {
+        const _s = `等${diff.length}个资源`
+        miaoMessageRef.value?.alertTip(`已添加 ${diff[0].name}${diff.length !== 1 ? _s : ''}`, {
+            type: 'success',
+            timeout: 3000
+        })
+        ap.list.add(getMusicList(diff))
+    }
 })
 
 const getMusicList = (mp3VFiles: VirtualFile[]) => mp3VFiles.map((v, index) => ({
@@ -69,12 +81,12 @@ onMounted(() => {
             disableDropReceiver.value = false
         },
     })
-	ap.on('listremove', (...args: any) => {
-        const {index} = args[0] as {index: number}
+    ap.on('listremove', (...args: any) => {
+        const { index } = args[0] as { index: number }
         const _name = ap.list.audios[index].name
-        currentFiles.value = currentFiles.value.filter(v=>v.name !== _name)
-	})
-    console.log({ ap, vueApp })
+        currentFiles.value = currentFiles.value.filter(v => v.name !== _name)
+    })
+    // console.log({ ap, vueApp })
 });
 
 onUnmounted(() => {
diff --git a/src/plugins/miaoMusicPlayer/src/aplayerListNew.vue b/src/plugins/miaoMusicPlayer/src/aplayerListNew.vue
index d799bc8..88bac61 100644
--- a/src/plugins/miaoMusicPlayer/src/aplayerListNew.vue
+++ b/src/plugins/miaoMusicPlayer/src/aplayerListNew.vue
@@ -2,38 +2,39 @@
     <ol :style="{ maxHeight: ap.options.listMaxHeight }" :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">
-            <li v-for="(element, index) in ap.list.audios"
-                :class="activeAudioIndex == index ? 'aplayer-list-light' : ''" class="aplayer-list-new"
-                :key="element.id">
-                <span class="aplayer-list-cur" :style="{ backgroundColor: apTheme }"></span>
-                <span class="aplayer-list-index">{{ index + 1 }}</span>
-                <span class="aplayer-list-title">{{ element.name }}</span>
-                <div class="aplayer-list-control">
-                    <div class="aplayer-list-control-btn aplayer-list-control-btn-hover aplayer-list-control-btn-play"
-                        @click.stop="switchAudio(index)">
-                        <PlayOutline class="aplayer-list-control-btn-svg" />
+            <miaoLazyDiv v-for="(element, index) in ap.list.audios" :min-height="'32px'" auto-height>
+                <li :class="activeAudioIndex == index ? 'aplayer-list-light' : ''" class="aplayer-list-new"
+                    :key="element.id">
+                    <span class="aplayer-list-cur" :style="{ backgroundColor: apTheme }"></span>
+                    <span class="aplayer-list-index">{{ index + 1 }}</span>
+                    <span class="aplayer-list-title">{{ element.name }}</span>
+                    <div class="aplayer-list-control">
+                        <div class="aplayer-list-control-btn aplayer-list-control-btn-hover aplayer-list-control-btn-play"
+                            @click.stop="switchAudio(index)">
+                            <PlayOutline class="aplayer-list-control-btn-svg" />
+                        </div>
+                        <div class="aplayer-list-control-btn aplayer-list-control-btn-hover"
+                            @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>
-                    <div class="aplayer-list-control-btn aplayer-list-control-btn-hover"
-                        @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>
+                    <span class="aplayer-list-author" v-show="element.artist !== 'Audio artist1'">{{ element.artist
+                        }}</span>
+                </li>
+            </miaoLazyDiv>
         </VueDraggable>
     </ol>
 </template>
@@ -42,6 +43,7 @@
 import { computed, nextTick, onMounted, ref } from 'vue';
 import { ChevronUpOutline, ChevronDownOutline, CloseOutline, ReorderFourOutline, PlayOutline, HeartOutline } from '@vicons/ionicons5';
 import { VueDraggable } from 'vue-draggable-plus'
+import miaoLazyDiv from '@/components/miaoLazyDiv.vue';
 import apType, { audioType } from '../types/ap';
 
 const props = defineProps<{
@@ -148,7 +150,7 @@ const { onDragStart, onDragEnd } = (() => {
 // }
 
 onMounted(() => {
-    console.log(props.ap)
+    // console.log(props.ap)
 })
 </script>