539943419/miaoDirectory
1
0 Fork 0
Code Pull Requests Projects Releases 2 Activity

fix: 修复歌单顺序错误的问题

Browse Source
This commit is contained in:
539943419 committed 2024-10-01 00:15:11 +08:00
1 parent 483a573f06
commit e876c117c6
3 files changed
+81 -81
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/plugins/miaoMusicPlayer/miaoMusicPlayer.vue
+19 -21
View File
@@ -2,20 +2,11 @@
<miao-drop-handler @on-virtual-files="handleDropVFiles">
<miao-alert-tip-provider ref="miaoMessageRef">
<div class="miaoMusic-container">
<miao-music-main
v-if="ap"
:ap="ap"
v-model:data="data"
:updateLocalData="updateLocalData"
<miao-music-main v-if="ap" :ap="ap" v-model:data="data" :updateLocalData="updateLocalData"
@new-collection="saveCurrPlayList"></miao-music-main>
<miao-mask
:show="isAPlayerListShow"
style="z-index: 5"
@click="() => ap?.list.hide()"></miao-mask>
<miao-mask :show="isAPlayerListShow" style="z-index: 5" @click="() => ap?.list.hide()"></miao-mask>
<div ref="aplayer" style="z-index: 10" />
<miao-mask
:show="isSavingCollection"
@click="isSavingCollection = false"></miao-mask>
<miao-mask :show="isSavingCollection" @click="isSavingCollection = false"></miao-mask>
</div>
</miao-alert-tip-provider>
</miao-drop-handler>
@@ -69,12 +60,12 @@ const props = defineProps<{
view: VirtualPage
}>()
const data = ref<collectionType[]>([])
const data = ref<collectionType[]>()
watch(
data,
() => {
updateLocalData()
(_v, oldV) => {
updateLocalData(oldV !== undefined)
},
{
deep: true
@@ -113,13 +104,13 @@ const handleDropVFiles = (files: VirtualFile[]) => {
const saveCurrPlayList = () => {
if (ap.value) {
data.value.unshift({
data.value?.unshift({
id: Math.random(),
name: `新建歌单-${new Date()}`,
intro: 'none',
createTime: new Date(),
coverUrl: '',
audios: cloneDeep(ap.value.list.audios)
audios: cloneDeep(ap.value.list.audios).map((v, i) => ({ ...v, index: i }))
})
miaoMessageRef.value?.alertTip('已创建新的歌单', {
timeout: 1000,
@@ -171,16 +162,22 @@ const initAPlayerMiao = () => {
})
}
const updateLocalData = debounce(() => {
console.log('update')
const updateLocalData = debounce((log?: boolean) => {
log && miaoMessageRef.value?.alertTip(`保存设置成功`, {
type: 'success',
timeout: 999,
})
localForage.setItem('miaoMusic-storage-musicCollections', toRaw(data.value))
}, 1000, {
'leading': false,
'trailing': true
})
const getLocalData = async () => {
data.value =
(await localForage.getItem('miaoMusic-storage-musicCollections')) ?? []
const _data =
(await localForage.getItem('miaoMusic-storage-musicCollections') as collectionType[]) ?? []
_data.forEach(v => v.audios.sort((a, b) => a.index - b.index))
data.value = _data
console.log('data ==>', toRaw(data.value))
}
onBeforeMount(async () => {
await getLocalData()
@@ -213,6 +210,7 @@ onUnmounted(() => {
position: absolute;
bottom: 10px;
width: -webkit-fill-available;
.aplayer-icon-order,
.aplayer-icon-loop {
display: none !important;
src/plugins/miaoMusicPlayer/src/collectionInfo.vue
+52 -50
View File
@@ -1,24 +1,17 @@
<template>
<div class="collection-info-container">
<div class="collection-info-container-top">
<div
class="collection-info-container-top-exit"
@click="emit('exit')">
<div class="collection-info-container-top-exit" @click="emit('exit')">
<ArrowBackOutline></ArrowBackOutline>
</div>
<div class="collection-info-container-top-title">
<span :tooltip="false" v-if="!isEditing">
{{ collection.name }}
</span>
<n-input
v-if="isEditing"
v-model:value="collection.name"></n-input>
<n-input v-if="isEditing" v-model:value="collection.name"></n-input>
</div>
<div
class="collection-info-container-top-delete"
v-if="isEditing"
@click="
<div class="collection-info-container-top-delete" v-if="isEditing" @click="
clickDeleteCount !== 2
? clickDeleteCount++
: emit('deleteSelf')
@@ -36,9 +29,7 @@
</div>
</div>
<div class="collection-info-container-controller">
<div
class="collection-info-container-controller-play"
@click="emit('playAll', collection)">
<div class="collection-info-container-controller-play" @click="emit('playAll', collection)">
<div class="collection-info-container-controller-play-icon">
<CaretForwardOutline></CaretForwardOutline>
</div>
@@ -47,58 +38,39 @@
</div>
</div>
<div class="collection-info-container-controller-right">
<div
class="collection-info-container-controller-edit"
@click="isEditing = !isEditing">
<component
:is="
isEditing ? CheckmarkOutline : CreateOutline
<div class="collection-info-container-controller-edit" @click="isEditing = !isEditing">
<component :is="isEditing ? CheckmarkOutline : CreateOutline
"></component>
</div>
</div>
</div>
<NScrollbar>
<div class="collection-info-container-audioList">
<VueDraggable
v-model="collection.audios"
:animation="150"
handle=".collection-info-container-audioList-item-controller-item-drag"
ghostClass="iSDragging">
<div
v-for="(audio, index) in collection.audios"
class="collection-info-container-audioList-item">
<div
class="collection-info-container-audioList-item-index">
<VueDraggable v-model="collection.audios" :animation="150"
handle=".collection-info-container-audioList-item-controller-item-drag" ghostClass="iSDragging"
@end="updateAudiosIndex">
<div v-for="(audio, index) in collection.audios" class="collection-info-container-audioList-item">
<div class="collection-info-container-audioList-item-index">
<div>{{ index + 1 }}</div>
</div>
<div
class="collection-info-container-audioList-item-info">
<div
v-if="!isEditing"
class="collection-info-container-audioList-item-info-name">
<div class="collection-info-container-audioList-item-info">
<div v-if="!isEditing" class="collection-info-container-audioList-item-info-name">
<NEllipsis :tooltip="false">
{{ audio.name }}
</NEllipsis>
</div>
<n-input
v-model:value="audio.name"
v-if="isEditing"></n-input>
<n-input v-model:value="audio.name" v-if="isEditing"></n-input>
</div>
<div
class="collection-info-container-audioList-item-controller">
<PlayOutline
class="collection-info-container-audioList-item-controller-item"
v-if="!isEditing"
@click="
<div class="collection-info-container-audioList-item-controller">
<PlayOutline class="collection-info-container-audioList-item-controller-item"
v-if="!isEditing" @click="
emit('playAll', collection, index)
"></PlayOutline>
<TrashOutline
class="collection-info-container-audioList-item-controller-item"
v-if="isEditing"
@click="handleDelete(index)"></TrashOutline>
<ReorderFourOutline
v-if="isEditing"
class="collection-info-container-audioList-item-controller-item collection-info-container-audioList-item-controller-item-drag"></ReorderFourOutline>
<TrashOutline class="collection-info-container-audioList-item-controller-item"
v-if="isEditing" @click="handleDelete(index)"></TrashOutline>
<ReorderFourOutline v-if="isEditing"
class="collection-info-container-audioList-item-controller-item collection-info-container-audioList-item-controller-item-drag">
</ReorderFourOutline>
</div>
</div>
</VueDraggable>
@@ -135,6 +107,10 @@ const handleDelete = (index: number) => {
props.collection.audios.splice(index, 1)
}
const updateAudiosIndex = () => {
props.collection.audios = props.collection.audios.map((v, i) => ({ ...v, index: i }))
}
const emit = defineEmits<{
exit: []
deleteSelf: []
@@ -144,6 +120,7 @@ const emit = defineEmits<{
<style lang="scss" scoped>
$ig: linear-gradient(90deg, #a1ee5e 0%, #00e3ae 100%);
.collection-info-container {
width: 100%;
height: 100%;
@@ -153,12 +130,14 @@ $ig: linear-gradient(90deg, #a1ee5e 0%, #00e3ae 100%);
left: 0;
display: flex;
flex-direction: column;
&-top {
height: 70px;
padding: 0 15px;
background: $ig;
display: flex;
align-items: center;
&-exit {
width: 30px;
aspect-ratio: 1;
@@ -167,30 +146,36 @@ $ig: linear-gradient(90deg, #a1ee5e 0%, #00e3ae 100%);
justify-content: center;
align-items: center;
cursor: pointer;
svg {
width: 25px;
aspect-ratio: 1;
transition: width 0.25s ease;
}
&:hover {
svg {
width: 30px;
}
}
}
&-title {
display: flex;
margin-left: 10px;
&-confirm {
margin-left: 10px;
width: 32px;
// color: #ffffff;
}
span {
user-select: none;
font-size: larger;
}
}
&-delete {
display: flex;
height: 25px;
@@ -199,6 +184,7 @@ $ig: linear-gradient(90deg, #a1ee5e 0%, #00e3ae 100%);
color: red;
user-select: none;
cursor: pointer;
&>span {
position: relative;
top: 3px;
@@ -206,17 +192,21 @@ $ig: linear-gradient(90deg, #a1ee5e 0%, #00e3ae 100%);
}
}
}
&-controller {
height: 50px;
padding: 0 15px;
display: flex;
align-items: center;
&-play {
display: flex;
align-items: center;
&>div {
cursor: pointer;
}
&-icon {
height: 30px;
width: 45px;
@@ -225,23 +215,27 @@ $ig: linear-gradient(90deg, #a1ee5e 0%, #00e3ae 100%);
display: flex;
justify-content: center;
align-items: center;
svg {
width: 30px;
height: 25px;
color: aliceblue;
}
}
&-text {
user-select: none;
margin-left: 10px;
font-size: larger;
}
}
&-right {
flex: 1;
display: flex;
align-items: center;
justify-content: flex-end;
&>div {
margin: 0 10px;
cursor: pointer;
@@ -251,38 +245,46 @@ $ig: linear-gradient(90deg, #a1ee5e 0%, #00e3ae 100%);
}
}
}
&-audioList {
flex: 1;
color: #002911;
padding-bottom: 88px;
&-item {
// padding: 0 20px;
padding-right: 7px;
display: flex;
height: 70px;
align-items: center;
&-index {
width: 50px;
user-select: none;
font-size: 24px;
text-align: right;
&>div {
margin: auto;
width: fit-content;
}
}
&-info {
flex: 1;
display: flex;
user-select: none;
overflow: hidden;
&-name {
overflow: hidden;
}
}
&-controller {
display: flex;
align-items: center;
&-item {
width: 30px;
cursor: pointer;
src/plugins/miaoMusicPlayer/types/collection.ts
+10 -10
View File
@@ -1,14 +1,14 @@
import type { audioType } from './ap'
import type { audioType } from "./ap";
export type collectionItemType = {} & audioType
export type collectionItemType = {} & audioType;
export type collectionType = {
id: number
name: string
intro: string
createTime: Date
coverUrl?: string
audios: collectionItemType[]
}
id: number;
name: string;
intro: string;
createTime: Date;
coverUrl?: string;
audios: collectionItemType[];
};
export default collectionType
export default collectionType;