From 38e1b098d28388dfa069da2fde91cb6aeaa0a32e Mon Sep 17 00:00:00 2001 From: Miao_Spring <539943419@qq.com> Date: Fri, 27 Sep 2024 14:04:41 +0800 Subject: [PATCH] =?UTF-8?q?feat:=201.=20=E6=9B=B4=E6=96=B0=E9=9F=B3?= =?UTF-8?q?=E4=B9=90=E6=8F=92=E4=BB=B6=202.=20=E7=BB=84=E4=BB=B6=E6=B3=A8?= =?UTF-8?q?=E5=86=8C=E6=8F=92=E4=BB=B6=E5=A2=9E=E5=8A=A0=E5=8D=95=E6=8F=92?= =?UTF-8?q?=E4=BB=B6=E6=A8=A1=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.vue | 3 +- src/class/PluginCenter.ts | 40 +++-- src/class/VirtualDirectory.ts | 6 +- src/class/VirtualPage.ts | 15 +- src/plugins/miaoMusicPlayer/export.ts | 3 +- .../miaoMusicPlayer/hooks/aplayerMiao.ts | 42 ++++++ .../miaoMusicPlayer/miaoMusicPlayerDemo.vue | 69 ++++++--- .../miaoMusicPlayer/src/aplayerListNew.vue | 139 ++++++++++++++++++ src/plugins/miaoMusicPlayer/types/ap.ts | 40 +++++ 9 files changed, 316 insertions(+), 41 deletions(-) create mode 100644 src/plugins/miaoMusicPlayer/hooks/aplayerMiao.ts create mode 100644 src/plugins/miaoMusicPlayer/src/aplayerListNew.vue create mode 100644 src/plugins/miaoMusicPlayer/types/ap.ts diff --git a/src/App.vue b/src/App.vue index f2ea87a..5f1db83 100644 --- a/src/App.vue +++ b/src/App.vue @@ -113,7 +113,6 @@ onMounted(async () => { await init(messageProviderRef.value?.alertTip) pluginCenter = usePluginCenter() pluginCenter.usePlugin('miaoDirectory', [rootDirectory], []) - console.log(rootDirectory.tree) }) // @ts-ignore @@ -138,7 +137,7 @@ provide('rootDirectory', rootDirectory)
- + diff --git a/src/class/PluginCenter.ts b/src/class/PluginCenter.ts index b8f05d0..b374084 100644 --- a/src/class/PluginCenter.ts +++ b/src/class/PluginCenter.ts @@ -2,6 +2,7 @@ import useVirtualPages from "@/hooks/useVirtualPages"; import VirtualDirectory, { VirtualFile } from "./VirtualDirectory"; import { ShallowRef, shallowRef } from "vue"; import { alertTipType, usePluginHooksType } from "@/types/type"; +import VirtualPage from "./VirtualPage"; export enum PluginGroup { default = "default", @@ -17,6 +18,8 @@ export interface registerComponentOption { filter: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => boolean; disable?: boolean; exitConfirm?: boolean; + // 若为true，则只会创建一个页面，当存在已创建页面则会直接将VFile和VDir加到curr里面 + single?: boolean; } export type Plugin = { @@ -31,12 +34,7 @@ export type Plugin = { // 判断在未禁用时是否可以使用这个组件 // 使用组件即调用下面的func filter: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => boolean; - func: ( - VDirectories: VirtualDirectory[], - VFiles: VirtualFile[], - hooks: usePluginHooksType, - ...args: any[] - ) => void; + func: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[], hooks: usePluginHooksType, ...args: any[]) => void; }; export default class PluginCenter { @@ -58,7 +56,7 @@ export default class PluginCenter { * 便捷地注册一个组件为插件，触发时直接用新页面打开 */ registerComponent(option: registerComponentOption): void { - const { key, name, getComponent, icon, filter, group = [PluginGroup.default], disable = false, exitConfirm = false } = option; + const { key, name, getComponent, icon, filter, group = [PluginGroup.default], disable = false, exitConfirm = false, single = false } = option; let _component: any; const views = useVirtualPages(); this.register(key, { @@ -81,11 +79,18 @@ export default class PluginCenter { timeout: 2000 }); } - views.push(_component, VDirectories, VFiles, { - VirtualPageOption: { - exitConfirm - } - }); + if (single && views.find(_component) !== undefined) { + const view = views.find(_component) as VirtualPage; + view.currentFiles = [...view.currentFiles, ...VFiles]; + view.currentDirectories = [...view.currentDirectories, ...VDirectories]; + } else { + views.push(_component, VDirectories, VFiles, { + VirtualPageOption: { + exitConfirm, + allowCopy: single === false + } + }); + } } }); } @@ -112,8 +117,13 @@ export default class PluginCenter { } usePlugin(key: string, VDirectories?: VirtualDirectory[], VFiles?: VirtualFile[], ...args: any[]) { - this.pluginsMap[key].func(VDirectories ?? [], VFiles ?? [], { - globalAlertTip: this.globalAlertTip - }, ...args); + this.pluginsMap[key].func( + VDirectories ?? [], + VFiles ?? [], + { + globalAlertTip: this.globalAlertTip + }, + ...args + ); } } diff --git a/src/class/VirtualDirectory.ts b/src/class/VirtualDirectory.ts index 890a730..3b7a3d1 100644 --- a/src/class/VirtualDirectory.ts +++ b/src/class/VirtualDirectory.ts @@ -36,6 +36,7 @@ export class VirtualFile { stats: stats; parent: VirtualDirectory; id: number; + storage: {[key: string]: any} = {}; get path() { return `${this.parent.path}${this.name}`; } @@ -48,7 +49,6 @@ export class VirtualFile { class VirtualDirectory { constructor(info: directory, parent?: VirtualDirectory) { this.name = info.name; - this.type = "directory"; this.stats = info.stats; this.parent = parent ?? undefined; this.id = generateId(); @@ -60,7 +60,7 @@ class VirtualDirectory { // 子目录 directories?: VirtualDirectory[]; // 没啥意义，标注一下就是了 - type: "directory"; + type: "directory" = 'directory'; // 文件夹创建时间等杂项属性 stats: stats; // 父文件夹 @@ -68,6 +68,8 @@ class VirtualDirectory { id: number; + storage: {[key: string]: any} = {}; + /** * 获取相对于根目录的路径的层数 * 用于目录下文件定位 diff --git a/src/class/VirtualPage.ts b/src/class/VirtualPage.ts index 91bebd7..c30bf85 100644 --- a/src/class/VirtualPage.ts +++ b/src/class/VirtualPage.ts @@ -1,9 +1,10 @@ -import { reactive, shallowRef } from 'vue' +import { Component, reactive, shallowRef } from 'vue' import VirtualDirectory, { VirtualFile } from './VirtualDirectory' import generateId from '@/hooks/generateId' export interface VirtualPageOption { exitConfirm?: boolean + allowCopy?: boolean } export interface ViewsPushOption { @@ -44,6 +45,7 @@ export default class VirtualPage { this.refreshKey = Math.random() this.color = getRandomWebSafeColor() this.exitConfirm = initObjects?.option?.exitConfirm ?? false + this.allowCopy = initObjects?.option?.allowCopy ?? true } // 页面使用的组件 component: any @@ -61,8 +63,10 @@ export default class VirtualPage { color: string // 用于展示的title _title?: string - // 关闭时是否需要确认 + // 关闭时是否需要确认（未实现） exitConfirm: boolean + // 是否允许复制页面 + allowCopy: boolean get title() { if (this._title) { @@ -155,4 +159,11 @@ export class VirtualPages { deleteView(index: number) { this._views.splice(index, 1) } + + /** + * 返回第一个使用此组件的页面 + */ + find(component: Component) { + return this._views.find(v=>v.component === component) + } } diff --git a/src/plugins/miaoMusicPlayer/export.ts b/src/plugins/miaoMusicPlayer/export.ts index d370124..0728628 100644 --- a/src/plugins/miaoMusicPlayer/export.ts +++ b/src/plugins/miaoMusicPlayer/export.ts @@ -25,7 +25,8 @@ const pluginConfig: registerComponentOption = { } return vFiles[0].name.endsWith('?') }, - disable: false + disable: false, + single: true } export default pluginConfig diff --git a/src/plugins/miaoMusicPlayer/hooks/aplayerMiao.ts b/src/plugins/miaoMusicPlayer/hooks/aplayerMiao.ts new file mode 100644 index 0000000..89ad1c5 --- /dev/null +++ b/src/plugins/miaoMusicPlayer/hooks/aplayerMiao.ts @@ -0,0 +1,42 @@ +import { createApp, Reactive } from "vue"; +import aplayerListNew from "../src/aplayerListNew.vue"; +import apType from "../types/ap"; + +/** + * 对aplayer进行一些自定义的风格优化 + */ +const useAplayerMiao = (ap: Reactive) => { + const container = ap.container as HTMLDivElement; + + // 隐藏旧版歌单 + const old_listDom = container.querySelector(".aplayer-list") as HTMLDivElement; + old_listDom.style.display = "none"; + + // 新版歌单 + const new_list_dom = document.createElement("div"); + new_list_dom.classList.add("aplayer-list"); + new_list_dom.style.maxHeight = ap.options.listMaxHeight; + + ap.on("listadd", () => { + ap.list.audios.forEach(v => { + !v.id && (v.id = Math.random()); + }); + }); + ap.on("listshow", () => { + new_list_dom.classList.remove("aplayer-list-hide"); + }); + ap.on("listhide", () => { + new_list_dom.classList.add("aplayer-list-hide"); + }); + + container.appendChild(new_list_dom); + const app = createApp(aplayerListNew, { ap }); + app.mount(new_list_dom); + + ap.on("destroy", () => { + app.unmount(); + }); + return app; +}; + +export default useAplayerMiao; diff --git a/src/plugins/miaoMusicPlayer/miaoMusicPlayerDemo.vue b/src/plugins/miaoMusicPlayer/miaoMusicPlayerDemo.vue index 0b65b81..c5e0662 100644 --- a/src/plugins/miaoMusicPlayer/miaoMusicPlayerDemo.vue +++ b/src/plugins/miaoMusicPlayer/miaoMusicPlayerDemo.vue @@ -1,6 +1,10 @@