From 55381df4f6569222d63b7395c66be07613175dfa Mon Sep 17 00:00:00 2001 From: Miao_Spring <539943419@qq.com> Date: Fri, 27 Sep 2024 15:03:43 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=AD=8C=E5=8D=95=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E6=8B=96=E5=8A=A8=E6=8E=92=E5=BA=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + pnpm-lock.yaml | 21 ++++++ src/App.vue | 8 +- src/components/miaoDropHandler.vue | 18 +++++ src/hooks/useDataBus.ts | 4 + .../miaoMusicPlayer/hooks/aplayerMiao.ts | 9 ++- .../miaoMusicPlayer/miaoMusicPlayerDemo.vue | 11 ++- .../miaoMusicPlayer/src/aplayerListNew.vue | 74 +++++++++++++------ 8 files changed, 117 insertions(+), 29 deletions(-) diff --git a/package.json b/package.json index c2a9807..692ad68 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ "sass": "^1.77.8", "vue": "3.5.0", "vue-codemirror": "^6.1.1", + "vue-draggable-plus": "^0.5.3", "xgplayer": "^3.0.20", "xgplayer-subtitles": "^3.0.20" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fd02d65..1c1898d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -80,6 +80,9 @@ importers: vue-codemirror: specifier: ^6.1.1 version: 6.1.1(codemirror@6.0.1(@lezer/common@1.2.1))(vue@3.5.0(typescript@5.5.4)) + vue-draggable-plus: + specifier: ^0.5.3 + version: 0.5.3(@types/sortablejs@1.15.8) xgplayer: specifier: ^3.0.20 version: 3.0.20(core-js@3.38.1) @@ -523,6 +526,9 @@ packages: resolution: {integrity: sha512-TRdIPqdsvKmPla44kVy4jv5Nt5vjMfVjbIEke1CRULIrwKNRC4lIiZvNYDJvbUMNCFPNIUcOKhXTyMJrX18IMA==} deprecated: This is a stub types definition. pdfjs-dist provides its own type definitions, so you do not need this installed. + '@types/sortablejs@1.15.8': + resolution: {integrity: sha512-b79830lW+RZfwaztgs1aVPgbasJ8e7AXtZYHTELNXZPsERt4ymJdjV4OccDbHQAvHrCcFpbF78jkm0R6h/pZVg==} + '@vicons/ionicons5@0.12.0': resolution: {integrity: sha512-Iy1EUVRpX0WWxeu1VIReR1zsZLMc4fqpt223czR+Rpnrwu7pt46nbnC2ycO7ItI/uqDLJxnbcMC7FujKs9IfFA==} @@ -1207,6 +1213,15 @@ packages: codemirror: 6.x vue: 3.x + vue-draggable-plus@0.5.3: + resolution: {integrity: sha512-dwKDzZ8io3y7k2iuIwVwiGrdiq5C0S7Et7nt5Gz5KjpBS9MtZGFP+L4FJPWGSLYleOT8HmVuCXTZYjGet7wC0g==} + peerDependencies: + '@types/sortablejs': ^1.15.0 + '@vue/composition-api': '*' + peerDependenciesMeta: + '@vue/composition-api': + optional: true + vue-tsc@2.0.29: resolution: {integrity: sha512-MHhsfyxO3mYShZCGYNziSbc63x7cQ5g9kvijV7dRe1TTXBRLxXyL0FnXWpUF1xII2mJ86mwYpYsUmMwkmerq7Q==} hasBin: true @@ -1682,6 +1697,8 @@ snapshots: - encoding - supports-color + '@types/sortablejs@1.15.8': {} + '@vicons/ionicons5@0.12.0': {} '@vitejs/plugin-vue@5.1.2(vite@5.4.0(@types/node@22.1.0)(sass@1.77.8))(vue@3.5.0(typescript@5.5.4))': @@ -2466,6 +2483,10 @@ snapshots: codemirror: 6.0.1(@lezer/common@1.2.1) vue: 3.5.0(typescript@5.5.4) + vue-draggable-plus@0.5.3(@types/sortablejs@1.15.8): + dependencies: + '@types/sortablejs': 1.15.8 + vue-tsc@2.0.29(typescript@5.5.4): dependencies: '@volar/typescript': 2.4.0-alpha.18 diff --git a/src/App.vue b/src/App.vue index 5f1db83..7607649 100644 --- a/src/App.vue +++ b/src/App.vue @@ -135,9 +135,9 @@ provide('rootDirectory', rootDirectory) : view.title }} -
- +
+ @@ -148,7 +148,7 @@ provide('rootDirectory', rootDirectory) view.currentFiles, index + 1 ) - "> + " v-if="view.allowCopy"> @@ -241,7 +241,7 @@ $tag-width: 170px; height: 5px; aspect-ratio: 1; border-radius: 66px; - margin-left: 5px; + margin-right: 5px; } .tab-control { diff --git a/src/components/miaoDropHandler.vue b/src/components/miaoDropHandler.vue index db3b657..b403ec4 100644 --- a/src/components/miaoDropHandler.vue +++ b/src/components/miaoDropHandler.vue @@ -12,6 +12,13 @@ import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory' import config from '@/config' import useDataBus from '@/hooks/useDataBus' +const props = defineProps({ + disable: { + type: Boolean, + default: false + } +}) + const dataBus = useDataBus() const { uploadSizeLimit } = config @@ -57,8 +64,16 @@ const removeDirectory = async (files: File[]) => { } } } +const check = (event: DragEvent) => [ + ...(event.dataTransfer?.files ?? []), + ...(dataBus.get('dragData_vFiles') ?? []), + ...(dataBus.get('dragData_vDirectory') ?? []) +].length !== 0 const handleDragOver = async (event: DragEvent) => { + if (props.disable || check(event) === false) { + return + } event.preventDefault() if (showMask.value === 1) { return @@ -71,6 +86,9 @@ const handleDragLeave = async () => { } const handleDrop = async (event: DragEvent) => { + if (props.disable || check(event) === false) { + return + } showMask.value = 0 event.preventDefault() event.stopPropagation() diff --git a/src/hooks/useDataBus.ts b/src/hooks/useDataBus.ts index a3f5222..d7a2b91 100644 --- a/src/hooks/useDataBus.ts +++ b/src/hooks/useDataBus.ts @@ -17,6 +17,10 @@ export default function useDataBus() { const value = dataStorage[key]; dataStorage[key] = undefined; return value; + }, + get(key: string | number) { + const value = dataStorage[key]; + return value; } }; } diff --git a/src/plugins/miaoMusicPlayer/hooks/aplayerMiao.ts b/src/plugins/miaoMusicPlayer/hooks/aplayerMiao.ts index 89ad1c5..65f2379 100644 --- a/src/plugins/miaoMusicPlayer/hooks/aplayerMiao.ts +++ b/src/plugins/miaoMusicPlayer/hooks/aplayerMiao.ts @@ -2,10 +2,15 @@ import { createApp, Reactive } from "vue"; import aplayerListNew from "../src/aplayerListNew.vue"; import apType from "../types/ap"; +type aplayerMiaoOption = { + onDragItemStart?: () => void, + onDragItemEnd?: () => void, +} + /** * 对aplayer进行一些自定义的风格优化 */ -const useAplayerMiao = (ap: Reactive) => { +const useAplayerMiao = (ap: Reactive, options?: aplayerMiaoOption) => { const container = ap.container as HTMLDivElement; // 隐藏旧版歌单 @@ -30,7 +35,7 @@ const useAplayerMiao = (ap: Reactive) => { }); container.appendChild(new_list_dom); - const app = createApp(aplayerListNew, { ap }); + const app = createApp(aplayerListNew, { ap, ...(options ?? {}) }); app.mount(new_list_dom); ap.on("destroy", () => { diff --git a/src/plugins/miaoMusicPlayer/miaoMusicPlayerDemo.vue b/src/plugins/miaoMusicPlayer/miaoMusicPlayerDemo.vue index c5e0662..59e12ce 100644 --- a/src/plugins/miaoMusicPlayer/miaoMusicPlayerDemo.vue +++ b/src/plugins/miaoMusicPlayer/miaoMusicPlayerDemo.vue @@ -45,6 +45,8 @@ const handleDropVFiles = (files: VirtualFile[]) => { const aplayer = ref(null); +const disableDropReceiver = ref(false) + let ap: apType let vueApp: any @@ -59,7 +61,14 @@ onMounted(() => { theme: "#60e8a2" } ap = reactive(new APlayer(aplayerOption)) - vueApp = useAplayerMiao(ap) + vueApp = useAplayerMiao(ap, { + onDragItemStart: () => { + disableDropReceiver.value = true + }, + onDragItemEnd: () => { + disableDropReceiver.value = false + }, + }) ap.on('listremove', (...args: any) => { const {index} = args[0] as {index: number} const _name = ap.list.audios[index].name diff --git a/src/plugins/miaoMusicPlayer/src/aplayerListNew.vue b/src/plugins/miaoMusicPlayer/src/aplayerListNew.vue index 2dc6dc7..b9ac741 100644 --- a/src/plugins/miaoMusicPlayer/src/aplayerListNew.vue +++ b/src/plugins/miaoMusicPlayer/src/aplayerListNew.vue @@ -1,33 +1,43 @@ \ No newline at end of file +