feat: 歌单加了个顶部栏

README.md

@@ -21,8 +21,7 @@
 
 | 长期计划 |
 |---|
-| 重构virtualDirectory，使其不用直接拥有父文件夹 |
-| 重构virtualDirectory，使其不用直接拥有父文件夹 |
+| 无 |
 
 ## 碎碎念：
 

src/class/VirtualDirectory.ts

@@ -1,51 +1,60 @@
-import config from "@/config";
-import generateId from "@/hooks/generateId";
-import useMiaoFetchApi from "@/hooks/useMiaoFetchApi";
-import type { stats, file, directory } from "@/types/type.ts";
+import config from '@/config'
+import generateId from '@/hooks/generateId'
+import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
+import type { stats, file, directory } from '@/types/type.ts'
+import difference from 'lodash/difference'
 
-const miaoFetchApi = useMiaoFetchApi();
+const miaoFetchApi = useMiaoFetchApi()
 
-const vItemMap = new Map();
+// const vDirectoryMap = new Map<string, VirtualDirectory>()
+// const vFileMap = new Map<string, VirtualFile>()
 
 export interface Tree {
-	name: string;
-	type: "directory";
-	path: string;
-	stats: stats;
+    name: string
+    type: 'directory'
+    path: string
+    stats: stats
     files?: {
-		name: string;
-		type: "file";
-		size: number;
-		stats: stats;
-		url: string;
-	}[];
-	directories?: Tree[];
+        name: string
+        type: 'file'
+        size: number
+        stats: stats
+        url: string
+    }[]
+    directories?: Tree[]
 }
 
 export class VirtualFile {
     constructor(info: file, parent: VirtualDirectory) {
-		this.name = info.name;
-		this.size = info.size;
-		this.stats = info.stats;
-		this.parent = parent;
-		this.type = "file";
-		this.id = generateId();
-		vItemMap.set(this.path, this);
+        this.name = info.name
+        this.size = info.size
+        this.stats = info.stats
+        this.parent = parent
+        this.type = 'file'
+        this.id = generateId()
+        // if (vFileMap.get(this.path) !== undefined) {
+        //     throw `${this.path} is already exist`
+        // }
+        // vFileMap.set(this.path, this)
     }
-	name: string;
-	type: "file";
-	size: number;
-	stats: stats;
-	parent: VirtualDirectory;
-	id: number;
-	storage: { [key: string]: any } = {};
+    name: string
+    type: 'file'
+    size: number
+    stats: stats
+    parent: VirtualDirectory
+    id: number
+    storage: { [key: string]: any } = {}
     get path() {
-		return `${this.parent.path}${this.name}`;
+        return `${this.parent.path}${this.name}`
     }
 
     get url() {
-		return `${config.api.get}${this.parent.path}${this.name}`;
+        return `${config.api.get}${this.parent.path}${this.name}`
     }
+
+    // destroy() {
+    //     vFileMap.delete(this.path)
+    // }
 }
 
 class VirtualDirectory {
@@ -53,31 +62,34 @@ class VirtualDirectory {
      * 除非为根节点，否则必须设置parent
      */
     constructor(info: directory, parent?: VirtualDirectory) {
-		this.name = info.name;
-		this.stats = info.stats;
-		this.parent = parent ?? undefined;
-		this.id = generateId();
-		vItemMap.set(this.path, this);
+        this.name = info.name
+        this.stats = info.stats
+        this.parent = parent ?? undefined
+        this.id = generateId()
+        // if (vDirectoryMap.get(this.path) !== undefined) {
+        //     throw `${this.path} is already exist`
+        // }
+        // vDirectoryMap.set(this.path, this)
     }
     // 文件夹名
-	name: string;
+    name: string
     // 子文件
-	files?: VirtualFile[];
+    files: VirtualFile[] = []
     // 子目录
-	directories?: VirtualDirectory[];
+    directories: VirtualDirectory[] = []
     // 没啥意义，标注一下就是了
-	type: "directory" = "directory";
+    type: 'directory' = 'directory'
     // 文件夹创建时间等杂项属性
-	stats: stats;
+    stats: stats
     // 父文件夹
-	parent?: VirtualDirectory;
+    parent?: VirtualDirectory
 
-	_isUpdated: boolean = false;
+    _isUpdated: boolean = false
 
-	id: number;
+    id: number
 
     // 用来存储一些标记信息啥的
-	storage: { [key: string]: any } = {};
+    storage: { [key: string]: any } = {}
 
     /**
      * 获取相对于根目录的路径的层数
@@ -85,7 +97,7 @@ class VirtualDirectory {
      * @returns {string}
      */
     get layer(): number {
-		return this.parent ? this.parent.layer + 1 : 0;
+        return this.parent ? this.parent.layer + 1 : 0
     }
     /**
      * 相对于根目录的路径， 如: "/",  "/123/321/"
@@ -94,9 +106,9 @@ class VirtualDirectory {
      */
     get path(): string {
         if (!this.parent) {
-			return "/";
+            return '/'
         }
-		return `${this.parent.path}${this.name}/`;
+        return `${this.parent.path}${this.name}/`
     }
 
     /**
@@ -105,16 +117,16 @@ class VirtualDirectory {
      */
     get getParents(): VirtualDirectory[] {
         if (!this.parent) {
-			return [this];
+            return [this]
         }
-		return [...this.parent.getParents, this];
+        return [...this.parent.getParents, this]
     }
 
     /**
      * 获取当前文件夹是否已经请求过至少一次数据
      */
     get isUpdated() {
-		return this._isUpdated;
+        return this._isUpdated
     }
 
     /**
@@ -124,9 +136,9 @@ class VirtualDirectory {
      */
     getParent(layer: number): VirtualDirectory {
         if (layer <= 0 || !this.parent) {
-			return this;
+            return this
         }
-		return this.parent.getParent(layer - 1);
+        return this.parent.getParent(layer - 1)
     }
 
     get tree(): Tree {
@@ -136,68 +148,88 @@ class VirtualDirectory {
             path: this.path,
             stats: this.stats,
             files:
-				this.files?.map(v => ({
+                this.files?.map((v) => ({
                     name: v.name,
                     type: v.type,
                     size: v.size,
                     stats: v.stats,
                     url: v.url
                 })) ?? [],
-			directories: this.directories?.map(v => v.tree) ?? []
-		};
+            directories: this.directories?.map((v) => v.tree) ?? []
+        }
     }
 
-	// todo: 重构这个函数
+    // 时间复杂度大爆炸
     updateContent(content: (file | directory)[]) {
-		this._isUpdated = true;
+        this._isUpdated = true
 
-		this.files = this.files ?? [];
-		this.directories = this.directories ?? [];
-		const fileNames: string[] = this.files.map(v => v.name);
-		const dirNames: string[] = this.directories.map(v => v.name);
-		const itemNames: string[] = content.map(v => v.name);
+        const itemNames: string[] = content.map((v) => v.name)
         // 删去远程端已不存在的文件与文件夹
         const _delete = (target: (VirtualFile | VirtualDirectory)[]) => {
-			let index = 0;
+            let index = 0
             while (index < target.length) {
                 if (!itemNames.includes(target[index].name)) {
-					target.splice(index, 1);
+                    target.splice(index, 1)
                 } else {
-					index += 1;
+                    index += 1
                 }
             }
-		};
-		_delete(this.files);
-		_delete(this.directories);
+        }
+        const _addFile = (item: file) => {
+            const nvf =
+                // vFileMap.get(`${this.path}${item.name}`) ??
+                new VirtualFile(item, this)
+            this.files.push(nvf)
+        }
+        const _addDirectory = (item: directory) => {
+            const nvd =
+                // vDirectoryMap.get(`${this.path}${item.name}/`) ??
+                new VirtualDirectory(item, this)
+            this.directories.push(nvd)
+        }
+        const newFileNames: string[] = difference(
+            content.filter((v) => v.type === 'file').map((v) => v.name),
+            this.files.map((v) => v.name)
+        )
+        const newDirectoryNames: string[] = difference(
+            content.filter((v) => v.type === 'directory').map((v) => v.name),
+            this.directories.map((v) => v.name)
+        )
+        _delete(this.files)
+        _delete(this.directories)
         // 加入新的文件与文件夹
-		for (let item of content) {
-			if (item.type === "file") {
-				if (!fileNames.includes(item.name)) {
-					this.files.push(new VirtualFile(item, this));
-				}
-			} else if (item.type === "directory") {
-				if (!dirNames.includes(item.name)) {
-					this.directories.push(new VirtualDirectory(item, this));
-				}
+        for (let item of content.filter((v) => newFileNames.includes(v.name))) {
+            _addFile(item as file)
         }
+        for (let item of content.filter((v) =>
+            newDirectoryNames.includes(v.name)
+        )) {
+            _addDirectory(item as directory)
         }
     }
 
     hasChild(item: VirtualDirectory | VirtualFile): boolean {
-		if (item.type === "directory") {
-			return this.directories?.includes(item) ?? false;
+        if (item.type === 'directory') {
+            return this.directories?.includes(item) ?? false
         } else {
-			return this.files?.includes(item) ?? false;
+            return this.files?.includes(item) ?? false
         }
     }
 
+    // destroy() {
+    //     for(const item of [...this.files, ...this.directories]){
+    //         item.destroy()
+    //     }
+    //     vDirectoryMap.delete(this.path)
+    // }
+
     /**
      * 调用后重新向远端拉取文件夹信息并进行更新
      * @returns {void}
      */
     async update(): Promise<void> {
-		const data: (file | directory)[] = await miaoFetchApi.get(this);
-		this.updateContent(data);
+        const data: (file | directory)[] = await miaoFetchApi.get(this)
+        this.updateContent(data)
     }
 }
-export default VirtualDirectory;
+export default VirtualDirectory

src/components/miaoAlertTipProvider.vue

@@ -89,6 +89,7 @@ defineExpose({ alertTip });
     width: 100%;
     height: 100%;
     position: relative;
+    overflow: hidden;
 
     .miao-message-provider-container {
         position: absolute;

src/components/miaoDropHandler.vue

@@ -1,5 +1,9 @@
 <template>
-    <div class="container" @dragover="handleDragOver" @dragleave="handleDragLeave" @drop="handleDrop">
+    <div
+        class="container"
+        @dragover="handleDragOver"
+        @dragleave="handleDragLeave"
+        @drop="handleDrop">
         <slot></slot>
         <miao-mask v-model:show="showMask"></miao-mask>
     </div>
@@ -64,11 +68,15 @@ const removeDirectory = async (files: File[]) => {
         }
     }
 }
-const check = (event: DragEvent) => [
-    ...(event.dataTransfer?.files ?? []),
+const check = (event: DragEvent) => {
+    return (
+        [
+            ...(event.dataTransfer?.types?.filter(v=>v === 'Files') ?? []),
             ...(dataBus.get('dragData_vFiles') ?? []),
             ...(dataBus.get('dragData_vDirectory') ?? [])
         ].length !== 0
+    )
+}
 
 const handleDragOver = async (event: DragEvent) => {
     if (props.disable || check(event) === false) {

src/hooks/miaoTools.ts

@@ -53,7 +53,12 @@ export const renderIcon = (icon: any) => {
     }
 }
 
+export const sleep = async (timeout: number) => {
+    await new Promise(_=>setTimeout(_, timeout))
+}
+
 export default {
     filePicker,
-    renderIcon
+    renderIcon,
+    sleep
 }

src/plugins/miaoDirectory/miaoDirectory.vue

@@ -1,28 +1,49 @@
 <template>
-    <miao-drop-handler @on-virtual-directory="handleDropVDirectory" @on-files="handleDropFiles"
+    <miao-drop-handler
+        @on-virtual-directory="handleDropVDirectory"
+        @on-files="handleDropFiles"
         @on-virtual-files="handleDropVirtualFiles">
+        <miaoAlertTipProvider ref="miaoAlertTip">
             <div class="miao-directory-item-container" ref="rootDomRef">
                 <!-- 顶部面包屑导航和工具栏 -->
-            <miao-directory-top :color="props.color" :current-directory="currentDirectory" @back="handleBack"
-                :open-menu-option="topBarMenuOption" @reload="handleReload" @exit="emit('exit')" :index="index"
-                @set-current-directory="setCurrentDirectory" @search="handleSearch"
+                <miao-directory-top
+                    :color="props.color"
+                    :current-directory="currentDirectory"
+                    @back="handleBack"
+                    :open-menu-option="topBarMenuOption"
+                    @reload="handleReload"
+                    @exit="emit('exit')"
+                    :index="index"
+                    @set-current-directory="setCurrentDirectory"
+                    @search="handleSearch"
                     @menu-select="handleTopBarMenuSelect" />
 
                 <!-- 文件和文件夹列表 -->
-            <miao-directory-items ref="miaoDirectoryItemRef" :color="props.color"
-                :showData_directory="showData_directory" :showData_files="showData_files"
-                :selected-item="selectedItem.value" :index="index" @item-click="handleItemClick"
-                @item-download="handleItemDownload" @item-delete="handleItemDelete"
-                @item-drag-start="handleItemDragStart" @item-rename="handleItemRename"
+                <miao-directory-items
+                    ref="miaoDirectoryItemRef"
+                    :color="props.color"
+                    :showData_directory="showData_directory"
+                    :showData_files="showData_files"
+                    :selected-item="selectedItem.value"
+                    :index="index"
+                    @item-click="handleItemClick"
+                    @item-download="handleItemDownload"
+                    @item-delete="handleItemDelete"
+                    @item-drag-start="handleItemDragStart"
+                    @item-rename="handleItemRename"
                     @item-select="handleItemSelect" />
 
                 <!-- 底部工具栏 -->
-            <miao-directory-bottom :index="index" @add-new-item="handleAddNewItem" v-if="false"
+                <miao-directory-bottom
+                    :index="index"
+                    @add-new-item="handleAddNewItem"
+                    v-if="false"
                     @pick-files-upload="handlePickFilesUpload" />
 
                 <miao-mask v-model:show="showModel"></miao-mask>
                 <miao-popup-input ref="popupInput"></miao-popup-input>
             </div>
+        </miaoAlertTipProvider>
     </miao-drop-handler>
 </template>
 
@@ -37,13 +58,13 @@ import useVirtualPages from '@/hooks/useVirtualPages'
 import { filePicker, renderIcon } from '@/hooks/miaoTools'
 import uniq from 'lodash/uniq'
 
-// 导入子组件
 import miaoDirectoryTop from './components/miaoDirectoryTop.vue'
 import MiaoDirectoryItems from './components/miaoDirectoryItemsContainer.vue'
 import MiaoDirectoryBottom from './components/miaoDirectoryBottom.vue'
 import MiaoMask from '@/components/miaoMask.vue'
 import MiaoPopupInput from '@/components/miaoPopupInput.vue'
 import MiaoDropHandler from '@/components/miaoDropHandler.vue'
+import miaoAlertTipProvider from '@/components/miaoAlertTipProvider.vue'
 import {
     CloseOutline,
     SearchOutline,
@@ -80,6 +101,7 @@ const searchText = ref<string>('')
 const showDirs = ref<boolean>(true)
 const showFiles = ref<boolean>(true)
 const miaoDirectoryItemRef = ref()
+const miaoAlertTip = ref<InstanceType<typeof miaoAlertTipProvider>>()
 
 class SelectedItem {
     constructor() {
@@ -227,13 +249,14 @@ const topBarMenuOption = computed(() => {
                     label: `反选`,
                     key: 'multiSelect:inversion'
                 },
-                selectedItem.value.length === 2 ?
-                    {
+                selectedItem.value.length === 2
+                    ? {
                           label: `区间内全选`,
                           key: 'multiSelect:range'
-                    } : undefined
+                      }
+                    : undefined
             ].filter((v) => v !== undefined),
-            icon: renderIcon(CheckmarkDoneOutline),
+            icon: renderIcon(CheckmarkDoneOutline)
         },
         {
             label: '插件',
@@ -259,11 +282,9 @@ const topBarMenuOption = computed(() => {
 
 // 设置显示的dir
 const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
+    try {
     // 若没有缓存数据则同步刷新，有缓存数据则异步刷新
-    if (
-        virtualDirectory.files === undefined ||
-        virtualDirectory.directories === undefined
-    ) {
+    if (!virtualDirectory.isUpdated) {
         await virtualDirectory.update()
     } else {
         virtualDirectory.update()
@@ -279,6 +300,12 @@ const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
         })
     }
     currentDirectories.value[0] = virtualDirectory
+    } catch(e) {
+        miaoAlertTip.value?.alertTip(`获取文件夹内容出错`, {
+            type: 'error',
+            timeout: 3000
+        })
+    }
 }
 
 const reload = () => {
@@ -315,10 +342,12 @@ const handleTopBarMenuSelect = (key: string) => {
         //     selectedItem.clear()
     } else if (key === 'showDirs') {
         showDirs.value = !showDirs.value
-        showDirs.value === false && selectedItem.clear(v => v.type !== 'directory')
+        showDirs.value === false &&
+            selectedItem.clear((v) => v.type !== 'directory')
     } else if (key === 'showFiles') {
         showFiles.value = !showFiles.value
-        showFiles.value === false && selectedItem.clear(v => v.type !== 'file')
+        showFiles.value === false &&
+            selectedItem.clear((v) => v.type !== 'file')
     } else if (key.startsWith('plugin:')) {
         const pluginName = key.split(':')[1]
         pluginCenter.usePlugin(pluginName, [currentDirectory.value], [])
@@ -326,20 +355,29 @@ const handleTopBarMenuSelect = (key: string) => {
         const opName = key.split(':')[1]
         switch (opName) {
             case 'all':
-                selectedItem.pushArray([...showData_directory.value, ...showData_files.value])
-                break;
+                selectedItem.pushArray([
+                    ...showData_directory.value,
+                    ...showData_files.value
+                ])
+                break
             case 'reset':
                 selectedItem.clear()
                 break
             case 'inversion':
                 const sArr = selectedItem.value
-                const arr = [...showData_directory.value, ...showData_files.value].filter(i => !sArr.includes(i))
+                const arr = [
+                    ...showData_directory.value,
+                    ...showData_files.value
+                ].filter((i) => !sArr.includes(i))
                 selectedItem.clear()
                 selectedItem.pushArray(arr)
                 break
-            case "range":
+            case 'range':
                 const _sArr = selectedItem.value
-                const _arr = [...showData_directory.value, ...showData_files.value]
+                const _arr = [
+                    ...showData_directory.value,
+                    ...showData_files.value
+                ]
                 const _nArr = []
                 let _counter = 0
                 for (const i of _arr) {
@@ -357,7 +395,6 @@ const handleTopBarMenuSelect = (key: string) => {
                 selectedItem.pushArray(_nArr)
                 break
         }
-
     }
 }
 

src/plugins/miaoMusicPlayer/export.ts

@@ -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

@@ -1,10 +1,11 @@
 import { createApp, Reactive } from "vue";
 import aplayerListNew from "../src/aplayerListNew.vue";
-import apType from "../types/ap";
+import apType, { audioType } from "../types/ap";
 
 type aplayerMiaoOption = {
-	onDragItemStart?: () => void,
-	onDragItemEnd?: () => void,
+    onDragItemStart?: () => void
+    onDragItemEnd?: () => void
+    onPlayVideo?: (element: audioType) => void
 }
 
 /**
@@ -38,6 +39,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

@@ -1,118 +1,157 @@
 <template>
     <miao-drop-handler @on-virtual-files="handleDropVFiles">
-        <miao-alertTip-provider ref="miaoMessageRef">
+        <miao-alert-tip-provider ref="miaoMessageRef">
             <div class="miaoMusic-container">
                 <NScrollbar>
-                    <div class="miaoMusic-main">
-                    </div>
+                    <miao-music-main v-if="ap" :ap="ap"></miao-music-main>
                 </NScrollbar>
-                <div ref="aplayer" />
+                <miao-mask
+                    :show="isAPlayerListShow"
+                    style="z-index: 5"
+                    @click="() => ap?.list.hide()"></miao-mask>
+                <div ref="aplayer" style="z-index: 10" />
             </div>
-        </miao-alertTip-provider>
+        </miao-alert-tip-provider>
     </miao-drop-handler>
 </template>
 
 <script setup lang="ts">
+import useAplayerMiao from './hooks/aplayerMiao'
+import { VirtualFile } from '@/class/VirtualDirectory'
+import { App, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
+import { NScrollbar } from 'naive-ui'
+import './src/APlayer.fix.css'
+// @ts-ignore
+import APlayer from 'APlayer'
+import config from '@/config'
+import difference from 'lodash/difference'
+import uniq from 'lodash/uniq'
+import apType from './types/ap'
 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 { NScrollbar } from 'naive-ui';
-import "./src/APlayer.fix.css"
-// @ts-ignore
-import APlayer from 'APlayer';
-import config from '@/config';
-import difference from 'lodash/difference';
-import uniq from 'lodash/uniq'
-import apType from './types/ap';
+import usePluginCenter from '@/hooks/usePluginCenter'
+import VirtualPage from '@/class/VirtualPage'
+import miaoMask from '@/components/miaoMask.vue'
+import miaoMusicMain from './src/main.vue'
+
+const pluginCenter = usePluginCenter()
+let ap = ref<apType>()
+let vueApp: App<Element>
 
 const miaoMessageRef = ref<InstanceType<typeof miaoAlertTipProvider>>()
+const aplayer = ref<any>(null)
+const isAPlayerListShow = ref(true)
 
 const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
     required: true
-});
+})
 
-watch(() => currentFiles.value, (value, oldValue) => {
+const props = defineProps<{
+    view: VirtualPage
+}>()
+
+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 : ''}`, {
+            miaoMessageRef.value?.alertTip(
+                `已添加 ${diff[0].name}${diff.length !== 1 ? _s : ''}`,
+                {
                     type: 'success',
                     timeout: 3000
-        })
-        ap.list.add(getMusicList(diff))
                 }
-})
+            )
+            ap?.value?.list.add(getMusicList(diff))
+        }
+    }
+)
 
-const getMusicList = (mp3VFiles: VirtualFile[]) => mp3VFiles.map((v, index) => ({
+const getMusicList = (mp3VFiles: VirtualFile[]) =>
+    mp3VFiles.map((v, index) => ({
         url: `${config.baseUrl}${v.url}`,
         name: v.name,
         artist: ' ',
         index
-}));
+    }))
 
 const handleDropVFiles = (files: VirtualFile[]) => {
-    currentFiles.value = uniq([...currentFiles.value, ...files]);
-};
+    currentFiles.value = uniq([...currentFiles.value, ...files])
+}
 
-const aplayer = ref<any>(null);
-
-const disableDropReceiver = ref(false)
-
-let ap: apType
-let vueApp: any
-
-
-onMounted(() => {
-    currentFiles.value = [...currentFiles.value.reverse()]
+const initAPlayerMiao = () => {
     const aplayerOption = {
         container: aplayer.value,
         audio: getMusicList(currentFiles.value),
         autoplay: true,
         volume: 1,
-        theme: "#60e8a2"
+        theme: '#60e8a2',
+        listMaxHeight: '500px'
+    }
+    ap.value = reactive<apType>(new APlayer(aplayerOption))
+    vueApp = useAplayerMiao(ap.value, {
+        onDragItemStart: () => {},
+        onDragItemEnd: () => {},
+        onPlayVideo: (element) => {
+            pluginCenter.usePlugin(
+                'miaoVideoPlayer',
+                [],
+                [
+                    currentFiles.value.find(
+                        (v) => v.name === element.name
+                    ) as VirtualFile
+                ]
+            )
         }
-    ap = reactive<apType>(new APlayer(aplayerOption))
-    vueApp = useAplayerMiao(ap, {
-        onDragItemStart: () => {
-            disableDropReceiver.value = true
-        },
-        onDragItemEnd: () => {
-            disableDropReceiver.value = false
-        },
     })
-    ap.on('listremove', (...args: any) => {
+    ap.value.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)
+        const _name = ap?.value?.list.audios[index].name
+        currentFiles.value = currentFiles.value.filter((v) => v.name !== _name)
+    })
+    ap.value.on('play', () => {
+        const name = ap.value?.list.audios[ap.value.list.index].name as string
+        props.view.setTitle(name)
+    })
+    ap.value.on('listshow', () => {
+        isAPlayerListShow.value = true
+    })
+    ap.value.on('listhide', () => {
+        isAPlayerListShow.value = false
+    })
+}
+
+onMounted(() => {
+    currentFiles.value = [...currentFiles.value.reverse()]
+    initAPlayerMiao()
 })
-    vueApp
-});
 
 onUnmounted(() => {
-    ap.destroy()
+    vueApp.unmount()
+    ap?.value?.destroy()
 })
 </script>
 
 <style scoped lang="scss">
 .miaoMusic-container {
+    position: relative;
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
-
-    .miaoMusic-main {
-        padding-bottom: 88px;
-    }
 }
 </style>
 <style lang="scss">
 .aplayer {
     display: flex;
     flex-direction: column-reverse;
-    position: fixed;
+    position: absolute;
     bottom: 10px;
     width: -webkit-fill-available;
+    .aplayer-icon-order,
+    .aplayer-icon-loop {
+        display: none !important;
+    }
 }
 </style>

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

@@ -3,7 +3,7 @@
     font-family: Arial, Helvetica, sans-serif;
     margin: 5px;
     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .07), 0 1px 5px 0 rgba(0, 0, 0, .1);
-    border-radius: 2px;
+    border-radius: 5px;
     overflow: hidden;
     -webkit-user-select: none;
     -moz-user-select: none;
@@ -22,10 +22,10 @@
     height: 100%
 }
 
-.aplayer svg circle,
+/* .aplayer svg circle,
 .aplayer svg path {
     fill: #fff
-}
+} */
 
 .aplayer.aplayer-withlist .aplayer-info {
     border-bottom: 1px solid #e9e9e9
@@ -427,11 +427,11 @@
     fill: #000
 }
 
-.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-menu,
+/* .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-menu,
 .aplayer .aplayer-info .aplayer-controller .aplayer-time.aplayer-time-narrow .aplayer-icon-menu,
 .aplayer .aplayer-info .aplayer-controller .aplayer-time.aplayer-time-narrow .aplayer-icon-mode {
     display: none
-}
+} */
 
 .aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap {
     position: relative;
@@ -556,9 +556,9 @@
 
 .aplayer .aplayer-list {
     overflow: auto;
-    transition: all .5s ease;
+    transition: all .35s ease;
     will-change: height;
-    display: none;
+    /* display: none; */
     overflow: hidden
 }
 
@@ -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,70 +1,164 @@
 <template>
-    <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">
-            <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"
+    <div class="aplayer-list-top">
+        <div @click="loopModeToggle" class="aplayer-list-top-loopMode">
+            <component
+                :is="loopModeMap[loopMode].icon"
+                class="aplayer-list-top-loopMode-icon"></component>
+            <span class="aplayer-list-top-loopMode-name">
+                {{ loopModeMap[loopMode].name }}
+            </span>
+        </div>
+        <div class="aplayer-list-top-buttons">
+            <component :is="AddCircleOutline" class="aplayer-list-top-buttons-icon"></component>
+        </div>
+        <span></span>
+    </div>
+    <ol
+        :style="{ maxHeight: ap.options.listMaxHeight }"
+        :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"
                 :key="element.id">
-                    <span class="aplayer-list-cur" :style="{ backgroundColor: apTheme }"></span>
+                <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
+                        v-if="isVideo(element)"
+                        class="aplayer-list-control-btn aplayer-list-control-btn-hover aplayer-list-control-btn-play"
+                        @click.stop="onPlayVideo(element)">
+                        <VideocamOutline 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">
+                    <div
+                        class="aplayer-list-control-btn aplayer-list-control-btn-hover aplayer-list-control-btn-play"
+                        @click.stop="switchAudio(index)">
+                        <component
+                            :is="
+                                activeAudioIndex == index && !isPaused
+                                    ? PauseOutline
+                                    : PlayOutline
+                            "
+                            class="aplayer-list-control-btn-svg"></component>
+                    </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
+                        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
+                        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"
+                    <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
+                        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>
+                <span
+                    class="aplayer-list-author"
+                    v-show="element.artist !== 'Audio artist1'">
+                    {{ element.artist }}
+                </span>
             </li>
-            </miaoLazyDiv>
+            <!-- </miaoLazyDiv> -->
         </VueDraggable>
     </ol>
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, onMounted, ref } from 'vue';
-import { ChevronUpOutline, ChevronDownOutline, CloseOutline, ReorderFourOutline, PlayOutline, HeartOutline } from '@vicons/ionicons5';
+import { computed, nextTick, onMounted, ref } from 'vue'
+import {
+    ChevronUpOutline,
+    ChevronDownOutline,
+    CloseOutline,
+    ReorderFourOutline,
+    PlayOutline,
+    HeartOutline,
+    VideocamOutline,
+    PauseOutline,
+    ListCircleOutline,
+    ListOutline,
+    HeadsetOutline,
+    LogoOctocat,
+    AddCircleOutline
+} from '@vicons/ionicons5'
+
 import { VueDraggable } from 'vue-draggable-plus'
-import miaoLazyDiv from '@/components/miaoLazyDiv.vue';
-import apType, { audioType } from '../types/ap';
+// 与vue-draggable冲突
+// import miaoLazyDiv from '@/components/miaoLazyDiv.vue';
+import apType, { audioType } from '../types/ap'
 
 const props = defineProps<{
     ap: apType
-    onDragItemStart: () => void,
+    onDragItemStart: () => void
     onDragItemEnd: () => void
+    onPlayVideo: (element: audioType) => void
 }>()
 
+const apRef = ref(props.ap)
+
 const ol = ref<HTMLOListElement>()
 
 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)
+const isPaused = ref(false)
+
+props.ap.on('play', () => {
+    nextTick(() => {
+        isPaused.value = false
+    })
+})
+
+props.ap.on('pause', () => {
+    isPaused.value = true
+})
 
 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 = () => {
@@ -72,7 +166,7 @@ const refresh = () => {
     refreshKey.value = Math.random()
     nextTick(() => {
         ol.value?.scrollTo({
-            top,
+            top
         })
     })
 }
@@ -82,6 +176,12 @@ props.ap.on('listadd', refresh)
 
 const switchAudio = (index: number) => {
     if (index === activeAudioIndex.value) {
+        if (props.ap.paused) {
+            props.ap.play()
+        } else {
+            props.ap.pause()
+        }
+        props.ap.paused = props.ap.paused
         return
     }
     props.ap.list.switch(index)
@@ -96,33 +196,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();
-        _item && arr.push(_item);
+        const _item = arr.shift()
+        _item && arr.push(_item)
     } else {
-        const pre: number = (len - 1 + index) % len;
-        const _pre = arr[index];
-        arr[index] = arr[pre];
-        arr[pre] = _pre;
+        const pre: number = (len - 1 + index) % len
+        const _pre = arr[index]
+        arr[index] = arr[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();
-        _item && arr.unshift(_item);
+        const _item = arr.pop()
+        _item && arr.unshift(_item)
     } else {
-        const pre: number = (len + 1 + index) % len;
-        const _pre = arr[index];
-        arr[index] = arr[pre];
-        arr[pre] = _pre;
+        const pre: number = (len + 1 + index) % len
+        const _pre = arr[index]
+        arr[index] = arr[pre]
+        arr[pre] = _pre
     }
     listRefreshIndex(curr)
 }
@@ -144,13 +244,61 @@ const { onDragStart, onDragEnd } = (() => {
         }
     }
 })()
-// const onDragEnd = (_e: any) => {
-//     const curr = props.ap.list.audios[props.ap.list.index]
-//     listRefreshIndex(curr)
-// }
+
+const isVideo = (element: audioType) => {
+    for (let end of ['mp4']) {
+        if (element.name.endsWith(end)) {
+            return true
+        }
+    }
+    return false
+}
+const loopModeMap = {
+    0: { name: '列表循环', icon: ListCircleOutline },
+    1: { name: '单曲循环', icon: HeadsetOutline },
+    2: { name: '列表播放', icon: ListOutline },
+    3: { name: '随机播放', icon: LogoOctocat }
+}
+
+const loopMode = computed(() => {
+    if (apRef.value.options.order === 'list') {
+        switch (apRef.value.options.loop) {
+            case 'all':
+                return 0
+            case 'one':
+                return 1
+            case 'none':
+                return 2
+        }
+    }
+    return 3
+})
+
+const loopModeToggle = () => {
+    const ops = apRef.value.options
+    if (ops.order === 'random') {
+        ops.order = 'list'
+    } else {
+        switch (ops.loop) {
+            case 'all': {
+                ops.loop = 'one'
+                break
+            }
+            case 'one': {
+                ops.loop = 'none'
+                break
+            }
+            case 'none': {
+                ops.loop = 'all'
+                ops.order = 'random'
+                break
+            }
+        }
+    }
+}
 
 onMounted(() => {
-    // console.log(props.ap)
+    console.log(props.ap)
 })
 </script>
 
@@ -188,7 +336,7 @@ onMounted(() => {
         &-svg {
             width: 20px;
             aspect-ratio: 1;
-            transition: all .1s ease;
+            transition: all 0.1s ease;
         }
     }
 
@@ -200,6 +348,60 @@ onMounted(() => {
         }
     }
 }
+
+.aplayer-list-top {
+    height: 30px;
+    // width: auto;
+    // max-width: 100%;
+    position: relative;
+    border-bottom: 1px solid #e9e9e9;
+    display: flex;
+    justify-items: baseline;
+    align-items: center;
+    padding: 0 10px;
+    .aplayer-list-top-loopMode {
+        text-align: center;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        float: left;
+        // background-color: #f9f9f9;
+        scale: 1;
+        transition: scale 0.15s ease;
+        &-icon {
+            width: 20px;
+            aspect-ratio: 1;
+            transform: translateY(1px);
+            fill: #000;
+            path {
+                fill: #000 !important;
+            }
+        }
+        &-name {
+            margin-left: 5px;
+        }
+        &:hover {
+            scale: 1.1;
+        }
+    }
+    .aplayer-list-top-buttons {
+        display: inline-flex;
+        position: absolute;
+        right: 10px;
+        align-items: center;
+        justify-content: center;
+        scale: 1;
+        transition: scale 0.15s ease;
+        &-icon {
+            width: 20px;
+            aspect-ratio: 1;
+        }
+        &:hover {
+            scale: 1.1;
+        }
+    }
+}
 </style>
 
 <style lang="scss">
@@ -221,11 +423,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 {

src/plugins/miaoMusicPlayer/src/loopIcon.vue

@@ -0,0 +1,11 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 29 32">
+        <path
+            d="M9.333 9.333h13.333v4l5.333-5.333-5.333-5.333v4h-16v8h2.667v-5.333zM22.667 22.667h-13.333v-4l-5.333 5.333 5.333 5.333v-4h16v-8h-2.667v5.333z"></path>
+    </svg>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped></style>

src/plugins/miaoMusicPlayer/src/main.vue

@@ -0,0 +1,25 @@
+<template>
+    <div class="miaoMusic-main">
+        <div class="fd" v-if="false">
+            {{ fakeData }}
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import apType from '../types/ap'
+
+const props = defineProps<{
+    ap: apType
+}>()
+
+const fakeData = ref(new Array(10000).fill('我会一直盯着你'))
+console.log(props.ap)
+</script>
+
+<style lang="scss" scoped>
+.miaoMusic-main {
+    padding-bottom: 88px;
+}
+</style>

src/plugins/miaoMusicPlayer/types/ap.ts

@@ -9,6 +9,7 @@ export type audioType = {
 }
 
 type apType = {
+    paused: boolean
     list: {
         audios: audioType[]
         index: number
@@ -16,25 +17,28 @@ type apType = {
         remove: (index: number) => void
         add: (audios: audioType[]) => void
         refreshAudioIndex: () => void
+        hide: () => void
     }
     container: HTMLDivElement
     on: (event: string, callback: () => void) => void
     options: {
-        audio: audioType[],
-        autoplay: boolean,
-        "volume": number,
-        "theme": string,
-        "mini": boolean,
-        "fixed": boolean,
-        "mutex": boolean,
-        "lrcType": number,
-        "preload": "auto",
-        "loop": "all",
-        "order": "list",
-        "listMaxHeight": string,
-        "storageName": "aplayer-setting"
-    },
+        audio: audioType[]
+        autoplay: boolean
+        volume: number
+        theme: string
+        mini: boolean
+        fixed: boolean
+        mutex: boolean
+        lrcType: number
+        preload: 'auto'
+        loop: 'all' | 'one' | 'none'
+        order: 'list' | 'random'
+        listMaxHeight: string
+        storageName: 'aplayer-setting'
+    }
     destroy: () => {}
+    pause: () => void
+    play: () => void
 }
 
 export default apType

src/plugins/miaoVideoPlayer/export.ts

@@ -15,14 +15,15 @@ const pluginConfig: registerComponentOption = {
             return false
         }
         for (let i of vFiles) {
-            for (let s of ['mp4', 'mp3']) {
+            for (let s of ['mp4']) {
                 if (i.name.endsWith(s)) {
                     return true
                 }
             }
         }
         return false
-    }
+    },
+    priority: 6
 }
 
 export default pluginConfig

src/plugins/miaoVideoPlayer/miaoVideoPlayer.vue

@@ -11,7 +11,7 @@ import { VirtualFile } from '@/class/VirtualDirectory'
 import miaoDropHandler from '@/components/miaoDropHandler.vue'
 import { onBeforeUnmount, onMounted, ref } from 'vue'
 import XGPlayer from 'xgplayer'
-import '@/style/xgplayer.scss'
+import './style/xgplayer.scss'
 import TextTrack from 'xgplayer/es/plugins/track'
 import 'xgplayer/es/plugins/track/index.css'
 import axios from 'axios'

src/plugins/miaoVideoPlayer/style/xgplayer.scss

@@ -25,6 +25,7 @@
 	z-index: 10;
 	background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.37), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75));
 	transition: opacity 0.5s ease, visibility 0.5s ease;
+	cursor: default;
 }
 .xgplayer .xgplayer-controls.show {
 	display: block;

vite.config.ts

@@ -5,69 +5,72 @@ import { resolve } from "path";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-	base: "./",
+    base: './',
     plugins: [
         vue()
         // viteSingleFile()
     ],
     resolve: {
         alias: {
-			"@": resolve(__dirname, "src")
+            '@': resolve(__dirname, 'src')
         }
     },
     server: {
         proxy: {
-			"/get": {
-				target: "http://127.0.0.1:17705",
+            '/get': {
+                target: 'http://127.0.0.1:17705',
                 changeOrigin: true,
-				rewrite: path => path.replace(/^\/get/, "/get")
+                rewrite: (path) => path.replace(/^\/get/, '/get')
             },
 
-			"/upload": {
-				target: "http://127.0.0.1:17705",
+            '/upload': {
+                target: 'http://127.0.0.1:17705',
                 changeOrigin: true,
-				rewrite: path => path.replace(/^\/upload/, "/upload")
+                rewrite: (path) => path.replace(/^\/upload/, '/upload')
             },
 
-			"/delete": {
-				target: "http://127.0.0.1:17705",
+            '/delete': {
+                target: 'http://127.0.0.1:17705',
                 changeOrigin: true,
-				rewrite: path => path.replace(/^\/delete/, "/delete")
+                rewrite: (path) => path.replace(/^\/delete/, '/delete')
             },
-			"/query": {
-				target: "http://127.0.0.1:17705",
+            '/query': {
+                target: 'http://127.0.0.1:17705',
                 changeOrigin: true,
-				rewrite: path => path.replace(/^\/query/, "/query")
+                rewrite: (path) => path.replace(/^\/query/, '/query')
             },
-			"/rename": {
-				target: "http://127.0.0.1:17705",
+            '/rename': {
+                target: 'http://127.0.0.1:17705',
                 changeOrigin: true,
-				rewrite: path => path.replace(/^\/rename/, "/rename")
+                rewrite: (path) => path.replace(/^\/rename/, '/rename')
             },
-			"/cut": {
-				target: "http://127.0.0.1:17705",
+            '/cut': {
+                target: 'http://127.0.0.1:17705',
                 changeOrigin: true,
-				rewrite: path => path.replace(/^\/cut/, "/cut")
+                rewrite: (path) => path.replace(/^\/cut/, '/cut')
             },
-			"/mkdir": {
-				target: "http://127.0.0.1:17705",
+            '/mkdir': {
+                target: 'http://127.0.0.1:17705',
                 changeOrigin: true,
-				rewrite: path => path.replace(/^\/mkdir/, "/mkdir")
+                rewrite: (path) => path.replace(/^\/mkdir/, '/mkdir')
             }
         }
     },
     build: {
         rollupOptions: {
             input: {
-				main: "index.html"
+                main: 'index.html'
             },
             output: {
+                entryFileNames: 'assets/[name]-[hash].js',
+                chunkFileNames: 'assets/chunk-[name]-[hash].js',
+                assetFileNames: 'assets/[name]-[hash][extname]',
                 manualChunks(id) {
-					if (id.includes("export.ts") && id.includes('plugins')) {
-						return "pluginExports";
+                    if (id.includes('export.ts') && id.includes('plugins')) {
+                        return 'pluginExports'
                     }
                 }
             }
         }
     }
-});
+})